/*
 * Shared storefront header.
 * Loaded on every page (outside the `default-css` section) so these rules also
 * apply on pages that swap in a demo stylesheet instead of style.css.
 */

/* Account trigger: a profile circle with the user's initial (falls back to a
   person icon for guests). Shared by the desktop "My Account" dropdown and the
   mobile 3-dot slot. Sizing lives here (not style.css) so it also applies on the
   home page, which swaps in a demo stylesheet instead of style.css. */
.header-kebab-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--q2u-primary, #cfad3c);
    /* !important: the theme colours header dropdown anchors with the primary
       gold at a higher specificity, which would make the initial invisible on
       the gold circle. */
    color: #fff !important;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* Header background is dark and the other icons are flat — a soft white
       glow lifts the account circle off the bar. */
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

.header-kebab-avatar > span,
.header-kebab-avatar > i {
    color: inherit !important;
}

.header-kebab-avatar:hover,
.header-kebab-avatar:focus {
    background: var(--q2u-primary-active, #ba992e);
    color: #fff !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.65);
}

.header-kebab-avatar > i {
    font-size: 1.7rem;
}

/* No dropdown caret / tooltip arrow on the account trigger(s). */
.header-kebab > a::after,
.header-kebab > a::before,
.header-kebab::after,
.header-kebab-avatar::after,
.header-kebab-avatar::before {
    display: none !important;
    content: none !important;
}

/* Mobile: put a small, even gap between the cart icon and the kebab (3 dots).
   The cart count badge is absolutely positioned at right: -8px, so it overhangs
   the cart icon by ~0.8rem — the margin here has to clear that first, then add
   the visible gap on top. Keep this tight: a wide gap looks broken on inner
   pages where the row has more room. */
@media (max-width: 767px) {
    .header-middle .header-right .cart-dropdown {
        margin-right: 1.2rem !important;
    }

    .header-middle .header-right .header-kebab {
        margin-left: 0;
    }

    /* Match the left edge: the hamburger glyph sits flush against the
       container's left padding, so the account circle's right edge must sit
       flush against the right padding. */
    .header-middle .header-right {
        padding-right: 0;
    }
}

/* ===== Header account menu (shared: desktop "My Account" + mobile 3-dot) =====
   Storefront root font-size is 62.5% (1rem = 10px). Loaded after style.css so
   these win over the theme's .dropdown-box defaults. */
.dropdown-box.acct-menu {
    width: 25rem;
    max-width: calc(100vw - 2.4rem);
    padding: 0.6rem;
    border: 1px solid #ececec;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 14px 38px rgba(20, 20, 30, 0.16) !important;
}

.dropdown-box.acct-menu .acct-menu-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 0.4rem;
    border: 1px solid #f0efe9;
    border-radius: 0.7rem;
    background: linear-gradient(180deg, #faf7ef, #fff);
}

.dropdown-box.acct-menu .acct-menu-avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--q2u-primary, #cfad3c);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.dropdown-box.acct-menu .acct-menu-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dropdown-box.acct-menu .acct-menu-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-box.acct-menu .acct-menu-email {
    font-size: 1.1rem;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-box.acct-menu a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.1rem;
    border: 0 !important;
    border-radius: 0.6rem;
    color: #444;
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-box.acct-menu a > i {
    flex: none;
    width: 1.8rem;
    font-size: 1.35rem;
    text-align: center;
    color: var(--q2u-primary-dark, #c09c35);
}

.dropdown-box.acct-menu a:hover,
.dropdown-box.acct-menu a:focus {
    background: #f6f3ea;
    color: var(--q2u-primary-dark, #c09c35);
}

.dropdown-box.acct-menu a.acct-menu-highlight {
    color: var(--q2u-primary-dark, #c09c35);
    font-weight: 600;
}

.dropdown-box.acct-menu .acct-menu-sep {
    display: block;
    height: 1px;
    margin: 0.4rem 0.6rem;
    background: #f0f0f0;
}

.dropdown-box.acct-menu a.acct-menu-logout,
.dropdown-box.acct-menu a.acct-menu-logout > i {
    color: #b1442f;
}

.dropdown-box.acct-menu a.acct-menu-logout:hover {
    background: #fbecea;
    color: #b1442f;
}

/* ===== Slide-out cart (SideOverCart) Checkout button =====
   The button is a plain .btn.btn-primary. Bootstrap's CDN reset paints
   .btn:active / :focus-visible with its own blue (--bs-btn-active-bg /
   --bs-btn-hover-bg) at a higher specificity than the theme's flat
   .btn-primary override, so the button flashed blue on click. Pin every
   interactive state to the brand gold and drop the blue focus ring. */
.cart-dropdown .cart-action .btn-primary,
.cart-dropdown .cart-action .btn-primary:hover,
.cart-dropdown .cart-action .btn-primary:focus,
.cart-dropdown .cart-action .btn-primary:focus-visible,
.cart-dropdown .cart-action .btn-primary:active {
    color: #fff;
    background-color: var(--q2u-primary, #cfad3c);
    border-color: var(--q2u-primary, #cfad3c);
    box-shadow: none;
}

.cart-dropdown .cart-action .btn-primary:hover,
.cart-dropdown .cart-action .btn-primary:focus,
.cart-dropdown .cart-action .btn-primary:focus-visible,
.cart-dropdown .cart-action .btn-primary:active {
    background-color: var(--q2u-primary-active, #ba992e);
    border-color: var(--q2u-primary-active, #ba992e);
}