/* Customer header and left off-canvas navigation overrides. */
.customer-body .site-header,
.customer-body .site-nav {
    height: 72px;
}

.customer-body .site-nav {
    justify-content: flex-start;
    gap: 0;
}

.customer-header-logo {
    order: 0;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: 12px;
    border: 1px solid rgba(201, 162, 39, .42);
    border-radius: 8px;
    overflow: hidden;
}

.customer-header-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.customer-header-logo:hover,
.customer-header-logo:focus-visible {
    border-color: #c9a227;
    outline: 3px solid rgba(201, 162, 39, .28);
    outline-offset: 2px;
}

.customer-menu-toggle {
    order: 1;
    margin: 0 14px 0 0;
    border: 0;
}

.customer-body .brand {
    order: 2;
}

.customer-header-actions {
    order: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.customer-header-actions .notification-bell {
    color: #f6f1e7;
    text-decoration: none;
}

.customer-header-profile {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #c9a227;
    border-radius: 50%;
    background: #202020;
    color: #c9a227;
    font-weight: 800;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.customer-account-menu { position: relative; }
.customer-account-dropdown { position: absolute; z-index: 1100; top: calc(100% + 12px); right: 0; width: min(300px, calc(100vw - 24px)); overflow: hidden; border: 1px solid rgba(201, 162, 39, .55); border-radius: 14px; background: #111; box-shadow: 0 18px 45px rgba(0, 0, 0, .38); color: #f6f1e7; }
.customer-account-summary { padding: 16px 18px 14px; border-bottom: 1px solid rgba(201, 162, 39, .3); }
.customer-account-summary strong, .customer-account-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-account-summary strong { color: #e5c966; font-size: .9rem; }
.customer-account-summary span { margin-top: 3px; color: rgba(246, 241, 231, .72); font-size: .75rem; }
.customer-account-dropdown nav { display: grid; }
.customer-account-dropdown nav a { display: flex; min-height: 68px; padding: 13px 18px; flex-direction: column; justify-content: center; color: #f6f1e7; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
.customer-account-dropdown nav a + a { border-top: 1px solid rgba(246, 241, 231, .1); }
.customer-account-dropdown nav a:hover, .customer-account-dropdown nav a:focus-visible { background: rgba(201, 162, 39, .16); color: #fff; outline: 0; }
.customer-account-dropdown nav a:focus-visible { box-shadow: inset 3px 0 #c9a227; }
.customer-account-dropdown nav strong { font-size: .86rem; }
.customer-account-dropdown nav span { margin-top: 2px; color: rgba(246, 241, 231, .65); font-size: .72rem; }
.customer-account-dropdown .customer-account-logout { border-top-color: rgba(201, 162, 39, .42); }
.customer-account-dropdown .customer-account-logout strong { color: #e5c966; }
.profile-account-layout {
    display: flex;
    justify-content: center;
    width: min(100% - 32px, 720px);
    margin-inline: auto;
}

.profile-account-card {
    width: 100%;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 20px;
}

.profile-account-card > .section-label,
.profile-account-card > h1 {
    text-align: center;
}

.profile-account-card > h1 {
    margin-bottom: 0;
}

.profile-account-form {
    width: 100%;
    gap: 20px;
    margin-top: 28px;
}

.profile-account-form .form-group {
    width: 100%;
    gap: 7px;
}

.profile-account-form .form-group label {
    text-align: left;
}

.profile-account-form .form-group input {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    text-align: left;
}

.profile-account-form > .btn-primary {
    width: 100%;
    min-height: 50px;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 520px) {
    .profile-account-layout { width: min(100% - 24px, 720px); }
    .profile-account-card { padding: 22px 18px; }
    .profile-account-form { gap: 17px; margin-top: 22px; }
}

.customer-header-profile:hover,
.customer-header-profile:focus-visible {
    background: #c9a227;
    color: #0a0a0a;
    outline: 3px solid rgba(201, 162, 39, .28);
    outline-offset: 2px;
}

.customer-menu-overlay {
    background: rgba(0, 0, 0, .6);
}

.customer-menu-drawer {
    left: 0;
    right: auto;
    width: min(310px, 85vw);
    transform: translateX(-105%);
    border-left: 0;
    border-right: 1px solid rgba(201, 162, 39, .4);
    box-shadow: 18px 0 45px rgba(0, 0, 0, .36);
}

.customer-menu-header {
    min-height: 62px;
    justify-content: flex-end;
    border-bottom: 0;
}

.customer-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(201, 162, 39, .42);
    border-radius: 10px;
    background: #0a0a0a;
    color: #c9a227;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
}

.customer-sidebar-brand img {
    display: block;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.customer-sidebar-brand span {
    white-space: nowrap;
}

.customer-sidebar-brand:hover,
.customer-sidebar-brand:focus-visible {
    color: #e5d3a1;
    outline: 2px solid #c9a227;
    outline-offset: 4px;
}

.customer-menu-open .customer-menu-drawer {
    transform: translateX(0);
}

@media (max-width: 480px) {
    .customer-menu-drawer {
        width: 85vw;
    }

    .customer-header-logo {
        width: 42px;
        height: 42px;
        margin-right: 10px;
    }

    .customer-menu-toggle {
        margin-right: 12px;
    }

    .customer-body .brand {
        font-size: 1rem;
    }

    .customer-sidebar-brand {
        padding: 10px 12px;
        font-size: 1.2rem;
    }

    .customer-sidebar-brand img {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .customer-header-actions {
        gap: 2px;
    }

    .customer-header-profile {
        width: 38px;
        height: 38px;
    }

}