@import './variables.css';

@media (min-width: 1200px) {
    .cmp-header .cmp-header__top-bar {
        height: 32px;
    }

    .cmp-header__main-content .header-actions__right-side {
        gap: 16px;
    }

    .cmp-header .cmp-navigation__modal {
        min-width: 768px;
        margin-top: 8px;
    }

    .cmp-header .cmp-navigation__modal-inner {
        grid-template-columns: 288px 1fr;
        min-height: 384px;
    }

    .cmp-header .fluidra-base-semibold {
        font-size: var(--font-size--normal);
        background: none;
        border: none;
    }

    .cmp-header .cmp-navigation__item {
        margin: 0;
    }

    .cmp-header .cmp-navigation__item-link {
        padding: 8px 16px;
    }

    .cmp-navigation__item-link:hover {
        color: var(--color-black_default);
        text-decoration: none;
    }

    .cmp-navigation__item-link:visited {
        color: var(--color-black_default);
    }

    .cmp-header .cmp-navigation__item-btn {
        padding: 8px 16px;
        gap: 12px;
    }

    .cmp-header .cmp-navigation__list {
        margin-bottom: 8px;
        padding-left: 0;
        padding-right: 0;
    }

    .cmp-header .cmp-navigation__level {
        max-height: 384px;
        padding-top: 16px;
    }

    .cmp-header .cmp-navigation__level--root {
        width: 288px;
        padding: 16px 0;
    }

    .cmp-header .cmp-navigation__level--sub {
        padding: 16px 12px;
    }

    .cmp-header .cmp-navigation__link-sub:hover {
        color: var(--color-black_default);
        text-decoration: none;
    }

    .cmp-header .cmp-navigation__link-sub:visited {
        color: var(--color-black_default);
    }

    .cmp-header .cmp-navigation__panel-item {
        padding: 12px 24px;
        margin-bottom: 0;
    }

    .cmp-header .cmp-navigation__option {
        padding: 8px 25px;
        margin: 0 8px;
    }

    .cmp-header .navigation {
        background: none;
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
    }

    .cmp-header button:focus {
        background: none;
    }

    .cmp-header button:focus {
        background: none;
        border: none;
    }

    .cmp-header .cmp-navigation__option:hover:after {
        left: 8px;
        width: 4px;
        height: 16px;
    }

    .cmp-header .cmp-navigation__option.is-active:after {
        left: 8px;
        width: 4px;
        height: 16px;
    }

    .cmp-header .cmp-header__main-content .header-actions {
        padding-top: 17px;
        padding-bottom: 17px;
    }

    .cmp-header .form-inputModal {
        gap: var(--gap--xl);
    }

    .cmp-header .header-actions__right-side .js-header-buttons-action {
        gap: var(--gap--xl);
        margin-bottom: 16px;
    }

    .cmp-header .cmp-navigation__option-btn .icon-chevron-right {
        font-size: var(--font-size--normal);
    }

    .cmp-header .cmp-navigation__item-btn .cmp-navigation__icon {
        font-size: var(--font-size--normal);
    }
}

@media (max-width: 1200px) {
    .cmp-header .cmp-navigation__option {
        padding: 12px 24px;
        margin: 0;
    }

    .cmp-header .cmp-header__main-content .header-actions__left-side .menu-toggle .icon {
        font-size: var(--font-size--page-title);
    }

    .cmp-header .cmp-header__main-content .header-actions {
        padding-top: 14px;
    }

    .cmp-header .cmp-header__main-content .header-actions__left-side .cmp-header__search {
        padding-bottom: 12px;
    }

    .cmp-header .cmp-navigation__item-btn .cmp-navigation__icon {
        font-size: var(--font-size--title);
    }

    .cmp-header .cmp-navigation__item {
        padding: 12px 0;
    }

    .cmp-header .fluidra-base-semibold {
        padding: 0;
        color: var(--color-black_default);
    }

    body.is-root-sheet .cmp-header__mobile-footer .cmp-header__top-bar {
        gap: var(--gap--xl);
        padding: 16px;
    }

    body.is-root-sheet .cmp-header .js-header-buttons-action {
        gap: var(--gap--xl);
        margin-bottom: 16px;
    }
}

.cmp-header .fluidra-button-secondary .cmp-button {
    border: 2px solid;
}

.cmp-header .cmp-header__search .inputModal-wrapper__button {
    font-size: 10px;
    line-height: 10px;
}

.cmp-header .cmp-header__search .inputModal-wrapper__button:hover {
    border: none;
    background: none;
}

.cmp-header .cmp-button {
    height: 48px;
    gap: var(--gap--xl);
    padding-right: 16px;
    padding-left: 16px;
}

.cmp-header .cmp-button:visited {
    color: var(--color-white);
}

.cmp-header .logo {
    margin: 0;
    max-width: 100%;
}

.cmp-header .fluidra-button-secondary:not(.fluidra-button--dark) .cmp-button:hover {
    border-width: 2px;
    outline: 1px solid;
    text-decoration: none;
}

.cmp-header .fluidra-button-primary:not(.fluidra-button--dark) .cmp-button:hover {
    border-width: unset;
    outline: none;
    color: var(--color-white);
    text-decoration: none;
}

.cmp-header .form-inputModal .inputModal-wrapper__input {
    padding: 0;
}

.cmp-header .form-inputModal .inputModal-wrapper__input:focus {
    box-shadow: none;
}

.cmp-header .form-inputModal .inputModal-wrapper__input::placeholder {
    font-size: 13px;
    letter-spacing: .01em;
}

.cmp-header .form-inputModal__wrapper:hover:not(.error):not(:has(.input-wrapper__input:disabled)):not(:focus-within) {
    border: 2px solid var(--color-blue_border);
}

.cmp-header .cmp-header__main-content .header-actions__left-side {
    gap: 32px;
    row-gap: 11px;
}

.cmp-header .cmp-header__main-content .header-actions__left-side .logo picture {
    width: 200px;
    height: 48px;
}

.cmp-header .form-inputModal__wrapper {
    height: 48px;
    gap: var(--gap--xl);
    border: 1px solid var(--color-grey_border);
    padding: 14px 16px 14px 18px;
}

.cmp-header__main-content .header-actions__left-side .menu-toggle:active {
    background: none;
    border: none;
}

.cmp-header__main-content .header-actions__left-side .menu-toggle:focus {
    background: none;
    border: none;
}

.cmp-header .navigation {
    background: none;
}

html body {
    line-height: 1.42857143;
}

.cmp-header input[type="text"] {
    font-family: 'WorkSans', sans-serif;
}

@media (min-width: 768px) {
    .cmp-register-modal .cmp-register-modal__content {
        gap: 16px;
        max-width: 600px;
    }
}

.cmp-register-modal .cmp-register-modal__content {
    padding: 24px;
}

.cmp-register-modal .cmp-register-modal__content {
    padding: 24px;
}

.cmp-register-modal .cmp-register-modal__close {
    font-size: 24px;
}

.cmp-register-modal .cmp-register-modal__body {
    gap: 48px;
}

.cmp-register-modal .cmp-register-modal__body .body__header {
    gap: 16px;
}

.cmp-register-modal .cmp-text p {
    margin-bottom: 24px;
}

.cmp-register-modal .cmp-register-modal__body .body__buttons {
    gap: 24px;
}

.cmp-register-modal .fluidra-button-primary:not(.fluidra-button--dark) .cmp-button:hover {
    color: var(--color-white);
    text-decoration: unset;
}

.cmp-register-modal .fluidra-button-secondary:not(.fluidra-button--dark) .cmp-button {
    text-decoration: unset;
}

.cmp-register-modal .cmp-button {
    height: 48px;
    gap: var(--gap--xl);
    padding-right: 16px;
    padding-left: 16px;
}

.cmp-header .cmp-header__main-content .header-actions__right-side .cart-content .cartButton__number,
.cmp-header .cmp-header__main-content .header-actions__left-side .cartButton__number {
    top: -4px;
    right: -6px;
    min-width: 24px;
    height: 24px;
    padding: 2px 0 2px;
    font-size: 15px;
}