/*! Goldtop - global header corrections. Loaded on every page from layout/theme.liquid.

    Keep this file small and keep it global. Anything that only applies to a
    product page belongs in the gt-pdp-v2 stylesheet chain, which is scoped to
    PDPs and to mobile at the link.

    ------------------------------------------------------------------
    1. THE MOBILE LOGO SAT 11.95px LEFT OF CENTRE.

    Joe, 26 Sep: "please confirm whether the logo on our header banner (on
    mobile) is actually fully central to the width of a page. It currently looks
    to the left of centre."

    It was. MEASURED at a real 375px viewport, before this rule:

      .header-item--left    L 17.0   W 68.6     (the hamburger)
      .header-item--logo-split L 85.6 W 179.9
        .header-item--split-left   W 35.0       empty on mobile
        .header-item--logo         W 110.0      the logo itself
        .header-item--split-right  W 35.0       empty on mobile
      .header-item--icons   L 265.5 W 92.5      (search and bag)

      logo centre 175.55, page centre 187.50, offset -11.95

    THE LOGO IS NOT THE PROBLEM. It is centred correctly inside the track it is
    given. The two tracks either side of it are not the same width: the icon
    group is 23.9px wider than the hamburger, and half of that difference is the
    offset, exactly.

    WHY MAKING THE TRACKS EQUAL IS NOT ENOUGH ON ITS OWN. Add the content up:
    68.6 + 35 + 110 + 35 + 92.5 = 341.1, against a row 341.0 wide. The header is
    already at its minimum width - there is no free space to redistribute, so
    every flex item is sitting at its content size and no flex-basis change can
    move any of them.

    The 70px that makes the difference is the pair of split-nav containers inside
    the logo item. They hold `ul.site-navigation.small--hide`, which is
    display:none below 769px, so on mobile they render nothing and occupy 35px
    each. That is Impulse's centre-split header keeping its desktop scaffolding
    at a width where the desktop nav does not exist.

    So: hide the two empty containers below 768px, which frees 70px, and lay the
    row out as a three-column grid with equal outer columns. Free space becomes
    341 - 110 = 231, split 115.5 each, and both are comfortably above their
    content minimums (68.6 and 92.5), so neither is squeezed.

    MEASURED AFTER, at 375px: left 115.5, logo 110.0, icons 115.5, logo centre
    187.50 against a page centre of 187.50. Offset 0.00. Holds when the header is
    scrolled and sticky, and document.body.scrollWidth stays at 375 - nothing
    overflows. Re-measured at 767px: outer columns 311.5 each, still equal.

    WHY GRID RATHER THAN FLEX. `grid-template-columns: 1fr auto 1fr` gives the
    outer columns an equal share of the free space while still flooring each at
    its own content width, because `1fr` means `minmax(auto, 1fr)`. If the icon
    group ever grows past its half, the columns fall back to content size and the
    header looks exactly as it does today rather than clipping an icon. The flex
    equivalents either floor the same way and change nothing, or need
    `min-width: 0` to force equality, which is how you overflow a cart icon off
    the edge of a phone.

    SCOPED TO 768px AND BELOW, on purpose. Above that the two tracks are already
    equal - measured at 1512px they are 109px each - so desktop needs nothing and
    gets nothing.

    PURE ASCII, working rule 18: the theme-file connector has mangled non-ASCII
    twice.
*/@media screen and (max-width:768px){.header-layout--center-split{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.header-layout--center-split>.header-item--logo-split{flex:none}.header-item--logo-split>.header-item--split-left,.header-item--logo-split>.header-item--split-right{display:none}}
/*# sourceMappingURL=/cdn/shop/t/62/assets/gt-header.css.map */