/*
 * 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.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. The 50px blue-gradient base chrome.
 */
/* Stardock Blue Header — 50px blue-gradient variant (default, used by Stardock software forums)
   Requires: stardock-nav-shared.css loaded first */

/* ===== Header Container ===== */
.stardock-header {
    background: linear-gradient(to bottom,rgba(13,76,139,1) 0%,rgba(16,97,173,1) 100%);
    border-bottom: 1px solid #006fda;
    box-shadow: rgb(0,0,0) 0px 2px 3px;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
    font-family: 'Segoe UI',Arial,sans-serif;
    font-size: 13px;
}

    .stardock-header .container {
        align-items: stretch;
        background: linear-gradient(to bottom,rgba(13,76,139,1) 0%,rgba(16,97,173,1) 100%);
        box-sizing: border-box;
        display: flex;
        height: 49px;
        flex-direction: row;
        justify-content: flex-start;
        margin: 0 auto;
        max-width: 1420px;
        position: relative;
    }

        /* ===== Hamburger label (mobile only) ===== */
        .stardock-header .container > label[for='nav-trigger'] {
            display: none;
        }

        .stardock-header .container .nav-trigger {
            position: absolute;
            clip: rect(0,0,0,0);
        }

        /* ===== Logo ===== */
        .stardock-header .container > a.logo {
            align-items: center;
            display: flex;
            flex-direction: row;
            text-decoration: none;
        }

            .stardock-header .container > a.logo > img {
                height: 40px;
            }

    /* ===== Main Nav ===== */
    .stardock-header nav {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        font-size: .9rem;
        margin-left: 1rem;
        margin-right: auto;
        position: relative;
    }

        .stardock-header nav > span {
            display: flex;
            padding: 4px 1rem 0;
            position: relative;
            transition: all .1s ease-out;
            z-index: 1;
        }
            /* Skewed hover effect on desktop */
            .stardock-header nav > span::after {
                bottom: 0;
                content: '';
                height: 100%;
                left: -10px;
                position: absolute;
                right: 0;
                top: 0;
                transform: skew(-15deg);
                transform-origin: bottom left;
                z-index: -1;
                pointer-events: none;
            }

            .stardock-header nav > span:hover:not(.active)::after {
                background-color: rgba(0,111,218,.5);
            }

            .stardock-header nav > span.active::after {
                background-color: rgba(0,111,218,.9);
            }

            .stardock-header nav > span > a,
            .stardock-header nav > span > a.navlink {
                align-items: center;
                color: #fdfdfd;
                display: flex;
                text-decoration: none;
                width: 100%;
            }

            .stardock-header nav > span.active {
                font-weight: 500;
            }

            .stardock-header nav > span.mobileonly {
                display: none;
            }

            /* ===== Dropdown Menus ===== */
            .stardock-header nav > span > .submenu {
                background-color: #fdfdfd;
                border: 1px solid #2d2d2d;
                border-top-width: 0;
                box-shadow: #666 0px 2px 3px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                font-size: .9em;
                left: -20px;
                opacity: 0;
                position: absolute;
                top: 52px;
                transition: all .25s ease-in-out;
                visibility: hidden;
                width: 800px;
            }

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

            /* ===== Software Submenu (product grid) ===== */
            .stardock-header nav > span > .submenu > .submenuprod {
                box-sizing: border-box;
                color: #2d2d2d;
                display: flex;
                flex: 1 1 33%;
                flex-direction: row;
                padding: 1em;
            }

                .stardock-header 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;
                }

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

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

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

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

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

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

                .stardock-header nav > span > .submenu > .submenuprod:hover {
                    background-color: #eee;
                }
                /* Bottom links in software submenu (View All / Corporate) */
                .stardock-header nav > span > .submenu > .submenuprod:nth-last-child(2),
                .stardock-header nav > span > .submenu > .submenuprod:last-child {
                    background-color: #ddd;
                    flex: 1 1 50%;
                    padding-left: 1em;
                }

                    .stardock-header nav > span > .submenu > .submenuprod:nth-last-child(2):hover,
                    .stardock-header nav > span > .submenu > .submenuprod:last-child:hover {
                        background-color: #eee;
                    }

                .stardock-header nav > span > .submenu > .submenuprod:last-child {
                    border-left: 1px solid #ccc;
                }
            /* Bottom links in software submenu (direct <a> children — View All / Corporate) */
            .stardock-header nav > span > .submenu > a {
                background-repeat: no-repeat;
                background-position: 1em center;
                background-size: 48px 48px;
                box-sizing: border-box;
                color: #2d2d2d;
                display: flex;
                flex: 1 1 33%;
                flex-direction: column;
                padding: 1em 1em 1em calc(2em + 48px);
                text-decoration: none;
            }

                .stardock-header nav > span > .submenu > a > strong {
                    border-bottom: 1px solid #ccc;
                    font-weight: 500;
                    margin-bottom: 5px;
                    padding-bottom: 5px;
                }

                .stardock-header nav > span > .submenu > a > span {
                    color: #777;
                    display: block;
                    font-size: .9em;
                    font-weight: normal;
                    margin: 0;
                }

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

                .stardock-header nav > span > .submenu > a:nth-last-child(2),
                .stardock-header nav > span > .submenu > a:last-child {
                    background-color: #ddd;
                    flex: 1 1 50%;
                    padding-left: 1em;
                }

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

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

            /* ===== Games Submenu ===== */
            .stardock-header nav > span:nth-child(2) > .submenu > a:nth-last-child(4),
            .stardock-header nav > span:nth-child(2) > .submenu > a:nth-last-child(3) {
                background-color: #ddd;
                border-bottom: 1px solid #ccc;
                flex: 1 1 50%;
                padding-left: 1em;
            }

                .stardock-header nav > span:nth-child(2) > .submenu > a:nth-last-child(4):hover,
                .stardock-header nav > span:nth-child(2) > .submenu > a:nth-last-child(3):hover {
                    background-color: #eee;
                }

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

            /* ===== Community Submenu (simple list) ===== */
            .stardock-header nav > span > .submenu2 {
                background-color: #fff;
                border: 1px solid #2d2d2d;
                border-top-width: 0;
                box-shadow: #666 0px 2px 3px;
                display: block;
                font-size: .9em;
                font-weight: normal;
                left: -10px;
                opacity: 0;
                position: absolute;
                top: 52px;
                transition: all .25s ease-in-out;
                visibility: hidden;
                width: 118px;
            }

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

            .stardock-header nav > span > .submenu2 > a {
                background-repeat: no-repeat;
                box-sizing: border-box;
                color: #2d2d2d;
                display: block;
                padding: 1em;
                text-decoration: none;
                margin-bottom: 5px;
                padding-bottom: 5px;
            }

                .stardock-header nav > span > .submenu2 > a > strong {
                    font-weight: 500;
                }

                .stardock-header nav > span > .submenu2 > a:hover {
                    background-color: #d7d7d7;
                }

    /* ===== Account Nav (right side icons) ===== */
    .stardock-header .icons {
        align-items: center;
        display: flex;
        flex-direction: row;
        margin-left: auto;
        margin-right: 0;
        position: relative;
    }

        .stardock-header .icons > a {
            align-items: center;
            display: flex;
            flex-direction: row;
            position: relative;
        }

            .stardock-header .icons > a > img {
                height: 20px;
            }

            .stardock-header .icons > a > img.header-avatar {
                height: 32px;
                width: 32px;
                object-fit: cover;
                border: 1px solid #FDFDFD;
            }

            .stardock-header .icons > a:not(:first-child) {
                margin-left: 1rem;
            }

        /* "Subscribe to our Newsletter!" — rendered only when signed out, to the right of the
           search icon. It needs its own left margin: the gap rule above is scoped to `a`, and
           this is a <button>. Outlined rather than filled so it reads as secondary to the nav
           links it sits beside. */
        .stardock-header .icons > .sd-header-newsletter {
            margin-left: 1rem;
            appearance: none;
            background: transparent;
            border: 1px solid rgba(253, 253, 253, .7);
            border-radius: 3px;
            color: #FDFDFD;
            cursor: pointer;
            font: inherit;
            font-size: .8rem;
            font-weight: 600;
            line-height: 1;
            padding: .45em .8em;
            white-space: nowrap;
            transition: background-color .15s, border-color .15s;
        }

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

    /* ===== Search Form (blue variant) ===== */
    .stardock-header #search-form {
        background-color: rgba(16,97,173,1);
        border-bottom: 1px solid #006fda;
        border-left: 1px solid #006fda;
        border-right: 1px solid #006fda;
        box-shadow: rgb(0,0,0) 0px 2px 3px;
        top: 49px;
        opacity: 0;
        visibility: hidden;
        transition: all .25s ease-in-out;
    }

        .stardock-header #search-form.show {
            display: block;
            opacity: 1;
            visibility: visible;
        }

        .stardock-header #search-form input {
            border: 1px solid #006fda;
        }

            .stardock-header #search-form input:focus {
                border-color: #fff;
            }

        .stardock-header #search-form button {
            background: #0d4b89;
            border: 1px solid #006fda;
        }

            .stardock-header #search-form button:hover {
                background: #155298;
            }

/* ===== Mobile styles ===== */
@media(max-width:850px) {
    .stardock-header {
        height: 50px;
    }

        .stardock-header .container {
            padding-left: 0;
            padding-right: 0;
        }

            .stardock-header .container > label[for='nav-trigger'] {
                align-items: center;
                box-sizing: border-box;
                cursor: pointer;
                display: flex;
                flex-direction: row;
                padding: 0 6px;
                z-index: 11;
            }

                .stardock-header .container > label[for='nav-trigger'] > img {
                    height: 30px;
                    max-width: none;
                    width: 30px;
                }

            .stardock-header .container .nav-trigger:checked + label {
                left: 215px;
            }

            .stardock-header .container .nav-trigger:checked ~ nav {
                left: 0;
                transition: all .30s ease-in;
            }

        .stardock-header nav {
            align-items: stretch;
            background: #111;
            border-right: 1px solid #4b4b4b;
            border-bottom: 1px solid #4b4b4b;
            bottom: 0;
            flex-direction: column;
            justify-content: flex-start;
            left: -300px;
            width: 280px;
            max-width: 280px;
            position: fixed;
            top: 50px;
            transition: all .25s ease-out;
            z-index: 1001;
            margin-left: 0;
            overflow-y: auto;
        }

            .stardock-header nav > span {
                display: flex;
                align-items: center;
                line-height: 2.5rem;
                height: 2.5rem;
                padding: 0 1rem;
                cursor: pointer;
            }

                .stardock-header nav > span > a {
                    color: #fdfdfd;
                    text-decoration: none;
                    text-shadow: 1px 1px #707070;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                }

                .stardock-header nav > span:not(.dropdown)::after {
                    display: none;
                }

                .stardock-header nav > span.active {
                    background-color: rgba(0,111,218,.9);
                }

                .stardock-header nav > span:hover:not(.active) {
                    background-color: rgba(0,111,218,.5);
                }

                .stardock-header nav > span.mobileonly {
                    display: flex;
                }

            /* Dropdown arrow indicator for items with submenus */
            .stardock-header nav > span.dropdown {
                position: relative;
                z-index: 1;
            }

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

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

            /* Mobile dropdown submenus */
            .stardock-header nav > span > .submenu,
            .stardock-header nav > span > .submenu2 {
                position: absolute;
                left: 0;
                top: 2.5rem;
                width: 280px !important;
                opacity: 1;
                visibility: visible;
                box-shadow: none;
                display: none;
                z-index: 9999;
                background-color: #fdfdfd;
                border: 1px solid #2d2d2d;
                border-top: none;
            }

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

                .stardock-header nav > span > .submenu > .submenuprod {
                    flex: 1 1 100%;
                    box-sizing: border-box;
                }

                    .stardock-header nav > span > .submenu > .submenuprod > span {
                        line-height: 1rem;
                    }

                    .stardock-header nav > span > .submenu > .submenuprod > a:first-child {
                        padding-right: 1em;
                    }

                .stardock-header nav > span > .submenu > a {
                    flex: 1 1 100%;
                    padding: 1em;
                    display: block;
                    color: #2d2d2d;
                    text-decoration: none;
                    text-shadow: none;
                    line-height: 1.5rem;
                }

                    .stardock-header nav > span > .submenu > a:hover,
                    .stardock-header nav > span > .submenu2 > a:hover {
                        background-color: #d7d7d7;
                    }

                .stardock-header nav > span > .submenu2 {
                    background-color: #fff;
                }

                    .stardock-header nav > span > .submenu2 > a {
                        color: #2d2d2d;
                        display: block;
                        padding: 1em;
                        text-decoration: none;
                        text-shadow: none;
                        line-height: 1rem;
                    }

        .stardock-header .icons {
            margin-right: 10px;
        }

            .stardock-header .icons > a:not(:first-child) {
                margin-left: 6px;
            }

            /* No room for a text button beside the icons at this width. The signup is still
               reachable from the sidebar Newsletters widget further down the page. */
            .stardock-header .icons > .sd-header-newsletter {
                display: none;
            }
}

/* ===== Tablet+ adjustments ===== */
@media(min-width:851px) {
    .stardock-header .container {
        padding-left: 10px;
        padding-right: 10px;
    }

        .stardock-header .container > label[for='nav-trigger'] {
            display: none;
        }

        .stardock-header .container .nav-trigger {
            display: none;
        }
}

/* ===== Cart Menu ===== */
:where(.stardock-header, .header-container) #cart-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--background);
    border: 1px solid var(--border-color);
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    display: none;
    z-index: 1000;
}

    :where(.stardock-header, .header-container) #cart-menu.open {
        display: block;
    }

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

@media(max-width:850px) {
    body.has-stardock-header {
        padding-top: calc(50px + 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;
    }
}