/* ==========================================================================
   Checkout header (Point CHECKOUT-HDR)
   ==========================================================================

   Migrated out of the Customizer's "Additional CSS" field, which lives only in
   the database: not in git, not deployed by pushing code, and installed only by
   running a per-feature script on each target. That is why five unrelated
   features silently reverted on www.mmspecs.com - the PHP that depends on this
   CSS shipped, and the CSS did not. See CLAUDE.md, "Site CSS lives in git".

   Edit these files, commit, push. There is no install step.
   ========================================================================== */

/* Point CHECKOUT-HDR - checkout header logo/divider spacing.
   The CartFlows instant-checkout template renders its own header
   (.main-header--wrapper) with the divider as a border-bottom - Astra's
   header spacing does not apply to it, which is why it looked cramped
   next to the homepage.
   1. .custom-logo-link was display:inline, so the 54px logo sat on a text
      baseline inside a shorter line box and overflowed BELOW it - measured
      2px past the divider on desktop and 7px on tablet/mobile, i.e. the
      logo was crossing the line. Making the link and the image blocks lets
      the link's box hug the image. The link stays full-cell-width, so the
      image's own width rules (CartFlows uses width:100%/max-width:45%
      under 1024px) still resolve exactly as before - the logo is NOT
      resized.
   2. Vertical padding was 0.704rem (~11px) against the site header's 36px.
      Matched to the homepage, which measures 36px above / 37px below the
      logo on desktop and 35/36 on tablet and mobile.
   Horizontal padding is left alone - CartFlows sets its own (2.4rem) below
   1024px, and these longhand properties don't disturb it. */

/* The logo image is inline, so it sat on the text baseline and the line box's
   descender space pushed it below its own container - it overflowed 2px past
   the divider on desktop and 7px on tablet/mobile. vertical-align:top drops
   that descender space so the line box is exactly the image's height.
   Deliberately NOT done by making the link a block or shrink-wrapping it:
   CartFlows sizes this image as width:100%/max-width:45% of the 130px logo
   span, so changing any box in that chain resizes the logo (measured: it fell
   from 59px to 24px on mobile). Leaving the link inline also keeps its focus
   ring hugging the logo, exactly as the site header's inline logo link does -
   as a block it filled the whole 130px cell and the ring was drawn across the
   empty space beside the logo. */
body.cartflows-instant-checkout .main-header--content .main-header--site-logo .custom-logo-link img {
	vertical-align: top;
}

/* CartFlows' header template writes an inline `height:40px` on this span from
   its own logo-height setting, but the logo image renders 54px tall (it is
   nearly square, and the image is not constrained to the span). The image
   therefore hung 14px below its own container, straight onto the divider.
   height:auto lets the container wrap the image it actually contains - the
   image itself is untouched and still renders at exactly the same size as on
   the homepage. !important is required only because the 40px is inline. */
body.cartflows-instant-checkout .main-header--content .main-header--site-logo {
	height: auto !important;
}
body.cartflows-instant-checkout .main-header--content {
	padding-top: 36px;
	padding-bottom: 36px;
}