/*
 * Hofmanufaktur Produktangaben, Frontend.
 *
 * Farben und Schriften stammen aus den Avada-Variablen des Themes. Ist eine
 * Variable nicht gesetzt, greift ein Ersatzwert aus dem Shop-Design.
 */

.hpt-claim,
.hpt-props,
.hpt-facts,
.hpt-story,
.hpt-accordion {
	--hpt-ink: var(--awb-color3, #51453e);
	--hpt-olive: var(--awb-color5, #74763b);
	--hpt-olive-soft: var(--awb-color6, #aaa873);
	--hpt-gold: var(--awb-color4, #d6a047);
	--hpt-cream: var(--awb-color2, #fff9f1);
	--hpt-sand: var(--awb-color7, #f7e6ce);
	--hpt-tan: var(--awb-color8, #e2c39a);
	--hpt-paper: var(--awb-color1, #ffffff);
	--hpt-line: rgba(81, 69, 62, .14);
	--hpt-mute: rgba(81, 69, 62, .68);
	--hpt-head: var(--h2_typography-font-family, inherit);
	color: var(--hpt-ink);
}

.hpt-story h2,
.hpt-story h3,
.hpt-reason b,
.hpt-card b,
.hpt-steps b,
.hpt-producer b,
.hpt-panel__title,
.hpt-claim__main,
.hpt-fact b,
.hpt-secline span,
.hpt-props li,
.hpt-tags li,
.hpt-nutrition,
.hpt-dl dt,
.hpt-seal b,
.hpt-recipe b,
.hpt-pair span {
	font-family: var(--hpt-head);
}

/* ---------- Aufhänger ---------- */

.hpt-claim {
	margin: 0 0 1rem;
}

.hpt-claim__main {
	margin: 0 0 .3rem;
	font-size: clamp(1.15rem, 2.2vw, 1.35rem);
	font-weight: 500;
	line-height: 1.32;
	letter-spacing: -.01em;
}

.hpt-claim__sub {
	margin: 0;
	font-size: .95rem;
	color: var(--hpt-mute);
}

/* ---------- Eigenschaften ---------- */

.hpt-props {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.hpt-props li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .38rem .85rem .38rem .65rem;
	border: 1px solid rgba(116, 118, 59, .28);
	border-radius: 999px;
	background: transparent;
	font-size: .9rem;
	font-weight: 500;
	line-height: 1.4;
}

.hpt-props svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--hpt-olive);
}

/* ---------- Kurzfakten ---------- */

.hpt-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: .6rem;
	margin: 1rem 0 0;
}

.hpt-fact {
	padding: .65rem .8rem;
	border: 1px solid var(--hpt-line);
	border-radius: 6px;
	background: transparent;
}

.hpt-fact span {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hpt-mute);
	margin-bottom: .15rem;
}

.hpt-fact b {
	display: block;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

/* ---------- Verkaufsbereiche ---------- */

/*
 * Der Abstand nach oben trennt die Verkaufsinhalte von dem, was darüber
 * steht, meist den Reitern. Deren Kasten bringt selbst schon Abstand mit,
 * deshalb reicht hier ein knapper Wert. Zusammen ergibt das etwa 68 Pixel
 * und damit etwas mehr als die 54 Pixel zwischen den Abschnitten weiter
 * unten. Größer wirkte es wie ein Loch in der Seite.
 */

.hpt-story {
	clear: both;
	margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
}

/*
 * Der erste Baustein bringt einen eigenen Abstand nach oben mit, weil er
 * sonst am Kopfbereich klebt. Steht er ganz am Anfang, zählt dieser Abstand
 * doppelt, und zwischen den Reitern und den Karten entsteht ein auffälliges
 * Loch. Hier bestimmt allein der Bereich den Abstand.
 *
 * Für das Akkordeon gilt das ausdrücklich nicht. Dort trennt eine Linie den
 * Bereich ab, und die Überschrift soll Luft zu dieser Linie behalten.
 */

.hpt-story > *:first-child {
	margin-top: 0;
}

/*
 * Abschnittsmarke im Stil der Startseite: kurzer Strich, dann Versalien in
 * der Akzentfarbe. Bewusst keine durchgehende Linie über die volle Breite.
 */

.hpt-secline {
	display: flex;
	align-items: baseline;
	gap: .85rem;
	margin: clamp(2.4rem, 5vw, 3.4rem) 0 1.1rem;
}

.hpt-secline::before {
	content: "";
	flex: none;
	width: 2.6rem;
	height: 2px;
	margin-top: -.35em;
	align-self: center;
	background: var(--hpt-gold);
}

.hpt-secline span {
	font-size: .94rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--hpt-gold);
	line-height: 1.5;
}

.hpt-copy {
	line-height: 1.72;
}

.hpt-copy > :last-child {
	margin-bottom: 0;
}

.hpt-copy--tight p {
	margin-bottom: .5rem;
}

.hpt-copy--small {
	font-size: .9rem;
	color: var(--hpt-mute);
}

/* Drei Gründe */

.hpt-reasons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(.9rem, 2vw, 1.4rem);
	margin: clamp(2.2rem, 4.5vw, 3rem) 0 0;
	align-items: stretch;
}

.hpt-reason {
	padding: clamp(1.1rem, 2.2vw, 1.5rem);
	border: 1px solid var(--hpt-line);
	border-radius: 7px;
	background: var(--hpt-paper);
}

.hpt-reason svg {
	display: block;
	width: 30px;
	height: 30px;
	margin-bottom: .7rem;
	stroke-width: 1.4;
	color: var(--hpt-olive);
}

.hpt-reason b {
	display: block;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: .3rem;
}

.hpt-reason span {
	display: block;
	font-size: .97rem;
	line-height: 1.6;
	color: var(--hpt-mute);
}

/* Missverständnis */

.hpt-myth {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.1rem;
	align-items: start;
	margin: clamp(2rem, 4vw, 2.8rem) 0 0;
	padding: 0 0 0 1.4rem;
	border-left: 2px solid var(--hpt-olive);
	background: none;
	color: inherit;
}

.hpt-myth i {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	flex: none;
	border-radius: 50%;
	background: var(--hpt-sand);
	font-style: normal;
	font-size: 1.15rem;
	font-weight: 600;
	color: #8a6a22;
}

.hpt-myth b {
	display: block;
	font-family: var(--hpt-head);
	font-size: clamp(1.15rem, 2.2vw, 1.35rem);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: .45rem;
	color: var(--hpt-ink);
}

.hpt-myth__text,
.hpt-myth__text p {
	color: var(--hpt-mute);
	font-size: 1.02rem;
	line-height: 1.7;
}

.hpt-myth__text > :last-child {
	margin-bottom: 0;
}

/* Bereich mit Bild */

.hpt-block {
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: center;
	margin: clamp(1.2rem, 2.5vw, 1.8rem) 0 0;
}

.hpt-block.has-media {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

/*
 * Der Bereich steht bewusst mit im Selektor.
 *
 * Avada setzt jedes h2 über ".post-content h2" auf 48 Pixel, dieselbe Größe
 * wie der Produkttitel. Eine Regel mit gleicher Spezifität verliert, weil
 * das Theme-Stylesheet später geladen wird. Mit dem Bereich davor gewinnt
 * sie über die Spezifität und ist damit von der Ladereihenfolge unabhängig.
 *
 * Die Größe folgt den Stufen des Themes: 48 für den Produkttitel, 36 für
 * Abschnitte wie "Ähnliche Produkte", 20 für Reiter, 16 für Text. Die
 * Überschrift eines Verkaufsbausteins steht unter dem Produkttitel und
 * über den Kartentiteln, deshalb 28 Pixel.
 */

.hpt-story .hpt-block h2 {
	margin: 0 0 .7rem;
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	line-height: 1.22;
	letter-spacing: -.01em;
}

.hpt-story .hpt-block h3,
.hpt-accordion .hpt-panel__body h3 {
	margin: 0 0 .5rem;
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: 1.32;
}

.hpt-media__frame {
	overflow: hidden;
	border-radius: 6px;
}

.hpt-media__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.hpt-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.hpt-tags li {
	padding: .34rem .8rem;
	border: 1px solid rgba(116, 118, 59, .3);
	border-radius: 999px;
	background: transparent;
	font-size: .92rem;
}

.hpt-level {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-top: 1rem;
	font-size: .9rem;
}

.hpt-level__dots {
	display: inline-flex;
	gap: .3rem;
	margin-left: .3rem;
}

.hpt-level__dots i {
	display: block;
	width: 11px;
	height: 11px;
	border: 1px solid var(--hpt-olive);
	border-radius: 50%;
}

.hpt-level__dots i.is-active {
	background: var(--hpt-olive);
}

.hpt-points {
	display: grid;
	gap: .5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.hpt-points li {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	font-size: 1.02rem;
	line-height: 1.6;
}

.hpt-points li span {
	display: inline-grid;
	place-items: center;
	flex: 0 0 1.3rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--hpt-olive);
	font-size: .7rem;
	color: #fff;
}

/* Erzeuger */

.hpt-producer {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 1.3rem;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
}

.hpt-producer__avatar {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: linear-gradient(150deg, #cbd0a4, #8d9153);
	font-family: var(--hpt-head);
	font-size: 1.3rem;
	font-weight: 500;
	color: #fff;
}

.hpt-producer__media {
	width: 84px;
	height: 84px;
	overflow: hidden;
	border-radius: 50%;
}

.hpt-producer__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.hpt-producer b {
	display: block;
	font-size: 1.15rem;
	font-weight: 600;
}

.hpt-producer__body > span {
	display: block;
	font-size: .95rem;
	color: var(--hpt-mute);
	margin-bottom: .45rem;
}

/* Schritte */

.hpt-steps {
	counter-reset: hpt-step;
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hpt-steps li {
	counter-increment: hpt-step;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.1rem;
	padding: 0 0 1.5rem;
	position: relative;
}

.hpt-steps li::before {
	content: counter(hpt-step);
	display: grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	flex: none;
	border-radius: 50%;
	background: var(--hpt-sand);
	font-family: var(--hpt-head);
	font-size: 1.05rem;
	font-weight: 600;
	color: #8a6a22;
}

.hpt-steps li::after {
	content: "";
	position: absolute;
	left: 1.15rem;
	top: 2.3rem;
	bottom: 0;
	width: 1px;
	background: var(--hpt-line);
}

.hpt-steps li:last-child {
	padding-bottom: 0;
}

.hpt-steps li:last-child::after {
	display: none;
}

.hpt-steps b {
	display: block;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: .2rem;
}

.hpt-steps span {
	display: block;
	font-size: .97rem;
	line-height: 1.62;
	color: var(--hpt-mute);
}

/* Anwendungskarten */

.hpt-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(1.2rem, 2.5vw, 1.9rem);
	margin: 1.3rem 0 0;
	align-items: stretch;
}

.hpt-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--hpt-line);
	border-radius: 7px;
	background: var(--hpt-paper);
}

.hpt-card__body {
	flex: 1 1 auto;
}

.hpt-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0;
	margin-bottom: 0;
}

.hpt-card__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.hpt-card__body {
	padding: .95rem 1.1rem 1.1rem;
}

.hpt-card b {
	display: block;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.3;
}

.hpt-card span {
	display: block;
	margin-top: .25rem;
	font-size: .97rem;
	line-height: 1.6;
	color: var(--hpt-mute);
}

.hpt-story .hpt-usage .hpt-notice,
.hpt-notice {
	display: flex;
	align-items: center;
	gap: .65rem;
	width: fit-content;
	margin: clamp(2.8rem, 5.5vw, 3.6rem) 0 .6rem;
	padding: .8rem 1.2rem;
	font-size: .97rem;
	border: 1px solid rgba(189, 104, 71, .35);
	border-radius: 5px;
	background: rgba(189, 104, 71, .08);
	color: #8e432b;
	font-size: .9rem;
}

.hpt-notice span {
	display: inline-grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	flex: none;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-weight: 700;
}

/* Rezepte und Partnerprodukte */

.hpt-recipes {
	display: grid;
	gap: .7rem;
}

.hpt-recipe {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: .8rem .95rem;
	border: 1px solid var(--hpt-tan);
	border-radius: 7px;
	background: var(--hpt-cream);
	text-decoration: none;
	color: inherit;
}

.hpt-recipe:hover,
.hpt-recipe:focus-visible {
	border-color: var(--hpt-gold);
}

.hpt-recipe__media {
	width: 66px;
	height: 66px;
	flex: none;
	overflow: hidden;
	border-radius: 5px;
	background: var(--hpt-sand);
}

.hpt-recipe__media--empty {
	background: linear-gradient(150deg, #efe0c4, #c9a97a);
}

.hpt-recipe__img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.hpt-recipe b {
	display: block;
	font-size: .98rem;
	font-weight: 600;
	margin-bottom: .1rem;
}

.hpt-recipe__body > span {
	display: block;
	font-size: .87rem;
	line-height: 1.5;
	color: var(--hpt-mute);
}

.hpt-recipe em {
	display: block;
	margin-top: .25rem;
	font-style: normal;
	font-family: var(--hpt-head);
	font-size: .82rem;
	font-weight: 600;
	color: var(--hpt-olive);
}

.hpt-pairs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: .6rem;
}

.hpt-pair {
	display: block;
	padding: .6rem;
	border: 1px solid var(--hpt-line);
	border-radius: 6px;
	background: var(--hpt-paper);
	text-align: center;
	text-decoration: none;
	color: inherit;
	font-size: .85rem;
}

.hpt-pair:hover,
.hpt-pair:focus-visible {
	border-color: var(--hpt-olive-soft);
}

.hpt-pair__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 .4rem;
	border-radius: 4px;
}

/* Zitat */

.hpt-story figure.hpt-quote,
figure.hpt-quote {
	margin: clamp(2.2rem, 4.5vw, 3rem) 0 0;
	padding: .2rem 0 .2rem 1.5rem;
	border: 0;
	border-left: 3px solid var(--hpt-gold);
	background: none;
}

/*
 * Themes gestalten blockquote gern selbst, mit eigenem Rahmen, Einzug und
 * Hintergrund. Die Gewichtung hier ist deshalb bewusst hoch.
 */
.hpt-story figure.hpt-quote blockquote,
figure.hpt-quote blockquote,
figure.hpt-quote > blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 0;
	background: none;
	quotes: none;
	font-size: inherit;
}

.hpt-story figure.hpt-quote blockquote::before,
figure.hpt-quote blockquote::before,
figure.hpt-quote blockquote::after {
	content: none;
	display: none;
}

.hpt-story figure.hpt-quote p,
figure.hpt-quote p {
	margin: 0;
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	font-style: italic;
	line-height: 1.55;
	color: var(--hpt-ink);
}

.hpt-story figure.hpt-quote figcaption,
figure.hpt-quote figcaption {
	margin-top: .6rem;
	font-family: var(--hpt-head);
	font-style: normal;
	font-size: .92rem;
	color: var(--hpt-mute);
}

/* ---------- Pflicht-Akkordeon ---------- */

.hpt-accordion {
	clear: both;
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
	border-top: 1px solid var(--hpt-line);
}

.hpt-accordion .hpt-secline {
	margin-top: 1.1rem;
}

.hpt-panel {
	border-bottom: 1px solid var(--hpt-line);
}

.hpt-panel > summary {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: 1.05rem .15rem;
	list-style: none;
	cursor: pointer;
	font-family: var(--hpt-head);
	font-size: 1.12rem;
	font-weight: 500;
	min-height: 44px;
	box-sizing: border-box;
}

.hpt-panel > summary::-webkit-details-marker {
	display: none;
}

.hpt-panel > summary::after {
	content: "";
	margin-left: auto;
	margin-right: .3rem;
	width: 8px;
	height: 8px;
	flex: none;
	border-right: 1.6px solid var(--hpt-olive);
	border-bottom: 1.6px solid var(--hpt-olive);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.hpt-panel[open] > summary::after {
	transform: rotate(-135deg);
}

.hpt-panel > summary:focus-visible {
	outline: 2px solid var(--hpt-olive);
	outline-offset: 2px;
}

.hpt-panel__icon {
	display: inline-grid;
	place-items: center;
	width: 31px;
	height: 31px;
	flex: none;
	border-radius: 50%;
	background: var(--hpt-sand);
	color: #8a6a22;
}

.hpt-panel__icon svg {
	width: 17px;
	height: 17px;
}

.hpt-panel__body {
	padding: 0 .15rem 1.35rem;
	overflow-x: auto;
}

.hpt-panel__body > :last-child {
	margin-bottom: 0;
}

/* Zutaten und Allergene */

.hpt-designation {
	margin: 0 0 .6rem;
	font-size: .95rem;
}

.hpt-ingredients {
	line-height: 1.78;
}

.hpt-ingredients > :last-child {
	margin-bottom: 0;
}

.hpt-al,
mark.hpt-al {
	padding: 0 .15em;
	border-radius: 2px;
	background: var(--hpt-sand);
	color: inherit;
	font-weight: 600;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.hpt-traces {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	margin: .9rem 0 0;
	padding: .7rem .85rem;
	border-left: 3px solid var(--hpt-gold);
	border-radius: 0 4px 4px 0;
	background: var(--hpt-cream);
	font-size: .92rem;
	line-height: 1.6;
}

.hpt-alkey {
	margin: .7rem 0 0;
	font-size: .8rem;
	color: var(--hpt-mute);
}

/* Nährwerttabelle */

.hpt-nutrition {
	width: 100%;
	margin: .3rem 0 0;
	border-collapse: collapse;
	font-size: .92rem;
}

.hpt-nutrition caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 .6rem;
	font-size: .85rem;
	color: var(--hpt-mute);
}

.hpt-nutrition th,
.hpt-nutrition td {
	padding: .55rem .65rem;
	border-bottom: 1px solid var(--hpt-line);
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}

.hpt-nutrition td {
	text-align: right;
	white-space: nowrap;
	width: 1%;
	font-variant-numeric: tabular-nums;
}

.hpt-nutrition th.is-sub {
	padding-left: 1.5rem;
	color: var(--hpt-mute);
	font-size: .88rem;
}

.hpt-nutrition tr.is-key th,
.hpt-nutrition tr.is-key td {
	background: var(--hpt-cream);
	font-weight: 600;
}

.hpt-nutrition tr:last-child th,
.hpt-nutrition tr:last-child td {
	border-bottom: 0;
}

.hpt-nutfoot {
	margin: .6rem 0 0;
	font-size: .8rem;
	color: var(--hpt-mute);
}

/* Rechtliche Angaben */

.hpt-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35rem 1.2rem;
	margin: 0;
	font-size: .93rem;
}

.hpt-dl dt {
	font-size: .82rem;
	color: var(--hpt-mute);
	white-space: nowrap;
}

.hpt-dl dd {
	margin: 0;
}

.hpt-seals {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .9rem 0 0;
}

.hpt-seal {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .7rem;
	border: 1px solid var(--hpt-tan);
	border-radius: 5px;
	background: var(--hpt-paper);
	font-size: .82rem;
}

.hpt-seal svg {
	width: 22px;
	height: 22px;
	color: var(--hpt-olive);
}

.hpt-legalnote {
	margin: .9rem 0 0;
	font-size: .8rem;
	line-height: 1.55;
	color: var(--hpt-mute);
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 900px) {
	.hpt-block.has-media {
		grid-template-columns: 1fr;
	}

	.hpt-media {
		aspect-ratio: 16 / 10;
	}

	.hpt-reasons {
		grid-template-columns: 1fr;
		gap: .8rem;
	}

	.hpt-reason {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 1rem;
		align-items: start;
		padding: 1.1rem 1.2rem;
	}

	.hpt-reason svg {
		margin: .1rem 0 0;
		grid-row: span 2;
	}

	.hpt-reason b,
	.hpt-reason span {
		grid-column: 2;
	}
}

@media (max-width: 600px) {
	.hpt-facts {
		grid-template-columns: 1fr 1fr;
	}

	.hpt-cards {
		grid-template-columns: 1fr 1fr;
	}

	.hpt-producer {
		grid-template-columns: 64px 1fr;
		gap: 1rem;
	}

	.hpt-producer__avatar,
	.hpt-producer__media {
		width: 64px;
		height: 64px;
		font-size: 1.1rem;
	}

	.hpt-myth {
		gap: .85rem;
		padding-left: 1.1rem;
	}

	.hpt-myth i {
		width: 2rem;
		height: 2rem;
		font-size: 1rem;
	}

	.hpt-steps li::before {
		width: 2rem;
		height: 2rem;
		font-size: .95rem;
	}

	.hpt-steps li::after {
		left: 1rem;
		top: 2rem;
	}

	.hpt-secline {
		gap: .65rem;
	}

	.hpt-secline::before {
		width: 1.6rem;
	}

	.hpt-secline span {
		font-size: .86rem;
		letter-spacing: .12em;
	}

	.hpt-nutrition th,
	.hpt-nutrition td {
		padding: .5rem .35rem;
	}

	.hpt-nutrition td {
		white-space: normal;
	}

	.hpt-nutrition th.is-sub {
		padding-left: 1rem;
	}

	.hpt-dl {
		grid-template-columns: 1fr;
		gap: .1rem;
	}

	.hpt-dl dd {
		margin-bottom: .5rem;
	}

	.hpt-recipe {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hpt-panel > summary::after {
		transition: none;
	}
}

/* Druck: alles aufgeklappt, damit die Kennzeichnung vollständig erscheint. */
@media print {
	.hpt-panel > summary::after {
		display: none;
	}

	.hpt-panel > .hpt-panel__body {
		display: block !important;
	}
}

/* ---------- Titel im Reiter ---------- */

/*
 * Das Plugin schreibt in jeden eigenen Reiter eine Überschrift. Ohne Regel
 * gilt dafür ebenfalls Avadas h2 mit 48 Pixeln, während der Titel des
 * Themes im Reiter daneben 20 Pixel groß ist. Der doppelte Klassenname
 * hebt die Spezifität über ".post-content h2", ohne von einem bestimmten
 * Elternelement abzuhängen. Das Akkordeon nutzt diese Überschrift nicht,
 * dort steht der Titel im aufklappbaren Kopf.
 */

.hpt-product-tab-title.hpt-product-tab-title {
	margin: 0 0 .9rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
}

/* ---------- Grundpreis ---------- */

.hpt-unitprice {
	display: inline-block;
	margin-left: .35em;
	font-size: .78em;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(81, 69, 62, .72);
	white-space: nowrap;
}

.hpt-unitprice-line {
	margin: .2rem 0 0;
	font-size: .85rem;
	color: rgba(81, 69, 62, .72);
}

.hpt-unitprice-line .hpt-unitprice {
	margin-left: 0;
	font-size: 1em;
}

.hpt-unitprice .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;
}

@media (max-width: 600px) {
	.hpt-unitprice {
		display: block;
		margin-left: 0;
		margin-top: .15rem;
		white-space: normal;
	}
}

/* ---------- Font Awesome statt der mitgelieferten Symbole ---------- */

/*
 * Nutzt das Theme Font Awesome, kommen statt <svg> Elemente vom Typ <i>.
 * Diese brauchen eine Schriftgröße statt Breite und Höhe.
 */

i.hpt-i,
i.hpt-icon {
	display: inline-block;
	font-style: normal;
	line-height: 1;
	color: var(--hpt-olive);
}

.hpt-reason i.hpt-i {
	display: block;
	font-size: 26px;
	margin-bottom: .8rem;
}

.hpt-props i.hpt-i {
	font-size: 15px;
	width: auto;
	height: auto;
}

.hpt-seal i.hpt-i {
	font-size: 18px;
}

.hpt-panel__icon i.hpt-i {
	font-size: 14px;
	color: #8a6a22;
}

/* ---------- Kennzeichnung von KI-Bildern ---------- */

/*
 * Zwei Formen. Auf großflächigen Motiven sitzt eine kleine Marke im Bild.
 * Auf kleinen und runden Motiven, etwa dem Erzeugerbild oder einem
 * Vorschaubild, steht die Beschriftung darunter, weil eine Marke dort einen
 * erheblichen Teil des Motivs verdecken würde.
 *
 * Farbe und Grund sind bewusst erzwungen. Es handelt sich um eine
 * Kennzeichnung, die lesbar sein muss, und Themes setzen für Textelemente
 * innerhalb von Produktinhalten häufig eigene Farben.
 */

.hpt-media__frame,
.hpt-card__media {
	position: relative;
}

.hpt-story span.hpt-ai--in,
span.hpt-ai--in {
	position: absolute;
	right: .35rem;
	bottom: .35rem;
	left: auto;
	z-index: 2;
	display: inline-block;
	max-width: calc(100% - .7rem);
	margin: 0;
	padding: .12rem .3rem;
	border-radius: 2px;
	background: rgba(18, 16, 10, .92) !important;
	color: #fff !important;
	font-family: var(--hpt-head);
	font-size: .38rem;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	pointer-events: none;
}

/* Beschriftung unter kleinen Bildern. */

.hpt-story span.hpt-ai,
.hpt-accordion span.hpt-ai,
span.hpt-ai {
	display: block;
	margin: .5rem 0 0;
	font-family: var(--hpt-head);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .09em;
	line-height: 1.4;
	text-transform: uppercase;
	color: rgba(81, 69, 62, .5);
}

.hpt-producer__body span.hpt-ai,
.hpt-recipe__body span.hpt-ai {
	margin-top: .45rem;
}

.hpt-pair span.hpt-ai {
	margin-top: .3rem;
}

@media (max-width: 600px) {
	span.hpt-ai--in {
		font-size: .38rem;
		padding: .1rem .26rem;
	}
}

@media print {
	span.hpt-ai {
		color: #000;
	}

	span.hpt-ai--in {
		position: static;
		display: inline-block;
		background: none !important;
		color: #000 !important;
		box-shadow: none;
		padding: 0;
	}
}

/* Abstand über dem Hinweis, gegen abweichende Theme-Vorgaben abgesichert. */

.hpt-story .hpt-usage .hpt-notice {
	margin-top: clamp(2.6rem, 5vw, 3.4rem);
	margin-bottom: .6rem;
}

@media print {
	span.hpt-ai {
		color: #000;
	}
}

/* ---------- Haltbarkeit und Ernte ---------- */

.hpt-shelf {
	display: grid;
	gap: .45rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.hpt-shelf li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: 1rem;
	line-height: 1.6;
}

.hpt-shelf li::before {
	content: "";
	flex: none;
	width: .45rem;
	height: .45rem;
	margin-top: .55em;
	border-radius: 50%;
	background: var(--hpt-gold);
}

.hpt-harvest {
	margin: 0 0 .9rem;
	font-family: var(--hpt-head);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hpt-olive);
}

/* ---------- Stichpunkte der Kurzbeschreibung ---------- */

.hpt-bullets {
	display: grid;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.hpt-bullets li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: 1.02rem;
	line-height: 1.55;
}

.hpt-bullets__check {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	margin-top: .22em;
	color: var(--hpt-olive, #74763b);
	stroke-width: 2.4;
}

/* Als Font Awesome kommt statt eines svg ein i-Element. */
i.hpt-bullets__check {
	width: auto;
	height: auto;
	font-size: .92em;
	line-height: 1.5;
	margin-top: .1em;
}

/* ---------- Varianten-Auswahl angleichen ---------- */

/*
 * Greift nur, wenn am body die Klasse hpt-styled-variations steht. Die
 * setzt das Plugin ausschließlich auf Produktseiten mit aktiven
 * Produktangaben und nur, wenn es in den Betriebsangaben eingeschaltet ist.
 *
 * WooCommerce gibt die Auswahl als Tabelle aus, mit der Beschriftung links
 * und dem Feld rechts. Bei breiten Spalten reißt das weit auseinander.
 * Hier stehen Beschriftung und Feld untereinander, wie bei allen anderen
 * Angaben auch.
 */

.hpt-styled-variations {
	--hpt-ink: var(--awb-color3, #51453e);
	--hpt-olive: var(--awb-color5, #74763b);
	--hpt-cream: var(--awb-color2, #fff9f1);
	--hpt-paper: var(--awb-color1, #ffffff);
	--hpt-line: rgba(81, 69, 62, .18);
	--hpt-mute: rgba(81, 69, 62, .68);
	--hpt-head: var(--h2_typography-font-family, inherit);
}

/*
 * Der Abstand nach oben trennt die Auswahl vom Preis und den Steuerhinweisen
 * darüber. Ohne ihn klebt die Beschriftung "Inhalt" direkt an der Zeile
 * "inkl. 7 % MwSt.".
 */

.hpt-styled-variations form.cart table.variations {
	width: auto;
	margin: 1.6rem 0 1.1rem;
	border: 0;
	background: none;
	table-layout: auto;
}

.hpt-styled-variations form.cart table.variations tbody,
.hpt-styled-variations form.cart table.variations tr,
.hpt-styled-variations form.cart table.variations th,
.hpt-styled-variations form.cart table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.hpt-styled-variations form.cart table.variations tr + tr {
	margin-top: .9rem;
}

.hpt-styled-variations form.cart table.variations th.label {
	padding: 0 0 .35rem;
}

.hpt-styled-variations form.cart table.variations th.label label {
	display: block;
	margin: 0;
	font-family: var(--hpt-head);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hpt-mute);
	line-height: 1.4;
}

.hpt-styled-variations form.cart table.variations select {
	width: 100%;
	max-width: 290px;
	min-height: 46px;
	height: auto;
	margin: 0;
	padding: .62rem 2.4rem .62rem .9rem;
	border: 1px solid var(--hpt-line);
	border-radius: 6px;
	background-color: var(--hpt-paper);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374763b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
	background-size: 16px 16px;
	color: var(--hpt-ink);
	font-family: var(--hpt-head);
	font-size: .98rem;
	line-height: 1.4;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.hpt-styled-variations form.cart table.variations select:focus-visible {
	outline: 2px solid var(--hpt-olive);
	outline-offset: 1px;
	border-color: var(--hpt-olive);
}

.hpt-styled-variations form.cart .reset_variations {
	display: inline-block;
	margin: .5rem 0 0;
	font-family: var(--hpt-head);
	font-size: .82rem;
	color: var(--hpt-mute);
}

.hpt-styled-variations form.cart .woocommerce-variation-price {
	margin: 0 0 .8rem;
}

.hpt-styled-variations form.cart .woocommerce-variation-availability p {
	margin: 0 0 .8rem;
	font-size: .92rem;
}

@media (max-width: 600px) {
	.hpt-styled-variations form.cart table.variations select {
		max-width: none;
	}
}