/* Content component for ppr48.ru. No html/body/:root or unscoped rules.
   Roboto and Oswald are supplied by the EXISTING website template.
   Set --ppr-km-anchor-offset on #ppr-km.ppr-km to match the site's fixed header. */
#ppr-km.ppr-km {
  --ppr-km-green: #28a745;
  --ppr-km-action: var(--ppr-km-green);
  --ppr-km-link: #176c2b;
  --ppr-km-on-green: #fff;
  --ppr-km-mobile-gutter: 1rem;
  --ppr-km-mobile-section-padding: 1.5rem;
  --ppr-km-mobile-section-gap: 2rem;
  --ppr-km-mobile-item-gap: 1rem;
  --ppr-km-section-gap: clamp(2.25rem, 5vw, 4rem);
  --ppr-km-hover: #218838;
  --ppr-km-text: #252525;
  --ppr-km-muted: #59645d;
  --ppr-km-line: #dce5de;
  --ppr-km-soft: #f5f8f5;
  --ppr-km-anchor-offset: 110px;
  container: ppr-km / inline-size;
  inline-size: 100%;
  max-inline-size: 1140px;
  min-inline-size: 0;
  margin-inline: auto;
  color: var(--ppr-km-text);
  background: #fff;
  font: 400 1rem/1.65 Roboto, Arial, sans-serif;
  text-align: start;
  overflow-wrap: anywhere;
  isolation: isolate;
  display: flow-root;
  padding-block-end: 1.5rem;
}
.b24-form-btn-block button {
  background-color: rgb(39 167 69)!important;
}
.b24-form-wrapper.b24-form-border-bottom {
    border-bottom: 5px solid rgb(39 167 69)!important;
}
#ppr-km.ppr-km *:not(.ppr-km__bitrix *), #ppr-km.ppr-km *:not(.ppr-km__bitrix *)::before, #ppr-km.ppr-km *:not(.ppr-km__bitrix *)::after { box-sizing: border-box; }
#ppr-km.ppr-km :where(section, article, aside, div, li):not(.ppr-km__bitrix *) { min-inline-size: 0; }
#ppr-km.ppr-km [id]:not(.ppr-km__bitrix *) { scroll-margin-block-start: var(--ppr-km-anchor-offset); }
#ppr-km.ppr-km h1:not(.ppr-km__bitrix *), #ppr-km.ppr-km h2:not(.ppr-km__bitrix *), #ppr-km.ppr-km h3:not(.ppr-km__bitrix *) {
  font-family: Oswald, "Arial Narrow", Arial, sans-serif;
  color: var(--ppr-km-text);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
  margin: 0 0 1rem;
  float: none;
  width: auto;
}
/* Neutralize Joomla's global heading decorations before applying one pair. */
#ppr-km.ppr-km h1:not(.ppr-km__bitrix *)::before, #ppr-km.ppr-km h1:not(.ppr-km__bitrix *)::after,
#ppr-km.ppr-km h2:not(.ppr-km__bitrix *)::before, #ppr-km.ppr-km h2:not(.ppr-km__bitrix *)::after,
#ppr-km.ppr-km h3:not(.ppr-km__bitrix *)::before, #ppr-km.ppr-km h3:not(.ppr-km__bitrix *)::after {
	content: none;
}

#ppr-km.ppr-km h1:not(.ppr-km__bitrix *) {
	font-size: clamp(2rem, 1.3rem + 2vw, 3.125rem);
	font-weight: 600;
	text-align: start;
}

#ppr-km.ppr-km h2:not(.ppr-km__bitrix *) {
	font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem);
}

#ppr-km.ppr-km h3:not(.ppr-km__bitrix *) {
	font-size: 1.375rem;
	text-align: start;
}

#ppr-km.ppr-km h1:not(.ppr-km__bitrix *) span, #ppr-km.ppr-km h2:not(.ppr-km__bitrix *) span {
	color: var(--ppr-km-action);
}

#ppr-km.ppr-km p:where(:not(.ppr-km__bitrix *)) {
	margin: 0 0 1rem;
	color: var(--ppr-km-muted);
	font-size: inherit;
	line-height: inherit;
}

#ppr-km.ppr-km a:where(:not(.ppr-km__bitrix *)) {
	color: var(--ppr-km-link);
	text-decoration: underline;
	text-underline-offset: .2em;
}

#ppr-km.ppr-km a:not(.ppr-km__bitrix *):hover {
	color: var(--ppr-km-hover);
}

#ppr-km.ppr-km :is(a, button):not(.ppr-km__bitrix *):focus-visible, #ppr-km.ppr-km summary:focus-visible {
	outline: 3px solid var(--ppr-km-action);
	outline-offset: 4px;
}

#ppr-km.ppr-km .ppr-km__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
	padding: clamp(1.25rem, 4vw, 3rem);
	background: var(--ppr-km-soft);
	border-radius: 10px;
}

#ppr-km.ppr-km .ppr-km__eyebrow {
	font-size: .875rem;
	color: var(--ppr-km-link);
	margin-bottom: 1rem;
	font-weight: 500;
}

#ppr-km.ppr-km .ppr-km__lead {
	font-size: 1.125rem;
}

#ppr-km.ppr-km .ppr-km__hero-points {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0;
}

#ppr-km.ppr-km .ppr-km__hero-points li {
	position: relative;
	padding: 0 0 .625rem 1.5rem;
	font-size: 1rem;
}

#ppr-km.ppr-km .ppr-km__hero-points li::before {
	content: '✓';
	position: absolute;
	inset-inline-start: 0;
	color: var(--ppr-km-action);
}

#ppr-km.ppr-km .ppr-km__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
}

#ppr-km.ppr-km :is(a, button):not(.ppr-km__bitrix *).ppr-km__button {
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-block-size: 48px;
	max-inline-size: 100%;
	padding: .75rem 1.125rem;
	background: var(--ppr-km-action);
	color: var(--ppr-km-on-green);
	border: 1px solid var(--ppr-km-action);
	border-radius: 10px;
	text-decoration: none;
	font: 600 1rem/1.45 Roboto, Arial, sans-serif;
	text-align: center;
	white-space: normal;
	box-shadow: 0 6px 16px #3030301a;
	transition: background-color .2s, box-shadow .2s;
}

#ppr-km.ppr-km :is(a, button):not(.ppr-km__bitrix *).ppr-km__button:hover {
	background: var(--ppr-km-hover);
	border-color: var(--ppr-km-hover);
	color: #fff;
	box-shadow: 0 6px 16px #30303026;
}

#ppr-km.ppr-km .ppr-km__link {
	display: inline-block;
	font-size: 1rem;
	padding-block: .625rem;
}

#ppr-km.ppr-km .ppr-km__micro {
	margin: 1rem 0 0;
	font-size: .875rem;
	line-height: 1.6;
}

#ppr-km.ppr-km .ppr-km__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem 1.5rem;
	margin-block: 1.5rem 0;
	padding: .5rem;
	border-block-end: 1px solid var(--ppr-km-line);
}

#ppr-km.ppr-km .ppr-km__nav a {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	font-size: .875rem;
	text-decoration: none;
}

#ppr-km.ppr-km .ppr-km__section {
	margin: var(--ppr-km-section-gap) 0 0;
	padding: clamp(1.25rem, 4vw, 3rem);
}

#ppr-km.ppr-km .ppr-km__section--soft {
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--ppr-km-soft);
	border-radius: 10px;
}

#ppr-km.ppr-km .ppr-km__heading {
	max-inline-size: 850px;
	margin: 0 auto clamp(1.5rem, 2.5vw, 2rem);
	text-align: center;
}

#ppr-km.ppr-km .ppr-km__heading h2 {
	text-align: center;
}

#ppr-km.ppr-km .ppr-km__heading h2::before {
	content: '[ ';
	color: var(--ppr-km-text);
	position: static;
	margin: 0;
	font-weight: 500;
}

#ppr-km.ppr-km .ppr-km__heading h2::after {
	content: ' ]';
	color: var(--ppr-km-text);
	position: static;
	margin: 0;
	font-weight: 500;
}

#ppr-km.ppr-km .ppr-km__heading p {
	margin: 0;
}

#ppr-km.ppr-km .ppr-km__grid {
	display: grid;
	gap: 1.25rem;
	margin: 0;
}
/* Intrinsic grids adapt to the CMS content column, not just to screen width. */
#ppr-km.ppr-km .ppr-km__grid--three {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

#ppr-km.ppr-km .ppr-km__grid--two {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

#ppr-km.ppr-km .ppr-km__grid--four {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

#ppr-km.ppr-km .ppr-km__card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid var(--ppr-km-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 3px 14px #00000005;
}

#ppr-km.ppr-km .ppr-km__badge {
	align-self: flex-start;
	padding: .25rem .75rem;
	margin-bottom: 1rem;
	border: 1px solid #c5dfcb;
	border-radius: 5px;
	background: #eef7ef;
	color: var(--ppr-km-link);
	font-size: 1rem;
	font-weight: 600;
}

#ppr-km.ppr-km .ppr-km__list {
	padding: 0;
	margin: 0 0 1.5rem;
	list-style: none;
}

#ppr-km.ppr-km .ppr-km__list li {
	padding: .65rem 0 .65rem 1.5rem;
	position: relative;
	border-block-end: 1px solid var(--ppr-km-line);
	margin: 0;
}

#ppr-km.ppr-km .ppr-km__list li::before {
	content: '✓';
	position: absolute;
	inset-inline-start: 0;
	color: var(--ppr-km-action);
}

#ppr-km.ppr-km .ppr-km__card > .ppr-km__button {
	margin-block-start: auto;
	inline-size: 100%;
}

#ppr-km.ppr-km .ppr-km__card > .ppr-km__list:last-child {
	margin-block-end: 0;
}

#ppr-km.ppr-km .ppr-km__note {
	border-inline-start: 3px solid var(--ppr-km-green);
	margin: 1.5rem 0 0;
	padding: .75rem 1rem;
	color: var(--ppr-km-text);
}

#ppr-km.ppr-km .ppr-km__factor {
	padding: 1.25rem;
	border: 1px solid var(--ppr-km-line);
	border-radius: 10px;
	background: #fff;
}

#ppr-km.ppr-km .ppr-km__factor > span {
	display: block;
	font: 500 1.75rem/1.4 Oswald, Arial, sans-serif;
	color: var(--ppr-km-action);
	margin-bottom: .75rem;
}

#ppr-km.ppr-km .ppr-km__factor p {
	margin: 0;
}

#ppr-km.ppr-km .ppr-km__callout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-block-start: 1.75rem;
	padding: 1.5rem;
	border-radius: 10px;
	background: var(--ppr-km-soft);
}

#ppr-km.ppr-km .ppr-km__callout > div, #ppr-km.ppr-km .ppr-km__callout > p {
	flex: 1 1 26rem;
}

#ppr-km.ppr-km .ppr-km__callout p {
	margin: 0;
}

#ppr-km.ppr-km .ppr-km__callout > a {
	flex: 0 1 auto;
}

#ppr-km.ppr-km .ppr-km__callout--plain {
	border: 1px solid var(--ppr-km-line);
	background: #fff;
}

#ppr-km.ppr-km .ppr-km__condition {
	padding: 1.25rem 1.5rem;
	border-inline-start: 3px solid var(--ppr-km-green);
	background: #fff;
	border-radius: 0 8px 8px 0;
}

#ppr-km.ppr-km .ppr-km__condition p {
	margin: 0;
}

#ppr-km.ppr-km .ppr-km__steps {
	padding: 0;
	list-style: none;
}

#ppr-km.ppr-km .ppr-km__steps > li {
	padding: 1.25rem;
	background: white;
	border: 1px solid var(--ppr-km-line);
	border-radius: 10px;
}

#ppr-km.ppr-km .ppr-km__steps > li > span {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	margin-bottom: 1rem;
	border-radius: 50%;
	color: var(--ppr-km-on-green);
	background: var(--ppr-km-action);
	font-size: 1.25rem;
}

#ppr-km.ppr-km .ppr-km__steps p {
	margin: 0;
}

#ppr-km.ppr-km .ppr-km__faq {
	max-inline-size: 900px;
	margin-inline: auto;
}

#ppr-km.ppr-km .ppr-km__faq details {
	border: 1px solid var(--ppr-km-line);
	border-radius: 8px;
	margin-bottom: .75rem;
	background: #f9fbf9;
}

#ppr-km.ppr-km .ppr-km__faq summary {
	display: block;
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 1rem 3.25rem 1rem 1.25rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--ppr-km-text);
}

#ppr-km.ppr-km .ppr-km__faq summary::-webkit-details-marker {
	display: none;
}

#ppr-km.ppr-km .ppr-km__faq summary::after {
	content: '+';
	position: absolute;
	inset-inline-end: 1.25rem;
	inset-block-start: .75rem;
	font-size: 1.5rem;
	color: var(--ppr-km-action);
}

#ppr-km.ppr-km .ppr-km__faq details[open] summary::after {
	content: '−';
}

#ppr-km.ppr-km .ppr-km__faq details p {
	margin: 0;
	padding: 0 1.25rem 1.25rem;
}

#ppr-km.ppr-km .ppr-km__contact {
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--ppr-km-soft);
	border: 1px solid var(--ppr-km-line);
	border-radius: 10px;
	text-align: center;
}

#ppr-km.ppr-km .ppr-km__contact .ppr-km__actions {
	justify-content: center;
}
/* Illustrated sections reuse original drawings. Images remain fully visible. */
#ppr-km.ppr-km .ppr-km__hero-media {
	min-inline-size: 0;
}

#ppr-km.ppr-km .ppr-km__hero-media > .ppr-km__button {
	inline-size: 100%;
	margin-block-start: 1rem;
}

#ppr-km.ppr-km .ppr-km__workflow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .4rem .65rem;
	padding: 1rem .25rem 0;
	font-size: .875rem;
	color: var(--ppr-km-link);
}

#ppr-km.ppr-km .ppr-km__visual-layout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

#ppr-km.ppr-km .ppr-km__visual {
	margin: 0;
	min-inline-size: 0;
	border: 1px solid var(--ppr-km-line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 8px 24px #17261b0a;
}

#ppr-km.ppr-km .ppr-km__visual-label {
	padding: .75rem 1rem;
	border-block-end: 3px solid var(--ppr-km-green);
	background: #f1f8f2;
	color: var(--ppr-km-link);
	font-size: .875rem;
	font-weight: 600;
}

#ppr-km.ppr-km .ppr-km__visual-link {
	display: block;
	position: relative;
	cursor: zoom-in;
	background: #fff;
}

#ppr-km.ppr-km .ppr-km__visual-link img {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
	margin: 0;
	padding: 0;
	float: none;
	border: 0;
	border-radius: 0;
}

#ppr-km.ppr-km .ppr-km__visual-link:focus-visible {
	outline-offset: -4px;
}

#ppr-km.ppr-km .ppr-km__visual figcaption {
	display: grid;
	gap: .35rem;
	padding: 1rem 1.25rem;
	border-block-start: 1px solid var(--ppr-km-line);
	color: var(--ppr-km-muted);
	font-size: .875rem;
	line-height: 1.6;
}

#ppr-km.ppr-km .ppr-km__visual figcaption strong {
	font-size: 1rem;
	font-weight: 500;
	color: var(--ppr-km-text);
}

#ppr-km.ppr-km .ppr-km__visual-copy {
	display: grid;
	gap: 1.25rem;
}

#ppr-km.ppr-km .ppr-km__visual-point {
	padding: 0 0 1.25rem;
	border-block-end: 1px solid var(--ppr-km-line);
}

#ppr-km.ppr-km .ppr-km__visual-point:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

#ppr-km.ppr-km .ppr-km__visual-point h3 {
	margin-block-end: .5rem;
	font-size: 1.25rem;
}

#ppr-km.ppr-km .ppr-km__visual-point p {
	margin: 0;
}

@media print {
	#ppr-km.ppr-km .ppr-km__visual {
		break-inside: avoid;
		box-shadow: none;
	}

	#ppr-km.ppr-km .ppr-km__visual-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	#ppr-km.ppr-km .ppr-km__zoom-hint {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#ppr-km.ppr-km *:not(.ppr-km__bitrix *), #ppr-km.ppr-km *:not(.ppr-km__bitrix *)::before, #ppr-km.ppr-km *:not(.ppr-km__bitrix *)::after {
		transition: none;
	}
}

@media print {
	#ppr-km.ppr-km {
		container-type: normal;
		max-inline-size: none;
	}

	#ppr-km.ppr-km .ppr-km__nav, #ppr-km.ppr-km [data-km-request] {
		display: none;
	}

	#ppr-km.ppr-km .ppr-km__hero {
		display: block;
	}

	#ppr-km.ppr-km .ppr-km__section {
		margin-block-start: 1rem;
		padding: 1rem 0;
		background: #fff;
	}

	#ppr-km.ppr-km .ppr-km__card {
		box-shadow: none;
	}
}

/* Only the outer Bitrix slot is sized here. Bitrix owns all inner form styles. */
#ppr-km.ppr-km .ppr-km__bitrix {
	inline-size: 100%;
	max-inline-size: 720px;
	min-inline-size: 0;
	margin: 2rem auto 0;
	text-align: start;
}

#ppr-km.ppr-km .ppr-km__bitrix:focus {
	outline: 2px solid var(--ppr-km-action);
	outline-offset: 6px;
	border-radius: 10px;
}

/* Owl Carousel: all overrides are local to this gallery. */
#ppr-km.ppr-km .ppr-km__carousel {
	inline-size: 100%;
	min-inline-size: 0;
	position: relative;
}

#ppr-km.ppr-km .ppr-km__carousel:not(.owl-loaded) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1.25rem;
}

#ppr-km.ppr-km .ppr-km__carousel.owl-loaded {
	display: block;
}

#ppr-km.ppr-km .ppr-km__carousel:empty {
	display: none;
}

#ppr-km.ppr-km .ppr-km__carousel .owl-stage {
	display: flex;
	align-items: stretch;
}

#ppr-km.ppr-km .ppr-km__carousel .owl-stage-outer {
	overflow: hidden;
	padding-block: 5px;
}

#ppr-km.ppr-km .ppr-km__carousel .owl-item {
	display: flex;
	flex: 0 0 auto;
}

#ppr-km.ppr-km .ppr-km__example {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	border: 1px solid var(--ppr-km-line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

#ppr-km.ppr-km .ppr-km__example-image {
	position: relative;
	display: block;
	padding: 0;
	aspect-ratio: 3 / 2;
	background: #f1f4f1;
}

#ppr-km.ppr-km .ppr-km__example-image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	float: none;
	border-radius: 0;
}

#ppr-km.ppr-km .ppr-km__example-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem;
}

#ppr-km.ppr-km .ppr-km__example-body h3 {
	font-size: 1.25rem;
}

#ppr-km.ppr-km .ppr-km__example-body p {
	font-size: 1rem;
}

#ppr-km.ppr-km .ppr-km__example-body > .ppr-km__button {
	margin-block-start: auto;
	gap: .4rem;
}

#ppr-km.ppr-km .ppr-km__carousel .owl-nav {
	display: flex;
	justify-content: center;
	gap: .75rem;
	margin-top: 1rem;
}

#ppr-km.ppr-km .ppr-km__carousel .owl-nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 10px;
	border: 1px solid var(--ppr-km-action);
	background: white;
	color: var(--ppr-km-action);
	font: 400 2rem/1 Arial, sans-serif;
	cursor: pointer;
	margin: 0;
}

#ppr-km.ppr-km .ppr-km__carousel .owl-nav button:hover:not(:disabled) {
	background: var(--ppr-km-action);
	color: var(--ppr-km-on-green);
}

#ppr-km.ppr-km .ppr-km__carousel .owl-nav button.disabled {
	opacity: .4;
	cursor: default;
}

#ppr-km.ppr-km .ppr-km__carousel .owl-dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	margin-top: .25rem;
}

#ppr-km.ppr-km .ppr-km__carousel .owl-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

#ppr-km.ppr-km .ppr-km__carousel .owl-dot span {
	display: block;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: #9aaba0;
}

#ppr-km.ppr-km .ppr-km__carousel .owl-dot.active span {
	background: var(--ppr-km-action);
}

#ppr-km.ppr-km .ppr-km__carousel .owl-nav.disabled, #ppr-km.ppr-km .ppr-km__carousel .owl-dots.disabled {
	display: none;
}

#ppr-km.ppr-km .ppr-km__carousel button:focus-visible {
	outline: 3px solid var(--ppr-km-action);
	outline-offset: 3px;
}

#ppr-km.ppr-km .ppr-km__example-image:focus-visible {
	outline-offset: -4px;
}

#ppr-km.ppr-km .ppr-km__sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

@media print {
	#ppr-km.ppr-km .ppr-km__carousel .owl-stage {
		display: grid;
		inline-size: 100% !important;
		transform: none !important;
		gap: 1rem;
	}

	#ppr-km.ppr-km .ppr-km__carousel .owl-item {
		inline-size: 100% !important;
		margin: 0 !important;
	}

	#ppr-km.ppr-km .ppr-km__carousel .owl-nav, #ppr-km.ppr-km .ppr-km__carousel .owl-dots {
		display: none;
	}
}

/* Drawings are shown without cropping; the full original opens in Fancybox. */
#ppr-km.ppr-km .ppr-km__example-image {
	cursor: zoom-in;
	background: #fff;
	aspect-ratio: 3 / 2;
}

#ppr-km.ppr-km .ppr-km__example-image img {
	object-fit: contain;
}

#ppr-km.ppr-km .ppr-km__zoom-hint {
	position: absolute;
	inset-inline-end: .6rem;
	inset-block-end: .6rem;
	padding: .35rem .65rem;
	border-radius: 5px;
	color: var(--ppr-km-on-green);
	background: var(--ppr-km-action);
	font-size: .875rem;
	font-weight: 600;
}

#ppr-km.ppr-km .ppr-km__work-category {
	color: var(--ppr-km-link);
	font-size: .875rem;
	font-weight: 500;
	margin-block-end: .5rem;
}

#ppr-km.ppr-km .ppr-km__example-body p:last-child {
	margin: 0;
}

#ppr-km.ppr-km .ppr-km__carousel:focus-visible {
	outline: 3px solid var(--ppr-km-action);
	outline-offset: 4px;
}
/* Fancybox is attached to body, so target only this gallery's private baseClass. */
.ppr-km-lightbox .fancybox-caption { font-family: Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.ppr-km-lightbox .fancybox-button:focus-visible { outline: 3px solid #81ca91; outline-offset: -3px; }

/* One spacing scale for mobile screens and narrow CMS columns.
   16px gutter/card padding, 24px section padding, 32px between sections (at 16px root font).
   Keep the media fallback identical to the container rules. */
@container ppr-km (max-width: 760px) {
  #ppr-km.ppr-km .ppr-km__hero,
  #ppr-km.ppr-km .ppr-km__section {
    padding: var(--ppr-km-mobile-section-padding) var(--ppr-km-mobile-gutter);
  }
  #ppr-km.ppr-km .ppr-km__section {
    margin: var(--ppr-km-mobile-section-gap) 0 0;
    display: flow-root;
  }
  /* The contact border is included in the common 16px content inset. */
  #ppr-km.ppr-km .ppr-km__contact {
    padding-inline: calc(var(--ppr-km-mobile-gutter) - 1px);
    padding-block: calc(var(--ppr-km-mobile-section-padding) - 1px);
  }
  #ppr-km.ppr-km .ppr-km__hero,
  #ppr-km.ppr-km .ppr-km__visual-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ppr-km-mobile-section-padding);
  }
  #ppr-km.ppr-km .ppr-km__hero-media { inline-size: 100%; }
  #ppr-km.ppr-km h1:not(.ppr-km__bitrix *) { font-size: 2.25rem; }
  #ppr-km.ppr-km .ppr-km__heading { margin: 0 auto var(--ppr-km-mobile-section-padding); }
  #ppr-km.ppr-km .ppr-km__nav {
    margin-block: var(--ppr-km-mobile-section-padding) 0;
    padding: 0 var(--ppr-km-mobile-gutter);
    gap: .25rem var(--ppr-km-mobile-item-gap);
    justify-content: flex-start;
  }
  #ppr-km.ppr-km .ppr-km__grid,
  #ppr-km.ppr-km .ppr-km__carousel:not(.owl-loaded),
  #ppr-km.ppr-km .ppr-km__visual-copy { gap: var(--ppr-km-mobile-item-gap); }
  #ppr-km.ppr-km .ppr-km__card,
  #ppr-km.ppr-km .ppr-km__factor,
  #ppr-km.ppr-km .ppr-km__condition,
  #ppr-km.ppr-km .ppr-km__steps > li,
  #ppr-km.ppr-km .ppr-km__callout,
  #ppr-km.ppr-km .ppr-km__example-body,
  #ppr-km.ppr-km .ppr-km__visual figcaption {
    padding: var(--ppr-km-mobile-gutter);
  }
  #ppr-km.ppr-km .ppr-km__visual-label { padding-inline: var(--ppr-km-mobile-gutter); }
  #ppr-km.ppr-km .ppr-km__visual-point { padding-block-end: var(--ppr-km-mobile-item-gap); }
  #ppr-km.ppr-km .ppr-km__visual-point:last-child { padding-block-end: 0; }
  #ppr-km.ppr-km .ppr-km__actions,
  #ppr-km.ppr-km .ppr-km__callout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ppr-km-mobile-item-gap);
  }
  #ppr-km.ppr-km .ppr-km__callout { margin-block-start: var(--ppr-km-mobile-section-padding); }
  /* Reset the desktop flex-basis when the callout switches to a column. */
  #ppr-km.ppr-km .ppr-km__callout > :is(div, p, a, button) {
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  #ppr-km.ppr-km .ppr-km__button { inline-size: 100%; }
  #ppr-km.ppr-km .ppr-km__note { margin-block-start: var(--ppr-km-mobile-section-padding); }
  #ppr-km.ppr-km .ppr-km__faq {
    display: grid;
    gap: var(--ppr-km-mobile-item-gap);
  }
  #ppr-km.ppr-km .ppr-km__faq details { margin: 0; }
  #ppr-km.ppr-km .ppr-km__faq summary {
    padding: var(--ppr-km-mobile-gutter) 3rem var(--ppr-km-mobile-gutter) var(--ppr-km-mobile-gutter);
  }
  #ppr-km.ppr-km .ppr-km__faq summary::after { inset-inline-end: var(--ppr-km-mobile-gutter); }
  #ppr-km.ppr-km .ppr-km__faq details p {
    padding: 0 var(--ppr-km-mobile-gutter) var(--ppr-km-mobile-gutter);
  }
}
@media screen and (max-width: 760px) {
  #sp-main-body {
    padding: 0px 15px 0px 15px;
  }
  #ppr-km.ppr-km .ppr-km__hero,
  #ppr-km.ppr-km .ppr-km__section {
    padding: var(--ppr-km-mobile-section-padding) var(--ppr-km-mobile-gutter);
  }
  #ppr-km.ppr-km .ppr-km__section {
    margin: var(--ppr-km-mobile-section-gap) 0 0;
    display: flow-root;
  }
  /* The contact border is included in the common 16px content inset. */
  #ppr-km.ppr-km .ppr-km__contact {
    padding-inline: calc(var(--ppr-km-mobile-gutter) - 1px);
    padding-block: calc(var(--ppr-km-mobile-section-padding) - 1px);
  }
  #ppr-km.ppr-km .ppr-km__hero,
  #ppr-km.ppr-km .ppr-km__visual-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ppr-km-mobile-section-padding);
  }
  #ppr-km.ppr-km .ppr-km__hero-media { inline-size: 100%; }
  #ppr-km.ppr-km h1:not(.ppr-km__bitrix *) { font-size: 2.25rem; }
  #ppr-km.ppr-km .ppr-km__heading { margin: 0 auto var(--ppr-km-mobile-section-padding); }
  #ppr-km.ppr-km .ppr-km__nav {
    margin-block: var(--ppr-km-mobile-section-padding) 0;
    padding: 0 var(--ppr-km-mobile-gutter);
    gap: .25rem var(--ppr-km-mobile-item-gap);
    justify-content: flex-start;
  }
  #ppr-km.ppr-km .ppr-km__grid,
  #ppr-km.ppr-km .ppr-km__carousel:not(.owl-loaded),
  #ppr-km.ppr-km .ppr-km__visual-copy { gap: var(--ppr-km-mobile-item-gap); }
  #ppr-km.ppr-km .ppr-km__card,
  #ppr-km.ppr-km .ppr-km__factor,
  #ppr-km.ppr-km .ppr-km__condition,
  #ppr-km.ppr-km .ppr-km__steps > li,
  #ppr-km.ppr-km .ppr-km__callout,
  #ppr-km.ppr-km .ppr-km__example-body,
  #ppr-km.ppr-km .ppr-km__visual figcaption {
    padding: var(--ppr-km-mobile-gutter);
  }
  #ppr-km.ppr-km .ppr-km__visual-label { padding-inline: var(--ppr-km-mobile-gutter); }
  #ppr-km.ppr-km .ppr-km__visual-point { padding-block-end: var(--ppr-km-mobile-item-gap); }
  #ppr-km.ppr-km .ppr-km__visual-point:last-child { padding-block-end: 0; }
  #ppr-km.ppr-km .ppr-km__actions,
  #ppr-km.ppr-km .ppr-km__callout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ppr-km-mobile-item-gap);
  }
  #ppr-km.ppr-km .ppr-km__callout { margin-block-start: var(--ppr-km-mobile-section-padding); }
  /* Reset the desktop flex-basis when the callout switches to a column. */
  #ppr-km.ppr-km .ppr-km__callout > :is(div, p, a, button) {
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  #ppr-km.ppr-km .ppr-km__button { inline-size: 100%; }
  #ppr-km.ppr-km .ppr-km__note { margin-block-start: var(--ppr-km-mobile-section-padding); }
  #ppr-km.ppr-km .ppr-km__faq {
    display: grid;
    gap: var(--ppr-km-mobile-item-gap);
  }
  #ppr-km.ppr-km .ppr-km__faq details { margin: 0; }
  #ppr-km.ppr-km .ppr-km__faq summary {
    padding: var(--ppr-km-mobile-gutter) 3rem var(--ppr-km-mobile-gutter) var(--ppr-km-mobile-gutter);
  }
  #ppr-km.ppr-km .ppr-km__faq summary::after { inset-inline-end: var(--ppr-km-mobile-gutter); }
  #ppr-km.ppr-km .ppr-km__faq details p {
    padding: 0 var(--ppr-km-mobile-gutter) var(--ppr-km-mobile-gutter);
  }
}
/* Only the heading size changes at 420px; spacing stays the same. */
@container ppr-km (max-width: 420px) {
  #ppr-km.ppr-km h1:not(.ppr-km__bitrix *) { font-size: 2rem; }
}
@media screen and (max-width: 420px) {
  #ppr-km.ppr-km h1:not(.ppr-km__bitrix *) { font-size: 2rem; }
}


@media print {
  #ppr-km.ppr-km .ppr-km__section { margin-block-start: 1rem; padding: 1rem 0; }
  #ppr-km.ppr-km .ppr-km__visual-layout { grid-template-columns: minmax(0, 1fr); }
}