/*
    assets/css/spacing-shop.css

    The "air". Added 2026-08-20 after the observation that .shop breathes and
    .com.au does not, even with every colour, component and section already
    matched to it.

    That turned out to be measurable rather than a matter of taste, and it is
    mostly ONE declaration:

        main.css:  body { line-height: 1 }

    Set solid. Every element that does not declare its own line-height --
    every div, span, li, td, label, and every heading that inherits -- renders
    with no leading at all. .shop sits around 1.5. No amount of component
    restyling can compensate for that, which is why the page kept looking
    cramped next to .shop after each individual piece already matched it.

    The other two:

        main.css:  .wrapper > .inner { max-width: 90em; width: 90% }

    90em is 1440px, and 90% of a wide monitor is wider still. .shop's
    container measures 1180px, so it keeps real margin either side; this one
    runs almost edge to edge, which reads as dense however well-spaced the
    contents are.

        main.css:  p { margin: 0.5em }

    Half an em between paragraphs where .shop uses 22-25px.

    Loaded last with the other -shop layers.

    #customerPanel and #cartPanel: the line-height change DOES reach inside
    them, because it is inherited from body rather than matched by a selector.
    That is deliberate and it is the one place they are touched -- text inside
    those panels was set solid too. Their own colours, casing, spacing rules
    and the Proceed to Checkout button are all untouched.
*/

body {
    line-height: 1.5;
}

/*
Anything that genuinely wants to be set solid says so for itself; these are
the ones main.css was relying on body's line-height:1 to deliver.
*/
#header,
.utility-bar,
.button,
button,
input,
select,
.counter,
.bigprice {
    line-height: normal;
}

#header {
    line-height: var(--header-h);
}

.utility-bar {
    line-height: 1.2;
}

/* .shop's container: 1180px, measured off the live site */
.wrapper > .inner,
#main > .inner {
    max-width: 1180px;
    width: 100%;
}

/* .shop's paragraph rhythm */
p {
    margin: 0 0 1.15em;
}

p:last-child {
    margin-bottom: 0;
}

/*
THE FIXED CHROME WAS SITTING ON THE TOP OF EVERY INNER PAGE.

#header is position:fixed and now carries the utility bar above it, so the
chrome occupies the first 90px of the viewport: 34px of utility bar plus a
3.5em header. #main opens with padding-top:64px -- a value from before the
utility bar existed, when 56px of header was all it had to clear.

Measured on /oz41: chrome bottom 90, breadcrumb top 67, gallery column top
71. The first line of the breadcrumb and the top ~19px of the product image
were behind the menu on every product page.

ADJACENT SIBLING, NOT #main ON ITS OWN. The homepage deliberately pulls
#banner up UNDER the chrome for the full-bleed hero, and its #main comes
later in the page where it needs no offset at all. Only a #main that
directly follows the header is the one being overlapped, and `+` says
exactly that.

Derived from the variables rather than written as 120, so it follows the
header if either height changes.

EVERY FIRST SECTION, NOT JUST #main. Product and bundle pages open with
#main, category pages with #sets, /find with #compatible. #sets happened to
clear by 2px -- its 92px section rhythm against 90px of chrome -- which is a
coincidence, not a margin, and it looked cramped because it effectively was.

#banner is the one exclusion: the homepage pulls it up under the chrome on
purpose so the hero photo runs full-bleed behind the translucent header.
*/
#header + *:not(#banner) {
    padding-top: calc(var(--utility-h) + var(--header-h) + 30px);
}