.a_button {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	justify-content: center;
	gap: 10px;
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
	transition: all .3s ease;
	text-decoration: none;

	&.cta {
		background-color: var(--color_accent);
		color: var(--color_text);

		&:hover {
			background-color: var(--color_accent-hover);
		}
	}

	&.primary {
		background-color: var(--color_primary);
		color: var(--color_text-inverted);

		&:hover {
			background-color: var(--color_primary-hover);
		}
	}

	&.secondary {
		background: var(--bg_surface);
		border-color: var(--color_border);
		color: var(--color_text);

		&:hover {
			background-color: var(--bg_body);
		}
	}

	&.outline {
		background: transparent;
		border-color: var(--color_primary);
		color: var(--color_primary);

		&:hover {
			background-color: #1125a914;
		}
	}

	&.outline-light {
		background: transparent;
		border-color: var(--color_text-inverted);
		color: var(--color_text-inverted);

		&:hover {
			background-color: #ffffff1f;
		}
	}

	&.link {
		background: transparent;
		color: var(--color_primary);

		&:hover {
			color: var(--color_primary-hover);
		}
	}

	&.large {
		padding: 16px 40px;
	}

	&.small {
		padding: 6px 14px;
	}
}

.a_description {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
	color: var(--color_text-muted);
	margin: 0;
	text-wrap: balance;
}

.a_h1 {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	color: var(--color_text);
	margin: 0;
	text-wrap: balance;

	@media (min-width: 1104px) {
		font-size: 48px;
	}

	.muted {
		color: var(--color_text-muted);
	}
}

.a_h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.6;
	color: var(--color_text);
	margin: 0;
	text-wrap: balance;

	@media (min-width: 1104px) {
		font-size: 32px;
		line-height: 1.4;
	}
}

.a_h3 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.6;
	color: var(--color_text);
	margin: 0;

	@media (min-width: 1104px) {
		font-size: 24px;
		line-height: 1.4;
	}
}

.a_icon {
	display: inline-block;
	width: var(--icon-size, 24px);
	height: var(--icon-size, 24px);
	background-color: currentColor;
	mask: var(--icon) center / var(--icon-size, 24px) no-repeat;
}

.nav-prev,
.nav-next {
	position: absolute;
	/* Mobil: sipky vys (30 %), aby nesedely uprostred karet.
	   Od 1104px puvodnich 50 %. Vyjimku ma hero carousel na homepage,
	   ktery si 50 % drzi i na mobilu (viz o_hero.css). */
	top: 30%;
	transform: translateY(-50%);
	z-index: 3;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background-color: #E6EAFF;
	cursor: pointer;
	color: var(--color_primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .3s ease;

	@media (min-width: 1104px) {
		top: 50%;
	}

	&:hover {
		background-color: #d7ddff;
	}

	&:disabled,
	&[aria-disabled="true"],
	&.disabled {
		color: rgba(17, 37, 169, .2);
		cursor: default;
	}

	&::before {
		content: "";
		display: block;
		width: 24px;
		height: 24px;
		background-color: currentColor;
		mask: var(--icon) center / contain no-repeat;
	}
}

.m_buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
section {
	&.pt-0 { padding-top: 0; }
	&.pt-16 { padding-top: 16px; }
	&.pt-24 { padding-top: 24px; }
	&.pt-32 { padding-top: 32px; }
	&.pt-48 { padding-top: 48px; }
	&.pt-64 { padding-top: 64px; }
	&.pt-80 { padding-top: 80px; }
	&.pt-96 { padding-top: 96px; }
	&.pt-128 { padding-top: 128px; }

	&.pb-0 { padding-bottom: 0; }
	&.pb-16 { padding-bottom: 16px; }
	&.pb-24 { padding-bottom: 24px; }
	&.pb-32 { padding-bottom: 32px; }
	&.pb-48 { padding-bottom: 48px; }
	&.pb-64 { padding-bottom: 64px; }
	&.pb-80 { padding-bottom: 80px; }
	&.pb-96 { padding-bottom: 96px; }
	&.pb-128 { padding-bottom: 128px; }

	@media (min-width: 768px) {
		&.pt-sm-0 { padding-top: 0; }
		&.pt-sm-16 { padding-top: 16px; }
		&.pt-sm-24 { padding-top: 24px; }
		&.pt-sm-32 { padding-top: 32px; }
		&.pt-sm-48 { padding-top: 48px; }
		&.pt-sm-64 { padding-top: 64px; }
		&.pt-sm-80 { padding-top: 80px; }
		&.pt-sm-96 { padding-top: 96px; }
		&.pt-sm-128 { padding-top: 128px; }

		&.pb-sm-0 { padding-bottom: 0; }
		&.pb-sm-16 { padding-bottom: 16px; }
		&.pb-sm-24 { padding-bottom: 24px; }
		&.pb-sm-32 { padding-bottom: 32px; }
		&.pb-sm-48 { padding-bottom: 48px; }
		&.pb-sm-64 { padding-bottom: 64px; }
		&.pb-sm-80 { padding-bottom: 80px; }
		&.pb-sm-96 { padding-bottom: 96px; }
		&.pb-sm-128 { padding-bottom: 128px; }
	}

	@media (min-width: 1104px) {
		&.pt-xl-0 { padding-top: 0; }
		&.pt-xl-16 { padding-top: 16px; }
		&.pt-xl-24 { padding-top: 24px; }
		&.pt-xl-32 { padding-top: 32px; }
		&.pt-xl-48 { padding-top: 48px; }
		&.pt-xl-64 { padding-top: 64px; }
		&.pt-xl-80 { padding-top: 80px; }
		&.pt-xl-96 { padding-top: 96px; }
		&.pt-xl-128 { padding-top: 128px; }

		&.pb-xl-0 { padding-bottom: 0; }
		&.pb-xl-16 { padding-bottom: 16px; }
		&.pb-xl-24 { padding-bottom: 24px; }
		&.pb-xl-32 { padding-bottom: 32px; }
		&.pb-xl-48 { padding-bottom: 48px; }
		&.pb-xl-64 { padding-bottom: 64px; }
		&.pb-xl-80 { padding-bottom: 80px; }
		&.pb-xl-96 { padding-bottom: 96px; }
		&.pb-xl-128 { padding-bottom: 128px; }
	}
}

.m_wp_background {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;

	.layer {
		position: absolute;
		inset: 0;
	}

	.layer-image {
		.a_wp_image {
			height: 100%;
		}

		.a_wp_image img {
			width: 100%;
			height: 100%;
			object-fit: var(--fit, cover);
		}
	}

	.layer-image--cap {
		.a_wp_image img {
			max-width: 1920px;
			display: block;
			margin-inline: auto;
		}
	}

	.layer-color,
	.layer-gradient {
		opacity: var(--opacity, 1);
	}

	.layer-pattern {
		background-repeat: repeat;
		background-size: var(--size-mobile, auto);
	}

	.layer-decorative {
		pointer-events: none;
		overflow: hidden;

		.layer-decorative__desktop {
			display: none;
		}
	}
}

@media (min-width: 1104px) {
	.m_wp_background .layer-decorative {
		.layer-decorative__mobile {
			display: none;
		}

		.layer-decorative__desktop {
			display: block;
		}
	}
}

@media (min-width: 768px) {
	.m_wp_background .layer-pattern {
		background-size: var(--size-tablet, var(--size-mobile, auto));
	}
}

@media (min-width: 1104px) {
	.m_wp_background .layer-pattern {
		background-size: var(--size-desktop, var(--size-tablet, var(--size-mobile, auto)));
	}
}

.o_about_salon {
	position: relative;
	overflow: hidden;
	z-index: 0;
	padding-block: 209px 0;
	background-color: #000;
	color: var(--color_text-inverted);

	/* Ramovani fotky + ztmaveni (JEN mobil).
	   1) Fotka (4:3) se pres celou vysku sekce orizne na uzky svisly prouzek a interier
	      salonu neni poznat -> na mobilu ji nechame jen v horni casti (sirsi vyrez).
	   2) Text zacina az pod fotkou (padding-block).
	   3) Scrim plynule prevadi fotku do cerne; plne cerny je uz na 430px, tedy driv
	      nez fotka konci (470px), takze spodni hrana fotky neni videt.
	   Cely blok je v max-width dotazu -> od 1104px nevznikne a desktop je beze zmeny. */
	@media (max-width: 1103.98px) {
		padding-block: 400px 0;

		.m_wp_background .layer-image {
			height: 470px;
			bottom: auto;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			pointer-events: none;
			background: linear-gradient(
				180deg,
				rgba(0, 0, 0, 0) 0px,
				rgba(0, 0, 0, 0.05) 120px,
				rgba(0, 0, 0, 0.35) 250px,
				rgba(0, 0, 0, 0.85) 360px,
				rgb(0, 0, 0) 430px
			);
		}
	}

	@media (min-width: 1104px) {
		min-height: 793px;
		padding-block: 172px 0;
		grid-auto-rows: minmax(0, 1fr);
	}

	.title {
		position: relative;
		z-index: 2;
		align-self: end;
		margin-block-end: 64px;

		@media (min-width: 1104px) {
			margin-block-end: 209px;
		}

		.eyebrow {
			color: var(--color_beige);
			font-family: var(--font-heading);
			font-weight: 500;
			font-size: 22px;
			line-height: 26px;
			margin: 0;

			@media (min-width: 1104px) {
				font-size: 24px;
			}
		}

		.a_h2 {
			color: var(--color_text-inverted);
			margin: 16px 0 0;
		}

		.a_description {
			color: var(--color_text-inverted);
			margin: 20px 0 0;
			text-wrap: balance;

			@media (min-width: 1104px) {
				margin: 32px 0 0;
			}
		}

		.m_buttons {
			justify-content: flex-start;
			margin: 20px 0 0;

			@media (min-width: 1104px) {
				margin: 32px 0 0;
			}
		}
	}

	.model {
		display: none;

		@media (min-width: 1104px) {
			display: block;
			position: relative;
			z-index: 1;
			align-self: end;

			img {
				width: 100%;
				height: auto;
			}
		}
	}
}

.o_archive_list {
	.box {
		background-color: #fff;
		padding: 36px;

		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	a {
		text-decoration: none;
		transition: color .3s ease;

		&:hover {
			color: var(--color_primary);
		}
	}
}

.o_bento_contact {
	position: relative;
	overflow: hidden;
	z-index: 0;
	background: #fff;

	.a_h2 {
		text-align: center;
		margin-block-end: 32px;
	}

	.col-6 {
		grid-row: span 2;
	}

	.photo {
		border-radius: var(--radius-sm);
		overflow: hidden;
		position: relative;

		&.col-6 {
			padding-bottom: 71.71%;
		}

		&.col-3 {
			padding-bottom: 70.88%;
		}

		img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	.map {
		border-radius: var(--radius-sm);
		overflow: hidden;
		position: relative;

		&.col-6 {
			padding-bottom: 71.71%;
		}

		&.col-3 {
			padding-bottom: 70.88%;
		}

		iframe {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: 0;
			display: block;
		}
	}

	.address,
	.hours,
	.contact {
		border-radius: var(--radius-sm);
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.address {
		background: var(--bg_body);

		.address-text {
			margin: 0;
			font-family: var(--font-body);
			font-size: 16px;
			line-height: 1.6;
		}

		.icon-map-pin {
			color: var(--color_primary);
			mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>') center / contain no-repeat;
		}
	}

	.hours {
		background: var(--color_primary);
		color: var(--color_text-inverted);

		.hours-text {
			margin: 0;
			font-family: var(--font-body);
			font-size: 16px;
			line-height: 1.6;
		}

		.icon-clock {
			color: var(--color_text-inverted);
			mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>') center / contain no-repeat;
		}
	}

	.contact {
		background: var(--bg_body);

		.person,
		.phone,
		.email {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 14px;
		}

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

		.person {
			.avatar {
				width: 43px;
				height: 43px;
				border-radius: var(--radius-sm);
				overflow: hidden;
				background: var(--color_beige);
				flex-shrink: 0;

				.avatar-img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					display: block;
				}
			}

			.name {
				margin: 0;
				font-family: var(--font-heading);
				font-weight: 700;
				font-size: 16px;
				line-height: 1.6;
			}

			.role {
				margin: 0;
				font-family: var(--font-body);
				font-size: 14px;
				line-height: 1.6;
			}
		}

		.icon-card {
			width: 43px;
			height: 43px;
			border-radius: var(--radius-sm);
			background: var(--bg_surface);
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			&::before {
				content: '';
				width: 24px;
				height: 24px;
				background-color: currentColor;
			}
		}

		.icon-card-phone {
			color: var(--color_primary);

			&::before {
				mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>') center / contain no-repeat;
			}
		}

		.icon-card-mail {
			color: var(--color_primary);

			&::before {
				mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>') center / contain no-repeat;
			}
		}

		.phone-number,
		.email-text {
			font-family: var(--font-heading);
			font-weight: 700;
			font-size: 18px;
			line-height: 1.6;
			color: var(--color_primary);
			text-decoration: underline;
			transition: all .3s ease;

			&:hover {
				color: var(--color_primary-hover);
			}
		}

		.phone-hours {
			display: inline-flex;
			align-items: center;
			align-self: flex-start;
			height: 22px;
			padding: 0 6px;
			font-family: var(--font-body);
			font-weight: 400;
			font-size: 14px;
			line-height: 1.6;
			color: var(--color_text-muted);
		}

		.reply {
			margin: 0;
			font-family: var(--font-body);
			font-size: 14px;
			line-height: 1.6;
			color: var(--color_text-muted);
		}
	}

	.icon {
		display: inline-block;
		width: 24px;
		height: 24px;
		background-color: currentColor;
		flex-shrink: 0;
	}
}

.o_bento_videos {
	position: relative;
	overflow: hidden;
	z-index: 0;
	padding-block: 96px;

	.a_h2 {
		text-align: center;
		margin-block-end: 32px;
	}

	.video,
	.card {
		border-radius: var(--radius-sm);
		overflow: hidden;
		position: relative;
	}

	.video {
		isolation: isolate;
		cursor: pointer;
		padding-bottom: 62.18%;

		.poster {
			position: absolute;
			inset: 0;
		}

		.poster img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(to bottom, transparent, #00000099);
			pointer-events: none;
			z-index: 1;
		}

		.logo {
			position: absolute;
			top: 60px;
			left: 50%;
			translate: -50% 0;
			z-index: 2;
			max-width: calc(100% - 80px);
			pointer-events: none;
			display: none;

			img {
				width: auto;
				max-height: 50px;
				height: auto;
				display: block;
			}
		}

		.play {
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			z-index: 2;
			width: 77px;
			height: 60px;
			padding: 0;
			border: 0;
			border-radius: var(--radius-sm);
			background: var(--color_primary);
			cursor: pointer;
			display: grid;
			place-items: center;
			transition: all .3s ease;

			&:hover {
				background: var(--color_primary-hover);
			}

			.play-triangle {
				display: block;
				width: 0;
				height: 0;
				border-left: 16px solid var(--color_text-inverted);
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				translate: 3px 0;
			}
		}

		.caption {
			position: absolute;
			inset: auto 40px 40px;
			z-index: 2;
			color: var(--color_text-inverted);
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 6px;

			.caption-text {
				margin: 0;
				font-family: var(--font-heading);
				font-weight: 500;
				font-size: 18px;
				line-height: 1.4;
				text-decoration: underline;
				display: none;
			}

			.duration {
				font-family: var(--font-body);
				font-size: 14px;
				line-height: 1.6;
				opacity: .8;
			}
		}

		&:hover .caption .caption-text {
			text-decoration: none;
		}

		@media (min-width: 580px) {
			.logo,
			.caption .caption-text {
				display: block;
			}
		}

		@media (min-width: 1104px) {
			.caption .caption-text {
				font-size: 24px;
			}
		}

		&.is-playing {
			cursor: default;

			.poster,
			.logo,
			.play,
			.caption {
				display: none;
			}

			&::after {
				display: none;
			}

			iframe {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				border: 0;
			}
		}
	}

	.card {
		background: var(--bg_surface);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 24px;
		text-decoration: none;
		transition: all .3s ease;

		&:is(a):hover {
			background: var(--bg_body);

			.headline {
				color: var(--color_text);
				text-decoration: none;
			}
		}

		.photo {
			position: relative;
			width: 100%;
			padding-bottom: 57.06%;
			overflow: hidden;
			border-radius: var(--radius-sm);

			img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}

		.logo {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 26px;

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

		.headline {
			display: block;
			margin: 0;
			padding:  0 14px 14px 14px;
			font-family: var(--font-body);
			font-weight: 400;
			font-size: 18px;
			line-height: 1.6;
			color: var(--color_primary);
			text-align: center;
			text-decoration: underline;
			text-wrap: balance;
			transition: color .3s ease;
		}
	}
}

.o_blog {
	gap: 20px;

	.col-4 {
		position: relative;
		display: block;
		color: var(--color_text);
		text-decoration: none;
	}

	.thumb {
		display: block;
		height: 188px;
		border-radius: var(--radius-sm);
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform .3s ease;
		}
	}

	.body {
		display: block;
		background: var(--bg_surface);
		border-radius: var(--radius-sm);
		padding: 20px 20px 30px;
	}

	.date,
	.cat,
	.read-time {
		font-size: 14px;
		line-height: 1.6;
		margin-right: 16px;
	}

	.date,
	.read-time {
		color: var(--color_text-muted);
	}

	.cat {
		color: var(--color_text);
		background: var(--color_beige);
		border-radius: var(--radius-sm);
		padding-inline: 5px;
	}

	.title {
		display: block;
		margin-top: 16px;
		font-size: 16px;
		line-height: 1.4;
		color: var(--color_primary);
		text-decoration: underline;
		text-decoration-skip-ink: none;
	}

	.excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		margin-top: 10px;
		margin-bottom: 32px;
		font-size: 14px;
		line-height: 1.6;
		color: var(--color_text);
	}

	img.avatar {
		float: left;
		width: 43px;
		height: 43px;
		object-fit: cover;
		border-radius: var(--radius-sm);
		margin-right: 13px;
	}

	.author-label {
		display: block;
		font-size: 14px;
		line-height: 1.6;
		color: var(--color_text-muted);
	}

	.author-name {
		display: block;
		font-size: 16px;
		line-height: 1.6;
		color: var(--color_text);
	}

	.col-4:hover .thumb img {
		transform: scale(1.1);
	}

	.col-4:hover .title {
		text-decoration: none;
	}

	@media (min-width: 1104px) {
		gap: 42px;

		.col-4 {
			height: 565px;
		}

		.thumb {
			height: 250px;
		}

		.body {
			padding: 29px 29px 33px;
		}
	}
}

.o_blog_author_big {
	background: var(--bg_surface);

	.bio {
		position: relative;
		overflow: hidden;
		max-width: 700px;
		min-height: 225px;
		margin-inline: auto;
		padding: 36px;
		background: var(--bg_body);
		border-radius: var(--radius-sm);
		@media (min-width: 600px) {
			padding-left: 240px;
		}

		.photo {
			@media (min-width: 600px) {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 220px;
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;

			}
		}

		.badge {
			position: absolute;
			z-index: 1;
			top: 11px;
			left: 11px;
			background: var(--bg_surface);
			border: 1px solid var(--color_beige);
			border-radius: var(--radius-sm);
			padding: 0 5px;
			font-size: 14px;
			line-height: 1.6;
			color: var(--color_text);
		}

		.name {
			display: block;
			font-family: var(--font-heading);
			font-weight: 500;
			font-size: 24px;
			line-height: 1.4;
			color: var(--color_primary);
			text-decoration: underline;
		}

		.role {
			display: block;
			font-size: 16px;
			line-height: 1.6;
			color: var(--color_text-muted);
		}

		.text {
			display: block;
			margin-top: 20px;
			font-size: 16px;
			line-height: 1.6;
			color: var(--color_text);
		}
	}
}

.o_blog_author_small {
	background: var(--bg_surface);
	text-align: left;

	@media (min-width: 1024px) {
		text-align: center;
	}

	.meta-info,
	.meta-author {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 16px;
	}

	.meta-info {
		margin-right: 36px;

		> span {
			display: inline-block;
			vertical-align: middle;
			font-size: 14px;
			line-height: 1.6;
			color: var(--color_text-muted);
		}

		> span + span {
			margin-left: 16px;
		}
	}

	.category {
		color: var(--color_text);
		background: var(--color_beige);
		border-radius: var(--radius-sm);
		padding: 0 5px;
	}

	.avatar {
		display: inline-block;
		vertical-align: middle;
		width: 43px;
		height: 43px;
		border-radius: var(--radius-sm);
		overflow: hidden;
		background: var(--color_beige);

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	.author {
		display: inline-block;
		vertical-align: middle;
		margin-left: 13px;
		text-align: left;

		.author-label {
			display: block;
			font-size: 14px;
			line-height: 1.6;
			color: var(--color_text-muted);
		}

		.author-name {
			display: block;
			font-size: 16px;
			line-height: 1.6;
			color: var(--color_text);
		}
	}
}

.o_blog_single {
	background-color: #fff;

	.a_h2,
	.a_h3,
	.a_description,
	blockquote,
	.html {
		max-width: 700px;
		margin-inline: auto;
	}

	.a_h2 {
		padding-top: 32px;
		text-wrap: auto;
	}

	.a_h3 {
		padding-top: 40px;
		text-wrap: auto;
	}

	.a_description {
		padding-top: 20px;
		text-wrap: auto;
	}

	.a_wp_image + .a_h3 {
		padding-top: 56px;
	}

	blockquote + .a_h3 {
		padding-top: 49px;
	}

	.a_wp_image {
		overflow: hidden;
		max-width: 940px;
		margin: 0 auto;
		padding-top: 56px;

		&:first-child {
			padding-top: 0;
		}

		img {
			width: 100%;
			height: auto;

			@media (min-width: 1104px) {
				border-radius: var(--radius-lg);
			}
		}
	}

	blockquote {
		position: relative;
		margin-top: 49px;
		background: var(--bg_body);
		border-radius: var(--radius-md);
		padding: 40px 63px 35px 99px;
		font-family: var(--font-heading);
		font-weight: 500;
		font-size: 20px;
		line-height: 1.6;

		&::before {
			content: '';
			position: absolute;
			top: 23px;
			left: 29px;
			width: 49px;
			height: 34px;
			background-color: var(--color_primary);
			mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 34"><path d="M34.4094 34C31.005 34 28.4516 32.9032 26.7494 30.7097C25.0471 28.5161 24.196 25.9164 24.196 22.9104C24.196 18.1983 26.4657 13.6488 31.005 9.26165C35.5443 4.79331 41.4615 1.7061 48.7568 0L49 0.487456C38.7866 4.14337 33.6799 9.13979 33.6799 15.4767C33.6799 20.5137 36.9223 23.7634 43.4069 25.2258C43.4069 27.6631 42.5558 29.7348 40.8536 31.4409C39.2324 33.147 37.0844 34 34.4094 34ZM10.2134 34C6.80893 34 4.25558 32.9032 2.55335 30.7097C0.851117 28.5161 0 25.9164 0 22.9104C0 18.1983 2.26964 13.6488 6.80893 9.26165C11.3482 4.79331 17.2655 1.7061 24.5608 0L24.804 0.487456C14.5906 4.14337 9.48387 9.13979 9.48387 15.4767C9.48387 20.5137 12.7262 23.7634 19.2109 25.2258C19.2109 27.6631 18.3598 29.7348 16.6576 31.4409C15.0364 33.147 12.8883 34 10.2134 34Z"/></svg>') center / contain no-repeat;
		}
	}

	.youtube {
		max-width: 940px;
		margin: 0 auto;
		padding-top: 56px;

		iframe {
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			display: block;

			@media (min-width: 1104px) {
				border-radius: var(--radius-lg);
			}
		}
	}

	ul, li, ol {
		font-size: 18px;
		line-height: 1.6;
	}

	.space.h-0 { height: 0; }
	.space.h-16 { height: 16px; }
	.space.h-24 { height: 24px; }
	.space.h-32 { height: 32px; }
	.space.h-48 { height: 48px; }
	.space.h-64 { height: 64px; }
	.space.h-80 { height: 80px; }
	.space.h-96 { height: 96px; }
	.space.h-128 { height: 128px; }

	@media (min-width: 768px) {
		.space.h-sm-0 { height: 0; }
		.space.h-sm-16 { height: 16px; }
		.space.h-sm-24 { height: 24px; }
		.space.h-sm-32 { height: 32px; }
		.space.h-sm-48 { height: 48px; }
		.space.h-sm-64 { height: 64px; }
		.space.h-sm-80 { height: 80px; }
		.space.h-sm-96 { height: 96px; }
		.space.h-sm-128 { height: 128px; }
	}

	@media (min-width: 1104px) {
		.space.h-xl-0 { height: 0; }
		.space.h-xl-16 { height: 16px; }
		.space.h-xl-24 { height: 24px; }
		.space.h-xl-32 { height: 32px; }
		.space.h-xl-48 { height: 48px; }
		.space.h-xl-64 { height: 64px; }
		.space.h-xl-80 { height: 80px; }
		.space.h-xl-96 { height: 96px; }
		.space.h-xl-128 { height: 128px; }
	}
}

.o_breadcrumbs {
	padding-block: 24px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color_text);
	text-align: center;
	background: var(--bg_surface);

	nav {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		max-width: 100%;
	}

	a {
		color: var(--color_text);
		text-decoration: none;
		transition: all .3s ease;

		&:hover {
			text-decoration: underline;
		}
	}

	.m_wp_link {
		color: var(--color_primary);
	}

	.home-icon {
		display: inline-block;
		width: 13px;
		height: 14px;
		vertical-align: middle;
		background-color: var(--color_primary);
		mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14" fill="none"><path d="M11.2962 4.23932L7.62821 1.38638C7.30632 1.13596 6.91013 1 6.50231 1C6.09448 1 5.69829 1.13596 5.3764 1.38638L1.70773 4.23932C1.48745 4.41095 1.30921 4.63056 1.18657 4.88144C1.06393 5.13232 1.00012 5.40787 1 5.68712V10.6392C1 11.004 1.14493 11.3539 1.4029 11.6119C1.66087 11.8698 2.01075 12.0148 2.37558 12.0148H10.629C10.9939 12.0148 11.3437 11.8698 11.6017 11.6119C11.8597 11.3539 12.0046 11.004 12.0046 10.6392V5.68712C12.0046 5.12107 11.7433 4.58666 11.2962 4.23932Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
	}

	nav > *:not(:first-child)::before {
		content: '';
		display: inline-block;
		width: 11px;
		height: 17px;
		vertical-align: middle;
		margin-inline: 8px;
		background-color: var(--color_beige);
		mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="17" viewBox="0 0 11 17" fill="none"><line x1="0.423657" y1="16.2648" x2="10.4237" y2="0.264786" stroke="currentColor"/></svg>') center / contain no-repeat;
	}
}

.o_celebrities {
	position: relative;
	overflow: hidden;
	z-index: 0;
	background: var(--bg_surface);

	.heading {
		text-align: center;
		margin-bottom: 32px;
	}

	.slider-outer {
		position: relative;
	}

	.slider-track {
		overflow: hidden;
	}

	.slider {
		display: flex;
		transition: transform .3s ease;
	}

	.slide {
		flex: 0 0 100%;
		min-width: 0;
	}

	.photo {
		position: relative;
		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
		overflow: hidden;

		img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 342 / 574;
			object-fit: cover;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(to left, #00000000, #00000066);
		}
	}

	.body {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 32px;
		background: var(--bg_body);
		border-radius: 0 0 var(--radius-sm) var(--radius-sm);

		.a_description {
			font-style: italic;
			font-size: 24px;
			color: var(--color_text);
		}

		.author {
			font-family: var(--font-heading);
			font-weight: 700;
			font-size: 18px;
			line-height: 1.6;
			color: var(--color_text);
		}
	}

	.nav-prev { left: 16px; }
	.nav-next { right: 16px; }

	.nav-prev[hidden],
	.nav-next[hidden],
	.dots[hidden] {
		display: none;
	}

	.dots {
		display: none;

		.dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 2px solid var(--color_text-inverted);
			background-color: transparent;
			cursor: pointer;
			padding: 0;

			&.active {
				background-color: var(--color_text-inverted);
			}
		}
	}

	@media (min-width: 1104px) {

		.heading {
			margin-bottom: 40px;
		}

		.slide {
			position: relative;
		}

		.photo {
			border-radius: var(--radius-sm);

			img {
				aspect-ratio: 1420 / 773;
			}
		}

		.body {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 613px;
			padding: 0 0 0 136px;
			background: transparent;
			border-radius: 0;
			justify-content: center;

			.a_description,
			.author {
				color: var(--color_text-inverted);
			}
		}

		.dots {
			display: flex;
			position: absolute;
			bottom: 43px;
			left: 0;
			right: 0;
			justify-content: center;
			gap: 8px;
		}
	}
}

.o_client_results {
	position: relative;
	z-index: 0;
	gap: 32px;
	background-color: #fff;

	.card {
		display: flex;
		flex-direction: column;
		gap: 20px;

		.a_wp_image {
			border-radius: var(--radius-sm);
			overflow: hidden;

			img {
				display: block;
				width: 100%;
				height: auto;
				aspect-ratio: 443 / 335;
				object-fit: cover;
			}
		}

		.m_wp_link {
			color: var(--color_primary);
			font-family: var(--font-heading);
			font-size: 18px;
			line-height: 1.6;
			text-decoration: none;
			transition: color .3s ease;

			&:hover {
				color: var(--color_primary-hover);
			}
		}
	}

	@media (min-width: 1104px) {
		gap: 55px 45px;
	}
}

.o_contact_banner {
	color: var(--color_text);
	background: var(--bg_surface);
	padding-inline: max(28px, calc(50dvw - 468.5px));
	padding-bottom: 0;

	.content {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.a_h2 {
		margin: 0;
	}

	.consultant {
		display: flex;
		flex-direction: column;
		gap: 0;

		.name {
			font-family: var(--font-heading);
			font-weight: 700;
			font-size: 20px;
			line-height: 1.4;
			color: var(--color_text);
			margin: 0;
		}

		.a_description {
			font-size: 14px;
			line-height: 1.6;
			color: var(--color_text-muted);
			margin: 0;
		}
	}

	.contacts {
		display: flex;
		flex-direction: column;
		gap: 16px;

		.contact {
			display: flex;
			align-items: flex-start;
			gap: 14px;
			text-align: left;
			color: inherit;
			text-decoration: none;

			.icon {
				flex: 0 0 43px;
				width: 43px;
				height: 43px;
				border-radius: 5px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				background: var(--bg_body);
				color: var(--color_primary);

				&::before {
					content: '';
					display: block;
					width: 22px;
					height: 22px;
					background-color: currentColor;
					mask: var(--icon) center / 100% 100% no-repeat;
				}
			}

			&.phone .icon {
				--icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 22.6079 22.6576' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M3.99874 2.86757C4.3007 2.86757 4.54514 3.04971 4.69851 3.20308L4.71289 3.21746C5.00526 3.49066 5.28325 3.77345 5.57562 4.0754C5.7242 4.22878 5.87757 4.38215 6.03095 4.54032L7.33942 5.84878C7.84747 6.35683 7.84747 6.82654 7.33942 7.33459C7.20042 7.47359 7.06622 7.61259 6.92723 7.7468C6.52462 8.15899 6.14119 8.54241 5.7242 8.91626C5.71462 8.92584 5.70503 8.93065 5.70023 8.94023C5.28804 9.35242 5.36473 9.75503 5.451 10.0282L5.46538 10.0714C5.80568 10.8957 6.28497 11.6722 7.0135 12.602H7.01829C8.34114 14.2364 9.74068 15.5113 11.2792 16.4843C11.4757 16.6089 11.677 16.7096 11.8687 16.8054C12.0413 16.8917 12.2043 16.9732 12.3432 17.0595C12.3624 17.0691 12.3816 17.0834 12.4008 17.093C12.5637 17.1745 12.7171 17.2128 12.8753 17.2128C13.2731 17.2128 13.5223 16.9636 13.6038 16.8821L15.243 15.2429C15.4059 15.08 15.6648 14.8835 15.9667 14.8835C16.2687 14.8835 16.5083 15.0704 16.6569 15.2334L16.6665 15.2429L19.3122 17.8886C19.8059 18.3775 19.8059 18.8808 19.317 19.3888C19.1301 19.5901 18.9383 19.7723 18.7322 19.9736C18.4207 20.2707 18.1044 20.5823 17.8072 20.9322C17.3231 21.4498 16.7528 21.6942 16.0051 21.6942C15.9332 21.6942 15.8565 21.6942 15.7846 21.6895C14.3611 21.5984 13.0334 21.0424 12.0413 20.5679C9.3237 19.2546 6.9416 17.3854 4.95733 15.0225C3.32294 13.0526 2.22535 11.2265 1.50162 9.27095C1.05588 8.0775 0.892919 7.14287 0.964813 6.26576C1.01274 5.70499 1.22842 5.24007 1.62624 4.84226L3.26063 3.20788C3.49548 2.98741 3.74472 2.86757 3.98916 2.86757M3.99874 1.90898C3.50986 1.90898 3.03057 2.11508 2.61358 2.5081L2.604 2.5177L2.59441 2.52728L0.960019 4.16167C0.404038 4.71765 0.0877043 5.39825 0.0206032 6.18429C-0.0656697 7.22436 0.116461 8.2788 0.614927 9.60644C1.377 11.6674 2.52731 13.5846 4.2288 15.636C6.29935 18.1091 8.79168 20.0599 11.6339 21.4354C12.7075 21.9483 14.1406 22.5522 15.7319 22.6528C15.8229 22.6576 15.9188 22.6576 16.0146 22.6576C17.0307 22.6576 17.8455 22.3077 18.5213 21.5888L18.5357 21.5744L18.5501 21.5553C18.8233 21.2341 19.1205 20.9418 19.408 20.6686L19.5279 20.5535C19.595 20.4864 19.6669 20.4193 19.7387 20.3474L19.825 20.2564C19.8921 20.1893 19.9592 20.1174 20.0263 20.0455C20.8795 19.154 20.8699 18.066 19.9976 17.2033L17.3615 14.5671C16.9732 14.1502 16.4843 13.9201 15.9811 13.9201C15.4778 13.9201 14.9985 14.1406 14.5768 14.5624L12.9376 16.2015C12.9376 16.2015 12.8944 16.2447 12.8801 16.2543C12.8801 16.2543 12.8753 16.2543 12.8657 16.2447C12.8561 16.2399 12.8513 16.2351 12.8417 16.2303C12.6692 16.1248 12.487 16.0338 12.3097 15.9475C12.1276 15.8564 11.9598 15.775 11.8064 15.6743C10.3542 14.7541 9.03612 13.5558 7.77558 12.0029L7.74682 11.9694C7.09498 11.1354 6.66841 10.4452 6.37125 9.73586V9.72627C6.35687 9.69272 6.35207 9.67355 6.35207 9.65917C6.35687 9.64959 6.37125 9.6352 6.38563 9.62082H6.39042C6.83137 9.21821 7.23877 8.81082 7.61262 8.42738C7.70847 8.33632 7.79954 8.24047 7.8954 8.1494L8.0296 8.0152C8.90671 7.13809 8.90671 6.05008 8.0296 5.17297L6.72113 3.86451L6.50065 3.63924C6.42397 3.56256 6.34728 3.48586 6.27539 3.40918C5.95426 3.07367 5.67627 2.79568 5.38869 2.52728C4.97171 2.11988 4.502 1.90898 4.00833 1.90898H3.99874Z' fill='%23000'/%3E %3Cpath d='M18.1953 11.9885C17.9605 11.9885 17.7544 11.8159 17.7208 11.5763C17.2319 8.13974 14.4904 5.39339 11.0538 4.89013C10.7902 4.85178 10.6081 4.60734 10.6465 4.34852C10.6848 4.08491 10.9244 3.90279 11.1881 3.94113C15.0416 4.50191 18.1186 7.58376 18.665 11.4373C18.7034 11.7009 18.5212 11.9405 18.2576 11.9789C18.2337 11.9789 18.2097 11.9789 18.1905 11.9789L18.1953 11.9885Z' fill='%23000'/%3E %3Cpath d='M22.1257 11.8255C21.8861 11.8255 21.6752 11.6434 21.6512 11.399C21.0425 5.88708 16.5995 1.49195 11.078 0.955141C10.8144 0.931176 10.6227 0.696324 10.6467 0.432712C10.6706 0.169101 10.9007 -0.0178209 11.1691 0.0013509C17.1363 0.586089 21.9484 5.33588 22.605 11.2983C22.6338 11.5619 22.4421 11.7968 22.1833 11.8255C22.1641 11.8255 22.1497 11.8255 22.1305 11.8255H22.1257Z' fill='%23000'/%3E %3C/g%3E %3C/svg%3E");
			}

			&.mail .icon {
				--icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 22.7042 14.5514' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M20.1974 14.5514H2.5067C1.12634 14.5514 0 13.4298 0 12.0447V2.50671C0 1.12635 1.12155 0 2.5067 0H20.1974C21.5778 0 22.7041 1.12155 22.7041 2.50671V12.0447C22.7041 13.425 21.5826 14.5514 20.1974 14.5514ZM2.5067 0.958588C1.65356 0.958588 0.958588 1.65357 0.958588 2.50671V12.0447C0.958588 12.8978 1.65356 13.5928 2.5067 13.5928H20.1974C21.0506 13.5928 21.7456 12.8978 21.7456 12.0447V2.50671C21.7456 1.65357 21.0506 0.958588 20.1974 0.958588H2.5067Z' fill='%23000'/%3E %3Cpath d='M11.1245 8.04739C10.2138 8.04739 9.30797 7.82212 8.50276 7.36679L8.45484 7.33803L2.40614 2.93812C2.19046 2.77995 2.14254 2.48279 2.3007 2.26711C2.45408 2.05142 2.75603 2.00349 2.97171 2.16166L8.99643 6.5472C10.3001 7.26614 11.9105 7.27573 13.2238 6.56637L19.747 1.98911C19.9627 1.83573 20.2646 1.88847 20.4132 2.10415C20.5666 2.31983 20.5139 2.62178 20.2982 2.77036L13.7079 7.39076C12.9123 7.82692 12.0208 8.04739 11.1293 8.04739H11.1245Z' fill='%23000'/%3E %3C/g%3E %3C/svg%3E");
			}

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

			.link {
				font-size: 18px;
				line-height: 18px;
				color: var(--color_primary);
				text-decoration: underline;
				font-weight: 700;
			}

			.caption {
				font-size: 14px;
				line-height: 1.6;
				color: var(--color_text-muted);
			}
		}
	}

	.photo {
		img {
			max-width: 100%;
			height: auto;
			border-radius: 5px;
		}
	}

	@media (min-width: 1104px) {
		align-items: center;
		gap: 46px;

		.photo {
			order: -1;
		}
	}
}

.o_contact_banner2 {
	color: var(--color_text);
	background: var(--bg_surface);
	padding-inline: max(28px, calc(50dvw - 468.5px));
	padding-bottom: 0;

	.content {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.a_h2 {
		margin: 0;
	}

	.consultant {
		display: flex;
		flex-direction: column;
		gap: 0;

		.name {
			font-family: var(--font-heading);
			font-weight: 700;
			font-size: 20px;
			line-height: 1.4;
			color: var(--color_text);
			margin: 0;
		}

		.a_description {
			font-size: 14px;
			line-height: 1.6;
			color: var(--color_text-muted);
			margin: 0;
		}
	}

	.contacts {
		display: flex;
		flex-direction: column;
		gap: 16px;

		.contact {
			display: flex;
			align-items: flex-start;
			gap: 14px;
			text-align: left;
			color: inherit;
			text-decoration: none;

			.icon {
				flex: 0 0 43px;
				width: 43px;
				height: 43px;
				border-radius: 5px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				background: var(--bg_body);
				color: var(--color_primary);

				&::before {
					content: '';
					display: block;
					width: 22px;
					height: 22px;
					background-color: currentColor;
					mask: var(--icon) center / 100% 100% no-repeat;
				}
			}

			&.phone .icon {
				--icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 22.6079 22.6576' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M3.99874 2.86757C4.3007 2.86757 4.54514 3.04971 4.69851 3.20308L4.71289 3.21746C5.00526 3.49066 5.28325 3.77345 5.57562 4.0754C5.7242 4.22878 5.87757 4.38215 6.03095 4.54032L7.33942 5.84878C7.84747 6.35683 7.84747 6.82654 7.33942 7.33459C7.20042 7.47359 7.06622 7.61259 6.92723 7.7468C6.52462 8.15899 6.14119 8.54241 5.7242 8.91626C5.71462 8.92584 5.70503 8.93065 5.70023 8.94023C5.28804 9.35242 5.36473 9.75503 5.451 10.0282L5.46538 10.0714C5.80568 10.8957 6.28497 11.6722 7.0135 12.602H7.01829C8.34114 14.2364 9.74068 15.5113 11.2792 16.4843C11.4757 16.6089 11.677 16.7096 11.8687 16.8054C12.0413 16.8917 12.2043 16.9732 12.3432 17.0595C12.3624 17.0691 12.3816 17.0834 12.4008 17.093C12.5637 17.1745 12.7171 17.2128 12.8753 17.2128C13.2731 17.2128 13.5223 16.9636 13.6038 16.8821L15.243 15.2429C15.4059 15.08 15.6648 14.8835 15.9667 14.8835C16.2687 14.8835 16.5083 15.0704 16.6569 15.2334L16.6665 15.2429L19.3122 17.8886C19.8059 18.3775 19.8059 18.8808 19.317 19.3888C19.1301 19.5901 18.9383 19.7723 18.7322 19.9736C18.4207 20.2707 18.1044 20.5823 17.8072 20.9322C17.3231 21.4498 16.7528 21.6942 16.0051 21.6942C15.9332 21.6942 15.8565 21.6942 15.7846 21.6895C14.3611 21.5984 13.0334 21.0424 12.0413 20.5679C9.3237 19.2546 6.9416 17.3854 4.95733 15.0225C3.32294 13.0526 2.22535 11.2265 1.50162 9.27095C1.05588 8.0775 0.892919 7.14287 0.964813 6.26576C1.01274 5.70499 1.22842 5.24007 1.62624 4.84226L3.26063 3.20788C3.49548 2.98741 3.74472 2.86757 3.98916 2.86757M3.99874 1.90898C3.50986 1.90898 3.03057 2.11508 2.61358 2.5081L2.604 2.5177L2.59441 2.52728L0.960019 4.16167C0.404038 4.71765 0.0877043 5.39825 0.0206032 6.18429C-0.0656697 7.22436 0.116461 8.2788 0.614927 9.60644C1.377 11.6674 2.52731 13.5846 4.2288 15.636C6.29935 18.1091 8.79168 20.0599 11.6339 21.4354C12.7075 21.9483 14.1406 22.5522 15.7319 22.6528C15.8229 22.6576 15.9188 22.6576 16.0146 22.6576C17.0307 22.6576 17.8455 22.3077 18.5213 21.5888L18.5357 21.5744L18.5501 21.5553C18.8233 21.2341 19.1205 20.9418 19.408 20.6686L19.5279 20.5535C19.595 20.4864 19.6669 20.4193 19.7387 20.3474L19.825 20.2564C19.8921 20.1893 19.9592 20.1174 20.0263 20.0455C20.8795 19.154 20.8699 18.066 19.9976 17.2033L17.3615 14.5671C16.9732 14.1502 16.4843 13.9201 15.9811 13.9201C15.4778 13.9201 14.9985 14.1406 14.5768 14.5624L12.9376 16.2015C12.9376 16.2015 12.8944 16.2447 12.8801 16.2543C12.8801 16.2543 12.8753 16.2543 12.8657 16.2447C12.8561 16.2399 12.8513 16.2351 12.8417 16.2303C12.6692 16.1248 12.487 16.0338 12.3097 15.9475C12.1276 15.8564 11.9598 15.775 11.8064 15.6743C10.3542 14.7541 9.03612 13.5558 7.77558 12.0029L7.74682 11.9694C7.09498 11.1354 6.66841 10.4452 6.37125 9.73586V9.72627C6.35687 9.69272 6.35207 9.67355 6.35207 9.65917C6.35687 9.64959 6.37125 9.6352 6.38563 9.62082H6.39042C6.83137 9.21821 7.23877 8.81082 7.61262 8.42738C7.70847 8.33632 7.79954 8.24047 7.8954 8.1494L8.0296 8.0152C8.90671 7.13809 8.90671 6.05008 8.0296 5.17297L6.72113 3.86451L6.50065 3.63924C6.42397 3.56256 6.34728 3.48586 6.27539 3.40918C5.95426 3.07367 5.67627 2.79568 5.38869 2.52728C4.97171 2.11988 4.502 1.90898 4.00833 1.90898H3.99874Z' fill='%23000'/%3E %3Cpath d='M18.1953 11.9885C17.9605 11.9885 17.7544 11.8159 17.7208 11.5763C17.2319 8.13974 14.4904 5.39339 11.0538 4.89013C10.7902 4.85178 10.6081 4.60734 10.6465 4.34852C10.6848 4.08491 10.9244 3.90279 11.1881 3.94113C15.0416 4.50191 18.1186 7.58376 18.665 11.4373C18.7034 11.7009 18.5212 11.9405 18.2576 11.9789C18.2337 11.9789 18.2097 11.9789 18.1905 11.9789L18.1953 11.9885Z' fill='%23000'/%3E %3Cpath d='M22.1257 11.8255C21.8861 11.8255 21.6752 11.6434 21.6512 11.399C21.0425 5.88708 16.5995 1.49195 11.078 0.955141C10.8144 0.931176 10.6227 0.696324 10.6467 0.432712C10.6706 0.169101 10.9007 -0.0178209 11.1691 0.0013509C17.1363 0.586089 21.9484 5.33588 22.605 11.2983C22.6338 11.5619 22.4421 11.7968 22.1833 11.8255C22.1641 11.8255 22.1497 11.8255 22.1305 11.8255H22.1257Z' fill='%23000'/%3E %3C/g%3E %3C/svg%3E");
			}

			&.mail .icon {
				--icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 22.7042 14.5514' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M20.1974 14.5514H2.5067C1.12634 14.5514 0 13.4298 0 12.0447V2.50671C0 1.12635 1.12155 0 2.5067 0H20.1974C21.5778 0 22.7041 1.12155 22.7041 2.50671V12.0447C22.7041 13.425 21.5826 14.5514 20.1974 14.5514ZM2.5067 0.958588C1.65356 0.958588 0.958588 1.65357 0.958588 2.50671V12.0447C0.958588 12.8978 1.65356 13.5928 2.5067 13.5928H20.1974C21.0506 13.5928 21.7456 12.8978 21.7456 12.0447V2.50671C21.7456 1.65357 21.0506 0.958588 20.1974 0.958588H2.5067Z' fill='%23000'/%3E %3Cpath d='M11.1245 8.04739C10.2138 8.04739 9.30797 7.82212 8.50276 7.36679L8.45484 7.33803L2.40614 2.93812C2.19046 2.77995 2.14254 2.48279 2.3007 2.26711C2.45408 2.05142 2.75603 2.00349 2.97171 2.16166L8.99643 6.5472C10.3001 7.26614 11.9105 7.27573 13.2238 6.56637L19.747 1.98911C19.9627 1.83573 20.2646 1.88847 20.4132 2.10415C20.5666 2.31983 20.5139 2.62178 20.2982 2.77036L13.7079 7.39076C12.9123 7.82692 12.0208 8.04739 11.1293 8.04739H11.1245Z' fill='%23000'/%3E %3C/g%3E %3C/svg%3E");
			}

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

			.link {
				font-size: 18px;
				line-height: 18px;
				color: var(--color_primary);
				text-decoration: underline;
				font-weight: 700;
			}

			.caption {
				font-size: 14px;
				line-height: 1.6;
				color: var(--color_text-muted);
			}
		}
	}

	.photo {
		img {
			max-width: 100%;
			height: auto;
			border-radius: 5px;
		}
	}

	.social > p {
		font-family: var(--font-heading);
		font-size: 18px;
		font-weight: 300;
		line-height: 1.6;
		color: var(--color_text);
		margin: 0;
	}

	.social-icons {
		display: inline-flex;
		gap: 10px;
		margin-top: 8px;
	}

	.social-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 39px;
		height: 39px;
		border-radius: 30px;
		border: 2px solid var(--color_primary);
		flex-shrink: 0;
		transition: border-color .3s;

		&:hover {
			border-color: var(--color_primary-hover);
		}

		.a_wp_image {
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				height: 20px;
				width: auto;
			}
		}
	}

	@media (min-width: 1104px) {
		align-items: center;
		gap: 46px;

		.photo {
			order: -1;
		}

		.social {
			text-align: right;
		}
	}
}

.o_cta_booking {
	padding-block: 0;
	position: relative;
	isolation: isolate;
	background-color: #fff;

	.box_bg {
		position: absolute;
		inset: 0 max(1px, calc(50dvw - 710px));
		background: var(--bg_body);
		border-radius: var(--radius-sm);
		overflow: hidden;
		z-index: -1;
	}

	.photo,
	.address,
	.hours,
	.cta_col {
		position: relative;
	}

	.photo {
		overflow: hidden;

		img {
			width: 100%;
			height: auto;
		}
	}

	.address {
		padding: 8px 0 8px;
	}

	.hours {
		padding: 8px 0 8px;
	}

	.cta_col {
		padding: 8px 0 32px;
	}

	.address .a_h3 {
		margin-bottom: 7px;
	}

	address {
		font-style: normal;
		margin-bottom: 13px;
	}

	@media (min-width: 1104px) {

		.photo {
			&::after {
				content: '';
				position: absolute;
				inset: 0;
				background: linear-gradient(to right, transparent 25%, var(--bg_body) 81%);
			}

			img {
				width: auto;
				max-height: 236px;
			}
		}

		.address {
			padding: 48px 0 64px;
		}

		.hours {
			padding: 90px 0 64px;

			p {
				font-size: 16px;
				line-height: 1.6;
				color: var(--color_text);
				margin: 0;
			}
		}

		.cta_col {
			padding: 112px 40px 64px 0;
		}
	}
}

.o_cta_salon {
	background-color: var(--bg_surface);
	padding-top: 69px;

	.box {
		position: relative;
		z-index: 1;
		overflow: hidden;
		background: var(--color_primary);
		border-radius: var(--radius-sm);
		padding: 42px 23px;
		display: grid;
		gap: 32px;
	}

	.a_h2 {
		color: var(--color_text-inverted);
		font-weight: 700;
	}

	.a_description {
		color: var(--color_text-inverted);
	}

	.a_button {
		padding: 16px 40px;
	}

	.actions {
		display: flex;
		flex-direction: column;
		gap: 32px;
		position: relative;
		z-index: 1;
	}

	a {
		color: var(--color_text-inverted);
		text-decoration: none;
		display: flex;
		gap: 18px;

		.avatar {
			flex-shrink: 0;
			width: 47px;
			height: 47px;
			border-radius: var(--radius-sm);
			background: var(--color_beige);
			overflow: hidden;
			position: relative;

			img.avatar-photo {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.info {
			.label {
				display: block;
				font-family: var(--font-body);
				font-size: 14px;
				line-height: 1.6;
				color: var(--color_text-inverted);
			}

			.number {
				font-family: var(--font-heading);
				font-size: 18px;
				font-weight: 700;
				line-height: 1.6;
				text-decoration: underline;
				margin-right: 10px;
			}

			.hours {
				font-family: var(--font-body);
				font-size: 14px;
				line-height: 1.6;
				color: var(--color_beige);
			}
		}
	}

	.model-bg {
		display: none;
	}

	/* MOBIL: modelka vpravo nahore za textem, mekce zapustena do modre (jako ve Figme).
	   Obrazek je pruhledny vyrez (postava zabira 14-82 % sirky obrazku), proto staci
	   maska a neni potreba zadny prekryv navic.
	   right: -14% ji drzi v pravem rohu, aby do ni nelezl nadpis; presah orizne .box
	   (ten ma na mobilu overflow: hidden).
	   z-index: -1 = nad podkladem .box i nad .m_wp_background (ta ma taky -1, ale je
	   driv v DOM), zaroven pod nadpisem a popiskem, ktere jsou staticke.
	   Cely blok je v max-width dotazu, takze desktop zustava beze zmeny. */
	@media (max-width: 1103.98px) {
		.model-bg {
			display: block;
			position: absolute;
			top: 0;
			right: -14%;
			width: 68%;
			max-width: 270px;
			z-index: -1;
			pointer-events: none;
			mask-image: radial-gradient(115% 88% at 78% 14%, #000 36%, rgba(0, 0, 0, 0.5) 62%, transparent 84%);
			-webkit-mask-image: radial-gradient(115% 88% at 78% 14%, #000 36%, rgba(0, 0, 0, 0.5) 62%, transparent 84%);

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

		/* Telefon a oteviraci doba jsou inline, takze se na uzkem mobilu lamalo cislo
		   uprostred a hodiny se prilepily za jeho zbytek. Cislo na vlastni radek (a bez
		   zalomeni), hodiny pod nej. */
		.info .number {
			display: block;
			margin-right: 0;
			white-space: nowrap;
		}

		.info .hours {
			display: block;
		}
	}

	@media (min-width: 1104px) {

		.box {
			padding: 102px 40% 114px 244px;
			min-height: 434px;
			position: relative;
			overflow: visible;
		}

		.actions {
			flex-direction: row;
			align-items: center;
			gap: 50px;
		}

		.model-bg {
			display: block;
			position: absolute;
			right: 0;
			bottom: 0;

			img {
				display: block;
				width: auto;
				height: 476px;
			}
		}
	}
	@media (min-width: 1104px) {
	}
}

.o_customer_care {
	position: relative;
	background-color: #fff;

	.heading {
		text-align: center;
		margin-bottom: 40px;

		.a_h2 {
			font-size: 26px;
			line-height: 1.6;
			font-weight: 700;
		}
	}

	.slider {
		position: relative;
		overflow: clip;
	}

	.slides {
		display: flex;
		gap: 21px;
		padding-inline: 20px;
		transition: transform .3s ease;
		align-items: flex-start;
	}

	.slide {
		flex: 0 0 335px;
		background: var(--bg_body);
		border-radius: 0 0 5px 5px;

		.a_wp_image {
			border-radius: 5px;
			overflow: hidden;
			position: relative;
			padding-bottom: 103.48%;

			img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}

		.body {
			padding: 20px 17px 0; /* mobil: sjednotit s kaderniky (o_professionals) */
			min-height: 200px;

			.a_h3 {
				font-family: var(--font-heading);
				font-size: 22px;
				font-weight: 700;
				line-height: 1.6;
				color: var(--color_primary);
			}

			.role {
				font-size: 18px;
				line-height: 1.6;
				margin: 4px 0 18px 0;
			}

			.a_description {
				font-size: 14px;
				line-height: 1.6;
				margin-top: 0;
			}
		}

		.contact {
			display: flex;
			flex-direction: column;
			gap: 18px;
			margin-top: 18px;
			padding: 0 17px 36px 17px; /* mobil: zarovnat kontakt s body + spodni padding jako kaderni */

			.phone,
			.mail {
				display: flex;
				align-items: flex-start;
				gap: 14px;
			}

			.icon {
				flex: 0 0 43px;
				width: 43px;
				height: 43px;
				background: var(--bg_surface);
				border-radius: 5px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				color: var(--color_primary);

				&::before {
					content: '';
					display: block;
					width: 22px;
					height: 22px;
					background-color: currentColor;
					mask: var(--icon) center / 100% 100% no-repeat;
				}
			}

			.phone .icon {
				--icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 22.6079 22.6576' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M3.99874 2.86757C4.3007 2.86757 4.54514 3.04971 4.69851 3.20308L4.71289 3.21746C5.00526 3.49066 5.28325 3.77345 5.57562 4.0754C5.7242 4.22878 5.87757 4.38215 6.03095 4.54032L7.33942 5.84878C7.84747 6.35683 7.84747 6.82654 7.33942 7.33459C7.20042 7.47359 7.06622 7.61259 6.92723 7.7468C6.52462 8.15899 6.14119 8.54241 5.7242 8.91626C5.71462 8.92584 5.70503 8.93065 5.70023 8.94023C5.28804 9.35242 5.36473 9.75503 5.451 10.0282L5.46538 10.0714C5.80568 10.8957 6.28497 11.6722 7.0135 12.602H7.01829C8.34114 14.2364 9.74068 15.5113 11.2792 16.4843C11.4757 16.6089 11.677 16.7096 11.8687 16.8054C12.0413 16.8917 12.2043 16.9732 12.3432 17.0595C12.3624 17.0691 12.3816 17.0834 12.4008 17.093C12.5637 17.1745 12.7171 17.2128 12.8753 17.2128C13.2731 17.2128 13.5223 16.9636 13.6038 16.8821L15.243 15.2429C15.4059 15.08 15.6648 14.8835 15.9667 14.8835C16.2687 14.8835 16.5083 15.0704 16.6569 15.2334L16.6665 15.2429L19.3122 17.8886C19.8059 18.3775 19.8059 18.8808 19.317 19.3888C19.1301 19.5901 18.9383 19.7723 18.7322 19.9736C18.4207 20.2707 18.1044 20.5823 17.8072 20.9322C17.3231 21.4498 16.7528 21.6942 16.0051 21.6942C15.9332 21.6942 15.8565 21.6942 15.7846 21.6895C14.3611 21.5984 13.0334 21.0424 12.0413 20.5679C9.3237 19.2546 6.9416 17.3854 4.95733 15.0225C3.32294 13.0526 2.22535 11.2265 1.50162 9.27095C1.05588 8.0775 0.892919 7.14287 0.964813 6.26576C1.01274 5.70499 1.22842 5.24007 1.62624 4.84226L3.26063 3.20788C3.49548 2.98741 3.74472 2.86757 3.98916 2.86757M3.99874 1.90898C3.50986 1.90898 3.03057 2.11508 2.61358 2.5081L2.604 2.5177L2.59441 2.52728L0.960019 4.16167C0.404038 4.71765 0.0877043 5.39825 0.0206032 6.18429C-0.0656697 7.22436 0.116461 8.2788 0.614927 9.60644C1.377 11.6674 2.52731 13.5846 4.2288 15.636C6.29935 18.1091 8.79168 20.0599 11.6339 21.4354C12.7075 21.9483 14.1406 22.5522 15.7319 22.6528C15.8229 22.6576 15.9188 22.6576 16.0146 22.6576C17.0307 22.6576 17.8455 22.3077 18.5213 21.5888L18.5357 21.5744L18.5501 21.5553C18.8233 21.2341 19.1205 20.9418 19.408 20.6686L19.5279 20.5535C19.595 20.4864 19.6669 20.4193 19.7387 20.3474L19.825 20.2564C19.8921 20.1893 19.9592 20.1174 20.0263 20.0455C20.8795 19.154 20.8699 18.066 19.9976 17.2033L17.3615 14.5671C16.9732 14.1502 16.4843 13.9201 15.9811 13.9201C15.4778 13.9201 14.9985 14.1406 14.5768 14.5624L12.9376 16.2015C12.9376 16.2015 12.8944 16.2447 12.8801 16.2543C12.8801 16.2543 12.8753 16.2543 12.8657 16.2447C12.8561 16.2399 12.8513 16.2351 12.8417 16.2303C12.6692 16.1248 12.487 16.0338 12.3097 15.9475C12.1276 15.8564 11.9598 15.775 11.8064 15.6743C10.3542 14.7541 9.03612 13.5558 7.77558 12.0029L7.74682 11.9694C7.09498 11.1354 6.66841 10.4452 6.37125 9.73586V9.72627C6.35687 9.69272 6.35207 9.67355 6.35207 9.65917C6.35687 9.64959 6.37125 9.6352 6.38563 9.62082H6.39042C6.83137 9.21821 7.23877 8.81082 7.61262 8.42738C7.70847 8.33632 7.79954 8.24047 7.8954 8.1494L8.0296 8.0152C8.90671 7.13809 8.90671 6.05008 8.0296 5.17297L6.72113 3.86451L6.50065 3.63924C6.42397 3.56256 6.34728 3.48586 6.27539 3.40918C5.95426 3.07367 5.67627 2.79568 5.38869 2.52728C4.97171 2.11988 4.502 1.90898 4.00833 1.90898H3.99874Z' fill='%23000'/%3E %3Cpath d='M18.1953 11.9885C17.9605 11.9885 17.7544 11.8159 17.7208 11.5763C17.2319 8.13974 14.4904 5.39339 11.0538 4.89013C10.7902 4.85178 10.6081 4.60734 10.6465 4.34852C10.6848 4.08491 10.9244 3.90279 11.1881 3.94113C15.0416 4.50191 18.1186 7.58376 18.665 11.4373C18.7034 11.7009 18.5212 11.9405 18.2576 11.9789C18.2337 11.9789 18.2097 11.9789 18.1905 11.9789L18.1953 11.9885Z' fill='%23000'/%3E %3Cpath d='M22.1257 11.8255C21.8861 11.8255 21.6752 11.6434 21.6512 11.399C21.0425 5.88708 16.5995 1.49195 11.078 0.955141C10.8144 0.931176 10.6227 0.696324 10.6467 0.432712C10.6706 0.169101 10.9007 -0.0178209 11.1691 0.0013509C17.1363 0.586089 21.9484 5.33588 22.605 11.2983C22.6338 11.5619 22.4421 11.7968 22.1833 11.8255C22.1641 11.8255 22.1497 11.8255 22.1305 11.8255H22.1257Z' fill='%23000'/%3E %3C/g%3E %3C/svg%3E");
			}

			.mail .icon {
				--icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 22.7042 14.5514' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M20.1974 14.5514H2.5067C1.12634 14.5514 0 13.4298 0 12.0447V2.50671C0 1.12635 1.12155 0 2.5067 0H20.1974C21.5778 0 22.7041 1.12155 22.7041 2.50671V12.0447C22.7041 13.425 21.5826 14.5514 20.1974 14.5514ZM2.5067 0.958588C1.65356 0.958588 0.958588 1.65357 0.958588 2.50671V12.0447C0.958588 12.8978 1.65356 13.5928 2.5067 13.5928H20.1974C21.0506 13.5928 21.7456 12.8978 21.7456 12.0447V2.50671C21.7456 1.65357 21.0506 0.958588 20.1974 0.958588H2.5067Z' fill='%23000'/%3E %3Cpath d='M11.1245 8.04739C10.2138 8.04739 9.30797 7.82212 8.50276 7.36679L8.45484 7.33803L2.40614 2.93812C2.19046 2.77995 2.14254 2.48279 2.3007 2.26711C2.45408 2.05142 2.75603 2.00349 2.97171 2.16166L8.99643 6.5472C10.3001 7.26614 11.9105 7.27573 13.2238 6.56637L19.747 1.98911C19.9627 1.83573 20.2646 1.88847 20.4132 2.10415C20.5666 2.31983 20.5139 2.62178 20.2982 2.77036L13.7079 7.39076C12.9123 7.82692 12.0208 8.04739 11.1293 8.04739H11.1245Z' fill='%23000'/%3E %3C/g%3E %3C/svg%3E");
			}

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

			.link {
				font-size: 18px;
				line-height: 1.6;
				color: var(--color_primary);
				text-decoration: underline;
				font-weight: 400;
			}

			.caption {
				font-size: 14px;
				line-height: 1.6;
				color: var(--color_text-muted);
			}
		}
	}

	.nav-prev { left: 0; }
	.nav-next { right: 0; }

	.dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 24px;

		.dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 2px solid var(--color_primary);
			background: transparent;
			cursor: pointer;
			padding: 0;

			&.active {
				background: var(--color_primary);
			}
		}
	}

	@media (min-width: 1104px) {

		.heading {
			margin-bottom: 56px;

			.a_h2 {
				font-size: 32px;
				line-height: 1.4;
			}
		}

		.slider {
			overflow: visible;
		}

		.slides {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 21px;
			padding-inline: 0;
			max-width: 941px;
			margin-inline: auto;
			transform: none !important;
		}

		.slide {
			flex: none;
			min-height: 366px;

			.body {
				padding: 36px 36px 0 36px;
			}

			.contact {
				padding: 0 36px 36px 36px;
			}
		}

		.nav-prev,
		.nav-next {
			display: none;
		}

		.dots {
			display: none;
		}
	}
}

.o_faq {
	padding-inline: max(16px, calc(50dvw - 470px));
	background-color: #fff;

	.a_h2 {
		text-align: center;
	}

	.list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-block-start: 40px;
	}

	.item {
		padding: 24px;
		background: var(--bg_body);
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		transition: background .3s ease, border-color .3s ease;

		&:has(:checked) {
			background: var(--bg_surface);
			border-color: var(--color_beige);

			.head h3 {
				color: var(--color_primary);
			}

			.arrow {
				transform: rotate(180deg);
			}

			.answer {
				font-size: 16px;
				opacity: 1;
				margin-block-start: 16px;
			}
		}
	}

	.toggle {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
		margin: 0;
	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		cursor: pointer;
		user-select: none;

		h3 {
			flex: 1;
			font-family: var(--font-heading);
			font-weight: 500;
			font-size: 20px;
			line-height: 1.6;
			color: var(--color_text);
			margin: 0;
			transition: color .3s ease;
		}
	}

	.arrow {
		width: 15px;
		height: 16px;
		flex-shrink: 0;
		background-color: var(--color_primary);
		mask: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.65617 15.7071C7.0467 16.0976 7.67986 16.0976 8.07039 15.7071L14.4343 9.34315C14.8249 8.95262 14.8249 8.31946 14.4343 7.92893C14.0438 7.53841 13.4107 7.53841 13.0201 7.92893L7.36328 13.5858L1.70643 7.92893C1.3159 7.53841 0.682737 7.53841 0.292213 7.92893C-0.0983113 8.31946 -0.0983113 8.95262 0.292213 9.34315L6.65617 15.7071ZM7.36328 0L6.36328 -4.37114e-08L6.36328 15L7.36328 15L8.36328 15L8.36328 4.37114e-08L7.36328 0Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: transform .3s ease;
	}

	.answer {
		font-family: var(--font-body);
		font-weight: 400;
		font-size: 0;
		line-height: 1.6;
		color: var(--color_text);
		opacity: 0;
		margin: 0;
		overflow: hidden;
		transition: font-size .3s ease, opacity .3s ease, margin-block-start .3s ease;
	}
}

.o_footer_copy {
	background: var(--bg_body);
	padding-block: 30px;

	@media (min-width: 768px) {
		padding-block: 55px;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;

		@media (min-width: 768px) {
			flex-direction: row;
			justify-content: space-between;
			gap: 0;
		}
	}

	.social {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;

		@media (min-width: 768px) {
			flex-direction: row;
			gap: 25px;
		}

		> p {
			font-family: var(--font-heading);
			font-size: 18px;
			font-weight: 500;
			line-height: 1.6;
			color: var(--color_text);
		}
	}

	.social-icons {
		display: flex;
		gap: 10px;
	}

	.social-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 39px;
		height: 39px;
		border-radius: 30px;
		border: 2px solid var(--color_primary);
		flex-shrink: 0;
		transition: border-color .3s;

		&:hover {
			border-color: var(--color_primary-hover);
		}

		.a_wp_image {
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				height: 20px;
				width: auto;
			}
		}
	}

	.a_description {
		font-size: 14px;
		color: var(--color_text-muted);
		text-align: center;
	}

	.m_wp_link {
		font-size: 14px;
		color: var(--color_text);
		text-decoration: underline;
	}
}

.o_footer_links {
	background: var(--bg_surface);

	.nav-col {
		.heading {
			display: flex;
			align-items: center;
			gap: 8px;
			padding-block: 16px;
			cursor: pointer;

			.nav-toggle {
				display: none;
			}

			.a_h3 {
				flex: 1;
				margin: 0;
			}

			&::after {
				content: '';
				width: 8px;
				height: 8px;
				border-right: 1.5px solid currentColor;
				border-bottom: 1.5px solid currentColor;
				transform: rotate(45deg);
				transition: transform .3s;
				flex-shrink: 0;
				margin-top: -4px;
			}

			&:has(.nav-toggle:checked)::after {
				transform: rotate(-135deg);
				margin-top: 4px;
			}
		}

		.links {
			display: none;
			list-style: none;
			padding: 0 0 16px;
			margin: 0;

			.heading:has(.nav-toggle:checked) ~ & {
				display: block;
			}

			li + li {
				margin-top: 10px;
			}

			.m_wp_link {
				font-size: 14px;
				color: var(--color_primary);
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	.contact-col {
		.a_h3 {
			padding-block: 16px;
			margin: 0;
		}

		.person {
			display: grid;
			grid-template-columns: 43px 1fr;
			gap: 4px 10px;
			margin-bottom: 16px;

			img {
				grid-row: 1 / 3;
				width: 43px;
				height: auto;
				border-radius: 50%;
			}

			.name {
				font-size: 16px;
				font-weight: 700;
				margin: 0;
			}

			.role {
				font-size: 14px;
				margin: 0;
			}
		}

		.line {
			display: grid;
			grid-template-columns: 43px 1fr;
			gap: 4px 12px;
			margin-bottom: 16px;

			.icon-btn {
				grid-row: 1 / 3;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 43px;
				height: 43px;
				background: var(--bg_body);
				border-radius: var(--radius-sm);
				color: var(--color_primary);

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

			.value {
				font-size: 18px;
				font-weight: 700;
			}

			a.value {
				color: var(--color_primary);
				text-decoration: underline;
				text-decoration-skip-ink: none;
			}

			.note {
				font-size: 14px;
				color: var(--color_text-muted);
				margin: 0;
			}
		}
	}

	@media (min-width: 640px) {
		.nav-col {
			.heading {
				padding-block: 0 16px;
				cursor: default;
				pointer-events: none;

				&::after {
					display: none;
				}
			}

			.links {
				display: block;
			}
		}

		.contact-col {
			.a_h3 {
				padding-block: 0 16px;
			}
		}
	}
}

.o_foto_text {
	position: relative;
	overflow: hidden;
	z-index: 0;
	background: #fff;

	.text {
		position: relative;
		z-index: 2;
		padding-block: 48px;

		.m_buttons {
			justify-content: flex-start;
			margin-top: 20px;
		}
	}

	.photo {
		position: relative;
		z-index: 1;
		overflow: hidden;
		font-size: 0;

		img {
			width: 100%;
			height: auto;
		}
	}

	&.variant-text {

		/* Mobil: fotka az na spodni hranu sekce. Sekce ma padding-block: 48px,
		   takze pod fotkou zbyvala 48px mezera. Desktop uz to resi vlastnim
		   margin-bottom: -48px v @media (min-width: 1104px), mobil to nemel.
		   Zamerne jen ve variant-text: variant-tips na akcich ma pb-0 a je
		   zarovnana uz ted, zaporny margin by ji fotku vystrcil pod sekci. */
		@media (max-width: 1103.98px) {
			.photo {
				margin-bottom: -48px;
			}
		}

		.text {

			.a_description {
				margin-top: 20px;
			}
		}

		.signature {
			position: absolute;
			z-index: 3;
			bottom: 71px;
			left: 8px;
			pointer-events: none;
			transform: rotate(-9.57deg);

			img {
				width: 228px;
				height: auto;
			}
		}
	}

	&.variant-quote {

		blockquote {
			margin: 0;
			padding: 0;
			color: var(--color_text);

			.a_h2 {
				font-style: italic;
				font-weight: 400;
			}

			footer {
				margin-top: 24px;
				display: flex;
				flex-direction: column;
				gap: 4px;

				.author {
					font-weight: 700;
				}

				.role {
					color: var(--color_text-muted);
					font-size: 14px;
				}
			}
		}
	}

	&.variant-tips {

		.tips {
			margin: 32px 0 0;
			display: flex;
			flex-direction: column;
			gap: 14px;

			.tips__item {
				display: flex;
				align-items: center;
				gap: 14px;

				&::before {
					content: "";
					display: block;
					width: 22px;
					height: 1px;
					background: currentColor;
					flex-shrink: 0;
				}
			}
		}
	}

	@media (min-width: 1104px) {

		.text {
			align-self: center;
			padding-block: 188px;

			.m_buttons {
				margin-top: 32px;
			}
		}

		.text.col-12 {
			text-align: center;
		}

		.photo {
			align-self: stretch;
			margin-bottom: -48px;
			margin-top: 48px;

			img {
				height: 100%;
				object-fit: cover;
				object-position: center top;
			}
		}

		&.photo-left .photo {
			order: -1;
		}

		&.photo-right .photo {
			order: 1;
		}

		&.variant-text {

			.text {

				.a_description {
					margin-top: 32px;
				}
			}

			.signature {
				bottom: 146px;
			}

			&.photo-right .signature {
				right: auto;
				left: max(14px, calc(50dvw - 698px));
			}

			&.photo-left .signature {
				left: auto;
				right: max(14px, calc(50dvw - 698px));
			}

			&.photo-left .text {
				padding-left: 128px;
			}
		}
	}
}

.o_google_reviews {
	background-color: var(--bg_surface);

	.a_h2 {
		text-align: center;
		margin: 0 0 28px;

		@media (min-width: 1104px) {
			margin: 0 0 40px;
		}
	}

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

	.track {
		display: flex;
		transition: transform .4s ease;

		@media (min-width: 1104px) {
			gap: 20px;
		}
	}

	article.slide {
		flex: 0 0 100%;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
		background-color: var(--bg_body);
		border-radius: var(--radius-sm);
		padding: 24px;

		@media (min-width: 1104px) {
			flex: 0 0 calc((100% - 40px) / 3);
		}

		.review-header {
			display: flex;
			align-items: flex-start;
			gap: 12px;

			.avatar {
				flex-shrink: 0;
				width: 42px;
				height: 42px;
				border-radius: 50%;
				overflow: hidden;

				img, .avatar-img {
					width: 42px;
					height: 42px;
					object-fit: cover;
				}
			}

			.review-meta {
				flex: 1;
				min-width: 0;

				.review-name {
					margin: 0;
					font-family: var(--font-heading);
					font-weight: 700;
					font-size: 16px;
					line-height: 1.6;
					color: var(--color_text);
				}

				.review-date {
					margin: 0;
					font-family: var(--font-heading);
					font-weight: 400;
					font-size: 14px;
					line-height: 1.6;
					color: var(--color_text-muted);
				}
			}

			.google-logo {
				flex-shrink: 0;
				display: block;
				width: 24px;
				height: 24px;
			}
		}

		.stars-row {
			display: flex;
			align-items: center;
			gap: 8px;
			flex-wrap: wrap;

			.stars {
				display: flex;
				gap: 2px;

				img {
					display: block;
					width: 16px;
					height: 16px;
				}
			}

			.verified-badge {
				display: flex;
				align-items: center;
				gap: 4px;
				background-color: var(--bg_surface);
				border-radius: 50px;
				padding: 2px 7px;

				img {
					display: block;
					width: 15px;
					height: 15px;
				}

				span {
					font-family: var(--font-heading);
					font-weight: 400;
					font-size: 14px;
					line-height: 1.6;
					color: var(--color_text);
					white-space: nowrap;
				}
			}
		}

		.review-text {
			margin: 0;
			font-family: var(--font-body);
			font-style: italic;
			font-weight: 400;
			font-size: 16px;
			line-height: 1.6;
			color: var(--color_text);
		}
	}

	.arrows {
		position: relative;

		.nav-prev {
			top: -128px;
			left: -28px;
			pointer-events: auto;
		}

		.nav-next {
			top: -128px;
			right: -28px;
			pointer-events: auto;
		}
	}

	.nav-prev[hidden],
	.nav-next[hidden] {
		display: none;
	}

	.dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin: 20px 0 0;

		@media (min-width: 1104px) {
			display: none;
		}

		.dot {
			width: 8px;
			height: 8px;
			padding: 0;
			border: 0;
			border-radius: 50%;
			background-color: var(--color_text);
			opacity: .25;
			cursor: pointer;
			transition: opacity .3s ease;

			&:hover {
				opacity: .5;
			}

			&.active {
				opacity: 1;
				background-color: var(--color_primary);
			}
		}
	}
}

.o_hero {
	position: relative;
	overflow: hidden;
	z-index: 0;
	min-height: 882px;
	padding-block: 0;
	color: var(--color_text-inverted);
	row-gap: 0;

	/* Mobil: fotka salonu je 3:2, ale hero box je hodne na vysku (~0,40),
	   takze cover ukaze CELOU vysku fotky a hornich ~23 % je strop.
	   Priblizenim ukazeme 13-91 % vysky fotky (bez stropu) a object-position
	   posune vyrez na ceduli TOMAS ARSOV s policemi (zdroj x 28-48 %).
	   Hranice stropu overena z jasoveho profilu fotky (jas 185-205 do 20 %,
	   pak zlom na 112). Orez zajistuje .m_wp_background (overflow: hidden). */
	/* @media (max-width: 1103.98px) {
		.m_wp_background .layer-image img {
			object-position: 34% 50%;
			transform: scale(1.28);
			transform-origin: 50% 61%;
		}
	} */

	@media (min-width: 1104px) {
		min-height: 792px;
		align-items: end;
		padding-block: 80px 76px;
	}

	> .m_wp_background {
		display: none;

		@media (min-width: 1104px) {
			display: block;
		}
	}

	.title {
		position: relative;
		z-index: 2;
		min-height: 475px;
		padding: 199px 16px 26px;
		text-align: center;

		@media (min-width: 1104px) {
			min-height: auto;
			max-width: 608px;
			padding: 0 0 36px 32px;
			text-align: left;
		}

		.m_wp_background {
			@media (min-width: 1104px) {
				display: none;
			}
		}

		.a_h1 {
			margin: 0 auto 8px;
			max-width: 280px;
			color: var(--color_text-inverted);

			@media (min-width: 1104px) {
				margin: 0 0 8px;
				max-width: none;
				font-weight: 700;
			}
		}

		.a_description {
			margin: 0 auto 32px;
			max-width: 280px;
			color: var(--color_text-inverted);

			@media (min-width: 1104px) {
				margin: 0 0 32px;
				max-width: 480px;
			}
		}

		.m_buttons {
			justify-content: center;
			margin: 0;

			@media (min-width: 1104px) {
				justify-content: flex-start;
			}
		}
	}

	.promo {
		position: relative;
		z-index: 2;
		background-color: var(--color_primary);

		@media (min-width: 1104px) {
			margin-left: auto;
			background-color: transparent;
		}
	}

	.slider {
		position: relative;

		@media (min-width: 1104px) {
			max-width: 580px;
			margin-left: auto;
			margin-right: 32px;
		}
	}

	.slide {
		position: relative;
		z-index: 1;

		&:not(.active) {
			display: none;
		}

		.slide-link {
			display: block;
		}

		.photo {
			position: relative;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.photo.mobile {
			aspect-ratio: 1;

			@media (min-width: 1104px) {
				display: none;
			}
		}

		.photo.desktop {
			display: none;

			@media (min-width: 1104px) {
				display: block;
				aspect-ratio: 2736 / 1020;
			}
		}
	}

	.dots {
		position: relative;
		z-index: 2;
		padding: 16px 0 18px;
		line-height: 1;
		text-align: center;
		margin-top: -50px;

		@media (min-width: 1104px) {
			padding: 0;
			line-height: inherit;
			margin-top: 0;
		}

		.dot {
			display: inline-block;
			width: 8px;
			height: 8px;
			margin: 0 3px;
			padding: 0;
			border-radius: 50%;
			background-color: rgb(255 255 255 / .4);
			cursor: pointer;
			transition: all .3s ease;
			vertical-align: middle;
			border: 2px solid var( --color_text-muted );

			@media (min-width: 1104px) {
				border: 0;
			}

			&:hover {
				background-color: rgb(255 255 255 / .7);
			}

			&.active {
				background-color: var(--color_text-inverted);
			}
		}
	}

	.nav-prev,
	.nav-next {
		/* Hero carousel si drzi sipky uprostred i na mobilu.
		   Atom a_nav_arrow ma na mobilu nove top: 30%, tady to vracime na 50%. */
		top: 50%;
		width: 32px;
		height: 32px;
		@media (min-width: 1104px) {
			display: flex;
			width: 48px;
			height: 48px;
		}
	}

	.nav-prev {
		left: 0;
		transform: translate(0, -50%);
		@media (min-width: 1104px) {
			transform: translate(50%, -50%);
			left: -48px;
		}
	}

	.nav-next {
		right: 0;
		transform: translate(0, -50%);
		@media (min-width: 1104px) {
			transform: translate(50%, -50%);
		}
	}
}

.o_hero_icons {
	isolation: isolate;
	overflow: hidden;
	text-align: center;
	color: var(--color_text-inverted);
	padding-block: 12px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;

	.breadcrumbs {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		font-size: 14px;
		line-height: 1.6;
		color: var(--color_text-inverted);

		a {
			color: var(--color_beige);
			text-decoration: none;
			transition: all .3s ease;
		}

		a:hover {
			text-decoration: underline;
		}

		.home-icon {
			display: inline-block;
			width: 13px;
			height: 14px;
			margin-top: -3px;
			vertical-align: middle;
			background-color: var(--color_beige);
			mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14" fill="none"><path d="M11.2962 4.23932L7.62821 1.38638C7.30632 1.13596 6.91013 1 6.50231 1C6.09448 1 5.69829 1.13596 5.3764 1.38638L1.70773 4.23932C1.48745 4.41095 1.30921 4.63056 1.18657 4.88144C1.06393 5.13232 1.00012 5.40787 1 5.68712V10.6392C1 11.004 1.14493 11.3539 1.4029 11.6119C1.66087 11.8698 2.01075 12.0148 2.37558 12.0148H10.629C10.9939 12.0148 11.3437 11.8698 11.6017 11.6119C11.8597 11.3539 12.0046 11.004 12.0046 10.6392V5.68712C12.0046 5.12107 11.7433 4.58666 11.2962 4.23932Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
		}

		*:not(:first-child)::before {
			content: '';
			display: inline-block;
			width: 11px;
			height: 17px;
			vertical-align: middle;
			margin: -2px 8px 0 8px;
			background-color: var(--color_beige);
			mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="17" viewBox="0 0 11 17" fill="none"><line x1="0.423657" y1="16.2648" x2="10.4237" y2="0.264786" stroke="currentColor"/></svg>') center / contain no-repeat;
		}
	}

	.content {
		.a_h1 {
			color: var(--color_text-inverted);
			margin: 0 0 12px;
		}

		.a_description {
			color: var(--color_text-inverted);
			max-width: 791px;
			margin: 0 auto 24px;
		}

		.rating {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			font-size: 16px;
			line-height: 1.6;

			.stars {
				display: inline-block;
				width: 88px;
				height: 16px;
				background-color: var(--color_accent);
				mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none"><path d="M7.60938 0L9.9229 4.81571L15.2178 5.52786L11.3527 9.21629L12.3117 14.4721L7.60938 11.936L2.90709 14.4721L3.86602 9.21629L0.00092268 5.52786L5.29585 4.81571L7.60938 0Z" fill="black"/></svg>') space center / 16px 16px;
			}

			.caption {
				color: var(--color_beige);
			}
		}
	}

	.features {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		gap: 32px;

		.feature {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 22px;
		}

		.a_wp_image img {
			height: 58px;
			width: auto;
			display: block;
		}

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

		.feature-title {
			margin: 0;
			font-family: var(--font-heading);
			font-weight: 700;
			font-size: 16px;
			line-height: 1.6;
			text-decoration: underline;
			color: var(--color_beige);
		}

		.feature-subtitle {
			margin: 0;
			font-size: 14px;
			line-height: 1.6;
			color: var(--color_text-inverted);
		}
	}

	@media (min-width: 640px) {
		.features {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1104px) {
		min-height: 703px;
		justify-content: space-between;
		padding-block: 12px 53px;

		.features {
			grid-template-columns: repeat(4, auto);
			gap: 91px;
			justify-content: center;

			.feature-title {
				white-space: nowrap;
			}
		}
	}
}

.o_hero_profesionals {
	isolation: isolate;
	overflow: hidden;
	text-align: center;
	color: var(--color_text-inverted);
	padding-block: 12px 48px;

	/* Mobil: spodni odsazeni dle Figmy (obsahovy frame ma padding 128px).
	   Horni zustava 12px, vetsi mezeru pod breadcrumbs resi jejich margin-bottom. */
	@media (max-width: 1103.98px) {
		padding-bottom: 128px;
	}
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	.breadcrumbs {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;

		/* Mobil: drobeckova navigace doleva a vetsi odsazeni pod ni (dle Figmy).
		   Sekce je flex sloupec s align-items: center, proto align-self.
		   Od 1104px zustava puvodni vycentrovani. */
		@media (max-width: 1103.98px) {
			align-self: flex-start;
			justify-content: flex-start;
			text-align: left;
			margin-bottom: 150px;
		}
		font-size: 14px;
		line-height: 1.6;
		color: var(--color_text-inverted);

		a {
			color: var(--color_beige);
			text-decoration: none;
			transition: all .3s ease;
		}

		a:hover {
			text-decoration: underline;
		}

		.home-icon {
			display: inline-block;
			width: 13px;
			height: 14px;
			margin-top: -7px;
			vertical-align: middle;
			background-color: var(--color_beige);
			mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14" fill="none"><path d="M11.2962 4.23932L7.62821 1.38638C7.30632 1.13596 6.91013 1 6.50231 1C6.09448 1 5.69829 1.13596 5.3764 1.38638L1.70773 4.23932C1.48745 4.41095 1.30921 4.63056 1.18657 4.88144C1.06393 5.13232 1.00012 5.40787 1 5.68712V10.6392C1 11.004 1.14493 11.3539 1.4029 11.6119C1.66087 11.8698 2.01075 12.0148 2.37558 12.0148H10.629C10.9939 12.0148 11.3437 11.8698 11.6017 11.6119C11.8597 11.3539 12.0046 11.004 12.0046 10.6392V5.68712C12.0046 5.12107 11.7433 4.58666 11.2962 4.23932Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
		}

		*:not(:first-child)::before {
			content: '';
			display: inline-block;
			width: 11px;
			height: 17px;
			vertical-align: middle;
			margin: -2px 8px 0 8px;
			background-color: var(--color_beige);
			mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="17" viewBox="0 0 11 17" fill="none"><line x1="0.423657" y1="16.2648" x2="10.4237" y2="0.264786" stroke="currentColor"/></svg>') center / contain no-repeat;
		}
	}

	.content {
		.a_wp_image {
			margin-bottom: 24px;
			text-align: center;
			img {
				width: 227px;
				height: auto;
				display: inline-block;
				border-radius: 5px;
			}

		}

		.eyebrow {
			margin: 0;
			font-family: var(--font-heading);
			font-weight: 700;
			font-size: 16px;
			line-height: 1.6;
			text-transform: uppercase;
			color: var(--color_beige);
		}

		.a_h1 {
			color: var(--color_text-inverted);
			margin: 0 0 12px;
		}

		.a_description {
			color: var(--color_text-inverted);
			max-width: 791px;
			margin: 0 0 24px;
		}

		.contacts {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 16px;
			margin-bottom: 24px;

			.contact {
				display: flex;
				align-items: flex-start;
				gap: 14px;
				text-align: left;
			}

			.contact-icon {
				flex: 0 0 43px;
				width: 43px;
				height: 43px;
				background: var(--bg_body);
				border-radius: 5px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				color: var(--color_primary);

				&::before {
					content: '';
					display: block;
					width: 22px;
					height: 22px;
					background-color: currentColor;
					mask: var(--icon) center / 100% 100% no-repeat;
				}
			}

			.contact-phone .contact-icon {
				--icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 22.6079 22.6576' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M3.99874 2.86757C4.3007 2.86757 4.54514 3.04971 4.69851 3.20308L4.71289 3.21746C5.00526 3.49066 5.28325 3.77345 5.57562 4.0754C5.7242 4.22878 5.87757 4.38215 6.03095 4.54032L7.33942 5.84878C7.84747 6.35683 7.84747 6.82654 7.33942 7.33459C7.20042 7.47359 7.06622 7.61259 6.92723 7.7468C6.52462 8.15899 6.14119 8.54241 5.7242 8.91626C5.71462 8.92584 5.70503 8.93065 5.70023 8.94023C5.28804 9.35242 5.36473 9.75503 5.451 10.0282L5.46538 10.0714C5.80568 10.8957 6.28497 11.6722 7.0135 12.602H7.01829C8.34114 14.2364 9.74068 15.5113 11.2792 16.4843C11.4757 16.6089 11.677 16.7096 11.8687 16.8054C12.0413 16.8917 12.2043 16.9732 12.3432 17.0595C12.3624 17.0691 12.3816 17.0834 12.4008 17.093C12.5637 17.1745 12.7171 17.2128 12.8753 17.2128C13.2731 17.2128 13.5223 16.9636 13.6038 16.8821L15.243 15.2429C15.4059 15.08 15.6648 14.8835 15.9667 14.8835C16.2687 14.8835 16.5083 15.0704 16.6569 15.2334L16.6665 15.2429L19.3122 17.8886C19.8059 18.3775 19.8059 18.8808 19.317 19.3888C19.1301 19.5901 18.9383 19.7723 18.7322 19.9736C18.4207 20.2707 18.1044 20.5823 17.8072 20.9322C17.3231 21.4498 16.7528 21.6942 16.0051 21.6942C15.9332 21.6942 15.8565 21.6942 15.7846 21.6895C14.3611 21.5984 13.0334 21.0424 12.0413 20.5679C9.3237 19.2546 6.9416 17.3854 4.95733 15.0225C3.32294 13.0526 2.22535 11.2265 1.50162 9.27095C1.05588 8.0775 0.892919 7.14287 0.964813 6.26576C1.01274 5.70499 1.22842 5.24007 1.62624 4.84226L3.26063 3.20788C3.49548 2.98741 3.74472 2.86757 3.98916 2.86757M3.99874 1.90898C3.50986 1.90898 3.03057 2.11508 2.61358 2.5081L2.604 2.5177L2.59441 2.52728L0.960019 4.16167C0.404038 4.71765 0.0877043 5.39825 0.0206032 6.18429C-0.0656697 7.22436 0.116461 8.2788 0.614927 9.60644C1.377 11.6674 2.52731 13.5846 4.2288 15.636C6.29935 18.1091 8.79168 20.0599 11.6339 21.4354C12.7075 21.9483 14.1406 22.5522 15.7319 22.6528C15.8229 22.6576 15.9188 22.6576 16.0146 22.6576C17.0307 22.6576 17.8455 22.3077 18.5213 21.5888L18.5357 21.5744L18.5501 21.5553C18.8233 21.2341 19.1205 20.9418 19.408 20.6686L19.5279 20.5535C19.595 20.4864 19.6669 20.4193 19.7387 20.3474L19.825 20.2564C19.8921 20.1893 19.9592 20.1174 20.0263 20.0455C20.8795 19.154 20.8699 18.066 19.9976 17.2033L17.3615 14.5671C16.9732 14.1502 16.4843 13.9201 15.9811 13.9201C15.4778 13.9201 14.9985 14.1406 14.5768 14.5624L12.9376 16.2015C12.9376 16.2015 12.8944 16.2447 12.8801 16.2543C12.8801 16.2543 12.8753 16.2543 12.8657 16.2447C12.8561 16.2399 12.8513 16.2351 12.8417 16.2303C12.6692 16.1248 12.487 16.0338 12.3097 15.9475C12.1276 15.8564 11.9598 15.775 11.8064 15.6743C10.3542 14.7541 9.03612 13.5558 7.77558 12.0029L7.74682 11.9694C7.09498 11.1354 6.66841 10.4452 6.37125 9.73586V9.72627C6.35687 9.69272 6.35207 9.67355 6.35207 9.65917C6.35687 9.64959 6.37125 9.6352 6.38563 9.62082H6.39042C6.83137 9.21821 7.23877 8.81082 7.61262 8.42738C7.70847 8.33632 7.79954 8.24047 7.8954 8.1494L8.0296 8.0152C8.90671 7.13809 8.90671 6.05008 8.0296 5.17297L6.72113 3.86451L6.50065 3.63924C6.42397 3.56256 6.34728 3.48586 6.27539 3.40918C5.95426 3.07367 5.67627 2.79568 5.38869 2.52728C4.97171 2.11988 4.502 1.90898 4.00833 1.90898H3.99874Z' fill='%23000'/%3E %3Cpath d='M18.1953 11.9885C17.9605 11.9885 17.7544 11.8159 17.7208 11.5763C17.2319 8.13974 14.4904 5.39339 11.0538 4.89013C10.7902 4.85178 10.6081 4.60734 10.6465 4.34852C10.6848 4.08491 10.9244 3.90279 11.1881 3.94113C15.0416 4.50191 18.1186 7.58376 18.665 11.4373C18.7034 11.7009 18.5212 11.9405 18.2576 11.9789C18.2337 11.9789 18.2097 11.9789 18.1905 11.9789L18.1953 11.9885Z' fill='%23000'/%3E %3Cpath d='M22.1257 11.8255C21.8861 11.8255 21.6752 11.6434 21.6512 11.399C21.0425 5.88708 16.5995 1.49195 11.078 0.955141C10.8144 0.931176 10.6227 0.696324 10.6467 0.432712C10.6706 0.169101 10.9007 -0.0178209 11.1691 0.0013509C17.1363 0.586089 21.9484 5.33588 22.605 11.2983C22.6338 11.5619 22.4421 11.7968 22.1833 11.8255C22.1641 11.8255 22.1497 11.8255 22.1305 11.8255H22.1257Z' fill='%23000'/%3E %3C/g%3E %3C/svg%3E");
			}

			.contact-mail .contact-icon {
				--icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 22.7042 14.5514' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M20.1974 14.5514H2.5067C1.12634 14.5514 0 13.4298 0 12.0447V2.50671C0 1.12635 1.12155 0 2.5067 0H20.1974C21.5778 0 22.7041 1.12155 22.7041 2.50671V12.0447C22.7041 13.425 21.5826 14.5514 20.1974 14.5514ZM2.5067 0.958588C1.65356 0.958588 0.958588 1.65357 0.958588 2.50671V12.0447C0.958588 12.8978 1.65356 13.5928 2.5067 13.5928H20.1974C21.0506 13.5928 21.7456 12.8978 21.7456 12.0447V2.50671C21.7456 1.65357 21.0506 0.958588 20.1974 0.958588H2.5067Z' fill='%23000'/%3E %3Cpath d='M11.1245 8.04739C10.2138 8.04739 9.30797 7.82212 8.50276 7.36679L8.45484 7.33803L2.40614 2.93812C2.19046 2.77995 2.14254 2.48279 2.3007 2.26711C2.45408 2.05142 2.75603 2.00349 2.97171 2.16166L8.99643 6.5472C10.3001 7.26614 11.9105 7.27573 13.2238 6.56637L19.747 1.98911C19.9627 1.83573 20.2646 1.88847 20.4132 2.10415C20.5666 2.31983 20.5139 2.62178 20.2982 2.77036L13.7079 7.39076C12.9123 7.82692 12.0208 8.04739 11.1293 8.04739H11.1245Z' fill='%23000'/%3E %3C/g%3E %3C/svg%3E");
			}

			.contact-text {
				display: flex;
				flex-direction: column;
				gap: 2px;
			}

			.contact-link {
				font-size: 18px;
				line-height: 1.6;
				color: var(--color_text-inverted);
				text-decoration: underline;
				font-weight: 400;
			}

			.contact-caption {
				font-size: 14px;
				line-height: 1.6;
				color: var(--color_beige);
			}
		}

		.m_buttons {
			display: flex;
			gap: 12px;
			justify-content: center;
			flex-wrap: wrap;
			margin-bottom: 24px;
		}

		.rating {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			font-size: 16px;
			line-height: 1.6;

			.stars {
				display: inline-block;
				width: 88px;
				height: 16px;
				background-color: var(--color_accent);
				mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none"><path d="M7.60938 0L9.9229 4.81571L15.2178 5.52786L11.3527 9.21629L12.3117 14.4721L7.60938 11.936L2.90709 14.4721L3.86602 9.21629L0.00092268 5.52786L5.29585 4.81571L7.60938 0Z" fill="black"/></svg>') space center / 16px 16px;
			}

			.caption {
				color: var(--color_beige);
			}
		}
	}

	.stats {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;

		.stat {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 2px;

			.big {
				font-family: var(--font-heading);
				font-weight: 700;
				font-size: 48px;
				line-height: 1.2;
				color: var(--color_beige);
			}

			.label {
				font-family: var(--font-body);
				font-weight: 700;
				font-size: 16px;
				line-height: 1.6;
			}
		}
	}

	@media (min-width: 640px) {
		.content .contacts {
			flex-direction: row;
			justify-content: center;
			gap: 44px;
		}

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

	@media (min-width: 1104px) {
		min-height: 703px;
		padding-block: 11px 53px;

		.a_description {
			margin-bottom: 22px;
		}

		.stats {
			grid-template-columns: repeat(4, auto);
			gap: 140px;
			justify-content: center;
		}
	}
}

.o_hero_promo {
	position: relative;
	z-index: 1;
	background-color: #fff;

	&::before {
		content: "";
		position: absolute;
		inset: 0 max(0px, calc(50dvw - 710px));
		background: var(--color_primary);
		z-index: -1;

		@media (min-width: 1104px) {
			border-radius: var(--radius-lg);
			bottom: 48px;
		}
	}

	.m_wp_background {
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.a_wp_image{
		font-size: 0;
		margin: -24px 0;

		img {
			max-width: 240px;
			height: auto;
		}
	}

	.badge-validity {
		width: fit-content;
		margin: 0 0 24px 0;
		padding: 2px 9px;
		background: color-mix(in srgb, var(--color_sleva) 15%, var(--bg_surface));
		border-radius: var(--radius-sm);
		color: var(--color_sleva);
		font-size: 18px;
		line-height: 1.6;

		.date {
			font-weight: 700;
		}
	}

	.a_h1 {
		color: var(--color_text-inverted);
		font-weight: 500;
		font-size: 30px;
		line-height: 1.2;
		margin-bottom: 24px;

		.accent {
			color: var(--color_beige);
		}
	}

	.a_description {
		color: var(--color_text-inverted);
		margin-bottom: 24px;
	}

	@media (min-width: 1104px) {
		align-items: center;

		.a_wp_image{
			margin: -48px 0 0 0;
			text-align: center;

			img {
				max-width: 100%;
			}
		}

		.a_h1 {
			font-size: 48px;
		}

		.a_description {
			margin-bottom: 32px;
			max-width: 559px;
		}
	}

	@media (min-width: 1104px) {
		.text {
			padding: 48px;
		}
	}
}

.o_hero_text {
	position: relative;
	z-index: 1;
	text-align: center;
	background: #fff;

	.m_wp_background {
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.a_h1,
	.a_description {
		max-width: 800px;
		margin-inline: auto;
	}

	.a_description {
		color: var(--color_text);
		margin-top: 12px;
	}

	.m_buttons{
		margin-top: 32px;
		justify-content: center;
	}
}

.o_breadcrumbs + .o_hero_text {
	padding-top: 0;
}
.o_instagram {
	position: relative;
	padding-block: 0;

	.container {
		@media (max-width: 767px) {
			padding-inline: 10px;
		}
	}

	.o_instagram__header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding-block: 38px 30px;

		@media (min-width: 768px) {
			flex-direction: row;
			justify-content: space-between;
		}
	}

	.o_instagram__title {
		font-family: var(--font-heading);
		font-size: 22px;
		font-weight: 500;
		line-height: 1.4;
		margin: 0;

		@media (min-width: 768px) {
			font-size: 24px;
		}

		.o_instagram__hashtag {
			color: var(--color_primary);
		}
	}

	.o_instagram__photos {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-inline: 10px;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		@media (min-width: 1104px) {
			gap: 19px;
			overflow-x: visible;
			padding-inline: 0;
			max-width: 1920px;
			margin-inline: auto;
		}
	}

	.o_instagram__photo {
		flex: 1 0 113px;
	}

	.o_instagram__img {
		width: 100%;
		height: auto;
		aspect-ratio: 297 / 371;
		object-fit: cover;
		border-radius: var(--radius-sm);
		display: block;
	}
}

.o_job_offers {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-inline: max(28px, calc(50dvw - 470px));
	padding-block: 40px;
	background-color: #fff;

	@media (min-width: 1104px) {
		padding-block: 77px 50px;
	}

	.a_h2 {
		font-size: 24px;
		font-weight: 700;
		line-height: 1.4;

		@media (min-width: 768px) {
			text-align: center;
			font-size: 32px;
		}
	}

	.pozice {
		display: grid;
		grid-template-areas:
			"tags"
			"title"
			"desc"
			"button";
		gap: 8px;
		padding: 24px;
		background-color: var(--bg_body);
		border-radius: var(--radius-sm);

		@media (min-width: 1104px) {
			grid-template-columns: 1fr auto;
			grid-template-areas:
				"title tags"
				"desc  button";
			align-items: center;
			column-gap: 40px;
			padding: 29px 36px;
		}

		.stitky {
			grid-area: tags;
			display: flex;
			align-items: center;
			gap: 15px;

			@media (min-width: 1104px) {
				justify-content: flex-end;
			}

			span {
				font-size: 14px;
				line-height: 1.6;
				color: var(--color_text-muted);

				&:first-child {
					padding: 0 5px;
					border-radius: var(--radius-sm);
					background-color: var(--color_beige);
					color: var(--color_text);
				}
			}
		}

		.a_h3 {
			grid-area: title;
			font-size: 24px;
			font-weight: 500;
			line-height: 1.4;
			color: var(--color_primary);
			text-decoration: underline;
		}

		.a_description {
			grid-area: desc;
			font-size: 14px;
			line-height: 1.6;
			color: var(--color_text);
		}

		.m_buttons {
			grid-area: button;

			@media (min-width: 1104px) {
				justify-content: flex-end;
			}
		}
	}
}

.o_latest_blog {
	position: relative;

	.heading {
		text-align: center;
		margin-bottom: 40px;

		.a_h2 {
			font-size: 26px;
			line-height: 1.6;
		}

		.a_description {
			margin-top: 20px;
		}
	}

	.slider-outer {
		position: relative;
		padding-inline: 20px;
	}

	.slider-track {
		overflow: hidden;
	}

	.slider {
		display: flex;
		gap: 20px;
		align-items: flex-start;
		transition: transform .3s ease;
	}

	.slide {
		flex: 0 0 335px;
		display: block;
		color: var(--color_text);
		text-decoration: none;
	}

	.card {

		.card-img {
			height: 188px;
			border-radius: var(--radius-sm);
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
				transition: transform .3s ease;
			}
		}

		.card-body {
			background: var(--bg_surface);
			border-radius: var(--radius-sm);
			padding: 20px 20px 30px;

			.date,
			.cat,
			.read-time {
				font-size: 14px;
				line-height: 1.6;
				margin-right: 16px;
			}

			.date,
			.read-time {
				color: var(--color_text-muted);
			}

			.cat {
				color: var(--color_text);
				background: var(--color_beige);
				border-radius: var(--radius-sm);
				padding-inline: 5px;
			}

			.text {
				min-height: 130px;
				margin-bottom: 32px;
			}

			.card-title {
				display: block;
				margin-top: 16px;
				font-size: 16px;
				line-height: 1.4;
				color: var(--color_primary);
				text-decoration: underline;
				text-decoration-skip-ink: none;
			}

			.card-excerpt {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				margin: 10px 0 0 0;
				font-size: 14px;
				line-height: 1.6;
				color: var(--color_text);
			}

			.avatar {
				img {
					float: left;
					width: 43px;
					height: 43px;
					object-fit: cover;
					border-radius: var(--radius-sm);
					margin-right: 13px;
				}

				.label {
					display: block;
					font-size: 14px;
					line-height: 1.6;
					color: var(--color_text-muted);
				}

				.name {
					display: block;
					font-size: 16px;
					line-height: 1.6;
					color: var(--color_text);
				}
			}
		}
	}

	.slide:hover .card-img img {
		transform: scale(1.1);
	}

	.slide:hover .card-title {
		text-decoration: none;
	}

	.nav-prev { left: 0; }
	.nav-next { right: 0; }

	.bottom-cta {
		margin-top: 40px;

		.m_buttons {
			justify-content: center;
		}
	}

	@media (min-width: 1104px) {

		.heading {
			margin-bottom: 56px;

			.a_h2 {
				font-size: 32px;
				line-height: 1.4;
			}

			.a_description {
				margin-top: 32px;
				max-width: 774px;
				margin-inline: auto;
			}
		}

		.slider-outer {
			padding-inline: max(28px, calc(50dvw - 710px));
		}

		.slider-track {
			overflow: visible;
		}

		.slider {
			gap: 42px;
			flex-wrap: wrap;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
		}

		.slide {
			flex: 0 0 445px;
		}

		.card {
			height: 565px;

			.card-img {
				top: 0;
				height: 250px;
			}

			.card-body {
				padding: 29px 29px 33px;
			}
		}

		.nav {
			display: none;
		}

		.bottom-cta {
			margin-top: 48px;
		}
	}
}

body {
	--adminbar-h: 0px;

	&.admin-bar {
		--adminbar-h: 32px;
		@media (max-width: 782px) {
			--adminbar-h: 46px;
		}
		@media (max-width: 600px) {
			--adminbar-h: 0px;
		}
	}
}

#header {
	position: sticky;
	top: var(--adminbar-h);
	z-index: 100;
	transition: transform .3s;
}

body.header_hidden #header {
	transform: translateY(-100%);
}

.o_navigation {
	background: var(--bg_surface);
	border-bottom: 1px solid var(--color_border);
	padding-block: 0;
	padding-inline: max(28px, calc(50dvw - 930px));
	min-height: 66px;
	display: flex;
	align-items: center;
	gap: 16px;

	.logo {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		text-decoration: none;
		color: var(--color_text);

		.a_wp_image {
			display: flex;
			align-items: center;
		}

		img {
			height: 38px;
			width: auto;
		}

		.logo-fallback {
			font-family: var(--font-heading);
			font-weight: 700;
			font-size: 18px;
			max-width: 200px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	nav {
		display: none;

		a {
			color: var(--color_text);
			text-decoration: none;
			font-size: 14px;
			font-weight: 500;
			transition: color .3s;

			&:hover {
				color: var(--color_primary);
			}
		}

		.nav-item {
			display: flex;
			flex-direction: column;
		}

		.has-submenu {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
		}

		.has-submenu > a {
			flex: 1;
		}

		.submenu-toggle {
			width: 44px;
			height: 44px;
			flex-shrink: 0;
			border: none;
			background: url('data:image/svg+xml,<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.33008 -4.37114e-07L-5.00594e-05 5.35714L8.6602 5.35714L4.33008 -4.37114e-07Z" fill="%231125A9"/></svg>') center no-repeat;
			cursor: pointer;
			transition: transform .3s;
		}

		.submenu {
			display: none;
			flex-direction: column;
			flex-basis: 100%;
			padding-left: 16px;
		}

		.has-submenu.open .submenu {
			display: flex;
		}

		.has-submenu.open .submenu-toggle {
			transform: rotate(180deg);
		}

		.has-mega {
			display: flex;
			flex-direction: column;
		}

		.mega {
			display: none;
		}
	}

	.actions {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-left: auto;
		flex-shrink: 0;
	}

	.phone-block {
		display: flex;
		align-items: center;
		gap: 12px;
		text-decoration: none;
		color: var(--color_text);

		.phone-icon-wrap {
			position: relative;
			display: block;
			width: 24px;
			height: 24px;
			flex-shrink: 0;
		}

		.phone-icon {
			display: block;
			width: 24px;
			height: 24px;
			background-color: var(--color_primary);
			mask: var(--icon-phone) center / 24px 24px no-repeat;
			transition: background-color .3s;
		}

		.phone-badge {
			position: absolute;
			top: -1px;
			right: -1px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: #22c55e;
			border: 2px solid var(--bg_surface);
		}

		.phone-avatar,
		.phone-text {
			display: none;
		}

		&:hover .phone-icon {
			background-color: var(--color_primary-hover);
		}
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		padding: 0 16px;
		background: var(--color_primary);
		color: var(--color_text-inverted);
		border: none;
		border-radius: var(--radius-sm);
		cursor: pointer;
		flex-shrink: 0;
		font-family: var(--font-body);
		font-size: 14px;
		font-weight: 500;
		transition: background-color .3s;

		.menu-toggle__icon {
			display: block;
			width: 16px;
			height: 16px;
			background-color: currentColor;
			mask: var(--icon-menu) center / 16px 16px no-repeat;
		}

		&:hover {
			background: var(--color_primary-hover);
		}

		body.menu_opened & .menu-toggle__icon {
			mask: var(--icon-close) center / 16px 16px no-repeat;
		}
	}

	body.menu_opened & {
		position: fixed;
		inset: 0;
		align-items: flex-start;

		.logo,
		.actions {
			min-height: 66px;
		}

		nav {
			display: flex;
			flex-direction: column;
			position: fixed;
			top: 66px;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--bg_surface);
			overflow-y: auto;
			padding: 16px 28px 32px;
			border-top: 1px solid var(--color_border);
			z-index: 99;

			a {
				padding: 16px 0;
				font-size: 16px;
			}
		}
	}

	@media (min-width: 1104px) {
		min-height: 80px;
		gap: 24px;

		nav {
			display: flex;
			gap: 24px;
			margin-inline: auto;
			align-self: stretch;

			> a {
				display: flex;
				align-items: center;
			}

			.nav-item {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.has-submenu {
				position: relative;
			}

			.has-submenu > a {
				flex: 0 0 auto;
			}

			.submenu-toggle {
				width: 16px;
				height: 16px;
				mask-size: 16px 16px;
				pointer-events: none;
				transform: rotate(180deg);
			}

			.submenu {
				position: absolute;
				top: 90%;
				left: 0;
				display: flex;
				flex-direction: column;
				min-width: 200px;
				padding: 8px 0;
				background: var(--bg_surface);
				border: 1px solid var(--color_border);
				border-radius: var(--radius-md);
				opacity: 0;
				visibility: hidden;
				transition: opacity .3s, visibility .3s;
				z-index: 50;

				a {
					padding: 8px 16px;
					white-space: nowrap;
				}
			}

			.has-submenu:hover .submenu,
			.has-submenu:focus-within .submenu {
				opacity: 1;
				visibility: visible;
			}

			.has-mega {
				display: flex;
				flex-direction: row;
				align-items: center;

				&:hover {
					z-index: 70;
				}

				> a,
				button {
					position: relative;
					z-index: 1;
					align-self: stretch;
					display: flex;
					align-items: center;
					transition: color .3s;

					&::before {
						content: '';
						position: absolute;
						inset: 8px -24px;
						z-index: -1;
						background: var(--bg_surface);
						border-radius: 5px 5px 0 0;
						opacity: 0;
						transition: opacity .3s;
						z-index: -1;
					}

					&:hover {
						color: var(--color_primary);
					}
				}

				> a::after,
				> button::after {
					content: '';
					width: 9px;
					height: 6px;
					flex-shrink: 0;
					margin-left: 8px;
					background: url('data:image/svg+xml,<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.33008 -4.37114e-07L-5.00594e-05 5.35714L8.6602 5.35714L4.33008 -4.37114e-07Z" fill="%231125A9"/></svg>') center no-repeat;
					transform: rotate(180deg);
				}

				button {
					padding: 0;
					border: none;
					background: none;
					cursor: pointer;
					font-family: var(--font-body);
					font-size: 14px;
					font-weight: 500;
					color: var(--color_text);
				}

				&:hover > a::before,
				&:hover button::before,
				&:focus-within > a::before,
				&:focus-within button::before {
					opacity: 1;
				}

				&::before {
					content: '';
					position: fixed;
					inset: 0;
					z-index: -1;
					background: color-mix(in srgb, var(--color_text) 45%, transparent);
					/* backdrop-filter: blur(4px) odebran 2026-07-24: kvuli nemu doznivalo
					   texturovane pozadi stranky pomaleji nez profilovka v hlavicce (plocha bila),
					   takze pri zavirani menu profilovka naskocila driv = blikani. Ztmaveni
					   (45% cerna) zustava a nabiha/odchazi ve stejnem tempu vsude. */
					opacity: 0;
					visibility: hidden;
					pointer-events: none;
					transition: opacity .3s, visibility .3s;
				}

				&:hover::before,
				&:focus-within::before {
					opacity: 1;
					visibility: visible;
				}
			}

			.mega {
				display: block;
				position: absolute;
				left: 0;
				right: 0;
				top: 90%;
				max-width: 1476px;
				margin-inline: auto;
				background: var(--bg_surface);
				border-radius: 5px;
				overflow: hidden;
				opacity: 0;
				visibility: hidden;
				transition: opacity .3s, visibility .3s;
				z-index: 40;

				.container,
				.grid {
					padding-inline: 28px;
				}
			}

			.has-mega:hover .mega,
			.has-mega:focus-within .mega {
				opacity: 1;
				visibility: visible;
			}
		}

		.actions {
			margin-left: 0;
			order: 1;
		}

		.phone-block {
			.phone-icon-wrap {
				display: none;
			}

			.phone-avatar {
				position: relative;
				display: flex;
				align-items: center;
				flex-shrink: 0;

				.phone-avatar-img {
					width: 43px;
					height: auto;
					border-radius: var(--radius-md);
					object-fit: cover;
					background: var(--color_beige);
				}
			}

			.phone-text {
				display: grid;
				grid-template-areas:
					"label label"
					"number hours";
				column-gap: 12px;
				row-gap: 2px;
				align-items: baseline;
			}

			.phone-label {
				grid-area: label;
				font-size: 14px;
				color: var(--color_text);
				line-height: 1.4;
			}

			.phone-number {
				grid-area: number;
				font-size: 18px;
				font-weight: 700;
				color: var(--color_primary);
				text-decoration: underline;
				text-underline-offset: 3px;
			}

			.phone-hours {
				grid-area: hours;
				font-size: 14px;
				color: var(--color_text-muted);
				line-height: 1.4;
				white-space: nowrap;
			}

			&:hover .phone-number {
				color: var(--color_primary-hover);
			}
		}

		.menu-toggle {
			display: none;
		}
	}
}

.o_navigation a:focus-visible,
.o_navigation .has-mega button:focus-visible,
.o_navigation .menu-toggle:focus-visible {
	outline: 2px solid var(--color_primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

body.menu_opened {
	overflow: hidden;
}

/* ============================================================
   MOBILNI SEKUNDARNI MENU - drill-down redesign (2026-07-24)
   Vse jen pod 1104px a jen kdyz je menu otevrene (body.menu_opened).
   Desktop zustava nedotcen.
   ============================================================ */
.o_navigation {
	--nav-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231125a9" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>');
}

@media (max-width: 1103.98px) {
	body.menu_opened .o_navigation nav {
		padding-top: 8px;
	}

	/* --- radky: bezove bordery mezi polozkami --- */
	body.menu_opened .o_navigation #main-nav > a,
	body.menu_opened .o_navigation #main-nav > .nav-item {
		border-bottom: 1px solid var(--color_beige);
	}

	/* top-level popisky */
	body.menu_opened .o_navigation #main-nav > a,
	body.menu_opened .o_navigation #main-nav > .nav-item > a {
		font-size: 16px;
		font-weight: 700;
	}

	/* plain odkaz (+ Kontakt has-submenu) = flex se sipkou vpravo */
	body.menu_opened .o_navigation #main-nav > a,
	body.menu_opened .o_navigation #main-nav > .nav-item.has-submenu > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	/* nav-item (has-mega/has-submenu): radek "a + sipka", obsah se zalomi pod nej */
	body.menu_opened .o_navigation #main-nav .nav-item {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	body.menu_opened .o_navigation #main-nav .nav-item > a {
		flex: 1;
	}

	/* --- sipka: bily zaobleny box + stin + chevron (jako ve sliderech) --- */
	body.menu_opened .o_navigation #main-nav > a::after,
	body.menu_opened .o_navigation #main-nav > .nav-item.has-submenu > a::after {
		content: '';
		width: 31px;
		height: 31px;
		flex-shrink: 0;
		border-radius: var(--radius-sm);
		background: #E6EAFF var(--nav-arrow) center / 16px 16px no-repeat;
	}

	/* sjednotit vysku vsech top-level radku + subnav-head (jako Kontakt ~52px) */
	body.menu_opened .o_navigation #main-nav > a,
	body.menu_opened .o_navigation #main-nav > .nav-item,
	body.menu_opened .o_navigation #main-nav .subnav-head {
		min-height: 52px;
	}
	body.menu_opened .o_navigation #main-nav > a,
	body.menu_opened .o_navigation #main-nav > .nav-item > a {
		padding-block: 8px;
	}
	body.menu_opened .o_navigation #main-nav .submenu-toggle {
		width: 31px;
		height: 31px;
		flex-shrink: 0;
		border: 0;
		padding: 0;
		cursor: pointer;
		border-radius: var(--radius-sm);
		background: #E6EAFF var(--nav-arrow) center / 16px 16px no-repeat;
		transform: none;
	}

	/* mega/submenu zalomeny pod radkem */
	body.menu_opened .o_navigation #main-nav .mega,
	body.menu_opened .o_navigation #main-nav .submenu {
		flex-basis: 100%;
	}

	/* ===================== DRILL-DOWN ===================== */
	/* hlavicka sub-stranky: vlevo zpet, vpravo nazev + chevron na parent page */
	body.menu_opened .o_navigation #main-nav .subnav-head {
		display: none;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding-bottom: 2px;
		margin-bottom: 0;
	}
	body.menu_opened .o_navigation #main-nav.subnav-open .subnav-head {
		display: flex;
	}
	/* v drill-downu stahni horni odsazeni, at jsou karty vys */
	body.menu_opened .o_navigation #main-nav.subnav-open {
		padding-top: 10px;
	}
	/* mega full-bleed pres padding nav -> karty maji stejnou sirku jako na landingu.
	   (flex-basis:auto + width, protoze samotny zaporny margin flex-item nerozsiri) */
	body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item.active > .mega {
		margin-top: 10px;
		flex-basis: auto;
		width: calc(100% + 56px);
		margin-inline: -28px;
	}
	body.menu_opened .o_navigation nav {
		overflow-x: hidden;
	}

	.o_navigation .subnav-back {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		border: 0;
		padding: 0;
		background: none;
		cursor: pointer;
		color: var(--color_primary);
		font-family: inherit;
		font-size: 16px;
		font-weight: 700;
	}
	.o_navigation .subnav-back__icon {
		width: 31px;
		height: 31px;
		flex-shrink: 0;
		border-radius: var(--radius-sm);
		background: #E6EAFF;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.o_navigation .subnav-back__icon svg {
		width: 17px;
		height: 17px;
		display: block;
	}

	/* otevrena sub-stranka: zobraz jen aktivni polozku (jeji obsah) + kontakt */
	body.menu_opened .o_navigation #main-nav.subnav-open > a {
		display: none;
	}
	body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item:not(.active) {
		display: none;
	}
	body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item.active {
		border-bottom: 0;
	}
	body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item.active > a,
	body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item.active > .submenu-toggle {
		display: none;
	}
	body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item.active > .mega {
		display: block;
	}
	body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item.active > .submenu {
		display: flex;
	}

	/* mega na mobilu: bez postranniho odsazeni, at karty vyplni sirku */
	body.menu_opened .o_navigation .mega .container,
	body.menu_opened .o_navigation .mega .grid {
		padding-inline: 0 !important;
	}

	/* karty se vykresluji nativne jako o_services na landing pages (zadne vlastni
	   override vysky/fontu) - viz full-bleed mega vyse pro spravnou sirku */

	/* pryc vrchni padding karet v menu (o_services 33px, o_promotions_menu 48px) */
	body.menu_opened .o_navigation .mega .o_services,
	body.menu_opened .o_navigation .mega .o_promotions_menu {
		padding-top: 0;
	}

	/* ===================== SWIPE ANIMACE ===================== */
	@keyframes navSwipeIn {
		from { transform: translateX(42px); opacity: 0; }
		to   { transform: translateX(0);    opacity: 1; }
	}
	@keyframes navSwipeBack {
		from { transform: translateX(-42px); opacity: 0; }
		to   { transform: translateX(0);     opacity: 1; }
	}
	/* dopredu (klik na chevron): sub-stranka vjede zprava */
	body.menu_opened .o_navigation #main-nav.subnav-open .subnav-head,
	body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item.active > .mega,
	body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item.active > .submenu {
		animation: navSwipeIn .26s ease both;
	}
	/* zpet: hlavni seznam vjede zleva */
	body.menu_opened .o_navigation #main-nav.nav-returning > a,
	body.menu_opened .o_navigation #main-nav.nav-returning > .nav-item,
	body.menu_opened .o_navigation #main-nav.nav-returning > .nav-contact {
		animation: navSwipeBack .26s ease both;
	}
	@media (prefers-reduced-motion: reduce) {
		body.menu_opened .o_navigation #main-nav.subnav-open .subnav-head,
		body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item.active > .mega,
		body.menu_opened .o_navigation #main-nav.subnav-open > .nav-item.active > .submenu,
		body.menu_opened .o_navigation #main-nav.nav-returning > a,
		body.menu_opened .o_navigation #main-nav.nav-returning > .nav-item,
		body.menu_opened .o_navigation #main-nav.nav-returning > .nav-contact {
			animation: none;
		}
	}

	/* ===================== FOOTER KONTAKT ===================== */
	body.menu_opened .o_navigation .nav-contact {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-top: 26px;
		padding-top: 6px;
	}
	.o_navigation .nav-contact__avatar {
		width: 52px;
		height: 52px;
		flex-shrink: 0;
		border-radius: var(--radius-sm);
		object-fit: cover;
		background: var(--color_beige);
	}
	.o_navigation .nav-contact__text {
		display: flex;
		flex-direction: column;
		gap: 1px;
	}
	.o_navigation .nav-contact__label {
		font-size: 14px;
		color: var(--color_text-muted);
	}
	body.menu_opened .o_navigation .nav-contact__phone {
		font-size: 18px;
		font-weight: 700;
		color: var(--color_primary);
		text-decoration: underline;
		text-underline-offset: 3px;
		padding: 2px 0;
	}
	.o_navigation .nav-contact__hours {
		font-size: 14px;
		color: var(--color_text-muted);
	}
}

/* DESKTOP: skryj mobilni-only prvky, ktere jsou uvnitr nav (na desktopu je nav viditelny)
   - has-mega submenu-toggle button (desktop pouziva hover mega + ::after caret)
   - subnav-head (JS injektovana drill-down hlavicka: zpet + parent odkaz)
   - nav-contact (footer kontakt; desktop ma vlastni .phone-block v .actions) */
@media (min-width: 1104px) {
	.o_navigation nav .has-mega > .submenu-toggle,
	.o_navigation nav .subnav-head,
	.o_navigation nav .nav-contact {
		display: none;
	}
}

/* ============================================================
   Externi-link ikona za odkazem (napr. E-shop) - desktop i mobil
   ============================================================ */
.o_navigation .nav-link-label {
	display: inline-flex;
	align-items: center;
}
.o_navigation .nav-ext-icon {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 5px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.41667 0H4.75L4.41667 0.333333L5.45533 1.372L2.78867 4.03867L3.378 4.628L6.04467 1.96133L7.08333 3L7.41667 2.66667V0ZM0 0.916667H3.25V1.75H0.833333V6.58333H5.66667V4.16667H6.5V7.41667H0V0.916667Z" fill="%23000"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.41667 0H4.75L4.41667 0.333333L5.45533 1.372L2.78867 4.03867L3.378 4.628L6.04467 1.96133L7.08333 3L7.41667 2.66667V0ZM0 0.916667H3.25V1.75H0.833333V6.58333H5.66667V4.16667H6.5V7.41667H0V0.916667Z" fill="%23000"/></svg>') center / contain no-repeat;
}

.o_page_links {
	display: none;
	padding-block: 42px;
	border-bottom: 1px solid var(--color_border);
	background: var(--bg_surface);

	@media (min-width: 1104px) {
		display: block;
	}

	.links {
		display: flex;
		justify-content: center;
		gap: 50px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.page-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 16px;
		line-height: 1.6;
		color: var(--color_text-muted);
		text-decoration: none;
		transition: color .3s;

		&::after {
			content: '';
			width: 14px;
			height: 14px;
			background-color: currentColor;
			mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='m19 12-7 7-7-7'/></svg>") no-repeat center / contain;
		}

		&:hover,
		&:focus-visible {
			color: var(--color_primary);
		}

		&.is-active {
			color: var(--color_primary);
			text-decoration: underline;
			text-underline-offset: 4px;
		}
	}
}

.o_person_text {
	position: relative;
	overflow: hidden;
	z-index: 0;

	.m_wp_background .layer-decorative {
		.layer-decorative__mobile .a_wp_image img {
			position: absolute;
			top: 363px;
			left: -114px;
			width: 488px;
			height: auto;
		}
	}

	.text {
		position: relative;
		z-index: 2;
		padding-block: 48px;

		.a_description {
			margin-top: 20px;
		}

		.m_buttons {
			justify-content: flex-start;
			margin-top: 20px;
		}
	}

	.photo {
		position: relative;
		z-index: 1;
		overflow: hidden;

		img {
			width: 100%;
			height: auto;
		}
	}

	.signature {
		position: absolute;
		bottom: 71px;
		left: 8px;
		pointer-events: none;
		transform: rotate(-9.57deg);

		img {
			width: 228px;
			height: auto;
		}
	}

	@media (min-width: 1104px) {

		.m_wp_background .layer-decorative {
			.layer-decorative__desktop .a_wp_image img {
				position: absolute;
				top: 1px;
				left: -203px;
				width: 1563px;
				height: auto;
			}
		}

		.text {
			align-self: center;
			padding-block: 188px;

			.a_description {
				margin-top: 32px;
			}

			.m_buttons {
				margin-top: 32px;
			}
		}

		.photo {
			order: -1;
			align-self: stretch;
			margin-bottom: -48px;
			margin-top: 48px;

			img {
				height: 100%;
				object-fit: cover;
				object-position: center top;
			}
		}

		.signature {
			bottom: 146px;
			left: auto;
			right: max(14px, calc(50dvw - 698px));
		}
	}
}

.o_price_list {
	position: relative;
	z-index: 0;
	padding-block: 50px;
	background-color: var(--bg_surface);

	@media (min-width: 1104px) {
		padding-block: 80px;
	}

	.head {
		text-align: center;
		margin-block-end: 32px;

		@media (min-width: 1104px) {
			margin-block-end: 48px;
		}
	}

	.a_h2 {
		margin: 0 0 16px;
		font-size: 32px;
		font-weight: 500;
		line-height: 1.2;

		@media (min-width: 1104px) {
			font-size: 48px;
		}
	}

	.a_description {
		max-width: 800px;
		margin: 0 auto;
		color: var(--color_text);
		font-size: 16px;
		line-height: 1.6;

		@media (min-width: 1104px) {
			font-size: 18px;
		}
	}

	> .m_buttons {
		justify-content: center;
		gap: 8px;
		margin-block-end: 24px;

		@media (min-width: 768px) {
			margin-block-end: 40px;
		}
	}

	.rows {
		display: flex;
		flex-direction: column;
		gap: 20px;

		@media (min-width: 1104px) {
			gap: 4px;
		}
	}

	.rows .row {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 20px 24px;
		background-color: var(--bg_body);
	}

	@media (min-width: 1104px) {
		.rows .row {
			flex-direction: row;
			align-items: center;
			gap: 32px;
			padding: 25px 34px;
		}
	}

	.row .info {
		flex: 1;
		min-width: 0;
	}

	.row .akce-tag {
		display: inline-block;
		padding: 4px 10px;
		margin-inline-end: 8px;
		background-color: var(--color_sleva);
		color: var(--color_text-inverted);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.2;
		border-radius: 5px;
	}

	.row .service-name {
		display: block;
		margin: 0 0 6px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.4;
	}

	.row .description {
		margin: 0;
		color: var(--color_text-muted);
		font-size: 14px;
		line-height: 1.6;
	}

	.row .meta {
		display: flex;
		flex-direction: column;
		gap: 6px;

		@media (min-width: 1104px) {
			flex-direction: row;
			align-items: center;
			gap: 32px;
		}
	}

	.row .duration {
		color: var(--color_text-muted);
		font-size: 14px;
		line-height: 1.6;
	}

	.row .price {
		display: flex;
		align-items: center;
		gap: 8px;
		white-space: nowrap;
	}

	.row .price-old {
		color: var(--color_text-muted);
		font-size: 14px;
		text-decoration: line-through;
	}

	.row .discount-badge {
		padding: 2px 6px;
		background-color: var(--color_sleva);
		color: var(--color_text-inverted);
		font-size: 12px;
		font-weight: 500;
		line-height: 1.4;
		border-radius: 3px;
	}

	.row .price-new {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
	}

	.row .price-single {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		color: var(--color_text);
	}

	.row .m_buttons {
		margin-block-start: 4px;

		@media (min-width: 1104px) {
			margin-block-start: 0;
			flex-shrink: 0;
		}
	}
}

.o_price_list2 {
	position: relative;
	z-index: 0;
	padding-block: 50px;
	background-color: var(--bg_surface);

	@media (min-width: 1104px) {
		padding-block: 80px;
	}

	.head {
		text-align: center;
		margin-block-end: 32px;

		@media (min-width: 1104px) {
			margin-block-end: 48px;
		}
	}

	.a_h2 {
		margin: 0 0 16px;
		font-size: 32px;
		font-weight: 500;
		line-height: 1.2;

		@media (min-width: 1104px) {
			font-size: 48px;
		}
	}

	.a_description {
		max-width: 800px;
		margin: 0 auto;
		color: var(--color_text);
		font-size: 16px;
		line-height: 1.6;

		@media (min-width: 1104px) {
			font-size: 18px;
		}
	}

	.tab-input {
		display: none;
	}

	.tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		margin-block-end: 24px;

		@media (min-width: 768px) {
			margin-block-end: 40px;
		}
	}

	.tab-label {
		padding: 10px 20px;
		background-color: var(--bg_surface);
		border: 1px solid var(--color_border);
		border-radius: var(--radius-sm);
		color: var(--color_text);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.6;
		cursor: pointer;
		transition: all .3s ease;
	}

	.tab-label:hover {
		border-color: var(--color_beige);
	}

	.rows {
		display: none;
		flex-direction: column;
		gap: 20px;

		@media (min-width: 1104px) {
			gap: 4px;
		}
	}

	.row {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 20px 24px;
		background-color: var(--bg_body);
	}

	@media (min-width: 1104px) {
		.row {
			flex-direction: row;
			align-items: center;
			gap: 32px;
			padding: 25px 34px;
		}
	}

	.info {
		flex: 1;
		min-width: 0;
	}

	.akce-tag {
		display: inline-block;
		padding: 4px 10px;
		margin-inline-end: 8px;
		background-color: var(--color_sleva);
		color: var(--color_text-inverted);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.2;
		border-radius: 5px;
	}

	.service-name {
		display: block;
		margin: 0 0 6px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.4;
	}

	.description {
		margin: 0;
		color: var(--color_text-muted);
		font-size: 14px;
		line-height: 1.6;
	}

	.meta {
		display: flex;
		flex-direction: column;
		gap: 6px;

		@media (min-width: 1104px) {
			flex-direction: row;
			align-items: center;
			gap: 32px;
		}
	}

	.duration {
		color: var(--color_text-muted);
		font-size: 14px;
		line-height: 1.6;
	}

	.price {
		display: flex;
		align-items: center;
		gap: 8px;
		white-space: nowrap;
	}

	.price-old {
		color: var(--color_text-muted);
		font-size: 14px;
		text-decoration: line-through;
	}

	.discount-badge {
		padding: 2px 6px;
		background-color: var(--color_sleva);
		color: var(--color_text-inverted);
		font-size: 12px;
		font-weight: 500;
		line-height: 1.4;
		border-radius: 3px;
	}

	.price-new {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
	}

	.price-single {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		color: var(--color_text);
		min-width: 140px;

		.price-top-stylist {
			display: block;
			font-size: 14px;
			font-weight: 500;
			padding-top: 8px;
			color: var(--color_text-muted);
		}
	}

	.row .m_buttons {
		margin-block-start: 4px;

		@media (min-width: 1104px) {
			margin-block-start: 0;
			flex-shrink: 0;
		}
	}
}

.o_professionals {
	position: relative;
	background: #fff;

	.heading {
		text-align: center;
		margin-bottom: 40px;

		.a_h2 {
			font-size: 26px;
			line-height: 1.6;
		}

		.a_description {
			margin-top: 20px;
			text-align: center;
		}
	}

	.slider-outer {
		position: relative;
		padding-inline: 20px;
	}

	.slider-track {
		overflow: hidden;
	}

	.slider {
		display: flex;
		gap: 20px;
		transition: transform .3s ease;
		align-items: flex-start;
	}

	.slide {
		flex: 0 0 335px;
	}

	.card {
		position: relative;

		.card-photo {
			display: block;
			border-radius: 5px;
			overflow: hidden;
			height: 347px;

			img {
				width: 100%;
				height: 347px;
				object-fit: cover;
				transition: transform .3s ease;
			}

			&:hover img {
				transform: scale(1.1);
			}
		}

		.card-body {
			background: var(--bg_body);
			border-radius: 5px;
			margin-top: -28px;
			padding: 48px 17px 36px;

			.card-link {
				display: block;
				color: inherit;
				text-decoration: none;
			}

			.a_h3 {
				font-family: var(--font-heading);
				font-size: 22px;
				font-weight: 700;
				line-height: 1.6;
				color: var(--color_primary);
			}

			.role {
				font-size: 18px;
				line-height: 1.6;
				margin-top: 4px;
			}

			.bio {
				font-size: 14px;
				line-height: 1.6;
				margin-top: 18px;
				min-height: 150px;
				text-wrap: balance;
			}

			.m_buttons {
				flex-direction: column;
				align-items: flex-start;
				gap: 18px;
				margin-top: 18px;
			}
		}
	}

	.nav-prev { left: 0; }
	.nav-next { right: 0; }

	/* Sipky zobrazit jen kdyz se karty nevejdou (JS pridava .has-overflow).
	   Kdyz se vejdou, sipky skryt a karty vycentrovat. */
	.nav-prev,
	.nav-next { display: none; }

	&.has-overflow {
		.nav-prev,
		.nav-next { display: flex; }
	}

	&:not(.has-overflow) {
		.slider {
			justify-content: center;
			transform: none !important;
		}

		.dots { display: none; }
	}

	.dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 24px;

		.dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 2px solid var(--color_primary);
			background: transparent;
			cursor: pointer;
			padding: 0;

			&.active {
				background: var(--color_primary);
			}
		}
	}

	.bottom-cta {
		margin-top: 40px;

		.m_buttons {
			justify-content: center;
		}
	}

	@media (min-width: 1104px) {

		.heading {
			margin-bottom: 56px;

			.a_h2 {
				font-size: 32px;
				line-height: 1.4;
			}

			.a_description {
				margin-top: 32px;
				max-width: 914px;
				margin-inline: auto;
			}
		}

		.slider-outer {
			padding-inline: max(28px, calc(50dvw - 710px));
		}

		.slide {
			flex: 0 0 460px;
		}

		.card {
			.card-photo {
				height: 476px;

				img {
					height: 476px;
				}
			}

			.card-body {
				margin-top: -157px;
				padding: 186px 36px 36px;
				min-height: 423px;

				.a_h3 {
					font-size: 24px;
					line-height: 1.4;
				}

				.m_buttons {
					flex-direction: row;
					align-items: center;

					.a_button {
						width: auto;
					}
				}
			}
		}

		.nav {
			&.nav-prev {
				left: max(0px, calc(50dvw - 726px));
			}

			&.nav-next {
				right: max(0px, calc(50dvw - 726px));
			}
		}

		.dots {
			display: none;
		}

		.bottom-cta {
			margin-top: 48px;
		}
	}

	&.view-grid {
		@media (min-width: 1104px) {
			.slider-track { overflow: visible; }
			.slider {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				transform: none !important;
			}
			.slide { flex: none; }
			.nav   { display: none; }
		}
	}
}

.o_promotions {
	position: relative;
	background-color: #fff;

	.heading {
		padding-inline: 16px;
		text-align: center;
		margin-bottom: 40px;

		.a_description {
			margin-top: 12px;
			max-width: 791px;
			margin-inline: auto;
		}
	}

	.cards {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.card {
		background: var(--bg_body);
		border-radius: var(--radius-md);
		padding: 0 16px 32px;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.card-media {
		border-radius: var(--radius-sm);
		overflow: hidden;
	}

	.card-media img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1200 / 628;
		object-fit: cover;
	}

	.card-body {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.badge {
		align-self: flex-start;
		background: #ffd9e0;
		color: var(--color_sleva);
		font-size: 18px;
		line-height: 1.6;
		padding: 2px 9px;
		border-radius: var(--radius-sm);
	}

	.badge strong {
		font-weight: 700;
	}

	.card-title {
		margin: 0;
		font-size: 26px;
		line-height: 1.6;
		font-weight: 700;
		color: var(--color_primary);
		text-wrap: balance;
	}

	.card-description {
		margin: 0;
		font-size: 18px;
		line-height: 1.6;
		color: var(--color_text);
	}

	.m_buttons {
		margin-top: 12px;
	}

	@media (min-width: 1104px) {

		.heading {
			padding-inline: 0;
			margin-bottom: 56px;

			.a_description {
				margin-top: 16px;
			}
		}

		.card {
			padding: 0;
			flex-direction: row;
			gap: 120px;
			align-items: center;
			min-height: 493px;
			padding-left: 68px;
			padding-right: 27px;
		}

		.card-media {
			flex: 0 0 579px;
		}

		.card-body {
			flex: 1 1 auto;
			gap: 24px;
		}

		.card-title {
			font-size: 32px;
			line-height: 1.4;
		}

		.m_buttons {
			margin-top: 0;
		}
	}
}


/* mobil: CTA tlacitka na pul sirky vedle sebe (large padding zmensen, at se text vejde) */
@media (max-width: 1103.98px) {
	.o_promotions .m_buttons {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 10px;
	}
	.o_promotions .m_buttons .a_button {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding-inline: 14px;
		justify-content: center;
	}
}

.o_promotions_baner_slider {
	position: relative;
	background-color: #fff;
	color: var(--color_text-inverted);

	.container {
		position: relative;
	}

	.slider {
		position: relative;
	}

	.slide {
		position: relative;
		background-color: var(--color_primary);
		border-radius: var(--radius-sm);
		padding: 32px 24px;
		display: flex;
		flex-direction: column;
		gap: 16px;
		overflow: visible;

		&:not(.active) {
			display: none;
		}

		@media (min-width: 1104px) {
			min-height: 302px;
			padding: 40px 50px 40px 380px;
			align-items: flex-start;
			justify-content: center;
		}
	}

	.a_wp_image {
		position: relative;
		width: 60%;
		max-width: 220px;
		margin: 0 auto;
		aspect-ratio: 1;
		z-index: 2;

		@media (min-width: 1104px) {
			position: absolute;
			top: 0;
			left: 80px;
			width: 302px;
			max-width: none;
			margin: 0;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	.body {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
		z-index: 2;
	}

	.badge {
		background-color: #ffd9e0;
		color: var(--color_sleva);
		font-size: 18px;
		line-height: 1.6;
		padding: 2px 9px;
		border-radius: var(--radius-sm);
	}

	.badge strong {
		font-weight: 700;
	}

	.title {
		margin: 0;
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 26px;
		line-height: 1.6;
		color: var(--color_text-inverted);

		@media (min-width: 1104px) {
			font-size: 32px;
			line-height: 1.4;
		}
	}

	.m_buttons {
		margin: 0;
	}

	.dots {
		position: relative;
		z-index: 2;
		padding: 18px 0 0;
		line-height: 1;
		text-align: center;

		.dot {
			display: inline-block;
			width: 8px;
			height: 8px;
			margin: 0 3px;
			padding: 0;
			border: 0;
			border-radius: 50%;
			background-color: #00000033;
			cursor: pointer;
			transition: all .3s ease;
			vertical-align: middle;

			&:hover {
				background-color: #00000066;
			}

			&.active {
				background-color: var(--color_primary);
			}
		}
	}

	.nav-prev {
		left: 0;
		transform: translate(-50%, -50%);
	}

	.nav-next {
		right: 0;
		transform: translate(50%, -50%);
	}
}

.o_promotions_menu {
	position: relative;
	background-color: #fff;

	.card {
		background: var(--bg_body);
		border-radius: var(--radius-md);
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.card-media {
		display: block;
		border-radius: var(--radius-sm);
		overflow: hidden;
	}

	.card-media img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1200 / 628;
		object-fit: cover;
	}

	.card-body {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		flex: 1 1 auto;
		color: inherit;
		text-decoration: none;
	}

	.badge {
		align-self: center;
		background: #ffd9e0;
		color: var(--color_sleva);
		font-size: 14px;
		line-height: 1.6;
		padding: 2px 9px;
		border-radius: var(--radius-sm);
	}

	.badge strong {
		font-weight: 700;
	}

	.card-title {
		margin: 0;
		font-size: 20px;
		line-height: 1.4;
		font-weight: 700;
		color: var(--color_primary);
		text-wrap: balance;
	}

	.m_buttons {
		margin-top: auto;
		zoom: 0.8;
	}

	.footer-cta {
		display: flex;
		justify-content: center;
		margin-top: 32px;
	}

	/* Hover: navigace ma "nav a:hover { color: primary }", coz prebiji barvu
	   textu tlacitek (modry primary button pak ma modry text = necitelny).
	   Vratime kazdemu tlacitku jeho barvu textu i pri hoveru. */
	.a_button.primary:hover { color: var(--color_text-inverted); }
	.a_button.cta:hover { color: var(--color_text); }
	.a_button.outline:hover { color: var(--color_primary); }
}


/* mobil: CTA tlacitka na pul sirky vedle sebe + pryc zoom (large padding zmensen) */
@media (max-width: 1103.98px) {
	.o_promotions_menu .m_buttons {
		zoom: 1;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 10px;
	}
	.o_promotions_menu .m_buttons .a_button {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding-inline: 14px;
		justify-content: center;
	}
}

.o_promotions_past {
	position: relative;

	.heading {
		padding-inline: 16px;
		text-align: center;
		margin-bottom: 32px;

		.a_description {
			margin-top: 12px;
			max-width: 791px;
			margin-inline: auto;
		}
	}

	.cards {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
		padding-inline: 16px;
	}

	.card {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.card-media {
		height: 220px;
		border-radius: var(--radius-sm);
		filter: grayscale(1);
		opacity: .75;
		background:
			var(--photo, none) right top / auto 100% no-repeat,
			url("/wp-content/themes/arsov/components/organisms/o_promotions/src/pattern-arsova-letters__2705-58110.svg") center / cover no-repeat,
			var(--color_primary);
	}

	.badge {
		align-self: flex-start;
		background: var(--color_border);
		color: var(--color_text);
		font-size: 14px;
		line-height: 1.6;
		padding: 2px 9px;
		border-radius: var(--radius-sm);
	}

	.badge strong {
		font-weight: 700;
	}

	.card-title {
		margin: 0;
		font-size: 20px;
		line-height: 1.4;
		font-weight: 700;
		color: var(--color_text);
		text-wrap: balance;
	}

	.m_buttons {
		margin-top: 32px;
		justify-content: center;
	}

	@media (max-width: 1103px) {
		.cards > .card:nth-child(n+3) {
			display: none;
		}
	}

	@media (min-width: 1104px) {

		.heading {
			padding-inline: 0;
			margin-bottom: 56px;

			.a_description {
				margin-top: 16px;
			}
		}

		.cards {
			grid-template-columns: 1fr 1fr;
			gap: 20px 44px;
			padding-inline: 0;
		}

		.card {
			flex-direction: row;
			gap: 24px;
			align-items: center;
			min-height: 218px;
		}

		.card-media {
			flex: 0 0 282px;
			height: 218px;
		}

		.card-body {
			flex: 1 1 auto;
			gap: 12px;
		}

		.card-title {
			font-size: 22px;
		}

		.m_buttons {
			margin-top: 48px;
		}
	}
}

.o_promotions_slider {
	position: relative;
	background-color: #fff;

	.a_h2 {
		text-align: center;
		margin: 0 16px 24px;
	}

	.slider-wrap {
		position: relative;
	}

	.slider-viewport {
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-inline: 16px;
	}

	.slider-viewport::-webkit-scrollbar {
		display: none;
	}

	.slider-track {
		display: flex;
		gap: 16px;
		align-items: stretch;
	}

	.slider-card {
		flex: 0 0 calc(100% - 32px);
		scroll-snap-align: center;
		background: var(--bg_body);
		border-radius: var(--radius-sm);
		padding: 13px 13px 24px;
		display: flex;
		flex-direction: column;
		gap: 17px;
		align-items: center;
	}

	.card-image {
		align-self: stretch;
		border-radius: var(--radius-sm);
		overflow: hidden;
		background:
			url("/wp-content/themes/arsov/components/organisms/o_promotions_slider/src/pattern-arsova-letters__3096-69068.svg") center / 180% no-repeat,
			var(--color_primary);
	}

	.card-image img {
		width: 100%;
		height: auto;
		aspect-ratio: 339 / 182;
		object-fit: cover;
		display: block;
	}

	.card-body {
		width: 100%;
		max-width: 302px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: center;
	}

	.badge {
		background: #ffd9e0;
		color: var(--color_sleva);
		font-size: 14px;
		line-height: 1.6;
		padding: 2px 9px;
		border-radius: var(--radius-sm);
	}

	.badge strong {
		font-weight: 700;
	}

	.slider-card-title {
		margin: 0;
		font-size: 20px;
		line-height: 1.4;
		font-weight: 700;
		color: var(--color_primary);
		text-align: center;
		text-wrap: balance;
	}

	.nav-prev,
	.nav-next {
		display: none;
	}

	&.has-overflow .nav-prev {
		display: flex;
		left: 4px;
	}

	&.has-overflow .nav-next {
		display: flex;
		right: 4px;
	}

	@media (min-width: 1104px) {

		.a_h2 {
			margin: 0 0 40px;
		}

		.slider-viewport {
			padding-inline: 0;
		}

		.slider-track {
			gap: 21px;
		}

		.slider-card {
			flex: 0 0 339px;
			min-height: 300px;
		}

		&.has-overflow .nav-prev {
			left: -24px;
		}

		&.has-overflow .nav-next {
			right: -24px;
		}
	}
}

.o_references {
	position: relative;
	overflow: hidden;
	z-index: 0;
	background-color: var(--bg_surface);
	padding-block: 28px 153px;

	.a_h2 {
		margin: 0 0 14px;
		text-align: center;

		@media (min-width: 1104px) {
			margin: 0 0 39px;
		}
	}

	.card {
		position: relative;
		background-color: var(--bg_body);

		@media (min-width: 1104px) {
			max-width: 1420px;
			margin-inline: auto;
			border-radius: var(--radius-sm);
		}
	}

	.slider {
		display: grid;
		position: relative;
	}

	.slide {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 20px 21px 30px;
		opacity: 0;
		pointer-events: none;
		transition: opacity .4s ease;

		@media (min-width: 1104px) {
			flex-direction: row-reverse;
			align-items: center;
			gap: 128px;
			padding: 102px 103px 90px 120px;
		}

		&.active {
			opacity: 1;
			pointer-events: auto;
		}
	}

	.ba-slider,
	.ba-single {
		position: relative;
		flex: 0 0 auto;
		width: 100%;
		max-width: 334px;
		margin-inline: auto;
		border-radius: var(--radius-sm);
		overflow: hidden;

		@media (min-width: 1104px) {
			width: 474px;
			max-width: none;
			margin-inline: 0;
		}
	}

	.ba-slider {
		touch-action: none;
		user-select: none;
		cursor: ew-resize;
	}

	.ba-photo {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 334 / 401;
		object-fit: cover;

		@media (min-width: 1104px) {
			aspect-ratio: 474 / 571;
		}
	}

	.ba-before {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		clip-path: inset(0 calc(100% - var(--split)) 0 0);
	}

	.ba-divider {
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--split);
		width: 2px;
		background-color: var(--bg_surface);
		transform: translateX(-50%);
		z-index: 2;
		pointer-events: none;

		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 36px;
			height: 36px;
			background-color: var(--bg_surface);
			border-radius: var(--radius-sm);
			transform: translate(-50%, -50%);
			box-shadow: 0 2px 8px rgb(0 0 0 / .15);
		}

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 20px;
			background-color: var(--color_text);
			mask: var(--icon-handle) center / contain no-repeat;
			-webkit-mask: var(--icon-handle) center / contain no-repeat;
			transform: translate(-50%, -50%);
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		@media (min-width: 1104px) {
			flex: 1;
			min-width: 0;
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-areas:
				"quote quote"
				"name  tags"
				"stars stars";
			column-gap: 171px;
			align-items: center;
			justify-items: start;
			text-align: left;
		}
	}

	.quote {
		margin: 0;
		padding: 0;
		border: 0;
		color: var(--color_text);
		font-family: var(--font-body);
		font-style: italic;
		font-weight: 400;
		font-size: 20px;
		line-height: 1.6;

		@media (min-width: 1104px) {
			grid-area: quote;
			margin: 0 0 26px;
			font-size: 24px;
		}
	}

	.name {
		margin: 12px 0 0;
		color: var(--color_text);
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 18px;
		line-height: 1.6;

		@media (min-width: 1104px) {
			grid-area: name;
			margin: 0;
		}
	}

	.stars {
		display: flex;
		gap: 9px;
		margin: 5px 0 0;

		@media (min-width: 1104px) {
			grid-area: stars;
			margin: 4px 0 0;
		}
	}

	.star {
		width: 18px;
		height: 18px;
		background-color: var(--color_accent);
		mask: var(--icon-star) center / contain no-repeat;
		-webkit-mask: var(--icon-star) center / contain no-repeat;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		margin: 13px 0 0;
		padding: 0;
		list-style: none;

		@media (min-width: 1104px) {
			grid-area: tags;
			margin: 0;
			justify-content: flex-start;
		}
	}

	.tag {
		padding: 4px 11px;
		border: 1px solid var(--color_primary);
		border-radius: 30px;
		color: var(--color_primary);
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 14px;
		line-height: 1.6;
	}

	.nav-prev,
	.nav-next {
		top: 38%;

		@media (min-width: 1104px) {
			top: 50%;
		}
	}

	.nav-prev {
		left: 19px;

		@media (min-width: 1104px) {
			left: 0;
			transform: translate(-50%, -50%);
		}
	}

	.nav-next {
		right: 18px;

		@media (min-width: 1104px) {
			right: 0;
			transform: translate(50%, -50%);
		}
	}

	.dots {
		display: flex;
		justify-content: center;
		gap: 9px;
		padding-block: 20px 24px;

		@media (min-width: 1104px) {
			padding-block: 0 28px;
		}

		.dot {
			width: 8px;
			height: 8px;
			padding: 0;
			border: 0;
			border-radius: 50%;
			background-color: var(--color_text);
			opacity: .25;
			cursor: pointer;
			transition: opacity .3s ease;

			&:hover {
				opacity: .5;
			}

			&.active {
				opacity: 1;
				background-color: var(--color_primary);
			}
		}
	}

	.m_buttons {
		justify-content: center;
		margin: 28px 0 0;

		@media (min-width: 1104px) {
			margin: 40px 0 0;
		}
	}
}

.o_section_tester {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;

	label {
		position: relative;
		z-index: 9999;
		cursor: pointer;

		input {
			display: none;
		}

		&:has(:checked) {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;

			img {
				filter: invert(1);
				opacity: 0.5;
			}
		}

		img {
			display: block;
			margin: 0 auto;
		}

		.desktop { display: none; }
		.mobile  { display: block; }

		@media (min-width: 768px) {
			.desktop { display: block; }
			.mobile  { display: none; }
		}
	}
}

.o_services {
	position: relative;
	overflow: hidden;
	z-index: 0;
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h38'/%3E%3Cpath d='m33 1 6 6-6 6'/%3E%3C/svg%3E");

	background-color: var(--bg_surface);
	padding-block: 33px 50px;

	@media (min-width: 1104px) {
		padding-block: 33px 19px;
	}

	.a_h2 {
		margin: 0 0 24px;
		padding-inline: max(0px, calc(50dvw - 710px));
		font-size: 24px;
		line-height: 1.4;
		text-align: center;

		@media (min-width: 1104px) {
			margin: 0 0 38px;
			font-size: 32px;
		}
	}

	.primary {
		row-gap: 8px;
		margin-block-end: 8px;

		@media (min-width: 1104px) {
			row-gap: 24px;
			margin-block-end: 22px;
		}

		.card {
			position: relative;
			isolation: isolate;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			min-height: 302px; /* dle Figmy (bylo 270) */
			padding: 24px;
			overflow: hidden;
			color: var(--color_text-inverted);
			text-decoration: none;

			@media (min-width: 1104px) {
				height: 544px;
				padding: 0 80px 46px 54px;
				border-radius: 5px;
			}

			.a_wp_image {
				position: absolute;
				inset: 0;
				z-index: -2;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: transform .3s ease;
				}
			}

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				z-index: -1;
				background: linear-gradient(to bottom, #00000000 17%, #000000cc 100%);
				pointer-events: none;
			}

			&::after {
				content: '';
				position: absolute;
				right: 24px;
				bottom: 24px;
				width: 41px;
				height: 14px;
				background-color: var(--color_text-inverted);
				mask: var(--arrow) center / contain no-repeat;
				transition: transform .3s ease;

				@media (min-width: 1104px) {
					right: 53px;
					bottom: 43px;
				}
			}
		}

		@media (min-width: 1104px) {
			a.card:hover {
				.a_wp_image img {
					transform: scale(1.1);
				}

				&::after {
					transform: translateX(16px);
				}

				.a_h3 {
					text-decoration: none;
				}
			}
		}

		.a_h3 {
			margin: 0 0 4px;
			color: var(--color_beige);
			font-size: 24px;
			line-height: 1.4;
			text-decoration: underline;

			@media (min-width: 1104px) {
				max-width: 296px;
			}
		}

		.a_description {
			margin: 0;
			color: var(--color_text-inverted);
			font-size: 14px;
			max-width: 214px; /* mobil: zalomit text, at nenaraz do sipky (Figma) */

			@media (min-width: 1104px) {
				max-width: 226px;
			}
		}
	}

	.secondary {
		row-gap: 8px;

		@media (min-width: 1104px) {
			row-gap: 24px;
		}

		.card {
			position: relative;
			isolation: isolate;
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 130px;
			padding: 16px 150px 16px 24px;
			overflow: hidden;
			color: var(--color_text);
			text-decoration: none;
			background-color: var(--bg_body);

			@media (min-width: 1104px) {
				min-height: 191px;
				padding: 32px 100px 32px 54px;
				border-radius: 5px;
			}

			.a_wp_image {
				position: absolute;
				right: 50px;
				bottom: 0;
				height: 50%;
				z-index: -1;

				@media (min-width: 1104px) {
					right: 100px;
					height: 90%;
				}

				img {
					width: auto;
					height: 100%;
					object-fit: contain;
					transition: transform .3s ease;
				}
			}

			&::after {
				content: '';
				position: absolute;
				right: 24px;
				bottom: 24px;
				width: 41px;
				height: 14px;
				background-color: var(--color_primary);
				mask: var(--arrow) center / contain no-repeat;
				transition: transform .3s ease;

				@media (min-width: 1104px) {
					right: 50px;
					bottom: 40px;
				}
			}
		}

		@media (min-width: 1104px) {
			a.card:hover {
				.a_wp_image img {
					transform: scale(1.1);
				}

				&::after {
					transform: translateX(16px);
				}

				.a_h3 {
					text-decoration: none;
				}
			}
		}

		.a_h3 {
			margin: 0 0 4px;
			color: var(--color_primary);
			line-height: 1.4;
			text-decoration: underline;

			@media (min-width: 1104px) {
				max-width: 226px;
			}
		}

		.a_description {
			margin: 0;
			color: var(--color_text);
			font-size: 14px;

			@media (min-width: 1104px) {
				max-width: 226px;
			}
		}
	}
}

.o_services_2 {
	position: relative;
	overflow: hidden;
	z-index: 0;
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 14' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h38'/%3E%3Cpath d='m33 1 6 6-6 6'/%3E%3C/svg%3E");

	background-color: var(--bg_surface);
	padding-block: 33px 50px;

	.a_h2 {
		font-size: 24px;
		line-height: 1.4;
		text-align: center;

		@media (min-width: 1104px) {
			font-size: 32px;
		}
	}

	row-gap: 16px;

	@media (min-width: 1104px) {
		row-gap: 24px;
	}

	.card {
		display: flex;
		flex-direction: column;
		border-radius: 5px;
		overflow: hidden;
		color: var(--color_text-inverted);
		text-decoration: none;
	}

	.card-cover {
		position: relative;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 461px;
		padding: 24px;
		overflow: hidden;

		@media (min-width: 1104px) {
			min-height: 647px;
			padding: 0 22px 46px 27px;
		}

		.a_wp_image {
			position: absolute;
			inset: 0;
			z-index: -2;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform .3s ease;
			}
		}

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #00000000 29%, #000000cc 80%);
			pointer-events: none;
		}

		&::after {
			content: '';
			position: absolute;
			right: 24px;
			bottom: 24px;
			width: 41px;
			height: 14px;
			background-color: var(--color_text-inverted);
			mask: var(--arrow) center / contain no-repeat;
			transition: transform .3s ease;

			@media (min-width: 1104px) {
				right: 27px;
				bottom: 41px;
			}
		}
	}

	.card-content {
		.text {
			min-height: 140px;
		}

		.a_h3 {
			margin: 0 0 4px;
			color: var(--color_beige);
			font-size: 22px;
			font-weight: 700;
			line-height: 1.6;
			text-decoration: underline;

			@media (min-width: 1104px) {
				font-size: 24px;
				line-height: 1.4;
			}
		}

		.a_description {
			margin: 0;
			color: var(--color_text-inverted);
			font-size: 14px;
			line-height: 1.6;
		}

		.price {
			margin: 16px 0 0;
			color: var(--color_text-inverted);
			font-size: 18px;
			font-weight: 700;
			line-height: 1.2;

			@media (min-width: 1104px) {
				margin: 20px 0 0;
			}
		}
	}

	.card-badge {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 20px 24px;
		background-color: var(--color_beige);
		color: var(--color_text);

		@media (min-width: 1104px) {
			padding: 20px 32px;
		}

		.badge-icon {
			display: block;
			width: auto;
			height: 34px;
			flex-shrink: 0;
		}

		.a_h3 {
			margin: 0;
			color: var(--color_text);
			font-size: 16px;
			font-weight: 700;
			line-height: 1.2;
			text-decoration: none;
		}

		.a_description {
			margin: 0;
			color: var(--color_text);
			font-size: 16px;
			font-weight: 400;
			line-height: 1.2;
		}
	}

	@media (min-width: 1104px) {
		a.card:hover {
			.card-cover {
				.a_wp_image img {
					transform: scale(1.1);
				}

				&::after {
					transform: translateX(16px);
				}
			}

			.card-content .a_h3 {
				text-decoration: none;
			}
		}
	}
}

.o_services_promo {

	.a_h2 {
		text-align: center;
	}

	.a_h3 {
		font-weight: 500;
	}

	.a_description {
		font-size: 14px;
		color: var(--color_text);
	}

	.card {
		background: var(--bg_surface);
		border-radius: var(--radius-sm);
		overflow: hidden;
	}

	.card .a_wp_image img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1200 / 628;
		object-fit: cover;
	}

	.card-body {
		padding: 24px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.price-old {
		font-size: 16px;
		color: var(--color_text-muted);
		text-decoration: line-through;
	}

	.price-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}

	.price-new {
		font-size: 22px;
		font-weight: 700;
		white-space: nowrap;
	}

	.discount-badge {
		font-size: 14px;
		font-weight: 400;
		color: var(--color_sleva);
		background: #ffd9e0;
		padding-inline: 5px;
		border-radius: var(--radius-sm);
		white-space: nowrap;
	}

	@media (min-width: 1104px) {

		.a_h2 {
			font-size: 30px;
			line-height: 1.6;
		}

		.price-new {
			font-size: 24px;
		}
	}
}

.o_showcase_profesionals {
	position: relative;
	overflow: hidden;
	z-index: 0;
	background: #fff;

	.heading {
		text-align: center;
		margin-bottom: 24px;
	}

	.slider-outer {
		position: relative;
		padding-inline: 20px;
	}

	.slider-track {
		overflow: hidden;
	}

	.slider {
		display: flex;
		gap: 24px;
		align-items: flex-start;
		transition: transform .3s ease;
	}

	.slide {
		flex: 0 0 100%;
	}

	.card-media {
		position: relative;
		border-radius: var(--radius-sm);
		overflow: hidden;

		img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 443 / 335;
		}

		&.video {
			cursor: pointer;
		}

		.play-button {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 77px;
			height: 60px;
			padding: 0;
			border: 0;
			border-radius: var(--radius-sm);
			background-color: var(--color_primary);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: background-color .3s ease;
		}

		&.video:hover .play-button,
		&.video:focus-within .play-button {
			background-color: var(--color_primary-hover);
		}

		.play-triangle {
			width: 0;
			height: 0;
			margin-left: 3px;
			border-style: solid;
			border-width: 10px 0 10px 16px;
			border-color: transparent transparent transparent var(--color_text-inverted);
		}

		iframe {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}
	}

	.card-body {
		margin-top: 16px;

		.a_description {
			font-size: 14px;
			line-height: 1.6;
		}
	}

	.nav-prev { left: 0; }
	.nav-next { right: 0; }

	.nav-prev[hidden],
	.nav-next[hidden],
	.dots[hidden] {
		display: none;
	}

	.dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 24px;

		.dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 2px solid var(--color_primary);
			background-color: transparent;
			cursor: pointer;
			padding: 0;

			&.active {
				background-color: var(--color_primary);
			}
		}
	}

	@media (min-width: 1104px) {

		.heading {
			margin-bottom: 40px;
		}

		.slider-outer {
			padding-inline: max(28px, calc(50dvw - 710px));
		}

		.slider {
			gap: 45px;
		}

		.slide {
			flex: 0 0 443px;
		}

		.nav {
			&.nav-prev {
				left: max(0px, calc(50dvw - 726px));
			}

			&.nav-next {
				right: max(0px, calc(50dvw - 726px));
			}
		}

		.dots {
			margin-top: 40px;
		}
	}
}

.o_skills_profesionals {
	position: relative;
	overflow: hidden;
	z-index: 0;
	background-color: var(--bg_surface);
	row-gap: 32px;

	@media (min-width: 1104px) {
		row-gap: 40px;
	}

	.col-12 {
		text-align: center;
	}

	.col-4 {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 20px;
		padding: 32px 24px;
		background-color: var(--bg_body);
		border-radius: var(--radius-sm);

		@media (min-width: 1104px) {
			padding: 48px 40px;
		}

		.icon {
			display: block;
			width: auto;
			height: 70px;
		}
	}

	.a_description {
		font-size: 16px;
	}

	.m_buttons {
		justify-content: center;
	}
}

.o_steps {
	position: relative;
	overflow: hidden;
	z-index: 0;
	padding-inline: max(28px, calc(50dvw - 682px));
	background-color: var(--bg_body);
	padding-block: 32px;
	row-gap: 32px;

	@media (min-width: 1104px) {
		padding-block: 59px 82px;
		row-gap: 59px;
		column-gap: 74px;
	}

	.a_h2 {
		text-align: center;
	}

	.col-4 {
		text-align: center;

		.number {
			display: grid;
			place-items: center;
			width: 49px;
			height: 49px;
			margin: 0 auto 25px;
			border: 2px solid var(--color_primary);
			border-radius: 50%;
			font-family: var(--font-heading);
			font-weight: 400;
			font-size: 22px;
			line-height: 1;
			color: var(--color_primary);
		}

		.a_h3 {
			margin-bottom: 11px;
			font-weight: 500;
		}

		.a_description {
			font-size: 16px;
			color: var(--color_text);
		}
	}
}

.o_steps_alt {
	background-color: var(--bg_surface);
	padding-block: 32px;

	.a_h2 {
		margin-bottom: 24px;
	}

	.steps {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.box {
		display: flex;
		flex-direction: column;
		padding: 24px;
		background-color: var(--bg_body);
		border-radius: var(--radius-sm);
	}

	.number {
		font-family: var(--font-heading);
		font-weight: 300;
		font-size: 64px;
		line-height: 1.6;
		color: var(--color_primary);
	}

	.a_h3 {
		margin-bottom: 16px;
		font-weight: 500;
	}

	.a_description {
		margin-bottom: 10px;
		font-size: 16px;
		color: var(--color_text);
	}

	.bullets {
		margin: 0;
		padding-left: 24px;
		list-style: disc;
		font-size: 16px;
		line-height: 1.6;
		color: var(--color_text);

		li + li {
			margin-top: 10px;
		}
	}

	@media (min-width: 768px) {
		padding-block: 60px;
		padding-inline: max(28px, calc(50dvw - 470px));

		.a_h2 {
			margin-bottom: 31px;
		}

		.box {
			flex-direction: row;
			padding: 23px 53px 46px 38px;
		}

		.number {
			flex-shrink: 0;
			width: 103px;
		}

		.content {
			flex: 1;
			margin-top: 18px;
		}
	}
}

.o_steps_alt2 {
	background-color: var(--bg_surface);
	padding-block: 32px;

	.blocks {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	.block .a_h2 {
		margin-bottom: 29px;
	}

	.block .a_description {
		margin-bottom: 10px;
		color: var(--color_text);
	}

	.bullets {
		margin: 0;
		padding-left: 27px;
		list-style: disc;
		font-size: 18px;
		line-height: 1.6;
		color: var(--color_text);

		li + li {
			margin-top: 10px;
		}
	}

	@media (min-width: 768px) {
		padding-block: 60px;
		padding-inline: max(28px, calc(50dvw - 350px));

		.blocks {
			gap: 74px;
		}
	}
}

.o_tiles {
	position: relative;
	overflow: hidden;
	z-index: 0;
	background-color: #fff;

	.container {
		margin-bottom: 45px;
		text-align: center;
	}

	article {
		padding-inline: max(28px, calc(50dvw - 710px));
	}

	article + article {
		margin-top: 64px;
	}

	.photo {

		img {
			max-width: 100%;
			height: auto;
			border-radius: var(--radius-lg);
		}
	}

	.text {
		.a_description {
			margin-top: 20px;
		}

		.bullets {
			list-style: none;
			margin: 20px 0 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 20px;

			li {
				display: flex;
				gap: 8px;
				align-items: flex-start;
			}
		}

		.bullets[style*="--icon"] li::before {
			content: "";
			flex-shrink: 0;
			width: 14px;
			height: 18px;
			background-color: currentColor;
			mask: var(--icon) center / contain no-repeat;
		}

		.m_buttons {
			margin-top: 32px;
		}
	}

	@media (min-width: 1104px) {

		.text {
			align-self: center;
		}

		.photo-right{
			.text {
				padding-right: 120px;
			}
			.photo {
				order: 1;
			}
		}

		.photo-left {
			.text {
				padding-left: 120px;
			}
		}

	}
}

.o_topbar {
	position: relative;
	overflow: hidden;
	background: var(--color_primary);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 6px;
	padding-inline: 40px;

	&.is-dismissed {
		display: none;
	}

	.text {
		min-width: 0;
		color: var(--color_text-inverted);
		font-family: var(--font-body);
		font-size: 14px;
		line-height: 1.6;
		text-align: center;
		text-decoration: none;
		margin: 0;

		strong {
			font-weight: 700;
		}
	}

	.more {
		color: var(--color_beige);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.close {
		position: absolute;
		top: 5px;
		right: 10px;
		width: 24px;
		height: 24px;
		background-color: var(--color_text-inverted);
		mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>') center / 20px 20px no-repeat;
		border: none;
		cursor: pointer;
		opacity: .7;
		transition: opacity .3s;

		&:hover {
			opacity: 1;
		}
	}
}

.o_typography {
	position: relative;
	overflow: hidden;
	z-index: 0;
	display: grid;
	gap: 32px;

	header {
		display: grid;
		gap: 8px;

		.lead {
			color: var(--color_text-muted);
		}
	}

	.block {
		display: grid;
		gap: 16px;
		padding: 24px;
		border: 1px solid var(--color_border);
		border-radius: var(--radius-md);
		background-color: var(--bg_surface);

		&.dark-surface {
			background-color: #0f1230;
			color: var(--color_text-inverted);
			border-color: transparent;

			h3 {
				color: var(--color_text-inverted);
			}
		}
	}

	.buttons-row {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
	}

	.swatches {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
		gap: 16px;
	}

	.swatch {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 12px;
		padding: 12px;
		border: 1px solid var(--color_border);
		border-radius: var(--radius-sm);

		.chip {
			width: 40px;
			height: 40px;
			border-radius: var(--radius-sm);
			border: 1px solid var(--color_border);
		}

		.meta {
			font-size: 12px;
			line-height: 1.4;
		}
	}

	.radii {
		display: flex;
		gap: 16px;
	}

	.radius-sample {
		display: grid;
		place-items: center;
		width: 96px;
		height: 96px;
		background-color: var(--color_accent);
		color: var(--color_text);
		font-size: 12px;
	}
}

.o_video_profesional {
	position: relative;
	overflow: hidden;
	z-index: 0;
	background-color: #fff;

	.video {
		position: relative;
		z-index: 1;
		overflow: hidden;
		border-radius: 5px;
		cursor: pointer;

		.poster,
		.poster > img {
			display: block;
			width: 100%;
			height: auto;
		}

		.play-button {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 77px;
			height: 60px;
			padding: 0;
			border: 0;
			border-radius: 5px;
			background: var(--color_primary);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: background .3s ease;
		}

		&:hover .play-button,
		&:focus-within .play-button {
			background: var(--color_primary-hover);
		}

		.play-triangle {
			width: 0;
			height: 0;
			margin-left: 3px;
			border-style: solid;
			border-width: 10px 0 10px 16px;
			border-color: transparent transparent transparent var(--color_text-inverted);
		}

		iframe {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}
	}

	.text {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 40px;

		.text-block {
			display: flex;
			flex-direction: column;
			gap: 20px;

			.a_h2 {
				font-weight: 500;
				font-size: 22px;

				@media (min-width: 1104px) {
					font-size: 24px;
				}
			}

			.a_description {
				font-style: italic;
				font-size: 22px;
				color: var(--color_text);
			}
		}

		.person {
			display: flex;
			align-items: center;
			gap: 16px;
		}

		.portrait {
			position: relative;
			width: 104px;
			height: 104px;
			flex-shrink: 0;
			overflow: hidden;
			border-radius: 50%;
			background: var(--color_beige);
			display: flex;
			align-items: center;
			justify-content: center;

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

		.signature {
			width: 134px;
			padding: 10px;
			flex-shrink: 0;

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

	@media (min-width: 768px) and (max-width: 1103px) {

		.text {
			grid-column: span 12;
		}
	}

	@media (min-width: 1104px) {

		.text {
			align-self: center;
			padding-left: 92px;
		}
	}

	.text.col-12 .a_description {
		text-wrap: auto;
	}
}

.o_video_references {
	position: relative;
	background-color: #fff;

	.heading {
		text-align: center;
		margin-bottom: 24px;
	}

	.slider-outer {
		position: relative;
	}

	.slider-track {
		overflow: hidden;
	}

	.slider {
		display: flex;
		gap: 20px;
		align-items: flex-start;
		transition: transform .3s ease;
	}

	.slide {
		flex: 0 0 100%;
	}

	.card-media {
		position: relative;
		padding-bottom: calc(614 / 340 * 100%);
		border-radius: var(--radius-sm);
		overflow: hidden;
		background-color: var(--color_text);

		.a_wp_image {
			position: absolute;
			inset: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}

		iframe {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}

		&.video {
			cursor: pointer;
		}
	}

	.video-indicator {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 68px;
		height: 85px;
		background: url(./components/organisms/o_video_references/src/youtube-alt.png) center / contain no-repeat;
		pointer-events: none;
	}

	.nav-prev { left: -12px; }
	.nav-next { right: -12px; }

	.nav-prev[hidden],
	.nav-next[hidden],
	.dots[hidden] {
		display: none;
	}

	.dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 24px;

		.dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 2px solid var(--color_primary);
			background-color: transparent;
			cursor: pointer;
			padding: 0;

			&.active {
				background-color: var(--color_primary);
			}
		}
	}

	@media (min-width: 1104px) {

		.heading {
			margin-bottom: 40px;
		}

		.slider {
			gap: 20px;
		}

		.slide {
			flex: 0 0 340px;
		}

		.nav-prev { left: -17px; }
		.nav-next { right: -17px; }

		.dots {
			margin-top: 40px;
		}
	}
}

.o_why_us {
	position: relative;
	overflow: hidden;
	z-index: 0;
	padding-inline: max(28px, calc(50dvw - 621px));
	background-color: var(--bg_body);
	padding-block: 33px 15px;
	row-gap: 40px;

	@media (min-width: 1104px) {
		padding-block: 77px 50px;
		row-gap: 40px;
		column-gap: 40px;
	}

	.a_h2 {
		font-size: 22px;
		line-height: 1.6;
		text-align: center;

		@media (min-width: 1104px) {
			font-size: 24px;
		}
	}

	.col-3 {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		row-gap: 2px;
		column-gap: 22px;
		text-align: left;

		.icon-wrap {
			display: inline-block;
			width: 60px;
			height: 60px;
			overflow: hidden;
			grid-row: 1 / span 2;
		}

		.icon {
			display: inline-block;
			width: 47px;
			height: auto;
			max-height: 60px;
			object-fit: contain;
		}

		@media (min-width: 1104px) {
			display: block;
			text-align: center;

			.icon {
				grid-row: auto;
				margin-bottom: 20px;
			}
		}

		.a_h3 {
			margin: 0 0 2px;
			font-size: 16px;
			line-height: 1.6;
			color: var(--color_primary);
		}

		.a_description {
			color: var(--color_text);
			font-size: 14px;
		}
	}

	a.col-3 {
		color: inherit;
		text-decoration: none;

		.icon{
			transition: transform .3s ease;
		}

		.a_h3 {
			text-decoration: underline;
		}

		&:hover {
			.icon {
				transform: scale(1.1);
			}

			.a_h3{
				text-decoration: none;
			}
		}
	}
}

.o_youtube_episode {
	background-color: #fff;

	.heading {
		margin-bottom: 16px;
	}

	.badges {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 16px;
	}

	.badge {
		background: var(--bg_body);
		color: var(--color_text);
		font-size: 14px;
		line-height: 1.6;
		padding: 0 5px;
		border-radius: var(--radius-sm);
	}

	.a_description {
		margin-bottom: 24px;
	}

	.video {
		position: relative;
		isolation: isolate;
		padding-bottom: 56.28%;
		border-radius: var(--radius-lg);
		overflow: hidden;

		&[data-youtube-id] {
			cursor: pointer;
		}

		.poster {
			position: absolute;
			inset: 0;
		}

		.poster img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.play {
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			z-index: 2;
			width: 77px;
			height: 60px;
			padding: 0;
			border: 0;
			border-radius: var(--radius-sm);
			background: var(--color_primary);
			cursor: pointer;
			display: grid;
			place-items: center;
			transition: all .3s ease;

			&:hover {
				background: var(--color_primary-hover);
			}

			.play-triangle {
				display: block;
				width: 0;
				height: 0;
				border-left: 16px solid var(--color_text-inverted);
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				translate: 3px 0;
			}
		}

		&.is-playing {
			cursor: default;

			.poster,
			.play {
				display: none;
			}

			iframe {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				border: 0;
			}
		}
	}

	@media (min-width: 1104px) {
		text-align: center;

		.heading {
			margin-bottom: 20px;
		}

		.badges {
			justify-content: center;
			margin-bottom: 20px;
		}

		.a_description {
			max-width: 790px;
			margin-inline: auto;
			margin-bottom: 32px;
		}
	}
}

.o_youtube_grid {

	.a_h2 {
		text-align: center;
		margin-bottom: 24px;
	}

	.col-6 {
		background: var(--bg_surface);
		padding: 32px;
		border-radius: var(--radius-sm);
	}

	.badge {
		display: inline-block;
		background: var(--bg_body);
		color: var(--color_text);
		font-size: 14px;
		line-height: 1.6;
		padding: 0 5px;
		margin: 0 8px 7px 0;
		border-radius: var(--radius-sm);
	}

	.a_h3 {
		margin-bottom: 7px;
	}

	.a_description {
		margin-bottom: 35px;
	}

	.video {
		position: relative;
		isolation: isolate;
		padding-bottom: 56.28%;
		border-radius: var(--radius-sm);
		overflow: hidden;

		&[data-youtube-id] {
			cursor: pointer;
		}

		.poster {
			position: absolute;
			inset: 0;
		}

		.poster img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.play {
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			z-index: 2;
			width: 77px;
			height: 60px;
			padding: 0;
			border: 0;
			border-radius: var(--radius-sm);
			background: var(--color_primary);
			cursor: pointer;
			display: grid;
			place-items: center;
			transition: all .3s ease;

			&:hover {
				background: var(--color_primary-hover);
			}

			.play-triangle {
				display: block;
				width: 0;
				height: 0;
				border-left: 16px solid var(--color_text-inverted);
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				translate: 3px 0;
			}
		}

		&.is-playing {
			cursor: default;

			.poster,
			.play {
				display: none;
			}

			iframe {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				border: 0;
			}
		}
	}

	.m_buttons {
		justify-content: center;
		margin-top: 24px;
	}
}

.o_youtube_persons {
	background: #fff;

	.col-6 {
		overflow: hidden;
		background: var(--bg_body);
		border-radius: var(--radius-sm);
		padding: 24px;
	}

	.a_wp_image {
		border-radius: var(--radius-sm);
		overflow: hidden;
		margin-bottom: 24px;

		img {
			width: 100%;
			height: auto;
			aspect-ratio: 330 / 413;
			object-fit: cover;
			display: block;
		}
	}

	.a_h3 {
		margin-bottom: 4px;
	}

	.role {
		font-size: 16px;
		line-height: 1.6;
		color: var(--color_text-muted);
		margin-bottom: 24px;
	}

	.a_description {
		margin-bottom: 24px;
	}

	@media (min-width: 1104px) {

		.col-6 {
			position: relative;
			z-index: 1;
			min-height: 558px;
			padding: 54px 64px;
		}

		.a_wp_image {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 330px;
			margin-bottom: 0;
			border-radius: 0;
			z-index: -1;
		}

		.a_h3,
		.role,
		.a_description,
		.m_buttons {
			padding-right: 42%;
		}
	}
}