/*
 * IMPORTED FROM THE RCL — do not hand-edit.
 *
 * Source: Stardock.Web.Header/wwwroot/css/stardock-nav-shared.css
 * Imported by plan task 2.8 (P2.4). Until Phase 8.2 this file and the RCL's copy are
 * two copies of one sheet; the RCL's remains the source of truth and both are frozen.
 *
 * Composed FIRST into every variant (D3, 2.5). Carries the 12 #account-menu rules the light sheet has none of - omitting it leaves the light flyout unstyled.
 */
/* Stardock Header — shared styles used by both blue and dark header variants */

/* ===== Utilities ===== */
:where(.stardock-header, .header-container) .offscreen {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* ===== Clairvoyance special product card (submenulong) — shared between both headers ===== */
:where(.stardock-header, .header-container) .submenulong {
    background: linear-gradient(45deg,#01a2fd36,#01a2fd0f);
    box-sizing: border-box;
    color: #2d2d2d;
    display: flex;
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    padding: .75em 1em;
}

    :where(.stardock-header, .header-container) .submenulong:hover {
        background-color: #ebebeb;
    }

    :where(.stardock-header, .header-container) .submenulong > a:first-child {
        background-repeat: no-repeat;
        background-size: 48px 48px;
        height: 48px;
        width: 58px;
        display: block;
        min-width: 58px;
        flex-shrink: 0;
    }

    :where(.stardock-header, .header-container) .submenulong > span {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        margin-right: 8.5em;
        min-width: 100px;
    }

        :where(.stardock-header, .header-container) .submenulong > span a.prodname {
            text-decoration: none;
        }

            :where(.stardock-header, .header-container) .submenulong > span a.prodname strong {
                color: #2d2d2d;
                font-size: 1em;
                font-weight: 600;
            }

        :where(.stardock-header, .header-container) .submenulong > span .subtitle {
            color: #007fc7;
            font-size: .75em;
            font-weight: 500;
            margin-top: 2px;
        }

        :where(.stardock-header, .header-container) .submenulong > span .mobile-subtitle {
            display: none;
        }

        :where(.stardock-header, .header-container) .submenulong > span .mobile-links {
            display: none;
        }

            :where(.stardock-header, .header-container) .submenulong > span .mobile-links a {
                color: #007fc7;
                text-decoration: none;
            }

    :where(.stardock-header, .header-container) .submenulong > .description {
        color: #555;
        flex: 1;
        font-size: .875em;
        line-height: 1.4;
        margin-right: 1.5em;
        min-width: 0;
    }

        :where(.stardock-header, .header-container) .submenulong > .description .desc-title {
            color: #2d2d2d;
            font-weight: 500;
            display: block;
            margin-bottom: 2px;
        }

    :where(.stardock-header, .header-container) .submenulong > .actions {
        display: block;
        margin-right: 0;
        text-align: center;
    }

        :where(.stardock-header, .header-container) .submenulong > .actions a.btn {
            background-color: #01a2fd;
            border-radius: 4px;
            color: #fff;
            font-size: .875em;
            font-weight: 500;
            padding: .5em 1em;
            text-decoration: none;
            white-space: nowrap;
        }

            :where(.stardock-header, .header-container) .submenulong > .actions a.btn:hover {
                filter: brightness(1.1);
            }

/* ===== Search Form — shared between both headers ===== */
:where(.stardock-header, .header-container) #search-form {
    display: none;
    position: absolute;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    padding: 5px;
    z-index: 1002;
    min-width: 280px;
}

    :where(.stardock-header, .header-container) #search-form.show {
        display: block;
    }

    :where(.stardock-header, .header-container) #search-form form {
        display: flex;
        gap: 4px;
    }

    :where(.stardock-header, .header-container) #search-form input {
        flex: 1;
        padding: 6px 10px;
        border: 1px solid #ccc;
        font-size: 13px;
        outline: none;
    }

        :where(.stardock-header, .header-container) #search-form input:focus {
            border-color: #155298;
        }

    :where(.stardock-header, .header-container) #search-form button {
        background: #155298;
        color: #fff;
        border: none;
        padding: 6px 14px;
        font-size: 13px;
        cursor: pointer;
    }

        :where(.stardock-header, .header-container) #search-form button:hover {
            background: #0367cc;
        }

/* ===== Account Menu Dropdown — shared between both headers =====
   The container paints a solid opaque blue gradient so the body image can
   never bleed through any padding/margin/gap between items. Each child item
   then paints its OWN matching opaque background so an item is never
   transparent against the body either. */
:where(.stardock-header, .header-container) #account-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #0d4c8b;
    background-image: linear-gradient(to bottom, rgba(13,76,139,1) 0%, rgba(16,97,173,1) 100%);
    border: 1px solid #006fda;
    border-top: none;
    box-shadow: rgb(0,0,0) 0px 2px 3px;
    flex-direction: column;
    font-size: .9rem;
    padding: 0;
    z-index: 1002;
    min-width: 200px;
}

    :where(.stardock-header, .header-container) #account-menu.show {
        display: flex;
    }

    :where(.stardock-header, .header-container) #account-menu .welcome {
        background-color: rgba(13,77,139,.9);
        color: #fdfdfd;
        padding: 8px 10px;
        font-weight: 500;
        border-bottom: 1px solid #217bd5;
    }

    :where(.stardock-header, .header-container) #account-menu > a {
        background-color: rgba(13,76,139,.92);
        color: #fdfdfd;
        padding: 5px 10px;
        text-decoration: none;
        font-size: 13px;
    }

        :where(.stardock-header, .header-container) #account-menu > a:hover {
            background-color: rgba(16,97,173,1);
        }

    :where(.stardock-header, .header-container) #account-menu > span.header {
        background-color: #1576d3;
        padding: 3px 0 3px 4px;
        color: #fff;
        border: solid #6894b5;
        border-width: 1px 0;
        pointer-events: none;
    }

        :where(.stardock-header, .header-container) #account-menu > span.header ~ span.header {
            margin-top: 5px;
        }

    :where(.stardock-header, .header-container) #account-menu > hr {
        width: 100%;
        margin: 3px 0 0;
        border-color: #6894b5;
        border-style: solid;
        border-width: 1px 0 0;
    }

    :where(.stardock-header, .header-container) #account-menu form {
        margin: 0;
    }

    :where(.stardock-header, .header-container) #account-menu .signout-link {
        background-color: rgba(13,76,139,.92);
        border: none;
        color: #fdfdfd;
        cursor: pointer;
        font-size: 13px;
        padding: 5px 10px;
        text-align: left;
        width: 100%;
        font-family: inherit;
    }

        :where(.stardock-header, .header-container) #account-menu .signout-link:hover {
            background-color: rgba(16,97,173,1);
        }

/* ===== Notification Badge ===== */
:where(.stardock-header, .header-container) .notification-badge {
    background: linear-gradient(#50bf41,#39892f);
    color: #fff;
    border-radius: 50%;
    font-size: .7rem;
    padding: 2px 5px;
    position: absolute;
    top: -5px;
    right: -5px;
    animation: swing 1s ease-in-out;
}

@keyframes swing {
    0%,100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }
}

:where(.stardock-header, .header-container) .loggedin {
    border: 1px solid #FDFDFD;
}

/* ===== Messages Icon & Badge ===== */
:where(.stardock-header, .header-container) .sd-msg-icon {
    position: relative;
    display: flex;
    align-items: center;
}

:where(.stardock-header, .header-container) .sd-msg-badge {
    background: linear-gradient(#e74c3c,#c0392b);
    color: #fff;
    border-radius: 50%;
    font-size: .65rem;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
    position: absolute;
    top: -6px;
    right: -8px;
    box-sizing: border-box;
    animation: swing 1s ease-in-out;
}

:where(.stardock-header, .header-container) .sd-sub-icon {
    position: relative;
    display: flex;
    align-items: center;
}

/* ===== Mobile icon overrides — shared ===== */
@media(max-width:850px) {
    :where(.stardock-header, .header-container) .sd-msg-icon,
    :where(.stardock-header, .header-container) .sd-sub-icon {
        display: none !important;
    }
}

/* ===== Mobile account menu overrides — shared ===== */
@media(max-width:850px) {
    :where(.stardock-header, .header-container) #account-menu {
        position: fixed;
        top: 50px;
        right: 0;
        left: auto;
        width: 250px;
        max-height: calc(100vh - 50px);
        overflow-y: auto;
        background: linear-gradient(to bottom,rgba(13,76,139,1) 0%,rgba(16,97,173,1) 100%);
        border: 1px solid #006fda;
        box-shadow: 0 2px 8px rgba(0,0,0,.3);
        z-index: 1050;
    }
}

/* ===== Mobile submenulong overrides — shared ===== */
@media(max-width:850px) {
    :where(.stardock-header, .header-container) .submenulong {
        background: #f5f5f5;
        flex-wrap: wrap;
        line-height: 1.5rem;
    }

        :where(.stardock-header, .header-container) .submenulong > span {
            margin-right: 0;
            min-width: auto;
            flex: 1;
        }

            :where(.stardock-header, .header-container) .submenulong > span .subtitle {
                display: none;
            }

            :where(.stardock-header, .header-container) .submenulong > span .mobile-subtitle {
                display: block;
                color: #777;
                font-size: .875em;
                font-weight: 400;
            }

            :where(.stardock-header, .header-container) .submenulong > span .mobile-links {
                display: block;
                color: #777;
                font-size: .875em;
            }

            :where(.stardock-header, .header-container) .submenulong > span a.prodname {
                display: block;
                border-bottom: 1px solid #ccc;
                margin-bottom: 3px;
                padding-bottom: 3px;
            }

        :where(.stardock-header, .header-container) .submenulong > .description {
            display: none;
        }

        :where(.stardock-header, .header-container) .submenulong > .actions {
            display: none;
        }
}

/* ===== Cart-count badge =====
   The cart link carries an empty <span> that stardock.com/js/fastspring.js fills with the
   item count and toggles .show on. Without these rules the count would render as bare text
   beside the icon, because that script ships no styling of its own and hosts embedding this
   header do not load www.stardock.com's stylesheet.

   Mirrors .notification-badge above so the two badges read as the same control. The span is
   display:none until the script adds .show, which it only does for a count > 0 — an empty
   cart therefore renders exactly as before. */
:where(.stardock-header, .header-container) #cart-trigger {
    /* Positioning context for the absolutely-placed badge. No offsets are set, so this does
       not move the link itself. */
    position: relative;
}

    :where(.stardock-header, .header-container) #cart-trigger > span {
        display: none;
    }

        :where(.stardock-header, .header-container) #cart-trigger > span.show {
            display: inline-block;
            background: linear-gradient(#50bf41,#39892f);
            color: #fff;
            border-radius: 50%;
            font-size: .7rem;
            line-height: 1;
            padding: 2px 5px;
            position: absolute;
            top: -5px;
            right: -5px;
        }

/*
 * Scoped reset — box model (P2.FIX-3) and inherited typography (P2.FIX-4).
 * LOCALLY AUTHORED — this file has no RCL counterpart, by design.
 *
 * Both halves answer the same question in the same direction: which ambient styles is this
 * asset allowed to inherit from a host it has never seen? The box model came first because it
 * broke visibly. The typography below is the rest of the same audit.
 *
 * ============================================================================================
 * WHY THIS FILE EXISTS
 * ============================================================================================
 *
 * The RCL's three sheets contain no universal `box-sizing` reset (9 declarations in
 * `stardock-nav.css`, 4 in `stardock-nav-dark.css`, 2 in `stardock-nav-shared.css` — every one
 * of them attached to a specific rule). They did not need one: the RCL was only ever embedded
 * in forums.stardock.com, and that host supplies a global `border-box` reset of its own. The
 * header inherited it for free and nobody had to write it down.
 *
 * That made the dependency invisible rather than absent. As a STANDALONE asset — which is the
 * entire point of this package — the header is dropped onto arbitrary hosts, and a host with
 * no reset renders the browser default of `content-box`. The dark mega-menu's footer links are
 * the rule that breaks first:
 *
 *     css/dark.css:297   .header-container nav > span > .submenu > a
 *                        width: calc(50%); padding: 12px 14px;   ... and no box-sizing
 *
 * Its parent `.submenu` is `display: flex; flex-wrap: wrap` (dark.css:117). Under content-box
 * each anchor measures 50% PLUS 28px of horizontal padding, so two of them exceed 100% of the
 * line and `flex-wrap` drops the second onto a row of its own. "View All Software Products"
 * and "Corporate Software Solutions" stack vertically instead of sharing a row.
 *
 * The light sheet does not have this bug, and the contrast is the proof: light's equivalent
 * rule (`css/light.css:222`) declares `box-sizing: border-box` outright and sizes with
 * `flex: 1 1 33%` rather than `width: calc(50%)`. Same selector shape, opposite exposure. Dark
 * simply leaned on the host where light did not.
 *
 * No DOM comparison can catch this. The rendered markup is byte-identical either way — 34
 * goldens, 328 tests, three audit rounds and two README walkthroughs all passed while it
 * shipped. It took a human opening a bare page in a real browser. So the fix belongs in the
 * asset, and the guard belongs in computed style (test/stylesheets.test.js).
 *
 * ============================================================================================
 * WHY A SEPARATE FILE, AND NOT A LINE IN shared.css
 * ============================================================================================
 *
 * `css/shared.css`, `css/light.css` and `css/dark.css` all open with "IMPORTED FROM THE RCL —
 * do not hand-edit", and are frozen as two-copies-of-one-sheet against the RCL's originals
 * until Phase 8.2. Adding a rule to any of them would be silent drift between two files that
 * are contractually identical, and the reconciliation at 8.2 would have to find it by diffing.
 *
 * This defect is OURS, not the RCL's: the RCL is legitimately entitled to rely on its host,
 * and this package is not. An asset-local problem gets an asset-local file: this sheet is
 * authored here and imported from nowhere, which is exactly what the problem calls for.
 *
 * ============================================================================================
 * WHY IT IS FOLDED SECOND — AFTER shared.css, BEFORE THE VARIANT
 * ============================================================================================
 *
 * Position is load-bearing in both directions (see scripts/build.mjs):
 *
 *   - NOT FIRST. D3 requires every published sheet to BEGIN with the shared sheet, asserted by
 *     `composed.startsWith(shared)` in both test/stylesheets.test.js and test/build-output.test.js.
 *     Prepending this file would break that invariant.
 *   - NOT LAST. The variant sheets carry DELIBERATE box-model exceptions — most notably the
 *     48x48 product icon at css/dark.css:142 and css/light.css:163, which sets
 *     `box-sizing: content-box` so that its `padding-right: 2em` pushes the label clear
 *     instead of eating into the icon. Those must keep winning. Loading this file BEFORE the
 *     variant means every such exception wins on cascade order as well as on specificity
 *     (a bare `.header-container *` is 0-1-0; the icon rule is 0-4-3), so the exception
 *     survives even if someone later flattens a selector.
 *
 * Both shared.css declarations it passes over are already `border-box`, so nothing in shared
 * changes meaning.
 *
 * ============================================================================================
 * WHY IT IS SCOPED
 * ============================================================================================
 *
 * The header renders into the LIGHT DOM, not a shadow root (D4 / test/shadow-guard.test.js) —
 * nine host scripts acquire its elements by document-level id. So its stylesheet shares a
 * cascade with the host page, and an unscoped `*, ::before, ::after` reset would silently
 * restyle the consumer's entire document. A drop-in asset must not do that.
 *
 * Everything is therefore anchored to the two variant roots — `.stardock-header` (light)
 * and `.header-container` (dark) — covering each root, its descendants, and
 * their generated content. The whole header including the `#account-menu` flyout is nested
 * inside that root, so descendant coverage is complete. The host's own `body` is deliberately
 * left alone: `body.has-stardock-header` is the host's element, and this package only adds
 * padding to it.
 */

.stardock-header,
.stardock-header::before,
.stardock-header::after,
.stardock-header *,
.stardock-header *::before,
.stardock-header *::after,
.header-container,
.header-container::before,
.header-container::after,
.header-container *,
.header-container *::before,
.header-container *::after {
    box-sizing: border-box;
}

/*
 * ============================================================================================
 * INHERITED TYPOGRAPHY (P2.FIX-4)
 * ============================================================================================
 *
 * Both roots declare `font-family` and `font-size` (css/light.css:25-26,
 * css/dark.css:23-24) and NEITHER declares `line-height` or `color`. Two thirds of a font
 * shorthand, written out longhand, is easy to read as complete — and it is not.
 *
 * Measured against the 34 golden fixtures with a host that sets `body { color; line-height }`:
 * 68 distinct element shapes inherit the host's line-height and 47 inherit its colour,
 * including both roots themselves. This is a live leak, not a theoretical one.
 *
 * `line-height` is the one that draws blood. The bar is a FIXED height — 50px light, 33px
 * dark — with no room to absorb anything larger. A host running a comfortable-reading
 * `body { line-height: 1.8 }` reflows the chrome inside a box that cannot grow, and the
 * overflow is clipped rather than accommodated.
 *
 * `normal` is chosen deliberately over a number: it is exactly what a host that sets nothing
 * gives us today, so pinning it changes NO existing rendering and only closes the inheritance
 * path. A numeric pin would be a second opinion about line spacing that this file has no
 * business having.
 *
 * `color` is the backstop for the same leak in the other property. Every element that actually
 * paints text sets its own colour, which is why the omission survived: sweeping all 34 goldens
 * for elements that inherit their colour AND carry direct visible text returns exactly one —
 * `h2.offscreen`, the screen-reader heading parked at `left: -9999px`. So this pin is
 * rendering-neutral by measurement, not by assertion (test/stylesheets.test.js re-proves it).
 * `#fdfdfd` is the chrome's own text colour: both bars are dark (blue gradient light, near
 * black dark), and it is what the shared sheet already uses for `#account-menu` text.
 *
 * Scoped to the roots and not to `*`: descendants that set their own values must keep them,
 * and the host's document must not be touched at all.
 */
.stardock-header,
.header-container {
    line-height: normal;
    color: #fdfdfd;
}

/*
 * `#search-form input` and `#search-form button` (css/shared.css:141, 153) set `font-size` but
 * never `font-family`. Form controls do not inherit the family from their ancestor: the
 * user-agent sheet gives them a platform default, so the search box renders in the UA's font
 * while every other element in the bar renders in Segoe UI.
 *
 * Read as oversight rather than intent, because the author solved this exact problem exactly
 * once — `font-family: inherit` on `.signout-link` at css/shared.css:246 — and did not carry it
 * across to the two form controls that need it just as much.
 *
 * It belongs here rather than in the shared sheet for the usual reason: that sheet is a frozen
 * RCL import. `inherit` rather than a literal stack, so the family stays defined in exactly one
 * place per variant — the root.
 */
.stardock-header #search-form input,
.stardock-header #search-form button,
.header-container #search-form input,
.header-container #search-form button {
    font-family: inherit;
}

/*
 * IMPORTED FROM THE RCL — do not hand-edit.
 *
 * Source: Stardock.Web.Header/wwwroot/css/stardock-nav-dark.css
 * Imported by plan task 2.8 (P2.4). Until Phase 8.2 this file and the RCL's copy are
 * two copies of one sheet; the RCL's remains the source of truth and both are frozen.
 *
 * Composed SECOND, after shared.css. Contains 10 deliberate #account-menu overrides (from L480) whose own comment states they load AFTER stardock-nav-shared.css - folding this before shared silently reverts the dark flyout to the shared blue gradient.
 */
/* Stardock Dark Header — compact 33px dark-gradient variant
   Requires: stardock-nav-shared.css loaded first */

/* ===== Header Container ===== */
.header-container {
    background: linear-gradient(to bottom,rgba(39,39,39,1) 0%,rgba(22,22,22,1) 100%);
    border-bottom: 1px solid #4b4b4b;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 33px;
    font-family: 'Segoe UI',Arial,sans-serif;
    font-size: 13px;
}

    .header-container .wrapper {
        max-width: 1400px;
        margin: 0 auto;
        height: 100%;
        display: flex;
        align-items: stretch;
    }

    .header-container .stardock-nav {
        display: flex;
        align-items: stretch;
        width: 100%;
        height: 100%;
    }

    /* ===== Logo ===== */
    .header-container .header-content {
        display: flex;
        align-items: center;
        padding: 0 12px 0 8px;
    }

        .header-container .header-content .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

            .header-container .header-content .logo img {
                height: 24px;
                width: auto;
            }

    /* ===== Main Nav ===== */
    .header-container nav {
        display: flex;
        align-items: stretch;
        flex: 1;
        height: 100%;
    }

        .header-container nav > span {
            position: relative;
            display: flex;
            align-items: stretch;
        }

            .header-container nav > span > a {
                color: #fff;
                text-decoration: none;
                display: flex;
                align-items: center;
                padding: 0 14px;
                font-size: 13px;
                font-weight: 400;
                white-space: nowrap;
                transition: background-color .15s;
                height: 100%;
            }

                .header-container nav > span > a:hover {
                    background-color: rgba(121,121,121,.5);
                    text-decoration: none;
                }

            .header-container nav > span:hover > a {
                background-color: rgba(121,121,121,.5);
            }

            /* ===== Dropdown Menus (shared) ===== */
            .header-container nav > span > .submenu,
            .header-container nav > span > .submenu2 {
                position: absolute;
                top: 100%;
                left: 0;
                background: #fff;
                border: 1px solid #ccc;
                box-shadow: 0 4px 12px rgba(0,0,0,.25);
                z-index: 1001;
                opacity: 0;
                visibility: hidden;
                transition: opacity .15s,visibility .15s;
                padding: 0;
            }

            .header-container nav > span:hover > .submenu,
            .header-container nav > span:hover > .submenu2 {
                opacity: 1;
                visibility: visible;
            }

            /* ===== Software Submenu (product grid) ===== */
            .header-container nav > span > .submenu {
                width: 800px;
                padding: 0;
                display: flex;
                flex-wrap: wrap;
                align-content: flex-start;
            }

                .header-container nav > span > .submenu > .submenuprod {
                    box-sizing: border-box;
                    color: #2d2d2d;
                    display: flex;
                    flex: 1 1 33%;
                    flex-direction: row;
                    padding: 0.5em 1em;
                }

                    .header-container nav > span > .submenu > .submenuprod > a:first-child {
                        background-repeat: no-repeat;
                        background-size: 48px 48px;
                        display: block;
                        height: 48px;
                        width: 48px;
                        min-width: 48px;
                        padding-right: 2em;
                        box-sizing: content-box;
                        flex-shrink: 0;
                    }

                    .header-container nav > span > .submenu > .submenuprod > span {
                        color: #777;
                        display: block;
                        flex-direction: column;
                        font-size: .875em;
                        font-weight: 400;
                        margin: 0;
                        width: 100%;
                    }

                        .header-container nav > span > .submenu > .submenuprod > span a {
                            text-decoration: none;
                        }

                        .header-container nav > span > .submenu > .submenuprod > span a.prodname {
                            display: block;
                            border-bottom: 1px solid #ccc;
                            font-size: 1.125em;
                            margin-bottom: 5px;
                            padding-bottom: 5px;
                        }

                            .header-container nav > span > .submenu > .submenuprod > span a.prodname:hover {
                                text-decoration: underline;
                            }

                            .header-container nav > span > .submenu > .submenuprod > span a.prodname strong {
                                color: #2d2d2d;
                                font-weight: 500;
                            }

                        .header-container nav > span > .submenu > .submenuprod > span a.link {
                            color: #0066cc;
                            text-decoration: none;
                            font-size: .9em;
                        }

                            .header-container nav > span > .submenu > .submenuprod > span a.link:hover {
                                text-decoration: underline;
                            }

                .header-container nav > span > .submenu > .submenuprod:hover {
                    background-color: #eee;
                }

                /* Clairvoyance special product card (submenulong) */
                .header-container nav > span > .submenu > .submenulong {
                    background: linear-gradient(45deg,#01a2fd36,#01a2fd0f);
                    box-sizing: border-box;
                    color: #2d2d2d;
                    display: flex;
                    flex: 1 1 100%;
                    flex-direction: row;
                    align-items: center;
                    padding: .75em 1em;
                }

                    .header-container nav > span > .submenu > .submenulong:hover {
                        background-color: #ebebeb;
                    }

                    .header-container nav > span > .submenu > .submenulong > a:first-child {
                        background-repeat: no-repeat;
                        background-size: 48px 48px;
                        height: 48px;
                        width: 58px;
                        display: block;
                        min-width: 58px;
                        flex-shrink: 0;
                    }

                    .header-container nav > span > .submenu > .submenulong > span {
                        display: flex;
                        flex-direction: column;
                        flex-shrink: 0;
                        margin-right: 8.5em;
                        min-width: 100px;
                    }

                        .header-container nav > span > .submenu > .submenulong > span a.prodname {
                            text-decoration: none;
                        }

                            .header-container nav > span > .submenu > .submenulong > span a.prodname strong {
                                color: #2d2d2d;
                                font-size: 1em;
                                font-weight: 600;
                            }

                        .header-container nav > span > .submenu > .submenulong > span .subtitle {
                            color: #007fc7;
                            font-size: .75em;
                            font-weight: 500;
                            margin-top: 2px;
                        }

                        .header-container nav > span > .submenu > .submenulong > span .mobile-subtitle {
                            display: none;
                        }

                        .header-container nav > span > .submenu > .submenulong > span .mobile-links {
                            display: none;
                        }

                            .header-container nav > span > .submenu > .submenulong > span .mobile-links a {
                                color: #007fc7;
                                text-decoration: none;
                            }

                    .header-container nav > span > .submenu > .submenulong > .description {
                        color: #555;
                        flex: 1;
                        font-size: .875em;
                        line-height: 1.4;
                        margin-right: 1.5em;
                        min-width: 0;
                    }

                        .header-container nav > span > .submenu > .submenulong > .description .desc-title {
                            color: #2d2d2d;
                            font-weight: 500;
                            display: block;
                            margin-bottom: 2px;
                        }

                    .header-container nav > span > .submenu > .submenulong > .actions {
                        display: block;
                        margin-right: 0;
                        text-align: center;
                    }

                        .header-container nav > span > .submenu > .submenulong > .actions a.btn {
                            background-color: #01a2fd;
                            border-radius: 4px;
                            color: #fff;
                            font-size: .875em;
                            font-weight: 500;
                            padding: .5em 1em;
                            text-decoration: none;
                            white-space: nowrap;
                        }

                            .header-container nav > span > .submenu > .submenulong > .actions a.btn:hover {
                                filter: brightness(1.1);
                            }
            /* Mobile-only nav items */
            .header-container nav > span.mobileonly {
                display: none;
            }

            /* Bottom links in software submenu */
            .header-container nav > span > .submenu > a {
                display: flex;
                flex-direction: column;
                width: calc(50%);
                margin: 0;
                padding: 12px 14px;
                background-color: #ddd;
                border-top: 1px solid #ccc;
                color: #222;
                text-decoration: none;
                font-size: 13px;
            }

            .header-container nav > span > .submenu > a:last-child {
                border-left: 1px solid #ccc;
            }

                .header-container nav > span > .submenu > a:hover {
                    background: #eee;
                    text-decoration: none;
                }

                .header-container nav > span > .submenu > a strong {
                    font-weight: 600;
                    margin-bottom: 2px;
                }

                .header-container nav > span > .submenu > a span {
                    font-size: 12px;
                    color: #666;
                    line-height: 1.3;
                }

            /* ===== Games Submenu ===== */
            .header-container nav > span:nth-of-type(2) > .submenu {
                width: 880px;
            }

                .header-container nav > span:nth-of-type(2) > .submenu > a {
                    display: flex;
                    align-items: flex-start;
                    width: calc(33.333%);
                    padding: 8px;
                    min-height: 70px;
                    background-color: #fff;
                    background-size: 60px 60px !important;
                    background-repeat: no-repeat !important;
                    background-position: 8px center !important;
                    padding-left: 78px;
                    border: none;
                    border-top: none;
                    flex-direction: column;
                    color: #222;
                    border-radius: 4px;
                }

                    .header-container nav > span:nth-of-type(2) > .submenu > a:hover {
                        background-color: #f5f5f5;
                        text-decoration: none;
                    }

                    .header-container nav > span:nth-of-type(2) > .submenu > a strong {
                        font-size: 13px;
                        font-weight: 600;
                        margin-bottom: 3px;
                        color: #222;
                    }

                    .header-container nav > span:nth-of-type(2) > .submenu > a span {
                        font-size: 12px;
                        color: #555;
                        line-height: 1.3;
                    }
                    /* Bottom links for Games (All Games, Community) */
                    .header-container nav > span:nth-of-type(2) > .submenu > a:nth-last-child(-n+2) {
                        width: calc(50%);
                        margin: 0;
                        padding: 12px 14px;
                        background-color: #ddd;
                        background-image: none !important;
                        padding-left: 14px;
                        border-top: 1px solid #ccc;
                        border-radius: 0;
                        min-height: auto;
                    }

                    .header-container nav > span:nth-of-type(2) > .submenu > a:nth-last-child(-n+2):hover {
                        background-color: #eee;
                    }

                    .header-container nav > span:nth-of-type(2) > .submenu > a:last-child {
                        border-left: 1px solid #ccc;
                    }

            /* ===== Community Submenu (simple list) ===== */
            .header-container nav > span > .submenu2 {
                width: 180px;
                padding: 8px 0;
            }

                .header-container nav > span > .submenu2 a {
                    display: block;
                    padding: 8px 20px;
                    color: #333;
                    text-decoration: none;
                    font-size: 13px;
                    white-space: nowrap;
                }

                    .header-container nav > span > .submenu2 a:hover {
                        background: #f0f0f0;
                        text-decoration: none;
                    }

    /* ===== Account Nav (right side icons) ===== */
    .header-container .account-nav {
        margin-left: auto;
        display: flex;
        align-items: center;
        padding: 0 8px;
    }

        .header-container .account-nav .icons {
            display: flex;
            align-items: center;
            gap: 4px;
            position: relative;
        }

            .header-container .account-nav .icons > a {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 4px 6px;
                opacity: .85;
                transition: opacity .15s;
            }

                .header-container .account-nav .icons > a:hover {
                    opacity: 1;
                }

                .header-container .account-nav .icons > a img {
                    height: 18px;
                    width: 18px;
                    filter: brightness(0) invert(1);
                }

                /* Logged-in avatar — show the actual user portrait in color
                   (skip the brightness/invert filter applied to other icons)
                   and frame it with a subtle white circular border so it
                   reads as a profile picture rather than a flat icon. */
                .header-container .account-nav .icons > a.account-trigger img {
                    filter: none;
                    height: 24px;
                    width: 24px;
                    border-radius: 50%;
                    border: 1px solid rgba(255,255,255,.7);
                    object-fit: cover;
                }

            /* "Subscribe to our Newsletter!" — signed-out only, to the right of the
               search icon. Without this it falls back to the browser's default
               button chrome, which is a white box with dark text against a
               charcoal bar. The light variant styles its own copy in
               stardock-nav.css; that rule cannot reach here because it is scoped
               to .stardock-header and this header's root is .header-container.
               Needs its own left margin: the gap rule above is scoped to `a`. */
            .header-container .account-nav .icons > .sd-header-newsletter {
                appearance: none;
                background: transparent;
                border: 1px solid rgba(253, 253, 253, .7);
                border-radius: 3px;
                color: #FDFDFD;
                cursor: pointer;
                font: inherit;
                font-size: 12px;
                font-weight: 600;
                line-height: 1;
                margin-left: 6px;
                padding: .45em .8em;
                white-space: nowrap;
                transition: background-color .15s, border-color .15s;
            }

                .header-container .account-nav .icons > .sd-header-newsletter:hover,
                .header-container .account-nav .icons > .sd-header-newsletter:focus-visible {
                    background: rgba(253, 253, 253, .15);
                    border-color: #FDFDFD;
                    outline: none;
                }

        /* ===== Account Menu Dropdown — dark variant overrides =====
           In the dark Stardock nav, the account dropdown follows the dark
           header palette: black/charcoal item rows with the section headers
           (My Dashboard / Community / Admin Menu) keeping their accent blue
           (inherited from the shared #account-menu > span.header rule).
           These rules load AFTER stardock-nav-shared.css so they override
           the shared blue gradient + blue item rows. */
        :where(.stardock-header, .header-container) #account-menu {
            background-color: #161616;
            background-image: none;
            border: 1px solid #333;
            border-top: none;
        }

        :where(.stardock-header, .header-container) #account-menu .welcome {
            background-color: #1e1e1e;
            border-bottom: 1px solid #2a2a2a;
        }

        :where(.stardock-header, .header-container) #account-menu > a {
            background-color: #161616;
        }

            :where(.stardock-header, .header-container) #account-menu > a:hover {
                background-color: #2a2a2a;
            }

        :where(.stardock-header, .header-container) #account-menu > hr {
            border-color: #2a2a2a;
        }

        :where(.stardock-header, .header-container) #account-menu .signout-link {
            background-color: #161616;
        }

            :where(.stardock-header, .header-container) #account-menu .signout-link:hover {
                background-color: #2a2a2a;
            }

        /* Eliminate the 5px top-margin between consecutive section headers
           and the 3px top-margin on the divider — both create visible gaps
           in the menu where the panel reads as discontinuous. The blue
           header strips already provide enough visual separation between
           sections without needing extra spacing. */
        :where(.stardock-header, .header-container) #account-menu > span.header ~ span.header {
            margin-top: 0;
        }

        :where(.stardock-header, .header-container) #account-menu > hr {
            margin: 0;
            border-color: #2a2a2a;
        }

        /* ===== Search Form ===== */
        .header-container .account-nav #search-form {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0,0,0,.2);
            padding: 8px;
            z-index: 1002;
            min-width: 280px;
        }

            .header-container .account-nav #search-form.show {
                display: block;
            }

            .header-container .account-nav #search-form form {
                display: flex;
                gap: 4px;
            }

            .header-container .account-nav #search-form input {
                flex: 1;
                padding: 6px 10px;
                border: 1px solid #ccc;
                font-size: 13px;
                outline: none;
            }

                .header-container .account-nav #search-form input:focus {
                    border-color: #155298;
                }

            .header-container .account-nav #search-form button {
                background: #155298;
                color: #fff;
                border: none;
                padding: 6px 14px;
                font-size: 13px;
                cursor: pointer;
            }

                .header-container .account-nav #search-form button:hover {
                    background: #0367cc;
                }

    /* ===== Hamburger Menu Icon (mobile) ===== */
    .header-container #nav-trigger {
        display: none;
    }

    .header-container .menu-icon {
        display: none;
        align-items: stretch;
        padding: 0;
        cursor: pointer;
        z-index: 1002;
    }

        /* Padding belongs to the label, not the wrapper: padding on the wrapper is
           dead space that looks tappable but isn't part of the control. */
        .header-container .menu-icon > label {
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: stretch;
            padding: 0 12px;
            cursor: pointer;
        }

    .header-container .hamburger {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        position: relative;
        cursor: pointer;
        transition: background .2s;
    }

        .header-container .hamburger::before,
        .header-container .hamburger::after {
            content: '';
            display: block;
            width: 22px;
            height: 2px;
            background: #fff;
            position: absolute;
            left: 0;
            transition: transform .25s,top .25s;
        }

        .header-container .hamburger::before {
            top: -7px;
        }

        .header-container .hamburger::after {
            top: 7px;
        }

    .header-container #nav-trigger:checked ~ .menu-icon .hamburger {
        background: transparent;
    }

        .header-container #nav-trigger:checked ~ .menu-icon .hamburger::before {
            top: 0;
            transform: rotate(45deg);
        }

        .header-container #nav-trigger:checked ~ .menu-icon .hamburger::after {
            top: 0;
            transform: rotate(-45deg);
        }

/* ===== Mobile styles ===== */
@media(max-width:850px) {
    .header-container {
        height: 44px;
        display: flex;
        align-items: stretch;
    }

        .header-container .menu-icon {
            display: flex;
            flex-shrink: 0;
        }

        .header-container > .wrapper {
            flex: 1;
            min-width: 0;
        }

        .header-container .wrapper {
            position: relative;
        }

        .header-container .stardock-nav nav {
            position: fixed;
            top: 44px;
            left: -300px;
            bottom: 0;
            width: 280px;
            max-width: 280px;
            background: #222;
            flex-direction: column;
            overflow-y: auto;
            transition: left .25s ease-out;
            z-index: 1001;
            border-right: 1px solid #4b4b4b;
            padding: 0;
        }

        .header-container #nav-trigger:checked ~ .wrapper .stardock-nav nav {
            left: 0;
        }

        .header-container nav > span {
            display: block;
        }

            .header-container nav > span > a {
                padding: 12px 16px;
                border-bottom: 1px solid #333;
                /* Reset the desktop rule's `height: 100%`. In the horizontal bar that fills the
                   33px row and the padding is horizontal-only, so it is harmless there. Here the
                   nav becomes a COLUMN flex container that still carries `height: 100%`, so with
                   seven rows flex shrinks each span to ~38px while this link keeps height:100%
                   PLUS the 12px vertical padding and 1px border added above. Under the default
                   content-box that renders a 63px link inside a 38px row, so every item overlapped
                   the next and the ::after dropdown arrow - which is positioned against the span -
                   no longer lined up with its own label.

                   Letting the height be driven by content (13px line + 24px padding + 1px border
                   = 38px) makes the link exactly fill its row. border-box is belt-and-braces so a
                   future explicit height here cannot reintroduce the same overflow. */
                height: auto;
                box-sizing: border-box;
            }

            /* Stop the column flex container from shrinking rows below their content height. */
            .header-container nav > span {
                flex: 0 0 auto;
            }

            /* Items with a submenu overlay their siblings once opened, so the open one
               has to win the stacking order against the spans painted after it. */
            .header-container nav > span.dropdown {
                position: relative;
                z-index: 1;
            }

                .header-container nav > span.dropdown:has(.show) {
                    z-index: 9999;
                }

            /* Mobile submenus are tap-toggled via .show by stardock-nav.js — hover is
               not a usable trigger on touch, and a static submenu shoves the rest of
               the drawer down the page. */
            .header-container nav > span > .submenu,
            .header-container nav > span > .submenu2 {
                position: absolute;
                top: 100%;
                left: 0;
                width: 280px !important;
                max-width: 280px;
                opacity: 1;
                visibility: visible;
                box-shadow: none;
                border: 1px solid #2d2d2d;
                border-top: none;
                display: none;
                flex-wrap: wrap;
                z-index: 9999;
            }

                .header-container nav > span > .submenu.show,
                .header-container nav > span > .submenu2.show {
                    display: flex;
                    max-height: calc(100vh - 150px);
                    overflow-y: auto;
                }

            .header-container nav > span > .submenu > .submenuprod {
                width: 100% !important;
                margin: 4px 0;
            }

            .header-container nav > span > .submenu > a {
                width: 100% !important;
            }

            .header-container nav > span:nth-of-type(2) > .submenu > a {
                width: 100% !important;
                padding-left: 78px;
            }

                .header-container nav > span:nth-of-type(2) > .submenu > a:nth-last-child(-n+2) {
                    width: 100% !important;
                    padding-left: 14px;
                }

            .header-container nav > span > .submenu2 {
                flex-direction: column;
                flex-wrap: nowrap;
                background: #fff;
            }

        .header-container .account-nav {
            padding: 0 6px;
        }

        .header-container nav > span > a {
            text-shadow: 0 1px 2px rgba(0,0,0,.4);
        }

        .header-container nav > span.dropdown::after {
            display: block;
            color: #fff;
            content: '\25BC';
            font-size: 10px;
            position: absolute;
            right: 16px;
            left: auto;
            top: 50%;
            bottom: auto;
            width: auto;
            height: auto;
            transform: translateY(-50%);
            background: none !important;
            pointer-events: none;
            z-index: 1;
        }

        .header-container .account-nav #search-form input {
            border-radius: 3px;
        }

        .header-container nav > span.mobileonly {
            display: block;
        }

        .header-container nav > span > .submenu > .submenulong {
            background: #f5f5f5;
            flex-wrap: wrap;
        }

            .header-container nav > span > .submenu > .submenulong > span {
                margin-right: 0;
                min-width: auto;
                flex: 1;
            }

                .header-container nav > span > .submenu > .submenulong > span .subtitle {
                    display: none;
                }

                .header-container nav > span > .submenu > .submenulong > span .mobile-subtitle {
                    display: block;
                    color: #777;
                    font-size: .875em;
                    font-weight: 400;
                }

                .header-container nav > span > .submenu > .submenulong > span .mobile-links {
                    display: block;
                    color: #777;
                    font-size: .875em;
                }

                .header-container nav > span > .submenu > .submenulong > span a.prodname {
                    display: block;
                    border-bottom: 1px solid #ccc;
                    margin-bottom: 5px;
                    padding-bottom: 5px;
                }

            .header-container nav > span > .submenu > .submenulong > .description {
                display: none;
            }

            .header-container nav > span > .submenu > .submenulong > .actions {
                display: none;
            }
}

/* ===== Desktop adjustments ===== */
@media(min-width:851px) {
    .header-container .menu-icon {
        display: none;
    }

    .header-container nav > span > .submenu,
    .header-container nav > span > .submenu2 {
        left: 0;
    }
}

/* Adjust body padding when stardock header is present */
body.has-stardock-header {
    padding-top: calc(33px + 15px);
}

@media(max-width:850px) {
    body.has-stardock-header {
        padding-top: calc(44px + 15px);
    }
}

/* ============================================================================================
 * SUBMENU FOOTER LINKS — identified structurally, not positionally.
 * ============================================================================================
 *
 * WHAT THIS FIXES
 *
 * The imported sheets identify a mega-menu's footer links by COUNTING FROM THE END:
 *
 *     .submenu > .submenuprod:nth-last-child(2), … :last-child   (light, software)
 *     .submenu > a:nth-last-child(2),            … :last-child   (light, generic)
 *     span:nth-child(2) > .submenu > a:nth-last-child(4), … (3)  (light, games)
 *     span:nth-of-type(2) > .submenu > a:nth-last-child(-n+2)    (dark, games)
 *
 * Every one of those hard-codes "there are exactly two footer links". That was true when the
 * sheets were written and is not true now: `data/nav.json` was updated to match what
 * www.stardock.com actually ships — software went from two footer links to NONE (they were
 * promoted into ordinary product tiles) and games went from two to THREE (Publishing).
 *
 * The visible result was two different failures from one cause. In the software menu the
 * selectors stopped matching footer links and started matching real PRODUCT tiles, painting
 * "Corporate Software Solutions" and "View All Software Products" grey and half-width. In the
 * games menu they matched only two of the three panels, dropping "Publishing" onto a row of its
 * own. Both menus stopped agreeing with www.
 *
 * WHY :not([style]) IS THE HANDLE
 *
 * A footer link cannot be distinguished from a product by tag or class — both are bare `<a>`
 * with `<strong>` and `<span>`, and the goldens pin that markup, so adding a class here would
 * diverge from the RCL. But a product anchor ALWAYS carries an inline `background-image` for
 * its icon and a footer link NEVER does. `a:not([style])` therefore selects exactly the footer
 * links, in both variants, for ANY number of them.
 *
 * That is the whole point: the next time a footer link is added or removed in nav.json, nothing
 * here needs to change.
 *
 * WHY A SEPARATE SHEET
 *
 * `css/light.css` and `css/dark.css` are RCL imports, frozen as one of two copies of one file
 * until Phase 8.2. P2.FIX-3 set the precedent with `css/reset.css`: an asset-local problem gets
 * an asset-local file rather than an edit to an import. This sheet is folded LAST, after the
 * variant, because it exists to override the variant — which is also why it is the one sheet
 * that must not be reordered.
 *
 * UPSTREAM: www has already reached the same conclusion for the software case. In
 * `css/sd2017.scss` the `span.submenuprod` copy of this rule is commented out (the `> a` copy
 * is still live). When Phase 8.2 reconciles the sheets, this file is the change to fold in.
 * ============================================================================================ */

/* --------------------------------------------------------------------------------------------
 * LIGHT — product tiles are never footer links.
 *
 * Restores the base `.submenuprod` presentation that the positional rule overrode: a third of
 * a row, transparent, even padding, no divider. The `:hover` grey still comes from the base
 * sheet, so hover behaviour is unchanged.
 * ------------------------------------------------------------------------------------------ */
.stardock-header nav > span > .submenu > .submenuprod:nth-last-child(2),
.stardock-header nav > span > .submenu > .submenuprod:last-child {
    background-color: transparent;
    flex: 1 1 33%;
    padding: 1em;
    border-left: 0;
}

/* --------------------------------------------------------------------------------------------
 * LIGHT — footer links, however many there are.
 *
 * The second selector is not redundant: the games-scoped rule it overrides carries an extra
 * `:nth-child(2)` and therefore outweighs the generic form. Matching its specificity and
 * arriving later is what lets this win.
 * ------------------------------------------------------------------------------------------ */
.stardock-header nav > span > .submenu > a:not([style]),
.stardock-header nav > span:nth-child(2) > .submenu > a:not([style]) {
    background-color: #ddd;
    border-bottom: 0;
    border-left: 0;
    flex: 1 1 33%;
    /* THE PROPERTY THAT ACTUALLY MATTERS, and the reason `flex: 1 1 33%` alone was not enough.
     *
     * The imported sheet puts `margin-right: 12px` on these anchors. Each therefore occupies
     * 263 + 12 = 275px, and three need 825px inside a 798px menu — one too many, every time,
     * whatever the basis says. The third panel wrapped onto a row of its own.
     *
     * It took measuring `offsetLeft` to find, because every WIDTH read correctly at 263px
     * throughout; only the gaps between them gave it away. Attempts to fix it through the
     * item's own sizing (max-width, min-width, definite width, flex-grow: 0) all produced
     * correctly-sized panels that still wrapped, because none of them touched the margin.
     * With the margin cleared, the panels land at 266px — the same width as the product tiles
     * above them, which is the alignment the design wants and a narrower cap would have
     * quietly missed. */
    margin: 0;
    padding: 1em;
}

.stardock-header nav > span > .submenu > a:not([style]):hover,
.stardock-header nav > span:nth-child(2) > .submenu > a:not([style]):hover {
    background-color: #eee;
}

/* --------------------------------------------------------------------------------------------
 * DARK — the games footer. Same rule, expressed in the dark sheet's own idiom: it sizes these
 * with `width` rather than `flex-basis`, so the override has to as well.
 * ------------------------------------------------------------------------------------------ */
.header-container nav > span:nth-of-type(2) > .submenu > a:not([style]) {
    width: calc(100% / 3);
    background-color: #ddd;
    background-image: none !important;
    border-left: 0;
    border-radius: 0;
    border-top: 1px solid #ccc;
    margin: 0;
    min-height: auto;
    padding: 12px 14px;
}

.header-container nav > span:nth-of-type(2) > .submenu > a:not([style]):hover {
    background-color: #eee;
}

/* --------------------------------------------------------------------------------------------
 * DARK, NARROW — the drawer stacks every row full width, footer links included. The imported
 * rule gives the last two the tighter 14px inset and leaves any third one indented as though it
 * still had a 48px icon beside it.
 *
 * The breakpoint is the dark sheet's own; changing it here would silently desynchronise the two.
 * ------------------------------------------------------------------------------------------ */
@media (max-width: 850px) {
    .header-container nav > span:nth-of-type(2) > .submenu > a:not([style]) {
        width: 100% !important;
        padding-left: 14px;
    }
}