/* ==========================================================================
   FEWSET — HEADER
   Shell, brand, desktop nav links, actions, responsive layout
   Mega menu styles are in mega-menu.css
   ========================================================================== */


/* ==========================================================================
   1. HEADER SHELL — Sticky glass, structural border
   ========================================================================== */

.ql-header {
    /* Floating, centred glass panel — inset from the top + sides, sharp corners,
       and it stays glass at every scroll position (no solid-white state). */
    --qlh-gap: 14px;          /* gap above the panel + inset on each side */
    --qlh-maxw: 1360px;       /* max width of the floating panel */
    position: sticky;
    top: var(--qlh-gap);
    z-index: 100;
    width: calc(100% - 2 * var(--qlh-gap));
    max-width: var(--qlh-maxw);
    margin: var(--qlh-gap) auto 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.13);
    transition: background var(--duration-slow) var(--ease-luxe),
                box-shadow var(--duration-slow) var(--ease-luxe);
}

/* Stays glass on scroll — only deepen the float shadow a touch (no solid fill). */
.ql-header.scrolled {
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
}

.ql-header__inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ql-header__toprow,
.ql-header__search-row {
    width: 100%;
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
}

.ql-header__toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
    min-height: 78px;
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-3);
}

.ql-header__primary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1.25rem, 2vw, 2.5rem);
    min-width: 0;
    flex: 1;
}

.ql-header__search-row {
    padding-top: 0;
    padding-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
}

.ql-header__search-row > * {
    width: min(100%, 760px);
}

.ql-header__search-row:empty {
    display: none;
}

/* Row 2 wrapper (nav + search) — desktop only */
.ql-header__row2 {
    display: none;
}


/* ==========================================================================
   2. BRAND / LOGO
   ========================================================================== */

.ql-header__brand {
    flex-shrink: 0;
}

.ql-header__brand .site-title {
    font-family: var(--font-primary);
    font-size: var(--headline-sm);
    font-weight: 700;
    letter-spacing: -0.04em;
    margin: 0;
    line-height: 1;
}

.ql-header__brand .site-title a {
    color: var(--on-surface);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease-luxe);
}

.ql-header__brand .site-title a:hover {
    color: var(--on-surface-variant);
}

.ql-header__logo img,
.ql-header__brand .custom-logo {
    max-height: 80px;
    width: auto;
}


/* ==========================================================================
   3. DESKTOP NAVIGATION — Top-level links
   ========================================================================== */

.ql-desktop-nav {
    flex: 0 1 auto;
    display: none;
    justify-content: flex-start;
    min-width: 0;
}

@media (min-width: 1025px) {
    .ql-desktop-nav { display: flex; }
}

.ql-desktop-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.ql-desktop-menu > li {
    position: relative;
}

/* On desktop, make li static so .sub-menu positions relative to .ql-header (sticky) */
@media (min-width: 1025px) {
    .ql-desktop-menu > li {
        position: static;
    }
}

.ql-desktop-menu > li > a {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--label-md);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--on-surface-variant);
    text-decoration: none;
    padding: var(--spacing-2) var(--spacing-4);
    position: relative;
    transition: color var(--duration-base) var(--ease-luxe);
}

.ql-desktop-menu > li > a:hover,
.ql-desktop-menu > li > a:focus-visible,
.ql-desktop-menu > li.current-menu-item > a,
.ql-desktop-menu > li.current-menu-ancestor > a,
.ql-desktop-menu > li.current_page_item > a {
    color: var(--on-surface);
}

/* Active indicator */
.ql-desktop-menu > li.current-menu-item > a::after,
.ql-desktop-menu > li.current_page_item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--spacing-4);
    right: var(--spacing-4);
    height: 1px;
    background: var(--primary);
}

/* Hover indicator */
.ql-desktop-menu > li > a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--neutral-300);
    transition: width var(--duration-base) var(--ease-luxe),
                left var(--duration-base) var(--ease-luxe);
}

.ql-desktop-menu > li > a:hover::before {
    width: calc(100% - var(--spacing-8));
    left: var(--spacing-4);
}

.ql-desktop-menu > li.current-menu-item > a::before,
.ql-desktop-menu > li.current_page_item > a::before {
    display: none;
}


/* ==========================================================================
   4. HEADER ACTIONS (right side icons)
   ========================================================================== */

.ql-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px; /* space between header actions */
    flex-shrink: 0;
}

/* Header icons are plain glyphs — never a hover/tap background box */
.ql-header__actions a,
.ql-header__actions button { -webkit-tap-highlight-color: transparent; }
.ql-header__actions a,
.ql-header__actions a:hover,
.ql-header__actions a:focus,
.ql-header__actions a:active,
.ql-header__actions button,
.ql-header__actions button:hover,
.ql-header__actions button:focus,
.ql-header__actions button:active {
    background: transparent !important;
    box-shadow: none !important;
    border: none;
}

/* A touch bolder, and a consistent height — the heart's art is shorter than the
   others, so render it a little larger. (CSS stroke-width overrides the inline
   SVG attribute, scoped to the header so other uses are untouched.) */
.ql-header__actions .fewset-account-trigger svg,
.ql-header__actions .fewset-cart-trigger svg { stroke-width: 16; }
.ql-header__actions .ql-search-trigger--icon svg,
.ql-header__actions .fewset-wl-trigger svg { stroke-width: 34; }

/* Hairline separating the search icon from the account / wishlist / cart group.
   currentColor so it adapts with the header theme. Desktop only — the mobile
   actions sit too tight for it. (.fewset-account is already position:relative.) */
@media (min-width: 1025px) {
    .ql-header__actions .fewset-account::before {
        content: "";
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 16px;
        background: currentColor;
        opacity: .22;
        pointer-events: none;
    }
}


/* ==========================================================================
   5. RESPONSIVE LAYOUT
   ========================================================================== */

/* Admin bar — header always at top:0, no gap */
/* Admin bar present: keep the floating gap (margin-top), just stick below the bar. */
body.admin-bar .ql-header { top: 32px; }

/* Scroll-lock compensation — when search / mega-menu / cart lock the body,
   pad the removed scrollbar so the page and top bar don't jump sideways.
   --fewset-sbw is set from JS (mega-menu.js) to the real scrollbar width. */
body.mm-lock,
body.fewset-cart-lock,
body.ql-search-lock {
    padding-right: var(--fewset-sbw, 0px);
}


/* ---- DESKTOP main header: static full layout (logo centre + icons top / menu 70% + search 30%).
       Sticky — one header that stays pinned at the top on scroll (no minibar). ---- */

@media (min-width: 1025px) {
    .mm--mobile { display: none !important; }

    /* Single row inside the pill: nav (left) · logo (centre) · icons (right).
       display:contents promotes the toprow/row2 children to grid items of
       .ql-header__inner so there's no duplicated markup. */
    .ql-header__toprow,
    .ql-header__row2 { display: contents; }

    .ql-header__inner {
        display: grid;
        position: relative;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "nav logo actions";
        align-items: center;
        column-gap: clamp(1rem, 2vw, 2rem);
        padding: 0.45rem clamp(1rem, 2.5vw, 2rem);
    }

    .ql-header__primary { grid-area: logo; justify-self: center; }
    .ql-header__brand { position: static; left: auto; top: auto; transform: none; }
    .ql-header__logo img,
    .ql-header__brand .custom-logo { max-height: 56px; }

    .ql-desktop-nav { grid-area: nav; justify-self: start; display: flex; min-width: 0; }
    .ql-desktop-menu { justify-content: flex-start; }
    .ql-desktop-menu > li > a { white-space: nowrap; }

    .ql-header__actions { grid-area: actions; justify-self: end; margin: 0; }

    .ql-header__search-row { display: none !important; }
}



/* ---- MOBILE: hamburger left, logo centred, icons right ---- */

@media (max-width: 1024px) {
    .ql-header {
        transition: background var(--duration-slow) var(--ease-luxe),
                    box-shadow var(--duration-slow) var(--ease-luxe);
    }

    /* The mega-menu drawer/overlay are position:fixed but live INSIDE the header,
       so the header's `transform` (hide-on-scroll) and `backdrop-filter` (glass)
       make it their containing block — when the body is pinned on open the drawer
       would ride off with the displaced header. Neutralise those props while the
       mega-menu is open so the drawer stays viewport-fixed.

       SCOPE = .mm-lock (mega-menu ONLY), NOT the shared .fewset-locked. The cart and
       search drawers are children of <body> (verified), not the header, so they
       gain nothing from this. Worse: a previous build scoped it to .fewset-locked,
       and on the immersive PDP — where the header is HIDDEN via transform:translateY
       off-screen — opening the cart/search stripped that transform back to none and
       slid the header ~95px down into view. THAT pop-in was the "scroll jump" on
       open. Leaving the header untouched for cart/search keeps it hidden = no jump. */
    body.mm-lock .ql-header {
        transform: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        will-change: auto !important;
        transition: none !important;   /* land instantly under the drawer, no slide */
    }

    .ql-header__inner {
        padding: 0;
    }

    .ql-header__toprow {
        min-height: 64px;
        padding: 4px 12px;
        position: relative;
        gap: 8px;
    }

    .mm--mobile { order: -1; }                  /* hamburger far left */

    .ql-header__primary { flex: 0 0 auto; }
    .ql-header__brand {                          /* logo centred */
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
    }
    .ql-header__logo img,
    .ql-header__brand img { max-height: 50px !important; width: auto; }

    /* Icons right — 20px (FEWSET Header Icons spec), with breathing room */
    .ql-header__actions { gap: 8px; }
    .ql-header__actions svg { width: 20px; height: 20px; }
    .ql-header__actions .ql-search-trigger--icon,
    .ql-header__actions .fewset-cart-trigger,
    .ql-header__actions .fewset-account-trigger,
    .ql-header__actions .fewset-wl-trigger {
        padding: 5px;
        margin: 0;
    }
    .ql-header__actions .ql-search-trigger--icon { width: auto; height: auto; }

    .ql-header__search-row,
    .ql-header__row2 { display: none; }
}

@media (max-width: 768px) {
    .ql-header__brand .site-title {
        font-size: var(--title-sm);
    }
}

/* ──────────────────────────────────────────────────────────────────────
   PRODUCT-PAGE HEADER (mobile, body.fewset-sp)
   The header floats FIXED and is HIDDEN at load; js/mega-menu.js slides it IN
   on scroll-down / OUT on scroll-up once past ~15% of the page. The runner
   (USP strip, .fewset-bars--m) stays VISIBLE in normal flow at the top above the
   photo (it scrolls away with the page). No transform/will-change at rest, and
   body.mm-lock forces transform:none, so the fixed mega-menu drawer is safe.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Notch: fill the iOS safe-area above the runner with the USP bar's black
       (#111) so the status-bar area matches the runner instead of showing white. */
    body.fewset-sp .fewset-bars--m {
        background: #111;
        padding-top: env(safe-area-inset-top, 0px);
    }
    /* (The iOS notch is coloured by painting the <html> root #111 on the PDP —
       see css/footer.css. env(safe-area-inset-top) is 0 in a regular Safari tab,
       so a fixed safe-area strip can't work; root-bg sampling is the path that
       does.) */

    body.fewset-sp .ql-header {
        position: fixed;
        top: var(--qlh-gap);
        left: var(--qlh-gap);
        right: var(--qlh-gap);
        width: auto;
        max-width: none;
        margin: 0;
        transition: transform var(--duration-slow) var(--ease-luxe),
                    background var(--duration-slow) var(--ease-luxe),
                    box-shadow var(--duration-slow) var(--ease-luxe);
    }
    /* Clear the mobile WP admin bar for logged-in views. */
    body.admin-bar.fewset-sp .ql-header { top: calc(var(--qlh-gap) + 46px); }

    /* Hidden state — fully clear the top edge (own height + the inset gap). */
    body.fewset-sp .ql-header.fewset-hh-hidden {
        transform: translateY(calc(-100% - var(--qlh-gap) - 16px));
    }
    /* Suppress the slide for the hidden state set at first paint (no flash). */
    body.fewset-sp .ql-header.fewset-hh-no-anim { transition: none !important; }
}


/* ==========================================================================
   6. ADAPTIVE TRANSPARENT HEADER — front page, over the hero
   --------------------------------------------------------------------------
   Scoped to body.fewset-hero-header (added by inc/hero-slider.php only on the
   front page when the hero is live), so every other page is unchanged.

   The top-bar + header STAY in normal flow but go transparent; the hero is
   pulled UP behind them (negative margin) and its content pushed back DOWN by
   the same amount (equal padding), so only the hero background sits behind the
   header — the photo never moves under it, and the top-bar stays clickable.
   Content colour follows the active slide via body classes .fewset-hh-dark /
   .fewset-hh-light (set server-side for no flash, toggled by js/hero-slider.js).
   On scroll the existing .scrolled class turns the header solid white;
   the single header stays sticky on every breakpoint (no minibar).

   --fewset-head-zone = top-bar + header height, measured by js/hero-slider.js.
   The values below are first-paint fallbacks until JS refines them. */
body.fewset-hero-header { --fewset-head-zone: 120px; }
@media (min-width: 1025px) { body.fewset-hero-header { --fewset-head-zone: 112px; } }

/* No top gap above the hero, and don't clip its upward overflow, so the negative
   margin lands the hero at the very top behind the header. */
body.fewset-hero-header .site-content,
body.fewset-hero-header #content,
body.fewset-hero-header .content-area,
body.fewset-hero-header main,
body.fewset-hero-header .inside-article,
body.fewset-hero-header .entry-content,
body.fewset-hero-header .page-content { margin-top: 0; padding-top: 0; overflow: visible; }

/* Hero: bg behind the header zone (margin), content below it (padding). Net
   layout for everything after the hero is unchanged. */
body.fewset-hero-header .fewset-hero {
    position: relative;
    z-index: 0;
    margin-top: calc(-1 * var(--fewset-head-zone));
    padding-top: var(--fewset-head-zone);
}

/* Top-bar + header: in flow, transparent, painted above the pulled-up hero. */
body.fewset-hero-header .fewset-topbar {
    position: relative;
    z-index: 101;
    background: transparent !important;
    border-bottom: 0;
}
/* Over the hero: a lighter frost so the photo reads through and the adaptive
   (dark-slide → white) text below stays legible. The glass blur + float shadow
   from the base rule still apply — it never goes fully transparent now. */
body.fewset-hero-header .ql-header:not(.scrolled) {
    background: rgba(255, 255, 255, 0.14);
}

/* Mobile scrolled state: stay glass too (the base frost + float shadow handle
   the look). Only clear the notch safe-area so the panel isn't under it. */
@media (max-width: 1024px) {
    body.fewset-hero-header .ql-header.scrolled {
        padding-top: env(safe-area-inset-top, 0px);
    }
}

/* ---- Dark slide → white content (transparent state only). Triggers carry an
   explicit color (mini-cart.css etc.), so they're targeted directly. ---- */
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-header__brand .site-title a,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-header__actions,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-header__actions a,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-header__actions button,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-search-trigger,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .fewset-account-trigger,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .fewset-cart-trigger,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .fewset-wl-trigger,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .mm--mobile,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .mm__hamburger-inner {
    color: #fff;
}
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-desktop-menu > li > a {
    color: rgba(255, 255, 255, .82);
}
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-desktop-menu > li > a:hover,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-desktop-menu > li > a:focus-visible,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-desktop-menu > li.current-menu-item > a,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-desktop-menu > li.current-menu-ancestor > a {
    color: #fff;
}
/* Hover + active underline follow the themed menu text colour (both themes). */
body.fewset-hero-header .ql-header:not(.scrolled) .ql-desktop-menu > li > a::before,
body.fewset-hero-header .ql-header:not(.scrolled) .ql-desktop-menu > li.current-menu-item > a::after,
body.fewset-hero-header .ql-header:not(.scrolled) .ql-desktop-menu > li.current_page_item > a::after {
    background: currentColor;
}

/* search faux-field (desktop): transparent bg, white icon / text / border */
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-search-trigger--headerbar {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
    background: transparent;
}

/* monochrome logo image → white (header logo only) */
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-header__logo img,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .ql-header__brand .custom-logo {
    filter: brightness(0) invert(1);
}

/* deriniai (plugin) header button: the header's inherited text colour is light,
   so its glyph must be coloured explicitly like the theme's own triggers (which
   get --on-surface-variant from mini-cart.css). The plugin button only has
   color:inherit, so without this its currentColor — and the filled count badge
   (background:currentColor) — reads white on a light/solid header. Match the
   triggers' hover too (colour shift, not the plugin's default opacity dim) so it
   behaves like its siblings. The .fewset-hh-dark rule below overrides to #fff. */
.ql-header__actions .sis-dgh-btn { color: var(--on-surface-variant); }
.ql-header__actions .sis-dgh-btn:hover { color: var(--on-surface); opacity: 1; }

/* deriniai (plugin) count badge: over a dark hero slide the badge square turns
   white (it follows the icon's currentColor), so flip its numeral to dark to
   keep it readable. The icon itself adapts via currentColor with no fill. */
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .sis-dgh-count { --dgh-badge-ink: #0A0A0A; }

/* Top-bar text / links / borders white on a dark slide (flag + coloured chips
   stay as-is). */
body.fewset-hero-header.fewset-hh-dark .fewset-topbar,
body.fewset-hero-header.fewset-hh-dark .fewset-topbar a,
body.fewset-hero-header.fewset-hh-dark .fewset-topbar .ktb-lang__btn { color: #fff; }
body.fewset-hero-header.fewset-hh-dark .fewset-topbar .ktb-item { border-color: rgba(255, 255, 255, .28); }
body.fewset-hero-header.fewset-hh-dark .fewset-topbar .ktb-left .ktb-item:first-child { border-left-color: rgba(255, 255, 255, .28); }
/* keep a coloured icon chip's glyph dark on its own background */
body.fewset-hero-header.fewset-hh-dark .fewset-topbar .ktb-ico[style*="background"] { color: #1a1a1a; }
/* top-bar hover — the default light hover bg would clash on a dark slide */
body.fewset-hero-header.fewset-hh-dark .fewset-topbar a.ktb-item:hover { background: rgba(255, 255, 255, .12); }


/* =====================================================================
   ACCOUNT DROPDOWN  (moved from an inline wp_head <style> in
   inc/account-icon.php — the CSS is 100% static, so it lives here to be
   browser-cacheable instead of re-shipped in every HTML document). Kept
   AFTER the .ql-header__actions a whitening rule (~line 516) so the
   dark-hero override at the bottom still wins by source order, exactly as
   it did when printed at wp_head:99.
   ===================================================================== */
/* Wrapper */
.fewset-account {
    position: relative;
}

/* Dropdown panel */
.fewset-account__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 260px;
    background: #FFF;
    border: 1px solid rgba(26,26,26,.08);
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
    padding: 20px;
    z-index: 200;
    animation: fewsetAccFadeIn .18s ease both;
}

@keyframes fewsetAccFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fewset-account.is-open .fewset-account__dropdown {
    display: block;
}

/* Hide dropdown on mobile */
@media (max-width: 1024px) {
    .fewset-account__dropdown { display: none !important; }
}

/* Guest: sections */
.fewset-account__section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fewset-account__label {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 11px;
    font-weight: 400;
    color: rgba(26,26,26,.5);
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.fewset-account__action {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: #1A1A1A;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color .15s ease;
}

.fewset-account__action:hover {
    color: rgba(26,26,26,.6);
}

/* No underline animation on account links */
.fewset-account__dropdown a::after {
    display: none !important;
}

.fewset-account__divider {
    height: 1px;
    background: rgba(26,26,26,.06);
    margin: 14px 0;
}

/* Logged in: greeting + links */
.fewset-account__greeting {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: rgba(26,26,26,.5);
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(26,26,26,.06);
}

.fewset-account__greeting strong {
    color: #1A1A1A;
    font-weight: 600;
}

.fewset-account__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fewset-account__links li {
    margin-bottom: 0;
}

.fewset-account__links a {
    display: block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 13px;
    font-weight: 400;
    color: rgba(26,26,26,.6);
    text-decoration: none;
    padding: 7px 0;
    transition: color .15s ease;
}

.fewset-account__links a:hover {
    color: #1A1A1A;
}

.fewset-account__links li:last-child a {
    color: rgba(26,26,26,.35);
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(26,26,26,.06);
}

.fewset-account__links li:last-child a:hover {
    color: #1A1A1A;
}

.fewset-account__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #1A1A1A;
    color: #FFF;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    margin-left: 6px;
    vertical-align: middle;
}

/* Rich logged-in rows: label + hint + count badge */
.fewset-account__links--rich a {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fewset-account__lbl { flex: 1 1 auto; }
.fewset-account__hint {
    font-size: 10px;
    letter-spacing: .02em;
    color: rgba(26,26,26,.42);
    white-space: nowrap;
}
.fewset-account__hint--good { color: #4a6741; }
.fewset-account__links--rich .fewset-account__badge { margin-left: 0; }

/* On the dark hero slide the header whitens every .ql-header__actions a
   (specificity 0,4,1), which bleeds into this dropdown's links and makes
   them white-on-white. Re-assert the panel's dark text with a matching,
   later rule so the dropdown stays readable. */
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .fewset-account__dropdown a,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .fewset-account__dropdown .fewset-account__action { color: rgba(26,26,26,.6); }
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .fewset-account__dropdown a:hover,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .fewset-account__dropdown .fewset-account__greeting strong,
body.fewset-hero-header.fewset-hh-dark .ql-header:not(.scrolled) .fewset-account__dropdown .fewset-account__action:hover { color: #1A1A1A; }