/* ============================================================
   newdgrie/default — _03_header.css  (clean rewrite v2)

   Header chrome: utility bar + brand block + nav row + drawer.

   Sticky transition strategy:
     The header has 3 stacked rows. On scroll, the top two rows
     (utility + brand) collapse and the third (nav row) becomes
     a compact sticky bar.

     We use transform + position-sticky on the nav row only,
     instead of animating max-height/padding on the whole header.
     This keeps the browser on the GPU compositor (no layout
     thrashing) — which is what causes the "flicker" between
     the two states.
   ============================================================ */


/* ── HEADER WRAPPER ───────────────────────────────────────── */

.dg-header {
    position: relative;
    z-index: var(--dg-z-sticky);
    background: var(--dg-cream);
    isolation: isolate;
}


/* ── UTILITY BAR (top) ────────────────────────────────────── */

.dg-utility {
    border-bottom: 1px solid var(--dg-line);
    font-size: var(--dg-text-sm);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-muted);
    background: var(--dg-cream);
}

.dg-utility__inner {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 10px var(--dg-gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dg-utility__left,
.dg-utility__right {
    display: flex;
    gap: 18px;
    align-items: center;
}

/* Hide utility bar on mobile (incl. Chrome iOS that reports vp 1259) */
@media (max-width: 1024px),
       (pointer: coarse) and (max-width: 1400px) {
    .dg-utility { display: none; }
}


/* ── BRAND BLOCK (centred big logo) ───────────────────────── */

.dg-brand {
    text-align: center;
    padding: 56px var(--dg-gutter) 36px;
    background: var(--dg-cream);
}

.dg-brand__link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--dg-ink);
    text-decoration: none;
}
.dg-brand__link:hover { color: var(--dg-ink); }

.dg-brand__logo {
    height: 80px;
    width: auto;
    max-width: 100%;
    display: block;
}

.dg-brand__wordmark {
    font-family: var(--dg-font-serif);
    font-size: 56px;
    letter-spacing: 0.4em;
    padding-left: 0.4em;
    line-height: 1;
}

.dg-brand__tagline {
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--dg-faint);
}

/* Hide big centered brand block on mobile.
   Chrome iOS reports vp ~1259 even on phones (DPR 3) so we
   pair max-width with pointer:coarse to catch touch devices
   regardless of how they report viewport width. */
@media (max-width: 1024px),
       (pointer: coarse) and (max-width: 1400px) {
    .dg-brand { display: none; }
}


/* ════════════════════════════════════════════════════════════
   NAV ROW — fixed position when scrolled

   We use position:fixed (toggled via body.is-scrolled by JS)
   instead of position:sticky. This is more verbose but works
   reliably regardless of any ancestor's overflow/transform/
   will-change properties — sticky was being broken by some
   ancestor we couldn't easily change.

   When NOT scrolled: nav row is in normal flow under the brand.
   When scrolled past brand: nav row becomes fixed at top of
   viewport, and a spacer takes its place to prevent layout jump.
   ════════════════════════════════════════════════════════════ */

.dg-nav-row {
    position: relative;
    z-index: 100;
    background: var(--dg-cream);
    border-bottom: 1px solid var(--dg-line);
    transition: background var(--dg-duration-base) var(--dg-ease),
                color      var(--dg-duration-base) var(--dg-ease),
                border-color var(--dg-duration-base) var(--dg-ease),
                box-shadow var(--dg-duration-base) var(--dg-ease);
}

body.is-scrolled .dg-nav-row {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--dg-ink);
    color: var(--dg-paper);
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* Spacer prevents layout jump when nav becomes fixed.
   JS sets its height to match nav row before applying
   .is-scrolled to body. */
.dg-nav-spacer {
    display: none;
    width: 100%;
}
body.is-scrolled .dg-nav-spacer {
    display: block;

}

.dg-nav-row__inner {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 0 var(--dg-gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 64px;
    flex-wrap: nowrap;
    position: relative;
}

.dg-nav-row__left {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
}

.dg-nav-row__right {
    display: flex;
    gap: 18px;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}


/* ── HAMBURGER ────────────────────────────────────────────── */

.dg-hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin-left: -8px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.dg-hamburger span {
    width: 20px;
    height: 1.5px;
    background: var(--dg-ink);
    transition: background var(--dg-duration-fast) var(--dg-ease);
}
body.is-scrolled .dg-hamburger span { background: var(--dg-paper); }


/* ── ICON BUTTONS ─────────────────────────────────────────── */

.dg-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--dg-ink);
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: color var(--dg-duration-fast) var(--dg-ease),
                background var(--dg-duration-fast) var(--dg-ease);
    text-decoration: none;
}
.dg-icon-btn:hover {
    color: var(--dg-gold);
    background: rgba(0, 0, 0, 0.03);
}
body.is-scrolled .dg-icon-btn        { color: var(--dg-paper); }
body.is-scrolled .dg-icon-btn:hover  {
    color: var(--dg-gold-soft);
    background: rgba(255, 255, 255, 0.05);
}


/* ── ICON BUTTON VISIBILITY FLAGS ──
   Two search buttons exist in the markup: one in __left for
   desktop (where action icons traditionally live next to
   utility links) and one in __right for mobile (where the
   thumb naturally rests). We toggle which one shows based on
   viewport. The base state is "visible everywhere"; the
   media-query overrides hide each in the wrong context. */

.dg-icon-btn--mobile-only {
    /* Default: hidden on desktop. Shown by the mobile media
       query at the bottom of this file. */
    display: none;
}


/* ── MINI BRAND ───────────────────────────────────────────── */

.dg-brand-mini {
    display: none;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
}
body.is-scrolled .dg-brand-mini {
    display: inline-flex;
}

/* On mobile, the big .dg-brand is hidden — so mini must show
   in the nav row at all times, scrolled or not. Without this
   the header has no logo on phones (Chrome iOS vp 1259 case). */
@media (max-width: 1024px),
       (pointer: coarse) and (max-width: 1400px) {
    .dg-brand-mini { display: inline-flex; }
}

.dg-brand-mini__logo {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);   /* white version on ink */
}
.dg-brand-mini__wordmark {
    font-family: var(--dg-font-serif);
    font-size: 20px;
    letter-spacing: 0.4em;
    padding-left: 0.4em;
    color: var(--dg-paper);
}


/* ── RIGHT TEXT LINKS ─────────────────────────────────────── */

.dg-link-utility {
    font-family: var(--dg-font-sans);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dg-ink);
    text-decoration: none;
    padding: 6px 2px;
    transition: color var(--dg-duration-fast) var(--dg-ease);
    white-space: nowrap;
}
.dg-link-utility:hover { color: var(--dg-gold); }
body.is-scrolled .dg-link-utility       { color: var(--dg-paper); }
body.is-scrolled .dg-link-utility:hover { color: var(--dg-gold-soft); }

.dg-link-utility--bag {
    display: inline-flex;
    gap: 6px;
}
.dg-bag-count { color: var(--dg-muted); }
body.is-scrolled .dg-bag-count { color: var(--dg-faint); }


/* ── LANG SWITCH ──────────────────────────────────────────── */

.dg-langswitch {
    display: inline-flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dg-langswitch__item        { color: var(--dg-muted); }
.dg-langswitch__item.is-current {
    color: var(--dg-ink);
    font-weight: var(--dg-weight-medium);
}
.dg-langswitch__item a { color: inherit; text-decoration: none; }
.dg-langswitch__item + .dg-langswitch__item::before {
    content: "·";
    margin-right: 10px;
    color: var(--dg-line);
}


/* ── BREADCRUMBS ──────────────────────────────────────────── */

.dg-breadcrumbs {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: var(--dg-space-lg) var(--dg-gutter) 0;
    font-size: var(--dg-text-xxs);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-faint);
}
.dg-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.dg-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dg-breadcrumbs__item + .dg-breadcrumbs__item::before {
    content: "→";
    color: var(--dg-line);
    font-size: 11px;
}
.dg-breadcrumbs__item a       { color: var(--dg-muted); text-decoration: none; }
.dg-breadcrumbs__item a:hover { color: var(--dg-ink); }
.dg-breadcrumbs__item.is-last span { color: var(--dg-ink); }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1280px) {
    .dg-nav-row__inner { gap: 18px; }
    .dg-nav-row__right { gap: 14px; }
}

@media (max-width: 1180px) {
    .dg-nav-row__inner { gap: 14px; }
    .dg-nav-row__right { gap: 12px; }
    .dg-link-utility   { font-size: 11px; letter-spacing: 0.16em; }
}


/* ── MOBILE: switch to grid (☰ | logo | bag) ─────────────── */

/* Trigger this block on real touch devices regardless of how
   the browser reports its viewport. Chrome iOS reports vp 1259
   on phones with DPR 3 — without (pointer:coarse) it would fall
   through to desktop styles. */
@media (max-width: 1024px),
       (pointer: coarse) and (max-width: 1400px) {
    /* On mobile we have:
         left  : hamburger (small)
         center: brand mini (DGRIE)
         right : 🔍 + ♡ + BAG (wider)

       Layout uses flex with absolute-centered brand to keep
       DGRIE in the visual centre of the viewport regardless
       of how wide the right-side cluster is.

       All tap targets meet the 44×44px iOS minimum so the
       header doesn't feel cramped on a phone. */

    /* On mobile we want THREE visual zones:
         left  : hamburger + search   (grouped, no gap between them)
         center: brand mini           (absolutely centered)
         right : ⇄ + ♡ + bag

       Using justify-content: space-between would distribute
       hamburger / __left / __right evenly across the row,
       which would push search away from the hamburger. So we
       drop space-between and instead push __right to the far
       edge with margin-left: auto, keeping hamburger and
       __left snug together on the left side. */
    .dg-nav-row__inner {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        min-height: 76px;
        padding: 0 18px;
    }

    /* Hamburger: 56px tap target (Apple HIG comfort zone),
       lines scaled to feel substantial without overpowering. */
    .dg-hamburger {
        display: flex;
        width: 56px;
        height: 56px;
        margin-left: -12px;          /* visually align to gutter, not tap edge */
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .dg-hamburger span {
        width: 28px;
        height: 2px;
    }

    /* Left cluster sits IMMEDIATELY after the hamburger — no
       gap from __inner means search can sit flush against the
       hamburger's tap area. */
    .dg-nav-row__left {
        display: flex;
        gap: 4px;
        align-items: center;
        flex: 0 0 auto;
    }

    /* Push the right cluster to the far edge of the row.
       Without this the left + center elements would all huddle
       to the left and right would float somewhere in between. */
    .dg-nav-row__right {
        margin-left: auto;
    }

    /* Toggle visibility flags in mobile viewport: SHOW the
       __left search button (which lives next to the hamburger
       now) and HIDE the __right one. */
    .dg-icon-btn--desktop-only { display: inline-flex; }
    .dg-icon-btn--mobile-only  { display: none; }

    /* Mini brand wrapper: tap area scales with wordmark.

       Centered absolutely between the left and right icon
       clusters. We constrain its max-width so a long wordmark
       can't push past the icon clusters and overlap with the
       search button (left side) or compare/wishlist/bag
       (right side). The 240px reserved space accounts for:
         - 56px × ~3 icons on each side at the widest
         - inter-icon gap
         - some breathing room at the page edges
       Browsers that don't support clamp/calc fall back to the
       font-size floor, which still fits inside the reserved
       gutter on a 320px-wide phone. */
    .dg-brand-mini {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: auto;
        min-height: 56px;
        padding: 8px 10px;
        max-width: calc(100vw - 240px);
        overflow: hidden;
        white-space: nowrap;
    }
    .dg-brand-mini__logo     { filter: none; }
    .dg-brand-mini__wordmark {
        color: var(--dg-ink);
        /* Reduced from 7vw / 44px ceiling to keep the wordmark
           from crowding the icon clusters on narrow phones.
           "DGRIE" with 0.18em tracking at 24px font ≈ 130px
           wide, comfortably inside our 240px-reserved gutter
           on a 360px-wide phone. */
        font-size: clamp(20px, 5vw, 32px);
        letter-spacing: 0.18em;
        padding-left: 0.18em;
        font-weight: 400;
        line-height: 1;
    }
    body.is-scrolled .dg-brand-mini__logo     { filter: brightness(0) invert(1); }
    body.is-scrolled .dg-brand-mini__wordmark { color: var(--dg-paper); }

    /* Right-side cluster: bigger gap, larger icons. */
    .dg-nav-row__right {
        gap: 6px;
        margin-right: -8px;          /* visually align tap edge to gutter */
    }

    /* All icon buttons get a 56×56 tap target — luxe-feel on phones
       while still under Apple's 60-tap-target ceiling. */
    .dg-icon-btn {
        width: 56px;
        height: 56px;
    }
    .dg-icon-btn svg {
        width: 26px;
        height: 26px;
        stroke-width: 1.6;
    }

    /* Bag link gets bigger type + tappable padding. */
    .dg-link-utility {
        font-size: 13px;
        letter-spacing: 0.16em;
        padding: 12px 8px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .dg-link-utility--account { display: none; }
}

/* ── PHONE NARROW — icon-only bag, tighter spacing ─────────
   Below 480px (or phone in portrait), drop the "BAG" word and
   show a pure icon for symmetry with hamburger + heart. The
   wordmark already scales via clamp() so we don't need to
   override font-size here. */

@media (max-width: 480px),
       (pointer: coarse) and (max-width: 600px) {

    .dg-nav-row__inner {
        min-height: 88px;
        padding: 0 14px;
    }

    /* On the very narrowest phones the row gets cramped with
       4 icons (search, wishlist, bag, plus the hamburger).
       Reduce icon size slightly here so they all fit. */
    .dg-icon-btn {
        width: 48px;
        height: 48px;
    }

    /* Bag — icon-only on narrow phones */
    .dg-link-utility--bag span { display: none; }
    .dg-link-utility--bag {
        width: 48px;
        height: 48px;
        padding: 0;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .dg-link-utility--bag::before {
        content: "";
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7h12l-1 13H7L6 7z'/><path d='M9 7V5a3 3 0 0 1 6 0v2'/></svg>");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    body.is-scrolled .dg-link-utility--bag::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7h12l-1 13H7L6 7z'/><path d='M9 7V5a3 3 0 0 1 6 0v2'/></svg>");
    }

    .dg-nav-row__right {
        gap: 2px;
        margin-right: -8px;
    }
}


/* ── COMPARE BUTTON + COUNT BADGE ──
   The compare link in the nav-row needs a count next to its
   icon (the wishlist link doesn't, but compare is more
   action-oriented — users want to see "do I have items
   waiting to compare?" at a glance).

   Layout: the link itself stays an icon-button-sized circle,
   but contains both the SVG and a small "(n)" pill that sits
   to the right of the icon. We give it a bit more horizontal
   padding to fit. */

.dg-icon-btn--compare {
    width: auto;                /* override the 36×36 default */
    min-width: 36px;
    padding: 0 10px;
    border-radius: 18px;        /* pill rather than circle */
    gap: 6px;
}
.dg-icon-btn--compare .dg-icon-btn__count {
    font-family: var(--dg-font-sans);
    font-size: 12px;
    font-weight: var(--dg-weight-medium);
    letter-spacing: 0.04em;
    color: var(--dg-muted);
    line-height: 1;
}
.dg-icon-btn--compare:hover .dg-icon-btn__count {
    color: inherit;
}
body.is-scrolled .dg-icon-btn--compare .dg-icon-btn__count {
    color: var(--dg-faint);
}
.dg-icon-btn--compare:empty,
.dg-icon-btn--compare .dg-icon-btn__count:empty {
    /* When count is empty, the badge collapses naturally —
       no extra width since the empty span has no content. */
}

/* On mobile, the logo sits absolutely centered between the
   left and right nav clusters. If the right cluster is too
   wide (e.g. compare in pill form WITH count), the absolutely
   positioned logo gets visually overlapped. So we collapse
   compare back to icon-only — same shape as wishlist — at
   all mobile breakpoints, hiding the (n) count. The count is
   still meaningful info, but on a phone the compare *page*
   is one tap away anyway, and keeping the row compact wins. */
@media (max-width: 1024px),
       (pointer: coarse) and (max-width: 1400px) {
    .dg-icon-btn--compare {
        width: 56px;
        min-width: 56px;
        padding: 0;
        border-radius: 50%;
    }
    .dg-icon-btn--compare .dg-icon-btn__count {
        display: none;
    }
}

/* No special handling needed below 480px — already icon-only
   from the rule above. */

/* ==========================================================
   ACCOUNT DROPDOWN — Phase 7a.1 (May 2026)
   ----------------------------------------------------------
   Logged-in users see a "Account ▾" button that toggles a
   small menu (Dashboard / Orders / Size profile / Wishlist /
   Sign out). Logged-out users see the plain "Sign in" link
   (no dropdown).

   Mobile (<1024): trigger collapses to plain "Account" link
   and the sub-links surface in the drawer instead.
   ========================================================== */

.dg-acct-dd {
    position: relative;
    display: inline-block;
}

.dg-acct-dd__trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--dg-font-sans);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dg-ink);
    padding: 6px 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--dg-duration-fast) var(--dg-ease);
    white-space: nowrap;
}
.dg-acct-dd__trigger:hover { color: var(--dg-gold); }
body.is-scrolled .dg-acct-dd__trigger       { color: var(--dg-paper); }
body.is-scrolled .dg-acct-dd__trigger:hover { color: var(--dg-gold-soft); }

.dg-acct-dd__chev {
    font-size: 9px;
    line-height: 1;
    margin-top: 1px;
    transition: transform var(--dg-duration-fast) var(--dg-ease);
    opacity: 0.7;
}
.dg-acct-dd__trigger[aria-expanded="true"] .dg-acct-dd__chev {
    transform: rotate(180deg);
}

/* Menu — hidden by default, opens on aria-expanded=true */
.dg-acct-dd__menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 200px;
    background: var(--dg-paper, #fff);
    border: 0.5px solid var(--dg-line, #e8e6e0);
    box-shadow: 0 8px 24px rgba(26,26,26, 0.08);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dg-duration-fast, 150ms) var(--dg-ease, cubic-bezier(.4,0,.2,1)),
                transform var(--dg-duration-fast, 150ms) var(--dg-ease, cubic-bezier(.4,0,.2,1)),
                visibility 0s linear var(--dg-duration-fast, 150ms);
    z-index: 100;
}
.dg-acct-dd__trigger[aria-expanded="true"] + .dg-acct-dd__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.dg-acct-dd__item {
    display: block;
    padding: 10px 20px;
    color: var(--dg-ink-soft, #4a4a4a);
    font-family: var(--dg-font-sans);
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-decoration: none;
    text-transform: none;
    transition: background var(--dg-duration-fast, 150ms),
                color var(--dg-duration-fast, 150ms);
}
.dg-acct-dd__item:hover {
    background: var(--dg-cream, #fafaf7);
    color: var(--dg-ink, #1a1a1a);
}

.dg-acct-dd__sep {
    display: block;
    height: 0.5px;
    background: var(--dg-line, #e8e6e0);
    margin: 8px 0;
}

.dg-acct-dd__item--signout {
    color: var(--dg-muted, #6b6b6b);
    font-size: 12px;
    letter-spacing: 0.08em;
}
.dg-acct-dd__item--signout:hover {
    color: var(--dg-error, #a04545);
    background: var(--dg-cream, #fafaf7);
}

/* Scrolled state — keep menu light on dark sticky nav */
body.is-scrolled .dg-acct-dd__menu {
    /* menu itself stays light; just ensures pop-out remains
       readable when the trigger inverts colors */
    background: var(--dg-paper, #fff);
    color: var(--dg-ink, #1a1a1a);
}

/* Mobile (<1024): collapse dropdown — drawer handles sub-links */
@media (max-width: 1023px) {
    .dg-acct-dd { display: none; }
}

/* Drawer sign-out — de-emphasized */
.dg-drawer__signout {
    color: var(--dg-muted, #6b6b6b) !important;
    font-size: 12px !important;
    letter-spacing: 0.1em;
}
.dg-drawer__signout::before {
    content: '↪ ';
    margin-right: 2px;
    opacity: 0.7;
}


/* ==========================================================
   FIX — Account dropdown z-index + visibility (Phase 7a.1 hotfix)
   ----------------------------------------------------------
   Issue: .dg-nav-row has z-index:100 and the menu was set to
   z-index:100 — they tied, so the menu often rendered behind
   sibling nav row pieces. Also, when body.is-scrolled flips
   the nav row to position:fixed, it creates a new stacking
   context — and the absolute-positioned menu inside it gets
   trapped under any other fixed/sticky element on the page.

   The fix:
     1. Bump menu z-index to 1100 (above sticky=50, modal=1000)
     2. Force the dropdown wrapper to be its own stacking
        context with isolation:isolate so its menu always sits
        above EVERYTHING in the header
     3. Switch from adjacent-sibling (+) to descendant selector
        anchored on the wrapper — this is rock solid regardless
        of whitespace or DOM ordering quirks
   ========================================================== */

.dg-acct-dd {
    /* New stacking context anchor — guarantees menu wins */
    isolation: isolate;
    z-index: 1101;
}

.dg-acct-dd__menu {
    z-index: 1100 !important;
}

/* Descendant selector fallback (in case the adjacent + selector
   missed due to whitespace / DOM oddities). Both selectors are
   active; whichever applies first wins, and the result is the
   same — menu visible when [aria-expanded="true"] on the trigger. */
.dg-acct-dd:has([data-dg-acct-dd-trigger][aria-expanded="true"]) .dg-acct-dd__menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition-delay: 0s !important;
}

/* Older browsers without :has() — use a JS-toggled class instead.
   This rule is the actual "open" hook. header.js sets .is-open on
   the wrapper whenever aria-expanded flips true. */
.dg-acct-dd.is-open .dg-acct-dd__menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition-delay: 0s !important;
}