/*
    assets/css/header-shop.css

    Brings public_html's header in line with ozroofracks.shop. Added
    2026-08-20 as the first component of the restyle.

    NO MARKUP CHANGED. This targets the header that is already there --
    #header, its h1 wordmark and #nav's list -- rather than reshaping the
    template to match .shop's class names. The agreed direction is that the
    menu, folders and files of public_html stay exactly as they are and only
    the look moves.

    Values are taken from ozroofracks.shop/app/globals.css: .site-header
    (translucent white, blurred, 1px --line bottom border), .nav-row
    (min-height 76px), .wordmark (28px/800, -1.8px tracking) and .desktop-nav
    (14px/700, hover to --blue with a 2px underline).

    Loaded last in template/css.php so it wins over main.css, which paints
    this header black and uppercase.
*/

:root {
    /*
    .shop's nav row is 76px, but this header is position:fixed and nothing
    below it reserves space -- main.css's only reference to the height is the
    negative margin that tucks #banner underneath. Raising 56px to 76px slid
    the breadcrumb under the bar on every product page.

    So the height stays at main.css's 3.5em for now and only the paint changes.
    Matching .shop's 76px is a layout change that needs the offset sorted
    across every page type, not a colour change, and it is not worth risking
    for 20px. The variable is here so both places move together when it is
    done deliberately.
    */
    --header-h: 3.5em;

    /* .shop's .utility-inner is min-height 34px */
    --utility-h: 34px;

    /*
    The page container. .shop's header content sits in the SAME 1180px
    centred container as the page below it -- measured, not read from its CSS
    (203 -> 1383 at 1585px usable). This site already centres .utility-inner
    and the wordmark on it, so anything pinned in the header has to measure
    its offset from the container edge too:

        right: calc((100% - var(--oz-container)) / 2 + <offset>)

    For a position:fixed element that 100% is the initial containing block,
    i.e. the viewport MINUS the scrollbar -- which is what the container is
    centred in, so the two agree. Do not swap it for 100vw: vw INCLUDES the
    scrollbar and the header would sit ~7px right of the page beneath it.

    Anchoring to the viewport edge instead is what pushed the menu, the
    selects and the icons outside the container on wide screens -- at 1900
    the container ends at 1533 and the cart was at 1861, floating over the
    hero past the end of the header's own white band.
    */
    --oz-container: 1180px;
}

#header {
    height: var(--header-h);
    line-height: var(--header-h);
    background-color: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);

    /*
    NO backdrop-filter HERE, deliberately. .shop's .site-header has one, and
    it was copied across in the first pass -- then the utility bar, which is
    position:fixed and (since it is included from slogan.php) renders INSIDE
    #header, stopped being positioned against the viewport and dropped to
    #header's own top edge, landing on top of the wordmark and the icons.

    A backdrop-filter makes the element a containing block for every fixed
    descendant. Confirmed by toggling it off in the page and watching the bar
    jump from top:34px back to top:0.

    It costs nothing to drop: the background is already 96% opaque, so the
    blur behind it was very nearly invisible.
    */
    box-shadow: none;
    color: var(--ink);
    text-transform: none;
    font-weight: 700;
}

/* NOTE: #header + #banner is set once, at the bottom of this file, where it
   also accounts for --utility-h. Do not re-add a --header-h-only version
   here -- whichever came last would silently win. */

#header h1,
#header nav > ul > li a {
    color: var(--ink);
}

/*
The cart, account and hamburger icons, which main.css paints white for the
black bar. Recolouring them needs three things that are easy to get wrong:

1. THEY ARE NOT INSIDE #nav. #desktopCartSlot and #customerMobileSlot are bare
   <li>s sitting as direct children of #header, next to nav#nav rather than in
   it (invalid HTML, but it is what the template emits and markup is not being
   touched in this pass). A `#header nav i` selector matches nothing at all --
   which is exactly how the first attempt left them white on white.

2. THE WHITE IS !important AND LIVES IN A MEDIA QUERY. main.css line 4715 and
   5308 set `color: #fff !important` inside @media (max-width: 1450px), so the
   override has to carry !important too and match their specificity. This file
   loads last, so equal specificity plus !important wins on source order.

3. NO MEDIA QUERY HERE, DELIBERATELY. The bar is white at every width, so the
   icons must be dark at every width -- wrapping these in the same 1450px query
   would fix the mobile layout and leave the desktop one to chance.

a.navPanelToggle (line 366) is the hamburger; its glyph is a :before that
inherits the anchor's colour, so colouring the anchor is enough.
*/
#header #desktopCartSlot a,
#header #customerMobileSlot a,
#header #desktopCartSlot .fa-shopping-basket,
#header #customerMobileSlot .fa-user-circle,
#header a.navPanelToggle {
    color: var(--ink) !important;
}

#header #desktopCartSlot a:hover,
#header #customerMobileSlot a:hover,
#header a.navPanelToggle:hover {
    color: var(--blue) !important;
}

#header h1 a {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1.8px;
    color: var(--ink);
}

/* main.css bumps the wordmark to 2em above 510px; .shop keeps one size */
@media screen and (min-width: 510px) {
    #header h1 {
        font-size: 24px;
    }
}

#header nav > ul > li > a {
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

#header nav > ul > li > a:hover,
#header nav > ul > li:hover > a {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

/* .shop's cart count: a small filled circle in the accent blue */
#header .cart-count-mobile {
    background: var(--blue);
    color: var(--white);
}

/* .shop's focus ring, so keyboard focus matches on both sites */
#header :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}


/* ========================================================================
   Utility bar -- .shop's .utility-bar, above the header
   ======================================================================== */

/*
main.css pins #header at top:0. The bar goes above it, so the header and
everything measured from it move down by --utility-h. Both offsets are
expressed against the variables rather than hardcoded, which is the whole
reason --header-h was introduced in the first place.

Markup is template/utility-bar.php, included by the four pages that render a
header. Values from ozroofracks.shop/app/globals.css:
  .utility-bar    --ink, #dceaf4, 12px
  .utility-inner  min-height 34px, space-between
  .utility-links  gap 24px
*/
.utility-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1004;              /* over #header's 1003 */
    background: var(--ink);
    color: #dceaf4;
    font-family: var(--font-display);
    font-size: 12px;

    /* The bar is included from slogan.php, so it renders inside #header and
       would otherwise inherit its line-height:3.5em and uppercase. */
    line-height: 1.2;
    text-transform: none;
}

.utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--utility-h);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5em;
}

.utility-inner p {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.utility-links {
    display: flex;
    gap: 24px;
}

.utility-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    color: #dceaf4;
    text-decoration: none;
    white-space: nowrap;
}

.utility-links a:hover {
    color: var(--white);
}

.utility-links i {
    color: inherit;
}

/* Everything pinned to the viewport top shifts down by the bar's height. */
#header {
    top: var(--utility-h);
}

/* promobar.php pins itself at 3.5em / 4em, i.e. directly under the header. */
.promoBar {
    top: calc(var(--utility-h) + var(--header-h)) !important;
}

#header + #banner {
    margin-top: calc(-1 * (var(--header-h) + var(--utility-h)));
}

/*
.shop drops the tagline and the second link on narrow screens and centres what
is left, rather than letting the bar wrap to two lines.
*/
@media screen and (max-width: 736px) {
    .utility-inner {
        justify-content: center;
    }

    .utility-inner > p,
    .utility-links a:last-of-type {
        display: none;
    }
}

/*
main.css pins #desktopCartSlot and #customerMobileSlot to the VIEWPORT below
1450px -- `position: fixed !important; top: 13px !important` (line 5271, with
an earlier top:2px at 4703 that it overrides). Being viewport-fixed rather
than laid out inside #header, they did not move when the header did, so both
icons ended up sitting on top of the utility bar.

Shifted by the same variable rather than a new hardcoded number, so the two
cannot drift apart. Scoped to the same breakpoint the original rules use --
above 1450px these sit in normal flow inside #header and need nothing.
*/
@media screen and (max-width: 1450px) {
    #desktopCartSlot,
    #customerMobileSlot {
        top: calc(var(--utility-h) + 13px) !important;
    }
}

/*
main.css line ~3730: `#header nav { position: fixed; right: 1.5em; top: 0 }`.

FIXED, not absolute -- so it anchors to the VIEWPORT, not to #header, and it
did not move when the utility bar pushed the header down by --utility-h. At
widths above 1450px the whole desktop nav (and the cart and account items,
which live inside it there) sat in the 0-34px band, on top of the bar.

This is the same fault as the mobile #desktopCartSlot/#customerMobileSlot
offset already handled above -- and it was missed the first time because those
two are only fixed BELOW 1450px, so testing at a narrow viewport never showed
it. Anything main.css pins to the viewport has to be shifted, at every width.
*/
#header nav {
    top: var(--utility-h);
}

/*
main.css leaves the h1 a full-width block, so its box spans the entire header
and sits underneath the nav and the icons. Harmless to look at -- the text is
at the left -- but it means the wordmark's box overlaps every control to its
right. Shrink it to its contents.
*/
#header h1 {
    width: max-content;
    max-width: 60%;
}

/*
THE UTILITY BAR DID NOT LINE UP WITH THE HEADER UNDER IT.

.utility-inner carried max-width:1400px and 18px of side padding, while the
header bar below starts its wordmark at 24px. Two stacked bars with their
content on different vertical lines, which is the sort of thing you see
before you can name it.

REM, NOT EM. 1.5em was the obvious first try and it landed at 18px -- exactly
where it started -- because the utility bar runs a 12px font, so its em is
12px not 16. 1.5rem is measured against the root and gives the 24px the
wordmark below actually sits at.

The 1400px cap goes too: the header it has to align with has no cap at all.
*/
.utility-inner {
    max-width: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/*
CATEGORIES > CATEGORIES ON DESKTOP, FULL DEPTH ON A PHONE.

template/menu.php now nests every top-menu category under a single
"Categories" item, so the bar is one item instead of six -- room for the
language and currency selects that are coming.

It still emits the third level (the SKUs under each category, the slugs under
Bundles, and the "All" list). It has to: #nav is display:none at every width
on this site, so the hamburger panel is the only menu and desktop and mobile
render the SAME markup. Leaving the SKUs out of the template would have taken
them off the phone as well.

So the depth is a CSS decision instead. Above 736px the panel stops at the
categories -- 105 links is not a menu, it is a sitemap, and every one of those
SKUs is one click further in on its category page. Below 736px, where
tapping through beats hunting, the full tree stays.
*/
@media screen and (min-width: 737px) {
    #navPanel .link.depth-2,
    #navPanel .link.depth-3 {
        display: none;
    }
}

/* the one Categories item, so it reads as a group rather than a link */
#navPanel .link.depth-0 + .link.depth-1 {
    border-top: 0;
}

/* ==================================================================
   The header in .shop's container
   ================================================================== */

/*
MEASURED SIDE BY SIDE AT 1585px.

    .shop   utility content 203 -> 1383   nav row 203 -> 1383   row 79px tall
    .local  utility content   0 -> 1585   nav 984 -> 1561       row 56px tall

.shop runs the utility bar's CONTENT and the whole menu row inside the same
1180 container as the page below, so the phone number, the wordmark, the menu
and the icons all sit on the same two vertical lines as every section under
them. Ours ran edge to edge on a 24px gutter, which is why nothing above the
fold lined up with anything below it -- and why aligning the utility bar to
the header's 24px earlier only made two wrong things agree.

There is no wrapper element to put a max-width on -- the wordmark, the icon
slots and #nav are siblings of the utility bar inside #header -- so the
container edge is computed instead. --page-inset is the distance from the
window edge to the container edge, the same arithmetic
`width: min(1180px, 100% - 40px); margin-inline: auto` performs.
*/
:root {
    --page-inset: calc((100% - min(1180px, 100% - 40px)) / 2);
}

.utility-inner {
    width: min(1180px, 100% - 40px);
    max-width: none;
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
}

#header h1 {
    left: var(--page-inset);
}

/*
#nav is position:fixed, so its % resolves against the viewport -- which is
the same box #header spans, so the same inset lands it on the container edge.
*/
#header nav {
    right: var(--page-inset);
}

/*
MORE AIR. .shop's row is 79px against our 56. --header-h drives the hero
pull-up, the inner-page top offset and the mobile slot positions, so raising
it here moves all of them together -- which is the point of it being a
variable.
*/
:root {
    --header-h: 79px;
}

/*
THE DROPDOWN SITS ON THE MENU BAR, NOT BELOW IT.

The Categories panel opened 48px clear of the item that spawned it -- a band
of page showing between the two, so the panel read as floating rather than
attached. That came from an inline `margin-top: 3em !important` on index.php,
with product/product.php carrying its own contradictory -1em, so the offset
also moved depending on which page you opened it from. Both are gone; the
offset lives here now.

1px, so the panel just clears the bar. dropotron already positions the top
edge at the opener's bottom, so this is the whole gap.
*/
.dropotron.level-0 {
    margin-top: 1px !important;
}

/*
The little white arrow main.css draws above level-0 pointed at nothing once
the panel closed up against the bar, and it is white against a black panel.
*/
.dropotron.level-0:before {
    display: none;
}

/* ---------------------------------------------------------------
   Header actions cluster -- .shop's .nav-actions
   ---------------------------------------------------------------
[language select] [currency select] [account icon] [cart icon], right-aligned,
matching ozroofracks.shop. MEASURED off the rendered site, not read from its
stylesheet, per the standing rule. At 1280px:

  .nav-actions      gap 15px, 34px tall, centred on the nav row (y 57, mid 74)
  selects           34 tall, padding 0 7px, 1px solid #dce5ec, radius 7px,
                    white background, #0b1b2a text, 10px / 800
  icon cells        34 x 34, icon 24 x 24, colour --ink

and at 375px it keeps everything on one line instead of dropping any:

  gap 6px, selects 44 x 32 / font-size 9

Our header is 79px tall exactly like .shop's, so the cluster centres on 74
at desktop, which is where .shop's sits.

WHY THE SELECTS ARE POSITIONED SEPARATELY FROM THE ICONS. They cannot be one
flex row: #desktopCartSlot and #customerMobileSlot are bare <li>s parked as
direct children of #header, and below 1450px main.css pins each to the
VIEWPORT with `position: fixed !important; right: Npx !important`. Wrapping
them would mean changing the markup those !important rules target. The
selects are pinned from the same edge instead, so all four read as one row.

The offsets are measured from the right of the viewport, outermost first, and
they INTERLOCK -- change one and the 15px rhythm breaks:

  hamburger  .navPanelToggle    0 .. 61    (main.css, untouched)
  cart       right: 74px       74 .. 108
  account    right: 123px     123 .. 157   (108 + 15)
  actions    right: 172px     172 ..       (157 + 15), grows leftwards

main.css also sets `margin: 0 1em 0 0 !important` on both slots, which would
add 16px inside those offsets, so it is zeroed below.
*/

/*
Labels off at EVERY width. main.css already hides them below 1450px; the
owner asked for the icon alone, and .shop's nav actions are icon-only too.
Without the unscoped rule the word "Login" reappears above 1450px.
*/
#header #customerMobileSlot .customer-label,
#header #desktopCartSlot span {
    display: none !important;
}

/*
    ------------------------------------------------------------------
    THESE TWO ARE PINNED AT EVERY WIDTH, AND THAT IS LOad-BEARING.
    ------------------------------------------------------------------
    Above 1450px #desktopCartSlot and #customerMobileSlot are REAL LIST ITEMS
    INSIDE #nav, laid out inline-block alongside the menu links; only below
    1450px does main.css pull them out and pin them to the viewport.

    The box rules here (`display: flex; width: 34px`) turn an inline-block
    list item into a block-level box. Applied to an in-flow nav item that
    means the cart drops onto its own line and shoves the entire menu down a
    row -- which is what happened, and it is invisible at 1280 because the
    nav is hidden there.

    Taking them out of flow at the wider widths too fixes that AND is what
    puts them beside the selects at every width, instead of the cart being
    stranded at the far left of the menu with the account icon marooned
    between "Contact" and the language select.

    So: pin first, then style. Never apply the box rules to an in-flow copy.
*/
@media screen and (min-width: 1451px) {
    #header #desktopCartSlot,
    #header #customerMobileSlot {
        position: fixed !important;
        z-index: 99999 !important;
    }

    /*
        Same interlocking rhythm as the narrow case, measured from the right:
          cart     24 .. 58     (1.5em, matching #header nav's own offset)
          account  73 .. 107    (58 + 15)
          selects  122 ..       (107 + 15)
        and #nav is pushed clear of all of it below.
    */
    #header #desktopCartSlot {
        right: calc((100% - var(--oz-container)) / 2) !important;
    }

    #header #customerMobileSlot {
        right: calc((100% - var(--oz-container)) / 2 + 49px) !important;
    }

    /*
        .header-actions and #header nav are NOT set here. Their base rules
        appear later in this file, so an override at this point would lose on
        source order -- both live in the second min-width:1451px block at the
        bottom, below those base rules. Keep them together there; splitting
        them is how the 256px nav offset and the 247px one came to disagree.
    */
}

#header #desktopCartSlot,
#header #customerMobileSlot {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: calc(var(--utility-h) + ((var(--header-h) - 34px) / 2)) !important;
}

#header #desktopCartSlot a,
#header #customerMobileSlot a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 5px !important;
    border-bottom: 0 !important;
}

/* .shop's icons are 24px. FontAwesome's glyphs are not Phosphor's, so this
   matches the box and the weight of the mark, not its outline. */
#header #customerMobileSlot .fa-user-circle,
#header #desktopCartSlot .fa-shopping-basket {
    font-size: 24px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/*
The two selects. Fixed as a pair so the gap between them is owned by this
flex row and only the cluster's outer edge needs an offset.
*/
.header-actions {
    position: fixed;
    top: calc(var(--utility-h) + ((var(--header-h) - 34px) / 2));
    right: 172px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 15px;
    height: 34px;
}

.locale-picker,
.currency-picker {
    display: flex;
    align-items: center;
}

.locale-select,
.currency-select {
    height: 34px;
    padding: 0 22px 0 7px;
    border: 1px solid #dce5ec;
    border-radius: 7px;
    background-color: #ffffff;
    color: var(--ink);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    /* Caret drawn inline so the control costs no image request. .shop leaves
       the native arrow (appearance:auto); the native one cannot be recoloured
       and renders differently per platform, which is worse than drawing it. */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230b1b2a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 8px 5px;
}

.locale-select:hover,
.locale-select:focus,
.currency-select:hover,
.currency-select:focus {
    border-color: #b9c9d6;
    outline: 0;
}

.locale-select option,
.currency-select option {
    color: var(--ink);
    background: #ffffff;
    font-weight: 600;
}

/*
Below 1450px main.css turns the two slots into viewport-fixed chips and the
desktop #nav hides behind the hamburger. Centre them on the header band
rather than main.css's `top: 13px`, which predates the utility bar and was
tuned for a 32px chip -- with 34px controls in a 79px header it leaves the
row 10px high of the wordmark. Higher specificity (#header prefix) than the
earlier --utility-h + 13px block further up this file, so this wins.
*/
@media screen and (max-width: 1450px) {
    #header #customerMobileSlot,
    #header #desktopCartSlot {
        top: calc(var(--utility-h) + ((var(--header-h) - 34px) / 2)) !important;
    }

    #header #customerMobileSlot {
        right: 123px !important;
    }

    #header #desktopCartSlot {
        right: 74px !important;
    }
}

/*
---------------------------------------------------------------------
>1450px: THE SELECTS SIT INSIDE THE NAV ROW
---------------------------------------------------------------------
The desktop menu is visible at this width, and the cluster reads as part of
it: [links] [EN] [AUD] [login] [cart], all on the nav's own centre line (74).

THIS BLOCK MUST STAY BELOW THE BASE `.header-actions` RULE. That rule sets
`right: 172px` for the narrow case with no media query, so an override placed
ABOVE it loses on source order at equal specificity -- which is what happened
first time round: the selects stayed at 172 and opened a 65px hole between
the currency select and the login icon while the nav ran underneath them.

The four offsets and the nav shift interlock; measured from the viewport right:

  cart      24 .. 58      (matches #header nav's own 1.5em edge)
  login     73 .. 107     (58 + 15)
  selects   122 .. 232    (107 + 15, the pair is 110 wide)
  #nav      247           (232 + 15) so "Contact" stops clear of the selects

At the previous 256 the nav overlapped the language select by 26px.
*/
@media screen and (min-width: 1451px) {
    .header-actions {
        right: calc((100% - var(--oz-container)) / 2 + 98px);
    }

    #header nav {
        right: calc((100% - var(--oz-container)) / 2 + 223px);
    }
}

/*
---------------------------------------------------------------------
NARROW SCREENS: THE SELECTS MOVE UP INTO THE UTILITY BAR
---------------------------------------------------------------------
At 375px there is not room for two selects beside the icons. The numbers,
measured rather than estimated:

  hamburger 61 + cart 34 + account 34 + two selects at 44 each, 6px gaps
  = 241px from the right edge, i.e. starting at x=134 --
  and the wordmark already runs to x=173. A 39px collision.

.shop does not hit this because its wordmark shrinks to 110px at mobile and
it has no 61px hamburger. Rather than shrink the brand, the selects move to
the dark strip above, which at this width has room to spare: the tagline and
the Account link are both already hidden there, leaving only the phone
number. The icons stay in the header row where they are.

This is a DELIBERATE divergence from .shop's single-row layout, agreed with
the owner. The cluster is one fixed-position element, so moving it is a
change of offsets only -- no duplicate markup, and the selects keep their
ids (a second copy in the bar would have meant two #oz-currency-select nodes
and getElementById silently returning whichever came first).
*/
@media screen and (max-width: 736px) {
    .header-actions {
        /* Inside the 34px bar, centred: (34 - 24) / 2 = 5. */
        top: 5px;
        right: 1em;
        gap: 6px;
        height: 24px;
    }

    .locale-select,
    .currency-select {
        height: 24px;
        width: 44px;
        padding: 0 14px 0 4px;
        font-size: 9px;
        /* On the dark bar a white chip is too loud; match the bar's own text
           colour the way the phone link does. */
        background-color: transparent;
        border-color: rgba(220, 234, 244, .38);
        color: #dceaf4;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23dceaf4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
        background-position: right 4px center;
    }

    .locale-select:hover, .locale-select:focus,
    .currency-select:hover, .currency-select:focus {
        border-color: rgba(220, 234, 244, .75);
        color: #ffffff;
    }

    /* The popup list is a native white surface at every width. */
    .locale-select option,
    .currency-select option {
        color: var(--ink);
        background: #ffffff;
    }

    /*
        Icons keep the header row, tightened to .shop's narrow 6px rhythm:

          hamburger  0 .. 61
          cart       67 .. 101   (61 + 6)
          account    107 .. 141  (101 + 6)

        The account offset is 107, NOT 101. At 101 it butts directly against
        the cart -- 101 minus the cart's own 67 is exactly the 34px cell
        width, so the gap comes out at zero and the two icons touch.
    */
    #header #customerMobileSlot {
        right: 107px !important;
    }

    #header #desktopCartSlot {
        right: 67px !important;
    }

    /*
        Keep the bar's own content clear of the fixed selects. .utility-inner
        centres what is left at this width (the phone number, since the
        tagline and Account link are hidden), and centring is computed from
        the padding box -- so without this the number is centred across the
        full width and runs underneath the selects, which are pinned at
        15..109 from the right. Measured overlap before this rule: 4px.

        118px = the two 44px selects, their 6px gap, the 1em right offset and
        a 10px breathing gap.
    */
    .utility-inner {
        padding-right: 118px;
    }

    #header #customerMobileSlot .fa-user-circle,
    #header #desktopCartSlot .fa-shopping-basket {
        font-size: 22px !important;
    }
}

/*
The estimate disclaimer under a converted product price. Hidden inline in
product/parts/header.php and revealed by assets/js/currency-select.js only
while a non-AUD currency is selected.
*/
.currency-estimate-note {
    display: block;
    margin-top: .35em;
    color: #6b7b86;
    font-size: .78em;
    line-height: 1.35;
}

/* ---------------------------------------------------------------
   reveal-header keyframes -- END AT THE UTILITY BAR, NOT AT 0
   ---------------------------------------------------------------
main.css defines @keyframes reveal-header (line ~3609, plus -moz/-webkit/-ms
copies) animating `top` from -4em to 0 over 500ms. That was correct when the
header sat at top:0. The utility bar now occupies the first 34px and the
header sits at var(--utility-h) below it -- so the animation was sliding the
header to the WRONG final position on every single page load, laying it over
the bar and over the top of the page content, then snapping down 34px when
the animation ended and the declared value took back over (fill: none).

Most visible on /cart, which is where it was reported: the cart table starts
at the very top of the page with no hero above it, so the header lands
directly on the first row rather than on a banner image.

Redefining the keyframes by the SAME NAME here overrides main.css's copy
outright -- later definition wins, and this file loads last. The unprefixed
name is the only one any current browser uses; the three vendor-prefixed
copies in main.css are dead weight and are deliberately not reproduced.

Keep the end state expressed as var(--utility-h), never a literal 34px, so
it cannot drift from the value #header itself is positioned with.
*/
@keyframes reveal-header {
    0% {
        top: calc(var(--utility-h) - 4em);
        opacity: 0;
    }

    100% {
        top: var(--utility-h);
        opacity: 1;
    }
}