header {
    width: 100%;

    display: flex;
    flex-direction: column;

    position: relative;
}

/* Line */

.header__line {
    min-height: 41px;

    background-color: var(--color-01);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-xs) var(--space-xxxl);

    position: relative;
}

.i18n__open-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

    position: absolute;

    top: 50%;
    right: var(--space-xxxl);
}

.header__line-options-vr {
    width: 1px;
    height: var(--font-size-m);

    background-color: var(--color-06);
}

/* Desktop */

.header--desktop {
    border-bottom: 1px solid var(--color-05);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);

    padding: var(--space-m) var(--space-xxxl);
}

.header__logo {
    height: 24px;
}

.header__logo > img {
    height: 100%;
}

.header__links--desktop {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);

    position: relative;
}

.header__cart-link {
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

    position: absolute;

    top: 50%;
    right: 0;
}

.header__cart-icon {
    height: var(--font-size-l);

    position: relative;
}

.header__cart-icon--not-empty {
    right: 3px;
}

.header__cart-icon--not-empty::after {
    content: "";

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background-color: var(--color-03);

    position: absolute;

    top: -3px;
    right: -3px;
}

.header__cart-icon > img {
    height: 100%;
}

/* Mobile */

.header--mobile {
    border-bottom: 1px solid var(--color-05);

    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);

    padding: var(--space-m) var(--space-xxxl);

    position: relative;
}

.header-btn--mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;

    cursor: pointer;
}

.header-btn--mobile > div {
    width: 24px;
    height: 1px;

    background-color: var(--color-01);
}

.header__links-wrapper {
    width: 100%;
    height: calc(100vh - 106px);

    background-color: rgba(0, 0, 0, 0.6);

    display: none;

    position: fixed;

    top: 106px;
    left: 0;

    z-index: 4;
}

.header__links-wrapper--displayed {
    display: flex;
}

.header__links--mobile {
    width: 100%;
    height: max-content;

    background-color: var(--color-02);

    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    padding: var(--space-m) var(--space-xxxl);
}

.header__links--mobile > .c-link--01 {
    width: max-content;
}

/* I18n */

.i18n__wrapper {
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.6);

    display: none;
    align-items: center;
    justify-content: center;

    padding: var(--space-xxxl);

    position: fixed;

    top: 0;
    left: 0;

    z-index: 4;
}

.i18n__wrapper--active {
    display: flex;
}

.i18n {
    width: 50%;

    border: 1px solid var(--color-05);
    border-radius: 0;

    background-color: var(--color-02);

    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    padding: var(--space-m);
}

.i18n__top {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.i18n__close-btn {
    height: 16px;
}

.i18n__close-btn > img {
    height: 100%;
}

.i18n__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.i18n__form > .c-field-wrapper {
    width: 100%;
}

.i18n__locale-field > .altselect-display > .altselect-text > span,
.i18n__locale-field > .altselect-options > .altselect-option > span,
.i18n__currency-field > .altselect-display > .altselect-text > span,
.i18n__currency-field > .altselect-options > .altselect-option > span {
    line-height: initial;
}

.i18n__btn-label {
    width: 100%;

    justify-content: center;
}

@media (max-width: 1280px) {
    
}

@media (max-width: 1024px) {
    /* Desktop */

    .header--desktop {
        display: none;
    }

    /* Mobile */

    .header--mobile {
        display: flex;
    }

    .header__cart-link {
        position: initial;
    }

    .header__cart-link {
        transform: initial;
        -webkit-transform: initial;
    }
}

@media (max-width: 768px) {
    /* Line */

    .header__line {
        justify-content: flex-start;
    }

    .header__line > span {
        display: none;
    }

    .header__line-options {
        transform: initial;
        -webkit-transform: initial;

        position: initial;
    }
    
    /* I18n */

    .i18n {
        width: 100%;
    }
}

@media (max-width: 480px) {
    
}