/* ==========================================================================
   HIMPEL Product detail — images on the left, the product's copy on the right
   --------------------------------------------------------------------------
   Everything is scoped under .himpel-pdetail. Nothing here targets the theme,
   WooCommerce, or any global element.
   ========================================================================== */

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

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

	/*
	 * Written by himpel-bleed.js when a theme container holds this section, so
	 * the band still reaches both window edges. Zero everywhere else.
	 */
	margin-left: var(--himpel-bleed-l, 0px);
	margin-right: var(--himpel-bleed-r, 0px);

	background-color: var(--hpd-bg, var(--himpel-white));
	box-sizing: border-box;
}

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

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

/*
 * minmax(0, …) on both tracks rather than a bare fraction: a grid track's
 * automatic minimum is the size of its content, so one long unbroken word in
 * the copy — a model number, a URL — would widen the column past its share and
 * push the images out of the section.
 */
.himpel-pdetail__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--hpd-col, 1.06fr)) minmax(0, 1fr);
	gap: var(--hpd-gap, 60px);

	/*
	 * Both columns start at the top. Centred, the picture drifted up or down
	 * with the length of the copy beside it — a product with a long description
	 * and three certifications sat differently from one with two lines, and
	 * neither lined up with the heading.
	 */
	align-items: start;
}

/* ==========================================================================
   Left — the image panel
   ========================================================================== */

.himpel-pdetail__panel {
	position: relative;
	border-radius: var(--hpd-radius, 24px);
	background-color: var(--hpd-panel-bg, #edf4ef);

	/*
	 * A ratio rather than a height. The panel then keeps the same shape at
	 * every width, and the photographs — which vary in proportion — all sit in
	 * an identically sized frame instead of making the row jump as the reader
	 * clicks between them.
	 */
	aspect-ratio: var(--hpd-panel-ratio, 1.06) / 1;
	overflow: hidden;
}

/* --- The stack of full-size images --- */

/*
 * No padding here. This element only exists to be the containing block for the
 * frames, and an absolutely positioned child is offset from its containing
 * block's padding box — padding on both would inset the images twice over.
 */
.himpel-pdetail__frames {
	position: absolute;
	inset: 0;
}

/*
 * Every image is in the DOM and stacked; switching swaps which one is visible.
 * Loading them into an existing box means no layout shift and no flash of empty
 * panel when the reader picks a thumbnail.
 */
.himpel-pdetail__frame {
	position: absolute;
	inset: var(--hpd-frame-pad, 40px);
	display: flex;
	align-items: center;
	justify-content: center;

	/*
	 * The rail floats over the panel, so the picture has to start to the right
	 * of it. A product here carries seven images, and the rail runs most of the
	 * panel's height at that count — a centred image would sit behind it.
	 *
	 * The reserve is only taken when there is a rail to clear; a product with a
	 * single image gets the whole panel.
	 */
	left: calc(
		var(--hpd-thumbs-inset, 20px) * 2 + var(--hpd-thumb, 62px)
	);

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.himpel-pdetail__frame.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s ease, visibility 0s;
}

.himpel-pdetail--single-image .himpel-pdetail__frame {
	left: var(--hpd-frame-pad, 40px);
}

/*
 * cover on the pictures, as asked: whatever is uploaded fills its box rather
 * than sitting in a band of panel colour shaped like the file. The one
 * exception is the certification row further down, which stays contain — a
 * cropped certification mark reads as a broken image, not a design.
 *
 * Every image rule in this file is written twice over — .himpel-pdetail and
 * then the element — for one reason: WooCommerce's stylesheet carries
 * ".woocommerce-page img { height: auto }", and a single class cannot outweigh
 * a class plus an element. On a product page that rule would win, and an image
 * that has not loaded yet computes to nothing at all — the picture and its box
 * both vanish. The extra class is scoped to this section and reaches no image
 * outside it.
 */
.himpel-pdetail .himpel-pdetail__frame-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;

	/*
	 * cover, so whatever is uploaded fills the panel edge to edge rather than
	 * sitting in a band of background with the shape of its own file. An <img>
	 * cannot tile the way a CSS background can, so there is nothing to repeat.
	 */
	object-fit: cover;
	object-position: center;
}

/* --- The thumbnails --- */

.himpel-pdetail__thumbs {
	position: absolute;
	z-index: 2;
	top: var(--hpd-thumbs-inset, 20px);
	left: var(--hpd-thumbs-inset, 20px);

	display: flex;
	flex-direction: column;
	gap: var(--hpd-thumb-gap, 10px);

	/*
	 * A product can carry a dozen gallery images. The rail is capped to the
	 * panel and scrolls inside itself rather than growing past the bottom of
	 * the picture.
	 */
	max-height: calc(100% - var(--hpd-thumbs-inset, 20px) * 2);
	overflow-y: auto;
	scrollbar-width: none;
}

.himpel-pdetail__thumbs::-webkit-scrollbar {
	display: none;
}

.himpel-pdetail__thumb {
	flex: 0 0 auto;
	width: var(--hpd-thumb, 62px);
	height: var(--hpd-thumb, 62px);
	padding: 6px;

	border: 1px solid var(--hpd-thumb-border, rgba(18, 18, 18, 0.1));
	border-radius: var(--hpd-thumb-radius, 12px);
	background-color: var(--himpel-white);

	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;

	/* The theme styles buttons; these three keep it a plain frame. */
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}

.himpel-pdetail__thumb:hover {
	border-color: var(--himpel-primary);
}

/*
 * The selected thumbnail is marked by its border turning green. That is the
 * whole of it — one line, one pixel, the same line the unselected thumbnails
 * already have.
 *
 * Two earlier attempts added a second ring to it: first spread outside the
 * border, then inset within it. Either way the edge came out twice as thick as
 * the border it was meant to be, which is exactly what the eye picks up on.
 * Nothing is drawn here but the colour change.
 */
.himpel-pdetail__thumb.is-active {
	border-color: var(--himpel-primary);
	box-shadow: none;
}

.himpel-pdetail__thumb:focus-visible {
	outline: 2px solid var(--himpel-primary);
	outline-offset: 2px;
}

.himpel-pdetail .himpel-pdetail__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ==========================================================================
   Right — the copy
   ========================================================================== */

.himpel-pdetail__title {
	margin: 0;
	color: var(--hpd-title-color, var(--himpel-dark));
	font-size: var(--hpd-title-d, 30px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

.himpel-pdetail__desc {
	margin-top: var(--hpd-desc-top, 22px);
	color: var(--hpd-text-color, #4f5a55);
	font-size: var(--hpd-text-size, 15px);
	line-height: 1.75;
}

/* The description is editor copy, so it arrives as whatever paragraphs and
   lists were typed. These keep its rhythm without restyling the theme's own
   typography anywhere else on the page. */
.himpel-pdetail__desc > *:first-child {
	margin-top: 0;
}

.himpel-pdetail__desc > *:last-child {
	margin-bottom: 0;
}

.himpel-pdetail__desc p {
	margin: 0 0 1em;
}

.himpel-pdetail__desc ul,
.himpel-pdetail__desc ol {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

.himpel-pdetail__desc li {
	margin-bottom: 0.4em;
}

.himpel-pdetail__desc a {
	color: var(--himpel-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   The manual button
   The home page's button, measure for measure: the same pill, the same 16/32
   padding, the same 34px badge, the same lift on hover. Only the glyph inside
   the badge differs.
   -------------------------------------------------------------------------- */

/*
 * A row, because there can be two: the video and the brochure, side by side.
 * It wraps rather than letting them shrink — a button whose label has been
 * squeezed onto two lines stops looking like the one beside it, and in a
 * column this narrow that is the first thing to go.
 */
.himpel-pdetail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hpd-actions-gap, 14px);
	margin-top: var(--hpd-actions-top, 32px);
}

.himpel-pdetail__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 16px 32px;
	border: 1px solid var(--himpel-primary);
	border-radius: 100px;
	background-color: var(--himpel-primary);

	color: var(--himpel-white);
	/* Inherits the theme's body typography, like the home page's button. */
	font-size: var(--hpd-btn-size, 16px);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	transition: background-color 0.25s ease, color 0.25s ease,
		border-color 0.25s ease, transform 0.25s ease;
}

.himpel-pdetail__btn:hover,
.himpel-pdetail__btn:focus-visible {
	border-color: var(--himpel-primary-dark);
	background-color: var(--himpel-primary-dark);
	color: var(--himpel-white);
	text-decoration: none;
	transform: translateY(-2px);
}

.himpel-pdetail__btn:focus-visible {
	outline: 2px solid var(--himpel-primary-dark);
	outline-offset: 3px;
}

/* The badge supplies the button's visual right padding, so a button carrying
   one gets a tighter right inset than a plain one. */
.himpel-pdetail__btn--has-icon {
	gap: 14px;
	padding: 8px 8px 8px 26px;
}

.himpel-pdetail__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: var(--hpd-icon-size, 34px);
	height: var(--hpd-icon-size, 34px);
	border-radius: 50%;
	background-color: var(--hpd-icon-bg, var(--himpel-white));

	transition: background-color 0.25s ease, transform 0.25s ease;
}

/*
 * The icon is an external SVG file, painted as a mask rather than dropped in
 * as an image: masking is what lets it take the badge's colour instead of
 * arriving in whatever colour it was drawn in. Each instance names its own file
 * in --hpd-glyph.
 */
.himpel-pdetail__btn-glyph {
	display: block;
	width: 52%;
	height: 52%;

	background-color: var(--hpd-icon-color, var(--himpel-primary));

	-webkit-mask-image: var(--hpd-glyph);
	mask-image: var(--hpd-glyph);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Without mask support the glyph would paint as a solid square, so show
   nothing rather than a block — the button still reads as a button. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	.himpel-pdetail__btn-glyph {
		background-color: transparent;
	}
}

/*
 * The badge is what rises, carrying the glyph with it.
 *
 * Moving the glyph itself slid it around inside the circle, which is the one
 * place it should never be off-centre — a mark inside a ring is read against
 * that ring, so a 2px shift there is far more noticeable than 2px of the whole
 * badge travelling. The circle moves and the glyph stays exactly where it sits.
 *
 * The lift adds to the button's own, since the two are measured from different
 * things: 2px each, so the badge ends up 4px above where it started.
 */
.himpel-pdetail__btn:hover .himpel-pdetail__btn-icon,
.himpel-pdetail__btn:focus-visible .himpel-pdetail__btn-icon {
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Certifications and awards
   -------------------------------------------------------------------------- */

.himpel-pdetail__certs {
	margin-top: var(--hpd-certs-top, 36px);
}

.himpel-pdetail__certs-title {
	margin: 0 0 var(--hpd-certs-gap, 16px);
	color: var(--hpd-title-color, var(--himpel-dark));
	font-size: var(--hpd-certs-size, 17px);
	line-height: 1.3;
}

.himpel-pdetail__certs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hpd-cert-gap, 14px);

	/* It is a list, and it should not look like one. */
	margin: 0;
	padding: 0;
	list-style: none;
}

.himpel-pdetail__cert {
	display: flex;
	align-items: center;
	justify-content: center;

	/*
	 * A fixed height and an automatic width: certificates and award marks come
	 * in every proportion, and matching their heights is what makes a row of
	 * them look deliberate rather than pasted in.
	 *
	 * The minimum holds the box open while the picture is still loading, so the
	 * row does not jump as each one arrives; the maximum stops a wide banner
	 * from taking the whole line to itself.
	 */
	height: var(--hpd-cert-h, 74px);
	min-width: var(--hpd-cert-min, 64px);
	max-width: var(--hpd-cert-max, 210px);
	padding: var(--hpd-cert-pad, 8px);

	border: 1px solid var(--hpd-cert-border, rgba(18, 18, 18, 0.1));
	border-radius: var(--hpd-cert-radius, 10px);
	background-color: var(--himpel-white);
}

.himpel-pdetail .himpel-pdetail__cert-img {
	display: block;
	width: auto;
	max-width: 100%;

	/*
	 * The height in full, not 100%. A percentage height on a flex item whose
	 * container centres rather than stretches its items resolves against
	 * nothing and computes to zero — the image disappears, box and all. The
	 * subtraction is the padding on both sides plus the two border edges.
	 */
	height: calc(
		var(--hpd-cert-h, 74px) - var(--hpd-cert-pad, 8px) * 2 - 2px
	);

	object-fit: contain;
}

/* The size of a download is worth announcing, but only to a screen reader —
   the button already says what it does. */
.himpel-pdetail .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

.himpel-pdetail.is-revealing .himpel-pdetail__media,
.himpel-pdetail.is-revealing .himpel-pdetail__title,
.himpel-pdetail.is-revealing .himpel-pdetail__desc,
.himpel-pdetail.is-revealing .himpel-pdetail__actions,
.himpel-pdetail.is-revealing .himpel-pdetail__certs {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-pdetail.is-revealing .himpel-pdetail__media,
	.himpel-pdetail.is-revealing .himpel-pdetail__title,
	.himpel-pdetail.is-revealing .himpel-pdetail__desc,
	.himpel-pdetail.is-revealing .himpel-pdetail__actions,
	.himpel-pdetail.is-revealing .himpel-pdetail__certs {
		opacity: 1;
	}

	.himpel-pdetail__frame {
		transition: none;
	}
}

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

.himpel-pdetail__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-pdetail__inner {
		padding: var(--hpd-py-t, 60px) var(--hpd-px-t, 20px);
	}

	.himpel-pdetail__grid {
		gap: var(--hpd-gap-t, 40px);
	}

	.himpel-pdetail__title {
		font-size: var(--hpd-title-t, 26px);
	}

	.himpel-pdetail__frame {
		--hpd-frame-pad: 30px;
	}

	.himpel-pdetail__thumb {
		--hpd-thumb: 54px;
	}
}

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

	/*
	 * One column, images first: the picture is what the reader came for, and
	 * on a phone the copy under it is a scroll away rather than a column away.
	 */
	.himpel-pdetail__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hpd-gap-m, 28px);
	}

	.himpel-pdetail__panel {
		aspect-ratio: 1 / 1;
	}

	.himpel-pdetail__frame {
		--hpd-frame-pad: 22px;

		/* The rail is along the bottom here, so the side reserve comes off. */
		left: var(--hpd-frame-pad, 22px);
	}

	/*
	 * The rail turns into a row along the bottom. Down the side it would eat a
	 * third of the picture's width at this size, and a phone's natural gesture
	 * for a strip of thumbnails is a sideways swipe anyway.
	 */
	.himpel-pdetail__thumbs {
		top: auto;
		right: var(--hpd-thumbs-inset-m, 14px);
		bottom: var(--hpd-thumbs-inset-m, 14px);
		left: var(--hpd-thumbs-inset-m, 14px);

		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.himpel-pdetail__thumb {
		--hpd-thumb: 50px;
	}

	/* Room for the rail, so a tall bottle does not sit behind it. */
	.himpel-pdetail__frame {
		bottom: calc(var(--hpd-thumbs-inset-m, 14px) * 2 + 50px);
	}

	.himpel-pdetail__title {
		font-size: var(--hpd-title-m, 22px);
	}

	.himpel-pdetail__actions {
		margin-top: 24px;
	}

	.himpel-pdetail__btn {
		width: 100%;
		justify-content: center;
	}

	.himpel-pdetail__certs {
		margin-top: var(--hpd-certs-top-m, 28px);
	}

	/*
	 * A row that scrolls sideways rather than wrapping into three ragged lines
	 * on a phone. The marks stay at a readable size and the row stays one row.
	 */
	.himpel-pdetail__certs-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.himpel-pdetail__certs-list::-webkit-scrollbar {
		display: none;
	}

	/*
	 * Redefining the property rather than the height, so the image's own
	 * calculation follows it down without a second override.
	 */
	.himpel-pdetail__cert {
		--hpd-cert-h: 64px;
		flex: 0 0 auto;
	}
}