/* Fenix HeaderProfile renderer — Commit 1a baseline.
   Visual treatment is intentionally minimal so we can verify the component pipeline
   without competing with the existing _FenixHeader.cshtml styles. Commit 1b will layer
   StylesJson-driven variants (sticky, shadow, bg) on top of this baseline. */

.fenix-header {
    width: 100%;
    background: var(--fenix-header-bg, #fff);
    color: var(--fenix-header-text, inherit);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* StylesJson — sticky */
.fenix-header[data-sticky="true"] {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: box-shadow 220ms ease;
}

.fenix-header[data-sticky="true"].is-scrolled {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* StylesJson — shadow */
.fenix-header[data-shadow="none"]   { border-bottom: 0; box-shadow: none; }
.fenix-header[data-shadow="hard"]   { box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.18); }
/* "soft" is the default styling above */

/* StylesJson — max-width override */
.fenix-header[style*="--fenix-header-max-w"] .fenix-header__row {
    max-width: var(--fenix-header-max-w);
}

.fenix-header__promo {
    padding: 6px 16px;
    text-align: center;
    background: var(--fenix-color-primary, #db2777);
    color: #fff;
    font-size: 0.875rem;
}

.fenix-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 24px;
}

.fenix-header__slot {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fenix-header__slot--centre {
    flex: 1;
    justify-content: center;
}

.fenix-header__slot--right {
    justify-content: flex-end;
}

.fenix-header__logo {
    display: inline-flex;
    align-items: var(--fenix-logo-align, center);
    gap: var(--fenix-logo-gap, 10px);
    text-decoration: none;
    /* Theme-profile brand colour drives BOTH the inline-SVG logo mark (via currentColor) and
       the "Growth Vision" wordmark, so the two always match the active theme. */
    color: var(--fenix-header-brand-text, #060937);

    /* Brand mark + wordmark in the logo's native deep navy (#060937 — the colour baked into
       gvt-logo.svg). Override the TOKEN (not just `color`) so it cascades to BOTH the SVG
       (currentColor) AND the .fenix-header__logo-text rule, which reads the token directly. */
    --fenix-header-brand-text: #060937;
    color: #060937;
}

.fenix-header__logo-img {
    /* Dark header colours (theme darkMode) set --fenix-header-logo-filter to lighten an image
       logo so it reads on the dark band; default none = unchanged. See FenixHeaderViewComponent. */
    filter: var(--fenix-header-logo-filter, none);
    /* Matched to the portal top-nav brand mark (.portal-nav-brand img = h-8 w-8 rounded-lg):
       32x32 square with a rounded corner, so the public header and the student/coach/admin
       portals show an identical logo. */
    height: var(--fenix-logo-mark-size, 32px);
    width: var(--fenix-logo-mark-size, 32px);
    border-radius: 0.5rem;
    display: block;
}

/* When the logo is emitted as inline SVG (gvt-logo.svg paints fill="currentColor"), it inherits
   the themed colour above. No border-radius — the kolam mark is a transparent glyph, not a photo. */
.fenix-header__logo-svg {
    height: var(--fenix-logo-mark-size, 32px);
    width: var(--fenix-logo-mark-size, 32px);
    border-radius: 0;
    flex: none;
}

/* ===== Theme-following logo mark (2026-07-19) ==========================================
   Recolour the brand emblem to the ACTIVE theme accent (--fenix-color-primary) on EVERY
   header, so the logo tracks the theme/colour the page is skinned in (teal on Vision Teal,
   pink on Blush, gold on Gold Luxe, …) instead of the fixed navy above. Works whether the
   logo is emitted as an <img> (raster OR svg file — blanked, then repainted through a CSS
   mask of the kolam glyph so the shape stays crisp) or as an inline <svg> (just takes the
   accent as currentColor). Falls back to the native navy #060937 where no theme var exists
   (portals / unthemed pages), so those are unchanged. Reversible: delete this block to
   restore the fixed-navy logo. Documented in the fenix-header-system skill ▸ "Theme-following
   logo". Mask glyph = the same kolam mark, shared with the footer. */
/* Inline <svg> logo (the default now — LogoHeaderComponent inlines the settings SVG): it paints
   fill="currentColor", so it just takes the accent as color. No mask needed. `filter:none`
   supersedes the base .fenix-header__logo-img whiten filter (--fenix-header-logo-filter, applied on
   dark-MODE themes) — a recolourable inline SVG follows the theme accent instead of being bleached
   white. (Dark-mode theme accents are light by design, and the fallback chain keeps it legible.) */
.fenix-header__logo-svg {
    color: var(--fenix-logo-mark-color, var(--fenix-color-primary, var(--fenix-header-brand-text, #060937)));
    filter: none;
}
/* Raster mark: show the uploaded PNG. Do NOT mask it with the GVT kolam — that made every
   company's bitmap look like Growth Vision. currentColor SVG marks still inline separately. */

.fenix-header__logo-text {
    /* Matched to .portal-nav-logo-text: 1.125rem / 700 / -0.02em tracking. */
    font-family: var(--fenix-font-heading, inherit);
    font-size: var(--fenix-logo-l1-size, 1.125rem);
    font-weight: var(--fenix-logo-l1-weight, 700);
    letter-spacing: var(--fenix-logo-l1-tracking, -0.02em);
    color: var(--fenix-logo-l1-color, var(--fenix-header-brand-text, #1e293b));
}

/* The legacy header used <em> inside BrandName to mark the script accent.
   Mirror that here so "Growth <em>Vision</em>" italicises "Vision" in pink. */
.fenix-header__logo-text em {
    font-style: italic;
    color: var(--fenix-header-menu-link-hover, var(--fenix-color-primary, #c9437f));
    font-weight: 400;
}

/* Generic two-line wordmark base (5.69) — the Logo component's `tagline` prop is now
   editor-settable on ANY profile, so the block/tagline need a sane default everywhere.
   Profile-scoped rules further down override for brand-specific type. */
.fenix-header__logo-block {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.fenix-header__logo-tagline {
    font-size: var(--fenix-logo-l2-size, 0.6875rem);
    font-weight: var(--fenix-logo-l2-weight, 400);
    letter-spacing: var(--fenix-logo-l2-tracking, 0.04em);
    color: var(--fenix-logo-l2-color, var(--fenix-header-brand-text, #1e293b));
    opacity: 0.7;
}

.fenix-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fenix-header__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.25);
}

.fenix-header__cta--primary {
    background: var(--fenix-color-primary, #db2777);
    color: #fff;
}

.fenix-header__cta--secondary {
    background: rgba(0, 0, 0, 0.06);
    color: #1f2937;
}

.fenix-header__cta--ghost {
    background: transparent;
    color: var(--fenix-color-primary, #db2777);
    border: 1px solid currentColor;
}

/* ─── Icon buttons (cart / wishlist / search icon mode) ─────────────────────── */

.fenix-header__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    color: var(--fenix-header-icon-color, #1f2937);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fenix-header__icon-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--fenix-color-primary, #db2777);
}

.fenix-header__icon-btn i { font-size: 1.125rem; }

/* Live qty pill (cart-qty / wishlist-qty). Hidden by default; a small JS shim
   in fenix-header-qty.js shows it only when there's a non-zero integer count.
   Nop's AjaxCart writes literal text like "(2)" or "(0)" into this span on
   updates, so the shim parses the digits and toggles a class. */
.fenix-header__qty {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: var(--fenix-color-primary, #db2777);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    display: none;
}

.fenix-header__qty.is-non-zero {
    display: inline-block;
}

/* ─── User menu (account dropdown) ───────────────────────────────────────────── */

.fenix-header__user-menu {
    position: relative;
    display: inline-block;
}

.fenix-header__user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    color: var(--fenix-header-brand-text, #1f2937);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 9999px;
    transition: background-color 0.15s ease;
}

.fenix-header__user-menu-trigger:hover {
    background: rgba(0, 0, 0, 0.04);
}

.fenix-header__user-menu-caret {
    font-size: 0.75rem;
    color: var(--studio-muted, #6b7280);
    transition: transform 0.15s ease;
}

.fenix-header__user-menu-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.18);
    z-index: 60;
}

.fenix-header__user-menu-list.is-open {
    display: block;
}

.fenix-header__user-menu-list li { margin: 0; }

.fenix-header__user-menu-list a {
    display: block;
    padding: 8px 16px;
    color: #1f2937;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color 0.1s ease;
}

.fenix-header__user-menu-list a:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--fenix-color-primary, #db2777);
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   Account avatar + dropdown — two treatments selected by the user-menu `style` prop.
   Benchmarked against Vercel / Linear / Notion / Stripe account menus.
     .fenix-header__user-menu--card     → Soft card (default): rounded-square avatar + status
                                           dot, tonal pink header band + role badge.
     .fenix-header__user-menu--refined  → Gradient circle avatar + slim grouped menu.
   ════════════════════════════════════════════════════════════════════════════════════════ */

.fenix-header__user-avatar {
    position: relative;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 700;
}

/* Shared dropdown shell — spring-open from the top-right, layered shadow. */
.fenix-header__user-dropdown {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    width: 16rem;
    z-index: 60;
    background: #fff;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.fenix-header__user-dropdown.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .fenix-header__user-dropdown { transition: opacity 0.12s ease; transform: none; }
}

/* ─── Soft-card variant (B, default) ─────────────────────────────────────────────────── */
.fenix-header__user-menu--card .fenix-header__user-avatar {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    color: var(--fenix-color-primary-dark, #be185d);
    background: radial-gradient(120% 120% at 30% 20%, #fff 0%, #fdf2f8 55%, #fce7f3 100%);
    border: 1px solid rgba(190, 24, 93, 0.14);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.fenix-header__user-menu--card .fenix-header__user-avatar:hover {
    border-color: rgba(236, 72, 153, 0.5);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.18);
}
.fenix-header__user-status {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #22c55e;
    border: 2.5px solid #fff;
}

.fenix-header__user-menu--card .fenix-header__user-dropdown {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.06);
}
.fenix-header__user-band {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.875rem 0.875rem 0.8rem;
    background: linear-gradient(135deg, #fdf2f8, #fff);
    border-bottom: 1px solid #eef0f4;
}
.fenix-header__user-band-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--fenix-color-primary-dark, #be185d);
    background: #fff;
    border: 1px solid rgba(190, 24, 93, 0.15);
    box-shadow: 0 1px 3px rgba(190, 24, 93, 0.12);
}
.fenix-header__user-band-id { min-width: 0; display: flex; flex-direction: column; }
.fenix-header__user-band-name {
    font-size: 0.875rem; font-weight: 650; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fenix-header__user-band-email {
    font-size: 0.75rem; color: #64748b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fenix-header__user-badge {
    margin-left: auto; flex: none;
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    background: rgba(var(--rgb-primary, 236, 72, 153), 0.12); color: var(--fenix-color-primary-dark, #be185d);
    padding: 0.2rem 0.5rem; border-radius: 999px;
}
.fenix-header__user-body { padding: 0.375rem; }

/* ─── Refined variant (A) ────────────────────────────────────────────────────────────── */
.fenix-header__user-menu--refined .fenix-header__user-avatar {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    color: #fff;
    background: linear-gradient(135deg, var(--fenix-color-primary-light, #ec4899) 0%, var(--fenix-color-primary, #db2777) 60%, var(--fenix-color-primary-dark, #be185d) 100%);
    box-shadow: 0 1px 2px rgba(var(--rgb-primary, 190, 24, 93), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease;
}
.fenix-header__user-menu--refined .fenix-header__user-avatar::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    border: 2px solid transparent;
    transition: border-color 0.18s ease;
}
.fenix-header__user-menu--refined .fenix-header__user-avatar:hover { transform: translateY(-1px); }
.fenix-header__user-menu--refined .fenix-header__user-avatar:hover::after {
    border-color: rgba(var(--rgb-primary, 236, 72, 153), 0.35);
}

.fenix-header__user-menu--refined .fenix-header__user-dropdown {
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 0.9rem;
    padding: 0.375rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.02),
                0 12px 32px -8px rgba(15, 23, 42, 0.18),
                0 4px 10px -4px rgba(15, 23, 42, 0.10);
}
.fenix-header__user-id { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.75rem 0.75rem; }
.fenix-header__user-id-avatar {
    width: 2.375rem; height: 2.375rem; border-radius: 9999px; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.85rem;
    background: linear-gradient(135deg, var(--fenix-color-primary-light, #ec4899), var(--fenix-color-primary-dark, #be185d));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fenix-header__user-id-txt { min-width: 0; display: flex; flex-direction: column; }
.fenix-header__user-id-name {
    font-size: 0.875rem; font-weight: 650; color: #1e293b; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fenix-header__user-id-email {
    font-size: 0.75rem; color: #64748b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fenix-header__user-sep {
    display: block; height: 1px; margin: 0.25rem 0.4rem;
    background: linear-gradient(90deg, transparent, rgba(15,23,42,0.09) 12%, rgba(15,23,42,0.09) 88%, transparent);
}
.fenix-header__user-group {
    padding: 0.4rem 0.75rem 0.25rem;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: #94a3b8;
}

/* ─── Shared menu items ──────────────────────────────────────────────────────────────── */
.fenix-header__user-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.85rem;
    font-weight: 550;
    color: #334155;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.fenix-header__user-item i { width: 1.05rem; text-align: center; color: #94a3b8; font-size: 0.85rem; transition: color 0.15s ease; }
.fenix-header__user-item .chev { margin-left: auto; font-size: 0.7rem; color: #cbd5e1; opacity: 0; transform: translateX(-3px); transition: 0.15s ease; }
.fenix-header__user-item:hover { background: #f8fafc; color: #1e293b; }
.fenix-header__user-menu--refined .fenix-header__user-item:hover { background: rgba(var(--rgb-primary, 236, 72, 153), 0.07); color: var(--fenix-color-primary-dark, #be185d); }
.fenix-header__user-item:hover i { color: var(--fenix-color-primary, #db2777); }
.fenix-header__user-item:hover .chev { opacity: 1; transform: none; color: #ec4899; }
.fenix-header__user-div { display: block; height: 1px; background: #eef0f4; margin: 0.3rem 0.4rem; }
.fenix-header__user-item--danger { color: #64748b; }
.fenix-header__user-item--danger:hover { background: #fef2f2; color: #dc2626; }
.fenix-header__user-item--danger:hover i { color: #dc2626; }

/* ─── Portrait variant ───────────────────────────────────────────────────────────────────
   Avatar + name/email identity row at the top (NO box / border around the avatar), then a
   clean icon+text list with full-width dividers between rows. Modelled on the supplied design.
   ──────────────────────────────────────────────────────────────────────────────────────── */
/* Circular avatar trigger, no chip/box — just the initials (or photo) in a soft circle. */
.fenix-header__user-menu--portrait .fenix-header__user-avatar {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    color: var(--fenix-color-primary-dark, #be185d);
    background: #fce7f3;
    border: 0;
}
.fenix-header__user-menu--portrait .fenix-header__user-dropdown {
    width: 17rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.05);
    background: #fff;
}
/* Identity row — avatar + name/email, NO box around the avatar (per request). */
.fenix-header__user-portrait-id {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #eef0f4;
}
.fenix-header__user-portrait-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--fenix-color-primary-dark, #be185d);
    background: #fce7f3;
    /* no border / no box — clean circle only */
}
.fenix-header__user-portrait-txt { min-width: 0; display: flex; flex-direction: column; }
.fenix-header__user-portrait-name {
    font-size: 0.9rem; font-weight: 650; color: #1f2937; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fenix-header__user-portrait-email {
    font-size: 0.78rem; color: #6b7280; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Item list — plain rows, full-width dividers BETWEEN rows (not around), generous height. */
.fenix-header__user-portrait-list { padding: 0; }
.fenix-header__user-menu--portrait .fenix-header__user-item,
.fenix-header__user-menu--outline .fenix-header__user-item {
    border-radius: 0;
    /* 2026-07-01 — tighter rows + no inter-item dividers (user request). Was
       padding 0.85rem + border-bottom 1px #f1f3f5 between every item. The
       identity-row divider (.fenix-header__user-portrait-id) is kept. */
    padding: 0.55rem 1rem;
    gap: 0.85rem;
    font-weight: 500;
    color: #4b5563;
}
.fenix-header__user-menu--portrait .fenix-header__user-item i,
.fenix-header__user-menu--outline .fenix-header__user-item i {
    width: 1.15rem; color: #9aa1ac; font-size: 0.95rem;
}
.fenix-header__user-menu--portrait .fenix-header__user-item:hover,
.fenix-header__user-menu--outline .fenix-header__user-item:hover {
    background: #faf7f9; color: #1f2937;
}
.fenix-header__user-menu--portrait .fenix-header__user-item:hover i,
.fenix-header__user-menu--outline .fenix-header__user-item:hover i { color: var(--fenix-color-primary, #db2777); }
/* Log out: own divider above (it's the last row), muted → red on hover (inherits --danger). */
.fenix-header__user-menu--portrait .fenix-header__user-item--danger,
.fenix-header__user-menu--outline .fenix-header__user-item--danger { color: #6b7280; }
.fenix-header__user-menu--portrait .fenix-header__user-item--danger:hover,
.fenix-header__user-menu--outline .fenix-header__user-item--danger:hover { background: #fef2f2; color: #dc2626; }
.fenix-header__user-menu--portrait .fenix-header__user-item--danger:hover i,
.fenix-header__user-menu--outline .fenix-header__user-item--danger:hover i { color: #dc2626; }

/* ─── Outline variant ────────────────────────────────────────────────────────────────────
   A minimal, bordered avatar: a WHITE circle with a 1px border and a neutral user icon (no
   initials, no fill). Reuses the portrait dropdown structure (identity row + divider list)
   but with a white/bordered identity avatar to match. ──────────────────────────────────── */
.fenix-header__user-menu--outline .fenix-header__user-avatar {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 9999px;
    font-size: 0.95rem;
    color: #475569;
    background: #fff;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.fenix-header__user-menu--outline .fenix-header__user-avatar:hover {
    border-color: var(--fenix-color-primary, #db2777);
    color: var(--fenix-color-primary, #db2777);
}
/* Share the portrait dropdown shell. */
.fenix-header__user-menu--outline .fenix-header__user-dropdown {
    width: 17rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.05);
    background: #fff;
}
/* Identity-row avatar: white + bordered to match the trigger (overrides the pink portrait one). */
.fenix-header__user-menu--outline .fenix-header__user-portrait-avatar {
    color: #475569;
    background: #fff;
    border: 1px solid #cbd5e1;
}

/* ─── Guest variant (logged-out) ─────────────────────────────────────────────────────────
   The same avatar chip shape as signed-in (inherits --card/--refined/--portrait sizing), but
   MUTED — a neutral grey person glyph, no status dot / role badge. The dropdown shows a short
   welcome + Sign in / Create account. Works on top of any avatar style. ──────────────────── */
.fenix-header__user-menu--guest .fenix-header__user-avatar {
    color: #64748b;
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.08);
}
.fenix-header__user-menu--guest .fenix-header__user-avatar:hover {
    color: var(--fenix-color-primary, #db2777);
    background: #fce7f3;
}
.fenix-header__user-menu--guest .fenix-header__user-dropdown {
    width: 15rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.05);
    background: #fff;
}
.fenix-header__user-guest-head {
    padding: 0.9rem 1rem 0.75rem;
    border-bottom: 1px solid #eef0f4;
    background: linear-gradient(135deg, #fdf2f8, #fff);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.fenix-header__user-guest-title {
    font-size: 0.9rem; font-weight: 650; color: #1f2937;
}
.fenix-header__user-guest-sub {
    font-size: 0.78rem; color: #6b7280;
}
.fenix-header__user-guest-body { padding: 0.375rem; }
/* Sign in reads as the primary action: a touch bolder + primary-tinted on hover. */
.fenix-header__user-menu--guest .fenix-header__user-item { font-weight: 550; }
.fenix-header__user-menu--guest .fenix-header__user-item:first-child { color: var(--fenix-color-primary-dark, #be185d); }
.fenix-header__user-menu--guest .fenix-header__user-item:first-child i { color: var(--fenix-color-primary, #db2777); }
.fenix-header__user-menu--guest .fenix-header__user-item:hover { background: #faf7f9; }
/* Portrait/Outline + guest: keep the full-width divider rhythm in the guest dropdown too. */
.fenix-header__user-menu--portrait.fenix-header__user-menu--guest .fenix-header__user-item,
.fenix-header__user-menu--outline.fenix-header__user-menu--guest .fenix-header__user-item {
    border-radius: 0; padding: 0.85rem 1rem; border-bottom: 1px solid #f1f3f5;
}
.fenix-header__user-menu--portrait.fenix-header__user-menu--guest .fenix-header__user-item:last-child,
.fenix-header__user-menu--outline.fenix-header__user-menu--guest .fenix-header__user-item:last-child { border-bottom: 0; }

/* ─── Dropdown-style variants applied to the avatar menu items (mirrors fenix-menu.css), so the
   account menu shares the site-wide [data-dd-style] language. Targets the leading icon only —
   :not(.chev) leaves the refined-variant hover chevron untouched. ──────────────────────────── */
[data-dd-style] .fenix-header__user-item > i:not(.chev) {
    width: 2rem; height: 2rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.625rem; font-size: 0.95rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* 1 · chip — soft-pink JS-avatar treatment (radial wash + hairline pink border + shadow) */
[data-dd-style="chip"] .fenix-header__user-item > i:not(.chev) {
    background: radial-gradient(120% 120% at 30% 20%, #fff 0%, #fdf2f8 55%, #fce7f3 100%);
    border: 1px solid rgba(190, 24, 93, 0.14);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    color: #be185d;
}
[data-dd-style="chip"] .fenix-header__user-item:hover > i:not(.chev) { border-color: rgba(236, 72, 153, 0.45); box-shadow: 0 2px 8px rgba(236, 72, 153, 0.16); color: #be185d; }
[data-dd-style="chip"] .fenix-header__user-item--danger:hover > i:not(.chev) { background: #fee2e2; border-color: rgba(220,38,38,0.3); color: #dc2626; }
/* 2 · brand */
[data-dd-style="brand"] .fenix-header__user-item > i:not(.chev) { background: #fdf2f8; color: #db2777; }
[data-dd-style="brand"] .fenix-header__user-item:hover > i:not(.chev) { background: #ec4899; color: #fff; }
[data-dd-style="brand"] .fenix-header__user-item--danger:hover > i:not(.chev) { background: #dc2626; color: #fff; }
/* 3 · bare */
[data-dd-style="bare"] .fenix-header__user-item > i:not(.chev) { background: transparent; color: #94a3b8; width: 1.4rem; height: 1.4rem; font-size: 1.05rem; border-radius: 0; }
[data-dd-style="bare"] .fenix-header__user-item:hover > i:not(.chev) { color: #db2777; }
/* 4 · bar (uses the same left accent treatment) */
[data-dd-style="bar"] .fenix-header__user-item > i:not(.chev) { background: #f3f4f8; color: #475569; }
[data-dd-style="bar"] .fenix-header__user-item { position: relative; }
[data-dd-style="bar"] .fenix-header__user-item::before {
    content: ""; position: absolute; left: 1px; top: 50%; transform: translateY(-50%) scaleY(0);
    width: 3px; height: 58%; border-radius: 3px; background: #ec4899; transition: transform 0.15s ease;
}
[data-dd-style="bar"] .fenix-header__user-item:hover::before { transform: translateY(-50%) scaleY(1); }
[data-dd-style="bar"] .fenix-header__user-item:hover > i:not(.chev) { background: #fce7f3; color: #be185d; }
/* 5 · navy */
[data-dd-style="navy"] .fenix-header__user-item > i:not(.chev) { background: transparent; color: #0f1437; opacity: 0.55; width: 1.4rem; height: 1.4rem; font-size: 1.05rem; border-radius: 0; }
[data-dd-style="navy"] .fenix-header__user-item:hover > i:not(.chev) { opacity: 1; color: #db2777; }
/* 6 · circle */
[data-dd-style="circle"] .fenix-header__user-item > i:not(.chev) { border-radius: 50%; width: 2.1rem; height: 2.1rem; background: linear-gradient(135deg, #fdf2f8, #fce7f3); color: #be185d; }
[data-dd-style="circle"] .fenix-header__user-item:hover > i:not(.chev) { background: linear-gradient(135deg, var(--fenix-color-primary-light, #ec4899), var(--fenix-color-primary-dark, #be185d)); color: #fff; }

/* ============================================================
   2026-05-20 — Responsive baseline (breakpoint 768px).
   Hamburger replaces centre nav, off-canvas drawer holds nav.
   CtaButton + Search hide on mobile (configurable later).
   ============================================================ */

/* Hamburger trigger — hidden on desktop, revealed on mobile. */
.fenix-header__menu-toggle {
    display: none;
    appearance: none;
    background: transparent;
    border: none;
    padding: 8px;
    margin-left: 4px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    color: var(--fenix-header-text, #111827);
}
.fenix-header__menu-toggle:hover { background: rgba(0, 0, 0, 0.05); }
.fenix-header__menu-toggle:focus-visible { outline: 2px solid var(--fenix-color-primary, #db2777); outline-offset: 2px; }
.fenix-header__menu-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

/* Off-canvas drawer — hidden by default, revealed when [data-state="open"]. */
.fenix-header-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
}
.fenix-header-drawer[data-state="open"] {
    pointer-events: auto;
    opacity: 1;
}
.fenix-header-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
}
.fenix-header-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 360px);
    background: #fff;
    color: #111827;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fenix-header-drawer[data-state="open"] .fenix-header-drawer__panel {
    transform: translateX(0);
}
.fenix-header-drawer__head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.fenix-header-drawer__close {
    appearance: none;
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
}
.fenix-header-drawer__close:hover { background: rgba(0, 0, 0, 0.05); color: #111827; }
.fenix-header-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px 32px;
}
/* Force nav inside the drawer to stack vertically regardless of how its
   desktop CSS lays it out. The mobile nav reads as a tall list. */
.fenix-header-drawer__body nav,
.fenix-header-drawer__body ul {
    display: block !important;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fenix-header-drawer__body li {
    display: block;
    margin: 0;
}
.fenix-header-drawer__body a {
    display: block;
    padding: 12px 4px;
    font-size: 1.0625rem;
    color: inherit;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
}
.fenix-header-drawer__body a:hover { color: var(--fenix-color-primary, #db2777); }

/* The account dropdown is REUSED inside the drawer, where it sits on the drawer panel —
   often a brand colour — instead of the white popup card it was designed against. Its
   identity text hard-codes slate greys (#1f2937 / #6b7280 …), which vanish on a dark or
   brand-coloured panel: that is how blush2's mauve drawer ended up with a near-black name
   and a grey email. The panel sets `color`, so inherit it, exactly as the links above
   already do. Per-brand ExtraCss can still override with !important where a brand wants
   its own tone. Covers all three identity markups: portrait, card (band) and refined (id). */
.fenix-header-drawer__body .fenix-header__user-portrait-name,
.fenix-header-drawer__body .fenix-header__user-band-name,
.fenix-header-drawer__body .fenix-header__user-id-name {
    color: inherit;
}
.fenix-header-drawer__body .fenix-header__user-portrait-email,
.fenix-header-drawer__body .fenix-header__user-band-email,
.fenix-header-drawer__body .fenix-header__user-id-email {
    color: inherit;
    opacity: 0.72;   /* keep the name/email hierarchy without a second hard-coded grey */
}

/* ── Drawer foot: the RIGHT slot, re-laid-out for a narrow panel ──────────────
   The foot receives the whole desktop right slot verbatim (icon links, cart,
   auth links, CTA, account menu). Left alone, `.fenix-header-drawer__body a`
   turns each icon button into a full-width 12px-padded list row with a
   hairline under it — which is how the WhatsApp and cart icons ended up
   floating on their own lines above the account block.

   So: the foot is a wrap-flex row. Icon buttons keep their natural size and
   form one action row at the top; everything else claims a full line. */
.fenix-header-drawer__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.fenix-header-drawer__foot > *:not(.fenix-header__icon-btn) {
    flex: 1 1 100%;
}
.fenix-header-drawer__foot .fenix-header__icon-btn {
    order: -1;                 /* the action row reads first, above the account block */
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.85;
    /* undo the generic drawer-link list styling */
    display: inline-flex;
    border-bottom-width: 1px;
}
.fenix-header-drawer__foot .fenix-header__icon-btn:hover { opacity: 1; }
/* The badge is positioned against the button, which is `position:relative` already. */
.fenix-header-drawer__foot .fenix-header__qty {
    top: -2px;
    right: -2px;
}

/* Lock body scroll while drawer is open. */
body.fenix-header-drawer-locked { overflow: hidden; }

/* ---- Mobile breakpoint ---- */
@media (max-width: 768px) {
    /* Tighten row padding so 390px doesn't feel cramped. */
    .fenix-header__row {
        padding: 10px 14px;
        gap: 8px;
    }
    /* Hide the centre slot — its nav lives in the drawer instead. */
    .fenix-header__slot--centre {
        display: none;
    }
    /* Reveal hamburger on mobile. */
    .fenix-header__menu-toggle {
        display: inline-flex;
    }
    /* Logo: shrink so it doesn't push other slots off-canvas. */
    .fenix-header__logo {
        max-width: 60vw;
    }
    .fenix-header__logo img,
    .fenix-header__logo svg {
        /* Keep the portal-matched 32x32 square mark on mobile too. */
        height: var(--fenix-logo-mark-size, 32px);
        width: var(--fenix-logo-mark-size, 32px);
    }
    /* Hide CtaButton + Search on mobile — drawer carries the action. */
    .fenix-header__cta,
    .fenix-header__search {
        display: none;
    }
    /* Compact icons in the right slot. */
    .fenix-header__slot--right {
        gap: 4px;
    }
    .fenix-header__slot--right a,
    .fenix-header__slot--right button {
        padding: 6px;
    }
    /* Mobile menu polish: flat drawer chrome, no nested panel/card weight. */
    .fenix-header-drawer__panel {
        box-shadow: none;
    }
    .fenix-header-drawer__head {
        border-bottom: 0;
    }
    .fenix-header-drawer__body a {
        border-bottom-color: rgba(15, 23, 42, 0.05);
    }
    /* If the drawer ends up with NO nav source (a left-slot nav variant),
       it never renders — see Razor. So no extra hide rule needed for
       profiles that don't ship a centre nav (e.g. Minimal). */
}

/* Profiles with no drawer content (e.g. Minimal) flag themselves with
   data-has-drawer="false". The hamburger isn't even rendered for those —
   this rule is defence-in-depth in case a future profile injects the
   button without injecting the drawer. */
.fenix-header[data-has-drawer="false"] .fenix-header__menu-toggle {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE VARIANT — "floating-pill"  (modelled on the Nexsas reference)

   A detached, glass navbar that floats over the hero: a centred rounded-full
   bar with backdrop-blur, pill-shaped nav links, and a single pink CTA badge
   on the right. Everything is scoped to data-profile="floating-pill" so it
   NEVER bleeds into commerce-default / marketing-landing.

   The header element is transparent — the visible "pill" is the .fenix-header__row,
   restyled into the floating bar. The row already centres + max-widths itself.
   ════════════════════════════════════════════════════════════════════════════ */

/* The header itself carries no chrome — it's just a transparent positioning
   layer. Sticky keeps the pill pinned as the page scrolls (StylesJson sets it). */
.fenix-header[data-profile="floating-pill"] {
    background: transparent;
    border-bottom: 0;
    /* Pull the bar up so it overlaps the top of the hero, like the reference. */
    padding-top: 20px;
    pointer-events: none;   /* let clicks pass through the transparent gutter… */
}
.fenix-header[data-profile="floating-pill"] .fenix-header__row {
    pointer-events: auto;   /* …but the pill itself is interactive. */
}
.fenix-header[data-profile="floating-pill"][data-sticky="true"] {
    /* Override the base sticky top:0 so the pill keeps its hero gap when pinned. */
    top: 0;
}
.fenix-header[data-profile="floating-pill"][data-sticky="true"].is-scrolled {
    box-shadow: none;       /* the pill carries its own shadow, not the header */
}

/* The pill bar. */
.fenix-header[data-profile="floating-pill"] .fenix-header__row {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 9999px;
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.25);
    padding: 8px 10px 8px 20px;   /* tighter; logo gets a touch more left room */
    gap: 12px;
}

/* Logo — keep the brand mark + wordmark, just nudge sizing for the slimmer bar. */
.fenix-header[data-profile="floating-pill"] .fenix-header__logo-text {
    font-size: 1.05rem;
}

/* Nav links → pill chips. Scoped via the header's data-profile so we keep all
   floating-pill CSS in this one file (the nav component lives in fenix-menu.css,
   but its links sit INSIDE this header, so the attribute cascades down). */
.fenix-header[data-profile="floating-pill"] .fenix-top-link {
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    border: 1px solid transparent !important;
    color: rgba(30, 41, 59, 0.62) !important;
    transition: color 0.15s, background 0.15s, border-color 0.15s !important;
}
.fenix-header[data-profile="floating-pill"] .fenix-top-link:hover {
    color: #0f172a !important;
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
/* Open/active parent keeps the hovered pill look while its flyout is showing. */
.fenix-header[data-profile="floating-pill"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #0f172a !important;
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* CTA → pink pill with a dark circular icon badge (the reference's lime badge,
   re-skinned to the on-brand pink primary). The badge is a pseudo-element so we
   don't need to touch the CtaButton component markup. */
.fenix-header[data-profile="floating-pill"] .fenix-header__cta--primary {
    background: var(--fenix-color-primary, #db2777);
    color: #fff;
    height: 48px;
    padding: 0 22px 0 8px;        /* room for the leading badge */
    border-radius: 9999px;
    font-weight: 500;
    gap: 10px;
}
.fenix-header[data-profile="floating-pill"] .fenix-header__cta--primary::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    flex: none;
    /* dark badge + a small white arrow glyph, centred */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")
        center / 16px 16px no-repeat,
        #0f172a;
    transition: transform 0.2s ease;
}
.fenix-header[data-profile="floating-pill"] .fenix-header__cta--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(219, 39, 119, 0.6);
}
.fenix-header[data-profile="floating-pill"] .fenix-header__cta--primary:hover::before {
    transform: translateX(2px);
}

/* Mobile: keep the pill, just let the base mobile rules hide the centre nav and
   reveal the hamburger. Round the toggle to sit nicely in the pill. */
@media (max-width: 768px) {
    .fenix-header[data-profile="floating-pill"] .fenix-header__row {
        padding: 8px 12px 8px 16px;
    }
    .fenix-header[data-profile="floating-pill"] .fenix-header__menu-toggle {
        border-radius: 9999px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE VARIANT — "hrp-pill"  (modelled on the HRP package landing page)

   The quieter, editorial sibling of floating-pill: a soft, LEFT-aligned rounded
   bar with a fit-content width, a hairline border, a very soft shadow, plain
   text links (slate → ink on hover), and a SOLID DARK (ink) CTA pill.
   See GVTheme/landing-samples/hrp-package — its "N5 floating pill" nav.

   Everything scoped to data-profile="hrp-pill" so it NEVER bleeds into the other
   profiles. The header is a transparent positioning layer; the visible pill is
   the .fenix-header__row.
   ════════════════════════════════════════════════════════════════════════════ */

/* Transparent positioning layer; sit just below the very top with a small gap so
   the bar floats. Left-aligned: the row hugs its content (fit-content) instead of
   the centred max-width the other profiles use. */
.fenix-header[data-profile="hrp-pill"] {
    background: transparent;
    border-bottom: 0;
    padding-top: 16px;
    pointer-events: none;          /* clicks pass through the transparent gutter… */
}
.fenix-header[data-profile="hrp-pill"] .fenix-header__row {
    pointer-events: auto;          /* …but the pill itself is interactive. */
    /* Left-aligned, hugs its content. margin-right:auto pushes it to the left
       edge of the centred max-width track. */
    width: fit-content;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
}
.fenix-header[data-profile="hrp-pill"][data-sticky="true"] {
    top: 0;                        /* keep the hero gap (padding-top) when pinned */
}
.fenix-header[data-profile="hrp-pill"][data-sticky="true"].is-scrolled {
    box-shadow: none;              /* the pill carries its own shadow */
}

/* The pill bar — blush-tinted glass, hairline border, very soft shadow. The HRP
   reference tints the glass toward its blush paper; we use a warm near-white. */
.fenix-header[data-profile="hrp-pill"] .fenix-header__row {
    background: rgba(255, 251, 252, 0.86);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid rgba(30, 41, 59, 0.10);
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(20, 20, 25, 0.05), 0 8px 24px -16px rgba(20, 20, 25, 0.30);
    /* tight, asymmetric: logo gets more left room, CTA sits snug on the right */
    padding: 7px 7px 7px 18px;
    gap: 22px;
}

/* Logo — slightly smaller mark to suit the slimmer editorial bar. */
.fenix-header[data-profile="hrp-pill"] .fenix-header__logo-text {
    font-size: var(--fenix-logo-l1-size, 1.02rem);
}

/* Nav links → PLAIN text (no pill chip). Muted slate at rest, full ink on hover —
   matches the HRP reference exactly (no background fill). */
.fenix-header[data-profile="hrp-pill"] .fenix-top-link {
    padding: 8px 10px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(30, 41, 59, 0.62) !important;
    font-weight: 500 !important;
    transition: color 0.15s !important;
}
.fenix-header[data-profile="hrp-pill"] .fenix-top-link:hover,
.fenix-header[data-profile="hrp-pill"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #0f172a !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* CTA → SOLID DARK (ink) pill. Dark charcoal at rest, lifts slightly on hover.
   No badge/arrow — the HRP CTA is a clean solid pill. */
.fenix-header[data-profile="hrp-pill"] .fenix-header__cta--primary {
    background: #1f2228;
    color: #fff;
    height: 44px;
    padding: 0 22px;
    border-radius: 9999px;
    font-weight: 600;
    box-shadow: none;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.fenix-header[data-profile="hrp-pill"] .fenix-header__cta--primary:hover {
    background: #2b2f37;
    transform: translateY(-1.5px);
    box-shadow: 0 10px 22px -12px rgba(20, 20, 25, 0.5);
}
.fenix-header[data-profile="hrp-pill"] .fenix-header__cta--primary:active {
    transform: translateY(0);
}

/* Mobile: keep the pill; the base mobile rules hide the centre nav and reveal the
   hamburger. Let the bar span the row so the logo + toggle don't crowd. */
@media (max-width: 768px) {
    .fenix-header[data-profile="hrp-pill"] .fenix-header__row {
        width: auto;
        padding: 7px 10px 7px 16px;
        gap: 12px;
    }
    .fenix-header[data-profile="hrp-pill"] .fenix-header__menu-toggle {
        border-radius: 9999px;
    }
}

/* ─── Avatar variant — "pillsoft" ─────────────────────────────────────────────
   Tuned to the soft rounded bar: a soft rounded-SQUARE avatar with a hairline
   border and a very soft shadow (no pink band, no gradient). The dropdown is a
   quiet hairline card with a soft shadow. Pairs with any profile, but designed
   for hrp-pill. ──────────────────────────────────────────────────────────────── */
.fenix-header__user-menu--pillsoft .fenix-header__user-avatar {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 0.7rem;
    font-size: 0.85rem;
    color: #334155;
    background: #fff;
    border: 1px solid rgba(30, 41, 59, 0.12);
    box-shadow: 0 1px 2px rgba(20, 20, 25, 0.06);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.fenix-header__user-menu--pillsoft .fenix-header__user-avatar:hover {
    border-color: rgba(30, 41, 59, 0.28);
    box-shadow: 0 2px 8px rgba(20, 20, 25, 0.12);
}
.fenix-header__user-menu--pillsoft .fenix-header__user-dropdown {
    width: 17rem;
    border: 1px solid rgba(30, 41, 59, 0.10);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 20, 25, 0.05), 0 16px 40px -16px rgba(20, 20, 25, 0.28);
}
/* Reuse the portrait/outline identity-row + divider-list shell for the dropdown
   body (the user-menu component renders that markup for non-card/refined styles). */
.fenix-header__user-menu--pillsoft .fenix-header__user-portrait-id {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #eef0f4;
}
.fenix-header__user-menu--pillsoft .fenix-header__user-portrait-avatar {
    border-radius: 0.7rem;
    color: #334155;
    background: #fff;
    border: 1px solid rgba(30, 41, 59, 0.12);
    box-shadow: 0 1px 2px rgba(20, 20, 25, 0.06);
}
.fenix-header__user-menu--pillsoft .fenix-header__user-item {
    border-radius: 0;
    padding: 0.85rem 1rem;
    gap: 0.85rem;
    font-weight: 500;
    color: #4b5563;
    border-bottom: 1px solid #f1f3f5;
}
.fenix-header__user-menu--pillsoft .fenix-header__user-item:last-child { border-bottom: 0; }
.fenix-header__user-menu--pillsoft .fenix-header__user-item i {
    width: 1.15rem; color: #9aa1ac; font-size: 0.95rem;
}
.fenix-header__user-menu--pillsoft .fenix-header__user-item:hover {
    background: #f7f8fa; color: #1f2937;
}
.fenix-header__user-menu--pillsoft .fenix-header__user-item:hover i { color: #1f2937; }
.fenix-header__user-menu--pillsoft .fenix-header__user-item--danger { color: #6b7280; }
.fenix-header__user-menu--pillsoft .fenix-header__user-item--danger:hover { background: #fef2f2; color: #dc2626; }
.fenix-header__user-menu--pillsoft .fenix-header__user-item--danger:hover i { color: #dc2626; }

/* ─── Dropdown-style "softpill" — avatar-menu leading icons ────────────────────
   The flyout-icon axis value tuned to the soft bar: a hairline soft-shadow tile
   (neutral, NOT pink) so the account menu shares the hrp-pill language. The nav
   flyouts get the matching treatment in fenix-menu.css. ───────────────────────── */
[data-dd-style="softpill"] .fenix-header__user-item > i:not(.chev) {
    background: #fff;
    border: 1px solid rgba(30, 41, 59, 0.10);
    box-shadow: 0 1px 2px rgba(20, 20, 25, 0.05);
    color: #475569;
    border-radius: 0.6rem;
}
[data-dd-style="softpill"] .fenix-header__user-item:hover > i:not(.chev) {
    border-color: rgba(30, 41, 59, 0.24);
    box-shadow: 0 2px 8px rgba(20, 20, 25, 0.10);
    color: #1f2937;
}
[data-dd-style="softpill"] .fenix-header__user-item--danger:hover > i:not(.chev) {
    background: #fee2e2; border-color: rgba(220, 38, 38, 0.3); color: #dc2626;
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE VARIANT — "elevate-coaching"  (modelled on Coach2 handoff)

   Full-width warm parchment bar (#faf7f0), hairline warm-sand bottom border,
   Cormorant Garamond wordmark + Mulish uppercase nav, antique gold animated
   underline (menuStyle "goldline"), coach photo-circle avatar with double gold
   ring (avatarStyle "coachcircle"), warm cream flyout (dropdownStyle "warmcard").

   Scoped to data-profile="elevate-coaching" — never bleeds into other profiles.
   ════════════════════════════════════════════════════════════════════════════ */

.fenix-header[data-profile="elevate-coaching"] {
    background: #faf7f0;
    border-bottom: 1px solid #e7e0d2;
}
.fenix-header[data-profile="elevate-coaching"] .fenix-header__row {
    padding: 22px 48px;
    max-width: 100%;
    gap: 36px;
}
.fenix-header[data-profile="elevate-coaching"] .fenix-header__slot--right {
    gap: 40px;
}
@media (max-width: 768px) {
    .fenix-header[data-profile="elevate-coaching"] .fenix-header__slot--right {
        gap: 8px;
    }
}
/* Logo — espresso mark, serif wordmark, larger logo mark to match handoff */
.fenix-header[data-profile="elevate-coaching"] .fenix-header__logo {
    gap: 13px;
    --fenix-header-brand-text: #060937;
    color: #060937;
}
.fenix-header[data-profile="elevate-coaching"] .fenix-header__logo-img,
.fenix-header[data-profile="elevate-coaching"] .fenix-header__logo-svg {
    height: var(--fenix-logo-mark-size, 42px);
    width: var(--fenix-logo-mark-size, 42px);
    border-radius: 0;
}
/* Two-line wordmark block */
.fenix-header[data-profile="elevate-coaching"] .fenix-header__logo-block {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.fenix-header[data-profile="elevate-coaching"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, 'Cormorant Garamond', Georgia, serif);
    font-size: var(--fenix-logo-l1-size, 22px);
    font-weight: var(--fenix-logo-l1-weight, 600);
    letter-spacing: var(--fenix-logo-l1-tracking, 1px);
    text-transform: uppercase;
    color: var(--fenix-logo-l1-color, #060937);
}
.fenix-header[data-profile="elevate-coaching"] .fenix-header__logo-tagline {
    font-size: var(--fenix-logo-l2-size, 9.5px);
    font-weight: var(--fenix-logo-l2-weight, 600);
    letter-spacing: var(--fenix-logo-l2-tracking, 4px);
    color: var(--fenix-logo-l2-color, #b6a45a);
    text-transform: var(--fenix-logo-l2-transform, uppercase);
    margin-top: 4px;
}
/* Flyout margin: match the 22px row padding gap */
.fenix-header[data-profile="elevate-coaching"] .fenix-has-submenu > .fenix-submenu {
    margin-top: 20px;
}
/* Mobile */
@media (max-width: 768px) {
    .fenix-header[data-profile="elevate-coaching"] .fenix-header__row {
        padding: 16px 22px;
        gap: 12px;
    }
    .fenix-header[data-profile="elevate-coaching"] .fenix-header__logo-img,
    .fenix-header[data-profile="elevate-coaching"] .fenix-header__logo-svg {
        height: var(--fenix-logo-mark-size, 36px);
        width: var(--fenix-logo-mark-size, 36px);
    }
}
@media (max-width: 540px) {
    .fenix-header[data-profile="elevate-coaching"] .fenix-header__logo-tagline {
        display: none;
    }
}
/* Drawer — warm parchment tones */
.fenix-header[data-profile="elevate-coaching"] .fenix-header-drawer__panel {
    background: #faf7f0;
    color: #4a4338;
}
.fenix-header[data-profile="elevate-coaching"] .fenix-header-drawer__body a {
    color: #5a5040;
    border-bottom-color: #e7e0d2;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.fenix-header[data-profile="elevate-coaching"] .fenix-header-drawer__body a:hover {
    color: #b6a45a;
}
.fenix-header[data-profile="elevate-coaching"] .fenix-header__menu-toggle {
    color: #5a5040;
}

/* ─── Avatar variant — "coachcircle" ──────────────────────────────────────
   44px circle (photo or initials), double ring: 2px white gap + 1.5px
   antique gold outer ring. Uses the portrait dropdown shell.
   ─────────────────────────────────────────────────────────────────────── */
.fenix-header__user-menu--coachcircle .fenix-header__user-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #5a5040;
    background: #e9e0d2;
    box-shadow: 0 0 0 2px #faf7f0, 0 0 0 3.5px #d8cba0;
    border: 0;
    transition: box-shadow 0.2s ease;
}
.fenix-header__user-menu--coachcircle .fenix-header__user-avatar:hover {
    box-shadow: 0 0 0 2px #faf7f0, 0 0 0 3.5px #b6a45a;
}
/* Dropdown — warm cream card */
.fenix-header__user-menu--coachcircle .fenix-header__user-dropdown {
    width: 17rem;
    border: 1px solid #ece4d4;
    border-radius: 6px;
    overflow: hidden;
    background: #fffdf8;
    box-shadow: 0 20px 44px rgba(74, 67, 56, 0.18);
}
/* Identity row */
.fenix-header__user-menu--coachcircle .fenix-header__user-portrait-id {
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, #faf7f0, #fffdf8);
    border-bottom: 1px solid #ece4d4;
}
.fenix-header__user-menu--coachcircle .fenix-header__user-portrait-avatar {
    border-radius: 9999px;
    color: #5a5040;
    background: #e9e0d2;
    box-shadow: 0 0 0 2px #faf7f0, 0 0 0 3.5px #d8cba0;
    border: 0;
}
.fenix-header__user-menu--coachcircle .fenix-header__user-portrait-name { color: #4a4338; }
.fenix-header__user-menu--coachcircle .fenix-header__user-portrait-email { color: #7a7160; }
/* Menu items */
.fenix-header__user-menu--coachcircle .fenix-header__user-item {
    border-radius: 0;
    padding: 0.85rem 1rem;
    gap: 0.85rem;
    font-weight: 500;
    color: #6a6150;
    border-bottom: 1px solid #f0eadd;
}
.fenix-header__user-menu--coachcircle .fenix-header__user-item:last-child { border-bottom: 0; }
.fenix-header__user-menu--coachcircle .fenix-header__user-item i { width: 1.15rem; color: #b6a45a; font-size: 0.95rem; }
.fenix-header__user-menu--coachcircle .fenix-header__user-item:hover { background: #f4efe3; color: #4a4338; }
.fenix-header__user-menu--coachcircle .fenix-header__user-item:hover i { color: #8a7a3e; }
.fenix-header__user-menu--coachcircle .fenix-header__user-item--danger { color: #7a7160; }
.fenix-header__user-menu--coachcircle .fenix-header__user-item--danger:hover { background: #fef2f2; color: #dc2626; }
.fenix-header__user-menu--coachcircle .fenix-header__user-item--danger:hover i { color: #dc2626; }
/* Role badge — warm gold instead of pink */
.fenix-header__user-menu--coachcircle .fenix-header__user-badge {
    background: #f0e8d0;
    color: #7a6530;
}
/* Portrait-avatar inside the dropdown identity row — warm sand, not pink */
.fenix-header__user-menu--coachcircle .fenix-header__user-portrait-avatar {
    color: #5a5040;
    background: #e9e0d2;
}
/* Guest state — muted warm avatar */
.fenix-header__user-menu--coachcircle.fenix-header__user-menu--guest .fenix-header__user-avatar {
    color: #7a7160;
    background: #f0ebe0;
    box-shadow: 0 0 0 2px #faf7f0, 0 0 0 3.5px #e0d9c8;
}

/* ─── Dropdown-style "warmcard" — avatar-menu leading icons ────────────────
   Warm cream tile with gold icon tint, hairline gold border.
   ─────────────────────────────────────────────────────────────────────── */
[data-dd-style="warmcard"] .fenix-header__user-item > i:not(.chev) {
    background: #faf7f0;
    border: 1px solid #d8cba0;
    color: #8a7a3e;
    border-radius: 5px;
    box-shadow: none;
}
[data-dd-style="warmcard"] .fenix-header__user-item:hover > i:not(.chev) {
    background: #f4efe3;
    border-color: #b6a45a;
    color: #6a5a2a;
}
[data-dd-style="warmcard"] .fenix-header__user-item--danger:hover > i:not(.chev) {
    background: #fee2e2;
    border-color: rgba(220, 38, 38, 0.3);
    color: #dc2626;
}


/* ════════════════════════════════════════════════════════════════════════════
   PROFILE — "harlow"
   Sage/steel-blue (#6c97a8) on warm linen (#ecebe5). Cormorant Garamond
   wordmark + Jost "TRAINING" tagline. Circle avatar (initials), "harlowcircle"
   style. Dropdown "hawthorn" style (white card, rounded, sage hover).
   ════════════════════════════════════════════════════════════════════════════ */
.fenix-header[data-profile="harlow"] {
    background: #ecebe5;
    border-bottom: 1px solid #dddccf;
}
.fenix-header[data-profile="harlow"] .fenix-header__row {
    padding: 0 40px;
    max-width: 1280px;
    height: 96px;
    display: flex;
    align-items: center;
}
/* Centre slot flex-grows so nav is truly centred between logo and right slot */
.fenix-header[data-profile="harlow"] .fenix-header__slot--centre {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
.fenix-header[data-profile="harlow"] .fenix-header__slot--left  { flex: 0 0 auto; }
.fenix-header[data-profile="harlow"] .fenix-header__slot--right { flex: 0 0 auto; gap: 18px; }
@media (max-width: 768px) {
    .fenix-header[data-profile="harlow"] .fenix-header__row {
        padding: 0 22px;
        height: 72px;
    }
    .fenix-header[data-profile="harlow"] .fenix-header__slot--right { gap: 8px; }
}

/* Logo block — SVG mark + two-line wordmark */
.fenix-header[data-profile="harlow"] .fenix-header__logo {
    display: flex;
    align-items: var(--fenix-logo-align, center);
    gap: var(--fenix-logo-gap, 13px);
    text-decoration: none;
}
.fenix-header[data-profile="harlow"] .fenix-header__logo-block {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
/* SVG logo — 44px tall, painted near-black to match HTML reference */
.fenix-header[data-profile="harlow"] .fenix-header__logo-img,
.fenix-header[data-profile="harlow"] .fenix-header__logo-svg {
    height: var(--fenix-logo-mark-size, 44px);
    width: auto;
    color: var(--fenix-logo-mark-color, #2c2e2d);
    fill: currentColor;
}
.fenix-header[data-profile="harlow"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, 'Cormorant Garamond', serif);
    font-weight: var(--fenix-logo-l1-weight, 600);
    font-size: var(--fenix-logo-l1-size, 24px);
    letter-spacing: var(--fenix-logo-l1-tracking, 1.5px);
    text-transform: uppercase;
    color: var(--fenix-logo-l1-color, #2c2e2d);
}
.fenix-header[data-profile="harlow"] .fenix-header__logo-tagline {
    font-family: var(--fenix-logo-l2-family, 'Jost', sans-serif);
    font-size: var(--fenix-logo-l2-size, 9.5px);
    font-weight: var(--fenix-logo-l2-weight, 600);
    letter-spacing: var(--fenix-logo-l2-tracking, 4px);
    text-transform: var(--fenix-logo-l2-transform, uppercase);
    color: var(--fenix-logo-l2-color, #6c97a8);
    margin-top: 5px;
}

/* Auth-link "Book Your First Session" CTA pill */
.fenix-header[data-profile="harlow"] .fenix-header__auth-link {
    background: #6c97a8;
    color: #ffffff !important;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    padding: 15px 24px;
    border-radius: 40px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 10px 24px -12px rgba(108,151,168,.7);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
    text-decoration: none !important;
    display: inline-block;
}
.fenix-header[data-profile="harlow"] .fenix-header__auth-link:hover {
    background: #5d8898;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(108,151,168,.85);
}

/* ─── Avatar variant — "harlowcircle" ─────────────────────────────────────
   46px circle, linen bg with white border ring, initials in sage-dark color.
   Matches HTML: background:#dfe6e8, border:2px solid #fff, sage shadow.
   ──────────────────────────────────────────────────────────────────────── */
.fenix-header__user-menu--harlowcircle .fenix-header__user-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Jost', sans-serif;
    color: #2c2e2d;
    background: #dfe6e8;
    border: 2px solid #ffffff;
    box-shadow: 0 6px 16px -6px rgba(44,46,45,.45);
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
    padding: 0;
}
.fenix-header__user-menu--harlowcircle .fenix-header__user-avatar:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -6px rgba(44,46,45,.5);
}
/* Dropdown shell */
.fenix-header__user-menu--harlowcircle .fenix-header__user-dropdown {
    width: 276px;
    border: 1px solid #ecebe4;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 28px 64px -22px rgba(44,46,45,.45);
    padding: 8px;
}
/* Identity row */
.fenix-header__user-menu--harlowcircle .fenix-header__user-portrait-id {
    padding: 14px 14px 16px;
    background: #ffffff;
    border-bottom: 1px solid #efeee8;
    margin-bottom: 6px;
}
.fenix-header__user-menu--harlowcircle .fenix-header__user-portrait-avatar {
    border-radius: 50%;
    background: #dfe6e8;
    border: 0;
    box-shadow: none;
    width: 46px;
    height: 46px;
    overflow: hidden;
    color: #2c2e2d;
    font-size: 0.85rem;
    font-weight: 600;
}
.fenix-header__user-menu--harlowcircle .fenix-header__user-portrait-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.1;
    color: #2c2e2d;
}
.fenix-header__user-menu--harlowcircle .fenix-header__user-portrait-email {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: .3px;
    color: #9a988f;
    margin-top: 3px;
}
/* Menu items */
.fenix-header__user-menu--harlowcircle .fenix-header__user-item {
    border-radius: 11px;
    margin: 2px 0;
    padding: 11px 14px;
    gap: 12px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 400;
    color: #3c3e3d;
    border-bottom: 0;
    transition: background .2s ease, color .2s ease;
}
.fenix-header__user-menu--harlowcircle .fenix-header__user-item i { color: #6c97a8; }
.fenix-header__user-menu--harlowcircle .fenix-header__user-item:hover { background: #eef3f4; color: #5d8898; }
.fenix-header__user-menu--harlowcircle .fenix-header__user-item:hover i { color: #5d8898; }
.fenix-header__user-menu--harlowcircle .fenix-header__user-item--danger { color: #b06a5b; }
.fenix-header__user-menu--harlowcircle .fenix-header__user-item--danger:hover { background: #f6ece9; color: #b06a5b; }
.fenix-header__user-menu--harlowcircle .fenix-header__user-item--danger:hover i { color: #b06a5b; }
/* Divider */
.fenix-header__user-menu--harlowcircle .fenix-header__user-div {
    display: block;
    height: 1px;
    background: #efeee8;
    margin: 6px 6px;
}
/* Guest state */
.fenix-header__user-menu--harlowcircle.fenix-header__user-menu--guest .fenix-header__user-avatar {
    color: #9a988f;
    background: #ecebe5;
    border-color: #dddccf;
    box-shadow: 0 4px 10px -4px rgba(44,46,45,.25);
}

/* Hero section matches header — linen band flows seamlessly from header into hero */
body:has(.fenix-header[data-profile="harlow"]) .fenix-section:first-of-type > section {
    background: #ecebe5 !important;
}

/* ════════════════════════════════════════════════════════
   PROFILE — "east-eversley"
   Palette: linen #F4F0EA · terracotta #A9765A · warm slate #45483F
   Fonts: Cormorant Garamond (serif wordmark) · Jost (nav + UI)
   ════════════════════════════════════════════════════════ */
.fenix-header[data-profile="east-eversley"] {
    background: #F4F0EA;
    border-bottom: 1px solid #E5DFD5;
}
.fenix-header[data-profile="east-eversley"] .fenix-header__row {
    padding: 22px 48px;
    max-width: 1152px;
}
.fenix-header[data-profile="east-eversley"] .fenix-header__slot--right { gap: 28px; }
@media (max-width: 768px) {
    .fenix-header[data-profile="east-eversley"] .fenix-header__slot--right { gap: 10px; }
    .fenix-header[data-profile="east-eversley"] .fenix-header__row { padding: 16px 22px; }
}

/* Two-line wordmark: "Growth Vision" / TRAINING */
.fenix-header[data-profile="east-eversley"] .fenix-header__logo-block {
    display: flex; flex-direction: column; line-height: 1;
}
.fenix-header[data-profile="east-eversley"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, 'Cormorant Garamond', serif);
    font-size: var(--fenix-logo-l1-size, 21px); font-weight: var(--fenix-logo-l1-weight, 500);
    letter-spacing: var(--fenix-logo-l1-tracking, 0.06em); text-transform: none; color: var(--fenix-logo-l1-color, #2E3360);
}
.fenix-header[data-profile="east-eversley"] .fenix-header__logo-tagline {
    font-family: var(--fenix-logo-l2-family, 'Jost', sans-serif);
    font-size: var(--fenix-logo-l2-size, 11px); font-weight: var(--fenix-logo-l2-weight, 400);
    letter-spacing: var(--fenix-logo-l2-tracking, 0.42em); color: var(--fenix-logo-l2-color, #2E3360);
    text-transform: var(--fenix-logo-l2-transform, uppercase); margin-top: 3px; padding-left: 0.42em;
}

/* ─── Avatar — "eecircle" ────────────────────────────────── */
.fenix-header__user-menu--eecircle .fenix-header__user-avatar {
    width: 36px; height: 36px;
    border-radius: 9999px;
    font-size: 13px; font-weight: 600;
    color: #F4EEE6; background: #A9765A;
    box-shadow: 0 0 0 2px #F4F0EA, 0 0 0 3.5px #A9765A;
    border: 0; transition: box-shadow 0.2s ease;
}
.fenix-header__user-menu--eecircle .fenix-header__user-avatar:hover {
    box-shadow: 0 0 0 2px #F4F0EA, 0 0 0 4px #8a5d42;
}
/* Dropdown shell */
.fenix-header__user-menu--eecircle .fenix-header__user-dropdown {
    width: 17rem; border: 1px solid #E5DFD5; border-radius: 4px;
    overflow: hidden; background: #FDFAF7;
    box-shadow: 0 8px 24px -8px rgba(68,62,54,0.18);
}
/* Identity row */
.fenix-header__user-menu--eecircle .fenix-header__user-portrait-id {
    padding: 0.9rem 1rem;
    background: #F4F0EA;
    border-bottom: 1px solid #E5DFD5;
}
.fenix-header__user-menu--eecircle .fenix-header__user-portrait-avatar {
    border-radius: 9999px; background: #A9765A; border: 0;
    box-shadow: 0 0 0 2px #F4F0EA, 0 0 0 3.5px #A9765A;
}
.fenix-header__user-menu--eecircle .fenix-header__user-portrait-name  { color: #43403A; }
.fenix-header__user-menu--eecircle .fenix-header__user-portrait-email { color: #8a8478; }
/* Menu items */
.fenix-header__user-menu--eecircle .fenix-header__user-item {
    border-radius: 0; padding: 0.85rem 1rem; gap: 0.85rem;
    font-weight: 500; color: #44423B; border-bottom: 1px solid #EDE9E1;
}
.fenix-header__user-menu--eecircle .fenix-header__user-item:last-child { border-bottom: 0; }
.fenix-header__user-menu--eecircle .fenix-header__user-item i  { color: #A9765A; }
.fenix-header__user-menu--eecircle .fenix-header__user-item:hover { background: #F4F0EA; color: #44423B; }
.fenix-header__user-menu--eecircle .fenix-header__user-item--danger { color: #8a8478; }
.fenix-header__user-menu--eecircle .fenix-header__user-item--danger:hover { background: #fef2f2; color: #dc2626; }
/* Guest state */
.fenix-header__user-menu--eecircle.fenix-header__user-menu--guest .fenix-header__user-avatar {
    color: #9a958a; background: #EDE9E1;
    box-shadow: 0 0 0 2px #F4F0EA, 0 0 0 3.5px #d5cfc5;
}

/* ─── East & Eversley page template helpers ────────────────────────────── */
.ee-band-bg { background-color: #9D6F54; }

/* ─── Dropdown-style "hawthorn" — clean white card, sage accent ────────────
   White rounded card (16px), sage icon tint, hover = #eef3f4.
   ──────────────────────────────────────────────────────────────────────── */
[data-dd-style="hawthorn"] .fenix-header__user-item > i:not(.chev) {
    background: #f0f5f6;
    border: 1px solid #c8dde4;
    color: #6c97a8;
    border-radius: 5px;
    box-shadow: none;
}
[data-dd-style="hawthorn"] .fenix-header__user-item:hover > i:not(.chev) {
    background: #eef3f4;
    border-color: #6c97a8;
    color: #5d8898;
}
[data-dd-style="hawthorn"] .fenix-header__user-item--danger:hover > i:not(.chev) {
    background: #fee2e2;
    border-color: rgba(220,38,38,.3);
    color: #dc2626;
}

/* ════════════════════════════════════════════════════════
   PROFILE — "axion"  (Growth Vision Axion)
   Warm parchment bg, centred nav, photo-avatar trigger
   ════════════════════════════════════════════════════════ */
.fenix-header[data-profile="axion"] {
    background: rgba(239,238,231,0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #e2e0d6;
}
.fenix-header[data-profile="axion"] .fenix-header__row {
    padding: 14px 40px;
    max-width: 100%;
    gap: 0;
}
/* Logo block: wordmark + "Training" tag */
.fenix-header[data-profile="axion"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, 'Bricolage Grotesque', sans-serif) !important;
    font-size: var(--fenix-logo-l1-size, 21px) !important; font-weight: var(--fenix-logo-l1-weight, 700) !important;
    letter-spacing: var(--fenix-logo-l1-tracking, -0.5px) !important; color: var(--fenix-logo-l1-color, #17180f) !important;
}
.fenix-header[data-profile="axion"] .fenix-header__logo-tagline {
    font-size: var(--fenix-logo-l2-size, 9px) !important; font-weight: var(--fenix-logo-l2-weight, 700) !important;
    letter-spacing: var(--fenix-logo-l2-tracking, 2px) !important; text-transform: var(--fenix-logo-l2-transform, uppercase) !important;
    color: var(--fenix-logo-l2-color, #8c8a7d) !important;
    border-left: 1px solid #d6d3c7; padding-left: 9px; margin-left: 4px;
}
/* Right-slot gap */
.fenix-header[data-profile="axion"] .fenix-header__slot--right { gap: 12px; }
@media (max-width: 768px) {
    .fenix-header[data-profile="axion"] .fenix-header__row { padding: 14px 20px; }
    .fenix-header[data-profile="axion"] .fenix-header__slot--right { gap: 8px; }
}

/* ─── Avatar variant — "axion-circle" ─────────────────────────────────────
   42px photo-circle avatar with a soft parchment double-ring, plus a
   name + "Member" badge trigger (matching the Axion .ax-acct design).
   Dropdown: white rounded card (18px), quiet divider list.
   ──────────────────────────────────────────────────────────────────────── */
/* The trigger is a pill: photo-circle + name/role column + caret. */
.fenix-header__user-menu--axion-circle .fenix-header__user-avatar {
    width: auto; height: auto;
    display: inline-flex; align-items: center; gap: 11px;
    padding: 4px 14px 4px 4px;
    border-radius: 9999px;
    background: transparent;
    box-shadow: none;
    border: 0;
    transition: background 0.2s ease;
}
.fenix-header__user-menu--axion-circle .fenix-header__user-avatar:hover {
    background: rgba(23,24,15,.04);
}
/* The fixed photo-circle holding the initials/glyph. */
.fenix-header__user-menu--axion-circle .fenix-header__user-trigger-circle {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    font-size: 0.85rem; font-weight: 700;
    color: #45443c; background: #d8d6c9;
    box-shadow: 0 0 0 2px #efeee7, 0 0 0 3.5px #cdcabe;
}
.fenix-header__user-menu--axion-circle .fenix-header__user-avatar:hover .fenix-header__user-trigger-circle {
    box-shadow: 0 0 0 2px #efeee7, 0 0 0 3.5px #9a9888;
}
/* Name + role column. */
.fenix-header__user-menu--axion-circle .fenix-header__user-trigger-id {
    display: flex; flex-direction: column; line-height: 1.2; text-align: left;
}
.fenix-header__user-menu--axion-circle .fenix-header__user-trigger-name {
    font-size: 13px; font-weight: 600; color: #17180f;
}
.fenix-header__user-menu--axion-circle .fenix-header__user-trigger-role {
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #6f7250; margin-top: 2px;
}
/* Down-caret chevron. */
.fenix-header__user-menu--axion-circle .fenix-header__user-trigger-caret {
    flex: 0 0 auto;
    width: 8px; height: 8px; margin-left: 2px;
    border-right: 1.5px solid #8c8a7d;
    border-bottom: 1.5px solid #8c8a7d;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
}
.fenix-header__user-menu--axion-circle .fenix-header__user-avatar[aria-expanded="true"] .fenix-header__user-trigger-caret {
    transform: rotate(-135deg) translateX(-2px);
}
/* Hide the name/role on narrow screens — keep just the circle + caret. */
@media (max-width: 640px) {
    .fenix-header__user-menu--axion-circle .fenix-header__user-trigger-id { display: none; }
}
.fenix-header__user-menu--axion-circle .fenix-header__user-dropdown {
    width: 17rem;
    border: 1px solid #e4e2d8;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 22px 46px rgba(23,24,15,.18);
}
/* Identity row */
.fenix-header__user-menu--axion-circle .fenix-header__user-portrait-id {
    padding: 0.85rem 1rem;
    background: #fff;
    border-bottom: 1px solid #eceae0;
}
.fenix-header__user-menu--axion-circle .fenix-header__user-portrait-avatar {
    border-radius: 9999px;
    background: #d8d6c9;
    box-shadow: 0 0 0 2px #efeee7, 0 0 0 3.5px #cdcabe;
    border: 0;
}
.fenix-header__user-menu--axion-circle .fenix-header__user-portrait-name  { color: #17180f; }
.fenix-header__user-menu--axion-circle .fenix-header__user-portrait-email { color: #9a988c; }
/* Menu items — airier rows, plain icons (no tiles), NO dividers between items.
   Matches the Growth Vision .gv-acct-link mockup: ~15px text, airy rows,
   muted-taupe icons. Only the identity row keeps its divider; the items list
   is a clean stack (no per-item top/bottom borders). */
.fenix-header__user-menu--axion-circle .fenix-header__user-item {
    border-radius: 0; padding: 0.95rem 1.35rem; gap: 0.9rem;
    font-size: 0.94rem; font-weight: 500; color: #4a4338;
    border-bottom: 0; border-top: 0;
}
.fenix-header__user-menu--axion-circle .fenix-header__user-item i  {
    color: #9a8f7a; font-size: 1rem; width: 1.15rem; text-align: center;
}
.fenix-header__user-menu--axion-circle .fenix-header__user-item:hover { background: #f3f1e9; color: #17180f; }
.fenix-header__user-menu--axion-circle .fenix-header__user-item:hover i { color: #6f7250; }
.fenix-header__user-menu--axion-circle .fenix-header__user-item--danger { color: #9a8f7a; border-top: 0; }
.fenix-header__user-menu--axion-circle .fenix-header__user-item--danger:hover { background: #f6efec; color: #b06a5b; }
.fenix-header__user-menu--axion-circle .fenix-header__user-item--danger:hover i { color: #b06a5b; }
/* Guest state */
.fenix-header__user-menu--axion-circle.fenix-header__user-menu--guest .fenix-header__user-avatar {
    color: #8c8a7d; background: #e8e6dc;
    box-shadow: 0 0 0 2px #efeee7, 0 0 0 3.5px #d6d3c7;
}

/* ─── Dropdown-style "axion-dd" — white rounded card, parchment hover ──────
   White card, parchment (#f3f1e9) item hover. Plain icons — NO tile/chip —
   to match the Growth Vision .gv-acct-link mockup (icon sits bare beside the
   label). Tile background/border explicitly cleared so the shared dd-style
   chip rules don't draw a square behind each icon.
   ──────────────────────────────────────────────────────────────────────── */
[data-dd-style="axion-dd"] .fenix-header__user-item > i:not(.chev) {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    width: 1.15rem; height: auto;
    font-size: 1rem;
    color: #9a8f7a;
}
[data-dd-style="axion-dd"] .fenix-header__user-item:hover > i:not(.chev) {
    background: transparent;
    color: #6f7250;
}
[data-dd-style="axion-dd"] .fenix-header__user-item--danger:hover > i:not(.chev) {
    background: transparent;
    color: #b06a5b;
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE — "gv-home" (Growth Vision Home, 2026-07-03)
   Ported from "Growth Vision (standalone).html": transparent nav floating over
   the hero's baked cream wash, centre kolam logo + indigo two-line wordmark,
   split Jost-caps nav either side (menuStyle "gvhome"), 34px avatar circle with
   indigo ring + caret (avatarStyle "gvhome-circle", dd "gvhome-dd").
   ════════════════════════════════════════════════════════════════════════════ */

/* Transparent overlay: the header keeps its flow slot (announcement bars above
   it are unaffected) but pulls the page up underneath itself, so the hero's own
   150px top gradient sits behind the nav exactly like the mockup. NOT sticky —
   the source nav scrolls away with the hero. */
.fenix-header[data-profile="gv-home"] {
    background: transparent;
    border-bottom: 0;
    position: relative;
    z-index: 50;
    margin-bottom: -90px;
    --fenix-header-brand-text: #2E3360;
}
.fenix-header[data-profile="gv-home"] .fenix-header__row {
    padding: 26px 48px 18px;
    gap: 24px;
}
/* Symmetric three-zone row: side slots share leftover space equally so the
   centre logo sits on the true page centreline (mockup uses flex:1 both sides). */
.fenix-header[data-profile="gv-home"] .fenix-header__slot--left,
.fenix-header[data-profile="gv-home"] .fenix-header__slot--right {
    flex: 1 1 0;
}
.fenix-header[data-profile="gv-home"] .fenix-header__slot--centre {
    flex: 0 0 auto;
}
.fenix-header[data-profile="gv-home"] .fenix-header__slot--left { justify-content: flex-start; }
.fenix-header[data-profile="gv-home"] .fenix-header__slot--left .fenix-top-menu { gap: 32px; }
.fenix-header[data-profile="gv-home"] .fenix-header__slot--right .fenix-top-menu { gap: 30px; }
.fenix-header[data-profile="gv-home"] .fenix-header__slot--right { gap: 30px; }

/* The centre slot holds the logo — suppress the drawer machinery that
   auto-activates on centre-slot content (drawer body would just repeat the
   logo; mobile is served by the split-nav hamburger instead). */
.fenix-header[data-profile="gv-home"] .fenix-header__menu-toggle { display: none !important; }
.fenix-header-drawer[data-profile="gv-home"] { display: none !important; }

/* Logo — kolam mark 46px + "Growth Vision" Cormorant 21px over "TRAINING"
   Jost 11px 0.42em, all in indigo #2E3360 (via --fenix-header-brand-text). */
.fenix-header[data-profile="gv-home"] .fenix-header__logo { gap: 13px; }
.fenix-header[data-profile="gv-home"] .fenix-header__logo-img,
.fenix-header[data-profile="gv-home"] .fenix-header__logo-svg {
    height: var(--fenix-logo-mark-size, 46px); width: auto;
}
.fenix-header[data-profile="gv-home"] .fenix-header__logo-block {
    display: flex; flex-direction: column; line-height: 1.05; text-align: center;
}
.fenix-header[data-profile="gv-home"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, 'Cormorant Garamond', serif);
    font-size: var(--fenix-logo-l1-size, 21px); font-weight: var(--fenix-logo-l1-weight, 500);
    letter-spacing: var(--fenix-logo-l1-tracking, 0.06em); text-transform: none; color: var(--fenix-logo-l1-color, #2E3360);
}
.fenix-header[data-profile="gv-home"] .fenix-header__logo-tagline {
    font-family: var(--fenix-logo-l2-family, 'Jost', sans-serif);
    font-size: var(--fenix-logo-l2-size, 11px); font-weight: var(--fenix-logo-l2-weight, 400);
    letter-spacing: var(--fenix-logo-l2-tracking, 0.42em); color: var(--fenix-logo-l2-color, #2E3360);
    text-transform: var(--fenix-logo-l2-transform, uppercase); margin-top: 3px; padding-left: 0.42em;
}

/* Logged-out "Sign in" auth link — match the nav link voice. */
.fenix-header[data-profile="gv-home"] .fenix-header__auth-link {
    font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400;
    letter-spacing: 0.22em; text-transform: uppercase; color: #5A574F;
}
.fenix-header[data-profile="gv-home"] .fenix-header__auth-link:hover { color: #A9765A; }

@media (max-width: 767px) {
    .fenix-header[data-profile="gv-home"] { margin-bottom: -72px; }
    .fenix-header[data-profile="gv-home"] .fenix-header__row { padding: 16px 22px 12px; }
    .fenix-header[data-profile="gv-home"] .fenix-header__slot--right { gap: 10px; }
    .fenix-header[data-profile="gv-home"] .fenix-header__logo-img,
    .fenix-header[data-profile="gv-home"] .fenix-header__logo-svg { height: var(--fenix-logo-mark-size, 38px); }
    .fenix-header[data-profile="gv-home"] .fenix-header__logo-text { font-size: var(--fenix-logo-l1-size, 18px); }
    .fenix-header[data-profile="gv-home"] .fenix-header__logo-tagline { font-size: var(--fenix-logo-l2-size, 9px); }
    /* Mobile panel anchors to the LEFT slot's nav — open it from the left edge. */
    .fenix-header[data-profile="gv-home"] .fenix-header__slot--left .fenix-top-menu {
        left: 0; right: auto;
    }
}

/* ─── Avatar — "gvhome-circle" ───────────────────────────────────────────────
   34px circle, 1.5px indigo-tint ring, small caret beside it (pure CSS ::after
   so the C# trigger markup stays shared); dropdown = 244px pure-white card,
   #ECE6DC hairline, serif identity name, terracotta hover, rust Log out.      */
.fenix-header__user-menu--gvhome-circle .fenix-header__user-avatar {
    width: 34px; height: 34px;
    border-radius: 9999px;
    font-size: 12.5px; font-weight: 600;
    color: #F4EEE6; background: #A9765A;
    box-shadow: 0 0 0 1.5px rgba(46, 51, 96, 0.25);
    border: 0; transition: box-shadow 0.2s ease;
    overflow: visible; position: relative;
    margin-right: 16px;
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-avatar:hover {
    box-shadow: 0 0 0 1.5px rgba(46, 51, 96, 0.45);
}
/* The caret beside the circle (source: .gv-caret). Sits outside the button
   bounds; rotates when the dropdown is open. */
.fenix-header__user-menu--gvhome-circle .fenix-header__user-avatar::after {
    content: ''; position: absolute; right: -16px; top: 50%;
    width: 7px; height: 7px;
    border-right: 1.6px solid #5A574F; border-bottom: 1.6px solid #5A574F;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-avatar[aria-expanded="true"]::after {
    transform: translateY(-30%) rotate(225deg);
}
/* Dropdown shell — 244px white card per the source's .gv-menu. */
.fenix-header__user-menu--gvhome-circle .fenix-header__user-dropdown {
    width: 244px; border: 1px solid #ECE6DC; border-radius: 4px;
    overflow: hidden; background: #FFFFFF;
    box-shadow: 0 14px 38px rgba(60, 55, 45, 0.16);
}
/* Identity row — serif name over muted email, white ground, hairline below. */
.fenix-header__user-menu--gvhome-circle .fenix-header__user-portrait-id {
    padding: 18px 20px 14px;
    background: #FFFFFF;
    border-bottom: 1px solid #ECE6DC;
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-portrait-avatar {
    border-radius: 9999px; background: #A9765A; border: 0; color: #F4EEE6;
    box-shadow: 0 0 0 1.5px rgba(46, 51, 96, 0.25);
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-portrait-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px; font-weight: 500; color: #3A372F; letter-spacing: 0.01em;
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-portrait-email {
    font-family: 'Jost', sans-serif;
    font-size: 11px; font-weight: 300; letter-spacing: 0.02em; color: #8A8579;
}
/* Menu items — clean stack (no per-item hairlines), parchment + terracotta hover. */
.fenix-header__user-menu--gvhome-circle .fenix-header__user-item {
    border-radius: 0; padding: 9px 20px; gap: 0.75rem;
    font-family: 'Jost', sans-serif;
    font-size: 12px; font-weight: 400; letter-spacing: 0.04em;
    color: #5A574F; border-bottom: 0; border-top: 0;
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-portrait-list { padding: 8px 0; }
.fenix-header__user-menu--gvhome-circle .fenix-header__user-item:hover {
    background: #F4F0EA; color: #A9765A;
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-item--danger { color: #B05B3C; }
.fenix-header__user-menu--gvhome-circle .fenix-header__user-item--danger:hover {
    background: #F4F0EA; color: #B05B3C;
}
/* Guest state — muted circle, same ring language. */
.fenix-header__user-menu--gvhome-circle.fenix-header__user-menu--guest .fenix-header__user-avatar {
    color: #9a958a; background: #EDE9E1;
    box-shadow: 0 0 0 1.5px rgba(46, 51, 96, 0.18);
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-guest-head {
    padding: 16px 20px 12px; border-bottom: 1px solid #ECE6DC;
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-guest-title {
    font-family: 'Cormorant Garamond', serif; font-size: 17px; color: #3A372F;
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-guest-sub {
    font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; color: #8A8579;
}
.fenix-header__user-menu--gvhome-circle .fenix-header__user-guest-body { padding: 8px 0; }

/* ─── Dropdown-style "gvhome-dd" — tile-free terracotta icons ────────────────
   The base [data-dd-style] rule paints a 2rem tile box on every leading icon;
   zero it out so items read as plain text + small glyph, per the source menu. */
[data-dd-style="gvhome-dd"] .fenix-header__user-item > i:not(.chev) {
    width: auto; height: auto;
    background: transparent; border: 0; border-radius: 0;
    box-shadow: none; color: #A9765A; font-size: 0.85rem;
}
[data-dd-style="gvhome-dd"] .fenix-header__user-item:hover > i:not(.chev) {
    background: transparent; color: #A9765A;
}
[data-dd-style="gvhome-dd"] .fenix-submenu-icon {
    background: transparent; border: 0; color: #A9765A;
}

/* When the gv-home overlay header is present, give the hero's text block the
   nav's height back (mockup keeps ~92px between nav and badge — its nav lived
   inside the hero section). Conditional on the profile via the sibling chain,
   so the gvh-hero template keeps its standalone 92px padding under any other
   header. */
.fenix-header[data-profile="gv-home"] ~ * .gvh-hero-pad {
    padding-top: 182px !important;
}
@media (max-width: 767px) {
    .fenix-header[data-profile="gv-home"] ~ * .gvh-hero-pad {
        padding-top: 130px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE — "growth-vision-home"  (Growth Vision Home1b / earth2)
   Ported from "Growth Vision - Home1b.html". Logo-left, STICKY translucent cream
   bar with blur (source: header background rgba(250,247,240,0.88) + backdrop-blur).
   Reuses the warm-gold Elevate axis triplet — menuStyle "goldline" (Mulish caps,
   animated gold underline), avatarStyle "coachcircle" (44px circle, #d8cba0 double
   ring), dropdownStyle "warmcard" (parchment icon tiles). The hero sits UNDER the
   sticky bar (hero content is bottom-anchored, so no pad compensation needed).
   ════════════════════════════════════════════════════════════════════════════ */
.fenix-header[data-profile="growth-vision-home"] {
    background: rgba(250, 247, 240, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e7e0d2;
    --fenix-header-brand-text: #43472f;
}
.fenix-header[data-profile="growth-vision-home"] .fenix-header__row {
    padding: 20px 48px;
    max-width: 100%;
    gap: 24px;
}
.fenix-header[data-profile="growth-vision-home"] .fenix-header__slot--left { justify-content: flex-start; gap: 36px; }
.fenix-header[data-profile="growth-vision-home"] .fenix-header__slot--left .fenix-top-menu { gap: 36px; }
.fenix-header[data-profile="growth-vision-home"] .fenix-header__slot--right { gap: 26px; }

/* Logo — kolam mark 40px + "Growth Vision" Cormorant 23px over "TRAINING"
   Mulish 9px 0.44em, in dark olive #43472f / gold #b6a45a. */
.fenix-header[data-profile="growth-vision-home"] .fenix-header__logo { gap: 13px; }
.fenix-header[data-profile="growth-vision-home"] .fenix-header__logo-img,
.fenix-header[data-profile="growth-vision-home"] .fenix-header__logo-svg {
    height: var(--fenix-logo-mark-size, 40px); width: auto;
}
.fenix-header[data-profile="growth-vision-home"] .fenix-header__logo-block {
    display: flex; flex-direction: column; line-height: 1;
}
.fenix-header[data-profile="growth-vision-home"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, 'Cormorant Garamond', serif);
    font-size: var(--fenix-logo-l1-size, 23px); font-weight: var(--fenix-logo-l1-weight, 600);
    letter-spacing: var(--fenix-logo-l1-tracking, 0.065em); text-transform: uppercase; color: var(--fenix-logo-l1-color, #43472f);
}
.fenix-header[data-profile="growth-vision-home"] .fenix-header__logo-tagline {
    font-family: var(--fenix-logo-l2-family, 'Mulish', sans-serif);
    font-size: var(--fenix-logo-l2-size, 9px); font-weight: var(--fenix-logo-l2-weight, 700);
    letter-spacing: var(--fenix-logo-l2-tracking, 0.44em); color: var(--fenix-logo-l2-color, #b6a45a);
    text-transform: var(--fenix-logo-l2-transform, uppercase); margin-top: 4px;
}

/* Logged-out "Sign in" auth link — match the goldline nav voice. */
.fenix-header[data-profile="growth-vision-home"] .fenix-header__auth-link {
    font-family: 'Mulish', sans-serif; font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: #6a6150;
}
.fenix-header[data-profile="growth-vision-home"] .fenix-header__auth-link:hover { color: #9a8740; }

@media (max-width: 767px) {
    .fenix-header[data-profile="growth-vision-home"] .fenix-header__row { padding: 16px 22px; }
    .fenix-header[data-profile="growth-vision-home"] .fenix-header__slot--right { gap: 10px; }
    .fenix-header[data-profile="growth-vision-home"] .fenix-header__logo-img,
    .fenix-header[data-profile="growth-vision-home"] .fenix-header__logo-svg { height: var(--fenix-logo-mark-size, 34px); }
    .fenix-header[data-profile="growth-vision-home"] .fenix-header__logo-text { font-size: var(--fenix-logo-l1-size, 19px); }
    .fenix-header[data-profile="growth-vision-home"] .fenix-header__logo-tagline { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE — "coastal" (Growth Vision Coastal, 2026-07-03)
   Ported from "Growth Vision - Coastal Serif (standalone).html": cream #ecebe6
   bar, logo-left (kolam mark #3c5160 + "GROWTH VISION" Cormorant 26px caps),
   nav (menuStyle "coastal"), "JOIN NOW" slate CTA + 42px slate avatar circle
   (avatarStyle "coastal-circle", dd "coastal-dd").
   ════════════════════════════════════════════════════════════════════════════ */
.fenix-header[data-profile="coastal"] {
    background: #ecebe6;
    border-bottom: 0;
    --fenix-header-brand-text: #3c5160;
}
.fenix-header[data-profile="coastal"] .fenix-header__row {
    padding: 22px 56px;
    max-width: 100%;
    gap: 24px;
}
/* Logo — kolam mark 36px + "GROWTH VISION" Cormorant 26px 3px caps in slate. */
.fenix-header[data-profile="coastal"] .fenix-header__logo { gap: var(--fenix-logo-gap, 12px); }
.fenix-header[data-profile="coastal"] .fenix-header__logo-img,
.fenix-header[data-profile="coastal"] .fenix-header__logo-svg {
    height: var(--fenix-logo-mark-size, 36px); width: auto; color: var(--fenix-logo-mark-color, #3c5160);
}
.fenix-header[data-profile="coastal"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, 'Cormorant Garamond', serif) !important;
    font-size: var(--fenix-logo-l1-size, 26px) !important; font-weight: var(--fenix-logo-l1-weight, 600) !important;
    letter-spacing: var(--fenix-logo-l1-tracking, 3px) !important; text-transform: uppercase !important;
    color: var(--fenix-logo-l1-color, #3c5160) !important;
}
/* Right-slot gap — CTA button + avatar. */
.fenix-header[data-profile="coastal"] .fenix-header__slot--right { gap: 18px; }
.fenix-header[data-profile="coastal"] .fenix-header__slot--centre { flex: 1 1 auto; justify-content: center; }
.fenix-header[data-profile="coastal"] .fenix-header__slot--centre .fenix-top-menu { gap: 34px; }

/* "JOIN NOW" CTA — slate button, cream text. */
.fenix-header[data-profile="coastal"] .fenix-header__cta,
.fenix-header[data-profile="coastal"] .fenix-header__cta--primary {
    background: #4f6a7d; color: #f1efe9;
    font-family: 'Mulish', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 13px 26px; border-radius: 3px; border: 0;
    transition: background 0.25s ease;
}
.fenix-header[data-profile="coastal"] .fenix-header__cta:hover,
.fenix-header[data-profile="coastal"] .fenix-header__cta--primary:hover { background: #3c5160; }

/* Logged-out "Sign in" auth link — match the nav-link voice. */
.fenix-header[data-profile="coastal"] .fenix-header__auth-link {
    font-family: 'Mulish', sans-serif; font-size: 12px; font-weight: 500;
    letter-spacing: 1.5px; text-transform: uppercase; color: #3c5160;
}
.fenix-header[data-profile="coastal"] .fenix-header__auth-link:hover { color: #4f6a7d; }

@media (max-width: 768px) {
    .fenix-header[data-profile="coastal"] .fenix-header__row { padding: 16px 22px; }
    .fenix-header[data-profile="coastal"] .fenix-header__slot--right { gap: 10px; }
    .fenix-header[data-profile="coastal"] .fenix-header__logo-text { font-size: var(--fenix-logo-l1-size, 21px) !important; letter-spacing: var(--fenix-logo-l1-tracking, 2px) !important; }
    .fenix-header[data-profile="coastal"] .fenix-header__logo-img,
    .fenix-header[data-profile="coastal"] .fenix-header__logo-svg { height: var(--fenix-logo-mark-size, 30px); }
}

/* ─── Avatar variant — "coastal-circle" ───────────────────────────────────────
   42px slate circle, cream Cormorant Garamond initials; soft slate ring on hover.
   Dropdown: white card, identity row (serif name + muted email), icon+text list
   with cream hover; only the identity row keeps a divider.
   ──────────────────────────────────────────────────────────────────────────── */
.fenix-header__user-menu--coastal-circle .fenix-header__user-avatar {
    width: 42px; height: 42px;
    border-radius: 9999px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px; font-weight: 600; letter-spacing: 0.5px;
    color: #f1efe9; background: #4f6a7d;
    border: 0; box-shadow: none;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.fenix-header__user-menu--coastal-circle .fenix-header__user-avatar:hover {
    background: #3c5160; box-shadow: 0 0 0 3px rgba(79,106,125,.22);
}
.fenix-header__user-menu--coastal-circle .fenix-header__user-dropdown {
    width: 17rem;
    border: 1px solid #e4e1d8;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 28px 52px -26px rgba(44,59,69,.55);
}
/* Identity row */
.fenix-header__user-menu--coastal-circle .fenix-header__user-portrait-id {
    padding: 0.95rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid #e4e1d8;
}
.fenix-header__user-menu--coastal-circle .fenix-header__user-portrait-avatar {
    border-radius: 9999px;
    background: #4f6a7d; color: #f1efe9;
    font-family: 'Cormorant Garamond', serif; font-weight: 600;
    border: 0; box-shadow: none;
}
.fenix-header__user-menu--coastal-circle .fenix-header__user-portrait-name  {
    font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #2c3b45;
}
.fenix-header__user-menu--coastal-circle .fenix-header__user-portrait-email { color: #8b97a0; }
/* Menu items — clean stack, cream hover, no per-item dividers. */
.fenix-header__user-menu--coastal-circle .fenix-header__user-item {
    border-radius: 0; padding: 0.85rem 1rem; gap: 0.85rem;
    font-family: 'Mulish', sans-serif; font-size: 0.9rem; font-weight: 500;
    color: #2c3b45; border-bottom: 0; border-top: 0;
}
.fenix-header__user-menu--coastal-circle .fenix-header__user-item i {
    color: #4f6a7d; font-size: 1rem; width: 1.1rem; text-align: center;
}
.fenix-header__user-menu--coastal-circle .fenix-header__user-item:hover { background: #ecebe6; color: #2c3b45; }
.fenix-header__user-menu--coastal-circle .fenix-header__user-item--danger { color: #9a5b5b; border-top: 0; }
.fenix-header__user-menu--coastal-circle .fenix-header__user-item--danger:hover { background: #fef2f2; color: #dc2626; }
.fenix-header__user-menu--coastal-circle .fenix-header__user-item--danger:hover i { color: #dc2626; }
/* Guest state */
.fenix-header__user-menu--coastal-circle.fenix-header__user-menu--guest .fenix-header__user-avatar {
    color: #8b97a0; background: #dfe3e2;
    box-shadow: 0 0 0 2px #ecebe6, 0 0 0 3.5px #cdd3d2;
}

/* ─── Dropdown-style "coastal-dd" — plain slate icons, no tile ────────────────
   Clears the shared chip/tile so the leading icon sits bare beside the label. */
[data-dd-style="coastal-dd"] .fenix-header__user-item > i:not(.chev) {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    width: 1.1rem; height: auto; font-size: 1rem; color: #4f6a7d;
}
[data-dd-style="coastal-dd"] .fenix-header__user-item:hover > i:not(.chev) {
    background: transparent; color: #3c5160;
}
[data-dd-style="coastal-dd"] .fenix-header__user-item--danger:hover > i:not(.chev) {
    background: transparent; color: #dc2626;
}

/* ════════════════════════════════════════════════════════
   PROFILE — "warmrose"  (Growth Vision — WarmRose)
   Reuses the axion menu/avatar/dd triplet; overlays a warm cream
   chrome + clay-pink (#d6447e) accent recolour. CSS-only, no rebuild.
   Wordmark: Newsreader serif · tagline + nav: Hanken Grotesk.
   ════════════════════════════════════════════════════════ */
.fenix-header[data-profile="warmrose"] {
    background: rgba(240,238,230,0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #e2dcce;
}
.fenix-header[data-profile="warmrose"] .fenix-header__row {
    padding: 18px 48px;
    max-width: 100%;
    gap: 0;
}
/* Logo block: Newsreader wordmark + clay "Training" tag */
.fenix-header[data-profile="warmrose"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, 'Newsreader', serif) !important;
    font-size: var(--fenix-logo-l1-size, 25px) !important; font-weight: var(--fenix-logo-l1-weight, 500) !important;
    letter-spacing: var(--fenix-logo-l1-tracking, 0.2px) !important; color: var(--fenix-logo-l1-color, #1f1e1d) !important;
}
.fenix-header[data-profile="warmrose"] .fenix-header__logo-tagline {
    font-family: var(--fenix-logo-l2-family, 'Hanken Grotesk', sans-serif) !important;
    font-size: var(--fenix-logo-l2-size, 9.5px) !important; font-weight: var(--fenix-logo-l2-weight, 700) !important;
    letter-spacing: var(--fenix-logo-l2-tracking, 3.5px) !important; text-transform: var(--fenix-logo-l2-transform, uppercase) !important;
    color: var(--fenix-logo-l2-color, #d6447e) !important;
    border-left: 0; padding-left: 0; margin-left: 0; margin-top: 4px;
}
.fenix-header[data-profile="warmrose"] .fenix-header__slot--right { gap: 26px; }
@media (max-width: 768px) {
    .fenix-header[data-profile="warmrose"] .fenix-header__row { padding: 16px 22px; }
    .fenix-header[data-profile="warmrose"] .fenix-header__slot--right { gap: 10px; }
}

/* ── Nav (axion base) recoloured to clay ──────────────────────────────── */
.fenix-header[data-profile="warmrose"] .fenix-top-link::after { background: #d6447e !important; }
.fenix-header[data-profile="warmrose"] .fenix-top-link:hover,
.fenix-header[data-profile="warmrose"] .fenix-has-submenu:hover > .fenix-top-link,
.fenix-header[data-profile="warmrose"] .fenix-top-link.active,
.fenix-header[data-profile="warmrose"] .fenix-top-link--active { color: #1f1e1d !important; }
.fenix-header[data-profile="warmrose"] .fenix-submenu,
.fenix-header[data-profile="warmrose"] .fenix-subsubmenu {
    background: #faf9f5 !important; border-color: #e4dfd2 !important;
    border-radius: 14px !important;
}
.fenix-header[data-profile="warmrose"] .fenix-submenu-item:hover {
    background: #f6e9f0 !important; color: #b12c66 !important;
}

/* ── Avatar (axion-circle base) recoloured to clay ────────────────────── */
.fenix-header[data-profile="warmrose"] .fenix-header__user-menu--axion-circle .fenix-header__user-trigger-circle {
    color: #b12c66; background: #f4d3e2;
    box-shadow: 0 0 0 2px #faf9f5, 0 0 0 3.5px #eabfd2;
}
.fenix-header[data-profile="warmrose"] .fenix-header__user-menu--axion-circle .fenix-header__user-avatar:hover .fenix-header__user-trigger-circle {
    box-shadow: 0 0 0 2px #faf9f5, 0 0 0 3.5px #d6447e;
}
.fenix-header[data-profile="warmrose"] .fenix-header__user-menu--axion-circle .fenix-header__user-trigger-role { color: #d6447e; }
.fenix-header[data-profile="warmrose"] .fenix-header__user-menu--axion-circle .fenix-header__user-portrait-avatar {
    color: #b12c66; background: #f4d3e2;
}
.fenix-header[data-profile="warmrose"] .fenix-header__user-menu--axion-circle .fenix-header__user-item:hover {
    background: #f6e9f0; color: #b12c66;
}
/* dd-icon accent on hover → clay */
.fenix-header[data-profile="warmrose"] [data-dd-style="axion-dd"] .fenix-header__user-item:hover > i:not(.chev) { color: #b12c66; }


/* ════════════════════════════════════════════════════════
   PROFILE — "warmrose2"  (Growth Vision — WarmRose2)
   Reuses the axion menu/avatar/dd triplet; overlays a warm cream
   chrome + clay-pink (#d6447e) accent recolour. CSS-only, no rebuild.
   Wordmark: Newsreader serif · tagline + nav: Hanken Grotesk.
   ════════════════════════════════════════════════════════ */
.fenix-header[data-profile="warmrose2"] {
    background: rgba(240,238,230,0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #e2dcce;
}
.fenix-header[data-profile="warmrose2"] .fenix-header__row {
    padding: 18px 48px;
    max-width: 100%;
    gap: 0;
}
/* Logo mark: 46px kolam icon + 13px gap, matching the mockup header (<a> gap:13px, img 46x46). */
.fenix-header[data-profile="warmrose2"] .fenix-header__logo { gap: 13px; }
.fenix-header[data-profile="warmrose2"] .fenix-header__logo-img,
.fenix-header[data-profile="warmrose2"] .fenix-header__logo svg {
    height: var(--fenix-logo-mark-size, 46px) !important; width: var(--fenix-logo-mark-size, 46px) !important; border-radius: 0 !important;
}
/* Logo block: Newsreader wordmark + clay "Training" tag */
.fenix-header[data-profile="warmrose2"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, 'Newsreader', serif) !important;
    font-size: var(--fenix-logo-l1-size, 25px) !important; font-weight: var(--fenix-logo-l1-weight, 500) !important;
    letter-spacing: var(--fenix-logo-l1-tracking, 0.2px) !important; color: var(--fenix-logo-l1-color, #1f1e1d) !important;
}
.fenix-header[data-profile="warmrose2"] .fenix-header__logo-tagline {
    font-family: var(--fenix-logo-l2-family, 'Hanken Grotesk', sans-serif) !important;
    font-size: var(--fenix-logo-l2-size, 9.5px) !important; font-weight: var(--fenix-logo-l2-weight, 700) !important;
    letter-spacing: var(--fenix-logo-l2-tracking, 3.5px) !important; text-transform: var(--fenix-logo-l2-transform, uppercase) !important;
    color: var(--fenix-logo-l2-color, #d6447e) !important;
    border-left: 0; padding-left: 0; margin-left: 0; margin-top: 4px;
}
.fenix-header[data-profile="warmrose2"] .fenix-header__slot--right { gap: 26px; }
@media (max-width: 768px) {
    .fenix-header[data-profile="warmrose2"] .fenix-header__row { padding: 16px 22px; }
    .fenix-header[data-profile="warmrose2"] .fenix-header__slot--right { gap: 10px; }
}

/* ── Nav (axion base) recoloured to clay ──────────────────────────────── */
.fenix-header[data-profile="warmrose2"] .fenix-top-link::after { background: #d6447e !important; }
.fenix-header[data-profile="warmrose2"] .fenix-top-link:hover,
.fenix-header[data-profile="warmrose2"] .fenix-has-submenu:hover > .fenix-top-link,
.fenix-header[data-profile="warmrose2"] .fenix-top-link.active,
.fenix-header[data-profile="warmrose2"] .fenix-top-link--active { color: #1f1e1d !important; }
.fenix-header[data-profile="warmrose2"] .fenix-submenu,
.fenix-header[data-profile="warmrose2"] .fenix-subsubmenu {
    background: #faf9f5 !important; border-color: #e4dfd2 !important;
    border-radius: 14px !important;
}
.fenix-header[data-profile="warmrose2"] .fenix-submenu-item:hover {
    background: #f6e9f0 !important; color: #b12c66 !important;
}

/* ── Avatar (axion-circle base) recoloured to clay ────────────────────── */
.fenix-header[data-profile="warmrose2"] .fenix-header__user-menu--axion-circle .fenix-header__user-trigger-circle {
    color: #b12c66; background: #f4d3e2;
    box-shadow: 0 0 0 2px #faf9f5, 0 0 0 3.5px #eabfd2;
}
.fenix-header[data-profile="warmrose2"] .fenix-header__user-menu--axion-circle .fenix-header__user-avatar:hover .fenix-header__user-trigger-circle {
    box-shadow: 0 0 0 2px #faf9f5, 0 0 0 3.5px #d6447e;
}
.fenix-header[data-profile="warmrose2"] .fenix-header__user-menu--axion-circle .fenix-header__user-trigger-role { color: #d6447e; }
.fenix-header[data-profile="warmrose2"] .fenix-header__user-menu--axion-circle .fenix-header__user-portrait-avatar {
    color: #b12c66; background: #f4d3e2;
}
.fenix-header[data-profile="warmrose2"] .fenix-header__user-menu--axion-circle .fenix-header__user-item:hover {
    background: #f6e9f0; color: #b12c66;
}
/* dd-icon accent on hover → clay */
.fenix-header[data-profile="warmrose2"] [data-dd-style="axion-dd"] .fenix-header__user-item:hover > i:not(.chev) { color: #b12c66; }

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE — "blush" (Growth Vision Blush, 2026-07-03)
   Ported from "Growth Vision - Blush Serif (standalone).html": cream #faeef1
   bar, logo-left (kolam mark #94506a + "GROWTH VISION" Cormorant 26px caps),
   nav (menuStyle "blush"), "JOIN NOW" rose CTA + 42px rose avatar circle
   (avatarStyle "blush-circle", dd "blush-dd").
   ════════════════════════════════════════════════════════════════════════════ */
.fenix-header[data-profile="blush"] {
    background: #faeef1;
    border-bottom: 0;
    --fenix-header-brand-text: #94506a;
}
.fenix-header[data-profile="blush"] .fenix-header__row {
    padding: 22px 56px;
    max-width: 100%;
    gap: 24px;
}
/* Logo — kolam mark 36px + "GROWTH VISION" Cormorant 26px 3px caps in rose. */
.fenix-header[data-profile="blush"] .fenix-header__logo { gap: var(--fenix-logo-gap, 12px); }
.fenix-header[data-profile="blush"] .fenix-header__logo-img,
.fenix-header[data-profile="blush"] .fenix-header__logo-svg {
    height: var(--fenix-logo-mark-size, 36px); width: auto; color: var(--fenix-logo-mark-color, #94506a);
}
.fenix-header[data-profile="blush"] .fenix-header__logo-text {
    font-family: var(--fenix-logo-l1-family, 'Cormorant Garamond', serif) !important;
    font-size: var(--fenix-logo-l1-size, 26px) !important; font-weight: var(--fenix-logo-l1-weight, 600) !important;
    letter-spacing: var(--fenix-logo-l1-tracking, 3px) !important; text-transform: uppercase !important;
    color: var(--fenix-logo-l1-color, #94506a) !important;
}
/* Right-slot gap — CTA button + avatar. */
.fenix-header[data-profile="blush"] .fenix-header__slot--right { gap: 18px; }
.fenix-header[data-profile="blush"] .fenix-header__slot--centre { flex: 1 1 auto; justify-content: center; }
.fenix-header[data-profile="blush"] .fenix-header__slot--centre .fenix-top-menu { gap: 34px; }

/* "JOIN NOW" CTA — rose button, cream text. */
.fenix-header[data-profile="blush"] .fenix-header__cta,
.fenix-header[data-profile="blush"] .fenix-header__cta--primary {
    background: #b56b86; color: #fdf4f7;
    font-family: 'Mulish', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 13px 26px; border-radius: 3px; border: 0;
    transition: background 0.25s ease;
}
.fenix-header[data-profile="blush"] .fenix-header__cta:hover,
.fenix-header[data-profile="blush"] .fenix-header__cta--primary:hover { background: #94506a; }

/* Logged-out "Sign in" auth link — match the nav-link voice. */
.fenix-header[data-profile="blush"] .fenix-header__auth-link {
    font-family: 'Mulish', sans-serif; font-size: 12px; font-weight: 500;
    letter-spacing: 1.5px; text-transform: uppercase; color: #94506a;
}
.fenix-header[data-profile="blush"] .fenix-header__auth-link:hover { color: #b56b86; }

@media (max-width: 768px) {
    .fenix-header[data-profile="blush"] .fenix-header__row { padding: 16px 22px; }
    .fenix-header[data-profile="blush"] .fenix-header__slot--right { gap: 10px; }
    .fenix-header[data-profile="blush"] .fenix-header__logo-text { font-size: var(--fenix-logo-l1-size, 21px) !important; letter-spacing: var(--fenix-logo-l1-tracking, 2px) !important; }
    .fenix-header[data-profile="blush"] .fenix-header__logo-img,
    .fenix-header[data-profile="blush"] .fenix-header__logo-svg { height: var(--fenix-logo-mark-size, 30px); }
}

/* ─── Avatar variant — "blush-circle" ───────────────────────────────────────
   42px rose circle, cream Cormorant Garamond initials; soft rose ring on hover.
   Dropdown: white card, identity row (serif name + muted email), icon+text list
   with cream hover; only the identity row keeps a divider.
   ──────────────────────────────────────────────────────────────────────────── */
.fenix-header__user-menu--blush-circle .fenix-header__user-avatar {
    width: 42px; height: 42px;
    border-radius: 9999px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px; font-weight: 600; letter-spacing: 0.5px;
    color: #fdf4f7; background: #b56b86;
    border: 0; box-shadow: none;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.fenix-header__user-menu--blush-circle .fenix-header__user-avatar:hover {
    background: #94506a; box-shadow: 0 0 0 3px rgba(181,107,134,.28);
}
.fenix-header__user-menu--blush-circle .fenix-header__user-dropdown {
    width: 17rem;
    border: 1px solid #f0dde4;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 28px 52px -26px rgba(44,59,69,.55);
}
/* Identity row */
.fenix-header__user-menu--blush-circle .fenix-header__user-portrait-id {
    padding: 0.95rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid #f0dde4;
}
.fenix-header__user-menu--blush-circle .fenix-header__user-portrait-avatar {
    border-radius: 9999px;
    background: #b56b86; color: #fdf4f7;
    font-family: 'Cormorant Garamond', serif; font-weight: 600;
    border: 0; box-shadow: none;
}
.fenix-header__user-menu--blush-circle .fenix-header__user-portrait-name  {
    font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #3f2530;
}
.fenix-header__user-menu--blush-circle .fenix-header__user-portrait-email { color: #ab8f99; }
/* Menu items — clean stack, cream hover, no per-item dividers. */
.fenix-header__user-menu--blush-circle .fenix-header__user-item {
    border-radius: 0; padding: 0.85rem 1rem; gap: 0.85rem;
    font-family: 'Mulish', sans-serif; font-size: 0.9rem; font-weight: 500;
    color: #3f2530; border-bottom: 0; border-top: 0;
}
.fenix-header__user-menu--blush-circle .fenix-header__user-item i {
    color: #b56b86; font-size: 1rem; width: 1.1rem; text-align: center;
}
.fenix-header__user-menu--blush-circle .fenix-header__user-item:hover { background: #faeef1; color: #3f2530; }
.fenix-header__user-menu--blush-circle .fenix-header__user-item--danger { color: #9a5b5b; border-top: 0; }
.fenix-header__user-menu--blush-circle .fenix-header__user-item--danger:hover { background: #fef2f2; color: #dc2626; }
.fenix-header__user-menu--blush-circle .fenix-header__user-item--danger:hover i { color: #dc2626; }
/* Guest state */
.fenix-header__user-menu--blush-circle.fenix-header__user-menu--guest .fenix-header__user-avatar {
    color: #ab8f99; background: #e6d3db;
    box-shadow: 0 0 0 2px #faeef1, 0 0 0 3.5px #dcc2cc;
}

/* ─── Dropdown-style "blush-dd" — plain rose icons, no tile ────────────────
   Clears the shared chip/tile so the leading icon sits bare beside the label. */
[data-dd-style="blush-dd"] .fenix-header__user-item > i:not(.chev) {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    width: 1.1rem; height: auto; font-size: 1rem; color: #b56b86;
}
[data-dd-style="blush-dd"] .fenix-header__user-item:hover > i:not(.chev) {
    background: transparent; color: #94506a;
}
[data-dd-style="blush-dd"] .fenix-header__user-item--danger:hover > i:not(.chev) {
    background: transparent; color: #dc2626;
}


/* ══════════════════════════════════════════════════════════
   HEADER DESIGN — "serif-editorial" (theme-tokenised, colour-blind)
   2026-07-18: a NAMED header design keyed on data-header-design="serif-editorial".
   Colour-blind BY CONSTRUCTION — every colour comes from the page theme
   (--fenix-color-* / --fenix-header-* / --fenix-font-*); shape/typography fixed
   here. The header view stamps data-header-design from the resolved design (see
   FenixHeader/Default.cshtml). Design and colour are now separate: this block owns
   shape, the theme owns colour. First page live: home 598 (Coastal Blue theme).
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   GROWTH VISION — BLUSH SERIF HEADER
   ══════════════════════════════════════════════════════════ */
.fenix-header[data-header-design="serif-editorial"]{ background:var(--fenix-header-bg, var(--fenix-color-surface-sunken, #ecebe6)) !important; border-bottom:0 !important; box-shadow:none !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__row{ padding:20px 36px; max-width:none; }

.fenix-header[data-header-design="serif-editorial"] .fenix-header__logo{ gap:var(--fenix-logo-gap, 13px); }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__logo-img{ height:var(--fenix-logo-mark-size, 46px); width:var(--fenix-logo-mark-size, 46px); }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__logo-block{ display:flex; flex-direction:column; line-height:1; }
/* The base .fenix-header__logo pins --fenix-header-brand-text to the GVT logo's native navy
   (#060937), shadowing the theme/header token for the wordmark. For this design let the logo
   inherit the header's brand-text so the wordmark follows the theme (and flips light on a
   dark-header theme / header-colour override). */
.fenix-header[data-header-design="serif-editorial"] .fenix-header__logo{ --fenix-header-brand-text: inherit; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__logo-text{ font-family:var(--fenix-logo-l1-family, var(--fenix-font-heading, 'Cormorant Garamond', serif)); font-weight:var(--fenix-logo-l1-weight, 500); font-size:var(--fenix-logo-l1-size, 25px); letter-spacing:var(--fenix-logo-l1-tracking, .2px); color:var(--fenix-logo-l1-color, var(--fenix-header-brand-text, var(--fenix-color-text, #2c3b45))); }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__logo-tagline{ font-family:var(--fenix-logo-l2-family, var(--fenix-font-body, 'Mulish', sans-serif)); font-size:var(--fenix-logo-l2-size, 9.5px); font-weight:var(--fenix-logo-l2-weight, 700); letter-spacing:var(--fenix-logo-l2-tracking, 3.5px); color:var(--fenix-logo-l2-color, var(--fenix-color-primary, #4f6a7d)); text-transform:var(--fenix-logo-l2-transform, uppercase); margin-top:4px; }

.fenix-header[data-header-design="serif-editorial"] .fenix-top-menu{ gap:20px; flex-wrap:nowrap !important; }
/* Logo + button cluster never shrink; only the centre nav flexes. Prevents the nav ever
   colliding with the logo at tight widths (below 1200 it's the hamburger anyway). */
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--left,
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right{ flex-shrink:0 !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-top-link{ position:relative; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:12px !important; font-weight:500 !important; letter-spacing:1.5px !important; text-transform:uppercase !important; color:var(--fenix-header-menu-link, var(--fenix-color-text-secondary, #3c5160)) !important; background:transparent !important; border:0 !important; border-radius:0 !important; padding:4px 0 !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-top-link::after{ content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--fenix-color-primary, #4f6a7d); transition:width .32s cubic-bezier(.4,0,.2,1); }
.fenix-header[data-header-design="serif-editorial"] .fenix-top-link:hover::after,
.fenix-header[data-header-design="serif-editorial"] .fenix-has-submenu:hover > .fenix-top-link::after{ width:100%; }
.fenix-header[data-header-design="serif-editorial"] .fenix-top-link:hover,
.fenix-header[data-header-design="serif-editorial"] .fenix-has-submenu:hover > .fenix-top-link{ color:var(--fenix-header-menu-link-hover, var(--fenix-header-menu-link, var(--fenix-color-text-secondary, #3c5160))) !important; background:transparent !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-has-submenu > .fenix-top-link .fenix-caret,
.fenix-header[data-header-design="serif-editorial"] .fenix-has-submenu > .fenix-top-link i{ color:var(--fenix-header-menu-link, var(--fenix-color-text-secondary, #3c5160)) !important; transition:transform .3s ease; }
.fenix-header[data-header-design="serif-editorial"] .fenix-has-submenu:hover > .fenix-top-link .fenix-caret,
.fenix-header[data-header-design="serif-editorial"] .fenix-has-submenu:hover > .fenix-top-link i{ transform:rotate(180deg); }

/* The 2nd-level flyout card carries the SAME chrome as the 1st-level dropdown (radius, ground,
   hairline, shadow) — otherwise it falls back to the base .fenix-subsubmenu rule in fenix-menu.css
   (16px radius, hard-coded white) and reads as a different card. Same pairing every
   [data-menu-style] flyout block already uses. */
.fenix-header[data-header-design="serif-editorial"] .fenix-submenu,
.fenix-header[data-header-design="serif-editorial"] .fenix-subsubmenu{ background:var(--fenix-color-surface, #ffffff) !important; border:1px solid var(--fenix-color-border, #e4e1d8) !important; box-shadow:0 28px 52px -28px rgba(44,59,69,.5) !important; border-radius:4px !important; padding:10px !important; min-width:256px !important; }
/* Base .fenix-subsubmenu pulls up -8px to match the base 8px card padding; this design pads 10px,
   so match it or the first grandchild row sits 2px below its parent row. */
.fenix-header[data-header-design="serif-editorial"] .fenix-subsubmenu{ top:-10px !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-submenu-item,
.fenix-header[data-header-design="serif-editorial"] .fenix-submenu > li > a{ display:block !important; padding:11px 14px !important; border-radius:3px !important; background:transparent !important; transition:background .2s ease !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-submenu-item:hover,
.fenix-header[data-header-design="serif-editorial"] .fenix-submenu > li > a:hover{ background:var(--fenix-color-surface-sunken, #ecebe6) !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-submenu-label{ display:block !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:11px !important; font-weight:400 !important; color:var(--fenix-header-menu-link, var(--fenix-color-text-secondary, #3c5160)) !important; line-height:1.3 !important; letter-spacing:1.5px !important; text-transform:uppercase !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-submenu-desc,
.fenix-header[data-header-design="serif-editorial"] .fenix-submenu-subtitle{ display:block !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:11.5px !important; font-weight:300 !important; color:var(--fenix-color-text-muted, #8b97a0) !important; margin-top:2px !important; text-transform:none !important; letter-spacing:0 !important; }

.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-avatar{ width:42px !important; height:42px !important; border-radius:9999px !important; background:var(--fenix-color-primary, #4f6a7d) !important; color:var(--fenix-header-cta-text, #f1efe9) !important; border:0 !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:17px !important; font-weight:600 !important; letter-spacing:.5px !important; box-shadow:none !important; transition:background .25s ease, box-shadow .25s ease !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-avatar:hover{ background:var(--fenix-color-primary-dark, var(--fenix-color-text-secondary, #3c5160)) !important; box-shadow:0 0 0 3px rgba(79,106,125,.28) !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-menu--guest .fenix-header__user-avatar{ background:var(--fenix-color-primary-light, #cdd7dd) !important; color:var(--fenix-color-text-secondary, #3c5160) !important; }

.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-dropdown{ width:264px !important; background:var(--fenix-color-surface, #ffffff) !important; border:1px solid var(--fenix-color-border, #e4e1d8) !important; border-radius:4px !important; overflow:hidden !important; box-shadow:0 28px 52px -26px rgba(44,59,69,.55) !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-portrait-id{ padding:18px !important; background:var(--fenix-color-surface, #ffffff) !important; border-bottom:1px solid var(--fenix-color-border, #e4e1d8) !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-portrait-avatar{ border-radius:9999px !important; background:var(--fenix-color-primary, #4f6a7d) !important; color:var(--fenix-header-cta-text, #f1efe9) !important; border:0 !important; box-shadow:none !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-weight:600 !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-portrait-name{ font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:19px !important; font-weight:600 !important; color:var(--fenix-color-text, #2c3b45) !important; line-height:1.15 !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-portrait-email{ font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:11.5px !important; font-weight:300 !important; color:var(--fenix-color-text-muted, #8b97a0) !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-item{ padding:12px !important; border-radius:3px !important; gap:12px !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:12.5px !important; font-weight:500 !important; letter-spacing:.3px !important; color:var(--fenix-color-text, #2c3b45) !important; border-bottom:0 !important; border-top:0 !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-item:hover{ background:var(--fenix-color-surface-sunken, #ecebe6) !important; color:var(--fenix-color-text, #2c3b45) !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-item i{ color:var(--fenix-color-primary, #4f6a7d) !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-item--danger{ color:#9a5b5b !important; border-top:0 !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-item--danger:hover{ background:var(--fenix-color-surface-sunken, #ecebe6) !important; color:#9a5b5b !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-item--danger i{ color:#9a5b5b !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__user-item > i{ width:auto !important; height:auto !important; border-radius:0 !important; background:transparent !important; border:0 !important; }

.fenix-header[data-header-design="serif-editorial"] .fenix-header__menu-toggle-bar{ background:var(--fenix-header-brand-text, var(--fenix-color-text, #3c5160)) !important; }
@media(max-width:640px){ .fenix-header[data-header-design="serif-editorial"] .fenix-header__row{ padding:16px 22px; } }



/* ══════════════════════════════════════════════════════════
   GROWTH VISION — BLUSH2 · MOBILE DRAWER (matches Claude "Blush Serif" mockup)
   ══════════════════════════════════════════════════════════ */
/* ── Desktop auth actions (logged out): Join Now = outline pill, Sign In = solid pill, both with
   icons. Colour-blind — follows the theme / per-page Header colour. Ported from the
   roots-of-resilience header design and tokenised. Hidden on mobile (the hamburger drawer foot
   carries them). ── */
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right{ display:flex !important; align-items:center !important; gap:10px !important; }
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__cta,
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__auth-link{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  height:42px !important; padding:0 18px !important; border-radius:9999px !important;
  font-family:var(--fenix-font-body,'Mulish',sans-serif) !important; font-size:11.5px !important; font-weight:700 !important;
  letter-spacing:1.2px !important; text-transform:uppercase !important; line-height:1 !important; white-space:nowrap !important;
  cursor:pointer !important; text-decoration:none !important;
  transition:background .22s ease, color .22s ease, border-color .22s ease !important;
}
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__cta::before,
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__auth-link::before{
  content:"" !important; width:17px !important; height:17px !important; flex:0 0 auto !important; background:currentColor !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important; mask-position:center !important;
  -webkit-mask-size:contain !important; mask-size:contain !important;
}
/* Join Now — outline pill */
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__cta{
  order:1 !important; background:transparent !important; color:var(--fenix-color-primary, #4f6a7d) !important;
  border:1.5px solid var(--fenix-color-primary-light, var(--fenix-color-primary, #4f6a7d)) !important;
}
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__cta:hover{
  background:color-mix(in srgb, var(--fenix-color-primary, #4f6a7d) 8%, transparent) !important;
  border-color:var(--fenix-color-primary, #4f6a7d) !important; color:var(--fenix-color-primary-dark, #3c5160) !important;
}
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__cta::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E") !important;
}
/* Sign In — solid pill */
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__auth-link{
  order:2 !important; background:var(--fenix-color-primary, #4f6a7d) !important;
  color:var(--fenix-header-cta-text, var(--fenix-color-surface, #ffffff)) !important;
  border:1.5px solid var(--fenix-color-primary, #4f6a7d) !important;
}
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__auth-link:hover{
  background:var(--fenix-color-primary-dark, #3c5160) !important; border-color:var(--fenix-color-primary-dark, #3c5160) !important;
}
.fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__auth-link::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' x2='3' y1='12' y2='12'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' x2='3' y1='12' y2='12'/%3E%3C/svg%3E") !important;
}
/* Below 1200px the 8-item nav + two pills can't fit inline (they collide with the logo on
   tablets/iPads) — collapse to the hamburger: hide the centre nav + the desktop pills, reveal
   the toggle. The drawer foot carries the nav + Sign In + Join Now. (The base does this at 768px;
   this nav-heavy design needs the room sooner — it fits inline only on wide screens ≥1200px.) */
@media (max-width:1199px){
  .fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--centre{ display:none !important; }
  .fenix-header[data-header-design="serif-editorial"] .fenix-header__menu-toggle{ display:inline-flex !important; }
  .fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__cta,
  .fenix-header[data-header-design="serif-editorial"] .fenix-header__slot--right .fenix-header__auth-link{ display:none !important; }
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__scrim{ background:rgba(28,40,48,.5) !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__panel{ width:min(82vw,340px) !important; background:var(--fenix-color-primary-dark, #3c5160) !important; color:var(--fenix-color-surface, #f1efe9) !important; box-shadow:none !important; padding:84px 30px 40px !important; overflow-y:auto !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__head{ position:absolute !important; top:0; right:0; left:0; padding:0 !important; border-bottom:0 !important; height:0 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__body{ padding:0 !important; overflow:visible !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__close{ position:absolute !important; top:20px; right:20px; width:44px !important; height:44px !important; display:flex !important; align-items:center; justify-content:center; background:rgba(241,239,233,.12) !important; border:1px solid rgba(241,239,233,.3) !important; border-radius:50% !important; color:var(--fenix-color-surface, #f1efe9) !important; font-size:20px !important; line-height:1 !important; transition:background .25s ease !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__close:hover{ background:rgba(241,239,233,.24) !important; color:var(--fenix-color-surface, #f1efe9) !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-top-nav{ display:block !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-hamburger-label,
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-hamburger-checkbox{ display:none !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-top-menu{ display:flex !important; flex-direction:column !important; gap:0 !important; position:static !important; inset:auto !important; min-width:0 !important; width:100% !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; overflow:visible !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-top-menu > li{ width:100% !important; padding:0 !important; border:0 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-top-link{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; padding:16px 0 !important; margin:0 !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:16px !important; font-weight:500 !important; letter-spacing:1.5px !important; text-transform:uppercase !important; color:var(--fenix-color-surface, #f1efe9) !important; background:transparent !important; border:0 !important; border-bottom:1px solid rgba(255,255,255,.14) !important; border-radius:0 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-top-link:hover{ color:var(--fenix-color-surface, #f1efe9) !important; background:transparent !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-top-link::after{ display:none !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-top-link .fenix-caret{ width:13px !important; height:13px !important; color:var(--fenix-color-surface, #f1efe9) !important; transition:transform .3s ease !important; flex:0 0 auto !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-has-submenu.mob-open > .fenix-top-link .fenix-caret{ transform:rotate(180deg) !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-submenu,
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-subsubmenu{ display:none !important; position:static !important; inset:auto !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; min-width:0 !important; padding:6px 0 10px 14px !important; margin:0 !important; border-bottom:1px solid rgba(255,255,255,.14) !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-has-submenu.mob-open > .fenix-submenu,
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-submenu.mob-open,
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-has-subsubmenu.mob-open > .fenix-subsubmenu,
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-subsubmenu.mob-open{ display:flex !important; flex-direction:column !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-submenu > li{ padding:0 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-submenu-item,
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-submenu > li > a{ display:block !important; padding:10px 0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-submenu-item:hover,
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-submenu > li > a:hover{ background:transparent !important; }
/* Drawer sub-item text is tinted from the SURFACE token, not --fenix-color-primary-light: a brand
   whose "primary-light" is a mid tone (Indigo: #2d6b54) put dark-green text on the dark-green
   panel. Surface at 92% / 62% reads on any dark panel colour. */
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-submenu-label{ display:block !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:13px !important; font-weight:400 !important; letter-spacing:.8px !important; text-transform:none !important; color:color-mix(in srgb, var(--fenix-color-surface, #f1efe9) 92%, transparent) !important; line-height:1.3 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-submenu-subtitle,
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-submenu-desc{ display:block !important; font-size:11px !important; font-weight:300 !important; color:color-mix(in srgb, var(--fenix-color-surface, #f1efe9) 62%, transparent) !important; margin-top:2px !important; letter-spacing:.3px !important; text-transform:none !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot{ display:flex !important; flex-direction:column !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot .fenix-header__cta{ display:block !important; order:0; margin:28px 0 0 !important; text-align:center !important; background:var(--fenix-color-primary, #4f6a7d) !important; color:var(--fenix-color-surface, #f1efe9) !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:12px !important; font-weight:600 !important; letter-spacing:1.5px !important; text-transform:uppercase !important; padding:16px !important; border:0 !important; border-radius:3px !important; text-decoration:none !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot .fenix-header__cta:hover{ background:var(--fenix-color-primary, #4f6a7d) !important; color:var(--fenix-color-surface, #f1efe9) !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot .fenix-header__auth-link{ order:1; margin-top:20px !important; padding-top:20px !important; border-top:1px solid rgba(255,255,255,.14) !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:12px !important; font-weight:600 !important; letter-spacing:1px !important; text-transform:uppercase !important; color:var(--fenix-color-primary-light, #cdd9e0) !important; text-decoration:none !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-menu{ order:1; display:block !important; position:static !important; margin-top:28px !important; padding-top:22px !important; border-top:1px solid rgba(255,255,255,.14) !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-menu > .fenix-header__user-avatar{ display:none !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-dropdown{ display:block !important; position:static !important; inset:auto !important; width:100% !important; min-width:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible !important; transform:none !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; margin:0 !important; padding:0 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-band{ display:flex !important; align-items:center !important; gap:12px !important; background:transparent !important; padding:0 !important; margin:0 !important; border:0 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-band-avatar{ width:40px !important; height:40px !important; flex:0 0 40px !important; border-radius:50% !important; background:var(--fenix-color-surface, #f1efe9) !important; color:var(--fenix-color-primary-dark, #3c5160) !important; display:flex !important; align-items:center !important; justify-content:center !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:18px !important; font-weight:600 !important; border:0 !important; box-shadow:none !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-band-id{ min-width:0 !important; display:flex !important; flex-direction:column !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-band-name{ font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:18px !important; font-weight:600 !important; color:var(--fenix-color-surface, #f1efe9) !important; line-height:1.15 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-band-email{ font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:11.5px !important; font-weight:300 !important; color:var(--fenix-color-primary-light, #cdd7dd) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-badge{ display:none !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-body{ display:flex !important; flex-wrap:wrap !important; gap:18px !important; background:transparent !important; padding:0 !important; margin:16px 0 0 !important; border:0 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-div{ display:none !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-item{ display:inline-flex !important; align-items:center !important; gap:6px !important; padding:0 !important; margin:0 !important; border:0 !important; background:transparent !important; font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important; font-size:12px !important; font-weight:600 !important; letter-spacing:1px !important; text-transform:uppercase !important; color:var(--fenix-color-primary-light, #cdd9e0) !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-item:hover{ color:var(--fenix-color-surface, #f1efe9) !important; background:transparent !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-item i{ display:none !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-item--danger{ color:#e7c4c4 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-item--danger:hover{ color:#f4dede !important; background:transparent !important; }


/* ---- Foot direction: the icon links belong on ONE row ----
   The block above pins the foot to `flex-direction:column !important`, which is right for the
   CTA / Sign In / account stack but turns the WhatsApp and cart buttons into two lonely centred
   rows. Wrap instead: the icon buttons keep their natural width and pair up on the first line,
   everything else still claims a full line, and the existing order:0/order:1 stacking survives. */
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot{
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  margin-top:26px !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot > *:not(.fenix-header__icon-btn){
  flex:1 1 100% !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot .fenix-header__icon-btn{
  flex:0 0 auto !important;
  width:44px !important; height:44px !important; padding:0 !important;
  border:1px solid rgba(241,239,233,.42) !important; border-radius:50% !important;
  color:var(--fenix-color-surface, #f1efe9) !important; background:transparent !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot .fenix-header__icon-btn:hover{
  background:rgba(241,239,233,.12) !important; color:var(--fenix-color-surface, #f1efe9) !important;
}
/* The account block already carries its own top rule — no extra margin above it. */
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-menu{ margin-top:16px !important; }

/* ---- Signed-in foot, "refined" avatar style ----------------------------------
   The block above dresses the "card" identity markup (user-band-*/user-body).
   This header profile runs data-avatar-style="refined", whose dropdown is a
   different shape entirely — user-id / user-sep / user-group / user-item with a
   .lead icon and a .chev chevron — and none of it was covered. On the dark green
   panel that left the desktop popup's slate greys on a dark ground: the ACCOUNT
   label, the four links and Logout all rendered dim and unaligned.
   Same visual result as the card variant, keyed to the refined markup. */
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-id{
  display:flex !important; align-items:center !important; gap:12px !important;
  background:transparent !important; padding:0 !important; margin:0 !important; border:0 !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-id-avatar{
  width:40px !important; height:40px !important; flex:0 0 40px !important; border-radius:50% !important;
  background:var(--fenix-color-surface, #f1efe9) !important; color:var(--fenix-color-primary-dark, #3c5160) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important;
  font-size:18px !important; font-weight:600 !important; border:0 !important; box-shadow:none !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-id-txt{
  min-width:0 !important; display:flex !important; flex-direction:column !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-id-name{
  font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important;
  font-size:18px !important; font-weight:600 !important;
  color:var(--fenix-color-surface, #f1efe9) !important; line-height:1.15 !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-id-email{
  font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important;
  font-size:11.5px !important; font-weight:300 !important;
  color:var(--fenix-color-primary-light, #cdd7dd) !important; opacity:1 !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
/* The refined markup carries its own hairlines; the panel supplies the rhythm. */
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-sep{
  display:block !important; height:1px !important; width:100% !important;
  background:rgba(255,255,255,.14) !important; border:0 !important; margin:16px 0 !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-group{
  display:block !important; padding:0 !important; margin:0 0 4px !important;
  font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important;
  font-size:10px !important; font-weight:700 !important; letter-spacing:1.6px !important;
  text-transform:uppercase !important; color:var(--fenix-color-primary-light, #9fb2bc) !important;
}
/* Full-width rows, not the wrapped inline chips the card variant uses. */
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-dropdown > .fenix-header__user-item{
  display:flex !important; align-items:center !important; gap:10px !important;
  width:100% !important; padding:11px 0 !important; margin:0 !important;
  border:0 !important; background:transparent !important;
  font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important;
  font-size:13px !important; font-weight:500 !important; letter-spacing:.6px !important;
  text-transform:none !important; color:var(--fenix-color-surface, #f1efe9) !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-dropdown > .fenix-header__user-item:hover{
  color:var(--fenix-color-surface, #f1efe9) !important; background:transparent !important;
}
/* Both icons go: this design already hides the card variant's icons in the drawer, and the
   chevron promises a submenu that does not exist here. Leaving the lead icon in place only
   reserved a blank 16px gutter that pushed every account row out of the panel's left margin. */
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-item .lead,
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-item .chev{
  display:none !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-dropdown > .fenix-header__user-item--danger{
  color:#e7c4c4 !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-dropdown > .fenix-header__user-item--danger:hover{
  color:#f4dede !important;
}

/* ---- Guest foot: Sign In as an OUTLINE button paired under the solid Join Now ---- */
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot .fenix-header__auth-link{
  order:1 !important;
  display:block !important;
  margin:12px 0 0 !important;
  padding:15px 16px !important;
  text-align:center !important;
  background:transparent !important;
  color:var(--fenix-color-surface, #f1efe9) !important;
  border:1px solid rgba(241,239,233,.55) !important;
  border-radius:3px !important;
  border-top:1px solid rgba(241,239,233,.55) !important;
  font-family:var(--fenix-font-body, 'Mulish', sans-serif) !important;
  font-size:12px !important; font-weight:600 !important;
  letter-spacing:1.5px !important; text-transform:uppercase !important;
  text-decoration:none !important;
  transition:background .25s ease, border-color .25s ease !important;
}
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot .fenix-header__auth-link:hover{
  background:rgba(241,239,233,.12) !important;
  border-color:var(--fenix-color-surface, #f1efe9) !important; color:var(--fenix-color-surface, #f1efe9) !important;
}


/* ---- Fix "2 lines" between the nav and the account block ----
   The last nav row (or an open accordion submenu) already ends with a bottom hairline; the
   user-block added ANOTHER top hairline right under it → two stacked lines. Keep the nav's line,
   drop the user-menu's redundant top border. (The Sign In OUTLINE button keeps all four of its
   own borders — it sits below the Join Now button, not directly under a nav hairline.) */
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header__user-menu{ border-top:0 !important; margin-top:22px !important; padding-top:0 !important; }
.fenix-header-drawer[data-header-design="serif-editorial"] .fenix-header-drawer__foot .fenix-header__auth-link{ border-top:1px solid rgba(241,239,233,.55) !important; }





/* ══════════════════════════════════════════════════════════
   HEADER DESIGN — "landing-minimal" (theme-tokenised, colour-blind)
   A simple landing header: logo + brand text on the left, one Register pill flush right.
   No nav. Colour follows the page theme / per-page Header colour. Keyed on
   data-header-design="landing-minimal" (profile slug "landing-minimal"). No drawer (no nav),
   so the Register button stays visible on mobile too.
   ══════════════════════════════════════════════════════════ */
.fenix-header[data-header-design="landing-minimal"]{ background:var(--fenix-header-bg, var(--fenix-color-surface, #ffffff)) !important; border-bottom:0 !important; box-shadow:none !important; }
.fenix-header[data-header-design="landing-minimal"] .fenix-header__row{ padding:18px 36px !important; max-width:none !important; }
/* Let the wordmark follow the theme's header brand-text (un-shadow the logo's baked navy). */
.fenix-header[data-header-design="landing-minimal"] .fenix-header__logo{ --fenix-header-brand-text: inherit; }
.fenix-header[data-header-design="landing-minimal"] .fenix-header__logo-text{ font-family:var(--fenix-logo-l1-family, var(--fenix-font-heading, 'Cormorant Garamond', serif)) !important; font-weight:var(--fenix-logo-l1-weight, 500) !important; font-size:var(--fenix-logo-l1-size, 22px) !important; letter-spacing:var(--fenix-logo-l1-tracking, .2px) !important; color:var(--fenix-logo-l1-color, var(--fenix-header-brand-text, var(--fenix-color-text, #2c3b45))) !important; }
/* Register — solid pill, flush right (the right slot is already right-aligned). */
.fenix-header[data-header-design="landing-minimal"] .fenix-header__slot--right .fenix-header__cta{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  height:44px !important; padding:0 28px !important; border-radius:9999px !important;
  font-family:var(--fenix-font-body,'Mulish',sans-serif) !important; font-size:12px !important; font-weight:700 !important;
  letter-spacing:1.2px !important; text-transform:uppercase !important; line-height:1 !important; white-space:nowrap !important;
  background:var(--fenix-color-primary, #4f6a7d) !important; color:var(--fenix-header-cta-text, var(--fenix-color-surface, #ffffff)) !important;
  border:1.5px solid var(--fenix-color-primary, #4f6a7d) !important; text-decoration:none !important; cursor:pointer !important;
  transition:background .22s ease, border-color .22s ease !important;
}
.fenix-header[data-header-design="landing-minimal"] .fenix-header__slot--right .fenix-header__cta:hover{ background:var(--fenix-color-primary-dark, #3c5160) !important; border-color:var(--fenix-color-primary-dark, #3c5160) !important; }
/* The base hides .fenix-header__cta below 768px — keep it visible here (it's the only action). */
@media (max-width:768px){
  .fenix-header[data-header-design="landing-minimal"] .fenix-header__slot--right .fenix-header__cta{ display:inline-flex !important; height:40px !important; padding:0 20px !important; }
  .fenix-header[data-header-design="landing-minimal"] .fenix-header__row{ padding:14px 18px !important; }
}

/* Cart count badge — painted by fenix-nop-commerce.js when the cart is non-empty.
   Brand colour comes from the accent token, so it follows the active theme. */
.fenix-header__cart-icon { position: relative; }
.fenix-header__cart-count {
    position: absolute; top: 1px; right: -1px;
    min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: 9999px;
    background: var(--fenix-color-accent, var(--fenix-color-primary, #db2777));
    color: #fff; font-size: 10px; font-weight: 700; line-height: 17px;
    text-align: center; pointer-events: none;
}

/* The header's promo slot paints its OWN padding and background (see
   .fenix-header__promo above), which was written for a bare text strip. A campaign bar
   paints itself edge to edge, so nesting one inside left a 6px band of wrapper green
   above and below it — a visible gap, and 12px of hero height stolen for nothing.
   Stand the wrapper down whenever it is holding a campaign bar. */
.fenix-header__promo:has(> .fenix-campaign-bar) {
    padding: 0;
    background: none;
}

/* Belt to the script's braces: a promo wrapper holding nothing but the campaign
   script must not paint a bare green stripe across the top. `:empty` is not enough —
   the script tag lives in this slot, so the wrapper is never actually empty. */
.fenix-header__promo:empty,
.fenix-header__promo:not(:has(> :not(script):not(style):not(link))) {
    display: none;
}

/* ─── Campaign top bar ──────────────────────────────────────────────────────
   Rendered into the header's promo slot by FenixCampaignBarRenderer when a
   campaign is live; a live campaign WINS over the profile's static promo bar.

   Colours arrive as two custom properties set inline per campaign, both of
   which fall back to the active theme — so a campaign saved with no colours
   picked is on-brand rather than a hardcoded hex. */
.fenix-campaign-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* 12px, not 8: the header's promo wrapper used to add 6px of its own top and bottom
       (see the :has() reset above). Standing that wrapper down fixed the double background
       but left the strip looking cramped, so the breathing room moves onto the bar itself
       where it belongs — one background, one set of padding. */
    padding: 12px 44px;
    background: var(--fenix-campaign-bg, var(--fenix-color-primary, #db2777));
    color: var(--fenix-campaign-text, #fff);
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
}

.fenix-campaign-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* One message visible at a time. Stacking every message is what made the
   retired announcement bar eat the top of the page. */
.fenix-campaign-bar__msg { display: none; }
.fenix-campaign-bar__msg.is-current { display: inline; }

a.fenix-campaign-bar__msg {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

a.fenix-campaign-bar__msg:hover { opacity: 0.85; }

.fenix-campaign-bar__code {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px dashed currentColor;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.fenix-campaign-bar__countdown {
    font-variant-numeric: tabular-nums;   /* stops the strip twitching every second */
    font-weight: 600;
    white-space: nowrap;
}

.fenix-campaign-bar__close {
    position: absolute;                   /* out of flow so it never shifts the centred text */
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.65;
    cursor: pointer;
}

.fenix-campaign-bar__close:hover { opacity: 1; }

@media (max-width: 640px) {
    .fenix-campaign-bar {
        padding: 10px 36px;
        font-size: 0.8125rem;
        gap: 8px;
    }
    .fenix-campaign-bar__inner { gap: 8px; }
}

/* Preview marker — only staff ever receive markup carrying data-preview, so this never
   reaches a customer. Without it a staff member checking a campaign on the real site
   would reasonably conclude the promotion had already gone live. */
.fenix-campaign-bar[data-preview] {
    /* A hatched edge reads as "not finished" at a glance without restyling the bar itself,
       so what you are previewing still looks like what will ship. */
    box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.28);
}

.fenix-campaign-bar__preview {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
    color: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ─── Campaign welcome card (first visit) ──────────────────────────────────
   Rendered after the header by FenixCampaignWelcomeRenderer, `hidden` until
   the script's trigger fires. Desktop: a centred two-column card over a dim.
   Phone: a bottom sheet under half the screen — never a full-screen overlay
   on mobile. Three custom properties per campaign fall back to the theme. */
.fenix-welcome {
    --fx-welcome-bg: var(--fenix-color-surface, #ffffff);
    --fx-welcome-text: var(--fenix-color-text, #1e293b);
    --fx-welcome-accent: var(--fenix-color-primary, #298a8a);
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: block;
    font-family: var(--fenix-font-body, inherit);
}
.fenix-welcome[hidden] { display: none; }
/* Closed but the teaser stays: the overlay must not eat clicks. */
.fenix-welcome.is-closed { pointer-events: none; }
.fenix-welcome.is-closed .fenix-welcome__dim,
.fenix-welcome.is-closed .fenix-welcome__card { display: none; }
.fenix-welcome.is-closed .fenix-welcome__teaser { pointer-events: auto; }

.fenix-welcome__dim {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 16, 0.5);
    animation: fx-welcome-fade 0.3s ease-out both;
}

.fenix-welcome__card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: auto;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    border-radius: 14px;
    background: var(--fx-welcome-bg);
    color: var(--fx-welcome-text);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    animation: fx-welcome-rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.fenix-welcome__art {
    background: var(--fx-welcome-accent);
    min-height: 100%;
    overflow: hidden;
}
.fenix-welcome__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fenix-welcome__body {
    position: relative;
    display: grid;
    gap: 12px;
    align-content: center;
    padding: 28px 28px 24px;
}

.fenix-welcome__close {
    position: absolute;
    right: 8px;
    top: 6px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 24px;
    line-height: 1;
    padding: 6px 8px;
    cursor: pointer;
    opacity: 0.6;
}
.fenix-welcome__close:hover { opacity: 1; }

.fenix-welcome__step { display: none; gap: 12px; }
.fenix-welcome__step.is-on { display: grid; }

.fenix-welcome__h {
    margin: 0;
    font-family: var(--fenix-font-heading, inherit);
    font-size: 26px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.fenix-welcome__greeting { margin: 0; font-size: 14px; opacity: 0.85; }
.fenix-welcome__p { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.85; }
.fenix-welcome__p--small { font-size: 12.5px; }

.fenix-welcome__cta {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    border: 0;
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--fx-welcome-accent);
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s;
}
.fenix-welcome__cta:hover { filter: brightness(0.92); }
.fenix-welcome__cta:disabled { opacity: 0.6; cursor: wait; }
.fenix-welcome__cta:focus-visible,
.fenix-welcome__close:focus-visible,
.fenix-welcome__no:focus-visible,
.fenix-welcome__teaser:focus-visible {
    outline: 2px solid var(--fx-welcome-accent);
    outline-offset: 2px;
}

.fenix-welcome__no {
    font: inherit;
    font-size: 13px;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.7;
    text-decoration: underline;
    cursor: pointer;
    justify-self: start;
    padding: 0;
}
.fenix-welcome__no:hover { opacity: 1; }

.fenix-welcome__form { display: grid; gap: 10px; }
.fenix-welcome__field { display: flex; gap: 8px; }
.fenix-welcome__field input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 16px; /* 16px stops iOS zooming the field */
    padding: 10px 12px;
    border: 1px solid var(--fenix-color-border, #cbd5e1);
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
}
/* Honeypot: off-screen, not display:none, so a naive bot still "sees" it. */
.fenix-welcome__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fenix-welcome__check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; opacity: 0.9; }
.fenix-welcome__check input { margin-top: 3px; flex: none; }
.fenix-welcome__err { margin: 0; font-size: 13px; color: #b23a2f; }

.fenix-welcome__code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px dashed var(--fx-welcome-accent);
    border-radius: 10px;
}
.fenix-welcome__code b {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 20px;
    letter-spacing: 0.12em;
}
.fenix-welcome__code span {
    font-size: 12px;
    font-weight: 700;
    color: var(--fx-welcome-accent);
    text-align: right;
}
.fenix-welcome__timer { margin: 0; font-size: 12.5px; opacity: 0.8; font-variant-numeric: tabular-nums; }

.fenix-welcome__teaser {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--fx-welcome-accent);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    pointer-events: auto;
}
.fenix-welcome__teaser::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}
.fenix-welcome__teaser[hidden] { display: none; }

/* Preview marker — staff only, same reasoning as the bar's. */
.fenix-welcome[data-preview] .fenix-welcome__card { box-shadow: 0 0 0 3px var(--fx-welcome-accent), 0 30px 60px rgba(0,0,0,0.35); }
/* The chip is absolutely positioned, so the body has to make room for it or it crowds the
   headline (visible the first time a forced preview was screenshotted). */
.fenix-welcome[data-preview] .fenix-welcome__body { padding-top: 40px; }
.fenix-welcome__preview {
    position: absolute;
    left: 12px;
    top: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fx-welcome-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@keyframes fx-welcome-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-welcome-rise {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Phone: bottom sheet, art column dropped, under half the screen. */
@media (max-width: 767px) {
    .fenix-welcome__card {
        left: 0;
        top: auto;
        bottom: 0;
        transform: none;
        width: 100%;
        max-height: 55vh;
        grid-template-columns: minmax(0, 1fr);
        border-radius: 16px 16px 0 0;
        animation: fx-welcome-sheet 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    .fenix-welcome__art { display: none; }
    .fenix-welcome__body { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
    .fenix-welcome__h { font-size: 22px; }
    @keyframes fx-welcome-sheet {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .fenix-welcome__dim, .fenix-welcome__card { animation: none; }
}