/* [SECTION] Header */

.header {
    width: 100%;

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

.header--bottom-border {
    border-bottom: 1px solid #f4dac7;
}

/* Header -> Line */

.header__line {
    width: 100%;
    height: 40px;

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

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

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

    position: relative;
}

.header__langs-wrapper {
    height: 100%;

    position: absolute;

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

.header__langs {
    height: 100%;

    display: flex;
    align-items: center;

    position: relative;
}

.header__lang-switch-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
}

.header__lang-switch-btn-icon {
    height: 12px;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.header__langs-wrapper._active > .header__langs > .header__lang-switch-btn > .header__lang-switch-btn-icon {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}

.header__lang-options-wrapper {
    min-width: calc(100% + 2 * var(--space-xs));

    position: absolute;

    top: 100%;
    left: calc(0px - var(--space-xs));

    overflow: hidden;

    pointer-events: none;
}

.header__langs-wrapper._active > .header__langs > .header__lang-options-wrapper {
    pointer-events: unset;
}

.header__lang-options {
    width: 100%;
    height: 100%;

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

    display: flex;
    flex-direction: column;

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

    transition: transform var(--transition-03) cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-transition: transform var(--transition-03) cubic-bezier(0.22, 1, 0.36, 1);
}

.header__lang-options._active {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
}

.header__lang-option-btn {
    width: 100%;

    display: flex;
    justify-content: flex-start;

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

/* Header -> Main */

.header__main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);

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

.header__cart-link--mobile {
    display: none;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--space-xs);
}

.header__cart-icon {
    width: 24px;
    height: 24px;
}

.header__logo-wrapper {
    height: 24px;

    display: flex;

    cursor: pointer;
}

.header__logo {
    height: 100%;
}

.header__links {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.header__cart-link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.header__cart-counter-badge {
    width: 20px;
    height: 20px;

    border-radius: 50%;

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

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

.header__cart-counter-badge._active {
    display: flex;
}

.header__cart-counter {
    font-size: var(--font-size-xxs);

    display: block;
}

.header__open-btn-wrapper {
    width: 157px;

    display: flex;
    justify-content: flex-end;
}

.header__open-btn {
    width: 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxs);

    cursor: pointer;
}

.header__open-btn-bar-wrapper {
    width: 100%;

    display: flex;
}

.header__open-btn-bar-wrapper:nth-child(1) {
    justify-content: flex-start;
}

.header__open-btn-bar-wrapper:nth-child(3) {
    justify-content: flex-end;
}

.header__open-btn-bar {
    height: 2px;

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

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.header__open-btn-bar-wrapper:nth-child(1) > .header__open-btn-bar {
    width: 50%;
}

.header__open-btn:hover > .header__open-btn-bar-wrapper:nth-child(1) > .header__open-btn-bar {
    width: 100%;
}

.header__open-btn-bar-wrapper:nth-child(2) > .header__open-btn-bar {
    width: 100%;
}

.header__open-btn-bar-wrapper:nth-child(3) > .header__open-btn-bar {
    width: 50%;
}

.header__open-btn:hover > .header__open-btn-bar-wrapper:nth-child(3) > .header__open-btn-bar {
    width: 100%;
}

/* Header -> Navigation */

.header__nav-wrapper {
    width: 100%;
    height: 100%;

    position: fixed;

    top: 0;
    left: 0;

    z-index: 2;

    pointer-events: none;
}

.header__nav-wrapper._active {
    pointer-events: unset;
}

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

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

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

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

    padding: var(--space-m);

    transition: transform var(--transition-03) cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-transition: transform var(--transition-03) cubic-bezier(0.22, 1, 0.36, 1);

    /* transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
    -webkit-transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1); */
}

.header__nav._visible {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
}

.header__nav-top {
    width: 100%;

    display: flex;
    justify-content: center;

    position: relative;
}

.header__nav-logo-wrapper {
    height: 24px;

    display: flex;

    cursor: pointer;
}

.header__nav-logo {
    height: 100%;
}

.header__close-btn-wrapper {
    display: flex;
    
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

    position: absolute;

    top: 50%;
    right: 0;
}

.header__close-btn {
    width: 24px;
    height: 24px;

    position: relative;
}

.header__close-btn > div {
    width: 100%;
    height: 2px;

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

    position: absolute;
}

.header__close-btn > div:nth-child(1) {
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    
    top: 50%;
}

.header__close-btn > div:nth-child(2) {
    transform: translateY(-50%) rotate(-45deg);
    -webkit-transform: translateY(-50%) rotate(-45deg);
    
    top: 50%;
}

.header__nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
}

.header__nav-link {
    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.header__nav-link:hover {
    color: var(--color-02);
}

.header__nav-bottom {
    height: 24px;
}

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

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

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

    .header__line > span {
        display: none;
    }

    /* Header -> Main */

    .header__main {
        flex-direction: row-reverse;
    }

    .header__cart-link--mobile {
        display: flex;
    }

    .header__bottom {
        width: unset;
    }

    .header__links {
        display: none;
    }

    .header__open-btn-wrapper {
        width: unset;

        right: unset;
        left: 0;
    }
}

@media (max-width: 480px) {
    /* Header -> Main */

    .header__logo-wrapper {
        height: 20px;
    }
}