/**
 * Single product pages (template-parts/eenergy-product-single.php), M8.
 *
 * Loaded on the fires, heatpumps and wood_fires single pages only. Moved from
 * the style elements the three single templates (and the contact-us section
 * snippet) printed in the page body, which isn't valid there. The featured
 * image is now set in the element's style attribute, and its flip is a class.
 */

/* stylelint-disable selector-class-pattern -- the templates' existing class names; M8 does not rename classes. */

.product-top__image {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background-position: center right;
	background-repeat: no-repeat;
	background-size: cover;
	transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
	margin-top: 0;
	margin-bottom: 0;
	padding: 100px 0 140px;
}

.product-top__image--flipped {
	transform: rotateY(180deg);
}

.product__cta-button {
	float: left;
	margin-right: 1vw;
}

.feature__icon-figure {
	margin: 0 1rem 1rem;
	display: inline-block;
	vertical-align: middle;
	margin-block: 1em;
}

/* Was a <p> inside <small> (not allowed there). Undo the site's
   .product_info_box span rules so it looks as the <p> did. */
.product_info_box .product-info__text {
	display: block;
	max-width: none;
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	vertical-align: baseline;
}

.snd_btn {
	padding: 0 10px;
}

/* A spec with no image used to print <img src=""> (not valid), which still took
   one empty 24px line above the title; keep that space. */
.specs_boxes--no-image::before {
	content: "";
	display: block;
	height: 24px;
}

/* AUD-10: the product name is now the H1 (was an H2 in .about_section), spec
   titles H2 (were H4s); each keeps its old look. Related products: eenergy-templates.css. */
.product_top .eenergy-product__title {
	margin: 0 0 20px;
	color: #000;
	font-family: Rubik, sans-serif;
	font-size: 3rem;
	font-weight: 500;
	line-height: 1.2;
}

.product_specs .specs_boxes .eenergy-spec__title {
	margin: 20px 0;
	color: #1a1a1a;
	font-family: Poppins, sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
}

/* Contact-us section (eenergy_the_contact_section(), wood fire pages). */
.contact-us__section-outer {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.contact-us__title,
.contact-us__text {
	color: inherit;
	text-shadow: inherit;
}