/* Moved out of header.php (was an inline <style> block) so browsers and the CDN can cache it. Loaded right after style.css / sky-align.css, as before. */
    .sky-membership-row {
        width: 100%;
        margin-top: 14px;
    }
    .sky-membership-card {
        display: flex;
        width: 100%;
        align-items: stretch;
        min-height: 56px;
        overflow: hidden;
        border: 1px solid #d6e1ec;
        border-radius: 10px;
        background: #edf4fb;
        color: #08143d;
        box-sizing: border-box;
    }
    .sky-membership-card__badge-wrap {
        display: flex;
        flex: 0 0 48px;
        align-items: center;
        justify-content: center;
        padding: 0 5px 0 9px;
    }
    .sky-membership-card__badge {
        display: block;
        width: 27px;
        height: 27px;
        object-fit: contain;
    }
    .sky-membership-card__tier {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 0;
        overflow: hidden;
        padding: 0 13px 0 5px;
    }
    .sky-membership-card__label {
        display: block;
        margin-bottom: 3px;
        color: #778496;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sky-membership-card__name {
        display: block;
        overflow: hidden;
        max-width: 145px;
        color: #08143d;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /* ===== Sky ID (member number) — small line under the tier name ===== */
    .sky-membership-card__id {
        display: block;
        overflow: hidden;
        max-width: 145px;
        margin-top: 2px;
        color: #5b6a7e;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .3px;
        line-height: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .sky-membership-card__points {
        display: flex;
        flex: 0 0 58px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        padding: 0 10px;
        border-left: 1px solid #cad8e5;
        box-sizing: border-box;
        white-space: nowrap;
    }
    .sky-membership-card__number {
        display: block;
        color: #08143d;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
    }
    .sky-membership-card__points-label {
        display: block;
        margin-top: 4px;
        color: #556477;
        font-size: 10px;
        line-height: 1;
    }
    @media (max-width: 767px) {
        .sky-membership-card {
            min-height: 48px;
        }
        .sky-membership-card__badge-wrap {
            flex-basis: 39px;
            padding: 0 4px 0 7px;
        }
        .sky-membership-card__badge {
            width: 22px;
            height: 22px;
        }
        .sky-membership-card__tier {
            min-width: 0;
            padding: 0 8px 0 3px;
        }
        .sky-membership-card__label {
            margin-bottom: 2px;
            font-size: 8px;
            letter-spacing: .7px;
        }
        .sky-membership-card__name {
            max-width: 105px;
            font-size: 12px;
        }
        .sky-membership-card__id {
            max-width: 105px;
            font-size: 9px;
        }
        .sky-membership-card__points {
            flex-basis: 50px;
            min-height: 48px;
            padding: 0 6px;
        }
        .sky-membership-card__number {
            font-size: 16px;
        }
        .sky-membership-card__points-label {
            font-size: 9px;
        }
    }
    @media (max-width: 420px) {
        .sky-membership-card__label {
            display: none;
        }
        .sky-membership-card__name {
            max-width: 84px;
        }
        .sky-membership-card__id {
            max-width: 84px;
        }
    }

    /* ===== Header account/cart row re-layout (only these elements) ===== */
    :root {
        --sky-header-gap: 12px;
    }
    @media (max-width: 767px) {
        :root {
            --sky-header-gap: 10px;
        }
    }
    .icons-row {
        display: flex;
        align-items: center;
        gap: var(--sky-header-gap);
    }
    .icons-row .icon-box {
        position: relative;
        margin: 0;
    }
    .icons-row .icon-box > a,
    .icons-row .user-triger {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 44px;
        min-height: 44px;
        padding: 0 12px;
        border-radius: 10px;
        background: #e8f1fc;
        color: #08143d;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
    }
    .icons-row .icon-box > a i,
    .icons-row .user-triger i {
        font-size: 17px;
        color: #08143d;
    }
    /* The cart count style lives in the CART COUNT block below. */
    .icons-row .icon-box > a > span:not(.count) {
        display: none;
    }
    .icons-row .user-triger > span {
        display: none;
    }
    .icons-row .sky-account-box {
        position: relative;
    }
    @media (max-width: 767px) {
        .icons-row .icon-box > a,
        .icons-row .user-triger {
            min-width: 40px;
            min-height: 40px;
            padding: 0 10px;
        }
    }

    /* ===== Membership card placement ===== */
    .sky-membership-inline {
        display: flex;
        align-items: center;
        margin-right: var(--sky-header-gap);
        flex: 0 0 auto;
        min-width: 0;
    }
    .sky-membership-inline .sky-membership-card {
        width: auto;
    }
    .header-right {
        min-width: 0;
    }
    .header-right .search-row.layout-2 {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: 100%;
    }
    @media (max-width: 1199px) {
        .header-right .search-row.layout-2 {
            min-width: 120px;
        }
    }
    @media (max-width: 767px) {
        .header-right .search-row.layout-2 {
            min-width: 90px;
        }
    }
    .header-right .nav-wrap {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    body.logged-in .header-right .nav-wrap {
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }
    .header-left .logo img {
        max-width: 100%;
        height: auto;
    }
    .header-right .search-row.layout-2 * {
        min-width: 0 !important;
    }
    .header-right .search-row.layout-2 .dgwt-wcas-search-wrapp,
    .header-right .search-row.layout-2 .dgwt-wcas-search-form,
    .header-right .search-row.layout-2 .dgwt-wcas-sf-wrapp,
    .header-right .search-row.layout-2 form,
    .header-right .search-row.layout-2 input[type="search"],
    .header-right .search-row.layout-2 input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .sky-membership-row {
        display: none;
    }
    @media (max-width: 767px) {
        .sky-membership-inline {
            display: none;
        }
        .sky-membership-row {
            display: block;
        }
    }

    /* ===== "Sky Points" is shown in full, or not at all ===== */
    .sky-membership-card.is-points-hidden .sky-membership-card__points {
        display: none !important;
    }
    .sky-membership-card.is-points-hidden .sky-membership-card__name {
        max-width: none;
    }
    .sky-membership-card.is-points-hidden .sky-membership-card__id {
        max-width: none;
    }

    /* ===== Header height fix (mobile, logged-in users) ===== */
    @media (max-width: 767px) {
        body.has-sky-membership-row header + * {
            margin-top: calc(73.31px + 14px + 48px) !important;
        }
    }
    @media (max-width: 420px) {
        body.has-sky-membership-row header + * {
            margin-top: calc(68.5px + 14px + 48px) !important;
        }
    }

    /* ===== Always-accurate header offset (any width, any content) ===== */
    header + * {
        margin-top: var(--site-header-h, 130px) !important;
    }

    /* ===== Mobile: header scrolls away instead of sticking ===== */
    @media (max-width: 767px) {
        body header:not(.account-login) {
            position: static !important;
            float: none !important;
            display: block !important;
            width: 100% !important;
        }
        body header + *,
        body.has-sky-membership-row header + * {
            margin-top: 0 !important;
        }
        body.logged-in.admin-bar header:not(.account-login) {
            top: auto !important;
        }
    }

    /* ===== Login/Register page header: no logo, compact bar ===== */
    header.account-login .logo {
        display: none !important;
    }
    header.account-login p {
        margin: 0;
    }

    /* ==========================================================
       MOBILE SEARCH — the search field is never dropped
       2026-09-16

       On a phone the logo, the account button and the cart already fill
       the top row, so the search field was being squeezed to nothing
       (its "min-width: 90px" above is a floor, not a guarantee — the
       theme's own layout could still collapse it, which is why it was
       missing entirely on the search results page).

       Below 768px it stops competing for that row and takes a full-width
       line of its own underneath, so searching is always one tap away.
       Desktop and tablet are untouched.
       ========================================================== */
    @media (max-width: 767px) {
        /* The logo and the account/cart buttons share the first line and
           are centred against each other; the search field is the only
           thing allowed to wrap onto a second line. */
        /* Top-aligned, NOT centre-aligned: ".header-right" holds the
           buttons AND the search field, so it is two lines tall. Centring
           it against the one-line logo is what pushed the account and
           cart buttons half a line below "Sky Titan Glass". Both columns
           now start at the same top edge and each gives its first line
           the same 44px height, so the logo and the buttons read as one
           horizontal line again. */
        .header-row {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: flex-start !important;
            row-gap: 0 !important;
            /* Keeps the full-width search line inside the header instead
               of letting it push the page sideways.

               NOTE: this block used to also set "overflow-x: hidden"
               here, which clipped the account dropdown — any overflow
               other than "visible" cuts off a child no matter how high
               its z-index is. Sideways overflow is now held back on
               <body> instead; see the ACCOUNT DROPDOWN block at the end
               of this stylesheet. */
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        .header-left {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            display: flex !important;
            align-items: center !important;
            align-self: flex-start !important;
            min-height: 44px !important;
        }
        .header-left .logo,
        .header-left .logo a {
            display: flex !important;
            align-items: center !important;
            margin: 0 !important;
        }
        /* "display: contents" dissolves this wrapper on a phone so the
           buttons and the search field become direct children of
           ".header-row". Kept as a flex box it was a single column two
           lines tall, which forced the WHOLE wrapper onto its own line
           under the logo — that is why the account and cart buttons sat
           below "Sky Titan Glass" instead of beside it. */
        .header-right {
            display: contents !important;
        }
        /* Order matters more than source order here: the buttons stay up
           top beside the logo, the search field drops to its own line. */
        .header-right .nav-wrap {
            order: 1;
            margin-left: auto !important;
            flex: 0 0 auto !important;
            display: flex !important;
            align-items: center !important;
            min-height: 44px !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
        .header-right .nav-wrap .icons-row {
            display: flex !important;
            align-items: center !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
        .header-right .search-row.layout-2 {
            order: 2;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            flex: 1 0 100% !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            /* Tighter than before: the buttons row and the search row
               are one block, not two separate bands. */
            margin: 6px 0 0 !important;
            padding: 0 !important;
            position: static !important;
            transform: none !important;
            box-sizing: border-box !important;
        }
    }

    /* ==========================================================
       HEADER SEARCH FIELD — the blue button sits INSIDE the pill
       2026-09-16

       FiboSearch draws the magnifier as a separate submit control that
       the theme leaves in the normal flow, so at the header's own size it
       ended up half a step low and hanging off the right edge of the
       white field. Pinning it to the field — which is what
       "position: relative" on the form is for — makes the two one
       control at every width, and the padding on the input reserves
       exactly the space the button occupies so text never runs under it.

       Scoped to the header's own search row, so the homepage hero search
       and the search-results page are untouched.
       ========================================================== */
    .header-right .search-row.layout-2 .dgwt-wcas-search-wrapp {
        position: relative !important;
        display: block !important;
    }
    .header-right .search-row.layout-2 .dgwt-wcas-search-form {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .header-right .search-row.layout-2 .dgwt-wcas-search-input,
    .header-right .search-row.layout-2 input[type="search"],
    .header-right .search-row.layout-2 input[type="text"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        display: block !important;
        width: 100% !important;
        height: 44px !important;
        /* 16px stops iOS zooming the page when the field is tapped. */
        font-size: 16px !important;
        line-height: 44px !important;
        /* Left 18, right 52 = the 36px button plus its 4px inset and a
           little air, so the caret never slides under the circle. */
        padding: 0 52px 0 18px !important;
        margin: 0 !important;
        border: 1px solid #d0d5dd !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    .header-right .search-row.layout-2 .dgwt-wcas-search-submit,
    .header-right .search-row.layout-2 button[type="submit"],
    .header-right .search-row.layout-2 input[type="submit"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        position: absolute !important;
        top: 50% !important;
        right: 4px !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background-color: #1d6abf !important;
        box-shadow: none !important;
        float: none !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        z-index: 3 !important;
    }
    .header-right .search-row.layout-2 .dgwt-wcas-search-submit svg,
    .header-right .search-row.layout-2 button[type="submit"] svg {
        width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
        fill: #fff !important;
        stroke: #fff !important;
    }
    .header-right .search-row.layout-2 .dgwt-wcas-search-submit svg *,
    .header-right .search-row.layout-2 button[type="submit"] svg * {
        fill: #fff !important;
        stroke: #fff !important;
    }
    /*
     * Some FiboSearch builds render the submit as
     * <input type="submit" value="Search">, which cannot carry an icon
     * child at all — the magnifier goes on the background instead, and
     * the label is hidden without hiding the control itself.
     */
    .header-right .search-row.layout-2 input[type="submit"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='13.5' cy='13.5' r='8.5' fill='none' stroke='%23ffffff' stroke-width='2.8'/%3E%3Cpath d='M20 20L27 27' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: 18px 18px !important;
        color: transparent !important;
        font-size: 0 !important;
        text-indent: -9999px !important;
    }
    /* The plugin's spinner / clear control belongs on the same centre
       line as the button, clear of it. */
    .header-right .search-row.layout-2 .dgwt-wcas-preloader,
    .header-right .search-row.layout-2 .dgwt-wcas-close {
        top: 50% !important;
        right: 48px !important;
        transform: translateY(-50%) !important;
    }

    /* ==========================================================
       CART COUNT — a small pill beside the trolley, not on top of it
       2026-09-17

       The first version floated the number over the corner of the icon
       as a circular badge. At phone size that meant a 9px digit inside a
       15px circle with a white ring around it — three things fighting
       for the same few pixels, which is why it read as a smudge.

       It now sits BESIDE the trolley as its own pill. Nothing overlaps,
       so the digit can go back up to a legible size, the white ring is
       unnecessary, and two- or three-digit counts simply widen the pill
       instead of spilling over the button's edge.

       The pill is only printed when the cart has something in it (see
       the markup below), so an empty cart is just a plain trolley.
       ========================================================== */
    .icons-row .icon-box .sky-cart-link {
        position: relative;
        gap: 7px;
    }
    .icons-row .icon-box .sky-cart-link.has-items {
        /* A touch more room on the right so the pill is not crammed
           against the button's rounded edge. */
        padding-right: 10px;
    }
    .icons-row .icon-box .count {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border: 0;
        border-radius: 999px;
        background: #1d5fbf;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        font-style: normal;
        line-height: 1;
        letter-spacing: .2px;
        text-align: center;
        /* Keeps the digits optically centred in the pill. */
        font-variant-numeric: tabular-nums;
        box-sizing: border-box;
        pointer-events: none;
    }
    @media (max-width: 767px) {
        .icons-row .icon-box .sky-cart-link {
            gap: 6px;
        }
        .icons-row .icon-box .sky-cart-link.has-items {
            padding-right: 9px;
            padding-left: 9px;
        }
        .icons-row .icon-box .count {
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            font-size: 11px;
        }
    }

    /* ==========================================================
       ACCOUNT DROPDOWN — always on top of the search row and the
       membership card
       2026-09-17

       The menu itself was rendering fine; what covered it was paint
       order. ".search-row" and ".sky-membership-row" come AFTER the
       account button in the markup, and with no z-index set anywhere the
       browser paints later elements on top — which is why, on a phone,
       the blue "Sky Points" card sliced the open menu in half.

       Two things fix it for good. The dropdown gets a z-index that puts
       it above everything else in the header, and every ancestor between
       it and <header> is stopped from clipping it — that second part
       matters more than it looks, because an overflow other than
       "visible" cuts off a child regardless of z-index, and the mobile
       block above used to set "overflow-x: hidden" on ".header-row".
       Sideways overflow is held back on <body> instead, which keeps the
       page from sliding left-right without cutting off the menu.
       ========================================================== */
    html,
    body {
        overflow-x: hidden;
    }
    .icons-row .sky-account-box {
        position: relative;
        z-index: 100;
    }
    .icons-row .sky-account-box .account-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        z-index: 9999;
        margin-top: 8px;
        min-width: 180px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(8, 20, 61, .18);
        overflow: hidden;
    }
    .icons-row .sky-account-box .account-dropdown ul {
        margin: 0;
        padding: 6px 0;
        list-style: none;
    }
    .icons-row .sky-account-box .account-dropdown li {
        margin: 0;
        list-style: none;
    }
    .icons-row .sky-account-box .account-dropdown li a {
        display: block;
        padding: 11px 18px;
        color: #08143d;
        font-size: 15px;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
    }
    .icons-row .sky-account-box .account-dropdown li a:hover {
        background: #eef5fd;
    }
    /* Nothing between the dropdown and <header> may clip it. */
    .header-row,
    .header-right,
    .header-right .nav-wrap,
    .icons-row {
        overflow: visible !important;
    }
    /* …and these two belong underneath it. */
    .header-right .search-row.layout-2 {
        position: relative;
        z-index: 1;
    }
    .sky-membership-row,
    .sky-membership-inline {
        position: relative;
        z-index: 1;
    }
    @media (max-width: 767px) {
        /* The header is statically positioned on a phone, so it needs a
           stacking context of its own for the menu to float above the
           page content underneath. */
        body header:not(.account-login) {
            position: relative !important;
            z-index: 50 !important;
        }
        .icons-row .sky-account-box .account-dropdown {
            margin-top: 6px;
            min-width: 165px;
        }
        .icons-row .sky-account-box .account-dropdown li a {
            padding: 12px 16px;
            font-size: 15px;
        }
    }

    /* ==========================================================
       HEADER SHOP SHORTCUTS — "Sky Shop Essentials" / "Featured Products"
       Plain text links, not buttons: they sit between the logo and the
       membership card and must not compete visually with the account
       and cart controls. Printed only when the header search field is
       absent (see $sky_show_shop_links in the markup below).
       ========================================================== */
    .sky-shop-links {
        display: flex;
        align-items: center;
        gap: 22px;
        flex: 0 0 auto;
        min-width: 0;
        margin-right: var(--sky-header-gap);
    }
    .sky-shop-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #08143d;
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none !important;
    }
    .sky-shop-link i {
        font-size: 15px;
        color: #1d6abf;
    }
    .sky-shop-link:hover,
    .sky-shop-link:focus {
        color: #1d6abf;
    }

    @media (max-width: 1099px) and (min-width: 768px) {
        .sky-shop-links {
            gap: 16px;
        }
        .sky-shop-link {
            font-size: 13px;
        }
    }

    @media (max-width: 767px) {
        /* ".header-right" is "display: contents" on a phone, so this is a
           direct child of ".header-row" and can take its own line under
           the logo / account / cart row. */
        .sky-shop-links {
            order: 3;
            flex: 1 0 100%;
            width: 100%;
            justify-content: center;
            gap: 0;
            margin: 8px 0 0;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #f7fafd;
            overflow: hidden;
        }
        .sky-shop-link {
            flex: 1 1 50%;
            justify-content: center;
            min-height: 42px;
            font-size: 13px;
        }
        .sky-shop-link + .sky-shop-link {
            border-left: 1px solid #e2e8f0;
        }
    }

    /* ==========================================================
       UNIFIED 1320px CONTENT WIDTH — HEADER + FOOTER
       2026-09-21

       Same box the homepage sections use (see "sky-home-unified-width"
       in the home template): 1320px max, centred, 24px side padding,
       14px on phones. The header, the footer's link columns, the
       contact-address row and the copyright strip all now start and
       end at the same x-positions as the page content between them.

       Lives here because header.php loads on every page, and this
       <style> sits after style.css and sky-align.css, so it wins by
       source order. footer.php needs no change — its .container
       elements are picked up by the footer rules below.

       Only the content box is constrained. <header>, <footer> and the
       copyright band keep their full-width backgrounds.
       ========================================================== */
    :root {
        --sky-content-max: 1320px;
        --sky-content-pad: 24px;
    }
    @media (max-width: 767px) {
        :root {
            --sky-content-pad: 14px;
        }
    }
    header > .container,
    header.account-login > .container,
    footer > .container,
    footer .copyright-block > .container {
        width: 100% !important;
        max-width: var(--sky-content-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--sky-content-pad) !important;
        padding-right: var(--sky-content-pad) !important;
        box-sizing: border-box !important;
    }
    /* Rows inside fill the box instead of carrying their own width. */
    header .header-row,
    footer .footer-row,
    footer .address-row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }


    /* ==========================================================
       SHOP ESSENTIALS BUTTON — between the search field and the
       Sky Elite membership card
       2026-09-21

       Same light-blue tile language as the account and cart buttons
       (#e8f1fc, 10px radius, 44px tall) so the header reads as one row
       of controls, with a hairline border and bold label so it stands
       out a little as the one text button in the row. Links to
       /sky-essentials/; marked "is-current" on that page.

       Phones: the label drops and it becomes an icon tile beside the
       account and cart buttons, so the top row still fits beside the
       logo.
       ========================================================== */
    .sky-essentials-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        height: 48px;
        margin-right: var(--sky-header-gap);
        padding: 0 16px;
        border: 1px solid #d6e1ec;
        border-radius: 10px;
        background: #edf4fb;
        color: #08143d !important;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none !important;
        box-sizing: border-box;
        transition: background .15s ease, border-color .15s ease;
    }
    .sky-essentials-link svg {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        color: #1d6abf;
    }
    .sky-essentials-link:hover,
    .sky-essentials-link:focus-visible,
    .sky-essentials-link.is-current {
        background: #e1edfa;
        border-color: #b9cdf0;
        color: #08143d !important;
    }
    /* The search field takes whatever width is left over, so it gives
       way first instead of the button or the membership card. */
    .header-right .search-row.layout-2 {
        margin-right: var(--sky-header-gap);
    }
    @media (max-width: 1099px) and (min-width: 768px) {
        .sky-essentials-link {
            padding: 0 12px;
            font-size: 13px;
        }
    }
    @media (max-width: 767px) {
        /* ".header-right" is "display: contents" on a phone, so this
           sits on the first line with the account and cart buttons. */
        .sky-essentials-link {
            order: 1;
            margin-left: auto;
            margin-right: var(--sky-header-gap);
            height: 40px;
            min-width: 40px;
            padding: 0 10px;
            justify-content: center;
        }
        .sky-essentials-link .sky-essentials-link__text {
            display: none;
        }
        /* When the Essentials tile is on the page it owns the auto
           margin that pushes the button group right, and the nav-wrap
           sits straight after it. When it is hidden, the nav-wrap keeps
           its own auto margin, so account and cart stay on the right. */
        /* Sibling selector, not ':has()': Safari before 15.4 (older
           iPhones) ignores ':has()' and the tile ended up mid-row. */
        .sky-essentials-link ~ .nav-wrap {
            margin-left: 0 !important;
        }
    }

    /* ==========================================================
       HEADER RIGHT-HAND SPACING — one even gap between every control
       2026-09-21

       The gaps between search · Shop Essentials · membership card ·
       account · cart were uneven (roughly 20–40px) because they came
       from several places at once: each item's own margin-right, the
       theme's own spacing on .header-right / .nav-wrap, and the
       icons-row gap. They are all zeroed here and replaced by ONE gap
       on the flex row, so every control is the same, tighter distance
       apart. A gap can never let items overlap — it is space between
       boxes, not a negative offset — and every item keeps
       flex-shrink:0 except the search field, which is the one allowed
       to give up width when the row gets tight.

       Desktop/tablet only. Phones keep their own layout above.
       ========================================================== */
    @media (min-width: 768px) {
        :root {
            --sky-header-gap: 8px;
        }
        .header-right {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: var(--sky-header-gap) !important;
        }
        .header-right > *,
        .header-right .nav-wrap,
        .sky-essentials-link,
        .sky-membership-inline,
        .header-right .search-row.layout-2 {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .sky-essentials-link,
        .sky-membership-inline,
        .header-right .nav-wrap {
            flex-shrink: 0 !important;
        }
        .header-right .nav-wrap .icons-row {
            gap: var(--sky-header-gap) !important;
            margin: 0 !important;
        }
        .header-right .nav-wrap .icons-row .icon-box {
            margin: 0 !important;
        }
        /* The logo and the control row sit a normal distance apart too. */
        .header-row {
            column-gap: 20px !important;
        }

        /*
         * Search field: as long as the row allows, never overlapping.
         *
         * The logo keeps its natural width, the control row takes all
         * the rest, and inside that row the search field is the ONLY
         * item allowed to grow ("flex: 1 1 0") — so it fills every pixel
         * left after Shop Essentials, the membership card, account and
         * cart, and shrinks first when the window narrows.
         *
         * It was overlapping Shop Essentials because FiboSearch gives
         * its own wrappers a fixed width / max-width; the row then
         * allotted the field less space than the plugin drew into. Every
         * wrapper is now told to fill exactly the box it is given and no
         * more, and the field clips at that box edge.
         */
        .header-left {
            flex: 0 0 auto !important;
        }
        .header-row > .header-right {
            flex: 1 1 auto !important;
            min-width: 0 !important;
            /*
             * Clear space between the logo and the search field. Set on
             * the control row itself rather than relying on the row's
             * column-gap, which the theme's own .header-row layout does
             * not always honour — that is why the field ended up almost
             * touching "Sky Titan Glass".
             */
            padding-left: 32px !important;
            box-sizing: border-box !important;
        }
        .header-right .search-row.layout-2 {
            flex: 1 1 0 !important;
            width: auto !important;
            min-width: 180px !important;
            max-width: none !important;
            overflow: hidden !important;
            border-radius: 999px;
        }
        .header-right .search-row.layout-2 .dgwt-wcas-search-wrapp,
        .header-right .search-row.layout-2 .dgwt-wcas-search-form,
        .header-right .search-row.layout-2 .dgwt-wcas-sf-wrapp {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }
    }

    /* ==========================================================
       HEADER CONTROLS — ONE HEIGHT, ONE TILE STYLE
       2026-09-21

       Shop Essentials, the Sky Elite card, the account button and the
       cart were three different heights (48 / 56 / 44px) with three
       different skins, so the row looked stepped. They are now one
       family: the same height, the same light-blue fill, the same
       hairline border and the same 12px corners. The search field is
       deliberately NOT touched.

       Sizes step down with the screen:
         desktop  ≥1100px  56px
         tablet   768–1099 50px
         phone    <768px   44px (and the card moves to its own row,
                           as before)
       ========================================================== */
    :root {
        --sky-tile-h: 56px;
        --sky-tile-bg: #edf4fb;
        --sky-tile-border: #d3e2f2;
        --sky-tile-radius: 12px;
    }
    @media (max-width: 1099px) {
        :root { --sky-tile-h: 50px; }
    }
    @media (max-width: 767px) {
        :root { --sky-tile-h: 44px; }
    }

    /* Shared tile skin */
    .sky-essentials-link,
    .sky-membership-inline .sky-membership-card,
    .icons-row .icon-box > a,
    .icons-row .user-triger {
        height: var(--sky-tile-h) !important;
        min-height: var(--sky-tile-h) !important;
        max-height: var(--sky-tile-h) !important;
        border: 1px solid var(--sky-tile-border) !important;
        border-radius: var(--sky-tile-radius) !important;
        background: var(--sky-tile-bg) !important;
        box-sizing: border-box !important;
    }

    /* Shop Essentials */
    .sky-essentials-link {
        gap: 10px;
        padding: 0 18px;
        font-size: 15px;
    }
    .sky-essentials-link svg {
        width: 22px;
        height: 22px;
    }

    /* Account and cart: square-ish tiles with larger icons */
    .icons-row .icon-box > a,
    .icons-row .user-triger {
        min-width: var(--sky-tile-h) !important;
        padding: 0 14px !important;
    }
    .icons-row .icon-box > a i,
    .icons-row .user-triger i {
        font-size: 20px !important;
    }
    .icons-row .user-triger {
        gap: 8px !important;
    }

    /* Sky Elite card: name + ID on the left, points on the right,
       exactly as in the reference — the small "SKY ELITE" caption is
       dropped inside the header tile so both lines fit the shared
       height comfortably. */
    .sky-membership-inline .sky-membership-card {
        align-items: center !important;
    }
    .sky-membership-inline .sky-membership-card__label {
        display: none !important;
    }
    .sky-membership-inline .sky-membership-card__badge-wrap {
        flex: 0 0 52px;
        padding: 0 6px 0 12px;
    }
    .sky-membership-inline .sky-membership-card__badge {
        width: 30px;
        height: 30px;
    }
    .sky-membership-inline .sky-membership-card__tier {
        padding: 0 14px 0 4px;
    }
    .sky-membership-inline .sky-membership-card__name {
        font-size: 16px;
        max-width: 170px;
    }
    .sky-membership-inline .sky-membership-card__id {
        margin-top: 4px;
        font-size: 12px;
        font-weight: 500;
        max-width: 170px;
    }
    .sky-membership-inline .sky-membership-card__points {
        flex: 0 0 auto;
        min-height: 0 !important;
        height: 60%;
        padding: 0 16px;
        border-left: 1px solid #c6d7e8;
    }
    .sky-membership-inline .sky-membership-card__number {
        font-size: 19px;
    }
    .sky-membership-inline .sky-membership-card__points-label {
        margin-top: 4px;
        font-size: 11.5px;
    }

    @media (max-width: 1099px) and (min-width: 768px) {
        .sky-essentials-link { padding: 0 14px; font-size: 14px; }
        .sky-membership-inline .sky-membership-card__name { font-size: 14.5px; max-width: 130px; }
        .sky-membership-inline .sky-membership-card__id { font-size: 11px; max-width: 130px; }
        .sky-membership-inline .sky-membership-card__points { padding: 0 12px; }
        .sky-membership-inline .sky-membership-card__number { font-size: 17px; }
        .icons-row .icon-box > a,
        .icons-row .user-triger { padding: 0 12px !important; }
    }

    @media (max-width: 767px) {
        /* Phone: Shop Essentials, account and cart are equal icon
           tiles on the logo row; the full card sits on its own line
           underneath (existing behaviour), same skin, same height. */
        .sky-essentials-link {
            width: var(--sky-tile-h);
            padding: 0 !important;
            justify-content: center;
        }
        .icons-row .icon-box > a,
        .icons-row .user-triger {
            padding: 0 11px !important;
        }
        .icons-row .icon-box > a i,
        .icons-row .user-triger i {
            font-size: 18px !important;
        }
        .sky-membership-row .sky-membership-card {
            min-height: var(--sky-tile-h);
            border: 1px solid var(--sky-tile-border);
            border-radius: var(--sky-tile-radius);
            background: var(--sky-tile-bg);
        }
    }

    /* Safari before 14.1 (older iPhones) ignores flex "gap": same spacing as a margin. */
    @supports not (inset: 0) {
        .icons-row > .icon-box + .icon-box {
            margin-left: var(--sky-header-gap) !important;
        }
    }