/*
 * Header background variables.
 *
 * Pages and shop archive use the ACF-based header color.
 * Single products inherit the product background color.
 */
body.page {
  --active-header-bg: var(--header-background-color, transparent);
}

body.post-type-archive-product {
  --active-header-bg: var(--header-background-color, transparent);
}

body.single-product {
  --active-header-bg: var(--product-background-color, transparent);
}

body.page header.ct-header,
body.post-type-archive-product header.ct-header,
body.single-product header.ct-header {
  background-color: var(--active-header-bg);
}

/*
 * Extend the header background to the first hook block below
 * the header to maintain visual continuity.
 */
body.page header.ct-header + [data-block^="hook:"],
body.post-type-archive-product header.ct-header + [data-block^="hook:"],
body.single-product header.ct-header + [data-block^="hook:"] {
  background-color: var(--active-header-bg);
}

/*
 * Remove top content spacing when a page-specific header color is active.
 * This keeps the content area visually attached to the colored header.
 */
body.page.has-header-dynamic-colors [data-vertical-spacing*="top"],
body.post-type-archive-product.has-header-dynamic-colors [data-vertical-spacing*="top"] {
  padding-top: 0;
}