/* henssgenhardware.com: reserve the space Divi fills in late (review item D10, Matt Tanner approved on ClickUp 86bcvdq31, 2026-10-30).
   Measured on the live store 2026-11-02. Every rule starts a part where Divi's own script puts it, so the final layout is unchanged. */
/* --- A1. Header position. Divi's script moves the dark header to sit right under the 31px orange top bar
   (inline style "top: 31px"). Until the script runs, Divi's CSS puts it at 30px (58px on phones: the
   "two panels" rule), so it jumps up 27px on phones. Start it where the script will put it; the script's
   inline value still wins, so the final position is unchanged. Logged-in admin-bar rules are more specific
   and keep their own offsets. */
html body.et_fixed_nav.et_secondary_nav_enabled #main-header,
html body.et_fixed_nav.et_secondary_nav_two_panels #main-header { top: 31px; }

/* --- A2. Menu left padding. Divi's script sets padding-left = logo width + 30px on #et-top-navigation, and a
   0.4s transition animates it from 0, so the menu box moves in 4-5 steps (0.004-0.013 each). Start at the
   final value (logo 155px wide from 1281px up, 95px on phones and tablets). The script's inline value wins. */
@media only screen and (max-width: 980px) {
  html body.et_header_style_left #et-top-navigation { padding-left: 125px; }
}
@media only screen and (min-width: 1281px) {
  html body.et_header_style_left #et-top-navigation { padding-left: 185px; }
}

/* --- B1. Room under the see-through header, Theme Builder pages (shop, every product, every category).
   Divi's script (et_fix_page_container_position) adds the header height (110px on phones and tablets, 139px
   from 1281px up) to the first section's own top padding, after Rocket Loader lets it run: everything jumps
   down 110-139px (0.09-0.12 each load). The script reads the current padding and ADDS to it, so a plain CSS
   reservation would be doubled; these are the script's own final values (template padding + header), fixed
   with !important so the script's inline value is ignored. Below 390px the top bar wraps to 44px and the
   script's value is 13px larger, so those phones are left to the script (unchanged from today). */
@media only screen and (min-width: 390px) and (max-width: 767px) {
  html body.page-id-6446.et_transparent_nav .et-l--body .et_pb_section_0_tb_body { padding-top: 140px !important; }
  html body.single-product.et_transparent_nav .et-l--body .et_pb_section_0_tb_body { padding-top: 180px !important; }
  html body.tax-product_cat.et_transparent_nav .et-l--body .et_pb_section_0_tb_body { padding-top: 180px !important; }
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
  html body.page-id-6446.et_transparent_nav .et-l--body .et_pb_section_0_tb_body { padding-top: 140px !important; }
  html body.single-product.et_transparent_nav .et-l--body .et_pb_section_0_tb_body { padding-top: 210px !important; }
  html body.tax-product_cat.et_transparent_nav .et-l--body .et_pb_section_0_tb_body { padding-top: 210px !important; }
}
@media only screen and (min-width: 1281px) {
  html body.page-id-6446.et_transparent_nav .et-l--body .et_pb_section_0_tb_body { padding-top: 169px !important; }
  html body.single-product.et_transparent_nav .et-l--body .et_pb_section_0_tb_body { padding-top: 379px !important; }
  html body.tax-product_cat.et_transparent_nav .et-l--body .et_pb_section_0_tb_body { padding-top: 222px !important; }
}

/* --- B2. Same room on pages without a Divi layout (blog list, contact). Here the script SETS the value
   (header + top bar + 58px) on "#main-content .container:first-child" instead of adding to it, so a plain
   reservation equal to it is safe: the script's inline value still wins and is the same number. Scoped to
   the two measured pages. */
@media only screen and (max-width: 980px) {
  html body.blog.et_transparent_nav #main-content .container:first-child,
  html body.page-id-1156.et_transparent_nav #main-content .container:first-child { padding-top: 168px; }
}
@media only screen and (min-width: 1281px) {
  html body.blog.et_transparent_nav #main-content .container:first-child,
  html body.page-id-1156.et_transparent_nav #main-content .container:first-child { padding-top: 197px; }
}

/* --- C. Lazy pictures in Divi image modules. Divi gives these images "width: auto" (for example
   .et_pb_image_0 .et_pb_image_wrap img, and the footer logos). While WP Rocket's placeholder is showing (an SVG
   with a viewBox but no size), and again while the real file is still downloading, the picture has no width, so
   it is 0px tall and jumps to full height when the file arrives: 0.23 on the home page while scrolling on a phone,
   0.01-0.03 in the footer. Until WP Rocket marks the picture loaded, give it the width its own width attribute
   names; max-width:100% and height:auto then size it exactly like the loaded picture (checked: 330x220px on a
   412px phone, as loaded). Once loaded the rule stops matching and nothing changes. attr() with a unit needs
   Chrome 133+; other browsers ignore the line (CLS is only measured in Chrome). */
.et_pb_module .et_pb_image_wrap > img[data-lazy-src][width]:not(.lazyloaded) { width: attr(width px); }