/**
 *
 *   Header offset
 *   =============
 *
 *   The header is position: fixed, so the page content reserves room for it
 *   with a top padding: 180px on .content-main (Customizer CSS; 160px in
 *   theme.content.css), 160px on the shop/category hero, 165px on the product
 *   container. The header is not that height everywhere: when the main menu
 *   wraps to two lines (around 1366px) it is ~215px, at 1920px ~175px. The
 *   page title, breadcrumbs or first image then sat partly under it.
 *
 *   A script right after the header in header.php stores the header's real
 *   height in --nvm-header-height. Each offset becomes the larger of its old
 *   value and that height, so pages only ever move down, and only where the
 *   header is taller than the room left for it. On phones and tablets the
 *   header (~155px) is shorter than all three values, so nothing changes
 *   there. Without the script the old values apply unchanged.
 *
 *   Pages that set their own offset with a more specific rule (single posts,
 *   page-id rules) keep it: body .content-main loses to those.
 *
 */

body .content-main {
	padding-top: max(180px, var(--nvm-header-height, 0px) + 2px);
}

/* style.css sets this one with !important. The breadcrumb box below it has
   15px of top padding of its own, so the hero only needs header - 15px. */
body .category-hero {
	padding-top: max(160px, var(--nvm-header-height, 0px) - 15px) !important;
}

body .woocommerce-container {
	padding-top: max(165px, var(--nvm-header-height, 0px));
}