/* 
Theme Name: Base Theme Child
Template: base
*/
:root {
    --popup-padding: 4.8rem;

}
body {
    border: none;
    font-size: 2rem;

    --swiper-theme-color: var(--primary-color) !important;
    --swiper-navigation-size: 3rem ;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: -8rem;

    --swiper-pagination-bullet-size: .8rem;
    --swiper-pagination-bullet-width: .8rem;
    --swiper-pagination-bullet-height: .8rem;
    --swiper-pagination-bullet-border-radius: .4rem;
    --swiper-pagination-bullet-horizontal-gap: .5rem;
    --swiper-pagination-bullet-active-width: 2.4rem;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-inactive-color: var(--dark-grey);

    & .swiper-pagination-bullet {
        transition: var(--transition-fast);
    }

    &::before {
        content: '';
        transition: opacity ease-in-out 3s;
        opacity: 0;
    }
}
.content,
.content ol li,
.content ul li,
.content ol>li::marker,
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week],
textarea,
select,
.select,
select option,
.wpcf7-checkbox input[type="checkbox"] + .wpcf7-list-item-label,
.wpcf7-radio input[type="radio"] + .wpcf7-list-item-label,
.site-menu ul a,
.mob-menu ul li .sub-menu li a,
.item .icon {
    font-size: var(--font-size);
}
.wpcf7-not-valid-tip {
    font-size: var(--font-size-smaller);
}
label,
.button.small {
    font-size: var(--font-size-small);
}

input[type="submit"],
.button, a.button,
.wp-element-button,
.mob-menu .site-menu ul a {
    font-size: var(--font-size-medium);
}

h1 {
    font-size: calc( var(--font-size)*3.5); /* 7rem */
}
h2 {
    font-size: calc( var(--font-size)*2); /* 4rem */
}
h3 {
    font-size: calc( var(--font-size-small)*2); /* 2.4rem */
}
h4 {
    font-size: calc( var(--font-size-smaller)*2);
}
h5 {
    font-size: var(--font-size);
}
h5 {
    font-size: var(--font-size-small);
}

section > h2 {
    margin-bottom: var(--spacing-medium) !important;
}

body.font-normal {   
    font-size: 2rem;

    & .fz-buttons {
        & .font-size-normal {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
    }
}

body.font-medium {
    font-size: 2.2rem;

    & .fz-buttons {
        & .font-size-medium {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
    }
}

body.font-large {
    font-size: 2.4rem;

    & .fz-buttons {
        & .font-size-large {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
    }
}

:root :where(.wp-block-button .wp-block-button__link),
.wp-element-button,
.button,
a.button {
    --primary-color: #719D03;
    --button-color: var(--primary-color);
    --button-border: .2rem solid var(--button-color);
    --button-background_hover: var(--button-color);

    min-width: 23.7rem;
    line-height: var(--line-height-small);
    padding: var(--button-padding) !important;
    border: var(--button-border) !important;

    &:hover {
        border: var(--button-border_hover) !important;
    }
    
    &::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 5.6rem;
        height: 100%;
        mask: url('images/arrow_right.svg') no-repeat center center / 1.1rem;
        background-color: var(--primary-color);
    }
    &.link::after,
    .link & {
        &::after {
            mask: url('images/ico_link.svg') no-repeat center center / 2.4rem;
        }
    }
    &.download,
    .download & {
        &::after {
            mask: url('images/ico_download.svg') no-repeat center center / 2.4rem;
        }
    }
    &.form,
    .form & {
        &::after {
            mask: url('images/ico_form.svg') no-repeat center center / 2.4rem;
        }
    }
    &.plus,
    .plus & {
        &::after {
            mask: url('images/ico_plus.svg') no-repeat center center / 2.4rem;
        }
    }
    &.minus,
    .minus & {
        &::after {
            mask: url('images/ico_minus.svg') no-repeat center center / 2.4rem;
        }
    }
    &.load-more::after {
        mask: url('images/ico_loadmore.svg') no-repeat center center / 2.2rem;
    }
    
    &::before {
        content: '';
        display: block;
        position: absolute;
        right: 5.6rem;
        top: 0;
        bottom: 0;
        width: .2rem;
        border-left: var(--button-border);
        height: 100%;
    }
    &:hover {
        color: var(--white) !important;
        &::after {
            background-color: var(--white);
        }
        &::before {
            border-left: var(--button-border_hover);
        }
    }
}

.social {
    & .fab {
        width: var(--font-size);
        height: var(--font-size);
        background-color: var(--main-color);

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

        &.fa-facebook-f {
            mask: url('images/ico_fb.svg') no-repeat center center / 100%;
        }
        &.fa-instagram {
            mask: url('images/ico_insta.svg') no-repeat center center / 100%;
        }
        &.fa-youtube {
            mask: url('images/ico_yt.svg') no-repeat center center / 100%;
        }
    }
}

.site-header {
    & .main-row {
        padding-bottom: 0;
        height: 100%;

        & .wrapper {
            display: grid;
            grid-template-columns: var(--logo-width) 1fr;
            gap: 1.5rem;

            & .header-column {
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
                gap: 5rem;

                &.site-menu {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    gap: 2rem;
                    height: 9rem;
                }
            }
        }
    }

    .block-content:has(.lang-switcher) {
        position: relative;
        min-width: calc(var(--font-size) * 4.5);
        min-height: calc(var(--font-size) * 1.5);
        z-index: 3;
    }
}

.lang-switcher {
    --fz-rel-5: calc(var(--font-size) / 4);
    position: absolute;
    width: fit-content;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-smaller);
    margin: calc(var(--fz-rel-5) * -1);
    transition: var(--transition-fast);

    & li {
        font-size: var(--font-size-small);
        display: none;
        order: 2;

        & a {
            display: flex;
            align-items: center;

            &::before {
                content: '';
                display: block;
                width: 2.4rem;
                height: 2.4rem;
                background: url('images/flag_UK.svg') no-repeat center center / 100%;
                margin-right: 1.6rem;
            }
        }

        &.en a::before {
            background: url('images/flag_EN.png') no-repeat center center / 100%;
        }

        &.active {
            display: flex;
            order: 1;

            & a::after {
                content: '';
                display: block;
                width: 1.8rem;
                height: 1rem;
                mask: url('images/arrow_down.svg') no-repeat center center / 100%;
                background-color: var(--main-color);
                margin-left: 1rem;
                margin-top: -.2rem;
                transition: var(--transition-fast);
            }
        }
    }

    &:hover {
        box-shadow: var(--box-shadow);
        background-color: var(--white);

        & li {
            display: flex;
        }

        & a::after {
            rotate: 180deg;
        }
    }
}

.lang-switcher-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--white);
    padding: 1.6rem;
    box-shadow: var(--box-shadow);
    z-index: 2;
    transition: var(--transition-fast);

}

.font-size-switcher {
    position: relative;
    width: 4.8rem;
    height: 3.1rem;
    mask: url('images/ico_eye.svg') no-repeat center center / 100%;
    background-color: var(--main-color);
    cursor: pointer;

    &:hover {
        background-color: var(--primary-color);
    }
}
.block-content:has(.font-size-switcher-popup.shown) .font-size-switcher {
    background-color: var(--primary-color);
}
.font-size-switcher-popup {
    --popup-padding: 2rem;
    display: none;
    flex-direction: column;
    gap: 2.4rem;
    position: absolute;
    top: 4.4rem;
    right: 0;
    background-color: var(--white);
    padding: var(--popup-padding);
    box-shadow: var(--box-shadow);
    z-index: 2;
    transition: var(--transition-fast);

    & h5 {
        color: var(--primary-color);
        font-size: 1.6rem;
        line-height: var(--popup-padding);
        font-weight: 700;
    }

    & .fz-buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.2rem;

        & span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 4rem;
            height: 4rem;
            border: .1rem solid var(--main-color);
            cursor: pointer;

            &:hover,
            &.active {
                color: var(--primary-color);
                border-color: var(--primary-color);    
            }
        }
        & .font-size-normal {
            font-size: 1.6rem
        }
        & .font-size-medium {
            font-size: 1.8rem
        }
        & .font-size-large {
            font-size: 2rem;
            font-weight: 600;
        }
    }

    & .regular-version {
        font-size: 1.4rem;
        text-transform: uppercase;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 1.2rem;
        cursor: pointer;

        &::before {
            content: '';
            display: block;
            width: 2.4rem;
            height: 2.4rem;
            mask: url('images/ico_eye.svg') no-repeat center center / 100%;
            background-color: var(--main-color);
        }
    }

    &.shown {
        display: flex;
    }
}

.searchform {
    position: relative;
    display: flex;
    border-bottom: .1rem solid var(--main-color);
    min-width: 56rem;

    & input {
        border: none;
        background-color: transparent;
        line-height: 3.2rem;
        padding: 0 1rem;
        font-size: var(--font-size-small);
        font-family: var(--font-secondary);

        &::placeholder {
            font-weight: 300;
        }
    }
    & button {
        border: none;
        background-color: transparent;
        font-size: 0;
        padding: 0;
        min-width: 0;
        cursor: pointer;
        width: 3.2rem;
        height: 3.2rem;
        mask: url('images/ico_search.svg') no-repeat center center / 1.7rem;
        background-color: var(--main-color);

        &:hover {
            background-color: var(--primary-color);
        }
        &::after,
        &::before {
            content: none;
        }
    }

    & .search-autocomplete {
        position: absolute;
        top: 3.2rem;
        left: 0;
        background: var(--white);
        box-shadow: var(--box-shadow);
        max-height: 20rem;
        overflow-y: auto;
        width: 100%;
        z-index: 1000;

        & ul {
            gap: 0;
        }

        & li {
            border-bottom: .1rem solid var(--light-grey);
            text-transform: uppercase;
        }
        & a {
            display: block;
            padding: .5rem 1rem;
            color: var(--main-color);
            text-decoration: none;
            font-size: var(--font-size-small);

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

.site-menu {
    height: 100%;

    & > div {
        height: 100%;
    }

    .font-large & {
        transform: scale(.95);
        transform-origin: right;
    }

    .current-menu-item a {
        font-weight: 500 !important;
    }

    & > div > ul {
        height: 100%;

        & a {
            text-transform: uppercase;

        }

        & li.menu-item-has-children {
            &::before {
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: transparent;
                z-index: 1;
                transition: 1s ease-in-out .2s;
            }
            & > a {
                white-space: nowrap;
                position: relative;
                z-index: 2;

                &::after {
                    content: '';
                    display: block;
                    width: 1.8rem;
                    height: 1rem;
                    mask: url('images/arrow_down.svg') no-repeat center center / 100%;
                    background-color: var(--primary-color);
                    margin-left: 1.2rem;
                    margin-top: -.2rem;
                    transition: var(--transition-fast);
                    -webkit-transform: none;
                    transform: none;
                    rotate: 0deg;
                    border: none;
                }
            }
            
            & .sub-menu {
                min-width: 100%;
                z-index: -1;

                & a {
                    font-size: var(--font-size-small);
                }
            }

            &:hover a::after {
                -webkit-transform: none;
                transform: none;
                rotate: 180deg;
                margin-top: 0;
            }

            &:hover::before {
                background-color: var(--white);
                transition: var(--transition-fast);
            }
        }
    }
}

li.drugs {
    background-color: #F4F3F3;
    padding: 0 2.4rem;
    margin-right: 1.8rem;
    border: .1rem solid #000;

    &::before {
        background-color: #F4F3F3 !important;
    }
    
    & > a,
    & > a:hover {
        color: var(--main-color);
        padding: 0;

        &::before {
            content: '';
            display: block;
            width: 2.6rem;
            height: 2.6rem;
            mask: url('images/ico_drugs.svg') no-repeat center center / 100%;
            background-color: var(--main-color);
            margin-right: 2.4rem;
        }

        &::after {
            background-color: var(--main-color) !important;
        }
    }

    &:hover {

        &::before {
            background-color: var(--primary-color) !important;
        }

        & > a {
            color: var(--white);

            &::before {
                background-color: var(--white);
            }

            &::after {
                background-color: var(--white) !important;
            }
        }
    }
}

li.help {
    border: .1rem solid #000;
    max-width: 24rem;

    & a {
        display: flex;
        align-items: center;
        gap: 2.4rem;
        padding: 0 2.4rem;
        color: #000;
        align-self: stretch;

        &::before {
            content: '';
            display: block;
            width: 2.6rem;
            height: 2.6rem;
            mask: url('images/ico_help.svg') no-repeat center center / 100%;
            background-color: #000;
            flex-shrink: 0;
        }

        &:hover,
        .current_page_item & {
            background-color: transparent;
            background-color: var(--primary-color);
            color: var(--white);

            &::before {
                background-color: var(--white);
            }
        }
    }
    &.current-menu-item a {
        color: var(--white) !important;
        background-color: var(--primary-color) !important;
    }
}

.popup-win.mob-menu {
    top: var(--mobile-header-height);
    transform: translateY(100%);

    & .wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .menu-main-opened & {
        transform: none;
    }
}

.burger::before, 
.burger::after,
.burger span {
    transition: var(--transition-fast);
}
.mob-menu {
    background-color: none;

    & ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.6rem;
        letter-spacing: .04em;
        li {
            & a {
                text-transform: uppercase;
                font-size: var(--font-size-medium);
                font-family: var(--font-secondary);

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

            &.current-menu-item {
                & a {
                    font-weight: 600;
                }
                & li a {
                    font-weight: normal;
                }
            }

            &.menu-item-has-children a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1.6rem;
                padding-bottom: 0;
                
                & .toogle-sub-menu {
                    width: 1.8rem;
                    height: 1.8rem;

                    &::after {
                        content: '';
                        display: block;
                        height: 100%;
                        mask: url('images/arrow_down.svg') no-repeat center center / 100%;
                        background-color: var(--main-color);
                        transition: var(--transition-fast);
                        rotate: 0deg;
                    }

                    .shown & {
                        rotate: 180deg;
                        margin-top: 0;
                    }
                }
            }

            & .sub-menu {
                width: 100%;
                padding: 0;
                margin: 0;
                padding: 0 var(--spacing-small);
                box-shadow: none;
                z-index: 2;
                transition: var(--transition-fast);
                border-bottom: none;

                & li {
                    padding: 1.2rem 1.6rem;
                    font-size: var(--font-size);
                    padding: 0;

                    & a {
                        color: var(--main-color);
                        padding: 0;
                    }

                    &:last-of-type {
                        margin-bottom: var(--spacing-small);
                    }
                }

                .shown & {
                    margin: var(--spacing-small)  0 0;
                    border-bottom: .1rem solid var(--grey);
                }
            }
        }
    }

    & .menu-id-10,
    & .menu-id-15 {
        width: 100%;
    }
    & .menu-id-13,
    & .menu-id-14 {
        display: none;
    }
    & .mob-search-block {
        width: 100%;
    }
    & .searchform {
        min-width: 0;

        & input {
            font-size: var(--font-size);
        }
    }
    
}

.close {
    width: 2.4rem;
    height: 2.4rem;
    mask: url('images/ico_close.svg') no-repeat center center / 100%;
    background-color: var(--main-color);
    top: var(--popup-padding);
    right: var(--popup-padding);

    &::before,
    &::after {
        content: none;
    }

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

.site-footer {
    padding: 10rem 0;
    background-color: var(--light-grey);

    .main-section {
        .wrapper {
            padding: 0;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 4.5rem;

            & .footer-column {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
    
            & .disclaimer {
                text-transform: uppercase;
                font-size: var(--font-size-small);
                font-weight: 500;
                letter-spacing: .04em;
            }
    
            & .copyright {
                font-weight: 500;
                color: var(--dark-grey);
                letter-spacing: .04em;
            }
        }
    }
} 

h2,
.h2 {
    padding-left: 3rem;
    position: relative;

    &::before {
        content: '';
        display: block;
        position: absolute;
        top: .2em;
        left: 0;
        bottom: .2em;
        width: .4rem;
        background-color: var(--primary-color);
    }

    & span {
        color: var(--primary-color);
    }
}

.button-arrow {
    width: var(--spacing-medium);
    height: var(--spacing-medium);
    border: .2rem solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 0;
    top: 0;
    transition: var(--transition-fast);
    flex-shrink: 0;

    &::before {
        content: '';
        display: block;
        width: 1.7rem;
        height: 1.7rem;
        mask: url('images/arrow_right.svg') no-repeat center center / contain;
        background-color: var(--primary-color);

    }
}

.wp-element-button.disabled,
.button.disabled,
button:disabled {
    border: .2rem solid var(--grey) !important;
    cursor: not-allowed;
    &::before {
        border-color: var(--grey);
    }
    &:not(.wpcf7-submit)::after {
        content: '✕';
        color: var(--grey);
        background-color: transparent;
        mask: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.button.filter {
    --button-padding: 1rem 2.4rem;
    min-width: 20rem;

    &::after,
    &::before {
        content: none;
    }

    &.all {
        min-width: 0;
    }

    &.active {
        background-color: var(--primary-color);
        color: var(--white);
    }
}

.content-wrapper {
    --content-width: 111.2rem;

    & h2 {
        padding-left: 0;
        margin-bottom: 3.2rem;

        &::before {
            display: none;
        }
    }

    & .meta {
        padding: 2.4rem 0 1.6rem;
    }
}
.meta {
    font-size: var(--font-size-small);
    color: var(--dark-grey);

    & span {
        color: var(--main-color);
    }
}

.item {
    transition: var(--transition-base);

    & .content {
        transition: var(--transition-fast);
        gap: 1rem;

        & h4 {
            font-size: var(--font-size-medium);
            letter-spacing: .04em;
            font-weight: 500;
            text-transform: uppercase;
            margin: 0;

            & a {
                color: var(--main-color);
            }
        }
    }

    &:has(a:hover) {
        & a:not(.button) {
            color: var(--primary-color);
        }
        & .button-arrow {
            background-color: var(--primary-color);

            &::before {
                background-color: var(--white);
            }
        }
    }

    &:hover {
        z-index: 1;
    }
}
/*-------------------------------------------------------------- */
/* # News */
/*--------------------------------------------------------------*/
.news {
    overflow: hidden;
    .item {

        & .image img {
            aspect-ratio: 500/345;
        }

        &.double:not(.horizontal) {
            & img {
                aspect-ratio: 810/515;
            }

            &:hover {
                box-shadow: var(--box-shadow-big);
            } 
        }

        &.horizontal {

            & img {
                aspect-ratio: 412/336;
            }

            &:hover {
                box-shadow: var(--box-shadow-big);
            } 
            
        }

        &:nth-child(n+4):nth-child(3n+1) {
            width: 97%;
            justify-self: start;

            & .button-arrow {
                margin-top: 2rem;
                margin-bottom: 1rem;
                align-self: flex-start;
            }
        }

        &:nth-child(n+4):nth-child(3n+2) {
            width: 97%;
            justify-self: center;

            & .button-arrow {
                margin-top: 2rem;
                margin-bottom: 1rem;
                align-self: flex-start;
            }
        }

        &:nth-child(n+4):nth-child(3n+3) {
            width: 97%;
            justify-self: end;

            & .button-arrow {
                margin-top: 2rem;
                margin-bottom: 1rem;
                align-self: flex-start;
            }
        }

        &.transparent:hover {
            transform: none;
            background-color: var(--white);

            & .button-arrow {
                top: calc(var(--card-padding) * -1);
            }
        }

        & .button-arrow {
            margin-top: auto;
            align-self: flex-end;
        }
    }
}

.single.news {
    section.single-content {
        padding-top: var(--spacing-big);

        & .swiper {
            overflow: visible;
    
            & .swiper-slide:not(.swiper-slide-active) {
                transform: scale(.6);
                opacity: .3;
    
                &.swiper-slide-prev {
                    transform-origin: right center;
                }
    
                &.swiper-slide-next {
                    transform-origin: left center;
                }
            }
        }

        & .video {
            padding: var(--spacing-big) 0;
            aspect-ratio: 16/11;

            & iframe {
                width: 100%;
                height: 100%;
            }
        }

        & .bottom {
            font-size: var(--font-size-small);
        }
    }
}
.news-gallery {
    & img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
}

.related .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;

    & h2 {
        width: auto;
    }

    & .grid3 {
        align-items: flex-start;
    }

    & .content {
        width: 100% !important;
    }
}

/*-------------------------------------------------------------- */
/* # Gallery */
/*--------------------------------------------------------------*/

.gallery {
    & .post-list {
        row-gap: var(--spacing-medium);
    }

    & .content-wrapper {
        --content-width: inherit;
    }
    
    & .item {
        & .card {
            padding: var(--spacing-small);
            flex: auto;
            transition: var(--transition-fast);

            &:hover {
                box-shadow: var(--box-shadow);
            }
        }
        & img {
            aspect-ratio: 1/1;
            object-fit: contain;
        }

        & .button-arrow {
            margin-top: var(--spacing-smaller);
        }

        & h4 {
            font-size: var(--font-size);
            font-weight: 600;
        }

        &:has(a:hover) .card {
            box-shadow: none;
        }
    }
}

.single.gallery {
    & .images {
        --sticky-position: var(--spacing);
        width: 50%;
        max-width: calc(90vh - var(--spacing) * 2);
        aspect-ratio: 1/1.15;
        position: sticky;
        top: var(--sticky-position);
        transition: var(--transition-base);
        z-index: 1;

        & .close {
            display: none;
        }

        & .no-slider img {
            aspect-ratio: 1/1;
            object-fit: contain;
        }
    }
    & .swiper {
        --swiper-navigation-sides-offset: 1rem;

        & .swiper-slide img {
            aspect-ratio: 1/1;
            object-fit: contain;

            body:not(.shown-gallery-popup) & {
                cursor: pointer;
            }
        }

        &.gallery-slider-thubms {
            margin-top: var(--spacing-smaller);

            & .swiper-slide {
                border: .2rem solid transparent;
            }
            & .swiper-slide-thumb-active {
                border-color: var(--grey);
            }

            &:hover {
                cursor: pointer;
            }
        }

        &:not(:hover) .swiper-button-next,
        &:not(:hover) .swiper-button-prev {
            opacity: 0;
        }
    }

    & .content {
        width: 50%;
        padding-left: var(--spacing-medium);
        align-self: stretch;
        align-items: stretch;
    }
}


.gallery-popup {
    transition: var(--transition-fast);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;

    & .zoom-image {
        width: 2.8rem;
        height: 2.8rem;
        mask: url(images/ico_zoom.svg) no-repeat center center / 100%;
        background-color: var(--main-color);
        position: absolute;
        top: calc(var(--popup-padding));
        left: var(--popup-padding);
        z-index: 2;
        cursor: pointer;
        display: none;

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

        &.zoomed {
            mask: url(images/ico_zoomed.svg) no-repeat center center / 100%;
        }
    }

    &:hover {
        & .card {
            background-color: var(--white);
        }
    }

    .shown-gallery-popup & {
        position: fixed;
        top: var(--spacing-medium);
        height: calc(100vh - var(--spacing-medium) * 2);
        width: calc(100vw - var(--spacing-big) * 2) !important;

        & .swiper-zoom-container img {
            aspect-ratio: unset !important;
            object-fit: unset !important;
            width: auto;
            height: calc(100vh - var(--spacing-medium) * 2 - var(--spacing) * 3);
        }

        & .gallery-slider-thubms {
            display: none;
        }

        & .zoom-image,
        & .close {
            display: block !important;
            mix-blend-mode: difference; /* Інвертує кольори */
            background-color: white;
        }
    }
}
.shown-gallery-popup {
    &::before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--overlay-color);
        opacity: 1;
        z-index: 999;
    }

    & .images {
        z-index: 1000 !important;
    }
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 0.2;
    color: var(--grey);
}

.filters .select {
    --input-border: .2rem solid var(--primary-color);
    --input-border_hover: .2rem solid var(--primary-color);
    --input-border_focus: .2rem solid var(--primary-color);
    --input-height: 4.9rem;

    & .choices__inner {
    }
    & .choices__list--single {

    }

    & .choices__placeholder {
        opacity: 1;
        color: var(--primary-color);
        font-weight: 500;
        font-size: var(--font-size-medium);
        text-transform: uppercase;
    }
}

/*-------------------------------------------------------------- */
/* # Jobs */
/*--------------------------------------------------------------*/
.jobs {
    --spacing: 3.2rem;

    & .card {
        gap: 1.6rem;
        min-height: 20rem;
        
        & h4 {
            font-size: var(--font-size);
        }

        & .button-arrow {
            margin-left: auto;
            margin-top: auto;
        }
    }
    
    & .region {
        position: relative;
        padding-left: 2.2rem;

        &::before {
            content: '';
            display: block;
            position: absolute;
            top: .1rem;
            left: 0;
            width: 1.2rem;
            height: 1.6rem;
            mask: url('images/ico_pin.svg') no-repeat center center / 100%;
            background-color: var(--primary-color);
        }
    }

    .single & {
        & h2 {
            font-size: calc(var(--font-size)*1.5);
            margin-bottom: .75em;
        }

        & .meta {
            margin-bottom: var(--spacing);
            & .region {
                &::before {
                    top: .3rem;
                }
            }
        }
    }
}

.with-sidebar {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        'title title'
        "main sidebar";
    column-gap: 12rem;
    
    & .page-title {
        grid-area: title;
    }
    & .main {
        grid-area: main;

    }

    & .sidebar {
        grid-area: sidebar;
    }

    &.left-sidebar {
        grid-template-columns: 1fr 4fr;
        grid-template-areas:
            'title title'
            "sidebar main";
        column-gap: var(--spacing-small);

        & .sidebar {
            order: -1;
        }

        & .main {
            order: 1;
        }
    }
}

.line {
    height: .1rem;
    background-color: var(--grey);
    margin: 4rem 0;

    &.right-negative {
        margin-right: var(--full-wrapper-indent-negative);
    }

    &.left-negative {
        margin-left: var(--full-wrapper-indent-negative);
    }
}

/*-------------------------------------------------------------- */
/* # Products */
/*--------------------------------------------------------------*/

.products {
    & .item {
        padding: var(--spacing-small);
        gap: 1.6rem;
        transition: var(--transition-fast);
        align-items: stretch;

        & img {
            transition: var(--transition-fast);
        }

        &:hover {
            box-shadow: none;

            & img {
                transform: scale(1.15);
            }
        }

        & img {
            aspect-ratio: 1/1;
            object-fit: contain;
        }

        /* & .button-arrow {
            margin-top: var(--spacing-smaller);
        } */

        & h4 {
            text-transform: uppercase;
            font-size: calc(var(--font-size-smaller) * 2);
            font-weight: 500;
            margin-bottom: -.25em;
        }

        & .form-factor {
            display: flex;
            align-items: flex-start;
            gap: .6rem;
            line-height: 1.1;

            & .icon {
                width: fit-content;
                height: fit-content;
                background-color: transparent;
                
                &::after {
                    content: '';
                    display: block;
                    width: 1.8rem;
                    height: 1.8rem;
                    mask-repeat: no-repeat;
                    mask-position: center;
                    mask-size: contain;
                    background-color: var(--primary-color);
                }
            }

            span {
                margin: auto 0;
            }
        }

        &:has(a:not(.category-link):hover) .button-arrow {
            background-color: var(--primary-color);

            &::before {
                background-color: var(--white);
            }
        }
        &:has(a.category-link:hover) .button-arrow {
            background-color: var(--white);

            &::before {
                background-color: var(--primary-color);
            }
        }
    }

    & .category-link {
        font-size: var(--font-size-smaller);
        color: var(--main-color);
        display: flex;
        align-items: center;
        gap: 1.6rem;

        & .icon {
            display: block;
            width: 4.8rem;
            height: 4.8rem;
            background-color: var(--light-grey);
            border-radius: 50%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 70%;
        }

        &:hover {
            text-decoration: underline;
        }

        .single & {
            font-size: var(--font-size);

            & .icon {
                width: 7.2rem;
                height: 7.2rem;
            }
        }
    }

    &.single {
        & .wrapper {
            display: flex;
            align-items: flex-start;

            gap: calc(var(--spacing-medium) * 2);
        }

        & .left-column,
        & .right-column {
            flex: 1;
            position: sticky;
            top: var(--sticky-position);
            transition: var(--transition-fast);
        }

        & .video {
            aspect-ratio: 16/9;
            box-shadow: var(--box-shadow);

            & iframe {
                width: 100%;
                height: 100%;
            }
        }

        & .attributes {
            display: flex;
            flex-direction: column;
            gap: 1.6rem;
            margin: var(--spacing-medium) 0 var(--spacing-big);

            & .title {
                font-size: var(--font-size-small);
                color: var(--dark-grey);
            }
            & .attribute {
                display: flex;
                align-items: stretch;
                gap: 1.6rem;
                padding-bottom: 1.6rem;

                & .value {
                    /* display: flex;
                    align-items: center; */
                    & * {
                        font-size: inherit !important;
                        font-family: inherit !important;
                    }
                }

                & .icon::after {
                    content: '';
                    display: block;
                    width: 3.2rem;
                    height: 3.2rem;
                    background-color: var(--primary-color);
                    flex-shrink: 0;
                }
            }
        }

        & .left-negative {
            margin-right: calc(var(--spacing-medium) * -1);
        }
        & .right-negative {
            margin-left: calc(var(--spacing-medium) * -1);
        }
    }
}

.related-products {
    overflow: hidden;

    & .products-slider {
        overflow: visible;

        & .swiper-slide {
            transition: opacity 1s;
            width: 30.3rem;
            margin-right: 2rem;

            &:not(.swiper-slide-visible) {
                opacity: 0;
                pointer-events: none;
            }
        }

        & .swiper-pagination {
            display: none;
        }
    }
}

.active-filters {
    background-color: var(--light-grey);
    color: var(--main-color);
    padding: 2rem;
    margin-bottom: var(--spacing-small);

    & .reset-filters {
        font-size: var(--font-size-small);
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: calc(var(--spacing-smaller) / 2);
        cursor: pointer;
        margin-bottom: 3.2rem;

        &::before {
            content: '';
            display: block;
            width: 1.3em;
            height: 1.3em;
            mask: url('images/ico_trash.svg') no-repeat center center / contain;
            background-color: var(--primary-color);
            flex-shrink: 0;
        }
    }

    & ul {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        & li {
            display: flex;
            align-items: flex-start;
            gap: 1.6rem;
            font-size: var(--font-size-small);
            line-height: var(--line-height-small);

            & span {
                display: block;
                width: fit-content;
            }

            &:has(a:hover) {
                color: var(--primary-color);
            }
        }

        & .remove-filter {
            content: '';
            display: block;
            width: 1.3em;
            height: 1.3em;
            mask: url('images/ico_x.svg') no-repeat center center / contain;
            background-color: var(--primary-color);
            cursor: pointer;
            flex-shrink: 0;
            margin-top: -.05em;
        }
    }
}

.accordion {
    --main-color: #333;
    box-shadow: none;

    & .filter {
        margin-bottom: var(--spacing-small);
    }

    & .acc-header {
        background-color: var(--light-grey);
        color: var(--main-color);
        padding: 2.3rem 4rem 2.3rem 2rem;
        margin-bottom: 0;
        font-size: var(--font-size);
        font-weight: 500;
        text-transform: uppercase;

        &::before {
            border: none;
            transform: none;
            top: 50%;
            translate: 0 -50%;
            right: 2.4rem;
            width: 1.6rem;
            height: 1.6rem;
            mask: url('images/arrow_down.svg') no-repeat center center / 100%;
            background-color: var(--primary-color);
        }

        &::after {
            content: '';
            display: block;
            width: 3.2rem;
            height: 3.2rem;
            margin-right: 2.4rem;
            flex-shrink: 0;
            background-color: var(--dark-grey);
            order: -1;
        }

        &.active {
            background-color: var(--light-grey);
            color: var(--main-color);

            &::before {
                rotate: 180deg;
            }
        }
    }

    & .acc-content {
        background-color: var(--light-grey);
        color: var(--dark-grey);
        padding-right: 1rem;

        & .content {
            padding: 0 1rem 0 2rem;
            margin-bottom: 3rem;
            max-height: 49.4rem;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;
            /* scrollbar-width: thin;
            scrollbar-color: var(--primary-color) var(--grey); */
            background:
                /* Shadow Cover TOP */
                linear-gradient(
                var(--light-grey),
                rgba(255, 255, 255, 0)
                ) center top,
                
                /* Shadow Cover BOTTOM */
                linear-gradient(
                rgba(255, 255, 255, 0), 
                var(--light-grey)
                ) center bottom,
                
                /* Shadow TOP */
                radial-gradient(
                farthest-side at 50% 0,
                rgba(0, 0, 0, 0.1),
                rgba(0, 0, 0, 0)
                ) center top,
                
                /* Shadow BOTTOM */
                radial-gradient(
                farthest-side at 50% 100%,
                rgba(0, 0, 0, 0.1),
                rgba(0, 0, 0, 0)
                ) center bottom;
            
            background-repeat: no-repeat;
            background-size: 100% 4rem, 100% 4rem, 100% .4rem, 100% .4rem;
            background-attachment: local, local, scroll, scroll;

            &::-webkit-scrollbar {
                width: .4rem;
                border-radius: .2rem;
                background-color: var(--grey);
            }

            &::-webkit-scrollbar-thumb {
                background-color: var(--primary-color);
                border-radius: .2rem;
            }

            & label {
                padding-left: 1.6em;
                margin-bottom: .6em;
                --checkbox-line-height: 1.1;

                & span {
                font-size: .8em;
                }
            }
        }

        &.active {
            max-height: 52.4rem !important;
        }
    }
}

.popup-win {
    & .win {
        min-width: 62.5rem;
        min-height: 24.5rem;
        gap: 1.6rem;
    }

    .buttons {
        align-self: stretch;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: .8rem
    }

    & h3 {
        color: var(--primary-color);
        margin-bottom: 2.2rem;
    }
    & p {
        font-size: var(--font-size-small);
    }

    &.info {
        & .win {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.6rem;
        }
        & h4,
        & h3 {
            width: auto;
            margin: 0;
            font-size: var(--font-size);
            text-transform: uppercase;
            text-align: center;
            font-weight: 600;

            &.alert {
                display: inline-flex;
                color: var(--primary-color);
                font-weight: 600;

                &::before {
                    content: '';
                    display: block;
                    width: 1.2em;
                    height: 1.2em;
                    mask: url('images/ico_alert.svg') no-repeat center center / 100%;
                    background-color: var(--primary-color);
                    margin-right: .6em;
                }
            }
        }
    }
}

.sidebar {
    h4 {
        font-size: var(--font-size);
        text-transform: uppercase;
        font-weight: 800;
        margin-bottom: var(--spacing)
    }

    .filters-header {
        margin-bottom: .8rem;
        border: .2rem solid var(--primary-color);
        position: sticky;
        top: var(--sticky-position);
        z-index: 10;

        &::after {
            mask: url('images/ico_filter.svg') no-repeat center center / 100%;
            background-color: var(--primary-color);
        }
    }

    .filters-content {
        background-color: transparent;
        padding-right: 0;
        max-height: none;
    }
}


/* FORMS */
.wpcf7-form {
    --spacing: 2.4rem;
}

label:has(input[type="checkbox"])::after {
    mask: url('images/ico_check.svg') no-repeat center center / 60%;
}

label:has(input[type="radio"])::before {
    outline: .1rem solid var(--dark-grey);
}

.add-file {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    position: relative;
    margin-bottom: .8rem;

    & input {
        /* display: none; */
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    & input[type="button"],
    & ::-webkit-file-upload-button {
        cursor: pointer;
    }
    & .wpcf7-form-control-wrap {
        position: absolute;
        width: 100%;
        cursor: pointer;
    }
    & .file-button {
        font-size: var(--font-size-medium);
        color: var(--primary-color);
        font-weight: 600;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 1rem;
        cursor: pointer;

        &::after {
            content: '';
            display: block;
            width: 2.4rem;
            height: 2.4rem;
            mask: url('images/ico_upload.svg') no-repeat center center / 100%;
            background-color: var(--primary-color);
            pointer-events: none;
        }
    }
    
    & .file-name {
        font-size: var(--font-size-small);
        color: var(--dark-grey);
        line-height: var(--line-height-small);
        word-break: break-all;
    }
}

.report-form-section {
    max-width: 127.4rem;
    margin: 0 auto;

    & h2 {
        font-size: calc(var(--font-size-small) * 2);
        font-weight: normal;
        font-family: var(--font-secondary);
    }
}
.report-form {
    --checkbox-line-height: 1.2;
    --radio-line-height: 1.2;
    width: 100%;
    gap: 3.2rem 2.4rem;

    & hr {
        margin: 0;
        grid-column: span 12;
    }

    & [data-class="wpcf7cf_group"],
    & .wpcf7-field-groups {
        grid-column: span 12;
    }

    & h4 {
        color: var(--primary-color);
        font-size: calc(var(--font-size-smaller) * 2);
        font-weight: 600;
        margin: 4.8rem 0 0;

        & .double-size {
            color: var(--main-color);
            font-weight: normal;
        }
    }
    & label {
        color: #4f4f4f;
        font-weight: 600;

        .multirow > & {
            font-size: var(--font-size);
            text-transform: uppercase;
            color: var(--primary-color);
        }
    }

    & .wpcf7-not-valid-tip {
        right: auto;
        left: 0;
    }
    & .row-group {
        & > label {
            margin-bottom: 1em;
        }
        & .wpcf7-form-control {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: stretch;
            justify-content: stretch;
            gap: var(--spacing-big);

            & label {
                margin-bottom: 0;
            }
        }
    }
    & .multirow {
        & .wpcf7-form-control {
            gap: 1.6rem var(--spacing-medium);
            display: grid;
            grid-auto-flow: row dense;
            grid-template-columns: minmax(150px, 1.33fr) minmax(150px, 1.33fr) minmax(150px, 2.33fr);
        }
    }

    & .wpcf7-form-control {
        .multi1 & {
            grid-template-columns: minmax(150px, 1.3fr) minmax(150px, .68fr) minmax(150px, 2.33fr);
        }
        .multi2 & {
            grid-template-columns: minmax(150px, 1.3fr) minmax(150px, 1.4fr) minmax(150px, 1.33fr);
        }
        .multi3 & {
            grid-template-columns: minmax(150px, 1.1fr) minmax(150px, .9fr) minmax(150px, 1.33fr);
        }
    }

    & .multi1 .wpcf7-list-item:nth-last-of-type(4) {
        max-width: 34rem;
    }

    & .button-wrapper {
        display: flex;
        justify-content: center;
        gap: 1.6rem;
        margin: 3.2rem 0;

        & .button:not(:hover) {
            color: var(--dark-grey);
            border-color: var(--dark-grey) !important;

            &::before {
                border-color: var(--dark-grey);
            }
            &::after {
                background-color: var(--dark-grey);
            }
        }
    }

    & .wpcf7-field-group-remove {
        color: var(--primary-color);
        font-weight: 500;
        text-decoration: underline;
        cursor: pointer;

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


.info:not(.popup-win) {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--dark-grey);
    display: flex;
    gap: .8rem;

    &::before {
        content: '';
        display: block;
        flex-shrink: 0;
        width: 1em;
        height: 1em;
        margin-top: .1em;
        background: url('images/ico_info.svg') no-repeat center center / 100%;
    }
}

.drugs-cat::after {
    mask: url('images/ico_drugs_cat.svg') no-repeat center center / 100%;
}
.drugs-class::after {
    mask: url('images/ico_drugs_class.svg') no-repeat center center / 100%;
}
.drugs-form::after {
    mask: url('images/ico_drugs_form.svg') no-repeat center center / 100%;
}
.drugs-substance::after {
    mask: url('images/ico_drugs_substance.svg') no-repeat center center / 100%;
}
.drugs-composition::after {
    mask: url('images/ico_drugs_composition.svg') no-repeat center center / 100%;
}
.drugs-indications::after {
    mask: url('images/ico_drugs_indications.svg') no-repeat center center / 100%;
}

.drugs-form {
    /* Таблетки */
    &[data-value="362"]::after,
    &[data-value="1"]::after,
    &[data-value="900"]::after,
    &[data-value="901"]::after,
    &[data-value="835"]::after,
    &[data-value="833"]::after,
    &[data-value="818"]::after,
    &[data-value="741"]::after,
    &[data-value="661"]::after
    {
        mask-image: url('images/ico_pills.svg');
    }

    /* Саше, гранули */
    &[data-value="370"]::after,
    &[data-value="98"]::after 
    {
        mask-image: url('images/ico_sashe.svg');
    }

    /* Гель, мазь крем */
    &[data-value="3"]::after,
    &[data-value="364"]::after,
    &[data-value="867"]::after,
    &[data-value="869"]::after,
    &[data-value="4"]::after,
    &[data-value="365"]::after,
    &[data-value="8"]::after,
    &[data-value="369"]::after 
    {
        mask-image: url('images/ico_gel.svg');
    }

    /* Капсули */
    &[data-value="7"]::after,
    &[data-value="368"]::after,
    &[data-value="785"]::after,
    &[data-value="917"]::after,
    &[data-value="789"]::after,
    &[data-value="791"]::after 
    {
        mask-image: url('images/ico_capsule.svg');
    }

    /* Сироп, суспензія оральна, розчин */
    &[data-value="681"]::after,
    &[data-value="912"]::after,
    &[data-value="189"]::after,
    &[data-value="372"]::after,
    &[data-value="363"]::after,
    &[data-value="842"]::after,
    &[data-value="2"]::after,
    &[data-value="823"]::after,
    &[data-value="821"]::after,
    &[data-value="371"]::after,
    &[data-value="99"]::after
    {
        mask-image: url('images/ico_syrop.svg');
    }

    /* Шампунь */
    &[data-value="376"]::after,
    &[data-value="6"]::after
    {
        mask-image: url('images/ico_shampoo.svg');
    }

    /* Супозитрорії  */
    &[data-value="373"]::after,
    &[data-value="637"]::after,
    &[data-value="238"]::after,
    &[data-value="635"]::after
    {
        mask-image: url('images/ico_supozitory.svg');
    }
}

.swiper-slide {
    box-sizing: border-box;
}

/* 
    PAGES
*/
.pages {
    & .item {
        & .title {
            margin-bottom: 0;
        }
    }
}
.card {
    &.category {
        --card-transform_hover: scale(1.08);
        border: none;
        border-bottom: .4rem solid transparent;
        padding: 3.4rem 2.4rem 4.1rem;

        & h5 {
            font-size: var(--font-size-medium);
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 0;
        }

        &:hover {
            text-decoration: none;
            border-color: var(--primary-color);

            & .icon {
                background-color: var(--primary-color);
            }

            & h5 {
                font-weight: 700;
            }
        }
    }
}

.grey-skew-right {
    background: linear-gradient(90deg, #F4F3F3 0%, #E6E4E5 100%);
    position: relative;
    overflow: hidden;

    * {
        position: relative;
        z-index: 2;
    }

    &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 45%;
        height: 100%;
        mask: url(images/skew_right.svg) no-repeat left bottom / cover;
        background-color: var(--grey);
        z-index: 1;
    }
    &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        right: calc(45% + 5rem);
        width: .2rem;
        height: 130%;
        background: var(--grey);
        rotate: 18.6deg;
        transform-origin: bottom right;
        z-index: 1;
    }
    
}

.help-block {
    overflow: hidden;
    border-left: .4rem solid var(--primary-color);
    box-shadow: 0px .6rem 3rem rgba(0, 0, 0, 0.1);


    & .left-column {
        padding: 8.5rem 0 13rem 10.3rem;
        position: relative;

        & h3 {
            font-size: calc(var(--font-size-medium) * 2);
            margin-bottom: 3.2rem;

            & span {
                display: block;
                font-size: .666em;
                text-transform: uppercase;
                font-weight: 500;
            }
        }

        & .wp-block-buttons {
            position: relative;
            z-index: 1;
        }

        & h4 {
            font-size: 17rem !important;
            font-weight: 800;
            line-height: .7;
            position: absolute;
            left: 9rem;
            margin-top: 4rem;
            color: var(--white);
            text-shadow: -.2rem 0 rgba(233,14,139,.2), 0 .2rem rgba(233,14,139,.2), .2rem 0 rgba(233,14,139,.2), 0 -.2rem rgba(233,14,139,.2);
            white-space: nowrap !important;
            z-index: 0;
        }
    }

    & .icon-list {
        gap: 3.2rem;
        & > div {
            justify-content: flex-start;
            gap: 1.2rem;
            font-size: var(--font-size-medium);
        }

        & .wp-block-image {
            width: 6.2rem;
        }
    }

    & .right-column {
        display: flex;
        align-items: stretch;

        & .wp-block-image {
            & img {
                width: 112%;
                max-width: none;
                height: 100%;
                object-fit: cover;
                margin-left: -12%;
            }
        }
    }

    .help-page & {
        & .wp-block-button {
            opacity: 0;
            pointer-events: none;
        }
    }
}
.masked-image {
    position: relative;

    & img {
        mask: url('images/mask-image.svg') no-repeat left center / cover;
    }

    &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: -2rem;
        width: .2rem;
        height: 130%;
        background: var(--light-grey);
        rotate: -19deg;
        transform-origin: top right;
        z-index: 1;
    }
}

/* Gutenberg reset */
:where(.wp-block-columns),
.wp-block-image {
    margin: 0;
    padding: 0;
}


.first-screen {
    gap: 8rem;
    & .first-img {
        margin-left: var(--full-wrapper-indent-negative);
        height: 72rem;
        
        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & h1 {
        color: #719D03;
        text-transform: uppercase;
        margin-bottom: 3.2rem;

        & span {
            display: block;
            color: var(--main-color);
            font-size: .571em;
            line-height: 1.1;
        }
    }

    & .wp-block-column:last-of-type {
        flex-basis: 36% !important;
    }
}

.tabs {
    box-shadow: none;

    & .tab-headers {
        background-color: transparent;
        border: none;
        justify-content: center;
        gap: var(--spacing);

        & .tab-header {
            color: var(--primary-color);
            font-size: var(--font-size-medium);
            font-weight: 600;
            line-height: 1;
            text-transform: uppercase;
            padding: 1.6rem 2.4rem;
            min-width: 15.5rem;
            min-height: 5.5rem;
            border: .2rem solid var(--primary-color);
            background-color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;

            &::before {
                content: none;
            }

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

            &.active {
                background-color: var(--primary-color);
                color: var(--white);
            }
        }
    }

    & .tab-content {
        padding-top: 6rem;
        background-color: transparent;
        border: none;

        & .content {
            padding: 0;
        }
    }
}

.two-images {
    gap: 2rem;
}
& .bordered {
    border-left: .4rem solid var(--primary-color);
    border-right: .4rem solid var(--primary-color);
    box-shadow: var(--box-shadow);
}

.content-group {
    padding: 4.8rem 16rem;
}

.perc50 {
    width: 49%;

    &.alignright {
        margin-left: 1.2em;
    }
    & img {
        width: 100% !important;
    }
}

.m-b-medium {
    margin-bottom: var(--spacing-medium) !important;
}

.content p:not(:last-child), .content ul:not(:last-child), .content ol:not(:last-child), .content dl:not(:last-child), .content table:not(:last-child), .content blockquote:not(:last-child), .content pre:not(:last-child), .content figure:not(:last-child) {
    margin-bottom: 1.6rem;
}

.digits-section {
    margin-top: -12rem;
}
.digits {
    padding: 6rem;
    gap: 6rem;
    background-color: #D9D9D9;
    max-width: 127rem;
    margin: 0 auto;

    &::before {
        width: 54%;
        opacity: .5;
    }
    &::after {
        right: calc(52.7% + 5rem);
        opacity: .5;
    }

    & .digit {
        font-size: 7rem;
        font-weight: 800;
        color: var(--light-grey);
        text-shadow: 
            var(--primary-color) 0.2rem 0rem 0rem,
            var(--primary-color) 0.1755rem 0.0959rem 0rem,
            var(--primary-color) 0.1081rem 0.1683rem 0rem,
            var(--primary-color) 0.0141rem 0.1995rem 0rem,
            var(--primary-color) -0.0832rem 0.1819rem 0rem,
            var(--primary-color) -0.1602rem 0.1197rem 0rem,
            var(--primary-color) -0.198rem 0.0282rem 0rem,
            var(--primary-color) -0.1873rem -0.0702rem 0rem,
            var(--primary-color) -0.1307rem -0.1514rem 0rem,
            var(--primary-color) -0.0422rem -0.1955rem 0rem,
            var(--primary-color) 0.0567rem -0.1918rem 0rem,
            var(--primary-color) 0.1417rem -0.1411rem 0rem,
            var(--primary-color) 0.192rem -0.0559rem 0rem;
        margin-bottom: .2em;
    }

    & .wp-block-column {
        flex-basis: auto !important;
    }
    & .wp-block-column:nth-of-type(3),
    & .wp-block-column:nth-of-type(4) {
        & .digit {
            color: #DEDCDD;
        }
    }
}

.related-pages {
    h2 + & {
        padding-top: 0;

        & .flex {
            flex-direction: column;
            align-items: flex-start;
            gap: 3.2rem;
        }

        & .title {
            font-size: 1.4em;
            padding-left: 0;

            &::before {
                content: none;
            }
        }
    }
}

.info.content-info {
    margin: 4rem 0;
    padding: 3.6rem;
    gap: 2.7rem;
    text-transform: uppercase;
    font-size: calc(var(--font-size-smaller) * 2);
    color: var(--main-color);

    &::before {
        width: 3.6rem;
        height: 3.6rem;
        background: var(--primary-color) !important;
        mask: url('images/ico_info_big.svg') no-repeat center center / 100%;
    }
}

.contacts {
    & h2 {
        margin-bottom: .6em;
    }

    & > .wp-block-group__inner-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2.2rem;
    }

    & .contacts-columns {
        gap: 2.2rem;
    }

    & .contacts-column {
        background-color: var(--light-grey);
        padding: 6rem 7.3rem 5.2rem;

        & h4 {
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 1.666em;
        }

        & .contacts-grid {
            gap: 2.8rem 8rem;

            & p {
                margin-left: 1.7em;
            }

            & .has-small-font-size {
                font-size: var(--font-size-smaller) !important;
                margin-top: 1rem;
                margin-left: 2.833em;
    
                & b {
                    font-weight: 600;
                }
            }
        }

        & h5 {
            font-size: 1em;
            line-height: 2;
            font-weight: 600;
            margin-bottom: 0;
            color: var(--primary-color);
        }

        & .contact-item {
            display: flex;
            align-items: center;
            gap: .5em;

            &::before {
                content: '';
                display: block;
                width: 1.2em;
                height: 1.2em;
                background-color: var(--primary-color);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                flex-shrink: 0;
            }

            &.phone::before {
                mask-image: url('images/ico_phone.svg');
            }
            &.email::before {
                mask-image: url('images/ico_email.svg');
            }
            &.address::before {
                mask-image: url('images/ico_address.svg');
            }
            &.mob::before {
                mask-image: url('images/ico_mob.svg');
            }
            &.none::before {
                content: none;
            }
        }
    }

    & .wp-block-social-links {
        padding: 4.8rem;
        gap: 4.8rem;
        font-size: var(--font-size);

        & .wp-block-social-link.wp-social-link {
            & a {
                display: flex;
                align-items: center;
                gap: 1.6rem;
            }
            

            & svg {
                path {
                    display: none;
                }
            }

            & span:not(.screen-reader-text) {
                font-size: 1em;
                font-weight: 600;
                text-transform: uppercase;
                color: var(--main-color);
                display: block;
                margin: 0;
                line-height: 1;
            }

            &:hover {
                color: var(--primary-color);
                transform: none;
                text-decoration: underline;
            }
        }

        & .wp-social-link-youtube svg {
            background-color: var(--primary-color);
            mask: url('images/ico_yt.svg') no-repeat center center / 100%;
        }
        & .wp-social-link-instagram svg {
            background-color: var(--primary-color);
            mask: url('images/ico_insta.svg') no-repeat center center / 100%;
        }
        & .wp-social-link-facebook svg {
            background-color: var(--primary-color);
            mask: url('images/ico_fb.svg') no-repeat center center / 100%;
        }
    }

    & iframe {
        height: 53.7rem !important;
        background-color: var(--light-grey);
    }
}

.pick-left {
    position: relative;

    &::before {
        content: '';
        display: block;
        position: absolute;
        top: 2.4rem;
        left: 0;
        width: 9.4rem;
        height: 2.2rem;
        background: var(--primary-color);
    }
}

.help-item {
    margin-top: 4.8rem;
    padding-top: 8rem;
    gap: 5.8rem !important;

    & .help-content {
        padding-top: 3.6rem;
        align-self: flex-start;
        position: sticky;
        top: var(--sticky-position);
        transition: var(--transition-base);
        height: 50rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-right: .1rem solid var(--secondary-color);

        &::before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            transform: translateX(50%);
            width: 6.4rem;
            height: 6.4rem;
            background-color: var(--primary-color);
            border: 2rem solid var(--white);
            box-shadow: 0 1rem 3rem rgba(166, 55, 118, 0.2);
            border-radius: 50%;
            z-index: 1;
        }

        &::after {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            transform: translateX(50%);
            width: 2.4rem;
            height: 2.4rem;
            background-color: var(--primary-color);
            border-radius: 50%;
            z-index: 1;
        }

        & * {
            max-width: 50rem;
        }

        & .next-down {
            margin: auto 1rem 0;
            font-size: calc(var(--font-size-smaller) * 2);
            font-weight: normal;
            color: var(--primary-color);
            text-transform: uppercase;
            display: flex;
            gap: 2.2rem;
            align-items: flex-end;
            align-self: flex-start;
            cursor: pointer;

            &::before {
                content: '';
                display: block;
                width: 1.8rem;
                height: 7.3rem;
                mask: url('images/arrow_next_down.svg') no-repeat center center / 100%;
                background-color: var(--primary-color);
            }
        }
    }

    & .help-gallery {
        gap: 2.4rem 1rem !important;
        align-items: stretch !important;
    
        & .wp-block-image {
            width: calc(50% - .5rem);
            height: 50rem;
    
            & .components-resizable-box__container {
                width: 100% !important;
                height: 100% !important;
            }
    
            &.full {
                width: 100%;
            }

            &.wide {
                height: 40rem;
            }
    
            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}

.about {
    & h2 {
        margin-bottom: var(--spacing-medium);
    }
}

.text-image {
    background-color: var(--light-grey);
    border-left: .4rem solid var(--primary-color);
    border-right: .4rem solid var(--primary-color);
    min-height: 58.4rem;
    overflow: hidden;
    gap: 1rem;

    & .text {
        padding: var(--spacing-medium) 0 var(--spacing-medium) 10rem;

        & p:not(:last-child) {
            margin-bottom: .8em;
        }
    }

    & h3 {
        position: relative;
        margin-bottom: var(--spacing);
        padding-left: 2rem;

        &::before {
            content: '';
            display: block;
            position: absolute;
            top: .2em;
            left: 0;
            bottom: .2em;
            width: .4rem;
            background-color: var(--primary-color);
        }

        .about:first-of-type & {
            max-width: 89%;
        }
    }

    & .image {
        flex-basis: 24% !important;

        & .masked-image {
            height: 100%;

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                mask: url('images/mask-image-right.svg') no-repeat left center / cover;
            }

            &::before {
                left: 4rem;
                rotate: -25deg;
            }
        }
    }

    &.right-image {
        & .text {
            padding: var(--spacing-medium) 3rem var(--spacing-medium) 0;
        }

        & h3 {
            margin-bottom: 1.6rem;
        }

        & .masked-image {
            & img {
                mask: url('images/mask-image-left.svg') no-repeat right center / cover;
            }

            &::before {
                left: auto;
                right: 4rem;
                rotate: 25deg;
            }
        }
    }
}

.content {
    & a:not(.button, .wp-block-button__link) {
        color: var(--primary-color);
        text-decoration: underline;
        font-weight: 600;
    }

    & .simple-link a,
    & .title a {
        color: unset;
        text-decoration: unset;
        font-weight: unset;
    }
}

.double-small {
    font-size: calc(var(--font-size-small) * 2);
    font-weight: 500;
    line-height: normal;
}

.compliance {
    & h1,
    & .h1 {
        margin-bottom: 0;
    }

    & .buttons {
        gap: 3.2rem 6rem;
        
        & .wp-element-button {
            min-width: 52rem;
        }
    }
}

.content-buttons {
    gap: 3.2rem 6rem;
    
    & .wp-element-button {
        min-width: 52rem;
    }
}

.farmako {
    & .text {
        padding: 1rem 0;

        & .info {
            line-height: 1.5;
        }
    }

    & .contacts-columns {
        justify-content: center;
        margin-top: 4.8rem;

        & .contacts-column {
            padding: 6rem 0.3rem 5.2rem 11rem;
        }
        
        & .contacts-grid {
            & .has-small-font-size {
                font-size: .8em !important;
                padding-right: 20%;
                margin: 0 0 .8rem !important;
            }
        }
    }

    .content-buttons {
        margin: 4.8rem 0 3.2rem;
        gap: 3.8rem;
        --button-padding: 1.6rem calc(1.6rem + 7.5rem) 1.6rem 1.6rem;
        
        & .wp-element-button {
            max-width: 61.8rem;
            display: inline-block;
            text-align: left;

            &::before {
                right: 7.2rem;
            }
            &::after {
                width: 7.2rem;
            }
        }
    }
}

:root :where(.is-layout-constrained) > * {
    margin-block-start: 0;
}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    width: 100%;
}



/* Responsive */

@media screen and (max-width: 860px) {
    body {
        --popup-padding: 2.4rem;
        --header-row-padding: 0;

        --font-size: 1em; /* 14px */
        --font-size-smaller: .71em; /* 10px */
        --font-size-small: .82em;  /* 12px */
        --font-size-medium: 1.14em; /* 16px */
        --font-size-big: 1.28em; /* 18px */

        --spacing: 2.4rem;
        --spacing-smaller: 1.2rem;
        --spacing-small: 1.6rem;
        --spacing-medium: 3.2rem;
        --spacing-big: 5.2rem;
        --section-spacing: 5.2rem;

        --card-padding: var(--spacing-small);
        --item-gap: var(--spacing-small);

        --h1-size: 2.28em; /* 32px */
        --h2-size: 1.71em; /* 24px */
        --h3-size: 1.42em; /* 20px */
        --h4-size: 1.28em; /* 18px */
        --h5-size: 1em; /* 14px */
        --h6-size: .82em; /* 12px */

        --checkbox-size: 1.8rem;
        --radio-size: 1.8rem;
        --radio-tick-width: 1.8rem;
        --radio-tick-height: 1.8rem;
        --radio-tick-left: 0;
        --checkbox-tick-width: 1.8rem;
        --checkbox-tick-height: 1.8rem;
        --checkbox-border-radius: .3rem;
        --input-height: 4.9rem;
        --input-padding: var(--spacing-small);

        --swiper-pagination-bottom: -2.4rem;

        .swiper-pagination-bullet-active {
            --swiper-pagination-bullet-width: 5rem;
        }

    }
    body.font-normal {
        font-size: 1.4rem;
    }
    body.font-medium {
        font-size: 1.6rem;
    }
    body.font-large {
        font-size: 1.8rem;
    }

    h1 {
        font-size: var(--h1-size);
    }
    h2,
    .h2 {
        font-size: var(--h2-size);
        padding-left: 1.4rem;
    }
    h3 {
        font-size: var(--h3-size);
    }
    h4 {
        font-size: var(--h4-size);
    }
    h5 {
        font-size: var(--h5-size);
    }
    h6 {
        font-size: var(--h6-size);
    }

    label {
        font-size: var(--font-size-medium);
    }

    .grid2col {
        grid-column: 1;
    }

    .site-header {
        & .main-row {
            height: var(--mobile-header-height);
            justify-content: flex-start;
            padding-top: .6rem;

            & .wrapper {
                display: flex;
                gap: 1.6rem;

                & .header-column {
                    &.site-menu {
                        height: auto;
                        flex-grow: 2;

                        & .menu-id-10,
                        & .menu-id-15 {
                            display: none;
                        }
                    }
                    
                    &.logo-col {
                        padding-top: .5rem;
                    }
                }
                
            }
        }

        .site-menu {
            height: auto;

            & > div > ul {
                & li.help {
                    margin-left: 0;
                    width: 8em;

                    & a {
                        padding: .72rem 1.2rem !important;
                        gap: 1.2rem;
                        font-size: var(--font-size-smaller);
                        display: flex;
                        align-items: center;

                        &::before {
                            width: 1.6rem;
                            height: 1.6rem;
                        }
                    }
                }
            }

        }
    }

    li.drugs {
        margin-right: 0;
        padding: 0;
        background-color: transparent;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 5.7rem;
            background-color: #F4F3F3;
            z-index: -1;
        }

        & > a, 
        & > a:hover {
            padding: var(--spacing-small) !important;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 1.6rem;
            color: var(--main-color);

            &::before {
                width: 2rem;
                height: 2rem;
                margin: 0;
                background-color: var(--main-color);
            }

            & .toogle-sub-menu {
                margin: 0 0 0 auto;
                
                &::after {
                    background-color: var(--main-color) !important;
                    margin-top: 0;
                }
            }
        }

        &.current-menu-item a {
            color: var(--main-color) !important;
            font-weight: normal !important;
        }
        
    }
    .lang-switcher {
        translate: 0 -2rem;

    }
    .social {
        width: auto;
        gap: 1rem;
        & .fab {
            width: 2rem;
            height: 2rem;
        }
    }
    .lang-block {
        width: 40%;
    }
    .fz-block {
        width: 100%;

        & .font-size-switcher-popup {
            position: relative;
            top: 1.5rem;
        }
    }

    .site-footer {
        padding: 4.85rem 2.6rem;
        .main-section {
            .wrapper {
                gap: 4.5rem;

                & .footer-column {
                    gap: 4.5rem;
                }
    
                & .disclaimer,
                & .copyright {
                    font-size: var(--font-size-medium);
                }
            }
            
        }
    }

    .button {
        &[data-action="load-more"].disabled {
            font-size: var(--font-size-small);
        }
    }

    .item {
        & .content {
            & h4 {
            font-size: var(--font-size-medium);
            }

            & .meta {
                font-size: var(--font-size-medium);
            }
        }
        
    }

    .button.load-more {
        width: 100%;
        margin-top: 6rem;
    }

    .news {
        & .card {
            padding: 0;
            box-shadow: none;
        }
        & .item:not(.related) {
            flex-direction: row;
            gap: var(--card-padding);
            grid-row: span 1;
            grid-column: span 12;

            &:hover,
            &.transparent:hover {
                box-shadow: none !important;
                border-color: transparent;
            }

            & .content {
                padding: 0 !important;
                flex: auto;
            }

            & h4 {
                font-size: var(--font-size-small);
                order: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                max-height: 4rem;
            }

            & .meta {
                font-size: var(--font-size-smaller);
                order: 1;
            }

            & .button-arrow {
                display: none;
            }

            & .image {
                margin: 0;
                width: 10rem;
                flex: auto;
                flex-shrink: 0;

                & img {
                    aspect-ratio: 100/70 !important;
                }
            }

            &:nth-child(n+4):nth-child(3n+1),
            &:nth-child(n+4):nth-child(3n+2),
            &:nth-child(n+4):nth-child(3n+3) {
                width: 100%;
                justify-self: stretch;
            }
        }
    }

    .swiper-pagination {
        position: static !important;
        margin-top: 1.6rem;
    }

    .single.news {
        & section.single-content {
            & .swiper {
                & .swiper-slide:not(.swiper-slide-active) {
                    opacity: 0;
                }
            }
        }

        & .single-content {
            & .meta {
                font-size: var(--font-size);
                font-weight: 500;
                padding-bottom: 1rem;
            }
    
            & h2 {
                font-size: var(--font-size-medium);
                line-height: normal;
                margin-bottom: .625em;
            }
        }
    }
    .swiper.news-gallery {
        overflow: hidden !important;

        & .swiper-slide:not(.swiper-slide-active) {
            opacity: 1 !important;
            transform: none;
        }

        & img {
            aspect-ratio: 288/200;
        }
    }

    & .related {
        & .wrapper {
            flex-direction: column;
            align-items: stretch;
            gap: 2.4rem;

            & h2 {
                margin-bottom: 0;
                max-width: 80%;
            }

            & .button {
                order: 3;
            }
        }

        & .related-posts {
            width: 100%;
            display: block !important;

            & .item {
                box-shadow: none;

                & .button-arrow {
                    margin-top: var(--spacing-small);
                    align-self: flex-start;

                    .transparent:hover & {
                        top: 0;
                    }
                }

                &:hover {
                    box-shadow: none;
                }
            }

            & .meta {
                order: -1;
            }

            & .content {
                & h4 {
                    font-size: var(--font-size-medium);
                }
            }
        }
    }

    .button-arrow {
        width: 4.8rem;
        height: 4.8rem;
    }

    .gallery {
        & .filters {
            flex-direction: column;
            align-items: stretch;
            gap: var(--spacing-small);

            & .categories-menu {
                flex-direction: column;
                align-items: stretch;
                gap: var(--spacing-small);
            }
        }

        & .post-list {
            grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
            gap: 4.8rem;
        }

        & .content-wrapper {
            flex-direction: column;
            gap: var(--spacing);
        }
    }

    .single.gallery {
        & .swiper {
            --swiper-navigation-sides-offset: 0;
        }
        
        & .images {
            width: 100%;
            position: static;
            aspect-ratio: unset;
        }
        & .content {
            width: 100%;
            padding-left: 0;

            & .p-medium {
                padding: var(--spacing);
            }

            & h2 {
                font-size: var(--font-size-medium);
                margin-bottom: var(--spacing-small);
            }

            & .meta {
                padding-top: 0;
                font-size: var(--font-size);
            }
        }

        & .gallery-popup {
            position: static;
            transform: none;

            .shown-gallery-popup & {
                position: fixed;
                top: var(--spacing-small);
                height: calc(100vh - var(--spacing-small) * 2);
                left: var(--spacing-small);
                width: calc(100vw - var(--spacing-small) * 2) !important;

                & .close {
                    top: 1rem;
                    right: 1rem;
                    width: 1.8rem;
                    height: 1.8rem;
                    mask-size: contain;
                }

                & .zoom-image {
                    top: 1rem;
                    left: 1rem;
                    width: 1.8rem;
                    height: 1.8rem;
                }

                & .card {
                    padding: 0;
                }

                & .swiper-zoom-container {
                    height: calc(100vh - var(--spacing-small) * 2);
                    & img {
                        height: auto;
                    }
                }
                    
            }
        }

        & .related {
            display: none;
        }
    }

    .with-sidebar {
        display: flex;
        flex-direction: column;

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

            & .main {
                order: 2;
            }
        }
    }

    .accordion {
        & .acc-header {
            padding: 1.4rem 1.6rem 1.4rem 1.6rem;

            &::after {
                width: var(--spacing);
                height: var(--spacing);
                margin-right: 1.6rem;
            }

            &::before {
                right: 1.6rem;
                width: 1.8rem;
            }
        }

        & .acc-content {
            & .content {
                padding-top: .6rem;
                margin-bottom: 1rem;
            }
        }

        & .filter {
            margin-bottom: .8rem;
        }
    }

    .active-filters {
        margin-bottom: .8rem;

        & ul {
            gap: 1.2rem;
        }
        & .reset-filters {
            margin-bottom: 1.8rem;
        }
    }

    .products {   
        & .page-title {
            width: 80%;
        }

        & .post-list {
            grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
            gap: 1.2rem;
        }

        & .item {
            padding: var(--spacing-small);
            display: grid;
            grid-template-columns: 6rem 1fr;
            align-items: center;
            gap: 1rem 1.4rem;

            & .image {
                order: -1;
                grid-row: span 2;
            }

            & h4 {
                font-size: var(--font-size-small);
                align-self: flex-end;
            }

            & .meta {
                font-size: var(--font-size-smaller);
                align-self: flex-start;
            }

            &:hover {
                & img {
                    transform: none;
                }
            }
        }
            
        .home & {
            overflow: hidden;
            margin: 0 calc(var(--mobile-padding) * -1);
            width: calc(100% + var(--mobile-padding)* 2);
            padding: 0 var(--mobile-padding);

            & .products-slider {
                & .swiper-button-next,
                & .swiper-button-prev {
                    display: none;
                }

                & .swiper-pagination {
                    display: flex;
                }
            }
        }
    }

    .single.products {
        & .wrapper {
            flex-direction: column;
            gap: 3rem;
        }
        & .category-link {
            font-size: var(--font-size-small);
            & .icon {
                width: 4.8rem;
                height: 4.8rem;
            }
        }

        & .button.link {
            width: 100%;
        }

        & .line {
            margin: 2rem 0;
        }

        & .attributes {
            margin: var(--section-spacing) 0 0 0;
        }

        & .files {
            gap: var(--spacing-small);
            margin-top: 2rem;

            & .button {
                width: 100%;
            }
        }

        & .right-column {
            display: flex;
            flex-direction: column;

            &::after {
                content: '';
                display: block;
                width: 100%;
                height: 1px;
                background-color: var(--grey);
                margin-top: 2rem;
            }
        }
    }

    .popup-win {
        
        &[data-popup="precaution"] {
            & .win {
                padding: 2.4rem 1.5rem 3.2rem;
            }

            & h3 {
                margin-bottom: 0;
            }
        }
        & .buttons {
            gap: 1.6rem;
        }
        & .button {
            --button-height: 4.2rem;
            --font-size-medium: .86em;
            --button-padding: .7rem calc(var(--spacing-small) + 4rem) .7rem var(--spacing-small);

            &::before {
                right: 4rem;
            }
            &::after {
                width: 4rem;
            }
        }
    }

    .sidebar {
        & .filters-content {
            max-height: 0;

            &.active {
                max-height: none !important;
            }
        }
    }

    .jobs {
        & .main:not(.content) {
            margin-bottom: 6rem;
        }
        & .post-list {
            grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
            gap: var(--spacing-small);
        }
        & .card {
            min-height: 15rem;
        }

        & .sidebar {
            & h4 {
                font-size: var(--font-size-medium);
                margin-bottom: var(--spacing-small);
            }
        }

        & .single-content {
            & .wrapper {
                gap: var(--section-spacing);
            }
            & .card {
                padding: var(--spacing) var(--spacing-small);
            }
        }

    }

    .add-file {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;

        & .file-name {
            font-size: var(--font-size);
        }
    }
    .info {
        font-size: var(--font-size);
    }
    .popup-win {
        padding: 0 var(--mobile-padding);

        & .win {
            min-width: 100%;
            min-height: 14.5rem;
            gap: 1.6rem;
            padding: 2.4rem;
            padding-top: 5rem;
        }

        &.info {
            & h4 {
                &.alert {
                    width: 86%;
                    line-height: 1.4;

                    &::before {
                        width: 3em;
                        height: 2.2em;
                        margin-right: 1em;
                    }
                }
            }
        }
    }
    .close {
        width: 1.6rem;
        height: 1.6rem;
        top: 2.4rem;
        right: 2.4rem;
        padding: 0;
    }

    .grid2, .grid3, .grid4, .grid5, .grid6 {
		grid-template-columns: repeat(1, 1fr);
	}

    a.wp-element-button, .wp-block-button, .button, a.button {
        width: 100%;
    }

    .related-products {
        padding: var(--section-spacing) 0 !important;
        --swiper-pagination-bottom: -3rem;

        & .button {
            margin-top: 5rem;
        }

        & .products-slider {

            & .swiper-wrapper {
                height: 31rem;
            }
            & .swiper-slide {
                width: 100%;
                margin-right: 0;
            }

            & .swiper-pagination {
                justify-content: center;
            }
        }
    }

    .first-screen {
        gap: 3.1rem;
        & .first-img {
            margin-right: var(--full-wrapper-indent-negative);
            height: 20rem;
        }

        & h1 {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1.8rem;

            & span {
                font-size: .75em;
                line-height: normal;
            }
        }
    }

    .categories {
        --spacing-smaller: .8rem;

        &::before,
        &::after {
            display: none;
        }
    }
    .card {
        &.category {
            padding: 1.6rem 1.6rem 1.3rem;
            gap: 1rem;
            border-width: .3rem;

            & .icon {
                width: 6rem;
                height: 6rem;
            }

            & h5 {
                font-size: var(--font-size);
            }
        }
    }

    .help-block {
        gap: 2.4rem;
        background-color: transparent;
        border: none;
        box-shadow: none;

        & .right-column {
            order: -1;

            & .wp-block-image {
                width: 100%;
                border-left: .4rem solid var(--primary-color);
                border-right: .4rem solid var(--primary-color);
                background-color: var(--light-grey);

                & img {
                    width: 90%;
                    margin-left: 10%;
                    height: 19.8rem;
                }
            }
        }

        & .left-column {
            padding: 0;

            & h3 {
                font-size: calc(var(--font-size-smaller) * 2);
                margin-bottom: 2.4rem;

                & span {
                    font-size: .8em;
                }
            }

            & .icon-list {
                grid-template-columns: repeat(1, minmax(0, 1fr));
                gap: 3.2rem;
                margin-bottom: 3.2rem;

                & > div {
                    flex-direction: row;
                    align-items: center;
                    font-size: var(--font-size);
                    line-height: normal;
                }

                & .wp-block-image {
                    width: 4.8rem;
                    flex-shrink: 0;
                }
            }
        }

        .help-page & {
            & .wp-block-buttons {
                display: none;
            }
            & .icon-list {
                margin-bottom: 0;
            }
        }
       
    }
    .masked-image {
        overflow: hidden;
        &::before {
            left: 3.9rem;
        }
    }

    .pages {
        & .grid3 {
            gap: 4.8rem;
        }

        & .item {
            gap: 2.4rem;

            & .title {
                font-size: calc(var(--font-size-smaller) * 2);
                margin-bottom: 0;
            }
        }
    }

    .content-group {
        padding: 2.4rem 0;
    }

    .tabs {
        & .tab-headers {
            gap: 1.6rem;

            & .tab-header {
                min-width: 13.6rem;
                min-height: 4.9rem;
            }
        }

        & .tab-content {
            padding-top: 4rem;
        }
    }

    .perc50 {
        width: 100%;
        margin-bottom: 3rem;
    }

    .digits-section {
        margin-top: -3rem;
    }

    .digits {
        gap: 4rem;
        padding: 4rem 2rem;
        margin-left: var(--full-wrapper-indent-negative);
        margin-right: var(--full-wrapper-indent-negative);

        &::before {
            width: 70%;
        }
        &::after {
            right: calc(64% + 5rem);
        }

        & .digit {
            font-size: 5rem;
        }
        & .wp-block-column:nth-of-type(3), & .wp-block-column:nth-of-type(4) {
            & .digit {
                color: var(--light-grey);
            }
        }
    }

    .mob2strings {
        width: 80%;
    }

    .contacts {
        & .contacts-column {
            padding: 3rem var(--mobile-padding);
            margin: 0 var(--full-wrapper-indent-negative);

            & h5 {
                font-size: var(--font-size-medium);
                line-height: 1.3;
            }

            & .contact-item {
                align-items: flex-start;

                &::before {
                    width: 1.714em;
                    height: 1.714em;
                }
            }

            & .contacts-grid {
                grid-template-columns: 1fr;

                & p {
                    margin-left: 2.428em;
                }   

                & .has-small-font-size {
                    margin-left: 3.4em;
                }
            }
        }

        & .wp-block-social-links {
            padding: 4.8rem 7.7rem;
            flex-direction: column;
            font-size: calc(var(--font-size-smaller) * 2);
        }

        & iframe {
            margin: 0 var(--full-wrapper-indent-negative);
            width: calc(100% + var(--full-wrapper-indent) * 2) !important;
            height: 100vw !important;
        }
    }

    .pick-left {
        padding: 4rem 2.4rem !important;
        font-size: var(--font-size) !important;

        &::before {
            top: 1.6rem;
            width: 4rem;
            height: 1rem;
        }

        & span {
            font-size: 1.285em !important;
        }
    }

    .help-item {
        gap: 2.4rem !important;
        margin-top: 0;
        padding-top: 6rem;

        & .help-content {
            position: static;
            border: none;
            height: auto;
            padding-top: 0;

            &::before,
            &::after {
                display: none;
            }

            & .next-down {
                display: none;
            }
        }

        & .help-gallery {
            overflow: hidden;
            gap: 0 !important;

            & .wp-block-image {
                width: 100%;
                height: auto;

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

        & .swiper-pagination {
            margin-top: 2rem;
        }
    }

    .text-image {
        background-color: transparent;
        border: none;
        min-height: 0;
        overflow: visible;
        gap: var(--spacing);
        
        & .text {
            padding: 0;

            & * {
                max-width: none;
            }
        }

        & h3 {
            padding-left: 1.4rem;
            margin-bottom: .8em;
        }

        & .image {
            min-height: 19.8rem;
            border-left: .4rem solid var(--primary-color);
            border-right: .4rem solid var(--primary-color);
            background-color: var(--light-grey);

            & .masked-image {
                padding-left: 3rem;
                & img {
                    mask-size: 134% 100%;
                }

                .fix-pos1 & img {
                    object-position: 28%;
                }

                &::before {
                    left: 4.2rem;
                    rotate: -16deg;
                }
            }
        }

        &.right-image {
            & .text {
                padding: 0;
            }

            & .image {
                & .masked-image {
                    padding-left: 0;
                    padding-right: 3rem;

                    &::before {
                        left: auto;
                        right: 4.2rem;
                        rotate: 16deg;
                    }
                }
            }
        }

        &:not(.right-image) {
            & .image {
                order: -1;
            }
        }
    }

    .double-small {
        font-size: var(--font-size-medium);
    }

    .compliance {
        & h1,
        & .h1 {
            font-size: calc(var(--font-size-big) * 2);
        }

        & .buttons {
            gap: 1.6rem;
            --button-padding: .7rem calc(var(--spacing-small) + 5.6rem) .7rem var(--spacing-small);

            & .wp-element-button {
                min-width: 100%;
                font-size: var(--font-size);
            }
        }

        & .text {
            align-self: center;
            max-width: 54%;
            margin: 2rem auto;
        }
    }

    .info.content-info {
        padding: 1.6rem;
        gap: 1.6rem;
        font-size: var(--font-size-medium);

        &::before {
            width: 2.4rem;
            height: 2.4rem;
        }
    }

    .farmako {
        & .wp-block-columns {
            gap: 2.4rem;
            margin-bottom: 0 !important;
        }

        & .text {
            padding: 0;
        }

        & .content-buttons {
            gap: 1.6rem;
            margin: 4rem 0;
            --button-padding: .83em calc(1.16em + 5.6rem) .83em 1.16em;
            & .wp-element-button {
                max-width: none;
                min-width: 100%;
                font-size: var(--font-size-small);
                text-align: center;

                &::before {
                    right: 5.6rem;
                }
                &::after {
                    width: 5.6rem;
                }
            }
        }

        & .contacts-columns {
            & .contacts-column {
                padding: 3rem var(--mobile-padding);

                & .contacts-grid {
                    & .wp-block-group {
                        order: 1;

                        &.name-group {
                            order: 4;
                        }
                        &.mob-group {
                            order: 5;
                        }
                    }
                    & p {
                        padding-left: 2.428em;
                    }

                    &  .contact-item.none {
                        & + p,
                        & + p + p {
                            padding-left: 0;
                        }
                    }
                }
            }
        }
    }

    .report-form-section {
        & h2 {
            font-size: var(--font-size);
            line-height: normal;
            padding-left: 2.4rem;
        }
    }

    .report-form {
        gap: 2.4rem;

        & h4 {
            font-size: var(--font-size);
            margin-top: 2.4rem;

            & .double-size {
                font-weight: 600;
                font-size: .85em;
            }
        }

        & label {
            font-size: var(--font-size-smaller);
        }

        & .row-group {
            & .wpcf7-form-control {
                display: flex !important;
                gap: 1.2rem 4.4rem;
            }
        }

        & .multirow {
            & .wpcf7-form-control {
                flex-direction: column;
            }
        }

        & .multi1 .wpcf7-list-item:nth-last-of-type(4) {
            max-width: 24rem;
        }
    }
}



.site-header {
    --main-color: #333;
    --primary-color: #719D03;
    --menu-item-color_active: var(--primary-color);
    --menu-item-color_hover: var(--primary-color);
    --submenu-item-color_hover: var(--primary-color);
    --button-color: var(--primary-color);
    --button-border: .2rem solid var(--primary-color);
    --button-background_hover: var(--primary-color);
}

li.help {
    max-width: 25rem;
}

.hide-this {
    display: none !important;
}