/**
 * Phase 3.12b — Variant B: Gas hybrid (bright hero + white body + dark accents)
 * body.hh-catalog-showcase.hh-showcase-v-b
 */

body.hh-catalog-showcase.hh-showcase-v-b {
	/* overflow on body breaks header sticky — clip is on .elementor-location-single */
	--hh-bg: #f7f5f0;
	--hh-white: #ffffff;
	--hh-ink: #0d1117;
	--hh-graphite: #171a1f;
	--hh-navy: #061d33;
	--hh-navy-2: #0b2a45;
	--hh-steel: #66707c;
	--hh-line: #dde1e5;
	--hh-surface-cool: #f1f0ec;
	--hh-bronze: #a88b5b;
	--hh-ember: #d8662a;
	--hh-ember-deep: #9e3e1f;
	background: var(--hh-bg);
	color: var(--hh-ink);
}

body.hh-showcase-v-b .elementor-widget-heading .elementor-heading-title {
	color: var(--hh-ink);
}

body.hh-showcase-v-b .elementor-widget-text-editor {
	color: var(--hh-steel);
}

/* Hero — brighter image, lighter gradient feel */
body.hh-showcase-v-b [data-id="hhHeroFull"] {
	min-height: 70vh;
	position: relative;
}

body.hh-showcase-v-b [data-id="hhHeroFull"]::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: linear-gradient(
		105deg,
		rgba(247, 245, 240, 0.18) 0%,
		rgba(216, 102, 42, 0.1) 28%,
		rgba(26, 21, 18, 0.22) 55%,
		rgba(6, 29, 51, 0.42) 100%
	);
}

body.hh-showcase-v-b .hh-hero-bubble-wrap {
	position: relative;
	z-index: 2;
	width: 100%;
}

body.hh-showcase-v-b .hh-hero-bubble,
body.hh-showcase-v-b .hh-hero-bubble--premium {
	background: linear-gradient(
		145deg,
		rgba(255, 255, 255, 0.97) 0%,
		rgba(244, 246, 248, 0.92) 55%,
		rgba(255, 255, 255, 0.88) 100%
	);
	backdrop-filter: blur(18px) saturate(1.1);
	-webkit-backdrop-filter: blur(18px) saturate(1.1);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-inline-start: 4px solid var(--hh-ember, #d8662a);
	box-shadow:
		0 28px 72px rgba(6, 29, 51, 0.22),
		0 0 0 1px rgba(168, 139, 91, 0.1);
	border-radius: 4px;
}

body.hh-showcase-v-b .hh-hero-bubble .elementor-heading-title {
	color: var(--hh-ink) !important;
	text-shadow: none;
	line-height: 1.15;
}

body.hh-showcase-v-b .hh-hero-bubble .elementor-widget-text-editor {
	color: var(--hh-steel) !important;
}

body.hh-showcase-v-b .hh-hero-bubble .elementor-button {
	border-radius: 2px !important;
}

/* Dark accent band — keeps black in the layout */
body.hh-showcase-v-b [data-id="hhTrust"] {
	background: var(--hh-graphite) !important;
	border-block: 1px solid #2a3038;
}

body.hh-showcase-v-b [data-id="hhTrust"] .elementor-widget-text-editor {
	color: #c5cad0 !important;
}

/* Category tiles — light cards */
body.hh-showcase-v-b .hh-cat-tile {
	border: 1px solid var(--hh-line);
	border-radius: 2px;
	background: var(--hh-white);
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(13, 17, 23, 0.04);
}

body.hh-showcase-v-b .hh-cat-tile:hover {
	border-color: var(--hh-bronze);
	box-shadow: 0 8px 24px rgba(13, 17, 23, 0.08);
}

body.hh-showcase-v-b .hh-cat-tile {
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.hh-showcase-v-b .hh-cat-tile a {
	text-decoration: none;
}

/* Guide hub cards — blog posts with featured image */
body.hh-showcase-v-b .hh-guide-card .elementor-widget-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	display: block;
}

body.hh-showcase-v-b .hh-guide-card .hh-cat-tile__body {
	padding-block-start: 1rem !important;
}

body.hh-showcase-v-b .hh-guide-card .hh-cat-tile__body .elementor-heading-title {
	font-size: 1.15rem !important;
	line-height: 1.3;
}

body.hh-showcase-v-b .hh-guide-card .elementor-widget-text-editor p {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--hh-steel);
}

/* Single guide article (blog post) */
body.hh-showcase-v-b.single-post .entry-content,
body.hh-showcase-v-b.single-post .post-content {
	max-width: 720px;
	margin-inline: auto;
	padding: 2rem 1.5rem 4rem;
	color: var(--hh-ink);
	line-height: 1.75;
}

body.hh-showcase-v-b.single-post .entry-content h2,
body.hh-showcase-v-b.single-post .entry-content h3 {
	color: var(--hh-navy);
	margin-block: 2rem 1rem;
}

body.hh-showcase-v-b.single-post .entry-content .hh-guide-callout--safety {
	background: var(--hh-surface-cool);
	border-inline-start: 3px solid var(--hh-bronze);
	padding: 1rem 1.25rem;
	margin-block: 2rem;
}

/* Guide tables — prevent white-on-grey in Elementor entry-content */
body.hh-showcase-v-b.single-post .hh-post-article table thead th,
body.hh-showcase-v-b.single-post .entry-content table thead th {
	background: #061d33 !important;
	color: #fff !important;
}

body.hh-showcase-v-b.single-post .hh-post-article table tbody th,
body.hh-showcase-v-b.single-post .entry-content table tbody th {
	background: #f4f6f8 !important;
	color: #061d33 !important;
}

body.hh-showcase-v-b.single-post .hh-post-article table tbody td,
body.hh-showcase-v-b.single-post .entry-content table tbody td {
	color: #0d1117 !important;
	background: #fff;
}

body.hh-showcase-v-b.single-post .hh-post-end-cta,
body.hh-showcase-v-b.single-post .hh-post-end-cta__title,
body.hh-showcase-v-b.single-post .hh-post-end-cta__text {
	color: #fff !important;
}

body.hh-showcase-v-b.single-post .hh-post-end-cta__text {
	color: rgba(255, 255, 255, 0.92) !important;
}

body.hh-showcase-v-b.single-post .post-categories a,
body.hh-showcase-v-b.single-post .post-tags a {
	color: var(--hh-navy);
	font-size: 0.82rem;
	text-decoration: none;
	border: 1px solid var(--hh-line);
	padding: 0.2rem 0.55rem;
	border-radius: 2px;
	margin-inline: 0.25rem;
}

/* Blog cards → see hh-cards.css (.hh-unified-cards) */

/* Single post — Elementor theme builder */
body.hh-showcase-v-b.hh-single-post .hh-e-single-post .hh-post-featured img {
	width: 100%;
	border-radius: 2px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

body.hh-showcase-v-b.hh-single-post .hh-post-content {
	color: var(--hh-ink);
	line-height: 1.75;
}

body.hh-showcase-v-b.hh-single-post .hh-post-content h2,
body.hh-showcase-v-b.hh-single-post .hh-post-content h3 {
	color: var(--hh-navy);
	margin-block: 2rem 1rem;
}

/* Single product — reuse bubble tokens */
body.hh-showcase-v-b.hh-product-premium .hh-product-hero-bubble .elementor-heading-title,
body.hh-showcase-v-b.hh-product-premium .hh-product-hero-bubble .hh-product-title {
	color: var(--hh-ink) !important;
}

body.hh-showcase-v-b.hh-product-premium .hh-product-hero-bubble .hh-badge {
	background: var(--hh-white);
	border: 1px solid var(--hh-line);
}

body.hh-showcase-v-b .hh-cat-tile .elementor-widget-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

body.hh-showcase-v-b .hh-cat-tile__body .elementor-heading-title {
	color: var(--hh-ink) !important;
}

body.hh-showcase-v-b .hh-e-category-grid {
	justify-content: center !important;
	max-width: 1140px;
	margin-inline: auto;
}

/* Product cards — white on light sections */
body.hh-showcase-v-b .elementor-widget-woocommerce-products li.product {
	background: var(--hh-white);
	border: 1px solid var(--hh-line);
	border-radius: 2px;
	box-shadow: 0 2px 10px rgba(13, 17, 23, 0.04) !important;
}

body.hh-showcase-v-b .elementor-widget-woocommerce-products .woocommerce-loop-product__title {
	color: var(--hh-ink) !important;
}

body.hh-showcase-v-b .elementor-widget-woocommerce-products a.button {
	background: var(--hh-navy) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 2px !important;
	font-size: 0.82rem;
}

body.hh-showcase-v-b:not(.hh-heating-service-hub) .elementor-widget-woocommerce-products .price,
body.hh-showcase-v-b:not(.hh-heating-service-hub) .elementor-widget-woocommerce-products .star-rating {
	display: none !important;
}

/* End CTA — navy (dark anchor) */
body.hh-showcase-v-b [data-id="hhCtaEnd"] {
	background: var(--hh-navy) !important;
}

body.hh-showcase-v-b [data-id="hhCtaEnd"] .elementor-heading-title {
	color: #fff !important;
}

/* Enrichment band — deep navy after products */
body.hh-showcase-v-b [data-id="hhEnrichBenefits"],
body.hh-showcase-v-b .hh-enrich-band {
	background: linear-gradient(180deg, #061d33 0%, #0b2a45 100%) !important;
}

body.hh-showcase-v-b [data-id="hhEnrichBenefits"] .elementor-heading-title {
	color: #fff !important;
}

body.hh-showcase-v-b [data-id="hhEnrichBenefits"] .elementor-widget-text-editor,
body.hh-showcase-v-b .hh-enrich-band__lead {
	color: #c5cad0 !important;
}

body.hh-showcase-v-b .hh-enrich-band .hh-icon-card {
	background: #fff;
	border-color: rgba(255, 255, 255, 0.12);
	animation: hhCardIn 0.55s ease both;
}

body.hh-showcase-v-b .hh-enrich-band .hh-icon-card:nth-child(1) { animation-delay: 0.05s; }
body.hh-showcase-v-b .hh-enrich-band .hh-icon-card:nth-child(2) { animation-delay: 0.12s; }
body.hh-showcase-v-b .hh-enrich-band .hh-icon-card:nth-child(3) { animation-delay: 0.19s; }
body.hh-showcase-v-b .hh-enrich-band .hh-icon-card:nth-child(4) { animation-delay: 0.26s; }

@keyframes hhCardIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Product section — tighter top spacing when right after categories */
body.hh-showcase-v-b [data-id^="hhProducts"] {
	scroll-margin-top: 5rem;
}

@media (max-width: 768px) {
	body.hh-showcase-v-b [data-id="hhHeroFull"] {
		min-height: 58vh;
	}

	body.hh-showcase-v-b .hh-hero-bubble {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.hh-showcase-v-b .hh-hero-bubble-wrap {
		padding-inline: 1.25rem !important;
		padding-block-end: 2rem !important;
	}
}
