/* BUILD 8.1.1 — Header contrast contexts
 * The global header is designed white-on-dark for cinematic hero pages.
 * Commerce utility pages begin on a light surface, so they receive a solid
 * JOHN IAN green header from the first paint to preserve contrast.
 */
.single-product .ji-header,
.woocommerce-cart .ji-header,
.woocommerce-checkout .ji-header,
.woocommerce-account .ji-header,
.woocommerce-order-received .ji-header,
.search-results .ji-header,
.search-no-results .ji-header,
.error404 .ji-header {
  background: rgba(19, 28, 17, .98);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.single-product .ji-header .ji-logo,
.single-product .ji-header .ji-nav,
.single-product .ji-header .ji-circle,
.single-product .ji-header .ji-toggle,
.woocommerce-cart .ji-header .ji-logo,
.woocommerce-cart .ji-header .ji-nav,
.woocommerce-cart .ji-header .ji-circle,
.woocommerce-cart .ji-header .ji-toggle,
.woocommerce-checkout .ji-header .ji-logo,
.woocommerce-checkout .ji-header .ji-nav,
.woocommerce-checkout .ji-header .ji-circle,
.woocommerce-checkout .ji-header .ji-toggle,
.woocommerce-account .ji-header .ji-logo,
.woocommerce-account .ji-header .ji-nav,
.woocommerce-account .ji-header .ji-circle,
.woocommerce-account .ji-header .ji-toggle {
  color: var(--white);
}

/* Prevent light-page content from visually colliding with the fixed header. */
.single-product main#main,
.woocommerce-cart main#main,
.woocommerce-checkout main#main,
.woocommerce-account main#main,
.woocommerce-order-received main#main {
  padding-top: 86px;
}

@media (max-width: 640px) {
  .single-product main#main,
  .woocommerce-cart main#main,
  .woocommerce-checkout main#main,
  .woocommerce-account main#main,
  .woocommerce-order-received main#main {
    padding-top: 72px;
  }
}