/*
 * Small performance-oriented layout stabilizers.
 * Keeps late-loading third-party widgets from shifting the page.
 */

header.header .banner {
  min-height: 60px;
}

/* Match the desktop navigation's 100px inner layout so its controls and
 * shadow remain inside the header instead of crossing the bottom edge. */
header.header .navigation {
  min-height: 100px;
}

/* Mobile keeps an immediate backdrop change. The desktop return to the
 * light nav fades below, after the full-height backdrop is established. */
body header.header .navigation::before {
  transition: none;
}

/* Transparent page templates previously split the desktop nav's 100px
 * footprint between a 60px box and a 40px margin. Keep the same footprint,
 * but place the full nav inside the box so its contents are not clipped. */
@media screen and (min-width: 1081px) {
  /* Both desktop states use the same footprint. This prevents a white strip
   * below the dark background and keeps scroll anchoring stable at the switch. */
  body header.header .navigation::before {
    height: 100px;
    transition: background-color 400ms ease;
  }

  body header.header.dark .navigation::before {
    transition: none;
  }

  /* Use CHOQ burgundy for the translucent scrolling nav on standard pages. */
  body:not(.transparent-nav) header.header.dark .navigation::before {
    background-color: rgba(40, 1, 8, .85);
  }

  /* Standard pages need an opaque light backdrop so content scrolling
   * underneath cannot show through the navigation. */
  body:not(.transparent-nav) header.header:not(.dark) .navigation::before {
    background-color: #fff;
  }

  header.header.dark .navigation .nav-holder {
    height: 100px;
  }

  body.page-template-obsidian.transparent-nav header.header .navigation {
    height: 100px;
    min-height: 100px;
    margin-bottom: 0;
  }

  body.page-template-obsidian.transparent-nav header.header.dark .navigation {
    height: 100px;
    min-height: 100px;
    margin-bottom: 0;
  }

  /* Keep the white parent and submenu on the same fade. Switch the parent
   * label immediately, with a light edge to keep it readable during the fade. */
  body.page-template-obsidian.transparent-nav header.header .navigation .nav-frame .menu-obsidian-primary-container > ul > li.menu-item-has-children::before,
  body.page-template-obsidian.transparent-nav header.header .navigation .nav-frame .menu-obsidian-primary-container > ul > li.menu-item-has-children > a,
  body.page-template-obsidian.transparent-nav header.header .navigation .nav-frame .menu-obsidian-primary-container > ul > li.menu-item-has-children > ul {
    transition: none;
  }

  body.page-template-obsidian.transparent-nav header.header .navigation .nav-frame .menu-obsidian-primary-container > ul > li.menu-item-has-children:hover::before,
  body.page-template-obsidian.transparent-nav header.header .navigation .nav-frame .menu-obsidian-primary-container > ul > li.menu-item-has-children:hover > ul {
    transition: opacity 400ms linear;
  }

  body.page-template-obsidian.transparent-nav header.header .navigation .nav-frame .menu-obsidian-primary-container > ul > li.menu-item-has-children:hover > a {
    text-shadow: 0 0 3px rgba(255, 255, 255, .9);
  }
}

/* A downward scroll should clear the entire header before content moves
 * underneath it. Keep the slide-in transition on upward scrolls. */
header.header.nav-hiding {
  transition: background-color .3s;
}

@media screen and (max-width: 1080px) {
  header.header .navigation {
    min-height: 60px;
  }
}

body.home .trustpilot-widget {
  display: block;
  min-height: 140px;
  overflow: hidden;
  width: 100%;
}

body.home .trustpilot-widget iframe {
  display: block;
  width: 100%;
  min-height: 140px;
}

/* WooCommerce defaults this gap to 2em. Increase it by 50% before the
 * product-page Trustpilot slider. */
body.single-product.woocommerce div.product .woocommerce-tabs .panel {
  margin-bottom: 3em;
}

body.single-product .trustpilot-widget {
  display: block;
  min-height: 240px;
  overflow: hidden;
  width: 100%;
}

body.single-product .trustpilot-widget iframe {
  display: block;
  width: 100%;
  min-height: 240px;
}

body.home #chat-widget-container,
body.home .proofNotificationWrapper {
  contain: layout paint;
}

/*
 * Fix: bundled products render stray absolutely-positioned item boxes that
 * overflow the product column, causing a horizontal scrollbar / white gutter
 * on single product pages. Clip horizontal overflow at the product wrapper.
 */
.single-product .et_pb_post.product {
  overflow-x: clip;
}

/*
 * Products not built with the Divi builder lack the .et_pb_post class, so the
 * rule above misses them and the bundle boxes overflow. The obsidian summary
 * wrapper is present on all single-product pages, so clip there to cover both.
 */
.single-product .summary-wrapper {
  overflow-x: clip;
}

/* Keep each product gallery visible while its taller summary scrolls beside it. */
@media (min-width: 1001px) {
  .single-product.woocommerce
    div.product
    .summary-wrapper
    .inner
    > .woocommerce-product-gallery {
    align-self: flex-start;
    position: sticky;
    /* Clear the 60px navigation used below the desktop breakpoint. */
    top: 84px;
  }
}

@media (min-width: 1081px) {
  .single-product.woocommerce
    div.product
    .summary-wrapper
    .inner
    > .woocommerce-product-gallery {
    /* Clear the 100px desktop navigation and retain 24px of page spacing. */
    top: 124px;
  }
}