/* ==========================================================================
   HIMPEL Product hero — the product name on a primary band
   --------------------------------------------------------------------------
   The opening section of the single-product template. Everything is scoped
   under .himpel-phero; nothing here targets the theme, WooCommerce, or any
   global element.

   Every measurement is a custom property with a fallback, so one stylesheet
   serves every instance and the shortcode only has to write the values that
   differ from the design.
   ========================================================================== */

.himpel-phero {
	--himpel-primary: #0b7347;
	--himpel-primary-dark: #095c39;
	--himpel-secondary: #f3f4ea;
	--himpel-white: #ffffff;
	--himpel-dark: #121212;

	position: relative;
	z-index: 2;
	width: auto;

	/*
	 * The band runs the full width of the page while the heading inside it
	 * stays boxed — the same arrangement as every other section here, so the
	 * colour never stops short of the window edge on a wide screen.
	 *
	 * On a WooCommerce product page the section is handed to the theme inside
	 * its own content container, which is narrower than the window, so the
	 * script measures the distance to each edge and writes it here as a
	 * negative margin. Where the section already spans the window — a
	 * full-width Elementor section — both values stay 0 and nothing moves.
	 *
	 * The measurement uses the document's client width, which excludes the
	 * scrollbar; 100vw would include it and push the page sideways by its
	 * width.
	 */
	margin-left: var(--himpel-bleed-l, 0px);
	margin-right: var(--himpel-bleed-r, 0px);

	background-color: var(--hph-bg, var(--himpel-primary));
	box-sizing: border-box;
}

.himpel-phero *,
.himpel-phero *::before,
.himpel-phero *::after {
	box-sizing: border-box;
}

.himpel-phero__inner {
	width: 100%;
	max-width: var(--hph-max, 1340px);
	margin: 0 auto;
	padding: var(--hph-py-d, 80px) var(--hph-px-d, 40px);
}

.himpel-phero--center .himpel-phero__inner {
	text-align: center;
}

/* ==========================================================================
   The heading
   ========================================================================== */

.himpel-phero__title {
	margin: 0;
	color: var(--hph-title-color, var(--himpel-white));

	font-size: var(--hph-title-d, 54px);
	line-height: 1.14;
	letter-spacing: -0.01em;

	/*
	 * A ceiling on the line, not a width. Typical product names sit well
	 * inside it and stay on one line; a long one wraps rather than running the
	 * full 1260px of the box, which is far more than the eye tracks
	 * comfortably in a single line of 54px type. Set title_width="none" to
	 * let it run to the full width.
	 */
	max-width: var(--hph-title-mw, 900px);

	/*
	 * Model numbers and hyphenated names have no break opportunity of their
	 * own, and one long enough would otherwise push the page sideways at
	 * 390px. This lets the browser break inside a word only when it has to.
	 */
	overflow-wrap: break-word;
}

.himpel-phero--center .himpel-phero__title {
	margin-left: auto;
	margin-right: auto;
}

.himpel-phero--left .himpel-phero__title {
	margin-right: auto;
}

/*
 * The optional || break in a title. Honoured from tablet up, ignored on
 * mobile, where the line is short enough that an author's break almost always
 * lands in the wrong place.
 */
@media (max-width: 767px) {
	.himpel-phero__br {
		display: none;
	}
}

/* ==========================================================================
   Animation
   --------------------------------------------------------------------------
   .is-revealing is printed server-side, so the pre-animation state exists in
   the first paint rather than being applied by script a frame later — that
   gap is what shows as a flash of the finished heading.

   The words themselves are wrapped by the script. Until it runs there is
   nothing to clip, so these rules cost nothing when it does not.
   ========================================================================== */

.himpel-phero.is-revealing .himpel-phero__title {
	opacity: 0;
}

/*
 * Each word gets a clipping box and an inner span that slides up inside it,
 * so the line appears to rise out of the band rather than fading in place.
 *
 * overflow: hidden would cut the descenders off a word like "Dehumidifier",
 * hence the padding that adds room below the baseline and the equal negative
 * margin that takes that room back out of the layout.
 */
.himpel-phero__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
}

.himpel-phero__word-in {
	display: inline-block;
	will-change: transform;
}

/*
 * A reader who has asked for less motion still needs to see the heading. The
 * script honours the same preference and skips straight to the end state; this
 * covers the case where it never runs at all.
 */
@media (prefers-reduced-motion: reduce) {
	.himpel-phero.is-revealing .himpel-phero__title {
		opacity: 1;
	}
}

/* ==========================================================================
   Editor notice — only ever seen by an administrator
   ========================================================================== */

.himpel-phero__notice {
	margin: 0;
	padding: 16px 20px;
	border: 1px dashed #b9c2bd;
	border-radius: 8px;
	background-color: #f6f7f5;
	color: #55605a;
	font-size: 14px;
	line-height: 1.5;
}

/* ==========================================================================
   Responsive — breakpoints mirror Elementor's defaults
   ========================================================================== */

/* --- Tablet: up to 1024px --- */
@media (max-width: 1024px) {
	.himpel-phero__inner {
		padding: var(--hph-py-t, 60px) var(--hph-px-t, 20px);
	}

	.himpel-phero__title {
		font-size: var(--hph-title-t, 40px);
	}
}

/* --- Mobile: up to 767px --- */
@media (max-width: 767px) {
	.himpel-phero__inner {
		padding: var(--hph-py-m, 40px) var(--hph-px-m, 15px);
	}

	.himpel-phero__title {
		font-size: var(--hph-title-m, 30px);
		line-height: 1.2;

		/* The measure is doing nothing at this width — the screen is narrower. */
		max-width: none;
	}
}