/*
Theme Name:  Malak Magic
Theme URI:   https://malakmagic.com
Author:      Malak Magic
Description: Klassisches WooCommerce-Theme für Malak Magic. Layout, Typografie
             und Farbwelt stammen unverändert aus dem Designprototyp
             (_Website_Konzept/sales.html). Vorbereitet für EN/FR/AR
             einschließlich RTL.
Version:     0.1.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: malak-magic
Tags:        e-commerce, rtl-language-support, translation-ready

Die eigentlichen Stile liegen in assets/css/prototype.css. Diese Datei
enthält nur den Theme-Kopf, den WordPress zwingend hier erwartet, sowie
wenige Ergänzungen, die WooCommerce-Ausgaben an den Prototyp angleichen.
*/

/* ---------------------------------------------------------------------------
   Editorial single posts - native Gutenberg blocks, no bespoke blocks
   --------------------------------------------------------------------------- */

.editorial-single {
	background: #fff;
}

.editorial-hero {
	position: relative;
	display: flex;
	min-height: clamp(520px, calc(100svh - var(--kopfhoehe)), 760px);
	align-items: flex-end;
	overflow: hidden;
	background: var(--ink);
	isolation: isolate;
}

.editorial-hero-image,
.editorial-hero-shade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.editorial-hero-image {
	z-index: -2;
	object-fit: cover;
	animation: malak-editorial-image-in .8s cubic-bezier(.2,.7,.2,1) both;
}

.editorial-hero-shade {
	z-index: -1;
	background: linear-gradient(180deg, rgba(18,14,20,.04) 15%, rgba(18,14,20,.82) 100%);
}

.editorial-hero-no-image {
	min-height: 440px;
	background: #fbf6f7;
}

.editorial-hero-no-image .editorial-hero-shade {
	display: none;
}

.editorial-hero-copy {
	width: 100%;
	padding-block: clamp(64px, 9vw, 112px);
	color: #fff;
	animation: malak-editorial-copy-in .58s .12s cubic-bezier(.2,.7,.2,1) both;
}

.editorial-hero-no-image .editorial-hero-copy {
	color: var(--ink);
}

.editorial-kicker {
	display: inline-block;
	margin-bottom: 18px;
	color: var(--brand);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.editorial-hero h1 {
	max-width: 18ch;
	margin: 0;
	font-size: clamp(42px, 6.2vw, 82px);
	line-height: 1.02;
	letter-spacing: -.035em;
	text-wrap: balance;
}

[dir="rtl"] .editorial-hero h1 {
	letter-spacing: 0;
	line-height: 1.25;
}

.editorial-deck {
	max-width: 58ch;
	margin-top: 22px;
	color: rgba(255,255,255,.84);
	font-size: clamp(17px, 1.8vw, 22px);
	line-height: 1.55;
}

.editorial-hero-no-image .editorial-deck {
	color: var(--ink-2);
}

.editorial-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 28px;
	color: rgba(255,255,255,.72);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
}

.editorial-hero-no-image .editorial-meta {
	color: var(--muted);
}

.editorial-content {
	padding-block: clamp(64px, 9vw, 120px);
}

.editorial-content > :where(p, h2, h3, h4, ul, ol, blockquote, .wp-block-buttons, .wp-block-separator) {
	max-width: 720px;
	margin-inline: auto;
}

.editorial-content > p {
	margin-block: 0 22px;
	color: var(--ink-2);
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.8;
}

.editorial-content > p.has-large-font-size {
	max-width: 820px;
	margin-bottom: clamp(52px, 7vw, 86px);
	color: var(--ink);
	font-size: clamp(24px, 3vw, 36px) !important;
	line-height: 1.35;
	letter-spacing: -.018em;
	text-wrap: balance;
}

[dir="rtl"] .editorial-content > p.has-large-font-size {
	letter-spacing: 0;
}

.editorial-content h2 {
	margin-top: clamp(52px, 7vw, 82px);
	margin-bottom: 18px;
	font-size: clamp(29px, 3.2vw, 42px);
	line-height: 1.12;
	letter-spacing: -.025em;
}

.editorial-content h3 {
	margin-top: 34px;
	margin-bottom: 14px;
	font-size: clamp(22px, 2.1vw, 28px);
}

.editorial-content ul,
.editorial-content ol {
	padding-inline-start: 1.25em;
	color: var(--ink-2);
	font-size: 17px;
	line-height: 1.7;
}

.editorial-content li + li {
	margin-top: 10px;
}

.editorial-content .alignwide {
	max-width: var(--maxw);
	margin-inline: auto;
}

.editorial-content .recipe-facts {
	max-width: 980px;
	margin: 0 auto clamp(58px, 8vw, 92px);
	padding-block: clamp(22px, 3vw, 34px);
	border-block: 1px solid var(--line);
}

.recipe-facts .wp-block-columns {
	margin: 0;
}

.recipe-facts .wp-block-column {
	padding-inline: clamp(8px, 2vw, 28px);
	text-align: center;
}

.recipe-facts .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid var(--line);
}

.recipe-facts p {
	margin: 0;
}

.recipe-facts p:first-child {
	margin-bottom: 4px;
	color: var(--brand);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.recipe-facts p:last-child {
	color: var(--ink);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 500;
}

.editorial-content .recipe-method {
	max-width: 1040px;
	margin: 0 auto;
	gap: clamp(42px, 7vw, 92px);
}

.recipe-method > .wp-block-column:first-child {
	flex-basis: 35% !important;
}

.recipe-method > .wp-block-column:last-child {
	flex-basis: 65% !important;
}

.recipe-method h2 {
	margin-top: 0;
}

.editorial-content .malak-touch {
	position: relative;
	max-width: 900px;
	margin: clamp(64px, 9vw, 110px) auto;
	padding: clamp(34px, 5vw, 58px);
	border: 0;
	background: #fbf6f7;
}

.malak-touch::before {
	content: "M";
	position: absolute;
	inset-block-start: 18px;
	inset-inline-end: 28px;
	color: rgba(225,20,143,.12);
	font-size: 86px;
	font-weight: 700;
	line-height: 1;
}

.malak-touch p {
	position: relative;
	margin: 0;
	color: var(--ink);
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 500;
	line-height: 1.4;
	text-wrap: balance;
}

.malak-touch cite {
	display: block;
	margin-top: 18px;
	color: var(--brand);
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.editorial-content .editorial-cta {
	max-width: 980px;
	margin: clamp(64px, 9vw, 110px) auto 0;
	padding: clamp(40px, 6vw, 72px);
	background: var(--ink);
	color: #fff;
	text-align: center;
}

.editorial-cta h2 {
	margin: 0 auto 14px;
	color: #fff;
}

.editorial-cta p {
	max-width: 58ch;
	margin: 0 auto 26px;
	color: rgba(255,255,255,.72);
	font-size: 17px;
	line-height: 1.65;
}

.editorial-cta .wp-block-buttons {
	justify-content: center;
}

.editorial-cta .wp-block-button__link {
	border-radius: 0;
	background: var(--brand);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.editorial-cta .wp-block-button__link:hover {
	background: #fff;
	color: var(--ink);
	transform: translateY(-2px);
}

@keyframes malak-editorial-image-in {
	from { opacity: 0; transform: scale(1.025); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes malak-editorial-copy-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
	.editorial-hero {
		min-height: min(660px, calc(100svh - var(--kopfhoehe)));
	}

	.editorial-hero h1 {
		font-size: clamp(38px, 12vw, 58px);
	}

	.editorial-hero-copy {
		padding-block: 64px 54px;
	}

	.editorial-content {
		padding-inline: 20px;
	}

	.recipe-facts .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.recipe-facts .wp-block-column {
		padding-inline: 8px;
	}

	.editorial-content .recipe-method {
		display: block;
	}

	.recipe-method > .wp-block-column + .wp-block-column {
		margin-top: 56px;
	}

	.editorial-content .editorial-cta {
		margin-inline: -20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.editorial-hero-image,
	.editorial-hero-copy {
		animation: none;
	}

	.editorial-cta .wp-block-button__link {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   WooCommerce-Eigenheiten, die der Prototyp nicht kennen konnte
   --------------------------------------------------------------------------- */

/* Normale Inhaltsseiten bleiben als gut lesbare Textspalte gesetzt. Warenkorb
   und Checkout brauchen dagegen die volle Shopbreite für ihre Seitenspalte. */
.page-content {
	max-width: 76ch;
	padding-block: 56px;
}

.page-content.commerce-page {
	max-width: var(--maxw);
}

/* --- Produktsuche als aufklappbare Header-Zeile --------------------------- */
header {
	grid-template-areas: "l n r" "m m m" "s s s";
}

.search-drawer {
	grid-area: s;
	display: grid;
	width: 100%;
	grid-template-rows: 0fr;
	visibility: hidden;
	background: #fff;
	border-top: 0 solid var(--line);
	opacity: 0;
	transition: grid-template-rows .3s ease, opacity .2s ease, visibility 0s .3s, border-width .3s ease;
}

.search-drawer.open {
	grid-template-rows: 1fr;
	visibility: visible;
	border-top-width: 1px;
	opacity: 1;
	transition: grid-template-rows .3s ease, opacity .22s ease, visibility 0s, border-width .3s ease;
}

.search-panel {
	width: min(var(--maxw), 100%);
	min-height: 0;
	max-height: 0;
	overflow: hidden;
	margin: 0 auto;
	padding: 0 40px;
	transition: max-height .3s ease, padding .3s ease;
}

.search-drawer.open .search-panel {
	max-height: calc(100svh - 90px);
	overflow-y: auto;
	padding-block: 30px 38px;
}

.search-open #searchBtn {
	color: var(--brand);
}

.search-panel-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
}

.search-close {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
}

.product-search-field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 58px;
	align-items: center;
	border: 1px solid var(--brand);
	border-radius: var(--r);
	background: #fff;
}

.product-search-field input[type="search"] {
	min-width: 0;
	height: 58px;
	padding: 0 20px;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: clamp(16px, 2vw, 21px);
}

.product-search-field input[type="search"]::placeholder {
	color: var(--muted);
}

.product-search-field button {
	display: grid;
	width: 58px;
	height: 38px;
	place-items: center;
	border-inline-start: 1px solid var(--line-2);
	color: var(--ink);
}

.product-search-field button span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.product-search-field button:hover,
.product-search-field button:focus-visible {
	color: var(--brand);
}

.search-filter-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr .9fr;
	gap: 34px;
	margin-top: 30px;
}

.search-filter-grid section {
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.search-filter-grid h3 {
	margin-bottom: 15px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

[dir="rtl"] .search-filter-grid h3 {
	letter-spacing: 0;
	text-transform: none;
}

.search-filter-links {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.search-filter-links a {
	padding: 9px 14px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	color: var(--ink-2);
	font-size: 13px;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.search-filter-links a:hover,
.search-filter-links a:focus-visible {
	border-color: var(--brand);
	background: rgba(225, 30, 158, .04);
	color: var(--brand);
}

@media screen and (max-width: 782px) {
	.search-panel {
		padding-inline: 24px;
	}

	.search-drawer.open .search-panel {
		padding-block: 24px 32px;
	}

	.search-filter-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}

@media (max-width: 480px) {
	.search-panel {
		padding-inline: 20px;
	}

	.search-panel-top {
		grid-template-columns: minmax(0, 1fr) 38px;
		gap: 10px;
	}

	.search-close {
		width: 38px;
		height: 38px;
	}

	.product-search-field {
		grid-template-columns: minmax(0, 1fr) 52px;
	}

	.product-search-field input[type="search"] {
		height: 54px;
		padding-inline: 15px;
	}

	.product-search-field button {
		width: 52px;
	}
}

.cart-panel > .widget_shopping_cart_content {
	display: flex;
	flex: 1;
	min-height: 0;
	flex-direction: column;
}

.cart-row .variation {
	margin-top: 5px;
	font-size: 12px;
	color: var(--muted);
}

.cart-row .variation dt,
.cart-row .variation dd {
	display: inline;
	margin: 0;
}

.cart-row {
	position: relative;
	transition: opacity .18s ease;
}

.cart-row.is-removing > :not(.cart-remove) {
	opacity: .42;
}

.cart-remove {
	position: relative;
	display: inline-flex;
	min-width: 48px;
	min-height: 18px;
	align-items: center;
	justify-content: center;
}

.cart-remove.is-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 30px;
	min-width: 30px;
	height: 30px;
	min-height: 30px;
	background: var(--ink);
	border-radius: 50%;
	color: transparent;
	text-decoration: none;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.cart-remove.is-loading::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	content: '';
	animation: malak-cart-spin .65s linear infinite;
	transform: translate(-50%, -50%);
}

@keyframes malak-cart-spin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.cart-qty.is-loading {
	opacity: .45;
	pointer-events: none;
}

.cart-qty button:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: -2px;
}

.cart-foot .mini-cart-actions {
	display: grid;
	gap: 10px;
}

.cart-foot .mini-cart-view {
	text-align: center;
	font-size: 12.5px;
	color: var(--muted);
	text-decoration: underline;
}

.mini-cart-cross-sells {
	margin-top: 8px;
	padding: 20px 0 4px;
	border-top: 1px solid var(--line);
}

.mini-cart-cross-sells > h3 {
	margin-bottom: 10px;
	font-family: var(--fd);
	font-size: 15px;
	font-weight: 700;
}

[dir="rtl"] .mini-cart-cross-sells > h3 {
	font-family: var(--fa);
}

.mini-cart-recommendations {
	display: grid;
	gap: 8px;
}

.mini-cart-recommendation {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) 36px;
	align-items: center;
	gap: 12px;
	padding: 8px;
	background: var(--soft);
	border-radius: var(--r);
}

.mini-rec-image,
.mini-rec-image img {
	display: block;
	width: 58px;
	height: 58px;
}

.mini-rec-image img {
	object-fit: contain;
}

.mini-rec-copy {
	min-width: 0;
}

.mini-rec-copy h4 {
	font-size: 13px;
	line-height: 1.3;
}

.mini-rec-price {
	display: block;
	margin-top: 3px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.25;
	white-space: nowrap;
}

.mini-rec-price del,
.mini-rec-price ins,
.mini-rec-price span {
	display: inline;
}

.mini-rec-price ins {
	margin-inline-start: 5px;
}

.mini-rec-description {
	display: -webkit-box;
	overflow: hidden;
	margin: 4px 0 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--muted);
	font-size: 10.5px;
	line-height: 1.35;
}

.mini-rec-add {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	transition: background .2s ease, transform .2s ease;
}

.mini-rec-add:hover,
.mini-rec-add:focus-visible {
	background: var(--brand);
	transform: translateY(-1px);
}

/* Der Entwurf hat das Bild direkt in .ph liegen. Hier umschließt es ein Link
   auf die Produktseite – der muss die Fläche vollständig ausfüllen. */
.card .ph > a {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- Verwandte Produkte ----------------------------------------------------
   WooCommerce liefert diesen Bereich außerhalb der normalen Shop-Raster aus.
   Die eigene Template-Datei verwendet deshalb wieder das vertraute .grid. */

.related-products-section {
	padding-block: 84px 96px;
	border-top: 1px solid var(--line);
}

.related-products-section > h2 {
	margin-bottom: 36px;
	font-size: clamp(28px, 3vw, 42px);
}

@media (max-width: 720px) {
	.related-products-section {
		padding-block: 60px 72px;
	}

	.related-products-section > h2 {
		margin-bottom: 26px;
	}
}

/* --- Filterspalte -----------------------------------------------------------
   Im Entwurf sind das Checkboxen. Hier sind es echte Links, damit jede
   Kategorie eine eigene, indexierbare und übersetzbare URL bekommt. Optik
   übernimmt die Regeln von .filt label. */

.filt .grp a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 14.5px;
	color: var(--ink-2);
	padding: 5px 0;
}

.filt .grp a:hover {
	color: var(--ink);
}

.filt .grp a.on {
	color: var(--brand);
	font-weight: 500;
}

.filt .grp a.sub {
	padding-inline-start: 16px;
	font-size: 13.5px;
}

.filt .grp a .n {
	color: var(--muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.filt .grp a.reset {
	color: var(--muted);
	font-size: 12.5px;
	text-decoration: underline;
	margin-top: 6px;
}

.mobile-filter-head,
.mobile-filter-toggle,
.shop-filter-shade {
	display: none;
}

@media (max-width: 1080px) {
	.shoplay {
		display: block;
	}

	.mobile-filter-toggle {
		display: inline-flex;
		min-height: 42px;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 0 15px;
		border: 1px solid var(--line-2);
		border-radius: var(--r);
		background: #fff;
		color: var(--ink);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .04em;
	}

	.mobile-filter-toggle:hover,
	.mobile-filter-toggle:focus-visible {
		border-color: var(--brand);
		color: var(--brand);
	}

	.mobile-filter-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		margin-bottom: 26px;
		padding-bottom: 18px;
		border-bottom: 1px solid var(--line);
	}

	.mobile-filter-head h3 {
		font-size: 19px;
	}

	.mobile-filter-close {
		display: grid;
		width: 38px;
		height: 38px;
		flex: none;
		place-items: center;
		border: 1px solid var(--line);
		border-radius: 50%;
		font-size: 24px;
		line-height: 1;
	}

	.filt {
		position: fixed;
		z-index: 91;
		inset-block: 0;
		inset-inline-start: 0;
		width: min(360px, calc(100% - 44px));
		overflow-y: auto;
		padding: 24px 26px 40px;
		background: #fff;
		box-shadow: 18px 0 50px rgba(21, 18, 26, .16);
		transform: translateX(-105%);
		transition: transform .28s ease;
	}

	[dir="rtl"] .filt {
		transform: translateX(105%);
	}

	.filt.is-open,
	[dir="rtl"] .filt.is-open {
		transform: translateX(0);
	}

	.shop-filter-shade {
		position: fixed;
		z-index: 90;
		inset: 0;
		display: block;
		background: rgba(21, 18, 26, .44);
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}

	.shop-filter-open {
		overflow: hidden;
	}

	.shop-filter-open .shop-filter-shade {
		opacity: 1;
		pointer-events: auto;
	}

	body.admin-bar .filt,
	body.admin-bar .shop-filter-shade {
		inset-block-start: 32px;
	}

	.shoptop {
		flex-wrap: wrap;
		gap: 12px;
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar .filt,
	body.admin-bar .shop-filter-shade {
		inset-block-start: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .filt,
	body.admin-bar .shop-filter-shade {
		inset-block-start: 0;
	}
}

@media (max-width: 480px) {
	.shoptop > :first-child {
		flex: 1 1 100%;
	}

	.shoptop > .n,
	.mobile-filter-toggle {
		flex: 1 1 100%;
		width: 100%;
	}

	.shoptop .woocommerce-ordering,
	.shoptop .woocommerce-ordering select {
		width: 100%;
	}
}

/* Sortierung sitzt rechts in .shoptop */
.shoptop .woocommerce-ordering select {
	font: inherit;
	font-size: 13.5px;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 7px 10px;
	background: #fff;
}

/* --- Galerie mit nur einem Bild --------------------------------------------- */

.gal-single {
	grid-template-columns: minmax(0, 1fr);
}

/* --- Kaufen-Formular --------------------------------------------------------
   WooCommerce gibt <form class="cart"> mit einem Zahlenfeld und einem Knopf
   aus. Der Entwurf sieht .buy mit .qty und .btn vor – hier die Brücke. */

.pdp form.cart {
	display: flex;
	gap: 12px;
	margin-top: 30px;
	align-items: stretch;
	flex-wrap: wrap;
}

.pdp form.cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	height: 52px;
}

.pdp form.cart .quantity input[type="number"] {
	width: 68px;
	height: 100%;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	text-align: center;
	color: var(--ink);
}

.pdp form.cart button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 30px;
	flex: 1 1 200px;
	background: var(--ink);
	color: #fff;
	border: 0;
	border-radius: var(--r);
	font-family: var(--fd);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s;
}

.pdp form.cart button[type="submit"]:hover {
	background: var(--brand);
}

[dir="rtl"] .pdp form.cart button[type="submit"] {
	letter-spacing: 0;
	text-transform: none;
	font-size: 14px;
}

.pdp .stock.is-out {
	color: var(--muted);
}

.pdp .stock.is-out i {
	background: var(--muted);
}

/* Vertrauenszeile unter dem Kaufen-Bereich */
.pdp .trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 22px;
	font-size: 13px;
	color: var(--muted);
}

/* --- Podcast ----------------------------------------------------------------
   Der Prototyp verlinkt die Standbilder nach YouTube. Hier wird stattdessen
   im Rahmen abgespielt, deshalb ein paar Ergänzungen zu support-pages.css. */

.podcast-episode-media {
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.podcast-episode-media .podcast-play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	cursor: pointer;
}

[dir="rtl"] .podcast-episode-media .podcast-play {
	transform: translate(50%, -50%);
}

.podcast-episode-media.is-playing {
	aspect-ratio: 16 / 9;
	background: #000;
}

.podcast-episode-media.is-playing iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.podcast-episode-media:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 4px;
}

.podcast-guest {
	color: var(--muted);
	font-size: 13.5px;
	margin-top: 6px;
}

/* --- Blätterung -------------------------------------------------------------- */

.woocommerce-pagination ul,
.navigation .nav-links {
	display: flex;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 48px 0 0;
	justify-content: center;
}

.woocommerce-pagination a,
.woocommerce-pagination span,
.navigation .nav-links a,
.navigation .nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line-2);
	border-radius: 100px;
	font-size: 13.5px;
}

.woocommerce-pagination .current,
.navigation .nav-links .current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	max-width: var(--maxw);
	margin: 0 auto 24px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-inline-start: 3px solid var(--brand);
	background: var(--soft);
	list-style: none;
	font-size: 14px;
}

.woocommerce-error {
	border-inline-start-color: #C0392B;
}

/* Preisdarstellung: WooCommerce packt Angebotspreise in <del>/<ins> */
.pr del,
.price del {
	color: var(--muted);
	font-weight: 400;
	margin-inline-end: 6px;
}

.pr ins,
.price ins {
	text-decoration: none;
	color: var(--brand);
}

/* Ausverkauft */
.card.is-outofstock .ph::after {
	content: attr(data-oos);
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	background: rgba(21, 18, 26, .82);
	color: #fff;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	padding: 9px 6px;
}

/* Screenreader-Text nach WordPress-Konvention */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Sprunglink für Tastaturbedienung */
.skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 16px;
	z-index: 999;
	background: var(--ink);
	color: #fff;
	padding: 10px 16px;
	transition: inset-block-start .2s;
}

.skip-link:focus {
	inset-block-start: 16px;
}

/* ---------------------------------------------------------------------------
   Kopfleiste: Sprachumschalter und Logo-Umschaltung
   ---------------------------------------------------------------------------
   Ziel ist, dass sich links (Menü + Logo) und rechts (Sprachen, Suche,
   Warenkorb) auf keiner Breite überschneiden. Der Entwurf blendet den
   Sprachumschalter unter 1010 px aus; hier bleibt er sichtbar und schrumpft
   stattdessen mit. */

/* Die Spalten müssen auf null schrumpfen dürfen.
   Eine Grid-Spalte mit "auto" ist mindestens so breit wie ihr Inhalt und
   wächst notfalls über den Container hinaus – genau so entsteht die
   Überlappung: Die linke Gruppe schiebt sich unter die rechte. minmax(0,…)
   nimmt ihr diese Mindestbreite. Zusammen mit overflow:hidden an der linken
   Gruppe kann sich nichts mehr überlagern, selbst wenn eine Medienabfrage
   nicht greifen sollte – der Schriftzug wird dann beschnitten statt
   übereinandergelegt. */
header {
	grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
}

/* WordPress legt die Adminleiste fix über die Seite. Angemeldete Redakteure
   brauchen deshalb denselben Versatz für Sticky-Header und Warenkorb-Drawer;
   Besucher ohne Adminleiste bleiben unverändert bei top: 0. */
body.admin-bar header {
	top: 32px;
}

body.admin-bar .cart-drawer {
	inset-block-start: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar header {
		top: 46px;
	}

	body.admin-bar .cart-drawer {
		inset-block-start: 46px;
	}
}

/* WordPress setzt die Adminleiste bis 600 px auf position:absolute. Sie scrollt
   dadurch aus dem Bild; ein dauerhafter 46-px-Versatz wuerde oberhalb des
   Sticky-Headers eine sichtbare Luecke hinterlassen. */
@media screen and (max-width: 600px) {
	body.admin-bar header {
		top: 0;
	}

	body.admin-bar .cart-drawer {
		inset-block-start: 0;
	}
}

.hd-left {
	min-width: 0;
	/* Ohne max-width bleibt die Gruppe auf ihrer Inhaltsbreite stehen und
	   wächst über die Grid-Spalte hinaus – justify-self:start erlaubt das. */
	max-width: 100%;
	flex-wrap: nowrap;
	overflow: hidden;
}

.brand {
	overflow: hidden;
}

.logo-h,
.logo-mini {
	flex: none;
}

.hd-right {
	min-width: 0;
	flex-wrap: nowrap;
	flex: none;
}

.hd-nav {
	min-width: 0;
	overflow: hidden;
}

/* --- Außenabstand der Kopfleiste richtungsneutral ---------------------------
   Der Entwurf setzt den Abstand physisch: .hd-left bekommt padding-left,
   .hd-right bekommt padding-right. Das stimmt nur im lateinischen Satz. Im
   Arabischen tauscht das Grid die beiden Gruppen, der Abstand bleibt aber an
   derselben physischen Seite stehen – also innen. Außen liegen Logo und
   Warenkorb dann direkt an der Fensterkante.

   Deshalb hier auf logische Eigenschaften umgestellt: padding-inline-start
   ist im Lateinischen links, im Arabischen rechts. Die drei Stufen des
   Entwurfs (40 / 24 / 20 px) werden dabei vollständig nachgezogen, sonst
   würde die unbedingte Grundregel von hier die Medienabfragen des Entwurfs
   überschreiben und der Abstand schrumpfte auf schmalen Fenstern nicht mehr
   mit. Reihenfolge im Quelltext = Reihenfolge der Stufen. */
.hd-left {
	padding: 20px 0;
	padding-inline-start: 40px;
}

.hd-right {
	padding: 20px 0;
	padding-inline-end: 40px;
}

header.small .hd-left {
	padding: 11px 0;
	padding-inline-start: 40px;
}

header.small .hd-right {
	padding: 11px 0;
	padding-inline-end: 40px;
}

@media (max-width: 1180px) {
	.hd-left {
		padding-inline-start: 24px;
	}

	.hd-right {
		padding-inline-end: 24px;
	}
}

@media (max-width: 1010px) {
	.hd-left {
		padding: 14px 0;
		padding-inline-start: 20px;
	}

	.hd-right {
		padding: 14px 0;
		padding-inline-end: 20px;
	}

	header.small .hd-left {
		padding: 10px 0;
		padding-inline-start: 20px;
	}

	header.small .hd-right {
		padding: 10px 0;
		padding-inline-end: 20px;
	}
}

.brand {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	flex: 0 1 auto;
}

/* Beide Logos stehen im Markup; sichtbar ist immer genau eines. */
.logo-mini {
	display: none;
	height: 26px;
	width: auto;
	color: var(--brand);
	transition: height .26s ease;
}

header.small .logo-mini {
	height: 22px;
}

/* --- Sprachumschalter: Flagge über Kürzel ---------------------------------- */

.lang {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.lang-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	line-height: 1;
	padding: 2px 0 3px;
	position: relative;
	transition: opacity .18s;
}

.lang-flag {
	display: block;
	width: 21px;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(21, 18, 26, .16);
	/* Alle drei Flaggendateien haben das Seitenverhaeltnis 3:2, die Kaesten
	   ebenso – so entsteht kein Leerraum zwischen Bild und Umrandung. Das
	   Union Jack liegt in Wirklichkeit bei 1:2; die Datei ist deshalb auf 3:2
	   neu gezeichnet, nicht gestaucht. object-fit bleibt als Absicherung
	   stehen, falls spaeter eine Flagge mit anderem Verhaeltnis dazukommt. */
	object-fit: cover;
}

.lang-code {
	font-size: 9.5px;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--muted);
	transition: color .18s;
}

.lang-item:hover .lang-code {
	color: var(--ink);
}

.lang-item.on .lang-code {
	color: var(--ink);
}

/* Aktive Sprache: schmaler Balken in der Markenfarbe, wie bei der Navigation */
.lang-item.on::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -2px;
	height: 2px;
	background: var(--brand);
	border-radius: 2px;
}

[dir="rtl"] .lang-code {
	letter-spacing: .06em;
}

/* --- Breiten ---------------------------------------------------------------
   Die Werte sind gemessen, nicht geschätzt: Kopfleiste in allen drei Sprachen
   an 641 Breiten von 320 bis 1440 px gerendert (1 px Schritte bis 800 px,
   danach 4 px) und je Breite geprüft auf Abstand linke/rechte Gruppe, Abstand
   Navigation zu beiden Seiten, Beschnitt des Logos gegen seine viewBox-Breite,
   horizontalen Überlauf und Sichtbarkeit des Umschalters. 1923 Messungen,
   keine Beanstandung. Engste Stelle: 20 px Restabstand bei 1012 px. */

@media (max-width: 1010px) {
	/* Der Entwurf blendet den Umschalter hier aus – wir behalten ihn. */
	.hd-right > .lang {
		display: flex;
	}
}

@media (max-width: 700px) {
	.lang {
		gap: 7px;
	}

	.lang-flag {
		width: 18px;
		height: 12px;
	}

	.lang-code {
		font-size: 9px;
	}
}

@media (max-width: 480px) {
	.lang {
		gap: 5px;
	}

	.lang-flag {
		width: 16.5px;
		height: 11px;
	}

	.lang-code {
		font-size: 8.5px;
		letter-spacing: .05em;
	}
}

/* Letzter Ausweg: Schriftzug weicht der Bildmarke.
   Die Grenze ist gemessen, nicht geschätzt: Unterhalb von 438 px bekommt der
   Schriftzug nicht mehr seine volle Breite und würde beschnitten – in allen
   drei Sprachen an derselben Stelle. 440 px ist der erste Wert, ab dem er
   vollständig steht. Darunter übernimmt die Bildmarke.

   Ausdrücklich nur in der Kopfleiste: ohne diese Einschränkung galt die Regel
   für jeden Schriftzug auf der Seite und ließ auch den in der Fußzeile
   verschwinden – dort steht aber keine Bildmarke bereit, die einspringt. Die
   Container-Abfrage weiter unten braucht das nicht, sie wirkt ohnehin nur
   innerhalb der Kopfleiste. */
@media (max-width: 440px) {
	header .logo-h {
		display: none;
	}

	header .logo-mini {
		display: block;
	}
}

/* Ganz schmale Geräte: Flaggen noch eine Spur kleiner, damit auch bei
   dreistelligem Warenkorbzähler Luft bleibt. */
@media (max-width: 380px) {
	.lang {
		gap: 4px;
	}

	.lang-flag {
		width: 15px;
		height: 10px;
	}

	.lang-code {
		font-size: 8px;
		letter-spacing: .03em;
	}
}

/* ---------------------------------------------------------------------------
   Zweiter Riegel: Umschaltung ohne Medienabfrage
   ---------------------------------------------------------------------------
   Die Regel oben hängt an der Viewport-Breite. Meldet ein Browser eine andere
   Breite als erwartet – etwa weil eine Seite in einem Rahmen steckt oder das
   Gerät den Layout-Viewport anders bestimmt –, greift sie nicht.

   Container-Abfragen messen stattdessen die tatsächliche Breite der Kopfleiste
   selbst. Beide Wege führen zum selben Ergebnis; fällt einer aus, trägt der
   andere. */

header {
	container-type: inline-size;
	container-name: kopfleiste;
}

@container kopfleiste (max-width: 440px) {
	.logo-h {
		display: none;
	}

	.logo-mini {
		display: block;
	}
}

@container kopfleiste (max-width: 480px) {
	.lang {
		gap: 5px;
	}

	.lang-flag {
		width: 16.5px;
		height: 11px;
	}

	.lang-code {
		font-size: 8.5px;
		letter-spacing: .05em;
	}
}

@container kopfleiste (max-width: 700px) {
	.lang {
		gap: 7px;
	}

	.lang-flag {
		width: 18px;
		height: 12px;
	}
}

/* ---------------------------------------------------------------------------
   Video-Hero der Startseite
   ---------------------------------------------------------------------------
   Das Video ist nur die bewegte Hintergrundebene. Figur, Text und CTA liegen
   als echte Seitenelemente darueber und bleiben dadurch auf jedem Format
   scharf, bedienbar und uebersetzbar. Der helle Streifen am unteren Rand
   gehoert zur Kundenvorlage; die Figur ragt in ihn hinein. */

.hero-video {
	position: relative;
	height: min(calc(100svh - var(--kopfhoehe)), 56.25vw);
	min-height: 560px;
	overflow: hidden;
	background: #fff;
	isolation: isolate;
}

.hero-video-media {
	position: absolute;
	z-index: -2;
	inset: 0 0 clamp(38px, 4vw, 68px);
	overflow: hidden;
	background: #6a0d50;
}

.hero-video-media::after {
	position: absolute;
	inset: 0;
	background: rgba(91, 5, 66, .28);
	content: "";
}

.hero-video-bg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero-video-figure-frame {
	position: absolute;
	z-index: 2;
	inset-block: 0;
	left: 0;
	width: 45%;
	overflow: hidden;
	pointer-events: none;
}

.hero-video-figure {
	position: absolute;
	bottom: -20%;
	left: 0;
	width: auto;
	max-width: none;
	height: 135%;
	transform: translateX(-31%);
	pointer-events: none;
	user-select: none;
}

.hero-video-copy {
	position: absolute;
	z-index: 3;
	top: 48%;
	left: 64%;
	width: min(58vw, 850px);
	color: #fff;
	text-align: center;
	transform: translate(-50%, -50%);
}

.hero-video-copy h1 {
	margin: 0;
	font-family: var(--fb);
	font-size: clamp(20px, 2vw, 31px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: .01em;
}

.hero-video-kicker,
.hero-video-intro {
	margin-inline: auto;
	font-size: clamp(20px, 1.95vw, 34px);
	font-weight: 400;
	line-height: 2;
	text-wrap: balance;
}

.hero-video-kicker {
	margin-block: clamp(10px, 1.25vw, 18px) 0;
}

.hero-video-intro {
	max-width: 48ch;
	margin-block: clamp(6px, .8vw, 12px) 0;
	text-wrap: wrap;
}

.hero-video-cta {
	display: inline-flex;
	min-width: clamp(230px, 24vw, 360px);
	height: clamp(52px, 5vw, 72px);
	align-items: center;
	justify-content: center;
	margin-top: clamp(20px, 2.5vw, 36px);
	padding-inline: clamp(28px, 4vw, 58px);
	border-radius: 999px;
	background: #e31aa6;
	box-shadow: 0 12px 30px rgba(60, 0, 41, .18);
	color: #fff;
	font-family: var(--fd);
	font-size: clamp(22px, 2.4vw, 35px);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hero-video-cta:hover,
.hero-video-cta:focus-visible {
	background: #f026b5;
	box-shadow: 0 16px 34px rgba(60, 0, 41, .28);
	color: #fff;
	transform: translateY(-2px);
}

@keyframes malak-hero-copy-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes malak-hero-figure-in {
	from {
		opacity: 0;
		transform: translateX(-62%);
	}

	to {
		opacity: 1;
		transform: translateX(-31%);
	}
}

@media (min-width: 768px) {
	.hero-video-copy {
		animation: malak-hero-copy-in 1.35s .3s ease-out both;
	}

	.hero-video-figure {
		animation: malak-hero-figure-in 1.2s .05s cubic-bezier(.22, .74, .22, 1) both;
	}
}

.hero-video-cta:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

[dir="rtl"] .hero-video-copy h1 {
	font-family: var(--fb);
	line-height: 1.25;
}

[dir="rtl"] .hero-video-kicker,
[dir="rtl"] .hero-video-intro {
	line-height: 2;
}

[dir="rtl"] .hero-video-cta {
	font-family: var(--fa);
	font-size: clamp(19px, 2.2vw, 31px);
	letter-spacing: 0;
	text-transform: none;
}

@media (max-width: 767px) {
	.hero-video {
		height: clamp(500px, 105vw, 580px);
		min-height: 0;
	}

	.hero-video-media {
		inset-block-end: clamp(58px, 13vw, 72px);
	}

	.hero-video-bg {
		object-position: center;
	}

	.hero-video-figure-frame {
		left: clamp(-190px, -35vw, -110px);
		width: 100%;
	}

	.hero-video-figure {
		bottom: -18%;
		height: 110%;
		transform: translateX(-31%);
	}

	.hero-video-copy {
		top: clamp(34px, 8vw, 48px);
		left: 10%;
		width: 100%;
		transform: none;
	}

	.hero-video-copy h1 {
		font-size: clamp(16px, 4vw, 22px);
		line-height: 1.3;
	}

	.hero-video-kicker,
	.hero-video-intro {
		font-size: clamp(16px, 4vw, 21px);
		line-height: 1.65;
	}

	.hero-video-kicker {
		max-width: 14ch;
		margin-top: clamp(8px, 2vw, 12px);
	}

	.hero-video-intro {
		max-width: 22ch;
		margin-top: 2px;
	}

	.hero-video-cta {
		min-width: 0;
		height: clamp(42px, 9vw, 50px);
		margin-top: clamp(14px, 3vw, 20px);
		padding-inline: clamp(18px, 5vw, 28px);
		font-size: clamp(18px, 4.7vw, 25px);
	}

	[dir="rtl"] .hero-video-kicker,
	[dir="rtl"] .hero-video-intro {
		line-height: 1.8;
	}

	[dir="rtl"] .hero-video-cta {
		font-size: clamp(16px, 4.3vw, 22px);
	}

}

@media (prefers-reduced-motion: reduce) {
	.hero-video-bg {
		display: none;
	}

	.hero-video-copy {
		animation: none;
	}

	.hero-video-figure {
		animation: none;
	}

	.hero-video-cta {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Vorheriger Hero der Startseite
   ---------------------------------------------------------------------------
   Gestapelt und mittig: Überschrift, rosa Zeile, freigestellte Illustration,
   Schaltfläche. Das Band läuft ohne .wrap bis an den Fensterrand – die
   Textblöcke darin holen sich die Satzbreite einzeln zurück.

   Der Hintergrundton ist derselbe, auf den die Bilddateien flachgerechnet
   sind (#FBF6F7). Beides muss zusammenbleiben: ändert sich der Ton hier,
   müssen die WebP-Dateien neu aus dem freigestellten flowerpower.png
   erzeugt werden, sonst steht die Illustration in einem sichtbaren
   Kasten. */

.hero-flower {
	background: #FBF6F7;
	text-align: center;
	padding-block-start: clamp(30px, 4.2vw, 52px);
}

.hero-flower-copy {
	max-width: var(--maxw);
	margin: 0 auto;
	padding-inline: 24px;
}

.hero-flower h1 {
	font-size: clamp(31px, 5.2vw, 60px);
	line-height: 1.06;
	letter-spacing: -.028em;
	margin: 0;
	/* Der Umbruch steht als \n in copy.json, weil er je Sprache woanders
	   sitzt. balance fängt ab, wenn eine Übersetzung zusätzlich umbricht. */
	text-wrap: balance;
}

[dir="rtl"] .hero-flower h1 {
	letter-spacing: 0;
	line-height: 1.35;
}

.hero-flower-sig {
	margin: clamp(12px, 1.4vw, 18px) auto 0;
	max-width: 42ch;
	color: var(--brand);
	font-size: clamp(15.5px, 1.55vw, 21px);
	line-height: 1.5;
	font-weight: 500;
}

.hero-flower-intro {
	max-width: 62ch;
	margin: clamp(8px, 1vw, 12px) auto 0;
	color: var(--muted);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.55;
	text-wrap: balance;
}

.hero-flower-sig em {
	font-style: italic;
}

/* Arabisch kennt keine Kursive; die Textquelle setzt dort auch keine
   Markierung. Die Regel steht als Absicherung, falls doch eine hineingerät. */
[dir="rtl"] .hero-flower-sig em {
	font-style: normal;
	font-weight: 700;
}

.hero-flower-art {
	margin-top: clamp(16px, 2.4vw, 30px);
}

.hero-flower-art img {
	width: 100%;
	/* Randlos bis 1120 px, danach steht sie still. */
	max-width: 1120px;
	height: auto;
	margin-inline: auto;
}

/* Ab Tabletbreite füllt der Hero genau eine Bildschirmhöhe -----------------
   Statt die Illustration mit einem festen Deckel zu begrenzen, bekommt der
   Abschnitt die Höhe und die Illustration den Rest. Gerechnet wird nicht in
   CSS, sondern vom Flex-Layout: Überschrift und Schaltfläche nehmen sich,
   was sie brauchen, das Bildfeld bekommt mit flex:1 alles Übrige und die
   Illustration passt sich mit height:100% ein.

   Das ist der Grund, warum hier kein calc() steht: eine Rechnung
   100vh minus Überschrift minus Schaltfläche müsste die Texthöhe kennen,
   und die ist je Sprache verschieden – die arabische Überschrift ist bei
   1440 px 162 px hoch, die englische 127 px. Flexbox misst das selbst.

   min-height statt height, damit der Abschnitt notfalls wachsen darf: wenn
   eine Übersetzung länger umbricht als erwartet, wird der Text nicht
   abgeschnitten, sondern der Hero etwas höher als eine Bildschirmhöhe.
   min-height:0 am Bildfeld ist dabei Pflicht – ohne das weigert sich ein
   Flex-Element, unter die Höhe seines Inhalts zu schrumpfen, und die
   Illustration würde den Abschnitt aufblähen statt sich einzupassen. */
/* Standardwert, bis app.js gemessen hat – und der Wert, mit dem die Seite
   ohne JavaScript auskommt. 110 px entsprechen Versandhinweis plus
   Kopfleiste im ungescrollten Zustand auf einem 1440er Fenster. */
:root {
	--kopfhoehe: 110px;
}

@media (min-width: 768px) {
	.hero-flower {
		/* Eine Bildschirmhöhe abzüglich dessen, was darüber steht. Nur so
		   liegt auch die Schaltfläche noch im sichtbaren Bereich – mit
		   vollen 100vh endete sie genau um die Höhe der Kopfleiste
		   darunter. */
		min-height: calc(100vh - var(--kopfhoehe));
		display: flex;
		flex-direction: column;
	}

	.hero-flower-art {
		/* Basis 0, nicht auto: bei auto leitet der Browser die Höhe des
		   Feldes aus dem Bild ab, und height:100% am Bild bezieht sich dann
		   auf sich selbst. Diesen Zirkel löst er, indem er die natürliche
		   Bildhöhe nimmt – der Abschnitt wurde damit 1051 statt 900 px hoch.
		   Mit Basis 0 kommt die Höhe allein aus dem freien Platz und ist
		   damit eindeutig. */
		flex: 1 1 0;
		min-height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hero-flower-art img {
		width: auto;
		height: 100%;
		max-height: 100%;
		max-width: min(1120px, 100%);
		object-fit: contain;
	}
}

.hero-flower-cta {
	padding: clamp(6px, 1.2vw, 14px) 24px clamp(40px, 4.6vw, 64px);
}

.hero-flower-cta .btn.p {
	background: var(--brand);
	min-width: min(260px, 74vw);
}

.hero-flower-cta .btn.p:hover {
	background: var(--ink);
}

.hero-flower-arrow {
	flex: none;
}

[dir="rtl"] .hero-flower-arrow {
	transform: scaleX(-1);
}

/* --- Der frühere Hero, jetzt der Block darunter -----------------------------
   Zwei Spalten auf jeder Breite: links der Text, rechts das Foto. Der
   Prototyp stapelt .hero-in unterhalb von 1080 px und zentriert – für den
   Hero war das richtig, für diesen Streifen nicht: gestapelt verliert er
   den Charakter eines Banners und schiebt den Shop-Link weit nach unten.

   Alle Regeln hier sind zwei Klassen tief (.hero-intro .hero-in), die des
   Prototyps nur eine (.hero-in). Sie gewinnen damit über Spezifität und
   nicht über die Reihenfolge – eine Medienabfrage kann sie also nicht
   überstimmen, egal wo sie steht. Was der Prototyp unterhalb von 1080 px
   zusätzlich setzt (margin:auto, justify-self:center, max-width am Bild),
   muss deshalb einzeln zurückgenommen werden. */

.hero-intro .hero-in {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	gap: clamp(10px, 1.8vw, 28px);
	padding-inline-start: clamp(18px, 3.4vw, 60px);
	text-align: start;
	align-items: center;
}

.hero-intro .cp {
	padding-block: clamp(20px, 3vw, 52px);
	padding-inline: 0;
	margin: 0;
}

/* Im Entwurf ist die Augenbraue grau. Hier trägt sie den Markenton – sie
   ist auf dieser Höhe das erste farbige Element und hält den Streifen
   optisch mit dem Hero darüber zusammen. */
.hero-intro .eyebrow {
	color: var(--brand);
	font-weight: 700;
}

.hero-intro h2 {
	font-size: clamp(18px, 2.6vw, 42px);
	line-height: 1.14;
	margin: clamp(6px, .8vw, 12px) 0 0;
	max-width: 18ch;
}

[dir="rtl"] .hero-intro h2 {
	letter-spacing: 0;
	line-height: 1.4;
}

.hero-intro p.s {
	font-size: clamp(11.5px, 1.15vw, 16.5px);
	line-height: 1.6;
	margin: clamp(8px, 1vw, 16px) 0 0;
	margin-inline: 0;
	max-width: 38ch;
}

.hero-intro .cta {
	margin-top: clamp(12px, 1.6vw, 26px);
	justify-content: flex-start;
	gap: 18px;
}

/* Auf schmalen Fenstern ist .link mit white-space:nowrap und 12,5 px zu
   breit für die halbe Spalte. Umbrechen darf er nicht – "SHOP ALL TEAS"
   auf zwei Zeilen mit Unterstrich sieht nach Fehler aus –, also schrumpft
   die Schrift stattdessen mit. */
.hero-intro .cta .link {
	font-size: clamp(10px, .95vw, 12.5px);
	letter-spacing: clamp(.06em, .5vw, .12em);
}

[dir="rtl"] .hero-intro .cta .link {
	font-size: clamp(12px, 1.1vw, 15px);
	letter-spacing: 0;
}

.hero-intro .im {
	align-self: center;
	justify-self: end;
	max-width: none;
	padding: 0;
}

/* Unter 720 px schließt der Streifen direkt an den Hero an. Der Prototyp
   setzt dort .hero{padding:22px 0 32px} – die 22 px oben stammen aus einer
   Zeit, in der .hero das erste Element der Seite war. Jetzt steht der Hero
   darüber und bringt seinen eigenen Abstand mit; die 22 px kämen obendrauf.
   Unten bleiben die 32 px stehen. */
@media (max-width: 720px) {
	.hero-intro {
		padding-block-start: 0;
	}

	/* Auf dem Handy ohne abgerundete Ecken – dieselbe Grenze wie oben, damit
	   der Streifen nicht in einem Zwischenbereich halb rund und halb eckig
	   steht. Die Umrandung bleibt, nur der Radius fällt weg. */
	.hero-intro .hero-in {
		border-radius: 0;
	}
}

/* --- Vertrauensleiste, zweispaltig -----------------------------------------
   Unterhalb von 1080 px stellt der Prototyp die vier Felder von einer Reihe
   auf zwei um. Die Trennlinien stimmen dann nicht mehr:

   Er nimmt die senkrechte Linie nur dem ersten Feld (:first-child). Bei
   vier Feldern in einer Reihe ist das richtig. Bei zwei Reihen fehlt sie
   dem dritten – dort hängt sie am linken Rand in der Luft, ohne dass links
   davon etwas steht.

   Und zwischen den beiden Reihen fehlt eine waagerechte Linie, die es bei
   einer einzigen Reihe nicht zu geben brauchte. Ohne sie lesen sich die
   Felder als zwei hohe Spalten statt als vier Kacheln.

   border-block-start statt border-top, damit die Regel im Arabischen
   dasselbe tut. */
@media (max-width: 1080px) {
	.usp div:nth-child(odd) {
		border-inline-start: 0;
	}

	.usp div:nth-child(n + 3) {
		border-block-start: 1px solid var(--line);
	}
}

/* --- Vertrauenskarten statt Bewertungen ------------------------------------
   Solange es weniger als drei freigegebene Bewertungen gibt, stehen an der
   Stelle drei Karten mit dem, was heute schon belegt werden kann. Sie sitzen
   im selben Raster und teilen sich mit .review Rahmen und Polsterung – nur
   der Inhalt ist ein anderer, deshalb tragen sie beide Klassen. */

.trustcard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.trustcard-icon {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--brand);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.trustcard-t {
	display: block;
	margin-top: 18px;
	font-family: var(--fd);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
}

[dir="rtl"] .trustcard-t {
	font-family: var(--fa);
	letter-spacing: 0;
	line-height: 1.5;
}

.trustcard-s {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ink-2);
}

/* Der Link soll unten stehen, auch wenn die Karten daneben mehr Text haben –
   sonst tanzen drei Links auf drei Höhen. margin-block-start:auto schiebt ihn
   im Flex-Kasten ans Ende. */
.trustcard .link {
	margin-block-start: auto;
	padding-block-start: 22px;
	white-space: normal;
}

/* --- Initialen statt Porträt ------------------------------------------------
   WooCommerce speichert zu einer Bewertung nur den Namen. Der Kreis aus dem
   Entwurf bleibt, gefüllt mit dem Anfangsbuchstaben – kein Gravatar, also
   keine Anfrage an einen Dritten mit der Mailadresse des Kunden. */

.review-person .review-initial {
	/* Zwei Klassen tief, weil der Entwurf mit .review-person span jedes span
	   in dieser Zeile erwischt – die Zeile unter dem Namen ist auch eines.
	   Ohne die höhere Spezifität würde daraus display:block, 12 px und die
	   Markenfarbe, und der Buchstabe stünde blass und winzig im Kreis. */
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--brand-t);
	color: var(--brand-d);
	font-family: var(--fd);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	margin-top: 0;
	text-transform: uppercase;
}

/* Eine Bewertung kann in einer anderen Sprache verfasst sein als die Seite,
   auf der sie steht. Das Zitat bekommt dann lang und dir aus dem Beitrag –
   und hier die passende Schrift und Ausrichtung dazu. */
.review blockquote[dir="rtl"] {
	font-family: var(--fa);
	font-style: normal;
	text-align: start;
	line-height: 1.85;
}

.review blockquote[dir="ltr"] {
	text-align: start;
}

/* Bei mehr als drei Stimmen bleibt das sichtbare Dreier-Raster unverändert,
   die bestehende Reihe lässt sich jedoch nativ horizontal durchwischen. */
.reviews .review-grid.is-swipeable {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.reviews .review-grid.is-swipeable::-webkit-scrollbar {
	display: none;
}

.reviews .review-grid.is-swipeable > .review {
	box-sizing: border-box;
	min-width: 0;
	flex: 0 0 33.333333%;
	scroll-snap-align: start;
}

.reviews .review-grid.is-swipeable:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 4px;
}

@media (max-width: 640px) {
	.reviews .review-grid.is-swipeable > .review {
		flex-basis: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Bewertungen auf der Produktseite
   ---------------------------------------------------------------------------
   Das Markup kommt unverändert von WooCommerce (single-product-reviews.php).
   Angeglichen wird hier nur die Optik – so bleibt das Template bei einem
   Update von WooCommerce auf dessen Stand und muss nicht nachgezogen werden. */

section.product-reviews.pad.wrap {
	max-width: var(--maxw);
	padding: 0 40px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.product-reviews-toggle > summary {
	display: flex;
	align-items: center;
	min-height: 78px;
	padding: 20px 0;
	font-family: var(--fd);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 700;
	letter-spacing: -.02em;
	cursor: pointer;
	list-style: none;
}

.product-reviews-toggle > summary::-webkit-details-marker {
	display: none;
}

.product-reviews-count {
	margin-inline-start: 8px;
	color: var(--muted);
	font-family: var(--fb);
	font-size: .62em;
	font-weight: 500;
	letter-spacing: 0;
}

.product-reviews-icon {
	position: relative;
	width: 18px;
	height: 18px;
	margin-inline-start: auto;
	flex: none;
}

.product-reviews-icon::before,
.product-reviews-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity .2s ease, transform .2s ease;
}

.product-reviews-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.product-reviews-toggle[open] .product-reviews-icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.product-reviews-toggle > summary:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 4px;
}

.product-reviews-content {
	padding: 4px 0 56px;
}

.product-reviews-content .woocommerce-Reviews-title {
	display: none;
}

[dir="rtl"] .product-reviews-toggle > summary {
	font-family: var(--fa);
	letter-spacing: 0;
}

.woocommerce-Reviews-title {
	font-family: var(--fd);
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 8px;
}

[dir="rtl"] .woocommerce-Reviews-title {
	font-family: var(--fa);
	letter-spacing: 0;
}

.woocommerce-Reviews .commentlist {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 0;
}

/* Namenskollision: WooCommerce gibt jeder Bewertung class="review" – dieselbe
   Klasse trägt im Prototyp die Stimmen-Kachel der Startseite mit
   padding:36px 34px und einer senkrechten Trennlinie. Beides muss hier weg,
   sonst stehen die Bewertungen eingerückt und mit einem Strich daneben. */
.woocommerce-Reviews .commentlist > li {
	padding: 26px 0;
	border-top: 1px solid var(--line);
	border-inline-start: 0;
}

.woocommerce-Reviews .commentlist > li:first-child {
	border-top: 0;
}

/* WooCommerce zeigt das Gravatar-Bild. Wir blenden es aus: es ist eine
   Anfrage an einen Dritten mit der gehashten Mailadresse des Kunden und
   liefert in aller Regel nur eine graue Silhouette. Der Name trägt die
   Zeile auch allein. */
.woocommerce-Reviews .commentlist .avatar {
	display: none;
}

.woocommerce-Reviews .comment-text {
	margin: 0;
}

.woocommerce-Reviews .woocommerce-review__author {
	font-family: var(--fd);
	font-size: 14px;
	font-weight: 700;
}

[dir="rtl"] .woocommerce-Reviews .woocommerce-review__author {
	font-family: var(--fa);
}

.woocommerce-Reviews .woocommerce-review__published-date {
	color: var(--muted);
	font-size: 12.5px;
	margin-inline-start: 10px;
}

.woocommerce-Reviews .description {
	margin-top: 10px;
	color: var(--ink-2);
	line-height: 1.7;
}

/* --- Abzeichen „Verifizierter Kauf“ ----------------------------------------
   WooCommerce setzt dieses <em> selbst, sobald die Mailadresse der Bewertung
   zu einer bezahlten Bestellung mit diesem Produkt passt. Aus dem beiläufigen
   Kursivtext wird hier ein Abzeichen – es ist das Vertrauenselement des
   ganzen Abschnitts und darf nicht wie eine Fußnote aussehen. */
.woocommerce-review__verified {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-inline-start: 10px;
	padding: 3px 9px;
	border-radius: 100px;
	background: rgba(47, 125, 93, .1);
	color: var(--ok);
	font-family: var(--fb);
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	vertical-align: middle;
}

[dir="rtl"] .woocommerce-review__verified {
	font-family: var(--fa);
	letter-spacing: 0;
	font-size: 12px;
}

.woocommerce-review__verified::before {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	background: currentColor;
	/* Häkchen im Kreis, als Maske – so folgt es der Textfarbe und kostet
	   keine zusätzliche Datei. */
	-webkit-mask: var(--malak-check) center / contain no-repeat;
	mask: var(--malak-check) center / contain no-repeat;
}

:root {
	--malak-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm3.5 5.2-4 4.3a.8.8 0 0 1-1.15 0L4.5 8.6a.8.8 0 1 1 1.15-1.1l1.28 1.35 3.42-3.7A.8.8 0 0 1 11.5 6.2Z'/%3E%3C/svg%3E");
}

/* --- Sterne ---------------------------------------------------------------- */

.woocommerce-Reviews .star-rating,
.woocommerce-product-rating .star-rating {
	color: #F2A826;
	letter-spacing: .12em;
}

/* --- Formular --------------------------------------------------------------- */

#review_form_wrapper {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

#review_form .comment-reply-title {
	display: block;
	font-family: var(--fd);
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 6px;
}

[dir="rtl"] #review_form .comment-reply-title {
	font-family: var(--fa);
}

#review_form .comment-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
	margin-top: 14px;
}

#review_form .comment-notes,
#review_form .comment-form-rating,
#review_form .comment-form-comment,
#review_form .comment-form-cookies-consent,
#review_form .form-submit {
	grid-column: 1 / -1;
}

#review_form .comment-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

#review_form .comment-form input[type="text"],
#review_form .comment-form input[type="email"],
#review_form .comment-form textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	padding: 12px 14px;
}

#review_form .comment-form textarea {
	height: 132px;
	min-height: 112px;
	resize: vertical;
	line-height: 1.6;
}

#review_form .comment-form input:focus-visible,
#review_form .comment-form textarea:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
	outline-offset: 1px;
	border-color: var(--brand);
}

#review_form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	color: var(--muted);
}

#review_form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

#review_form .form-submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: var(--r);
	background: var(--ink);
	color: #fff;
	font-family: var(--fd);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s;
}

[dir="rtl"] #review_form .form-submit input[type="submit"] {
	font-family: var(--fa);
	letter-spacing: 0;
	text-transform: none;
	font-size: 15px;
}

#review_form .form-submit input[type="submit"]:hover {
	background: var(--brand);
}

/* --- Sterneauswahl im Formular ----------------------------------------------
   WooCommerce gibt fünf Links aus, die per eigenem Skript ein verstecktes
   Feld setzen. Der Entwurf kennt das nicht, also hier vergrößert: mit 14 px
   ist die Auswahl auf einem Telefon kaum zu treffen. */

#review_form .comment-form-rating {
	margin-bottom: 0;
}

#review_form p.stars {
	margin: 2px 0 0;
}

#review_form p.stars > span {
	display: inline-flex;
	gap: 2px;
}

#review_form p.stars a {
	display: inline-grid;
	place-items: center;
	position: relative;
	font-size: 0;
	width: 34px;
	height: 34px;
	text-decoration: none;
}

#review_form p.stars a::before {
	content: "☆";
	display: block;
	font-size: 24px;
	line-height: 34px;
	color: #F2A826;
}

#review_form p.stars:hover a::before,
#review_form p.stars.selected a::before {
	content: "★";
}

#review_form p.stars a:hover ~ a::before,
#review_form p.stars.selected a.active ~ a::before {
	content: "☆";
}

#review_form p.stars a:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
	border-radius: 2px;
}

@media (max-width: 720px) {
	section.product-reviews.pad.wrap {
		padding: 0 20px;
	}

	.product-reviews-toggle > summary {
		min-height: 68px;
		padding-block: 16px;
	}

	.product-reviews-content {
		padding-bottom: 44px;
	}

	#review_form .comment-form {
		grid-template-columns: minmax(0, 1fr);
	}

	#review_form .comment-form-author,
	#review_form .comment-form-email {
		grid-column: 1 / -1;
	}
}

/* --- Hinweis, wenn nur Käufer schreiben dürfen ------------------------------ */

.woocommerce-verification-required {
	margin: 24px 0 0;
	padding: 14px 18px;
	background: var(--soft);
	border-inline-start: 3px solid var(--brand);
	font-size: 14.5px;
	color: var(--ink-2);
}

/* --- Kein Eintrag vorhanden -------------------------------------------------- */

.woocommerce-noreviews {
	margin: 24px 0 0;
	color: var(--muted);
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
   Fußzeile: Wortmarke und Signatur als Einheit
   ---------------------------------------------------------------------------
   Der Schriftzug steht auf einer Zeile, die Signatur direkt darunter. Beide
   gehören zur Markenidentität und dürfen nicht auseinanderlaufen – deshalb
   sitzt der beschreibende Satz erst mit deutlichem Abstand darunter und
   nicht mehr dazwischen.

   Der Schriftzug ist 315 zu 27 Einheiten breit. Ohne Deckel läuft er in der
   zweispaltigen Fußzeile auf dem Handy über seine Spalte hinaus; mit
   width:min() bleibt er in jeder Breite vollständig sichtbar. */

.fbrand-mark {
	display: block;
	line-height: 0;
	color: var(--ink);
	transition: color .2s;
}

.fbrand-mark:hover {
	color: var(--brand);
}

.fbrand-mark .logo-h {
	width: min(100%, 268px);
	height: auto;
}

.fbrand-sign {
	margin: 14px 0 0;
	color: var(--brand);
	font-family: var(--fd);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.005em;
}

[dir="rtl"] .fbrand-sign {
	font-family: var(--fa);
	font-size: 15px;
	letter-spacing: 0;
	line-height: 1.6;
}

.fbrand-tag {
	max-width: 34ch;
	margin: 24px 0 0;
	color: var(--muted);
	line-height: 1.7;
}

/* Ab hier steht die Fußzeile zweispaltig (prototype.css). Der Markenblock
   bekommt dann die ganze Zeile – zwischen zwei Menüspalten eingequetscht
   verliert das Zusammenspiel aus Schriftzug und Signatur seine Wirkung. */
@media (max-width: 720px) {
	.fbrand {
		grid-column: 1 / -1;
	}

	.fbrand-mark .logo-h {
		width: min(100%, 240px);
	}
}

/* Kanäle in der unteren Fußzeilenzeile: nur die Symbole, damit die Zeile
   nicht zur Aufzählung wird. Die Fläche bleibt trotzdem fingerbreit – die
   Symbole selbst messen 18 px, der Anfasser darum herum 34. */
.fsocial {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-inline-end: -8px;
}

.fsocial-item {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	color: var(--muted);
	transition: color .18s;
}

.fsocial-item svg {
	width: 18px;
	height: 18px;
}

.fsocial-item:hover,
.fsocial-item:focus-visible {
	color: var(--brand);
}