:root {
    --header-top-offset: 0px;
    --header-info-menu-cont-width: 375px;
}
.header {
    position: sticky;
    top: var(--header-top-offset);
    left: 0;
    right: 0;
    gap: var(--header-items-gap);
    height: var(--header-height);
    padding: var(--header-v-padding) var(--header-h-padding);
    background-color: var(--color-3);
    border-bottom: 1px solid var(--color-6);
    z-index: 11;
}
.header.static {
    position: static;
}
.header .header-phone-link {
    gap: 5px;
    font-size: 16px;
}
.header .header-phone-link img {
    height: 24px;
    width: auto;
}
@media (min-width: 769px) {
    header.header .header-phone {
        padding-right: 16px;
    }
}
@media (max-width: 768px) {
    header.header .header-phone-link {
        height: 48px;
        width: 48px;
        padding: 12px;
        /*background-image: url(/img/icons/icon-phone-gray.svg);*/
        /*background-position: center;*/
        /*background-size: 20px;*/
        /*background-repeat: no-repeat;*/
    }
    header.header .header-phone-link .header-phone-link-text {
        display: none;
    }
}
.header .header-logo {
    height: 100%;
    width: auto;
}
.header .header-buttons {
    gap: var(--header-buttons-gap);
}
.header .header-trustpilot {
    padding: 12px;
}
.header .header-trustpilot iframe:last-child {
    right: 0;
    width: 300px !important;
}
.header .header-button {
    height: 48px;
    min-width: 48px;
    padding: 12px;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
}
.header .header-button:not(:hover) {
    opacity: 0.9;
}
.header .header-button:hover {
    opacity: 1;
}
.header .header-button img {
    height: 24px;
    width: auto;
}
.header .header-button .header-button-counter:not(:empty) {
    position: absolute;
    top: 7px;
    right: 5px;
    height: 16px;
    min-width: 16px;
    padding: 1px 3px;
    text-align: center;
    color: var(--color-3);
    font-size: 11px;
    line-height: 14px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    background-color: var(--color-2);
}
.header .header-button .header-button-counter:empty {
    display: none;
}
.header .header-search-dropdown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.2s ease-in-out;
    z-index: 1;
}
.header .header-search-open:not(.active) ~ .header-search-dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.header .header-search-open.active ~ .header-search-dropdown {
    opacity: 1;
    visibility: visible;
}
.header .header-search-container,
.content-area .header-search-container {
    padding: 32px 0;
    background-color: var(--color-3);
    box-shadow: 0 12px 20px rgba(104, 104, 104, 0.06);
}
.header .header-search-field,
.content-area .header-search-field {
    padding: 24px var(--header-search-field-h-padding);
}
.header .header-search-field input,
.content-area .header-search-field input {
    height: 48px;
    font-size: 16px;
    line-height: 26px;
    border-bottom: 1px solid var(--color-1);
    border-radius: 0;
}
.header .header-search-placeholder,
.content-area .header-search-placeholder {
    position: absolute;
    color: var(--color-1);
    pointer-events: none;
    transition: all 0.2s ease-in-out;
}
.header .header-search-field input:not(:focus) ~ .header-search-placeholder,
.header .header-search-field input:placeholder-shown ~ .header-search-placeholder,
.content-area .header-search-field input:not(:focus) ~ .header-search-placeholder,
.content-area .header-search-field input:placeholder-shown ~ .header-search-placeholder {
    top: 33px;
    font-size: 16px;
    line-height: 26px;
}
.header .header-search-field input:focus ~ .header-search-placeholder,
.header .header-search-field input:not(:placeholder-shown) ~ .header-search-placeholder,
.content-area .header-search-field input:focus ~ .header-search-placeholder,
.content-area .header-search-field input:not(:placeholder-shown) ~ .header-search-placeholder {
    top: 15px;
    font-size: 14px;
    line-height: 24px;
}
.header .header-search-q-clean,
.content-area .header-search-q-clean {
    position: absolute;
    top: 30px;
    right: var(--header-search-field-h-padding);
    height: 32px;
    width: 32px;
    padding: 5px;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
}
.header .header-search-field input:placeholder-shown ~ .header-search-q-clean,
.content-area .header-search-field input:placeholder-shown ~ .header-search-q-clean {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.header .header-search-field input:not(:placeholder-shown) ~ .header-search-q-clean,
.content-area .header-search-field input:not(:placeholder-shown) ~ .header-search-q-clean {
    opacity: 1;
    visibility: visible;
}
.header .header-search-results,
.content-area .header-search-results {
    margin-top: 16px;
}
.header .header-search-result,
.content-area .header-search-result {
    padding: 0 var(--header-search-field-h-padding);
    font-size: 16px;
    line-height: 26px;
}
.header .header-info-menu-dropdown {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.2s ease-in-out;
    z-index: 1;
}
.header .header-info-menu-burger:not(.active) ~ .header-info-menu-dropdown {
    display: none;
}
.header .header-info-menu-container {
    height: var(--header-info-menu-cont-height);
    width: var(--header-info-menu-cont-width);
    max-height: 100vh;
    background-color: var(--color-3);
}
.header .header-info-menu-headline {
    height: var(--header-height);
}
.header .header-info-menu-close {
    margin-right: var(--header-h-padding);
}
.header .header-info-menu-group-list {
    height: 100%;
    overflow: hidden;
}
.header .header-info-menu-list {
    gap: 24px;
    padding: 16px 24px;
    overflow-x: hidden;
    overflow-y: auto;
}

.header .header-info-menu-item:empty {
    display: none;
}

@media (-webkit-max-device-pixel-ratio: 1.99) and (min-width: 1440px), (-webkit-min-device-pixel-ratio: 2) and (min-width: 1920px) {

}

/*condition for 3 columns on Mac, if needed*/
@media (-webkit-max-device-pixel-ratio: 1.99) and (min-width: 1024px) and (max-width: 1439px), (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px) and (max-width: 1919px) {

}

@media (min-width: 768px) {
    :root {
        --header-buttons-gap: 40px;
    }
}
@media (min-width: 1440px) {
    .header .header-menu-group-title {
        padding: 16px;
        font-size: 16px;
        line-height: 1;
        transition: color 0.2s ease-in-out;
        cursor: pointer;
    }
    .header .header-menu-group-title:not(:hover) {
        color: var(--color-1);
    }
    .header .header-menu-group-title:hover, .header .header-menu-group-title.active {
        color: var(--color-4);
    }
    .header .header-menu-group-dropdown {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
    }
    .header .header-menu-group-title:not(.active) ~ .header-menu-group-dropdown {
        display: none;
    }
    .header .header-menu-group-dropdown-container {
        height: 754px;
        max-height: 100vh;
        padding: 24px 80px;
        background-color: var(--color-3);
        overflow-x: hidden;
        overflow-y: auto;
    }
    .header .header-menu-group-items-wrapper {
        gap: 24px;
        height: inherit;
    }
    .header .header-menu-group-parents {
        gap: 24px;
        width: 240px;
    }
    .header .header-menu-group-parent-list {
        max-height: 350px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .header .header-menu-group-parent-item-inner {
        gap: 5px;
        min-height: 52px;
        padding: 10px 8px;
        font-size: 16px;
        line-height: 26px;
        border-radius: 4px;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    }
    .header .header-menu-group-parent-item-inner:not(.active) {
        color: var(--color-1);
        background-color: var(--color-3);
        cursor: pointer;
    }
    .header input:not(:checked) ~ .header-menu-group-parent-item-inner:hover,
    .header input:checked ~ .header-menu-group-parent-item-inner {
        color: var(--color-17);
    }
    .header input:checked ~ .header-menu-group-parent-item-inner {
        background-color: #C4BDB31A;
        cursor: default;
    }
    .header input:not(:checked) ~ .header-menu-group-parent-item-inner .active,
    .header input:checked ~ .header-menu-group-parent-item-inner .default {
        display: none;
    }
    .header .header-menu-group-parent-item-inner img {
        height: 16px;
        width: auto;
        max-width: 16px;
    }
    .header .header-menu-group-parent-preview-picture {
        height: max-content;
        width: max-content;
        max-height: 332px;
        max-width: 100%;
        border-radius: 4px;
        overflow: hidden;
    }
    .header .header-menu-group-parent-preview-picture:not(.active) {
        display: none;
    }
    .header .header-menu-group-items-list {
        gap: 24px;
    }
    .header .header-menu-group-subgrid-list .header-menu-group-items-list {
        transition: all 0.1s ease-in-out;
    }
    .header .header-menu-group-subgrid-list .header-menu-group-items-list:not(.active) {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .header .header-menu-group-column {
        gap: 16px;
        max-height: 706px;
    }
    .header .header-menu-group-items {
        height: 100%;
        padding: 16px;
        border-radius: 4px;
        transition: background-color 0.2s ease-in-out;
    }
    .header .header-menu-group-items:not(:hover) .header-menu-group-items-sublist {
        padding-right: 10px;
    }
    .header .header-menu-group-items.hot {
        max-height: 288px;
    }
    .header .header-menu-group-items.room-type {
        max-height: 280px;
    }
    .header .header-menu-group-items.top-cat-1 {
        max-height: 447px;
    }
    .header .header-menu-group-items.top-cat-2 {
        max-height: 243px;
    }
    .header .header-menu-group-items.all-cats {
        max-height: 672px;
    }
    .header .header-menu-group-items.colors {
        max-height: 672px;
    }
    .header .header-menu-group-items.styles {
        max-height: 672px;
    }
    .header .header-menu-group-items:not(:hover) {
        background-color: var(--color-5);
    }
    .header .header-menu-group-items:hover {
        background-color: var(--color-9);
    }
    .header .header-menu-group-items-sublist {
        max-height: calc(100% - 40px);
        overflow-x: hidden;
        overflow-y: auto;
    }
    .header .header-menu-group-items.room-type .header-menu-group-items-sublist,
    .header .header-menu-group-items.all-cats .header-menu-group-items-sublist,
    .header .header-menu-group-items.styles .header-menu-group-items-sublist {
        gap: 4px;
    }
    .header .header-menu-group-items.hot .header-menu-group-items-sublist,
    .header .header-menu-group-items.top-cat-1 .header-menu-group-items-sublist,
    .header .header-menu-group-items.top-cat-2 .header-menu-group-items-sublist,
    .header .header-menu-group-items.colors .header-menu-group-items-sublist {
        gap: 8px;
    }
    .header .header-menu-group-items.hot .header-menu-group-items-sublist {
        line-height: 24px;
    }
    .header .header-menu-group-items.room-type .header-menu-group-items-sublist,
    .header .header-menu-group-items.all-cats .header-menu-group-items-sublist,
    .header .header-menu-group-items.styles .header-menu-group-items-sublist,
    .header .header-menu-group-items.colors .header-menu-group-items-sublist,
    .header .header-menu-group-items.top-cat-1 .header-menu-group-items-sublist,
    .header .header-menu-group-items.top-cat-2 .header-menu-group-items-sublist {
        line-height: 26px;
    }
    .header .header-menu-item:not(.highlighted) {
        font-size: 14px;
    }
    .header .header-menu-item:hover {
        color: var(--color-4);
    }
    .header .header-menu-item.highlighted {
        position: relative;
        display: block;
        margin-bottom: 12px;
        font-size: 18px;
        font-weight: var(--font-weight-regular);
        line-height: 28px;
    }
    .header a.header-menu-item.highlighted {
        padding-right: 30px;
    }
    .header a.header-menu-item.highlighted:hover:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        width: 21px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("/img/redesign/icons/icon-arrow-right-up-rounded-orange.svg");
        content: "";
    }
    .header span.header-menu-item.highlighted {
        cursor: default;
    }
    .header .header-menu-group-items-sublist hr {
        border: none;
        border-bottom: 1px solid var(--color-10);
    }
    .header .header-info-menu-group {
        height: 100%;
    }
    .header .header-info-menu-item {
        font-size: 18px;
        font-weight: var(--font-weight-regular);
        line-height: 28px;
    }
    .header .header-info-menu-item:hover {
        color: var(--color-4);
    }

    .header .header-mobile-only {
        display: none;
    }
}
@media (max-width: 1439px) {
    .header .header-info-menu-group-list {
        gap: 16px;
        padding: 24px 16px 0;
    }
    .header .header-info-menu-group {
        transition: all 0.2s ease-in-out;
    }
    .header .header-info-menu-group.active {
        position: absolute;
        top: 24px;
        left: 16px;
        right: 16px;
        bottom: 24px;
        background-color: var(--color-3);
        z-index: 1;
    }
    .header .header-info-menu-group-headline {
        gap: 10px;
        padding: 16px;
        font-size: 16px;
        line-height: 26px;
    }
    .header .header-info-menu-group:not(.active) .header-info-menu-group-headline {
        background-color: var(--color-5);
        border-radius: 4px;
    }
    .header .header-info-menu-group-show-more,
    .header .header-info-menu-subgroup:not(.active) .header-info-menu-subgroup-show-more,
    .header .header-info-menu-subgroup2:not(.active) .header-info-menu-subgroup2-show-more {
        opacity: 0.3;
    }
    .header .header-info-menu-item {
        padding: 16px;
        font-size: 16px;
        font-weight: var(--font-weight-regular);
        line-height: 26px;
        border-radius: 4px;
    }
    .header .header-info-menu-list {
        gap: 8px;
        height: 100%;
    }
    .header .header-info-menu-item,
    .header .header-info-menu-subgroup,
    .header .header-info-menu-subgroup2 {
        margin: 0 -24px;
    }
    .header .header-info-menu-subgroup-list hr,
    .header .header-info-menu-subgroup2-list hr {
        margin: 0 -23px;
        border: none;
        border-bottom: 1px solid #B1B1B180;
    }
    .header .header-info-menu-subgroup-headline,
    .header .header-info-menu-subgroup2-headline {
        border-radius: 4px;
        transition: background-color 0.2s ease-in-out;
    }
    .header .header-info-menu-subgroup.active .header-info-menu-subgroup-headline {
        position: sticky;
        top: -17px;
        background-color: #F6F5F4;
        z-index: 1;
    }
    .header .header-info-menu-subgroup2.active .header-info-menu-subgroup2-headline {
        position: sticky;
        top: 41px;
        background-color: #F6F5F4;
        z-index: 0;
    }
    .header .header-info-menu-subgroup-show-more,
    .header .header-info-menu-subgroup2-show-more {
        min-height: 48px;
        min-width: 48px;
        padding: 16px;
        transition: opacity 0.2s ease-in-out;
    }
    .header .header-info-menu-subgroup-parent,
    .header .header-info-menu-subgroup2-parent {
        width: 100%;
        padding: 16px 0 16px 16px;
        font-size: 16px;
        line-height: 26px;
    }
    .header .header-info-menu-subgroup .header-info-menu-subgroup-list,
    .header .header-info-menu-subgroup2 .header-info-menu-subgroup2-list {
        padding: 0 24px 0 56px;
        transition: all 0.2s ease-in-out;
    }
    .header .header-info-menu-subgroup:not(.active) .header-info-menu-subgroup-list,
    .header .header-info-menu-subgroup2:not(.active) .header-info-menu-subgroup2-list {
        max-height: 0;
        overflow: hidden;
    }
    .header .header-info-menu-subgroup.active .header-info-menu-subgroup-list,
    .header .header-info-menu-subgroup2.active .header-info-menu-subgroup2-list {
        max-height: 100%;
        padding-top: 8px;
    }

    .header .header-info-menu-group.active .header-info-menu-group-show-more {
        opacity: 0;
        pointer-events: none;
    }
    .header .header-info-menu-group:not(.active) .header-info-menu-list,
    .header .header-info-menu-group:not(.active) .header-info-menu-group-return,
    .header .header-info-menu-subgroup:not(.active) .header-info-menu-subgroup-show-more .up,
    .header .header-info-menu-subgroup.active .header-info-menu-subgroup-show-more .down,
    .header .header-info-menu-subgroup2:not(.active) .header-info-menu-subgroup2-show-more .up,
    .header .header-info-menu-subgroup2.active .header-info-menu-subgroup2-show-more .down,
    .header .header-desktop-only {
        display: none;
    }
}
@media (max-width: 1023px) {
    .header .header-search-container {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}
@media (max-width: 767px) {
    :root {
        --header-height: 68px;
        --header-v-padding: 18px;
        --header-h-padding: 16px;
        --header-items-gap: 0px;
        --header-buttons-gap: 16px;
        --header-info-menu-cont-height: 100vh;
        --header-info-menu-cont-width: 100vw;
        --header-search-field-h-padding: 20px;
    }
    body:has(.header-info-menu-burger.active) {
        overflow: hidden;
    }
    .header .header-info-menu-group-list {
        height: calc(100% - 68px - 64px);
        overflow-y: scroll;
    }
    .header .header-logo {
        z-index: 2; /* Necessary for burger opened menu */
        height: 42px;
        /*width: 80px;*/
    }
    .header .header-info-menu-burger {
        padding: 8px;
    }
    .header .header-info-menu-burger img {
        height: 32px;
    }
    .header .header-trustpilot {
        display: none;
    }
    .header .header-search-dropdown {
        z-index: 2;
    }
    .header .header-search-result {
        font-size: 14px;
        line-height: 24px;
    }
    .header .header-info-menu-headline {
        border-bottom: 1px solid var(--color-6);
    }

    @media (max-width: 374px) {
        :root {
            --header-items-gap: 10px;
            --header-buttons-gap: 10px;
        }

        header.header .header-phone-link,
        .header .header-button,
        .header .header-button {
            height: 44px;
            width: 44px;
            min-width: 44px;
        }
    }
}
@media (min-width: 1440px) {
    :root {
        --header-info-menu-cont-height: 1080px;
        --header-items-gap: 50px;
        --header-search-field-h-padding: 140px;
    }

    @media (min-width: 1680px) {
        :root {
            --header-items-gap: 100px;
        }
    }
}
@media (min-width: 1024px) {
    :root {
        --header-height: 86px;
        --header-v-padding: 20px;
        --header-h-padding: 37px;
    }
}
@media (max-width: 1439px) and (min-width: 1024px) {
    :root {
        --header-info-menu-cont-height: 730px;
        --header-items-gap: 100px;
        --header-search-field-h-padding: 138px;
    }

    @media (max-width: 1280px) {
        :root {
            --header-items-gap: 30px;
        }
    }
}
@media (max-width: 1023px) and (min-width: 768px) {
    :root {
        --header-height: 73px;
        --header-v-padding: 16px;
        --header-h-padding: 20px;
        --header-info-menu-cont-height: 813px;
        --header-search-field-h-padding: 20px;
    }
}