.header-account-trigger {
    position: relative;
    width: 43px;
    height: 43px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--dark-line);
    border-radius: 13px;
    background: #ffffff0a;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 19px;
}

.header-account-trigger.is-authenticated {
    grid-template-columns: 1fr 12px;
    padding-inline: 8px 5px;
    border-color: #ff812f66;
    background: linear-gradient(145deg, #2a1710, #161719);
    color: #fff;
    box-shadow: 0 8px 20px #0004;
}

.header-account-trigger i {
    color: #ff7218;
    font-size: 12px;
    font-style: normal;
    transition: transform .22s ease;
}

.header-account-menu.is-open > nav,
.header-account-menu:hover > nav,
.header-account-menu:focus-within > nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.header-account-menu.is-open .header-account-trigger i {
    transform: rotate(180deg);
}

.header-account-menu > nav {
    pointer-events: none;
    z-index: 1200;
}

.mobile-menu-account-card {
    margin: 0 4px 14px;
}

.mobile-menu-account-card .mobile-menu-account {
    margin: 0;
}

.mobile-menu-account-card.is-logged-in {
    overflow: hidden;
    border: 1px solid #ff812f70;
    border-radius: 16px;
    background: linear-gradient(145deg, #21130e, #111416);
    box-shadow: 0 12px 28px #0008;
}

.mobile-menu-account-card.is-logged-in .mobile-menu-account {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.mobile-account-logout--primary {
    margin: 0 10px 10px;
    padding-top: 9px;
    border-top: 1px solid #ffffff1a;
}

.mobile-account-logout--primary button {
    justify-content: center;
    border-color: #ff876966;
    background: linear-gradient(135deg, #3b1713, #271313);
    color: #ffb19e;
    font-weight: 800;
}

@media (max-width: 680px) {
    .header-account-menu.is-logged-in {
        display: block;
    }

    .header-account-menu.is-logged-in .header-account-trigger {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .header-account-menu.is-logged-in > nav {
        position: fixed;
        top: 68px;
        left: 12px;
        width: min(280px, calc(100vw - 24px));
        max-height: calc(100dvh - 86px);
        overflow-y: auto;
        scrollbar-width: none;
    }

    .header-account-menu.is-logged-in > nav::-webkit-scrollbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-account-trigger i {
        transition: none;
    }
}