.zs-account {
display: flex;
align-items: center;
gap: 18px;
position: relative;
}
.zs-account svg {
flex-shrink: 0;
}  .zs-account .zs-account__login,
.zs-account .zs-account__trigger {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: 0;
border-radius: 0;
padding: 6px 2px;
margin: 0;
color: var(--zs-navy, #2f4858);
font: inherit;
font-weight: 600;
line-height: 1;
text-align: left;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: color .15s ease;
}
.zs-account .zs-account__login:hover,
.zs-account .zs-account__trigger:hover,
.zs-account .zs-account__trigger:focus,
.zs-account .zs-account__trigger:focus-visible {
background: none;
border: 0;
color: var(--zs-accent, #f43c12);
outline: none;
}
.zs-account .zs-account__cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--zs-accent, #f43c12);
color: #fff;
padding: 11px 22px;
border-radius: 0;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background .15s ease;
}
.zs-account .zs-account__cta:hover {
background: var(--zs-accent-d, #d63410);
color: #fff;
} .zs-account__chevron {
transition: transform .18s ease;
}
.zs-account__trigger[aria-expanded="true"] .zs-account__chevron {
transform: rotate(180deg);
}
.zs-account__menu {
position: absolute;
top: calc(100% + 12px);
right: 0;
z-index: 999;
min-width: 240px;
background: #fff;
border: 1px solid #e3e6e8;
border-radius: 0;
box-shadow: 0 12px 32px rgba(15, 30, 40, .14);
padding: 8px 0;
}
.zs-account__menu[hidden] {
display: none;
} .zs-account__menu::before {
content: "";
position: absolute;
top: -7px;
right: 22px;
width: 12px;
height: 12px;
background: #fff;
border-left: 1px solid #e3e6e8;
border-top: 1px solid #e3e6e8;
transform: rotate(45deg);
}
.zs-account__greeting {
display: block;
padding: 10px 20px 12px;
margin-bottom: 6px;
border-bottom: 1px solid #eef0f1;
color: #6b7780;
font-size: .85em;
line-height: 1.3;
}
.zs-account__greeting strong {
display: block;
color: var(--zs-navy, #2f4858);
font-size: 1.1em;
}
.zs-account__menu a {
display: block;
padding: 11px 20px;
color: var(--zs-navy, #2f4858);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: background .12s ease, color .12s ease;
}
.zs-account__menu a:hover {
background: #f5f6f7;
color: var(--zs-accent, #f43c12);
}
.zs-account__logout {
margin-top: 6px;
padding-top: 14px !important;
border-top: 1px solid #eef0f1;
color: #6b7780 !important;
font-weight: 500 !important;
}
.zs-account__logout:hover {
color: var(--zs-accent, #f43c12) !important;
} @media (max-width: 767px) {
.zs-account {
gap: 12px;
} .zs-account__login span,
.zs-account__trigger > span {
display: none;
}
.zs-account__cta {
padding: 10px 16px;
font-size: .9em;
}
.zs-account__menu {
right: -8px;
min-width: 220px;
}
}