/* 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;
}
#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!important;
}
#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); }
}
/* Certificate cards reuse the page gallery. */
#ppr-km.ppr-km .ppr-km__certificate .ppr-km__example-image { display: grid; place-items: center; aspect-ratio: 3 / 4; padding: 1rem; }
#ppr-km.ppr-km .ppr-km__certificate .ppr-km__example-image img { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
#ppr-km.ppr-km .ppr-km__certificate .ppr-km__example-body { border-top: 1px solid var(--ppr-km-line); background: #f9fbf9; }
#ppr-km.ppr-km .ppr-km__certificate h3 { margin: 0; font-size: 1.125rem; }
#ppr-km.ppr-km .ppr-km__button, #ppr-km.ppr-km .ppr-km__button:visited { color: #fff !important; }
/* Final bundle: native-style reviews carousel. */
/* Section backgrounds, headings and spacing come from ODD / KM-KMD styles.
This file styles only review cards and carousel controls. */
:is(#ppr-odd,#ppr-km,body) .ppr-reviews { --reviews-green: #28a745; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews * { box-sizing: border-box; min-width: 0; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .ppr-reviews__carousel:not(.owl-loaded) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap: 1.25rem; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-stage { display: flex; align-items: stretch; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-stage-outer { overflow: hidden; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-item { display: flex; flex: 0 0 auto; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .ppr-reviews__card { display: flex; flex-direction: column; width: 100%; margin: 0; background: #fff; border: 1px solid #dce5de; border-radius: 10px; overflow: hidden; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .ppr-reviews__image { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; padding: 1rem; background: #fff; text-decoration: none; cursor: zoom-in; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .ppr-reviews__image img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; margin: 0; padding: 0; border: 0; border-radius: 0; float: none; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .ppr-reviews__zoom { position: absolute; right: .6rem; bottom: .6rem; padding: .35rem .65rem; background: var(--reviews-green); color: #fff; border-radius: 5px; font-size: .875rem; font-weight: 600; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .ppr-reviews__caption { flex: 1; margin: 0; padding: 1rem; border-top: 1px solid #dce5de; background: #f9fbf9; font: 500 1.125rem/1.4 Oswald,Arial,sans-serif; color: #252525; text-transform: uppercase; text-align: start; float: none; width: auto; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .ppr-reviews__caption::before, :is(#ppr-odd,#ppr-km,body) .ppr-reviews .ppr-reviews__caption::after { content: none; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-nav { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-nav button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; margin: 0; background: #fff; color: var(--reviews-green); border: 1px solid var(--reviews-green); border-radius: 10px; font: 400 2rem/1 Arial,sans-serif; cursor: pointer; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-nav button:hover:not(:disabled) { background: var(--reviews-green); color: #fff; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-nav button:disabled { opacity: .4; cursor: default; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: .25rem; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-dot { width: 44px; height: 44px; padding: 17px; margin: 0; border: 0; background: transparent; cursor: pointer; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-dot span { display: block; width: 10px; height: 10px; background: #9aaba0; border-radius: 50%; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-dot.active span { background: var(--reviews-green); }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-nav.disabled, :is(#ppr-odd,#ppr-km,body) .ppr-reviews .owl-dots.disabled { display: none; }
:is(#ppr-odd,#ppr-km,body) .ppr-reviews :is(a,button):focus-visible { outline: 3px solid #176c2b; outline-offset: -4px; }