/*
Theme Name: Vektorizalas
Theme URI: https://vektorizalas.localhost/
Description: Vektorizalas child theme for WPressOne.
Author: Vektorizalas
Template: wpressone
Version: 1.1.0
Text Domain: vektorizalas
*/

/*
 * Values come from the original site (unfinityplus theme options, theme.css and
 * the ct-heading component). "body .wpo-main" outranks WPressOne's fluid
 * typography selectors such as ".wpb_wrapper h1" without resorting to !important.
 */

:root {
    --vektorizalas-accent: #900dad;
    --vektorizalas-text: #303030;
    --vektorizalas-container: 1140px;
}

body {
    text-align: left;
    color: var(--vektorizalas-text);
    font-family: Barlow, Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
}

.wpo-shell {
    overflow-x: clip;
}

/* ---- Typography ---------------------------------------------------------- */

body .wpo-main a:not(.vc_btn3):not([class*="sliderone"]) {
    color: #000;
}

body .wpo-main a:not(.vc_btn3):not([class*="sliderone"]):is(:hover, :active) {
    color: var(--vektorizalas-accent);
}

body .wpo-main p {
    margin: 0 0 15px;
}

body .wpo-main .wpb_text_column :is(ul, ol) {
    margin: 0 0 15px;
    padding-left: 1.25em;
}

/* Centered items (inline text-align from the editor): keep the marker beside the text, not at the column edge. */
body .wpo-main .wpb_text_column :is(ul, ol):has(> li[style*="center"]) {
    padding-left: 0;
}

body .wpo-main .wpb_text_column li[style*="center"] {
    list-style-position: inside;
}

body .wpo-main :is(h1, h2, h3, h4, h5, h6) {
    clear: both;
    margin: 0 0 15px;
    max-width: none;
    color: #000;
    font-style: normal;
    text-wrap: wrap;
    hyphens: manual;
    word-break: normal;
    overflow-wrap: normal;
}

/* Like the original, desktop headings never split a word mid-way; phones may. */
@media screen and (max-width: 767px) {
    body .wpo-main :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }
}

body .wpo-main :is(h1, h2) { font-family: Montserrat, Arial, sans-serif; font-weight: 700; font-size: 50px; line-height: 60px; }
body .wpo-main h3 { font-family: "Barlow Semi Condensed", Barlow, Arial, sans-serif; font-weight: 600; font-size: 38px; line-height: 45px; }
body .wpo-main h4 { font-family: "Barlow Semi Condensed", Barlow, Arial, sans-serif; font-weight: 500; font-size: 30px; line-height: 40px; }
body .wpo-main h5 { font-family: Montserrat, Arial, sans-serif; font-weight: 700; font-size: 50px; line-height: 50px; }
body .wpo-main h6 { font-family: Roboto, Arial, sans-serif; font-weight: 700; font-size: 18px; line-height: 22px; color: #ef82a2; }

@media screen and (max-width: 991px) {
    body .wpo-main h1:not([style*="font-size"]) { font-size: 36px; }
    body .wpo-main h2:not([style*="font-size"]) { font-size: 30px; }

    /* The desktop px line-heights (60px on a 30px phone heading) left huge gaps; scale with the font instead. */
    body .wpo-main :is(h1, h2, h5) { line-height: 1.2; }
    body .wpo-main :is(h3, h6) { line-height: 1.25; }
    body .wpo-main h4 { line-height: 1.3; }
}

/* WPressOne shrinks every heading and inline-sized span on narrow containers with !important. */
@media screen and (max-width: 767px) {
    body .wpo-main h1:not([style*="font-size"]) { font-size: 28px !important; }
    body .wpo-main h2:not([style*="font-size"]) { font-size: 24px !important; }
    body .wpo-main h3:not([style*="font-size"]) { font-size: 20px; }
    body .wpo-main h4:not([style*="font-size"]) { font-size: 18px; }
}

@media screen and (max-width: 575px) {
    body .wpo-main h1:not([style*="font-size"]) { font-size: 24px !important; }
    body .wpo-main h2:not([style*="font-size"]) { font-size: 20px !important; }
    body .wpo-main h3:not([style*="font-size"]) { font-size: 18px; }
    body .wpo-main h4:not([style*="font-size"]),
    body .wpo-main h5:not([style*="font-size"]) { font-size: 16px; }
    body .wpo-main h6:not([style*="font-size"]) { font-size: 14px; }
}

body .wpo-main :is([style*="font-size: 15px"], [style*="font-size:15px"]) { font-size: 15px !important; }
body .wpo-main :is([style*="font-size: 16px"], [style*="font-size:16px"]) { font-size: 16px !important; }
body .wpo-main :is([style*="font-size: 18px"], [style*="font-size:18px"]) { font-size: 18px !important; }
body .wpo-main :is([style*="font-size: 24px"], [style*="font-size:24px"]) { font-size: 24px !important; }
body .wpo-main :is([style*="font-size: 18pt"], [style*="font-size:18pt"]) { font-size: 18pt !important; }
body .wpo-main :is([style*="font-size: 24pt"], [style*="font-size:24pt"]) { font-size: 24pt !important; }
body .wpo-main :is([style*="font-size: 30pt"], [style*="font-size:30pt"]) { font-size: 30pt !important; }
body .wpo-main :is([style*="font-size: 36pt"], [style*="font-size:36pt"]) { font-size: 36pt !important; }

/*
 * Inline editor sizes are desktop sizes. On phones scale every one of them (tagged in
 * inc/legacy-text.php) to about half plus a little viewport width, never above the
 * desktop size and never below 16px: 18pt -> ~18px, 24pt -> ~22px, 36pt -> ~30px at 375px.
 */
@media screen and (max-width: 767px) {
    /* Default body text (22px on desktop) uses the same phone size as scaled 18pt text. */
    body { --vektorizalas-body-fs: max(16px, calc(12px + 1.5vw)); font-size: var(--vektorizalas-body-fs); }
    body .wpo-main div.contact-one-form-wrapper { --contact-one-body-font-size: var(--vektorizalas-body-fs) !important; }
    body .wpo-main .wpo-accordionone [style*="font-size"] { font-size: var(--vektorizalas-body-fs) !important; }
    body .wpo-main .vektorizalas-fs { font-size: min(var(--vektorizalas-fs), max(16px, calc(var(--vektorizalas-fs) * 0.5 + 1.5vw))) !important; }
}

/* The 36pt e-mail address overflowed its half column on tablets; phones use the scaling above. */
@media screen and (min-width: 768px) and (max-width: 991px) {
    body .wpo-main :is([style*="font-size: 36pt"], [style*="font-size:36pt"]):has(> a[href^="mailto:"]) { font-size: min(36pt, calc((50vw - 60px) / 7.5)) !important; }
}

/*
 * On tablets the one-third columns are ~240px wide, too narrow for "VEKTORIZÁLÁS" (hero)
 * or "AUTOMATIZÁLTAN" (comparison) at full heading size; scale those headings to the column.
 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    body .wpo-main .vc_col-sm-4 {
        container-type: inline-size;
    }

    /* :not(#…) outranks the per-heading "#ct-heading-… .ct-heading-tag" breakpoint sizes from inc/heading.php. */
    body .wpo-main .vc_col-sm-4 :is(h1, h2):not(#vektorizalas-column-heading) { font-size: min(36px, 10.5cqw) !important; line-height: 1.2 !important; }
    body .wpo-main .vc_col-sm-4 h3 { font-size: min(38px, 12.5cqw) !important; line-height: 1.2 !important; }
}

/* Before/after rows (compare slider + text, twice) are four quarter columns; on tablets
   ~190px text columns split words, so show them as two image+text pairs per line. */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    body .wpo-main .vc_row:has(> .vc_col-sm-3 .wpo-compareone-component) > .vc_col-sm-3 {
        width: 50%;
    }
}

.vektorizalas-nowrap {
    white-space: nowrap;
}

/* ---- Headings (ct-heading markup rendered by inc/heading.php) ------------ */

.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
@media screen and (max-width: 1199px) {
    .align-center-md { text-align: center; }
    .align-left-md { text-align: left; }
    .align-right-md { text-align: right; }
}
@media screen and (max-width: 991px) {
    .align-center-sm { text-align: center; }
    .align-left-sm { text-align: left; }
    .align-right-sm { text-align: right; }
}
@media screen and (max-width: 767px) {
    .align-center-xs { text-align: center; }
    .align-left-xs { text-align: left; }
    .align-right-xs { text-align: right; }
}

body .wpo-main .ct-heading {
    margin-bottom: 0;
}

body .wpo-main .ct-heading .ct-heading-tag {
    margin-bottom: 26px;
}

.ct-heading .ct-heading-tag.divider1 {
    position: relative;
    padding-bottom: 12px;
}

.ct-heading .ct-heading-tag.divider1:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 31px;
    height: 5px;
    border-radius: 2px;
    background-color: var(--vektorizalas-accent);
}

.ct-heading .ct-heading-tag.divider_img {
    position: relative;
    padding-bottom: 24px;
}

.ct-heading .ct-heading-tag.divider_img:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 9px;
    background-repeat: no-repeat;
    background-size: contain;
}

.ct-heading.align-center .ct-heading-tag:is(.divider1, .divider_img):before {
    right: 0;
    margin: auto;
}

.ct-heading.align-right .ct-heading-tag:is(.divider1, .divider_img):before {
    left: auto;
    right: 0;
}

.ct-heading .ct-heading-desc {
    line-height: 1.714;
}

@media screen and (max-width: 767px) {
    body .wpo-main .ct-heading .ct-heading-tag { margin-bottom: 16px; }
    .ct-heading .ct-heading-desc { line-height: 1.4; }
}

/* ---- Content layout ------------------------------------------------------ */

/* WPBakery rows carry -15px side margins; the 15px inset keeps them inside the viewport. */
.wpo-content:not(.wpo-container),
.vektorizalas-reference-page {
    padding: 0 15px !important;
}

.vektorizalas-reference-page > .wpb-content-wrapper {
    width: 100%;
}

/*
 * WPressOne zeroes ".vc_column-inner" padding with !important. Restore WPBakery's
 * native gutters; :where() keeps specificity at (0,1,0) so the per-element
 * vc_custom_* design options printed later in <head> still take precedence.
 */
:where(.wpo-main .vc_column_container) > .vc_column-inner {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

:where(.wpo-main .vc_col-has-fill,
    .wpo-main .vc_row-has-fill > .vc_column_container,
    .wpo-main .vc_row-has-fill + .vc_row > .vc_column_container,
    .wpo-main .vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container) > .vc_column-inner {
    padding-top: 35px !important;
}

:where(.wpo-main .vc_column-gap-1) > .vc_column_container { padding: 0.5px !important; }
:where(.wpo-main .vc_column-gap-2) > .vc_column_container { padding: 1px !important; }
:where(.wpo-main .vc_column-gap-3) > .vc_column_container { padding: 1.5px !important; }
:where(.wpo-main .vc_column-gap-4) > .vc_column_container { padding: 2px !important; }
:where(.wpo-main .vc_column-gap-5) > .vc_column_container { padding: 2.5px !important; }
:where(.wpo-main .vc_column-gap-10) > .vc_column_container { padding: 5px !important; }
:where(.wpo-main .vc_column-gap-15) > .vc_column_container { padding: 7.5px !important; }
:where(.wpo-main .vc_column-gap-20) > .vc_column_container { padding: 10px !important; }
:where(.wpo-main .vc_column-gap-25) > .vc_column_container { padding: 12.5px !important; }
:where(.wpo-main .vc_column-gap-30) > .vc_column_container { padding: 15px !important; }
:where(.wpo-main .vc_column-gap-35) > .vc_column_container { padding: 17.5px !important; }

:where(.wpo-main .vc_row-no-padding) .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.wpo-shell,
.wpo-content,
.wpo-content .vc_row,
.wpo-content .wpb_wrapper {
    min-width: 0;
}

/* Desktop columns keep flex min-width:auto like the original theme, so a long
   heading word (e.g. VEKTORIZÁLÁS) widens its column instead of breaking. */
@media (max-width: 767px) {
    .wpo-content .vc_column_container,
    .wpo-content .vc_column-inner {
        min-width: 0;
    }
}

.wpo-content img,
.wpo-content video,
.wpo-content iframe {
    max-width: 100%;
}

.wpo-content img,
.wpo-content video {
    height: auto;
}

.vektorizalas-reference-page--kapcsolat .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper {
    padding-inline: 15px;
}

/* The standalone contact page holds only the form; keep it at content width. */
.vektorizalas-reference-page--kapcsolat > .wpb-content-wrapper {
    max-width: var(--vektorizalas-container);
    margin-inline: auto;
    padding-block: 40px 60px;
}

/* ---- Contact form (original: flat fields, Poppins inputs, black buttons) -- */

/* The plugin writes its design settings inline as custom properties. */
body .wpo-main .contact-one-form-wrapper {
    --contact-one-font-family: Barlow, Arial, sans-serif !important;
    --contact-one-body-font-size: 22px !important;
    --contact-one-label-font-weight: 700 !important;
    --contact-one-panel-bg: transparent !important;
    --contact-one-field-bg: #fff !important;
    --contact-one-text: #303030 !important;
    --contact-one-muted: #6a6a6a !important;
    --contact-one-accent: #900dad !important;
    --contact-one-accent-strong: #900dad !important;
    --contact-one-border: #ddd !important;
    --contact-one-button-bg: #000 !important;
    --contact-one-button-hover: #900dad !important;
    --contact-one-dropzone-bg: #fff !important;
    --contact-one-panel-radius: 0 !important;
    --contact-one-field-radius: 4px !important;
    --contact-one-button-radius: 0 !important;
    --contact-one-panel-padding: 0 !important;
    --contact-one-shadow: none !important;
    border: 0;
    line-height: 30px;
}

body .wpo-main .contact-one-form-wrapper .contact-one-form .form-group {
    margin-bottom: 15px;
}

body .wpo-main .contact-one-form-wrapper .contact-one-form label {
    margin-bottom: 5px;
}

body .wpo-main .contact-one-form-wrapper .contact-one-form .required {
    color: #ff0000;
}

body .wpo-main .contact-one-form-wrapper .contact-one-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea, .widefat) {
    padding: 8px 12px;
    color: #333;
    font-family: Poppins, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    box-shadow: none;
}

body .wpo-main .contact-one-form-wrapper .contact-one-form textarea {
    height: 195px;
    min-height: 0;
}

body .wpo-main .contact-one-form-wrapper :is(.contact-one-form button[type="submit"], .contact-one-captcha-refresh) {
    min-height: 44px;
    padding: 5px 20px;
    font-family: Poppins, Arial, sans-serif;
    font-size: 16px;
    line-height: 32px;
    text-transform: capitalize;
}

body .wpo-main .contact-one-form-wrapper .contact-one-captcha-refresh {
    min-height: 48px;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 28px;
}

body .wpo-main .contact-one-form-wrapper .contact-one-dropzone {
    border: 2px dashed #ccc;
    color: #6a6a6a;
}

.vektorizalas-masonry-gallery,
.vektorizalas-masonry-gallery .container-fluid,
.vektorizalas-masonry-gallery .masonry-gallery-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.vektorizalas-masonry-gallery img {
    max-width: 100%;
    height: auto;
}

/*
 * Hero slides are 1.96:1 before/after pairs. Keep the original 520px height where
 * the slider is wide enough, and follow the image ratio below that so narrower
 * sliders do not crop the pair into two half logos.
 */
body.home #section-home .wpo-sliderone-component,
.vektorizalas-reference-page .wpo-sliderone-component {
    container-type: inline-size;
}

body.home #section-home .wpo-sliderone-component .sliderone-slider,
.vektorizalas-reference-page .wpo-sliderone-component .sliderone-slider {
    height: min(520px, calc(100cqw / 1.96)) !important;
}

body.home #section-home .wpo-sliderone-component .sliderone-item img,
.vektorizalas-reference-page .wpo-sliderone-component .sliderone-item img {
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
}

@media (min-width: 768px) {
    body.home #section-home .wpo-sliderone-component .sliderone-slider,
    .vektorizalas-reference-page .wpo-sliderone-component .sliderone-slider {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 767px) {
    body.home #section-home .wpo-sliderone-component .sliderone-slider,
    .vektorizalas-reference-page .wpo-sliderone-component .sliderone-slider {
        width: calc(100% + 30px) !important;
        height: calc((100cqw + 30px) / 1.96) !important;
        margin-left: -15px !important;
    }

    .vektorizalas-reference-page--kapcsolat .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper {
        padding-inline: 0;
    }
}

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

.wpo-header {
    position: relative;
    top: auto;
    display: block;
    min-height: 110px;
    padding: 0;
    background: #fff;
    border: 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    backdrop-filter: none;
}

.wpo-header .vektorizalas-header-row {
    display: flex;
    align-items: center;
    min-height: 110px;
    margin: 0;
    padding: 0 15px;
}

.vektorizalas-header-row > .vc_column_container:first-child {
    flex: 0 0 auto;
    width: auto;
    margin-right: 30px;
}

.vektorizalas-header-row > .vc_column_container:last-child {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.vektorizalas-brand,
.vektorizalas-brand .vc_figure,
.vektorizalas-brand .vc_single_image-wrapper {
    margin: 0;
}

.vektorizalas-brand img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 70px;
}

.wpo-header .vektorizalas-main-menu {
    display: flex;
    justify-content: flex-end;
}

.wpo-header .vektorizalas-main-menu .wpo-menu-spacing-shell {
    margin-left: auto !important;
}

/*
 * The original 30px menu ran off-screen below ~1500px. The five items need about
 * 35x their font size; derive the size from the space left beside the 358px logo.
 */
.wpo-header nav.vektorizalas-main-menu {
    --wpo-menu-font-size: clamp(16px, calc((100vw - 358px) / 36), 30px) !important;
    --menu-item-spacing: clamp(10px, calc((100vw - 358px) / 36), 30px) !important;
}

.wpo-header nav.vektorizalas-main-menu a {
    line-height: 110px;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .wpo-header,
    .wpo-header .vektorizalas-header-row {
        min-height: 95px;
    }

    .vektorizalas-header-row > .vc_column_container:first-child {
        flex-shrink: 1;
        min-width: 0;
        margin-right: 15px;
    }

    .vektorizalas-brand img {
        max-height: 65px;
    }

    .wpo-header nav.vektorizalas-main-menu a {
        line-height: 1.4;
    }

    /* Line up the hamburger bars with the 15px edge, as on the original. */
    .wpo-header .vektorizalas-main-menu .wpo-menu-hamburger {
        margin-right: -12px;
    }
}

/*
 * The open mobile menu is absolute with left/right 0 against its nearest positioned
 * ancestor, which here is the hamburger-wide menu column. Drop those ancestors to
 * static while collapsed so the panel spans the full header, directly below it.
 */
.wpo-header .vc_column_container:has(.wpo-menu-container.is-mobile > nav.vektorizalas-main-menu),
.wpo-header .wpo-menu-wrapper:has(.wpo-menu-container.is-mobile > nav.vektorizalas-main-menu),
.wpo-header .wpo-menu-container.is-mobile:has(> nav.vektorizalas-main-menu) {
    position: static;
}

.wpo-header nav.vektorizalas-main-menu.mobile-menu-open {
    background: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.wpo-header nav.vektorizalas-main-menu.mobile-menu-open > ul > li > a {
    padding: 14px 15px;
    font-size: 18px !important;
    line-height: 1.3;
    text-align: left;
}

/* ---- Footer (top bar #494949, bottom bar #000) --------------------------- */

.wpo-footer {
    margin-top: 0;
    padding: 0;
    color: #c5d0dd;
    font-size: 15px;
    line-height: 30px;
}

.wpo-footer .wpo-footer__content {
    padding: 0;
}

.wpo-footer .vektorizalas-footer-row,
.wpo-footer .vektorizalas-footer-credit {
    margin: 0;
    padding: 100px max(15px, calc((100% - var(--vektorizalas-container)) / 2)) 131px;
    --wpo-footer-bg: #494949;
}

.wpo-footer .vektorizalas-footer-credit {
    padding-block: 15px;
    color: #fff;
    --wpo-footer-bg: #000;
}

.wpo-footer .vektorizalas-footer-row > .vc_column_container {
    width: min(100%, 360px);
}

.wpo-footer .wpo-footer-content {
    color: inherit;
    font: inherit;
    background: transparent;
}

.wpo-footer .vektorizalas-footer-row .wpo-footer-content p {
    margin: 0 0 15px;
    line-height: 25.5px;
}

.wpo-footer .vektorizalas-footer-credit .wpo-footer-content p {
    margin: 0 0 15px;
}

.wpo-footer .vektorizalas-footer-row a {
    color: #e5e5e5;
}

.wpo-footer .vektorizalas-footer-row a:hover {
    color: #be97c4;
}

/* Phone and e-mail side by side at 1.4x the body text size (22px, the scaled
   body size on phones); the column widens past the 360px logo for them. */
.wpo-footer .vektorizalas-footer-row > .vc_column_container:has(.vektorizalas-footer-contact) {
    width: 100%;
}

.wpo-footer .vektorizalas-footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em 1em;
    font-size: calc(22px * 1.4);
    line-height: 1.2;
}

@media screen and (max-width: 767px) {
    .wpo-footer .vektorizalas-footer-contact { font-size: calc(var(--vektorizalas-body-fs) * 1.4); }
}

.wpo-footer .vektorizalas-footer-row .vektorizalas-footer-logo {
    margin: 0 0 41px;
}

.vektorizalas-footer-logo img {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .wpo-footer .vektorizalas-footer-row {
        padding-bottom: 96px;
    }

    .wpo-footer .vektorizalas-footer-credit .wpo-footer-content {
        justify-content: center;
        text-align: center;
    }
}

/*
 * Phones: the desktop section spacing (row/column padding, 35-120px element padding,
 * inline heading margins, spacers, stacked &nbsp; paragraphs) left 60-190px gaps.
 * Keep every vertical gap to about one text line (30px); desktop is untouched.
 */
@media (max-width: 767px) {
    body .wpo-main .vc_row:not(.vc_inner) { padding-top: 15px !important; padding-bottom: 15px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
    body .wpo-main .vc_row.vc_inner { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; }
    body .wpo-main .vc_column_container,
    body .wpo-main .vc_column_container > .vc_column-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
    /* Empty side columns (vc_col-sm-2 spacers, or ones holding only empty inner rows) must not count as a previous column. */
    body .wpo-main .vc_column_container:has(> .vc_column-inner > .wpb_wrapper > :not(.vc_inner), > .vc_column-inner > .wpb_wrapper > .vc_inner .wpb_wrapper > *) ~ .vc_column_container > .vc_column-inner:has(> .wpb_wrapper > *) { padding-top: 20px !important; }

    /* WPO wraps each WPBakery element in .wpo-wrapper; the inner element's 35px margin leaks through it. */
    body .wpo-main .vc_column-inner > .wpb_wrapper > * { margin-top: 0 !important; margin-bottom: 20px !important; }
    body .wpo-main .vc_column-inner > .wpb_wrapper > :not(:has(~ :not(style, script, link))) { margin-bottom: 0 !important; }
    body .wpo-main .vc_column-inner > .wpb_wrapper > .wpo-wrapper > * { margin-top: 0 !important; margin-bottom: 0 !important; }
    body .wpo-main .compareone-container { margin-top: 0 !important; vertical-align: top; }
    body .wpo-main :is(.wpb_content_element, .vc_separator)[class*="vc_custom_"] { padding-top: 0 !important; padding-bottom: 0 !important; }
    body .wpo-main .vc_separator { padding-top: 0 !important; padding-bottom: 0 !important; }
    body .wpo-main .vc_empty_space { height: 0 !important; margin: 0 !important; }
    body .wpo-main .ct-heading-tag { margin-top: 0 !important; }

    /* The last real paragraph, even when blank lines follow it. */
    body .wpo-main .wpb_text_column .wpb_wrapper > :not(.vektorizalas-blank-line, .vektorizalas-empty-block):not(:has(~ :not(.vektorizalas-blank-line, .vektorizalas-empty-block, style, script, link, br))) { margin-bottom: 0 !important; }
    body .wpo-main .wpb_text_column :is(h1, h2, h3, h4, h5, h6) { margin-top: 0 !important; }
    body .wpo-main .vektorizalas-blank-line { height: 15px; margin: 0 !important; font-size: 0; line-height: 0; overflow: hidden; }
    /* Only one blank line between paragraphs, none before the first or after the last. */
    body .wpo-main .vektorizalas-blank-line + .vektorizalas-blank-line,
    body .wpo-main .wpb_wrapper > .vektorizalas-blank-line:not(:not(.vektorizalas-blank-line) ~ *),
    body .wpo-main .wpb_wrapper > .vektorizalas-blank-line:not(:has(~ :not(.vektorizalas-blank-line, .vektorizalas-empty-block))),
    body .wpo-main .vektorizalas-empty-block { display: none; }

    /* Images, comparisons and gap rows use the full content width (15px page edges): drop the desktop side padding. */
    body .wpo-main .vc_row[class*="vc_column-gap-"] { margin-left: -15px !important; margin-right: -15px !important; padding-left: 0 !important; padding-right: 0 !important; }
    body .wpo-main .vc_row[class*="vc_column-gap-"] > .vc_column_container { padding-left: 0 !important; padding-right: 0 !important; }
    body .wpo-main .vc_row[class*="vc_column-gap-"] > .vc_column_container > .vc_column-inner,
    body .wpo-main .vc_column_container > .vc_column-inner:has(.wpb_single_image, .compareone-container) { padding-left: 15px !important; padding-right: 15px !important; }
    body .wpo-main .wpb_content_element:has(img, .compareone-container) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
    body .wpo-main .wpb_single_image img { max-width: 100% !important; height: auto !important; }
}