/* NordicSpa — base styles */

:root {
	/* TODO: nahradit přesnými hex kódy z XD, zatím vizuální odhad ze screenshotu */
	--font-primary: 'Montserrat', system-ui, -apple-system, sans-serif;
	--font-heading: 'Panchang', var(--font-primary);
	--color-black: #0a0a0a;
	--color-white: #ffffff;
	--color-gray: #9a9a9a;
	--color-gray-dark: #3a3a3a;
	--color-gold: #cca075; /* potvrzeno z XD exportu (What's news, meta labels) */
	--color-gold-alt: #c9945f; /* potvrzeno z XD exportu (Favourite hot tubs, Our technology) */
	--color-surface: #141414;
	--header-height: 84px;
	--container-padding: 56px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

/* Odkazy na kotvy (např. "More specifications") dojedou plynule. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: var(--font-primary);
	/* Web je celý tmavý — bez toho prosvítá pod sekcemi bílá. */
	background: var(--color-black);
	color: var(--color-white);
	line-height: 1.5;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

button {
	font: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Text jen pro čtečky obrazovky. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Header ---------- */

.site-header {
	background: var(--color-black);
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header__inner {
	max-width: 2560px;
	margin: 0 auto;
	height: var(--header-height);
	padding: 0 var(--container-padding);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.site-header__nav ul {
	display: flex;
	align-items: center;
	gap: 40px;
}

.site-header__nav a {
	color: var(--color-white);
	font-size: 16px;
	font-weight: 500;
}

.site-header__logo {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.site-header__logo-img {
	display: block;
	width: auto;
	height: 26px;
}

.site-header__logo-divider {
	width: 1px;
	height: 32px;
	background: var(--color-gray-dark);
}

.site-header__logo-tagline {
	color: var(--color-gray);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
}

.site-header__right {
	display: flex;
	align-items: center;
	gap: 32px;
}

.site-header__divider {
	width: 1px;
	height: 24px;
	background: var(--color-gray-dark);
}

/* ---------- Přepínač jazyků ---------- */

.lang-switcher {
	position: relative;
}

.lang-switcher__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 16px;
}

/* Vlajka nesmí zúžit — v těsné hlavičce by se z kolečka stal ovál. */
.lang-switcher__flag {
	display: block;
	flex-shrink: 0;
}

.lang-switcher__flag img,
.lang-switcher__flag svg {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.lang-switcher__chevron {
	color: var(--color-gray);
	transition: transform 0.25s ease;
}

.lang-switcher__toggle[aria-expanded='true'] .lang-switcher__chevron {
	transform: rotate(180deg);
}

.lang-switcher__list {
	position: absolute;
	right: 0;
	top: calc(100% + 12px);
	z-index: 20;
	min-width: 190px;
	padding: 6px 0;
	background: #1c1c1c;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.lang-switcher__list[hidden] {
	display: none;
}

.lang-switcher__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 300;
	transition: background 0.2s ease;
}

.lang-switcher__list a:hover {
	background: rgba(255, 255, 255, 0.07);
}

/* V patičce je přepínač menší a rozbaluje se nahoru. */
.lang-switcher--footer .lang-switcher__flag img,
.lang-switcher--footer .lang-switcher__flag svg {
	width: 22px;
	height: 22px;
}

.lang-switcher--footer .lang-switcher__list {
	top: auto;
	bottom: calc(100% + 12px);
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	overflow: hidden;
}

.hero__media,
.hero__image {
	display: block;
	width: 100%;
}

.hero__image {
	aspect-ratio: 2458 / 1202;
	object-fit: cover;
	/* Fotka je vyšší než banner, výřez posunutý dolů drží vanu v záběru. */
	object-position: 50% 62%;
}

.hero__image--placeholder {
	background: linear-gradient(135deg, #2b2b2b, #0a0a0a);
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0) 65%);
	pointer-events: none;
}

.hero__content {
	position: absolute;
	left: var(--container-padding);
	bottom: 9%;
	max-width: 900px;
}

.hero__title-line {
	white-space: nowrap;
}

.hero__title {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-heading);
}

.hero__title-line {
	display: block;
	text-transform: uppercase;
	line-height: 0.95;
}

.hero__title-line--bold {
	font-size: 90px;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.hero__title-line--light {
	font-size: 56px;
	font-weight: 400;
	text-transform: none;
	margin-top: 6px;
}

.hero__cta {
	display: inline-block;
	margin-top: 40px;
	color: var(--color-white);
	font-size: 16px;
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* ---------- What's news ---------- */

.whats-news {
	background: var(--color-black);
	padding-top: 64px;
}

.whats-news__title {
	margin: 0;
	padding: 0 var(--container-padding) 40px;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 40px;
	line-height: 1.1;
}

.whats-news__title-accent {
	color: var(--color-gold);
	font-weight: 400;
}

.whats-news__title-strong {
	color: var(--color-gold);
	font-weight: 700;
}

.whats-news__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.whats-news__item {
	position: relative;
	aspect-ratio: 1023 / 935;
	overflow: hidden;
}

.whats-news__media,
.whats-news__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.whats-news__image {
	object-fit: cover;
}

.whats-news__image--placeholder {
	background: linear-gradient(135deg, #3a3226, #171310);
}

.whats-news__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0) 60%);
	transition: opacity 0.5s ease;
}

.whats-news__image {
	transition: transform 0.6s ease, filter 0.5s ease;
}

.whats-news__item:hover .whats-news__overlay {
	opacity: 0.55;
}

.whats-news__item:hover .whats-news__image {
	filter: brightness(1.1);
	transform: scale(1.03);
}

.whats-news__content {
	position: absolute;
	left: 56px;
	bottom: 56px;
	right: 56px;
}

.whats-news__name {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 60px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
}

.whats-news__meta {
	margin: 8px 0 0;
	color: var(--color-gold);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.whats-news__link {
	display: inline-block;
	margin-top: 24px;
	color: var(--color-white);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* ---------- Favourite hot tubs ---------- */

.favourite-hot-tubs {
	background: var(--color-black);
	padding: 80px var(--container-padding);
}

.favourite-hot-tubs__title {
	margin: 0 0 40px;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 40px;
	line-height: 1.1;
	color: var(--color-white);
}

.favourite-hot-tubs__title-regular {
	font-weight: 400;
}

.favourite-hot-tubs__title-strong {
	font-weight: 700;
}

.favourite-hot-tubs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.fav-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--color-surface);
	border-radius: 24px;
	padding: 48px 32px 40px;
	overflow: hidden;
	/* Název se měří podle šířky karty, ne podle okna — karty jsou v mřížce
	   i ve slideru různě široké. */
	container-type: inline-size;
}

.fav-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 65%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.fav-card:hover::before {
	opacity: 1;
}

.fav-card__label {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--color-gold-alt);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.fav-card__title {
	position: relative;
	z-index: 1;
	margin: 4px 0 0;
	color: var(--color-white);
	font-family: var(--font-heading);
	/* Poměr k šířce karty — delší názvy (POLARIS, GENESIS) se tak vejdou
	   i tam, kde by pevných 70 px přeteklo. */
	font-size: 14.2cqw;
	font-weight: 400;
	line-height: 0.9;
	text-transform: uppercase;
}

.fav-card__media {
	position: relative;
	z-index: 1;
	/* Fotka má název jen lehce nakousnout, ne ho zakrýt. */
	margin-top: -14px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.fav-card__image {
	width: 80%;
	max-width: 340px;
}

.fav-card__image--placeholder {
	aspect-ratio: 3 / 4;
	border-radius: 16px;
	background: linear-gradient(160deg, #3a3a3a, #1c1c1c);
}

/* Ovládání slideru se objeví až na mobilu. */
.favourite-hot-tubs__next,
.favourite-hot-tubs__progress {
	display: none;
}

/* ---------- Why NordicSpa ---------- */

.why-nordic {
	position: relative;
	background: var(--color-black);
	padding-bottom: 64px;
}

.why-nordic__inner {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	min-height: 780px;
}

.why-nordic__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px var(--container-padding);
}

.why-nordic__eyebrow {
	margin: 0 0 8px;
	color: var(--color-gold-alt);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.why-nordic__title {
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	font-family: var(--font-heading);
	font-size: 50px;
	line-height: 1.1;
	color: var(--color-white);
	white-space: nowrap;
}

.why-nordic__title-bold {
	font-weight: 700;
}

.why-nordic__title-light {
	font-weight: 400;
}

.why-nordic__text {
	margin: 0;
	max-width: 380px;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-primary);
	font-size: 17px;
	font-weight: 100;
	line-height: 1.5;
}

.why-nordic__media,
.why-nordic__image {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.why-nordic__image {
	display: block;
	object-fit: cover;
}

.why-nordic__image--placeholder {
	background: linear-gradient(135deg, #1c2a33, #0a0a0a);
}

/* ---------- Pruh vlastností (sdílená komponenta) ---------- */

.feature-strip {
	position: relative;
	z-index: 2;
	margin-inline: var(--container-padding);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Na homepage přesahuje přes fotku nad sebou. */
.feature-strip--overlap {
	margin-top: -140px;
}

.feature-strip__item {
	flex: 1 1 180px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 124px;
	padding: 24px;
	background: var(--color-black);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--color-white);
}

.feature-strip__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.feature-strip__label {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 100;
	color: rgba(255, 255, 255, 0.85);
}

.feature-strip__value {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-gold-alt);
}

.feature-strip__chevron {
	flex-shrink: 0;
	color: var(--color-gold-alt);
}

/* Samostatná sekce na detailu vířivky. */
.feature-strip-section {
	background: var(--color-black);
	padding: 70px 0 90px;
}

/* ---------- Our technology ---------- */

.our-tech {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	background: var(--color-black);
	padding: 40px 0;
}

.our-tech__media {
	height: 100%;
}

.our-tech__image {
	width: 100%;
	height: 100%;
	min-height: 720px;
	object-fit: cover;
	border-radius: 0 4px 4px 0;
}

.our-tech__image--placeholder {
	background: linear-gradient(135deg, #2f3a3f, #10161a);
}

.our-tech__content {
	padding: 40px var(--container-padding) 40px 0;
	max-width: 560px;
}

.our-tech__title {
	margin: 0 0 32px;
	display: flex;
	flex-direction: column;
	font-family: var(--font-heading);
	font-size: 40px;
	line-height: 1.15;
}

.our-tech__title-accent {
	color: var(--color-gold-alt);
	font-weight: 600;
}

.our-tech__title-light {
	color: var(--color-white);
	font-weight: 400;
}

.tech-accordion {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.tech-accordion__item {
	max-width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	transition: border-color 0.3s ease;
}

.tech-accordion__item.is-open {
	align-self: stretch;
	border-radius: 18px;
}

.tech-accordion__item:hover {
	border-color: rgba(255, 255, 255, 0.32);
}

.tech-accordion__trigger {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 20px 28px;
	color: var(--color-white);
	text-align: left;
}

.tech-accordion__icon {
	display: flex;
	flex-shrink: 0;
	color: var(--color-white);
}

/* "+" se po otevření změní na "×" */
.tech-accordion__icon svg {
	transition: transform 0.3s ease;
}

.tech-accordion__item.is-open .tech-accordion__icon svg {
	transform: rotate(45deg);
}

.tech-accordion__label {
	font-family: var(--font-primary);
	font-size: 17px;
	font-weight: 300;
	white-space: nowrap;
}

.tech-accordion__item.is-open .tech-accordion__label {
	font-size: 20px;
}

.tech-accordion__panel {
	padding: 0 28px 24px;
}

.tech-accordion__text {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.45;
}

.tech-accordion__text strong {
	font-weight: 600;
}

/* Fotky v položkách a posuvník patří jen k mobilnímu slideru. */
.tech-accordion__media,
.tech-progress {
	display: none;
}

/* ---------- Our story ---------- */

.our-story {
	position: relative;
	overflow: hidden;
}

.our-story__media,
.our-story__image {
	display: block;
	width: 100%;
}

.our-story__image {
	aspect-ratio: 1363 / 930;
	max-height: 940px;
	object-fit: cover;
}

.our-story__image--placeholder {
	background: linear-gradient(140deg, #12303d, #05080a);
}

.our-story__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 18%, rgba(0, 0, 0, 0) 42%);
	pointer-events: none;
}

.our-story__content {
	position: absolute;
	left: var(--container-padding);
	top: 50%;
	transform: translateY(-50%);
	max-width: 460px;
}

.our-story__eyebrow {
	margin: 0 0 6px;
	color: var(--color-gold-alt);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.our-story__title {
	margin: 0 0 18px;
	display: flex;
	flex-direction: column;
	font-family: var(--font-heading);
	font-size: 50px;
	line-height: 1.1;
	color: var(--color-white);
	white-space: nowrap;
}

.our-story__title-bold {
	font-weight: 700;
}

.our-story__title-light {
	font-weight: 400;
}

.our-story__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-family: var(--font-primary);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.45;
}

.our-story__cta {
	display: inline-block;
	margin-top: 32px;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--color-black);
}

.site-footer__inner {
	max-width: 2560px;
	margin: 0 auto;
	min-height: 90px;
	padding: 20px var(--container-padding);
	display: flex;
	align-items: center;
	gap: 48px;
}

.site-footer__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.site-footer__logo-img {
	display: block;
	width: auto;
	height: 22px;
}

/* Tagline je v patičce jen na mobilu. */
.site-footer__logo-divider,
.site-footer__logo-tagline {
	display: none;
}

.site-footer__nav ul {
	display: flex;
	align-items: center;
	gap: 36px;
}

.site-footer__nav a {
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 300;
}

.site-footer__right {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}

.site-footer__copyright {
	margin: 0;
	color: rgba(255, 255, 255, 0.83);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 300;
}

/* ---------- Detail vířivky — hlavní banner ---------- */

.product-hero {
	position: relative;
	overflow: hidden;
}

.product-hero__media,
.product-hero__image {
	display: block;
	width: 100%;
}

.product-hero__image {
	aspect-ratio: 1600 / 1030;
	max-height: 1030px;
	object-fit: cover;
}

/* Video v hlavičce má stejný ořez jako fotka, než se načte, drží černou. */
.product-hero__video {
	background: var(--color-black);
}

.product-hero__image--placeholder {
	background: linear-gradient(135deg, #4a4740, #14161a);
}

/*
 * Hlavička je fotka za bílého dne, takže text potřebuje výraznější podklad
 * než dřívější tmavé video — odtud i přítmí zleva pod nadpisem.
 */
.product-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 28%, rgba(0, 0, 0, 0) 58%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 32%, rgba(0, 0, 0, 0) 55%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20%);
	pointer-events: none;
}

.product-hero__breadcrumbs {
	position: absolute;
	top: 28px;
	left: var(--container-padding);
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 300;
}

.product-hero__crumb-sep {
	display: flex;
	color: rgba(255, 255, 255, 0.6);
}

.product-hero__content {
	position: absolute;
	left: var(--container-padding);
	bottom: 16%;
	max-width: 900px;
}

.product-hero__eyebrow {
	margin: 0 0 4px;
	color: var(--color-gold-alt);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.product-hero__title {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.product-hero__subtitle {
	margin: 4px 0 0;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(26px, 2.7vw, 38px);
	font-weight: 300;
	line-height: 1.1;
}

.product-hero__price {
	margin: 34px 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-primary);
	font-size: 19px;
	font-weight: 300;
}

/* ---------- Konfigurátor barev ---------- */

.customize {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: 60px;
	background: var(--color-black);
	padding: 90px var(--container-padding);
}

.customize__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.customize__media {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Vrstvy vany: opláštění dole, akrylová vana přes něj. Poměr plochy
   a posun i šířku obou vrstev (v %) nastavuje šablona podle dat modelu,
   hodnoty odpovídají rozložení na spahouse.cz. */
.customize__layers {
	position: relative;
	width: 100%;
	max-width: 620px;
	aspect-ratio: var(--layers-ratio, 600 / 518);
}

.customize__layer {
	position: absolute;
	height: auto;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.customize__layer--cabinet {
	z-index: 0;
	left: var(--cabinet-left, 0%);
	top: var(--cabinet-top, 0%);
	width: var(--cabinet-width, 100%);
}

.customize__layer--shell {
	z-index: 1;
	left: var(--shell-left, 0%);
	top: var(--shell-top, 0%);
	width: var(--shell-width, 100%);
}

/* Nová barva se nad starou prolne z průhlednosti. */
.customize__layer.is-entering {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.customize__layer {
		transition: none;
	}
}

/* Vzorník je posazený přes fotku, nahoře vana, dole opláštění. */
.swatches {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	max-width: calc(100% - 4%);
	align-items: center;
	gap: 12px;
	padding: 10px 20px 10px 12px;
	border-radius: 999px;
	background: rgba(32, 32, 32, 0.92);
}

.swatches--shell {
	top: 4%;
	left: 2%;
}

.swatches--cabinet {
	bottom: 14%;
	left: 46%;
}

.swatches__item {
	display: flex;
	padding: 3px;
	border: 1px solid transparent;
	border-radius: 50%;
}

.swatches__item.is-selected {
	border-color: var(--color-gold-alt);
}

.swatches__dot {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
}

.swatches__item--extra {
	display: none;
}

.swatches.is-expanded .swatches__item--extra {
	display: flex;
}

.swatches__more {
	padding: 0 2px;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 600;
}

.swatches__more-close,
.swatches.is-expanded .swatches__more-open {
	display: none;
}

.swatches.is-expanded .swatches__more-close {
	display: inline;
}

.customize__text p {
	margin: 0 0 1em;
}

.customize__text p:last-child {
	margin-bottom: 0;
}

.customize__content {
	max-width: 560px;
}

.customize__eyebrow {
	margin: 0 0 6px;
	color: var(--color-gold-alt);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.customize__title {
	margin: 0 0 22px;
	display: flex;
	flex-direction: column;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(38px, 4vw, 58px);
	line-height: 1.08;
}

.customize__title-bold {
	font-weight: 700;
}

.customize__title-light {
	font-weight: 300;
}

.customize__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-primary);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.5;
}

/* ---------- Highlights ---------- */

.highlights {
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: 60px;
	align-items: center;
	background: var(--color-black);
	padding: 40px var(--container-padding) 110px;
}

.highlights__title {
	margin: 0 0 16px;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(38px, 4vw, 58px);
	font-weight: 700;
	line-height: 1.05;
}

.highlights__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-primary);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.5;
}

.highlights__link {
	display: inline-block;
	margin-top: 28px;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.highlights__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.highlights__stat {
	min-height: 165px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px 32px;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.highlights__stat-value {
	margin: 0 0 10px;
	color: var(--color-gold-alt);
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
}

.highlights__stat-label {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.35;
}

/* ---------- Galerie ---------- */

.gallery {
	position: relative;
	overflow: hidden;
	background: var(--color-black);
}

.gallery__media,
.gallery__image {
	display: block;
	width: 100%;
}

.gallery__image {
	aspect-ratio: 1227 / 760;
	max-height: 900px;
	object-fit: cover;
}

.gallery__image--placeholder {
	background: linear-gradient(150deg, #3c4247, #171a1c);
}

.gallery__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

.gallery__content {
	position: absolute;
	left: var(--container-padding);
	bottom: 8%;
	/* Šířku drží text, řada náhledů je záměrně širší. */
	max-width: calc(100% - var(--container-padding) * 2);
}

.gallery__title {
	margin: 0 0 10px;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(34px, 3.2vw, 46px);
	font-weight: 700;
	line-height: 1.05;
}

.gallery__text {
	margin: 0;
	max-width: 420px;
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

.gallery__thumbs {
	display: flex;
	gap: 16px;
	margin-top: 32px;
}

.gallery__thumb {
	display: block;
	width: clamp(120px, 11.8vw, 190px);
	aspect-ratio: 17 / 10;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.08);
	transition: border-color 0.25s ease;
}

.gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery__thumb:hover,
.gallery__thumb:focus-visible {
	border-color: var(--color-white);
}

.gallery__thumb--placeholder {
	background: linear-gradient(150deg, #d7d9da, #8f9497);
}

.gallery__link {
	display: inline-block;
	margin-top: 30px;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 300;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.gallery__link[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* ---------- Technologie na detailu vířivky ---------- */

.product-tech {
	background: var(--color-black);
	padding: 70px 0 90px;
}

.product-tech__title {
	margin: 0 0 46px;
	padding-inline: var(--container-padding);
	text-align: center;
	font-family: var(--font-heading);
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.1;
}

.product-tech__title-accent {
	color: var(--color-gold-alt);
	font-weight: 700;
	text-transform: uppercase;
}

.product-tech__title-light {
	color: var(--color-white);
	font-weight: 300;
}

/* Prázdné dlaždice drží místo pro fotky/rendery, které zatím nejsou. */

.product-tech__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

.product-tech__photo,
.product-tech__image {
	display: block;
	width: 100%;
}

.product-tech__image {
	aspect-ratio: 550 / 630;
	object-fit: cover;
	border-radius: 0 8px 8px 0;
	/* Přepnutí fotky po rozbalení technologie se prolne. */
	transition: opacity 0.2s ease;
}

.product-tech__image.is-swapping,
.our-tech__image.is-swapping {
	opacity: 0;
}

.our-tech__image {
	transition: opacity 0.2s ease;
}

.product-tech__image--placeholder {
	background: linear-gradient(140deg, #3a4448, #14181b);
}

.product-tech__list {
	padding-right: var(--container-padding);
	max-width: 560px;
}

/* ---------- Kontaktní formulář (Contact Form 7) ---------- */

/* Pozadí je rozdělené: horní část světlejší, spodní černá. */
.contact {
	background: linear-gradient(180deg, #161616 0%, #161616 58%, var(--color-black) 58%, var(--color-black) 100%);
	padding: 80px var(--container-padding) 100px;
}

.contact__title {
	position: relative;
	margin: 0 0 44px;
	text-align: center;
	font-family: var(--font-heading);
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.1;
	color: var(--color-white);
}

/* Linka pod nadpisem sahá dál než formulář. */
.contact__title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
	width: min(880px, 92%);
	height: 1px;
	background: rgba(255, 255, 255, 0.16);
}

.contact__title-bold {
	font-weight: 700;
}

.contact__title-light {
	font-weight: 300;
}

.contact__lead {
	max-width: 680px;
	margin: 0 auto 40px;
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.55;
	text-align: center;
}

.contact__lead strong {
	display: block;
	margin-bottom: 4px;
	color: var(--color-white);
	font-weight: 600;
}

.contact__form {
	max-width: 680px;
	margin: 0 auto;
}

.contact__notice {
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-primary);
	font-size: 14px;
	text-align: center;
}

.contact-form__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 18px;
}

.contact-field {
	display: block;
	padding: 12px 16px 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	/* Neprůhledné, aby předěl pozadí sekce neprosvítal skrz pole. */
	background: #1c1c1c;
}

.contact-field__label {
	display: block;
	margin-bottom: 4px;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 300;
}

.contact-field__input {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.contact-field__input:focus {
	outline: none;
}

.contact-field__input::placeholder {
	color: rgba(255, 255, 255, 0.35);
	font-weight: 400;
}

/*
 * Telefon je dvojice polí: roletka s mezinárodní předvolbou a samotné
 * číslo. CF7 každé pole obaluje do .wpcf7-form-control-wrap, šířky se
 * proto nastavují na těch obalech.
 */
.contact-field__phone {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.contact-field__phone .wpcf7-form-control-wrap {
	display: block;
	min-width: 0;
}

.contact-field__phone .wpcf7-form-control-wrap:first-child {
	flex: 0 0 76px;
}

.contact-field__phone .wpcf7-form-control-wrap:last-child {
	flex: 1 1 auto;
}

.contact-field__prefix {
	width: 100%;
	padding: 0 16px 0 0;
	border: 0;
	background: none;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	/* Vlastní šipka — nativní by na tmavém poli byla sotva vidět. */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	cursor: pointer;
}

.contact-field__prefix:focus {
	outline: none;
}

/* Roletka se rozbaluje nativně, takže její položky musí být čitelné. */
.contact-field__prefix option {
	background: #1c1c1c;
	color: var(--color-white);
}

.contact-field--textarea {
	padding-bottom: 16px;
}

.contact-field--textarea .contact-field__input {
	min-height: 170px;
	resize: vertical;
}

.contact-form__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
	margin-top: 22px;
}

.contact-form__consent {
	margin: 0;
	max-width: 250px;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.5;
	text-align: right;
}

.contact-form__consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.contact-form__submit {
	min-width: 124px;
	padding: 13px 26px;
	border: 0;
	background: #cd9a6b;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.25s ease;
}

.contact-form__submit:hover {
	background: #d9a878;
}

/* Hlášky pluginu sladit se zbytkem webu. */
.contact .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #e2857a;
	font-family: var(--font-primary);
	font-size: 12px;
}

.contact .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 12px 16px;
	border-color: rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-primary);
	font-size: 13px;
}

/*
 * CF7 vkládá spinner za tlačítko a i skrytý zabírá místo (24 px + okraje),
 * takže by tlačítko nedojelo k pravému kraji formuláře. Sedí proto přes
 * pravou část tlačítka.
 */
.contact-form__footer {
	position: relative;
}

.contact .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 12px;
	z-index: 1;
	width: 18px;
	height: 18px;
	margin: -9px 0 0;
	background-color: rgba(255, 255, 255, 0.3);
}

/* ---------- Podrobné technické parametry ---------- */

.full-specs {
	background: var(--color-black);
	padding: 70px 0 100px;
	scroll-margin-top: var(--header-height);
}

/* Karty i tabulka drží stejnou šířku. */
.full-specs__inner {
	width: 80%;
	max-width: 1500px;
	margin: 0 auto;
}

.full-specs__title {
	margin: 0 0 34px;
	display: flex;
	flex-direction: column;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.12;
}

.full-specs__title-bold {
	font-weight: 700;
}

.full-specs__title-light {
	font-weight: 300;
}

.full-specs__lead {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 300;
}

.full-specs__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 46px;
}

.full-specs__card {
	padding: 22px 20px 26px;
	background: #161616;
}

.full-specs__card-label {
	margin: 0 0 8px;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 300;
}

.full-specs__card-value {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.full-specs__table {
	margin: 0;
}

.full-specs__row {
	display: grid;
	grid-template-columns: minmax(0, 250px) 1fr;
	gap: 24px;
	align-items: center;
	padding: 14px 20px;
}

/* Sudé řádky mají jemný podklad, aby se tabulka dala číst. */
.full-specs__row:nth-child(odd) {
	background: rgba(255, 255, 255, 0.035);
}

.full-specs__row-label {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 300;
}

.full-specs__row-value {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
}

/* Zkracování seznamu je jen mobilní věc, na desktopu je vidět vše. */
.full-specs__more {
	display: none;
}

.full-specs__more-close {
	display: none;
}

/* ---------- Technické parametry ---------- */

.specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	background: var(--color-black);
	padding: 70px 0 90px;
}

.specs__photo,
.specs__image {
	display: block;
	width: 100%;
}

.specs__image {
	aspect-ratio: 416 / 491;
	object-fit: cover;
	border-radius: 0 8px 8px 0;
}

.specs__image--placeholder {
	background: linear-gradient(140deg, #3f4a50, #14181b);
}

.specs__content {
	padding-right: var(--container-padding);
	max-width: 620px;
}

.specs__title {
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(34px, 3.8vw, 54px);
	line-height: 1.06;
}

.specs__title-bold {
	font-weight: 700;
}

.specs__title-light {
	font-weight: 300;
}

.specs__text {
	margin: 0 0 34px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.65;
}

.specs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 210px));
	gap: 22px;
}

.spec-card {
	display: flex;
	flex-direction: column;
	padding: 26px 22px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.015);
}

.spec-card__icon {
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 24px;
}

.spec-card__label {
	margin: 0 0 6px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 300;
}

.spec-card__value {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.specs__link {
	display: inline-block;
	margin-top: 34px;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Dokud není nahraná brožura, odkaz je jen text. */
.specs__link--empty {
	opacity: 0.5;
}

/* ---------- Banner "Favourite for family" ---------- */

.family-banner {
	position: relative;
	overflow: hidden;
	background: var(--color-black);
}

.family-banner__media,
.family-banner__image {
	display: block;
	width: 100%;
}

/* Platí i pro <video>, které tu drží pozadí. */
.family-banner__image {
	aspect-ratio: 1229 / 690;
	max-height: 820px;
	height: auto;
	object-fit: cover;
	background: var(--color-black);
}

.family-banner__image--placeholder {
	background: var(--color-black);
}

.family-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 45%);
	pointer-events: none;
}

.family-banner__content {
	position: absolute;
	left: var(--container-padding);
	bottom: 10%;
	max-width: 620px;
}

/*
 * Tenhle banner má vlastní, chladnější odstíny textu — na modré fotce
 * by zlatá z ostatních sekcí nefungovala.
 */
.family-banner__eyebrow {
	margin: 0 0 8px;
	color: rgba(220, 235, 245, 0.62);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.family-banner__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	color: #cfe3f0;
	font-family: var(--font-heading);
	font-size: clamp(34px, 3.4vw, 48px);
	line-height: 1.12;
}

.family-banner__title-bold {
	font-weight: 700;
}

.family-banner__title-light {
	font-weight: 300;
}

/* ---------- Trysky ---------- */

.nozzles {
	background: var(--color-black);
	padding: 80px var(--container-padding) 100px;
}

/* Nadpis a popis tvoří společný blok vystředěný nad fotkami. */
.nozzles__head {
	display: grid;
	grid-template-columns: auto minmax(0, 420px);
	justify-content: center;
	gap: 48px;
	margin-bottom: 46px;
}

.nozzles__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	font-family: var(--font-heading);
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.15;
}

.nozzles__title-accent {
	color: var(--color-gold-alt);
	font-weight: 700;
}

.nozzles__title-light {
	color: var(--color-white);
	font-weight: 300;
}

.nozzles__text {
	margin: 0;
	align-self: center;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.65;
}

.nozzles__grid {
	display: flex;
	gap: 26px;
}

.nozzle-card {
	position: relative;
	margin: 0;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: 14px;
	/* Poměr zdrojových záběrů (290 x 324) — dlaždice je tak na výšku
	   a z videa ani posteru se nic neořízne. */
	aspect-ratio: 290 / 324;
}

.nozzle-card__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nozzle-card__media--placeholder {
	background: linear-gradient(150deg, #2d5568, #16303d);
}

.nozzle-card__caption {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Aby popiska držela i na světlé fotce. */
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.nozzle-card__title {
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 500;
}

.nozzle-card__subtitle {
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 300;
}

/* Platí i pro <video>, které tu drží pozadí. */

/* ---------- Lightbox ---------- */

body.has-open-lightbox {
	overflow: hidden;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 64px;
	background: rgba(0, 0, 0, 0.92);
}

.lightbox[hidden] {
	display: none;
}

.lightbox__figure {
	margin: 0;
	max-width: min(1100px, 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.lightbox__image {
	max-width: 100%;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 4px;
}

.lightbox__counter {
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.06em;
}

.lightbox__close {
	position: absolute;
	top: 28px;
	right: 32px;
	color: var(--color-white);
	padding: 8px;
}

.lightbox__nav {
	flex-shrink: 0;
	color: var(--color-white);
	padding: 16px;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.lightbox__nav:hover {
	opacity: 1;
}

/* ---------- Hamburger (jen mobil) ---------- */

.site-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.site-header__burger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-white);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.site-header__burger.is-open span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.site-header__burger.is-open span:nth-child(2) {
	opacity: 0;
}

.site-header__burger.is-open span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.site-header__mobile-nav {
	display: none;
	background: var(--color-black);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 8px var(--container-padding) 24px;
}

.site-header__mobile-nav ul {
	display: flex;
	flex-direction: column;
}

.site-header__mobile-nav a {
	display: block;
	padding: 16px 0;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 500;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- Responzivita ---------- */

@media (max-width: 1200px) {
	:root {
		--container-padding: 32px;
	}

	.hero__title-line--bold {
		font-size: 68px;
	}

	.hero__title-line--light {
		font-size: 42px;
	}

	.whats-news__name {
		font-size: 46px;
	}

	/* Detail vířivky: tabulka parametrů využije celou šířku. */
	.full-specs__inner {
		width: auto;
		margin-inline: var(--container-padding);
	}
}

@media (max-width: 1024px) {
	/* ---- Detail vířivky: dvousloupcové sekce pod sebe ---- */

	.customize,
	.highlights,
	.specs,
	.product-tech__body {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.customize {
		padding: 60px var(--container-padding);
	}

	/* Text jde nad vanu. */
	.customize__content {
		order: -1;
		max-width: none;
	}

	.customize__stage {
		align-items: center;
	}

	.highlights {
		padding: 20px var(--container-padding) 70px;
	}

	.specs {
		padding: 60px 0 0;
	}

	.specs__image {
		aspect-ratio: 16 / 10;
		border-radius: 0;
	}

	/* Text a parametry jdou nad fotku. */
	.specs__content {
		order: -1;
		padding-inline: var(--container-padding);
		max-width: none;
	}

	/* Karta parametru: ikona vlevo, popis vpravo. */
	.spec-card {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 20px;
		padding: 22px 24px;
	}

	/* Ikona drží obě řádky popisu vedle sebe. */
	.spec-card__icon {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	.spec-card__label {
		grid-column: 2;
	}

	.spec-card__value {
		grid-column: 2;
	}

	.specs__link {
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 60px;
	}

	.product-tech__image {
		aspect-ratio: 16 / 10;
		border-radius: 0;
	}

	/*
	 * Slider potřebuje sáhnout až ke kraji, odsazení řeší uvnitř.
	 * min-width: 0 je nutné, jinak se položka gridu roztáhne podle
	 * obsahu posuvného pásu a rozšíří celou stránku.
	 */
	.product-tech__list {
		padding: 0;
		min-width: 0;
		max-width: none;
	}

	.product-tech {
		--tech-card-width: 78%;
	}

	.product-tech__photo {
		display: none;
	}

	.nozzles__head {
		grid-template-columns: 1fr;
		justify-content: start;
		gap: 20px;
	}

	/*
	 * Galerie i "Favourite for family": text nesedí přes fotku, ale
	 * pod ní / nad ní na černém pozadí.
	 */
	.gallery,
	.family-banner {
		display: flex;
		flex-direction: column;
	}

	.gallery__overlay,
	.family-banner__overlay {
		display: none;
	}

	.gallery__content,
	.family-banner__content {
		position: static;
		max-width: none;
		padding: 36px var(--container-padding) 44px;
	}

	.family-banner__content {
		order: -1;
		padding-bottom: 32px;
	}

	/* Je to <button>, ten se ani jako blok sám neroztáhne. */
	.gallery__link {
		display: block;
		width: 100%;
		text-align: center;
		margin-top: 26px;
	}

	/* Náhledy se posouvají do strany, ať zůstanou velké. */
	.gallery__thumbs {
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(var(--container-padding) * -1);
		padding-inline: var(--container-padding);
	}

	.gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	.gallery__thumb {
		flex: 0 0 auto;
	}

	/*
	 * Mobil: místo accordionu s jednou velkou fotkou je to slider karet,
	 * každá má vlastní fotku a text je vidět rovnou.
	 */
	.our-tech {
		display: block;
		padding: 48px 0;
		--tech-card-width: 66%;
	}

	.our-tech__media {
		display: none;
	}

	.our-tech__content {
		padding: 0;
		max-width: none;
	}

	.our-tech__title {
		padding-inline: var(--container-padding);
		margin-bottom: 28px;
	}

	/*
	 * Na mobilu je z rozklikávacího seznamu kartový slider. Dřív byly
	 * dvojice selektorů rozházené (".our-tech .tech-accordion" sbíralo
	 * styly určené pro __item, __image i __icon), takže se slider na
	 * homepage vůbec nesestavil.
	 */
	.our-tech .tech-accordion,
	.product-tech .tech-accordion {
		flex-direction: row;
		align-items: stretch;
		gap: 44px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: var(--container-padding);
		/* Bez tohoto by snap zarovnal první kartu až za odsazení. */
		scroll-padding-inline: var(--container-padding);
	}

	.our-tech .tech-accordion::-webkit-scrollbar,
	.product-tech .tech-accordion::-webkit-scrollbar {
		display: none;
	}

	.our-tech .tech-accordion__item,
	.product-tech .tech-accordion__item {
		flex: 0 0 var(--tech-card-width);
		scroll-snap-align: start;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.our-tech .tech-accordion__item:hover,
	.product-tech .tech-accordion__item:hover {
		border-color: transparent;
	}

	.our-tech .tech-accordion__media,
	.product-tech .tech-accordion__media {
		display: block;
	}

	.our-tech .tech-accordion__image,
	.product-tech .tech-accordion__image {
		width: 100%;
		aspect-ratio: 46 / 53;
		object-fit: cover;
		border-radius: 12px;
	}

	.our-tech .tech-accordion__image--placeholder,
	.product-tech .tech-accordion__image--placeholder {
		background: linear-gradient(150deg, #33403f, #131a1c);
	}

	/* Ikona "+" je jen ovládání accordionu, na kartě nedává smysl. */
	.our-tech .tech-accordion__icon,
	.product-tech .tech-accordion__icon {
		display: none;
	}

	.our-tech .tech-accordion__trigger,
	.product-tech .tech-accordion__trigger {
		padding: 26px 0 0;
		cursor: default;
	}

	.our-tech .tech-accordion__label,
	.our-tech .tech-accordion__item.is-open .tech-accordion__label,
	.product-tech .tech-accordion__label,
	.product-tech .tech-accordion__item.is-open .tech-accordion__label {
		font-size: 20px;
		font-weight: 300;
		white-space: normal;
	}

	/* Text je na kartách vždy vidět. */
	.our-tech .tech-accordion__panel,
	.our-tech .tech-accordion__panel[hidden],
	.product-tech .tech-accordion__panel,
	.product-tech .tech-accordion__panel[hidden] {
		display: block;
		padding: 20px 0 0;
	}

	.our-tech .tech-accordion__text,
	.product-tech .tech-accordion__text {
		font-size: 16px;
		line-height: 1.55;
	}

	.tech-progress {
		display: block;
		position: relative;
		width: 160px;
		height: 8px;
		margin: 36px auto 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.12);
		overflow: hidden;
	}

	.tech-progress__thumb {
		display: block;
		width: 40%;
		height: 100%;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.45);
		transition: transform 0.15s ease-out;
	}

	/* Fotka jde nad text a text ji zespodu lehce překrývá. */
	.why-nordic__inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.why-nordic__media {
		order: -1;
		min-height: 0;
		aspect-ratio: 1 / 1;
	}

	.why-nordic__content {
		margin-top: -84px;
		padding: 0 var(--container-padding) 32px;
	}

	.why-nordic__title,
	.our-story__title {
		white-space: normal;
	}

	/* Na mobilu už pruh nepřesahuje přes fotku. */
	.feature-strip--overlap {
		margin-top: 32px;
	}

	/* Karty se mění na vodorovný slider. */
	.favourite-hot-tubs {
		position: relative;
		padding-inline: 0;
		--fav-card-width: 72%;
	}

	.favourite-hot-tubs__title {
		padding-inline: var(--container-padding);
		text-align: left;
		display: flex;
		flex-direction: column;
	}

	.favourite-hot-tubs__grid {
		display: flex;
		gap: 24px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: var(--container-padding);
	}

	.favourite-hot-tubs__grid::-webkit-scrollbar {
		display: none;
	}

	.fav-card {
		flex: 0 0 var(--fav-card-width);
		scroll-snap-align: center;
	}

	/*
	 * Jedno tlačítko pro posun slideru; leží u pravého dolního rohu první karty,
	 * proto se dopočítává ze stejné šířky karty jako .fav-card výše.
	 */
	.favourite-hot-tubs__next {
		display: block;
		position: absolute;
		bottom: 100px;
		right: calc(100% - var(--container-padding) - var(--fav-card-width) + 24px);
		color: var(--color-white);
	}

	.favourite-hot-tubs__progress {
		display: block;
		position: relative;
		width: 160px;
		height: 6px;
		margin: 32px auto 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.12);
		overflow: hidden;
	}

	.favourite-hot-tubs__progress-thumb {
		display: block;
		width: 40%;
		height: 100%;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.5);
		transition: transform 0.15s ease-out;
	}
}

@media (max-width: 900px) {
	/* ---- Detail vířivky ---- */

	/* Statistiky se vejdou po dvou, poslední se roztáhne. */
	.highlights__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Na užší obrazovce je karta na šířku: hodnota vlevo, popisek vpravo. */
	.highlights__stat {
		min-height: 0;
		display: grid;
		/* Sloupec s hodnotou se řídí obsahem — procentní šířka ho dřív
		   uřízla a "600L" lezlo do popisku. */
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 20px;
		padding: 22px 24px;
	}

	.highlights__stat-value {
		margin: 0;
	}

	.highlights__stat:last-child {
		grid-column: 1 / -1;
	}

	/* Trysky: dlaždice po dvou pod sebou. */
	.nozzles__grid {
		flex-wrap: wrap;
		gap: 14px;
	}

	.nozzle-card {
		flex: 1 1 calc(50% - 7px);
	}

	/* Parametry: karty po dvou. */
	.full-specs__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.specs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Desktopové menu nahradí hamburger. */
	.site-header__nav--left,
	.site-header__nav--right,
	.site-header__divider,
	.lang-switcher__label {
		display: none;
	}

	.site-header__burger {
		display: flex;
	}

	.site-header__mobile-nav {
		display: block;
	}

	.site-header__mobile-nav[hidden] {
		display: none;
	}

	.site-header__inner {
		justify-content: space-between;
		gap: 16px;
	}

	.site-header__right {
		gap: 16px;
	}

	.whats-news__grid {
		grid-template-columns: 1fr;
	}

	.whats-news__item {
		aspect-ratio: 16 / 11;
	}

	.whats-news__content {
		left: 32px;
		right: 32px;
		bottom: 36px;
	}

	.feature-strip {
		flex-direction: column;
	}

	.feature-strip__item {
		/*
		 * Ve sloupcovém flexu by se flex-basis z desktopu (180px) použil
		 * na výšku, proto se výška nechává na obsahu.
		 */
		flex: 0 0 auto;
		min-height: 0;
		padding: 22px 24px;
	}

	.our-story__content {
		max-width: none;
		right: var(--container-padding);
	}
}

@media (max-width: 640px) {
	:root {
		--container-padding: 20px;
		--header-height: 72px;
	}

	/* ---- Detail vířivky ---- */

	/*
	 * Široké bannery by na mobilu byly jen pár set pixelů vysoké,
	 * proto dostanou vyšší poměr stran.
	 */
	.product-hero__image,
	.gallery__image,
	.family-banner__image {
		aspect-ratio: 4 / 5;
		max-height: none;
	}

	.product-hero__breadcrumbs {
		top: 16px;
		font-size: 12px;
		gap: 6px;
	}

	.product-hero__content {
		bottom: 8%;
		right: var(--container-padding);
	}

	.product-hero__subtitle {
		margin-top: 2px;
	}

	.product-hero__price {
		margin-top: 20px;
		font-size: 16px;
	}

	/* Vzorníky zůstávají přes fotku, jen blíž k jejím rohům. */
	.swatches {
		padding: 8px 16px 8px 10px;
		gap: 10px;
	}

	.swatches--shell {
		top: 0;
		left: 0;
	}

	.swatches--cabinet {
		bottom: 8%;
		left: auto;
		right: 0;
	}

	.swatches__dot {
		width: 20px;
		height: 20px;
	}

	.highlights__stats {
		grid-template-columns: 1fr;
	}

	.highlights__stat:last-child {
		grid-column: auto;
	}

	.gallery__thumbs {
		gap: 10px;
	}

	/* Náhledy zůstávají velké, přebytek se odroluje do strany. */
	.gallery__thumb {
		width: 40vw;
		border-radius: 18px;
	}

	.gallery__text {
		font-size: 14px;
	}

	.nozzle-card {
		flex: 0 0 calc(50% - 7px);
	}

	.nozzle-card__caption {
		left: 14px;
		right: 14px;
		bottom: 14px;
	}

	.full-specs__cards,
	.specs__grid {
		grid-template-columns: 1fr;
	}

	/* Tabulka parametrů: hodnota pod popiskem. */
	.full-specs__row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 12px 16px;
	}

	/* Dlouhý seznam je zkrácený, zbytek rozbalí tlačítko. */
	.full-specs__row--extra {
		display: none;
	}

	.full-specs__table.is-expanded .full-specs__row--extra {
		display: grid;
	}

	.full-specs__more {
		display: block;
		width: 100%;
		margin-top: 28px;
		color: var(--color-white);
		font-family: var(--font-primary);
		font-size: 14px;
		font-weight: 500;
		text-align: center;
		text-decoration: underline;
		text-underline-offset: 6px;
	}

	.full-specs__more[aria-expanded='true'] .full-specs__more-open {
		display: none;
	}

	.full-specs__more[aria-expanded='true'] .full-specs__more-close {
		display: inline;
	}

	.lightbox {
		padding: 56px 12px;
		gap: 4px;
	}

	.lightbox__nav {
		padding: 10px 4px;
	}

	/* Kontaktní formulář pod sebe. */
	.contact-form__row {
		grid-template-columns: 1fr;
	}

	/* Tlačítko jde nad text o souhlasu. */
	.contact-form__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}

	.contact-form__consent {
		order: 2;
		max-width: none;
		text-align: center;
	}

	.contact-form__submit {
		width: 100%;
	}

	.hero__image {
		aspect-ratio: 643 / 1090;
	}

	.hero__overlay {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 70%);
	}

	.hero__content {
		bottom: 8%;
		max-width: none;
		right: var(--container-padding);
	}

	.hero__title-line {
		white-space: normal;
	}

	.hero__title-line--bold {
		font-size: clamp(34px, 11.5vw, 52px);
	}

	.hero__title-line--light {
		font-size: clamp(24px, 7.6vw, 34px);
	}

	.hero__cta {
		margin-top: 28px;
	}

	.whats-news__title,
	.favourite-hot-tubs__title,
	.our-tech__title,
	.why-nordic__title,
	.our-story__title {
		font-size: 32px;
	}

	.whats-news__name {
		font-size: 38px;
	}

	.fav-card {
		padding: 36px 24px 32px;
	}

	.our-story__image {
		aspect-ratio: 3 / 4;
	}

	.our-story__overlay {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.1) 75%);
	}

	/*
	 * Patička na mobilu: menu ve dvou sloupcích + volba jazyka,
	 * pod tím vystředěné logo a copyright.
	 */
	.site-footer__inner {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			'nav locale'
			'logo logo'
			'copy copy';
		align-items: start;
		gap: 56px 24px;
		padding: 48px var(--container-padding) 40px;
	}

	/* Rozpadne obal, ať se copyright a jazyk umístí samostatně. */
	.site-footer__right {
		display: contents;
	}

	.site-footer__nav {
		grid-area: nav;
	}

	.site-footer__nav ul {
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-auto-flow: column;
		grid-template-rows: repeat(3, auto);
		justify-content: start;
		gap: 14px 48px;
	}

	.site-footer__nav a {
		font-size: 17px;
		font-weight: 400;
	}

	.lang-switcher--footer {
		grid-area: locale;
		justify-self: end;
	}

	.lang-switcher--footer .lang-switcher__flag img,
	.lang-switcher--footer .lang-switcher__flag svg {
		width: 30px;
		height: 30px;
	}

	.site-footer__logo {
		grid-area: logo;
		justify-self: center;
		gap: 16px;
	}

	.site-footer__logo-img {
		height: 30px;
	}

	.site-footer__logo-divider {
		display: block;
		width: 1px;
		height: 34px;
		background: rgba(255, 255, 255, 0.25);
	}

	.site-footer__logo-tagline {
		display: block;
		color: var(--color-gray);
		font-family: var(--font-primary);
		font-size: 13px;
		font-weight: 300;
		line-height: 1.4;
	}

	.site-footer__copyright {
		grid-area: copy;
		justify-self: center;
		color: rgba(255, 255, 255, 0.4);
		font-size: 15px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	/* "Our story" — text sedí v dolní části fotky. */
	.our-story__content {
		top: auto;
		bottom: 16%;
		transform: none;
	}
}

/* ---------- Výpis vířivek (/hot-tubs/) ---------- */

.tubs-hero {
	position: relative;
	overflow: hidden;
	background: var(--color-black);
}

.tubs-hero__media,
.tubs-hero__image {
	display: block;
	width: 100%;
}

.tubs-hero__image {
	height: clamp(360px, 25vw, 560px);
	object-fit: cover;
	object-position: 50% 42%;
}

.tubs-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.25) 35%, rgba(0, 0, 0, 0) 60%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 25%);
	pointer-events: none;
}

.tubs-hero__content {
	position: absolute;
	left: var(--container-padding);
	right: var(--container-padding);
	bottom: 12%;
}

.tubs-hero__eyebrow {
	margin: 0;
	color: var(--color-gold-alt);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.tubs-hero__title {
	margin: 0 0 22px;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(40px, 4.4vw, 80px);
	font-weight: 700;
	line-height: 1.05;
}

.tubs-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.tubs-filters__label {
	margin-right: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 300;
}

.tubs-filters__field {
	display: block;
}

.tubs-filters__select {
	-webkit-appearance: none;
	appearance: none;
	min-width: 190px;
	padding: 11px 46px 11px 22px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	background: rgba(12, 12, 12, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.25s ease;
}

.tubs-filters__select:hover {
	border-color: rgba(255, 255, 255, 0.3);
}

.tubs-filters__select:focus-visible {
	outline: 2px solid var(--color-gold-alt);
	outline-offset: 2px;
}

/* Rozbalený seznam kreslí systém — bez tohohle by byl bílý text na bílé. */
.tubs-filters__select option {
	background: #1c1c1c;
	color: var(--color-white);
}

.tubs-list {
	background: #161616;
	padding: 64px var(--container-padding) 80px;
}

.tubs-list__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	max-width: 1760px;
	margin: 0 auto;
}

.tubs-list__empty {
	margin: 40px 0 0;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 300;
	text-align: center;
}

.tubs-list__empty[hidden] {
	display: none;
}

/* Bez tohohle by display:block níž přebil [hidden] a filtr by nic neskryl. */
.tub-card[hidden] {
	display: none;
}

.tub-card {
	position: relative;
	display: block;
	aspect-ratio: 389 / 251;
	overflow: hidden;
	border-radius: 8px;
	background: #222;
	color: var(--color-white);
	/* Zaoblené rohy drží i během zvětšení fotky (Safari). */
	isolation: isolate;
}

.tub-card[hidden] {
	display: none;
}

.tub-card:focus-visible {
	outline: 2px solid var(--color-gold-alt);
	outline-offset: 3px;
}

.tub-card__media,
.tub-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Fotka je v klidu přiblížená, po najetí se oddálí na celý záběr. */
.tub-card__image {
	object-fit: cover;
	transform: scale(1.08);
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tub-card__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0) 60%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 22%);
	background-color: rgba(0, 0, 0, 0);
	transition: background-color 0.5s ease;
}

.tub-card__meta {
	position: absolute;
	top: 28px;
	left: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 400;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.tub-card__meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tub-card__meta-item svg {
	flex-shrink: 0;
}

.tub-card__content {
	position: absolute;
	left: 44px;
	right: 90px;
	bottom: 34px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Štítek a podtitulek vyjíždějí: řádek gridu roste z 0 na plnou výšku. */
.tub-card__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.45s ease, opacity 0.35s ease;
}

.tub-card__reveal-inner {
	min-height: 0;
	overflow: hidden;
}

.tub-card__badge {
	display: inline-block;
	margin-bottom: 18px;
	padding: 9px 20px;
	border-radius: 999px;
	background: rgba(20, 20, 20, 0.85);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 500;
}

.tub-card__title {
	font-family: var(--font-heading);
	font-size: clamp(30px, 2.8vw, 54px);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.tub-card__subtitle {
	display: block;
	max-width: 340px;
	padding-top: 10px;
	font-family: var(--font-primary);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.35;
}

.tub-card__price {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 300;
}

.tub-card__price-arrow {
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.tub-card__arrow {
	position: absolute;
	right: 32px;
	bottom: 38px;
	color: rgba(255, 255, 255, 0.55);
	transition: opacity 0.3s ease;
}

.tub-card:hover .tub-card__image,
.tub-card:focus-visible .tub-card__image {
	transform: scale(1);
}

.tub-card:hover .tub-card__overlay,
.tub-card:focus-visible .tub-card__overlay {
	background-color: rgba(0, 0, 0, 0.35);
}

.tub-card:hover .tub-card__reveal,
.tub-card:focus-visible .tub-card__reveal {
	grid-template-rows: 1fr;
	opacity: 1;
}

.tub-card:hover .tub-card__price,
.tub-card:focus-visible .tub-card__price {
	margin-top: 22px;
}

.tub-card:hover .tub-card__price-arrow,
.tub-card:focus-visible .tub-card__price-arrow {
	opacity: 1;
	transform: none;
}

.tub-card:hover .tub-card__arrow,
.tub-card:focus-visible .tub-card__arrow {
	opacity: 0;
}

.tub-card__price {
	transition: margin-top 0.45s ease;
}

/* Dotyk nemá hover — podle mobilního návrhu jen název, cena a šipka, fotka bez přiblížení. */
@media (hover: none) {
	.tub-card__image {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tub-card__image,
	.tub-card__overlay,
	.tub-card__reveal,
	.tub-card__price,
	.tub-card__price-arrow,
	.tub-card__arrow {
		transition: none;
	}
}

.tubs-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 60px;
	align-items: center;
	background: #1c1c1c;
	padding: 50px var(--container-padding);
}

.tubs-about__image {
	width: 100%;
	aspect-ratio: 388 / 298;
	object-fit: cover;
}

.tubs-about__content {
	max-width: 720px;
}

.tubs-about__title {
	margin: 0 0 26px;
	display: flex;
	flex-direction: column;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(34px, 3.6vw, 64px);
	line-height: 1.08;
}

.tubs-about__title-bold {
	font-weight: 700;
}

.tubs-about__title-light {
	font-weight: 300;
}

.tubs-about__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.tubs-list__grid {
		gap: 18px;
	}

	.tub-card__meta {
		top: 20px;
		left: 22px;
		font-size: 13px;
	}

	.tub-card__content {
		left: 26px;
		right: 56px;
		bottom: 24px;
	}

	.tub-card__arrow {
		right: 22px;
		bottom: 28px;
	}

	.tub-card__subtitle {
		font-size: 15px;
	}

	.tubs-about {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 48px var(--container-padding) 60px;
	}
}

@media (max-width: 760px) {
	.tubs-list {
		padding: 32px var(--container-padding) 48px;
	}

	.tubs-list__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.tubs-hero__image {
		height: 360px;
	}

	.tubs-hero__content {
		bottom: 28px;
	}

	.tubs-hero__title {
		margin-bottom: 18px;
	}

	.tubs-filters {
		gap: 10px;
	}

	.tubs-filters__label {
		flex-basis: 100%;
	}

	/* Oba filtry vedle sebe přes celou šířku. */
	.tubs-filters__field {
		flex: 1 1 0;
		min-width: 0;
	}

	.tubs-filters__select {
		width: 100%;
		min-width: 0;
		padding: 10px 38px 10px 16px;
		background-position: right 14px center;
		font-size: 13px;
	}

	/* Na mobilu je karta skoro čtvercová. */
	.tub-card {
		aspect-ratio: 272 / 250;
	}

	.tub-card__meta {
		gap: 8px 14px;
		font-size: 14px;
	}

	/* Rozměry a počet míst dělí svislá čárka. */
	.tub-card__meta-item + .tub-card__meta-item {
		padding-left: 14px;
		border-left: 1px solid rgba(255, 255, 255, 0.35);
	}

	.tubs-about {
		gap: 28px;
		padding: 40px var(--container-padding) 56px;
	}

	.tubs-about__title {
		margin-bottom: 18px;
	}

	.tubs-about__text {
		font-size: 15px;
	}
}

/* ---------- Kontakty (/contacts/) ---------- */

.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 24px var(--container-padding) 0;
	background: #161616;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 300;
}

.breadcrumbs a {
	transition: color 0.2s ease;
}

.breadcrumbs a:hover {
	color: var(--color-white);
}

.breadcrumbs__sep {
	display: flex;
	color: rgba(255, 255, 255, 0.4);
}

/* Na samostatné stránce má formulář jednolité pozadí a nadpis bez linky. */
.contact--page {
	background: #161616;
	padding: 40px var(--container-padding) 90px;
}

.contact--page .contact__title {
	margin-bottom: 20px;
	font-size: clamp(34px, 3.6vw, 56px);
}

.contact--page .contact__title::after {
	display: none;
}

.contact--page .contact__lead {
	max-width: 440px;
	margin-bottom: 44px;
	font-size: 15px;
}

.contact-hq {
	background: #161616;
	padding: 0 var(--container-padding) 90px;
}

.contact-hq__image {
	display: block;
	width: 100%;
	aspect-ratio: 592 / 338;
	max-height: 820px;
	object-fit: cover;
	/* Fotka je na výšku užší než rámeček, takže cover ořezává. Výřez drží
	   u horní hrany — nad hlavami je ve zdroji sotva pár procent místa. */
	object-position: center top;
}

/* Drží místo, dokud není fotka sídla (assets/img/contacts-building.jpg). */
.contact-hq__image--placeholder {
	background: linear-gradient(135deg, #3a4046, #15181a);
}

/* Pruh je užší než fotka a lehce přes ni přesahuje. */
.feature-strip--inset {
	margin: -18px 2% 0;
}

.faq {
	background: #161616;
	padding: 20px var(--container-padding) 110px;
}

.faq__title {
	margin: 0 0 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-family: var(--font-heading);
	font-size: clamp(32px, 3.2vw, 48px);
	line-height: 1.1;
}

.faq__title-accent {
	color: var(--color-gold-alt);
	font-weight: 600;
}

.faq__title-light {
	color: var(--color-white);
	font-weight: 300;
}

/* Dotazy mají stejnou šířku zavřené i otevřené a dlouhé otázky se zalomí. */
.tech-accordion--faq {
	max-width: 600px;
	margin: 0 auto;
	align-items: stretch;
	gap: 14px;
}

.tech-accordion--faq .tech-accordion__item,
.tech-accordion--faq .tech-accordion__item.is-open {
	border-radius: 18px;
}

.tech-accordion--faq .tech-accordion__label,
.tech-accordion--faq .tech-accordion__item.is-open .tech-accordion__label {
	font-size: 16px;
	white-space: normal;
}

.tech-accordion--faq .tech-accordion__text {
	font-size: 15px;
}

.tech-accordion--faq .tech-accordion__text + .tech-accordion__text {
	margin-top: 12px;
}

@media (max-width: 1024px) {
	.contact-hq {
		padding-bottom: 64px;
	}

	.feature-strip--inset {
		margin: 0;
	}
}

@media (max-width: 640px) {
	.breadcrumbs {
		padding-top: 16px;
		font-size: 12px;
		gap: 6px;
	}

	/* Mobilní návrh: nadpis vlevo, bez úvodního textu. */
	.contact--page {
		padding: 24px var(--container-padding) 56px;
	}

	.contact--page .contact__title {
		text-align: left;
		font-size: 34px;
	}

	.contact--page .contact__lead {
		display: none;
	}

	/* Fotka od kraje ke kraji, dlaždice pod ní s odsazením. */
	.contact-hq {
		padding: 0 0 56px;
	}

	.contact-hq__image {
		aspect-ratio: 16 / 10;
	}

	.feature-strip--inset {
		margin: 0 var(--container-padding);
		gap: 10px;
	}

	.faq {
		padding: 0 var(--container-padding) 72px;
	}

	.faq__title {
		font-size: 32px;
		margin-bottom: 28px;
	}

	.tech-accordion--faq {
		gap: 12px;
	}

	.tech-accordion--faq .tech-accordion__trigger {
		padding: 18px 20px;
	}

	.tech-accordion--faq .tech-accordion__panel {
		padding: 0 20px 20px;
	}

	.tech-accordion--faq .tech-accordion__label,
	.tech-accordion--faq .tech-accordion__item.is-open .tech-accordion__label {
		font-size: 15px;
	}

	.tech-accordion--faq .tech-accordion__text {
		font-size: 14px;
	}
}

/* ---------- Dealeři (/dealers/) ---------- */

/* Úvod: vlevo text přes tečkovanou mapu, vpravo fotka sídla. */
.dealer-hero {
	position: relative;
	display: grid;
	grid-template-columns: 47fr 53fr;
	min-height: clamp(520px, 45vw, 760px);
	overflow: hidden;
	background: #161616;
}

.dealer-hero__crumbs {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: none;
}

.dealer-hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 90px 48px 60px var(--container-padding);
}

/*
 * Tečkovaná mapa se k okrajům ztrácí do pozadí — maska je uprostřed plná
 * a ven průhlední, takže mapa nikde nekončí ostrou hranou.
 */
.dealer-hero__map {
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}

/*
 * Mapa světa zůstává čitelná skoro celá, měkne až u pravého kraje pod textem.
 * Druhá maska rozpouští vodorovný ořez nahoře (82° s. š.) a dole, aby mapa
 * nikde nekončila rovnou linkou teček.
 */
.dealer-world__map {
	-webkit-mask-image:
		linear-gradient(90deg, #000 0%, #000 62%, transparent 100%),
		linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 14%, #000 40%, #000 78%, transparent 100%);
	mask-image:
		linear-gradient(90deg, #000 0%, #000 62%, transparent 100%),
		linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 14%, #000 40%, #000 78%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.dealer-hero__map {
	position: absolute;
	top: -12%;
	left: 6%;
	z-index: 0;
	width: 100%;
	max-width: none;
	opacity: 0.3;
	pointer-events: none;
}

.dealer-hero__content > :not(.dealer-hero__map) {
	position: relative;
	z-index: 1;
}

.dealer-hero__eyebrow {
	margin: 0 0 6px;
	color: var(--color-gold-alt);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.dealer-hero__title,
.dealer-world__title {
	margin: 0 0 22px;
	display: flex;
	flex-direction: column;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(38px, 3.8vw, 58px);
	line-height: 1.05;
}

.dealer-hero__title-bold,
.dealer-world__title-bold {
	font-weight: 700;
}

.dealer-hero__title-light,
.dealer-world__title-light {
	font-weight: 300;
}

.dealer-hero__text,
.dealer-world__text {
	margin: 0;
	max-width: 540px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
}

.dealer-hero__contact {
	margin: 56px 0 0;
}

.dealer-hero__contact-label {
	display: block;
	margin-bottom: 4px;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 300;
}

.dealer-hero__contact-link {
	color: var(--color-gold-alt);
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 7px;
	transition: color 0.2s ease;
}

.dealer-hero__contact-link:hover {
	color: var(--color-gold);
}

.dealer-hero__media {
	position: relative;
}

.dealer-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Drží místo, dokud není fotka sídla (assets/img/contacts-building.jpg). */
.dealer-hero__image--placeholder {
	background: linear-gradient(135deg, #3a4046, #15181a);
}

/* "All over the world": velká mapa vlevo, text ji zprava překrývá. */
.dealer-world {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	/* Výška musí stačit na mapu v Mercatoru, ta je vyšší než u rovnoběžné projekce. */
	min-height: clamp(540px, 58vw, 880px);
	padding: 40px var(--container-padding) 60px;
	overflow: hidden;
	background: #161616;
}

/*
 * Mapa přetéká vlevo za okraj sekce, aby Afrika vyšla do první třetiny
 * šířky jako v návrhu. Nízká sytost ji drží v šedé — je to podklad, ne prvek.
 */
.dealer-world__map {
	position: absolute;
	top: 50%;
	/*
	 * Šířka je zastropovaná, jinak mapa na širokém monitoru přeroste výšku
	 * sekce a usekne se. Posun je v procentech vlastní šířky (translate),
	 * takže drží stejný výřez na každé šířce okna.
	 */
	left: 50%;
	width: min(88%, 1320px);
	max-width: none;
	height: auto;
	transform: translate(-74%, -50%);
	opacity: 0.26;
	pointer-events: none;
}

/* Text začíná zhruba v 57 % šířky a mapu překrývá jen u jejího kraje. */
.dealer-world__content {
	position: relative;
	grid-column: 2;
	margin-left: 12%;
	max-width: 560px;
}

/* Formulář pro dealery je širší a nadpis nemá linku. */
.contact--dealer {
	background: #161616;
	padding: 40px var(--container-padding) 90px;
}

.contact--dealer .contact__title {
	margin-bottom: 30px;
	font-size: clamp(34px, 3.2vw, 52px);
}

.contact--dealer .contact__title::after {
	display: none;
}

.contact--dealer .contact__form {
	max-width: 860px;
}

@media (max-width: 1024px) {
	/* Drobečky, fotka a text pod sebou. */
	.dealer-hero {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.dealer-hero__crumbs {
		position: static;
		padding-bottom: 16px;
	}

	/* Fotka jde hned pod drobečky, text až za ni. */
	.dealer-hero__media {
		order: 1;
		aspect-ratio: 4 / 3;
	}

	.dealer-hero__content {
		order: 2;
		padding: 40px var(--container-padding) 32px;
	}

	/* Mapa se musí vejít nad spodní hranu sekce, jinak ji ta ořízne rovně. */
	.dealer-hero__map {
		top: 18%;
		left: 0;
		width: 100%;
	}

	/*
	 * Výška sekce musí stačit na mapu (110 % šířky × poměr mapy 147/240),
	 * jinak se spodek usekne — obsah je tu pod sebou, takže sekce může růst.
	 */
	.dealer-world {
		display: block;
		min-height: calc(67vw + 60px);
		padding: 150px var(--container-padding) 40px;
	}

	.dealer-world__map {
		top: 50%;
		left: 50%;
		width: 110%;
		height: auto;
		transform: translate(-50%, -50%);
		opacity: 0.45;
	}

	.dealer-world__content {
		margin-left: 0;
	}
}

@media (max-width: 640px) {
	.dealer-hero__crumbs {
		padding-bottom: 12px;
	}

	.dealer-hero__media {
		aspect-ratio: 192 / 170;
	}

	.dealer-hero__content {
		padding-top: 28px;
	}

	.dealer-hero__title,
	.dealer-world__title {
		font-size: 36px;
		margin-bottom: 16px;
	}

	.dealer-hero__text,
	.dealer-world__text {
		font-size: 15px;
	}

	.dealer-hero__contact {
		margin-top: 36px;
	}

	.dealer-world {
		padding-top: 110px;
	}

	/* Nadpis formuláře vlevo na dva řádky. */
	.contact--dealer {
		padding: 24px var(--container-padding) 56px;
	}

	.contact--dealer .contact__title {
		display: flex;
		flex-direction: column;
		text-align: left;
		font-size: 34px;
		line-height: 1.1;
	}
}

/* ---------- Podstránka Technology ---------- */

.page-hero {
	position: relative;
	display: grid;
	grid-template-columns: 48fr 52fr;
	min-height: clamp(540px, 46vw, 780px);
	overflow: hidden;
	/* Nahoře odstín z návrhu, dole přejde do černé, na kterou navazuje
	   mřížka technologií — jinak by na rozhraní byla vidět hrana. */
	background: linear-gradient(180deg, #161616 0%, #161616 42%, var(--color-black) 100%);
}

.page-hero__crumbs {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: none;
}

.page-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 100px 56px 70px var(--container-padding);
}

.page-hero__eyebrow {
	margin: 0 0 6px;
	color: var(--color-gold-alt);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.page-hero__title {
	margin: 0 0 22px;
	display: flex;
	flex-direction: column;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(38px, 3.8vw, 58px);
	line-height: 1.05;
}

.page-hero__title-bold {
	font-weight: 700;
}

.page-hero__title-light {
	font-weight: 300;
}

.page-hero__text {
	margin: 0 0 14px;
	max-width: 540px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
}

.page-hero__text:last-child {
	margin-bottom: 0;
}

.page-hero__media {
	position: relative;
}

.page-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero__image--placeholder {
	background: linear-gradient(135deg, #3a4046, #15181a);
}

/* ---------- Technology: mřížka technologií ---------- */

.tech-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 36px;
	padding: 80px var(--container-padding) 100px;
	background: var(--color-black);
}

.tech-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tech-item__media {
	margin-bottom: 22px;
}

.tech-item__image {
	display: block;
	width: 100%;
	aspect-ratio: 465 / 390;
	object-fit: cover;
	border-radius: 4px;
}

.tech-item__image--placeholder {
	background: linear-gradient(150deg, #2d3338, #14181b);
}

.tech-item__eyebrow {
	margin: 0 0 2px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 300;
}

.tech-item__title {
	margin: 0 0 16px;
	color: var(--color-gold-alt);
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
}

.tech-item__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
}

/*
 * Na kartě je vidět jen první odstavec; zbytek zůstává v HTML kvůli
 * vyhledávačům a main.js ho přenese do modálního okna.
 */
.tech-item__body .tech-item__text--more {
	display: none;
}

.tech-item__more {
	/* "auto" srovná odkazy na spodní hranu řádku, i když jsou texty
	   různě dlouhé. */
	margin-top: auto;
	padding-top: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	border: 0;
	background: none;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 300;
	cursor: pointer;
}

.tech-item__more-label {
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.tech-item__more:hover .tech-item__more-label,
.tech-item__more:focus-visible .tech-item__more-label {
	border-bottom-color: currentColor;
}

.tech-item__more-icon {
	display: inline-flex;
	color: rgba(255, 255, 255, 0.72);
}

/* ---------- Technology: modální okno ---------- */

.tech-modal[hidden] {
	display: none;
}

.tech-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: 24px;
}

.tech-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.82);
	opacity: 0;
	transition: opacity 0.34s ease;
}

.tech-modal.is-open .tech-modal__dialog {
	transform: none;
}

.tech-modal.is-open .tech-modal__backdrop {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tech-modal__dialog,
	.tech-modal__backdrop {
		transition: none;
	}
}

.tech-modal__dialog {
	position: relative;
	/* Okno vyjede zespodu; .is-open přidá main.js až po vykreslení. */
	transform: translateY(100%);
	transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
	display: grid;
	grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
	width: min(100%, 980px);
	max-height: min(86vh, 680px);
	overflow: hidden;
	border-radius: 10px;
	background: var(--color-surface);
}

.tech-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.45);
	color: var(--color-white);
	cursor: pointer;
}

.tech-modal__media {
	position: relative;
	min-height: 260px;
	background: var(--color-black);
}

.tech-modal__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tech-modal__content {
	min-width: 0;
	padding: 48px 44px;
	overflow-y: auto;
}

.tech-modal__eyebrow {
	margin: 0 0 2px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 300;
}

.tech-modal__title {
	margin: 0 0 18px;
	color: var(--color-gold-alt);
	font-family: var(--font-heading);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 600;
}

.tech-modal__body p {
	margin: 0 0 14px;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.65;
}

.tech-modal__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.page-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.page-hero__content {
		order: 2;
		padding: 40px var(--container-padding) 56px;
	}

	.page-hero__media {
		order: 1;
		aspect-ratio: 16 / 10;
	}

	.page-hero__crumbs {
		position: static;
		order: 0;
		padding-left: var(--container-padding);
	}

	.tech-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 44px 28px;
		padding: 56px var(--container-padding) 72px;
	}

	.tech-modal__dialog {
		grid-template-columns: minmax(0, 1fr);
		/* Fotka si drží výšku, zbytek dialogu vyplní text — bez toho se
		   oba řádky roztáhnou a pod fotkou zůstane prázdné místo. */
		grid-template-rows: auto minmax(0, 1fr);
		max-height: 88vh;
	}

	.tech-modal__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.tech-modal__content {
		padding: 32px 28px 36px;
	}
}

@media (max-width: 640px) {
	.page-hero__text {
		font-size: 15px;
	}

	.tech-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 44px var(--container-padding) 60px;
	}

	/*
	 * Na mobilu je z okna spodní panel: vyjede zespodu a zastaví se,
	 * nad ním zůstane vidět stránka. Dřív se roztáhl přes celou výšku.
	 */
	.tech-modal {
		padding: 0;
		align-items: end;
	}

	.tech-modal__backdrop {
		background: rgba(0, 0, 0, 0.6);
	}

	.tech-modal__dialog {
		height: auto;
		max-height: 86vh;
		border-radius: 18px 18px 0 0;
		/* Křížek stojí nad panelem, takže se tu nesmí ořezávat. */
		overflow: visible;
	}

	.tech-modal__media {
		border-radius: 18px 18px 0 0;
		overflow: hidden;
	}

	.tech-modal__close {
		top: auto;
		bottom: 100%;
		right: 16px;
		margin-bottom: 14px;
	}
}

/* Na Technology navazuje FAQ na černou mřížku, ne na #161616 jako
   na Dealers a Contacts — a nadpis potřebuje víc místa nad sebou. */
.faq--black {
	background: var(--color-black);
	padding-top: 70px;
}

/* ---------- Připomínky kolo 2 ---------- */

@media (max-width: 1024px) {
	/* Novinky: text leží na fotce, na menší ploše potřebuje víc zatmavení. */
	.whats-news__overlay {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.12) 62%, rgba(0, 0, 0, 0) 100%);
	}
}

@media (max-width: 640px) {
	/*
	 * Trysky: na mobilu jen tři dlaždice — nahoře přes celou šířku ta
	 * hlavní (u většiny modelů hydromasáž, u Gammy nožní), pod ní
	 * rotační a přímé. Vzduchové se na mobil nevejdou.
	 */
	.nozzle-card[data-jet="jetflex"] {
		display: none;
	}

	.nozzle-card[data-jet="hydromassage"],
	.nozzle-card[data-jet="foot"] {
		order: -1;
		flex: 0 0 100%;
		aspect-ratio: 16 / 11;
	}

	/* Technology: "View more" těsně navazovalo na text. */
	.tech-item__more {
		padding-top: 26px;
	}
}

/* ---------- Podstránka About us ---------- */

.about-intro {
	padding: 10px var(--container-padding) 90px;
	background: var(--color-black);
}

.about-intro__text {
	margin: 0 auto 22px;
	max-width: 1090px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.65;
}

.about-intro__text:last-child {
	margin-bottom: 0;
}

.about-intro__text strong,
.about-intro__text--strong {
	color: var(--color-white);
	font-weight: 600;
}

/* ---------- About us: blok fotka + text ---------- */

.about-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 70px;
	padding: 40px var(--container-padding) 70px;
	background: var(--color-black);
}

/* Druhý blok má fotku vpravo. */
.about-split--reverse .about-split__media {
	order: 2;
}

.about-split__image {
	display: block;
	width: 100%;
	aspect-ratio: 740 / 470;
	object-fit: cover;
	border-radius: 4px;
}

.about-split__image--placeholder {
	background: linear-gradient(150deg, #2d3338, #14181b);
}

.about-split__title {
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(34px, 3.6vw, 56px);
	line-height: 1.05;
}

.about-split__title-bold {
	font-weight: 700;
}

.about-split__title-light {
	font-weight: 300;
}

.about-split__text {
	margin: 0 0 26px;
	max-width: 520px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
}

.about-split__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 300;
	text-decoration: none;
}

.about-split__link span {
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.about-split__link:hover span,
.about-split__link:focus-visible span {
	border-bottom-color: currentColor;
}

.about-split__link svg {
	color: rgba(255, 255, 255, 0.72);
}

/* ---------- About us: Why NordicSpa ---------- */

.about-why {
	padding: 50px var(--container-padding) 80px;
	background: var(--color-black);
}

.about-why__title {
	margin: 0 0 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(32px, 3.4vw, 50px);
	line-height: 1.1;
}

.about-why__title-bold {
	font-weight: 700;
}

.about-why__title-light {
	font-weight: 300;
}

.about-why__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.about-why__card {
	padding: 30px 28px 34px;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.about-why__number {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 300;
}

.about-why__name {
	margin: 0 0 14px;
	color: var(--color-gold-alt);
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.about-why__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.55;
}

/* ---------- About us: široký pás s fotkou ---------- */

.about-photo {
	padding: 20px var(--container-padding) 0;
	background: var(--color-black);
}

.about-photo__image {
	display: block;
	width: 100%;
	aspect-ratio: 1328 / 620;
	object-fit: cover;
}

.about-photo__image--placeholder {
	background: linear-gradient(135deg, #3a4046, #15181a);
}

@media (max-width: 1024px) {
	.about-split {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 32px var(--container-padding) 48px;
	}

	/* Na jednom sloupci je fotka vždy nahoře. */
	.about-split--reverse .about-split__media {
		order: 0;
	}

	.about-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.about-intro {
		padding-bottom: 56px;
	}

	.about-intro__text {
		font-size: 15px;
	}

	.about-split__text {
		font-size: 15px;
	}

	.about-why {
		padding: 36px var(--container-padding) 56px;
	}

	.about-why__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.about-photo {
		padding-inline: 0;
	}

	.about-photo__image {
		aspect-ratio: 16 / 11;
	}
}