/* ==========================================================================
   Cloud India Hub — header
   File: public/frontend/css/cih-header.css
   Load AFTER cih-theme.css.

   WHY THE HEADER LOOKS GREY ON MOBILE
   -----------------------------------
   menu-css/web-menu-response.css:227 sets, inside a media query:

       .main-header { background-color: #222222; }

   and .header-upper sits on top of it at rgba(255,255,255,0.75). Seventy-five
   percent white over #222 composites to about #c8c8c8 — a flat mid grey. It is
   not a stray colour anyone picked; it is two rules that were never meant to
   meet. Both are corrected below rather than patched over with a third colour.

   Selectors are doubled where needed for the same reason as the other files:
   the original <style> blocks render into the <body>, after this <link> in
   <head>, so equal-specificity rules of theirs win on document order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Surface
   -------------------------------------------------------------------------- */

.main-header.main-header {
    background-color: #fff;
    background-image: none;
    box-shadow: none;
    border-bottom: 1px solid var(--cih-line, #e2dcf4);
}

.main-header.main-header .header-upper {
    /* Was rgba(255,255,255,0.75) over #222. Opaque, so nothing composites.
       !important because web-menu.css:837 sets `background-color: inherit
       !important` in this area — specificity alone does not win against it. */
    background-color: #fff !important;
    background-image: none;
    position: sticky;
    top: 0;
    z-index: 999;
}

.main-header.main-header .inner-container,
.main-header.main-header .header-upper .container {
    background: transparent;
}

/* A hairline of the TLD spectrum along the bottom edge. One 3px detail
   carries the brand without adding another coloured block. */
.main-header.main-header::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--cih-tld-in, #c81e6b) 0%,
        var(--cih-tld-coin, #7c3aed) 25%,
        var(--cih-tld-com, #4338ca) 50%,
        var(--cih-tld-xyz, #0e7490) 75%,
        var(--cih-tld-shop, #c2410c) 100%
    );
}

/* --------------------------------------------------------------------------
   2. Logo
   -------------------------------------------------------------------------- */

.main-header.main-header .logo-box,
.main-header.main-header .logo {
    display: flex;
    align-items: center;
}

.main-header.main-header .logo img {
    max-height: 46px;
    width: auto;
    height: auto;
}

/* --------------------------------------------------------------------------
   3. Navigation
   -------------------------------------------------------------------------- */

.main-header.main-header .main-menu .navigation > li > a {
    font-family: var(--cih-font, inherit);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--cih-ink, #150e2e);
    padding: 0.65rem 0.9rem;
    border-radius: 0.5rem;
    text-transform: none;
    transition: color 0.16s ease, background 0.16s ease;
}

.main-header.main-header .main-menu .navigation > li > a:hover {
    color: var(--cih-brand, #6d28d9);
    background: var(--cih-brand-wash, #ede9fe);
}

/* Current page: a short violet rule under the label, not a filled block. */
.main-header.main-header .main-menu .navigation > li.current > a,
.main-header.main-header .main-menu .navigation > li.current-menu-item > a {
    color: var(--cih-brand, #6d28d9);
    background: transparent;
    position: relative;
}

.main-header.main-header .main-menu .navigation > li.current > a::after {
    content: '';
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--cih-brand, #6d28d9);
}

/* Dropdown panels */
.main-header.main-header .main-menu .navigation > li > ul,
.main-header.main-header .main-menu .navigation > li > .megamenu {
    border: 1px solid var(--cih-line, #e2dcf4);
    border-radius: 0.85rem;
    box-shadow: 0 18px 44px rgba(21, 14, 46, 0.12);
    padding: 0.5rem;
    background: #fff;
}

.main-header.main-header .main-menu .navigation > li > ul > li > a {
    font-family: var(--cih-font, inherit);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cih-muted, #5f5680);
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 0;
}

.main-header.main-header .main-menu .navigation > li > ul > li > a:hover {
    color: var(--cih-brand-deep, #4c1d95);
    background: var(--cih-brand-wash, #ede9fe);
}

/* --------------------------------------------------------------------------
   4. Language select — a pill, not a raw OS control
   -------------------------------------------------------------------------- */

.main-header.main-header .header-select select,
.main-header.main-header select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--cih-font, inherit);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cih-ink, #150e2e);
    background-color: #fff;
    border: 1px solid var(--cih-line, #e2dcf4);
    border-radius: 999px;
    min-height: 44px;
    padding: 0 2.1rem 0 1rem;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    /* Chevron drawn in CSS — no extra image request. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--cih-muted, #5f5680) 50%),
        linear-gradient(135deg, var(--cih-muted, #5f5680) 50%, transparent 50%);
    background-position: right 1.1rem center, right 0.75rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.main-header.main-header select:hover {
    border-color: var(--cih-brand, #6d28d9);
}

.main-header.main-header select:focus-visible {
    outline: 3px solid var(--cih-ring, rgba(109, 40, 217, 0.3));
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Log in / account
   -------------------------------------------------------------------------- */

.main-header.main-header .user-profile,
.main-header.main-header .user-profile-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--cih-font, inherit);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: #fff;
    background: linear-gradient(135deg, var(--cih-brand-lift, #8b5cf6) 0%, var(--cih-brand, #6d28d9) 55%, var(--cih-brand-deep, #4c1d95) 100%);
    border: 0;
    border-radius: 999px;
    min-height: 44px;
    padding: 0 1.35rem;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(109, 40, 217, 0.24);
    transition: filter 0.15s ease, transform 0.12s ease;
}

/* The label sits in a child element with its own colour, so white has to be
   pushed down rather than just set on the pill. */
.main-header.main-header .user-profile *,
.main-header.main-header .user-profile-inner * {
    color: #fff;
}

.main-header.main-header .user-profile:hover { filter: brightness(1.08); }
.main-header.main-header .user-profile:active { transform: translateY(1px); }

.main-header.main-header .user-profile svg,
.main-header.main-header .user-profile img,
.main-header.main-header .user-profile i {
    color: #fff;
    fill: currentColor;
    max-height: 20px;
    width: auto;
}

/* --------------------------------------------------------------------------
   6. Spacing
   -------------------------------------------------------------------------- */

.main-header.main-header .nav-outer {
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-wrap: wrap;
}

.main-header.main-header .header-select,
.main-header.main-header .user-profile-container {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* --------------------------------------------------------------------------
   6b. Desktop row — one line, not three
   --------------------------------------------------------------------------
   header1.blade.php puts `margin-right: 200px` inline on .main-menu. Inside an
   817px .nav-outer that leaves 44px for the language select, cart, login and
   account, so the row wrapped and the header grew to 214px tall. */

@media (min-width: 1025px) {
    /* .container is display:block here too, and .logo-box is floated, so the
       logo sat on its own line above the nav. Same one-row treatment as
       mobile. */
    .main-header.main-header .header-upper .container,
    .main-header.main-header .inner-container {
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }

    .main-header.main-header .logo-box {
        flex: 0 0 auto;
        float: none;
        margin: 0;
    }

    /* display:flex is set here, not just flex-wrap — in the current
       header1.blade.php .nav-outer computes to `block` at desktop, so its
       children stacked and flex-wrap had nothing to act on. */
    .main-header.main-header .nav-outer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .main-header.main-header .nav-outer .main-menu {
        margin-right: 1.25rem !important;
        min-width: 0;
    }

    /* A floor, or it collapses to a bare chevron once it is allowed to shrink. */
    .main-header.main-header .header-select select { min-width: 118px; }
}

/* --------------------------------------------------------------------------
   7. Mobile — this is where the grey came from
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* Overrides web-menu-response.css:227, which sets #222222 here.
       Every wrapper in the header subtree is covered, because the grey is a
       composite: rgba(255,255,255,0.75) sitting on a dark parent. Whitening
       only one of the two layers leaves the grey behind. */
    .main-header.main-header *:not(select):not(button):not(a):not(svg):not(path):not(img) {
        background-color: transparent;
    }

    .main-header.main-header,
    .main-header.main-header > *,
    .main-header.main-header .header-upper,
    .main-header.main-header .header-upper > *,
    .main-header.main-header .sticky-header {
        background-color: #fff !important;
        background-image: none !important;
    }

    .main-header.main-header,
    .main-header.main-header .header-upper,
    .main-header.main-header .inner-container,
    .main-header.main-header .container,
    .main-header.main-header .nav-outer {
        background-color: #fff !important;
        background-image: none !important;
    }

    .main-header.main-header .main-menu .navigation > li > a {
        color: var(--cih-ink, #150e2e);
    }

    .main-header.main-header .logo img { max-height: 34px; }

    /* One row: logo left, actions right. The stock mobile header dropped the
       logo entirely and stacked the language select, Log in and hamburger
       across two cramped rows. */
    .main-header.main-header .header-upper .container,
    .main-header.main-header .inner-container {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap !important;
        gap: 0.5rem;
        min-height: 62px;
        padding-inline: 0.9rem !important;
    }

    /* web-menu-response.css:217 gives .logo-box width:100% and centres it,
       and .nav-outer width:100% too — so the logo and the controls each take a
       full row and stack. That is why the mobile header was two rows tall with
       the logo pushed out of view. */
    .main-header.main-header .header-upper .logo-box,
    .main-header.main-header .logo-box {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        text-align: left !important;
        float: none !important;
    }

    .main-header.main-header .logo { margin: 0 !important; }

    .main-header.main-header .logo img,
    .main-header.main-header #logo-img {
        /* The markup sets width:110px inline. */
        width: auto !important;
        max-height: 34px;
    }

    .main-header.main-header .logo-box .logo,
    .main-header.main-header .logo-box a { display: block; }

    .main-header.main-header .nav-outer {
        flex: 1 1 auto;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap !important;
        gap: 0.4rem;
        min-width: 0;
        width: auto !important;
        padding: 0 !important;
    }

    /* The desktop menu lives in the drawer at this width. */
    .main-header.main-header .nav-outer .main-menu { display: none !important; }

    /* Reference order: language, cart, account, menu. The cart is inserted
       before .mobile-nav-toggler in the markup, which is first in .nav-outer,
       so source order alone put it against the logo. */
    .main-header.main-header .header-select        { order: 1; }
    .main-header.main-header .cih-cart             { order: 2; }
    .main-header.main-header .user-profile-container { order: 3; }
    .main-header.main-header .mobile-nav-toggler   { order: 4; }

    /* Must be allowed to shrink. As `flex: 0 0 auto` these overflowed
       .nav-outer at 320px and the select spilled left across the logo. */
    .main-header.main-header .header-select,
    .main-header.main-header .user-profile-container {
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 !important;
        width: auto !important;
    }

    /* A floor, not zero. With min-width:0 alone the select shrank to a bare
       chevron at 320px, which is worse than a truncated label. */
    .main-header.main-header .header-select select { min-width: 64px; }

    .main-header.main-header select {
        min-height: 40px;
        font-size: 0.8125rem;
        padding: 0 1.9rem 0 0.85rem;
    }

    .main-header.main-header .user-profile {
        min-height: 40px;
        padding: 0 1rem;
        font-size: 0.875rem;
    }
}

/* Cart, matching the reference. */
.main-header.main-header .cih-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 0.6rem;
    color: var(--cih-ink, #150e2e);
    text-decoration: none;
}

.main-header.main-header .cih-cart:hover {
    color: var(--cih-brand, #6d28d9);
    background: var(--cih-brand-wash, #ede9fe);
}

@media (max-width: 460px) {
    .main-header.main-header .cih-cart { width: 38px; height: 38px; }
}

/* Hamburger. Scoped to the breakpoint where it is actually shown — styling it
   unconditionally drew a bordered 44px box next to the logo on desktop. */
@media (max-width: 1024px) {
    .main-header.main-header .mobile-nav-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 0.6rem;
        border: 1px solid var(--cih-line, #e2dcf4);
        background: #fff;
        color: var(--cih-ink, #150e2e);
    }

    .main-header.main-header .mobile-nav-toggler:hover {
        border-color: var(--cih-brand, #6d28d9);
        color: var(--cih-brand, #6d28d9);
    }
}

/* Off-canvas drawer */
.mobile-menu .menu-backdrop { background: rgba(21, 14, 46, 0.55); }

.mobile-menu .menu-box {
    background: #fff;
    border-left: 1px solid var(--cih-line, #e2dcf4);
}

.mobile-menu .navigation li > a {
    font-family: var(--cih-font, inherit);
    font-size: 1rem;
    font-weight: 600;
    color: var(--cih-ink, #150e2e);
    border-bottom: 1px solid var(--cih-line, #e2dcf4);
    padding: 0.9rem 1.25rem;
}

.mobile-menu .navigation li > a:hover {
    color: var(--cih-brand, #6d28d9);
    background: var(--cih-brand-wash, #ede9fe);
}

/* Narrow phones: the language selector becomes a compact code so the row
   still fits. It is not hidden — the control and its options are unchanged. */
@media (max-width: 460px) {
    .main-header.main-header .logo img { max-height: 30px; }

    /* Wide enough for "US English" at this size — 78px truncated it to
       "US E", which reads as broken rather than compact. */
    .main-header.main-header select {
        min-height: 38px;
        max-width: 108px;
        font-size: 0.75rem;
        padding: 0 1.4rem 0 0.6rem;
        background-position: right 0.7rem center, right 0.45rem center;
    }

    .main-header.main-header .user-profile {
        min-height: 38px;
        padding: 0 0.75rem;
        font-size: 0.8125rem;
    }

    .main-header.main-header .mobile-nav-toggler { width: 38px; height: 38px; }
}

/* Only on the narrowest phones does the row actually need the label gone. */
@media (max-width: 380px) {
    .main-header.main-header .user-profile span { display: none; }
    .main-header.main-header .user-profile { padding: 0 0.7rem; }

    /* Truncates to "US En". Truncation is cosmetic; the overlap it replaces
       was not. The control and all its options are unchanged. */
    .main-header.main-header select {
        min-width: 64px;
        max-width: 76px;
        font-size: 0.7rem;
        padding: 0 1.25rem 0 0.5rem;
        background-position: right 0.6rem center, right 0.4rem center;
    }

    .main-header.main-header .logo img { max-height: 26px; }

    .main-header.main-header .header-upper .container,
    .main-header.main-header .inner-container { gap: 0.35rem; padding-inline: 0.7rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .main-header.main-header .user-profile,
    .main-header.main-header .main-menu .navigation > li > a { transition: none; }
    .main-header.main-header .user-profile:active { transform: none; }
}

/* ==========================================================================
   NAV ROW — icon over label, no wrapping
   Appended rather than shipped as a separate file: this sheet already owns
   .main-header, and a fifth competing header stylesheet is how the current
   mess started.

   The bug this fixes: "Offers Zone" and "Partner Program" were wrapping onto
   two lines, which made those items taller than their neighbours and threw
   the whole row out of alignment. The seven top-level anchors in
   header.blade.php previously carried inline `padding: 15px 18px;
   font-size: 15px` with no width or white-space rule; those inline styles are
   gone and replaced with .cih-nav__link so this sheet can own the row.

   Specificity note: .main-header.main-header ... > li > a in this file is
   (0,4,2). The rules below match that convention deliberately — a plain
   .cih-nav__link (0,1,0) loses to it and silently does nothing.
   ========================================================================== */

.main-header.main-header .main-menu .navigation > li > a.cih-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0.5rem 0.85rem 0.45rem;
    white-space: nowrap;
    line-height: 1.2;
}

/* Inline SVG, not a webfont. The icons were bi-* glyphs from a CDN, which
   render as nothing at all if that request is blocked, slow, or the font
   fails — an avoidable dependency for something this structural. */
.main-header.main-header .cih-nav__icon {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--cih-muted, #5f5680);
    transition: color 0.16s ease;
}

.main-header.main-header .cih-cart__icon {
    width: 21px;
    height: 21px;
    display: block;
}

.main-header.main-header .main-menu .navigation > li > a:hover .cih-nav__icon,
.main-header.main-header .main-menu .navigation > li.active > a .cih-nav__icon,
.main-header.main-header .main-menu .navigation > li.current > a .cih-nav__icon {
    color: var(--cih-brand, #6d28d9);
}

.main-header.main-header .cih-nav__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* The markup sets class="active" (from request()->routeIs), but this sheet
   only ever styled .current / .current-menu-item — so the active underline
   never actually appeared on any page. Aliased here. */
.main-header.main-header .main-menu .navigation > li.active > a {
    color: var(--cih-brand, #6d28d9);
    background: transparent;
    position: relative;
}

.main-header.main-header .main-menu .navigation > li.active > a::after {
    content: '';
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--cih-brand, #6d28d9);
}

/* "New" pill on Offers Zone. */
.main-header.main-header .cih-nav__new {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--cih-brand, #6d28d9);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

/* Cart count badge. .cih-cart itself was already styled in this file with no
   markup to attach to; the anchor now exists in header.blade.php. */
.main-header.main-header .cih-cart {
    position: relative;
}

.main-header.main-header .cih-cart__count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 20px;
    background: var(--cih-brand, #6d28d9);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

/* Mega menu: even columns with a divider, as in the reference. Column COUNT
   comes from the hostingcategories table, so this sets the track and lets
   however many active categories exist flow into it. */
.main-header.main-header .mega-menu .mega-menu-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 26px;
    margin: 0;
}

.main-header.main-header .mega-menu .column {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    min-width: 0;
}

.main-header.main-header .mega-menu .column + .column {
    border-left: 1px solid var(--cih-line, #e2dcf4);
    padding-left: 26px;
}

.main-header.main-header .mega-menu .column h3 {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--cih-ink, #150e2e) !important;
    margin: 0 0 0.75rem !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.main-header.main-header .mega-menu .column ul li a {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.875rem !important;
    color: var(--cih-muted, #5f5680) !important;
    transition: color 0.16s ease, transform 0.16s ease;
}

.main-header.main-header .mega-menu .column ul li a:hover {
    color: var(--cih-brand, #6d28d9) !important;
    transform: translateX(3px);
}

@media (max-width: 1200px) {
    .main-header.main-header .cih-nav__icon {
        display: none;
    }

    .main-header.main-header .main-menu .navigation > li > a.cih-nav__link {
        padding: 0.6rem 0.6rem;
        font-size: 0.875rem;
    }

    .main-header.main-header .mega-menu .mega-menu-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .main-header.main-header .mega-menu .column + .column {
        border-left: 0;
        padding-left: 0;
    }
}

/* ==========================================================================
   HEADER SHELL — floating rounded card
   The reference sits the header on a white rounded card over the hero rather
   than as a full-bleed bar. The theme lays this container out with floats
   and .clearfix, so the float-based columns are neutralised and the row is
   rebuilt with flex; leaving the floats in place is why the logo and the
   first nav item overlapped on the first attempt.
   ========================================================================== */

.main-header.main-header .header-upper {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 10px 0 0;
}

.main-header.main-header .header-upper > .container {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 24px);
    min-height: 72px;
    padding-inline: clamp(16px, 1.8vw, 28px);
    background: #fff;
    border: 1px solid var(--cih-line, #e2dcf4);
    border-radius: 20px;
    box-shadow: 0 14px 40px -18px rgba(24, 16, 61, 0.35);
}

.main-header.main-header .header-upper > .container > .logo-box,
.main-header.main-header .header-upper > .container > .nav-outer {
    float: none;
}

.main-header.main-header .header-upper > .container > .logo-box {
    flex: 0 0 auto;
}

.main-header.main-header .header-upper > .container > .nav-outer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(8px, 1vw, 18px);
    flex: 1 1 auto;
    min-width: 0;
}

.main-header.main-header .logo {
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.main-header.main-header .logo img {
    width: 150px !important;
    height: auto;
}

.main-header.main-header .main-menu {
    padding: 0 !important;
    flex: 0 1 auto;
    min-width: 0;
}

/* Right-hand cluster: language, cart, login sit together and never wrap. */
.main-header.main-header .header-select {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
}

@media (max-width: 991px) {
    .main-header.main-header .header-upper {
        padding-top: 0;
    }

    .main-header.main-header .header-upper > .container {
        min-height: 62px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: 0 6px 20px -12px rgba(24, 16, 61, 0.3);
    }

    .main-header.main-header .logo img {
        width: 116px !important;
    }
}

/* ==========================================================================
   MOBILE: Log In collapses to its icon
   At 412px the row is logo + language + cart + Log In + hamburger. The Log In
   pill was the widest flexible item, so it squeezed the hamburger. The label
   is hidden below 768px and the control becomes a 40px square icon button;
   the <a> and its aria-label are untouched, so the link and its accessible
   name still read "User Login Button".
   ========================================================================== */

@media (max-width: 768px) {
    .main-header.main-header .user-profile {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0 !important;
        border-radius: 12px;
        justify-content: center;
    }

    .main-header.main-header .user-profile-inner {
        gap: 0;
        justify-content: center;
    }

    .main-header.main-header .user-profile__label {
        display: none;
    }

    .main-header.main-header .user-profile svg {
        width: 19px;
        height: 19px;
        margin: 0;
    }

    /* Nothing in the row may grow past its content now that the widest item
       is fixed-width — this is what keeps the hamburger clear. */
    .main-header.main-header .nav-outer > * {
        flex: 0 0 auto;
    }

    .main-header.main-header .header-select {
        flex: 0 1 auto;
        min-width: 0;
    }
}

/* The nav list must not wrap: with .navigation left to wrap, "Partner
   Program" and "Support" dropped onto a second row and the header grew to
   two rows tall. The items shrink via padding at narrower widths instead
   (see the 1200px block above), and below 1024px the whole menu moves into
   the drawer. */
.main-header.main-header .main-menu .navigation {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap !important;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-header.main-header .main-menu .navigation > li {
    display: flex;
    float: none;
    position: relative;
}

/* Sizing inside .nav-outer. Without explicit flex bases the menu kept its
   full content width while the language select and Log In were laid on top
   of "Partner Program" and "Support". The menu is the only flexible item;
   the controls hold their size. */
@media (min-width: 1025px) {
    .main-header.main-header .nav-outer > .main-menu {
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
    }

    .main-header.main-header .nav-outer > .header-select,
    .main-header.main-header .nav-outer > .user-profile-container,
    .main-header.main-header .nav-outer > .cih-cart {
        flex: 0 0 auto;
    }

    .main-header.main-header .main-menu .navigation {
        justify-content: flex-end;
    }
}

/* The nav genuinely did not fit: the <ul> wanted 883px inside a 648px
   .main-menu and overflowed 235px, painting over the language select. The
   Bootstrap collapse wrapper is float:left, so the list ignored its parent's
   width entirely. Un-float it and tighten the items until seven fit. */
@media (min-width: 1025px) {
    .main-header.main-header .nav-outer .navbar-collapse {
        float: none !important;
        min-width: 0;
        width: auto;
        padding: 0;
    }

    .main-header.main-header .main-menu .navigation > li > a.cih-nav__link {
        padding: 0.45rem 0.5rem 0.4rem;
        font-size: 0.8125rem;
    }

    .main-header.main-header .cih-nav__icon {
        width: 18px;
        height: 18px;
    }
}

@media (min-width: 1600px) {
    .main-header.main-header .main-menu .navigation > li > a.cih-nav__link {
        padding: 0.5rem 0.75rem 0.45rem;
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   NAV ROW — hard layout, desktop
   Previous attempt let the <ul> exceed its parent and overflow BOTH ways:
   left onto the cart (hence the cart sitting on the Home icon) and right
   onto the language select (hence "Support" under "US English"). Two causes:
   the cart sits before .main-menu in source order, so it was inside the
   nav's track; and .navigation was centre-justified, which overflows
   symmetrically instead of just running past one edge.

   Fixed here by (a) moving the cart into the right-hand cluster with order,
   (b) left-justifying the list so it can only ever run one direction, and
   (c) giving .main-menu flex-basis 0 so it takes exactly the space left over
   rather than its content width.
   ========================================================================== */

@media (min-width: 1025px) {
    .main-header.main-header .header-upper .nav-outer {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap !important;
        gap: 12px;
        min-width: 0;
    }

    /* Source order is cart, toggler, menu, select, login. Reordered so the
       nav owns the middle and every control sits to its right. */
    .main-header.main-header .nav-outer > .main-menu            { order: 1; }
    .main-header.main-header .nav-outer > .cih-cart             { order: 2; }
    .main-header.main-header .nav-outer > .header-select        { order: 3; }
    .main-header.main-header .nav-outer > .user-profile-container { order: 4; }

    .main-header.main-header .nav-outer > .main-menu {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }

    .main-header.main-header .nav-outer > .cih-cart,
    .main-header.main-header .nav-outer > .header-select,
    .main-header.main-header .nav-outer > .user-profile-container {
        flex: 0 0 auto !important;
    }

    .main-header.main-header .nav-outer .navbar-collapse {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    /* Left-justified, never centred: centring is what made it spill onto the
       cart on the left as well as the select on the right. */
    .main-header.main-header .main-menu .navigation {
        justify-content: flex-start !important;
    }
}

/* Below 1400px the seven labels plus icons no longer fit alongside the logo
   and the three controls, so the icons go first — labels carry the meaning. */
@media (min-width: 1025px) and (max-width: 1399px) {
    .main-header.main-header .cih-nav__icon {
        display: none;
    }

    .main-header.main-header .main-menu .navigation > li > a.cih-nav__link {
        padding: 0.55rem 0.45rem;
    }
}

/* THE actual cause of the collisions.
   .header-upper > .container is a Bootstrap container: max-width 1140–1320px
   regardless of viewport. On a 1920px screen the row still only had ~1320px,
   so seven nav items plus logo, cart, language and Log In did not fit and the
   <ul> overflowed its track — which is why the cart landed on a nav icon and
   "Support" sat under the language select. Widening the header container is
   the fix; every flex rule above was treating a symptom. */
.main-header.main-header .header-upper > .container {
    max-width: min(1680px, calc(100% - 32px)) !important;
    width: 100% !important;
}

/* Between 1025px and 1500px the seven items still did not fit once the
   container was widened (159px over at 1280px). Rather than shrink the
   labels to an unreadable size, the two widest controls give way first:
   Log In drops to its icon and the language select is capped. */
@media (min-width: 1025px) and (max-width: 1500px) {
    .main-header.main-header .cih-nav__icon {
        display: none;
    }

    .main-header.main-header .main-menu .navigation > li > a.cih-nav__link {
        padding: 0.55rem 0.4rem;
        font-size: 0.8125rem;
    }

    .main-header.main-header .nav-outer > .header-select select {
        max-width: 96px;
        padding-right: 1.6rem;
        text-overflow: ellipsis;
    }

    .main-header.main-header .user-profile {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0 !important;
        justify-content: center;
    }

    .main-header.main-header .user-profile__label {
        display: none;
    }

    .main-header.main-header .user-profile-inner {
        gap: 0;
        justify-content: center;
    }

    .main-header.main-header .logo img {
        width: 122px !important;
    }
}


/* ==========================================================================
   DRAWER — undo the desktop nav rules
   script.js:78 clones `.main-header .nav-outer .main-menu` innerHTML into
   `.mobile-menu .menu-box .menu-outer`. That drawer lives INSIDE
   <header class="main-header">, so every `.main-header ... .navigation` rule
   above was also styling the clone: the vertical list became a nowrap flex
   row that overflowed its panel and read as an empty drawer.

   All of it is undone here. These rules must stay AFTER the desktop block.
   ========================================================================== */

.main-header.main-header .mobile-menu .main-menu,
.main-header.main-header .mobile-menu .navbar-collapse {
    display: block !important;
    float: none !important;
    width: auto !important;
    flex: none !important;
    padding: 0 !important;
}

.main-header.main-header .mobile-menu .navigation {
    display: block !important;
    flex-wrap: initial !important;
    justify-content: initial !important;
    gap: 0 !important;
    width: 100%;
}

.main-header.main-header .mobile-menu .navigation > li {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Row, not column: an icon stacked over its label is right for a horizontal
   bar and wrong for a vertical list. */
.main-header.main-header .mobile-menu .navigation > li > a.cih-nav__link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0.85rem 1.25rem !important;
    font-size: 0.9375rem !important;
    white-space: normal !important;
    border-radius: 0;
    width: 100%;
}

.main-header.main-header .mobile-menu .cih-nav__icon {
    display: block !important;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
}

/* The active underline is positioned against the desktop pill. */
.main-header.main-header .mobile-menu .navigation > li.active > a::after {
    display: none !important;
}

.main-header.main-header .mobile-menu .navigation > li > a.cih-nav__link::after {
    content: none !important;
}

.main-header.main-header .mobile-menu .mega-menu,
.main-header.main-header .mobile-menu .navigation > li > ul {
    display: none;
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 0 0.5rem !important;
    background: transparent !important;
}

.main-header.main-header .mobile-menu .mega-menu .mega-menu-bar {
    display: block !important;
}

.main-header.main-header .mobile-menu .mega-menu .column + .column {
    border-left: 0 !important;
    padding-left: 0 !important;
}

/* ==========================================================================
   1025–1300px: keep the full nav rather than dropping to the drawer.
   Reclaims the ~200px it was short by: the language select moves into the
   drawer, the logo and item padding tighten. Laptops keep real navigation.
   ========================================================================== */

@media (min-width: 1025px) and (max-width: 1300px) {
    .main-header.main-header .nav-outer > .header-select {
        display: none !important;
    }

    .main-header.main-header .main-menu .navigation > li > a.cih-nav__link {
        padding: 0.55rem 0.3rem;
        font-size: 0.78125rem;
    }

    .main-header.main-header .logo img {
        width: 104px !important;
    }

    .main-header.main-header .nav-outer > .cih-cart {
        width: 38px;
        height: 38px;
    }
}

/* Last 18px at the 1025px floor. */
@media (min-width: 1025px) and (max-width: 1120px) {
    .main-header.main-header .main-menu .navigation > li > a.cih-nav__link {
        padding: 0.55rem 0.2rem;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   MEGA MENU — width and containing block
   Two faults, both mine:

   1. The nav rules above set `.navigation > li { position: relative }`, which
      made each <li> the containing block for its own absolutely-positioned
      .mega-menu. The panel then measured itself against a ~110px menu item
      instead of the header, so its columns had nowhere to go and the text ran
      outside it. Items carrying a mega menu go back to position: static so the
      panel resolves against the header container.

   2. web-menu.css gives .mega-menu `width: 100%`. Since .main-menu is now
      `flex: 1 1 0%`, that 100% is a fraction of the row rather than the old
      full width. The panel is sized explicitly instead.

   Plain dropdowns (Mail, Partner Program) keep position: relative on their
   <li> — they are meant to anchor to their own item.
   ========================================================================== */

.main-header.main-header .header-upper > .container {
    position: relative;
}

.main-header.main-header .main-menu .navigation > li.has-mega-menu {
    position: static;
}

.main-header.main-header .mega-menu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    /* Capped and centred: spanning the full 1680px container left a 500px
       void beside a three-column menu like Support. */
    max-width: 1180px !important;
    margin-inline: auto !important;
    top: calc(100% + 10px) !important;
    padding: 26px 30px !important;
    border-radius: 18px;
    border: 1px solid var(--cih-line, #e2dcf4);
    box-shadow: 0 24px 60px -20px rgba(24, 16, 61, 0.28);
    background: #fff;
}

/* Hosting has five columns, Domains four, Support three — a fixed
   repeat(4, …) left the fifth stranded on a second row under a stray
   divider. auto-fit sizes to whatever the data produces. */
.main-header.main-header .mega-menu .mega-menu-bar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 22px 26px !important;
    margin: 0 !important;
}

.main-header.main-header .mega-menu .column {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

/* The divider was drawn with `.column + .column`, which also draws it on the
   first item of a wrapped row. A border on the grid gap is not worth that, so
   the columns are separated by space alone. */
.main-header.main-header .mega-menu .column + .column {
    border-left: 0 !important;
    padding-left: 0 !important;
}

.main-header.main-header .mega-menu .column h3 {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--cih-ink, #150e2e) !important;
    margin: 0 0 0.7rem !important;
    padding: 0 0 0.6rem !important;
    border-bottom: 1px solid var(--cih-line, #e2dcf4) !important;
    white-space: normal;
    overflow-wrap: anywhere;
}

.main-header.main-header .mega-menu .column ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.main-header.main-header .mega-menu .column ul li a {
    display: block;
    padding: 0.4rem 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.4;
    color: var(--cih-muted, #5f5680) !important;
    white-space: normal;
    overflow-wrap: anywhere;
}

.main-header.main-header .mega-menu .column img {
    max-width: 100%;
    height: auto;
}

/* The red arrow. web-menu.css:1373 puts `content: '➤'` at left:0/top:0 on every
   mega-menu link, hidden at opacity 0, revealed on hover — and pairs it with
   `a:hover { padding-left: 20px }` to make room. The padding reset above
   removed that shift, so the arrow appeared on top of the first character.
   Removed rather than restored: the reference has no bullets, and a colour
   change plus a small nudge reads better than a red glyph. */
.main-header.main-header .mega-menu .column > ul > li > a::before {
    content: none !important;
}

.main-header.main-header .mega-menu .column > ul > li > a:hover {
    padding-left: 0 !important;
    color: var(--cih-brand, #6d28d9) !important;
    transform: translateX(3px);
}
