/* ==========================================================================
   Ormusshop — product.css
   Single product, "Lichtung": the product stands on a lit lichen plinth at
   first light. Lichen grounds the buying, moss carries the story band and
   the related products, gold is light (CTA, the chosen drop, the dawn).
   Loaded only on is_product(). Builds on core.css tokens.
   ========================================================================== */

/* ---- Breadcrumb ------------------------------------------------------------ */
.wc-main > .crumbs {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding: clamp(.9rem, .5rem + 1.2vw, 1.6rem) var(--gutter) clamp(.75rem, .5rem + .8vw, 1.25rem);
	font-size: var(--fs-micro);
	font-weight: 550;
	letter-spacing: .02em;
	color: var(--ink);
}
.crumbs__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem .6rem;
	min-width: 0;
}
.crumbs a {
	color: var(--ink-soft);
	text-decoration: none;
	border-radius: var(--r-xs);
	transition: color var(--d-1) var(--ease-out);
}
.crumbs a:hover { color: var(--moss-700); text-decoration: underline; }
.crumbs__sep { color: var(--lichen-400); font-weight: 400; }

/* ---- Notices on the product page ------------------------------------------- */
.wc-main > .woocommerce-notices-wrapper:not(:empty) {
	display: grid;
	gap: .6rem;
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 0 auto var(--s-4);
	padding-inline: var(--gutter);
}
:where(.ormus-product) :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
	margin: 0;
	padding: .95rem 1.1rem .95rem 3.1rem;
	border-radius: var(--r-md);
	list-style: none;
	font-size: var(--fs-small);
	line-height: 1.45;
	outline: none;
}
:where(.ormus-product) :where(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	content: "";
	position: absolute;
	left: 1.05rem;
	top: 50%;
	width: 1.3rem;
	height: 1.3rem;
	margin-top: -.65rem;
	background: currentColor;
	-webkit-mask: var(--notice-icon) center / contain no-repeat;
	mask: var(--notice-icon) center / contain no-repeat;
}
:where(.ormus-product) .woocommerce-message {
	--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background: var(--moss-900);
	color: var(--on-moss);
	box-shadow: var(--shadow-2);
}
:where(.ormus-product) .woocommerce-message::before { background: var(--gold-300); }
:where(.ormus-product) .woocommerce-message .button {
	--btn-bg: var(--gold-500);
	--btn-fg: var(--moss-950);
	order: 2;
	min-height: 2.5rem;
	margin-left: auto;
	padding: .5rem 1.05rem;
	font-size: .9375rem;
}
:where(.ormus-product) .woocommerce-message .button:hover { --btn-bg: var(--gold-400); }
:where(.ormus-product) .woocommerce-info {
	--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.1'/%3E%3C/svg%3E");
	background: var(--lichen-50);
	border: 1px solid var(--line);
	color: var(--ink);
}
:where(.ormus-product) .woocommerce-info::before { background: var(--moss-700); }
:where(.ormus-product) .woocommerce-error {
	--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.2v.1'/%3E%3C/svg%3E");
	background: var(--error-100);
	border: 1px solid color-mix(in oklab, var(--error-600) 30%, transparent);
	color: #5a1d10;
}
:where(.ormus-product) .woocommerce-error::before { background: var(--error-600); }
:where(.ormus-product) .woocommerce-error li { margin: 0; }
:where(.ormus-product) :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: inherit; font-weight: 650; }

/* ---- Stage ------------------------------------------------------------------ */
.pstage { padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem); }
.pstage__inner {
	display: grid;
	gap: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
}
.pstage .summary { min-width: 0; }

@media (min-width: 1024px) {
	.pstage__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: clamp(2.5rem, .5rem + 4vw, 5.5rem);
		align-items: start;
	}
	.pstage .summary { padding-top: clamp(.5rem, 2vw, 2.25rem); }
	.pgal {
		position: sticky;
		top: calc(var(--pstick, var(--header-h)) + 24px);
		/* glides with the header as it slides away and back */
		transition: top var(--d-3) var(--ease-out);
	}
}

/* ---- Gallery: the lit plinth ----------------------------------------------- */
.pgal { min-width: 0; }

.pgal__stage {
	--floor: clamp(1.75rem, .9rem + 3.2vw, 4.25rem);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: 78svh;
	min-height: 300px;
	border-radius: var(--r-lg);
	background:
		radial-gradient(130% 58% at 50% 124%, rgb(26 58 34 / .34), transparent 66%),
		linear-gradient(to bottom, transparent 56%, rgb(169 182 138 / .26)),
		radial-gradient(95% 75% at 14% 4%, rgb(246 226 166 / .5), transparent 62%),
		var(--lichen-200);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / .4),
		inset 0 -60px 90px -60px rgb(18 41 26 / .22);
}
/* The stage height uses the fixed header height, not the live --pstick, so
   the plinth does not grow and shrink while the header slides in and out. */
@media (min-width: 1024px) {
	.pgal__stage {
		border-radius: var(--r-xl);
		max-height: calc(100svh - var(--header-h) - 24px - 7.25rem);
		min-height: 440px;
	}
	.pgal:not(.pgal--multi) .pgal__stage { max-height: calc(100svh - var(--header-h) - 48px); }
}

/* First light: a gold dawn rises from the upper left, then breathes. */
.pgal__stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -22% -22% 18% -22%;
	background: radial-gradient(42% 46% at 32% 30%, rgb(251 238 196 / .95), rgb(240 207 122 / .4) 46%, transparent 74%);
	opacity: .88;
	pointer-events: none;
	transform-origin: 22% 18%;
}
.js .pgal__stage::after {
	animation:
		pgal-dawn 2.6s var(--ease-out) .05s both,
		pgal-breathe 17s var(--ease-in-out) 2.7s infinite alternate;
}
@keyframes pgal-dawn {
	from { opacity: 0; transform: translate3d(-10%, -12%, 0) scale(.7); }
	to { opacity: .88; transform: none; }
}
@keyframes pgal-breathe {
	to { opacity: .74; transform: translate3d(3%, 2.5%, 0) scale(1.07); }
}

.pgal__track {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: inherit;
	-webkit-overflow-scrolling: touch;
}
.pgal__track::-webkit-scrollbar { display: none; }
.pgal__track:focus-visible { outline: 2px solid var(--focus); outline-offset: -5px; }

.pgal__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.25rem, .5rem + 3.5vw, 3.25rem);
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.pgal__slide[data-lens-done] { cursor: none; }

/* White packshots dissolve into the plinth (white × lichen = lichen). */
.pgal__img {
	position: relative;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	user-select: none;
	-webkit-user-drag: none;
}

/* The transparent bottle stands on the plinth floor. */
.pgal__slide--cutout {
	align-items: flex-end;
	padding-bottom: var(--floor);
}
.pgal__img--cutout {
	height: min(560px, 86%);
	max-height: none;
	width: auto;
	mix-blend-mode: normal;
	filter: drop-shadow(0 24px 22px rgb(18 41 26 / .22));
}
.pgal__floor {
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: calc(var(--floor) - 16px);
	width: min(52%, 320px);
	height: 34px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(18 41 26 / .34), rgb(18 41 26 / .12) 58%, transparent);
	pointer-events: none;
}
.js .pgal__slide:first-child .pgal__img { animation: pgal-focus 1.6s var(--ease-out) .12s both; }
.js .pgal__slide:first-child .pgal__img--cutout { animation-name: pgal-focus-cutout; }
@keyframes pgal-focus {
	from { transform: translate3d(0, 18px, 0) scale(.975); filter: blur(10px); }
	to { transform: none; filter: blur(0); }
}
@keyframes pgal-focus-cutout {
	from { transform: translate3d(0, 18px, 0) scale(.975); filter: blur(10px) drop-shadow(0 10px 12px rgb(18 41 26 / 0)); }
	to { transform: none; filter: blur(0) drop-shadow(0 24px 22px rgb(18 41 26 / .22)); }
}
.pgal__placeholder { width: 38%; aspect-ratio: 1; background-color: rgb(240 207 122 / .18); }

/* The dew-drop magnifier keeps the plinth colour under multiply. */
.pgal .lens { background-color: var(--lichen-200); }
.pgal .lens__img { mix-blend-mode: multiply; }
.pgal__slide--cutout .lens__img { mix-blend-mode: normal; }

.pgal__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	padding: .35rem .85rem;
	border-radius: var(--r-pill);
	background: var(--gold-500);
	color: var(--moss-950);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pgal__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-top: -1.5rem;
	padding: 0;
	border: 1px solid color-mix(in oklab, var(--humus-900) 12%, transparent);
	border-radius: 50%;
	background: rgb(242 245 232 / .8);
	color: var(--ink);
	box-shadow: var(--shadow-1);
	backdrop-filter: blur(8px);
	opacity: 0;
	transform: scale(.88);
	transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out), background-color var(--d-1);
}
.pgal__nav--prev { left: 1rem; }
.pgal__nav--next { right: 1rem; }
.pgal__nav:hover { background: var(--lichen-50); }
.pgal__stage:hover .pgal__nav,
.pgal__nav:focus-visible { opacity: 1; transform: none; }
.pgal__nav:disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .pgal__nav { display: none; } }

.pgal__count {
	position: absolute;
	right: .85rem;
	bottom: .85rem;
	z-index: 2;
	margin: 0;
	padding: .3rem .75rem;
	border-radius: var(--r-pill);
	background: rgb(18 41 26 / .78);
	color: var(--lichen-50);
	font-size: var(--fs-micro);
	font-weight: 650;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	backdrop-filter: blur(6px);
}

.pgal__thumbs { display: none; }
@media (min-width: 640px) {
	.pgal__count { display: none; }
	.pgal__thumbs {
		display: flex;
		flex-wrap: wrap;
		gap: .75rem;
		margin-top: 1rem;
	}
}
.pgal__thumb {
	position: relative;
	display: grid;
	grid-template: 100% / 100%;
	place-items: center;
	width: 4.75rem;
	aspect-ratio: 1;
	padding: .45rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--lichen-200);
	overflow: hidden;
	transition: border-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.pgal__thumb:hover { border-color: color-mix(in oklab, var(--humus-900) 40%, transparent); transform: translateY(-2px); }
.pgal__thumb[aria-pressed="true"] {
	border-color: var(--moss-900);
	box-shadow: 0 0 0 1px var(--moss-900), var(--shadow-1);
}
.pgal__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.pgal__thumb-img--cutout { width: auto; height: 94%; mix-blend-mode: normal; }

/* ---- Summary --------------------------------------------------------------- */
.ptitle {
	margin: 0;
	font-size: clamp(2.3rem, 1.55rem + 2.3vw, 3.5rem);
	font-weight: 390;
	line-height: 1.02;
	letter-spacing: -0.032em;
	overflow-wrap: break-word;
	hyphens: manual;
}
.ptitle__sub {
	display: block;
	margin-top: .4em;
	font-size: max(1.25rem, .44em);
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--moss-700);
}

.prating {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	width: fit-content;
	margin: var(--s-4) 0 0;
	font-size: var(--fs-small);
	color: var(--ink-soft);
	text-decoration: none;
}
.prating strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
a.prating:hover .prating__text { text-decoration: underline; text-underline-offset: .2em; }

.pshort {
	margin-top: var(--s-4);
	max-width: 48ch;
	font-size: 1.0625rem;
	color: var(--ink-soft);
}
.pshort > * + * { margin-top: .75em; }

/* Price block */
.pprice {
	margin-top: var(--s-5);
	padding-top: var(--s-5);
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--pstick, var(--header-h)) + 1.25rem);
}
.pprice__line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .65rem;
	margin: 0;
}
.pprice__from { font-size: var(--fs-small); font-weight: 650; color: var(--ink-soft); }
/* The shop's one money face: showcase prices in Literata with tabular
   figures (home, drawer, cart, checkout); labels and per-bottle lines stay
   in Hanken. */
.pprice__amount {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 1.75rem + 1.3vw, 3rem);
	font-weight: 440;
	line-height: 1;
	letter-spacing: -0.022em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--humus-900);
}
/* Sale: the struck regular price sits before the current one, smaller and
   in soft ink (never faded by opacity), same face and figures. */
.pprice__amount del {
	margin-right: .35em;
	font-size: .52em;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--ink-soft);
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in oklab, var(--humus-700) 70%, transparent);
	vertical-align: .18em;
}
.pprice__amount ins { text-decoration: none; }
.pprice__per {
	font-size: var(--fs-small);
	font-weight: 650;
	color: var(--moss-700);
	font-variant-numeric: tabular-nums;
}
.pprice.is-swapping .pprice__amount,
.pprice.is-swapping .pprice__per { animation: pprice-swap 520ms var(--ease-out) both; }
@keyframes pprice-swap {
	from { opacity: 0; transform: translate3d(0, .35em, 0); filter: blur(4px); }
	to { opacity: 1; transform: none; filter: blur(0); }
}
.pprice__amount,
.pprice__per { display: inline-block; }
.pprice__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-top: .65rem;
}

.pstock {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: var(--fs-micro);
	font-weight: 650;
	letter-spacing: .02em;
	color: var(--moss-700);
}
.pstock__dot {
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--moss-500);
	box-shadow: 0 0 0 .22rem rgb(79 122 42 / .16);
}
.pstock--out { color: var(--error-600); }
.pstock--out .pstock__dot { background: var(--error-600); box-shadow: 0 0 0 .22rem rgb(163 52 31 / .14); }
.pstock--backorder { color: var(--gold-700); }
.pstock--backorder .pstock__dot { background: var(--gold-600); box-shadow: 0 0 0 .22rem rgb(185 141 42 / .18); }
.pstage .summary > p.stock { display: none; }

/* ---- Menge tiles (bottle sets) ---------------------------------------------- */
.ptiles { margin-top: var(--s-5); }
.ptiles__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1rem;
	margin: 0 0 .8rem;
}
.ptiles__label {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 650;
	color: var(--ink);
}
/* "Im Set wird jede Flasche günstiger." — a fact, said quietly. */
.ptiles__note {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	font-size: var(--fs-micro);
	font-weight: 600;
	color: var(--moss-700);
}
.ptiles__note-icon { flex: none; width: .95rem; height: .95rem; color: var(--gold-600); }
.ptiles__list {
	display: grid;
	gap: .7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ptiles__item { display: block; }
.ptile {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .95rem;
	width: 100%;
	min-height: 4.3rem;
	margin: 0;
	padding: .85rem 1.15rem;
	border: 1px solid color-mix(in oklab, var(--humus-900) 17%, transparent);
	border-radius: var(--r-md);
	background: var(--lichen-50);
	color: var(--ink);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--d-2) var(--ease-out),
		border-color var(--d-2) var(--ease-out),
		color var(--d-2) var(--ease-out),
		box-shadow var(--d-2) var(--ease-out),
		transform var(--d-2) var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
.ptile:hover {
	border-color: color-mix(in oklab, var(--humus-900) 40%, transparent);
	box-shadow: var(--shadow-1);
	transform: translateY(-1px);
}
.ptile:active { transform: scale(.995); }
.ptile:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ptile.is-checked {
	border-color: var(--moss-900);
	background: var(--moss-900);
	color: var(--on-moss);
	box-shadow: var(--shadow-2);
	transform: none;
}

.ptile__radio {
	display: grid;
	place-items: center;
	width: 1.55rem;
	height: 1.55rem;
	border: 1.5px solid color-mix(in oklab, var(--humus-900) 32%, transparent);
	border-radius: 50%;
	overflow: hidden;
	transition: border-color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.ptile__check {
	width: .95rem;
	height: .95rem;
	fill: var(--gold-400);
	opacity: 0;
	transform: translate3d(0, -170%, 0);
}
.ptile.is-checked .ptile__radio { border-color: var(--gold-400); background: rgb(240 207 122 / .12); }
.ptile.is-checked .ptile__check { opacity: 1; transform: none; animation: ptile-drop 680ms cubic-bezier(.3, .7, .4, 1) both; }
@keyframes ptile-drop {
	0% { opacity: 0; transform: translate3d(0, -170%, 0) scale(.55, .75); }
	55% { opacity: 1; transform: translate3d(0, 10%, 0) scale(1.16, .8); }
	76% { transform: translate3d(0, -6%, 0) scale(.94, 1.06); }
	100% { opacity: 1; transform: none; }
}

.ptile__main { display: grid; gap: .35rem; min-width: 0; }
.ptile__label { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.005em; }
.ptile__drops { display: flex; align-items: center; gap: .22rem; color: var(--moss-500); }
.ptile__drops .drop { width: .8rem; height: .8rem; fill: currentColor; opacity: .5; }
.ptile__more { font-size: .6875rem; font-weight: 700; }
.ptile.is-checked .ptile__drops { color: var(--gold-400); }
.ptile.is-checked .ptile__drops .drop { opacity: 1; animation: ptile-fill 520ms var(--ease-out) both; }
.ptile.is-checked .ptile__drops .drop:nth-child(2) { animation-delay: 70ms; }
.ptile.is-checked .ptile__drops .drop:nth-child(3) { animation-delay: 140ms; }
.ptile.is-checked .ptile__drops .drop:nth-child(4) { animation-delay: 210ms; }
.ptile.is-checked .ptile__drops .drop:nth-child(5) { animation-delay: 280ms; }
.ptile.is-checked .ptile__drops .drop:nth-child(6) { animation-delay: 350ms; }
@keyframes ptile-fill {
	from { opacity: .3; transform: scale(.6) translate3d(0, -30%, 0); }
	to { opacity: 1; transform: none; }
}

.ptile__price {
	display: grid;
	justify-items: end;
	gap: .2rem;
	text-align: right;
}
.ptile__amount {
	font-family: var(--font-display);
	font-size: 1.3125rem;
	font-weight: 440;
	line-height: 1.1;
	letter-spacing: -0.012em;
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}
.ptile__now {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	gap: 0 .45rem;
}
.ptile__regular {
	font-family: var(--font-display);
	font-size: var(--fs-micro);
	color: var(--ink-soft);
	white-space: nowrap;
	font-variant-numeric: tabular-nums lining-nums;
}
.ptile.is-checked .ptile__regular { color: var(--on-moss-soft); }
.ptile__per {
	font-size: var(--fs-micro);
	font-weight: 550;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ptile.is-checked .ptile__per { color: var(--on-moss-soft); }

.ptile__tags {
	position: absolute;
	top: 0;
	right: 1rem;
	display: flex;
	gap: .35rem;
	transform: translateY(-52%);
	pointer-events: none;
}
.ptile__tag {
	padding: .2rem .65rem;
	border-radius: var(--r-pill);
	background: var(--gold-500);
	color: var(--moss-950);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.5;
	white-space: nowrap;
	box-shadow: 0 6px 14px -8px rgb(124 91 18 / .7);
}
.ptile__tag--out { background: var(--lichen-300); color: var(--humus-800); box-shadow: none; }
.ptile--best { margin-top: .4rem; }
.ptile--out:not(.is-checked) .ptile__label,
.ptile--out:not(.is-checked) .ptile__price { opacity: .6; }

.ptiles__hint {
	margin: .65rem 0 0;
	font-size: var(--fs-small);
	font-weight: 650;
	color: var(--gold-700);
}
.ptiles__hint:empty { display: none; }
.ptiles.is-nudged .ptiles__list { animation: ptiles-nudge 560ms var(--ease-out); }
.ptiles.is-nudged .ptile:not(.is-checked) {
	border-color: var(--gold-600);
	box-shadow: 0 0 0 3px rgb(217 174 69 / .28);
}
@keyframes ptiles-nudge {
	0%, 100% { transform: none; }
	20% { transform: translate3d(-6px, 0, 0); }
	40% { transform: translate3d(5px, 0, 0); }
	60% { transform: translate3d(-3px, 0, 0); }
	80% { transform: translate3d(2px, 0, 0); }
}

/* Without JavaScript the native select does the job. */
html:not(.js) .ptiles[data-ptiles] { display: none; }

/* ---- Variations form ------------------------------------------------------- */
.pstage .variations_form table.variations {
	width: 100%;
	margin: var(--s-6) 0 0;
	border: 0;
	border-collapse: collapse;
}
.pstage .variations_form table.variations :where(tbody, tr, th, td) {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}
.pstage .variations_form table.variations tr + tr { margin-top: 1rem; }
.pstage .variations_form table.variations th label {
	display: block;
	margin-bottom: .5rem;
	font-size: var(--fs-small);
	font-weight: 650;
}
.pstage .reset_variations {
	display: inline-block;
	margin-top: .5rem;
	font-size: var(--fs-micro);
	font-weight: 600;
	color: var(--ink-soft);
}
/* Tiles take over; the select stays in the form, out of sight. */
.js .pstage .ptiles ~ table.variations {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.pstage .single_variation_wrap { margin-top: var(--s-5); }
.pstage .single_variation .woocommerce-variation-price,
.pstage .single_variation .woocommerce-variation-availability { display: none; }
.pstage .woocommerce-variation-description {
	margin-bottom: var(--s-4);
	font-size: var(--fs-small);
	color: var(--ink-soft);
}
.pstage .woocommerce-variation-description:empty { display: none; }
.pstage .wc-no-matching-variations,
.pstage .single_variation p[role="alert"] {
	margin: 0 0 var(--s-4);
	padding: .85rem 1rem;
	border-radius: var(--r-sm);
	background: var(--lichen-50);
	border: 1px solid var(--line);
	font-size: var(--fs-small);
}

/* ---- Quantity stepper + add to cart ---------------------------------------- */
.pstage form.cart:not(.variations_form):not(.grouped_form),
.pstage .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .75rem;
}
.pstage form.cart:not(.variations_form) { margin-top: var(--s-6); }
.pstage .ptiles + form.cart { margin-top: var(--s-5); }

.pstage .quantity {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 3.75rem;
	border: 1px solid color-mix(in oklab, var(--humus-900) 22%, transparent);
	border-radius: var(--r-pill);
	background: var(--lichen-50);
	transition: border-color var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out);
}
.pstage .quantity:focus-within {
	border-color: var(--moss-700);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--moss-500) 26%, transparent);
}
.pstage .quantity .qty {
	width: 2.75rem;
	min-height: 0;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: center;
	font-size: 1.0625rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.pstage .quantity .qty:focus { background: none; box-shadow: none; }
.pstage .quantity .qty::-webkit-outer-spin-button,
.pstage .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pstage .quantity:has(input[type="hidden"]) { display: none; }
.qty-stepper__btn {
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: none;
	color: var(--ink);
	transition: background-color var(--d-1) var(--ease-out), opacity var(--d-1);
}
.qty-stepper__btn:hover { background: color-mix(in oklab, var(--humus-900) 7%, transparent); }
.qty-stepper__btn:focus-visible { outline-offset: -2px; }
.qty-stepper__btn:disabled { opacity: .3; cursor: default; background: none; }
.qty-stepper__btn .icon { width: 1.1rem; height: 1.1rem; }
html:not(.js) .qty-stepper__btn { display: none; }
html:not(.js) .pstage .quantity .qty { width: 4.5rem; }

.pstage .single_add_to_cart_button {
	--btn-bg: var(--gold-500);
	--btn-fg: var(--moss-950);
	flex: 1 1 13rem;
	min-height: 3.75rem;
	padding: 1rem 1.6rem;
	font-size: 1.0625rem;
	gap: .8rem;
	box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 12px 32px -14px rgb(217 174 69 / .75);
}
.pstage .single_add_to_cart_button:hover {
	--btn-bg: var(--gold-400);
	box-shadow: 0 1px 0 rgb(255 255 255 / .45) inset, 0 18px 42px -16px rgb(229 188 85 / .85);
}
.pstage .single_add_to_cart_button::after {
	content: "";
	position: absolute;
	inset: -40% auto -40% -30%;
	width: 34%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgb(255 251 230 / .75) 45%, rgb(255 255 255 / .9) 50%, rgb(255 251 230 / .75) 55%, transparent);
	transform: translateX(-140%) skewX(-18deg);
	pointer-events: none;
}
.pstage .single_add_to_cart_button:hover::after,
.pstage .single_add_to_cart_button:focus-visible::after,
.pstage .single_add_to_cart_button.is-lit::after {
	transition: transform 900ms var(--ease-out);
	transform: translateX(520%) skewX(-18deg);
}
/* No Menge chosen yet: a quiet invitation, not a dead button. */
.pstage .single_add_to_cart_button.is-choose,
.pstage .single_add_to_cart_button.disabled.wc-variation-selection-needed {
	--btn-bg: var(--lichen-200);
	--btn-fg: var(--humus-800);
	--btn-bd: color-mix(in oklab, var(--humus-900) 14%, transparent);
	opacity: 1;
	cursor: pointer;
	box-shadow: none;
}
.pstage .single_add_to_cart_button.is-choose::after { display: none; }
.pstage .single_add_to_cart_button.is-unavailable,
.pstage .single_add_to_cart_button.disabled.wc-variation-is-unavailable {
	--btn-bg: var(--lichen-300);
	--btn-fg: var(--humus-700);
	opacity: .8;
	cursor: not-allowed;
	box-shadow: none;
}
.pstage .single_add_to_cart_button.is-added { --btn-bg: var(--moss-900); --btn-fg: var(--lichen-50); box-shadow: var(--shadow-2); }
.pbtn__label,
.pbtn__price { position: relative; display: inline-flex; align-items: center; gap: .5rem; }
.pbtn__price {
	padding-left: .8rem;
	border-left: 1px solid rgb(11 26 16 / .22);
	font-variant-numeric: tabular-nums;
}
.pbtn__price:empty { display: none; }
.is-added .pbtn__price { border-color: rgb(242 245 232 / .25); }
.pbtn__label .icon { width: 1.15rem; height: 1.15rem; }

/* WooCommerce appends "Warenkorb ansehen" after a successful add. */
.pstage .added_to_cart,
.pcard .added_to_cart {
	flex-basis: 100%;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	width: fit-content;
	margin-top: .15rem;
	font-size: var(--fs-small);
	font-weight: 650;
	color: var(--moss-700);
	text-decoration: underline;
	text-underline-offset: .2em;
}
.pcard .added_to_cart { display: block; margin-top: .6rem; text-align: center; width: 100%; }

/* ---- Free shipping helper + services ---------------------------------------- */
.pship { margin-top: var(--s-4); }
.pship__text {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	font-size: var(--fs-small);
	color: var(--ink-soft);
}
.pship__text strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pship__icon { flex: none; width: 1.2rem; height: 1.2rem; color: var(--moss-700); }
.pship.is-free .pship__icon { color: var(--success-700); }
.pship__bar {
	position: relative;
	display: block;
	height: 4px;
	margin-top: .65rem;
	border-radius: var(--r-pill);
	background: color-mix(in oklab, var(--humus-900) 10%, transparent);
	overflow: hidden;
}
.pship__fill,
.pship__cart {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	transform-origin: 0 50%;
	transform: scaleX(var(--p, 0));
	transition: transform var(--d-3) var(--ease-out);
}
.pship__fill { background: rgb(217 174 69 / .42); }
.pship__cart { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }

.pservices {
	display: grid;
	gap: .6rem 1.25rem;
	margin: var(--s-6) 0 0;
	padding: var(--s-5) 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: var(--fs-small);
	line-height: 1.4;
	color: var(--ink-soft);
}
@media (min-width: 560px) {
	.pservices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pservices__item { display: flex; align-items: flex-start; gap: .6rem; }
.pservices__icon { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .05rem; color: var(--moss-700); }
.pservices a {
	color: inherit;
	text-decoration-color: color-mix(in oklab, var(--humus-900) 30%, transparent);
}
.pservices a:hover { color: var(--moss-700); text-decoration-color: currentColor; }

/* Legal notice (Customizer): a quiet, legible note on a lichen-50 panel
   under the service list. Informative, never alarming. */
.pnotice {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	margin: var(--s-5) 0 0;
	padding: .85rem 1rem .9rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--lichen-50);
	font-size: var(--fs-micro);
	line-height: 1.5;
	color: var(--ink-soft);
}
.pnotice__icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .05rem; color: var(--moss-700); }
.pnotice__text { min-width: 0; }
.pnotice__lead { font-weight: 650; color: var(--ink); }

/* ---- Sections + sub-navigation --------------------------------------------- */
.psections { position: relative; }

.psubnav {
	position: sticky;
	top: var(--pstick, var(--header-h));
	z-index: 20;
	transition: top var(--d-3) var(--ease-out);
	border-block: 1px solid var(--line);
	background: color-mix(in oklab, var(--lichen-100) 88%, transparent);
	backdrop-filter: saturate(1.2) blur(14px);
	-webkit-backdrop-filter: saturate(1.2) blur(14px);
}
.psubnav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.85rem;
}
.psubnav__list {
	display: flex;
	gap: .25rem;
	margin: 0 calc(var(--gutter) * -1);
	padding: .45rem var(--gutter);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.psubnav__list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .psubnav__list { margin: 0 0 0 -.9rem; padding: .45rem 0; } }
.psubnav__link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 2.75rem;
	padding: .5rem .95rem;
	border-radius: var(--r-pill);
	font-size: var(--fs-small);
	font-weight: 650;
	color: var(--ink-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.psubnav__link:hover { color: var(--ink); background: color-mix(in oklab, var(--humus-900) 6%, transparent); }
.psubnav__link.is-active { color: var(--lichen-50); background: var(--moss-900); }
.psubnav__count {
	min-width: 1.45rem;
	padding: 0 .4rem;
	border-radius: var(--r-pill);
	background: color-mix(in oklab, var(--humus-900) 10%, transparent);
	font-size: .75rem;
	line-height: 1.45rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.psubnav__link.is-active .psubnav__count { background: rgb(242 245 232 / .16); }
.psubnav__buy { display: none; }
@media (min-width: 1024px) {
	.psubnav__buy {
		display: flex;
		align-items: center;
		gap: 1rem;
		opacity: 0;
		transform: translate3d(0, 6px, 0);
		pointer-events: none;
		transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
	}
	.psubnav.is-stuck .psubnav__buy,
	html:not(.js) .psubnav__buy { opacity: 1; transform: none; pointer-events: auto; }
}
.psubnav__price { font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.psubnav__price del,
.pbuybar__sel del,
.pcard__price del { margin-right: .3em; font-weight: 500; text-decoration-thickness: 1px; }
.psubnav__price del,
.pcard__price del { color: var(--ink-soft); }
.psubnav__price ins,
.pbuybar__sel ins,
.pcard__price ins { text-decoration: none; }

.psec {
	padding-block: clamp(3rem, 1.75rem + 4vw, 6rem);
	scroll-margin-top: 3.85rem;
}
.psec + .psec { border-top: 1px solid var(--line); }
.psec__grid { display: grid; gap: var(--s-5) var(--s-7); }
@media (min-width: 900px) {
	.psec__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
	.psec__head {
		position: sticky;
		top: calc(var(--pstick, var(--header-h)) + 6rem);
		align-self: start;
	}
}
.psec__title { font-size: var(--fs-h2); font-weight: 380; }

/* Beschreibung */
.pdesc { max-width: 64ch; font-size: 1.125rem; line-height: 1.7; }
.pdesc > :first-child { margin-top: 0; }
.pdesc > p:first-of-type {
	font-family: var(--font-display);
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--humus-800);
}
.pdesc h2 { margin-top: 1.9em; font-size: var(--fs-h3); font-weight: 420; }
.pdesc > h2:first-child { margin-top: 0; }
.pdesc h3 { margin-top: 1.6em; }
.pdesc img { height: auto; border-radius: var(--r-md); }
.pdesc a { color: var(--moss-700); }

/* Details */
.pdetails {
	max-width: 52rem;
	margin: 0;
	border-top: 1px solid var(--line);
}
.pdetails__row {
	display: grid;
	grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
	gap: .25rem 2rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--line);
}
.pdetails__label { font-size: var(--fs-small); font-weight: 650; color: var(--ink-soft); }
.pdetails__value { margin: 0; color: var(--ink); }
.pdetails__value p { margin: 0; }
.pdetails__value a { color: var(--moss-700); }
@media (max-width: 479px) {
	.pdetails__row { grid-template-columns: 1fr; }
}

/* ---- Reviews ------------------------------------------------------------------ */
.rsum__score { margin-top: var(--s-5); }
.rsum__avg { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .5rem; }
.rsum__num {
	font-family: var(--font-display);
	font-size: clamp(4.25rem, 3rem + 4vw, 6rem);
	font-weight: 340;
	line-height: .9;
	letter-spacing: -0.045em;
	font-variant-numeric: lining-nums;
	color: var(--moss-900);
}
.rsum__of { font-size: var(--fs-small); font-weight: 650; color: var(--ink-soft); }
.rsum__count { margin: .55rem 0 0; font-size: var(--fs-small); color: var(--ink-soft); }
.rsum__bars {
	display: grid;
	gap: .5rem;
	max-width: 22rem;
	margin: var(--s-5) 0 0;
	padding: 0;
	list-style: none;
}
.rsum__bar {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) 1.75rem;
	align-items: center;
	gap: .75rem;
	font-size: var(--fs-micro);
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
}
.rsum__stars { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--ink); }
.rsum__drop { width: .8rem; height: .8rem; fill: var(--gold-600); }
.rsum__track {
	position: relative;
	height: 6px;
	border-radius: var(--r-pill);
	background: color-mix(in oklab, var(--humus-900) 10%, transparent);
	overflow: hidden;
}
.rsum__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w, 0%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
	transform-origin: 0 50%;
}
.js .rsum:not(.is-in) .rsum__fill { transform: scaleX(0); }
.js .rsum.is-in .rsum__fill { animation: rsum-grow 1.3s var(--ease-out) both; }
.rsum__bar:nth-child(2) .rsum__fill { animation-delay: 80ms; }
.rsum__bar:nth-child(3) .rsum__fill { animation-delay: 160ms; }
.rsum__bar:nth-child(4) .rsum__fill { animation-delay: 240ms; }
.rsum__bar:nth-child(5) .rsum__fill { animation-delay: 320ms; }
@keyframes rsum-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rsum__n { text-align: right; }
.rsum__empty {
	max-width: 24ch;
	margin: var(--s-4) 0 0;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-style: italic;
	line-height: 1.45;
	color: var(--moss-800);
}
.rsum__write { margin-top: var(--s-5); color: var(--moss-700); }

.rlist .woocommerce-Reviews-title,
.rlist .woocommerce-noreviews { display: none; }
.rlist .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}
.rlist__item { padding: var(--s-5) 0 var(--s-6); border-bottom: 1px solid var(--line); }
.rlist__item .children { margin: var(--s-4) 0 0 3.6rem; padding: 0; list-style: none; }
.review__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .9rem;
}
.review__mono {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: radial-gradient(70% 70% at 30% 25%, var(--moss-700), var(--moss-900));
	color: var(--gold-300);
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-style: italic;
	line-height: 1;
	text-transform: uppercase;
}
.review__who { display: grid; gap: .1rem; min-width: 0; }
.review__author { font-weight: 650; }
.review__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem .9rem;
	font-size: var(--fs-micro);
	color: var(--ink-soft);
}
.review__verified { display: inline-flex; align-items: center; gap: .3rem; font-weight: 650; color: var(--success-700); }
.review__verified .icon { width: .95rem; height: .95rem; }
.review__text {
	max-width: 60ch;
	margin-top: 1rem;
	font-family: var(--font-display);
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--humus-800);
}
.review__pending {
	margin: .9rem 0 0;
	font-size: var(--fs-small);
	font-weight: 650;
	color: var(--gold-700);
}
.rlist .woocommerce-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: var(--s-5);
	font-size: var(--fs-small);
}
.rlist .woocommerce-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 .75rem;
	border-radius: var(--r-pill);
	border: 1px solid var(--line);
	text-decoration: none;
	color: var(--ink);
}
.rlist .woocommerce-pagination .page-numbers.current { background: var(--moss-900); border-color: var(--moss-900); color: var(--lichen-50); }

#review_form_wrapper { margin-top: var(--s-6); }
.rlist .comment-respond {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--lichen-50);
	box-shadow: var(--shadow-1);
}
.rform__title { margin: 0; font-size: var(--fs-h3); font-weight: 400; }
.rform__title small { display: block; margin-top: .3rem; font-family: var(--font-ui); font-size: var(--fs-micro); }
.rform__title small a { color: var(--ink-soft); }
.rform {
	display: grid;
	gap: 1.15rem;
	margin-top: 1.1rem;
}
@media (min-width: 640px) {
	.rform { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1rem; }
	.rform > * { grid-column: 1 / -1; }
	.rform > .comment-form-author { grid-column: 1; }
	.rform > .comment-form-email { grid-column: 2; }
}
.rform__note { margin: 0; font-size: var(--fs-micro); color: var(--ink-soft); }
.rform__field { display: grid; gap: .45rem; margin: 0; }
.rform textarea { min-height: 9rem; }
.rform .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: 0;
	font-size: var(--fs-small);
}
.rform .comment-form-cookies-consent input { flex: none; margin-top: .2rem; }
.rform .comment-form-cookies-consent label { font-weight: 400; }
.rform .form-submit { margin: 0; }
.rform .required { color: var(--gold-700); }
.rlist .must-log-in,
.rlist .woocommerce-verification-required,
.rlist .logged-in-as {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--ink-soft);
}
.rlist .must-log-in a,
.rlist .logged-in-as a { color: var(--moss-700); }

/* Drop rating input */
.rrate { min-width: 0; margin: 0; padding: 0; border: 0; }
.rrate__legend { margin-bottom: .4rem; padding: 0; font-size: var(--fs-small); font-weight: 600; }
.rrate__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.rrate__drops { display: inline-flex; gap: .1rem; margin-left: -.4rem; }
.rrate__item { position: relative; }
.rrate__input {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
/* An empty drop is an outline in secondary ink (≥ 3:1 against the form),
   a chosen drop fills with gold and keeps a gold-700 rim. */
.rrate__label {
	--rrate-rim: var(--humus-600);
	display: grid;
	place-items: center;
	width: 2.85rem;
	height: 2.85rem;
	border-radius: 50%;
	color: var(--lichen-100);
	cursor: pointer;
	transition: color var(--d-1) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.rrate__drop {
	width: 1.9rem;
	height: 1.9rem;
	fill: currentColor;
	stroke: var(--rrate-rim);
	stroke-width: 1.4;
	transition: stroke var(--d-1) var(--ease-out);
}
.rrate__label:hover { transform: translateY(-2px) scale(1.07); }
.rrate__input:focus-visible + .rrate__label { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Fill up to the chosen drop: :has() without JS, data-show with JS. */
.rrate:not(.is-js) .rrate__drops:has(.rrate__item:nth-child(1) .rrate__input:checked) .rrate__item:nth-child(-n+1) .rrate__label,
.rrate:not(.is-js) .rrate__drops:has(.rrate__item:nth-child(2) .rrate__input:checked) .rrate__item:nth-child(-n+2) .rrate__label,
.rrate:not(.is-js) .rrate__drops:has(.rrate__item:nth-child(3) .rrate__input:checked) .rrate__item:nth-child(-n+3) .rrate__label,
.rrate:not(.is-js) .rrate__drops:has(.rrate__item:nth-child(4) .rrate__input:checked) .rrate__item:nth-child(-n+4) .rrate__label,
.rrate:not(.is-js) .rrate__drops:has(.rrate__item:nth-child(5) .rrate__input:checked) .rrate__item:nth-child(-n+5) .rrate__label,
.rrate__drops[data-show="1"] .rrate__item:nth-child(-n+1) .rrate__label,
.rrate__drops[data-show="2"] .rrate__item:nth-child(-n+2) .rrate__label,
.rrate__drops[data-show="3"] .rrate__item:nth-child(-n+3) .rrate__label,
.rrate__drops[data-show="4"] .rrate__item:nth-child(-n+4) .rrate__label,
.rrate__drops[data-show="5"] .rrate__item:nth-child(-n+5) .rrate__label { color: var(--gold-500); --rrate-rim: var(--gold-700); }
.rrate__drops.is-preview .rrate__label { opacity: .85; }
.rrate__item.is-pop .rrate__label { animation: rrate-pop 460ms var(--ease-out); }
@keyframes rrate-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.22, .86) translateY(2px); }
	100% { transform: scale(1); }
}
.rrate__text { font-size: var(--fs-small); font-weight: 650; color: var(--moss-700); }

/* ---- Story band ------------------------------------------------------------- */
.pband {
	position: relative;
	overflow: hidden;
	padding-block: var(--section-y);
	background: var(--moss-900);
	color: var(--on-moss);
}
.pband::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(55% 60% at 88% 0%, rgb(217 174 69 / .16), transparent 70%),
		radial-gradient(60% 50% at 0% 100%, rgb(11 26 16 / .6), transparent 70%);
	pointer-events: none;
}
.pband :focus-visible { outline-color: var(--focus-on-moss); }
.pband__inner {
	position: relative;
	display: grid;
	gap: var(--s-7);
	align-items: center;
}
@media (min-width: 900px) {
	.pband__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(3rem, 1rem + 5vw, 7rem);
	}
}
.pband__media {
	position: relative;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-3);
}
@media (min-width: 900px) {
	.pband__media { aspect-ratio: 4 / 5; border-radius: var(--r-xl); }
}
.pband__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(to top, rgb(11 26 16 / .35), transparent 45%);
	box-shadow: inset 0 0 0 1px rgb(242 245 232 / .08);
	pointer-events: none;
}
.pband__img {
	position: absolute;
	inset: -12% 0;
	width: 100%;
	height: 124%;
	max-width: none;
	object-fit: cover;
}
.pband__title {
	max-width: 13ch;
	font-size: clamp(2.6rem, 1.5rem + 3.8vw, 5.25rem);
	font-weight: 360;
	line-height: 1;
	letter-spacing: -0.038em;
}
.pband__lead { margin-top: var(--s-5); max-width: 42ch; color: var(--on-moss-soft); }
.pband__facts {
	display: grid;
	margin: var(--s-7) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line-on-moss);
}
.pband__fact {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--line-on-moss);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.35;
}
@media (min-width: 640px) {
	.pband__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pband__fact { padding: 1.35rem 1rem 1.35rem 0; border-bottom: 0; }
	.pband__fact + .pband__fact { padding-left: 1.25rem; border-left: 1px solid var(--line-on-moss); }
}
.pband__icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--gold-300); }
.pservices .nowrap,
.pband__fact .nowrap { white-space: nowrap; }
.pband__fact a { color: inherit; text-decoration-color: rgb(242 245 232 / .35); }
.pband__fact a:hover { text-decoration-color: currentColor; }
.pband__cta { margin: var(--s-6) 0 0; }
/* The button leads back up to the buy box (Menge tiles or the button). */
.pband__btn:hover .icon--arrow-up,
.pband__btn:focus-visible .icon--arrow-up { transform: translateY(-3px); }

/* ---- Related products ---------------------------------------------------------
   A lichen field between the moss band and the (moss) footer, so the page
   keeps alternating instead of ending in one long dark run. */
.prel {
	--edge: max(var(--gutter), calc((100% - var(--container)) / 2));
	position: relative;
	padding-block: clamp(3.5rem, 2rem + 5vw, 7rem);
	background:
		radial-gradient(60% 80% at 8% 0%, rgb(246 226 166 / .32), transparent 70%),
		var(--lichen-200);
	color: var(--ink);
	overflow: hidden;
}
.prel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: var(--s-6);
}
.prel__title { font-size: var(--fs-h2); font-weight: 380; }
.prel__title em { color: var(--moss-700); }
.prel__nav { display: flex; gap: .5rem; }
.prel__btn {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid color-mix(in oklab, var(--humus-900) 28%, transparent);
	border-radius: 50%;
	background: var(--lichen-50);
	color: var(--ink);
	transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), opacity var(--d-2);
}
.prel__btn:hover { background: var(--moss-900); border-color: var(--moss-900); color: var(--lichen-50); }
.prel__btn:disabled { opacity: .35; cursor: default; background: var(--lichen-50); border-color: color-mix(in oklab, var(--humus-900) 28%, transparent); color: var(--ink); }
@media (hover: none) { .prel__nav { display: none; } }
.prel__scroller {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--edge);
	scrollbar-width: none;
}
.prel__scroller::-webkit-scrollbar { display: none; }
.prel__list {
	display: flex;
	gap: clamp(1rem, .6rem + 1vw, 1.5rem);
	width: max-content;
	margin: 0;
	padding: .5rem var(--edge) 1.5rem;
	list-style: none;
}
.prel__item {
	flex: none;
	width: clamp(15.5rem, 70vw, 19.5rem);
	scroll-snap-align: start;
}

.pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--lichen-50);
	color: var(--ink);
	box-shadow: var(--shadow-1);
	transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.pcard:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow-2); }
.pcard__media {
	display: grid;
	grid-template: 100% / 100%;
	place-items: center;
	aspect-ratio: 1;
	margin: .6rem .6rem 0;
	overflow: hidden;
	border-radius: calc(var(--r-lg) - .45rem);
	background:
		radial-gradient(85% 70% at 22% 12%, rgb(246 226 166 / .55), transparent 62%),
		var(--lichen-200);
}
.pcard__img {
	width: 84%;
	height: 84%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--d-4) var(--ease-out);
}
.pcard:hover .pcard__img { transform: scale(1.05); }
.pcard__placeholder { width: 40%; aspect-ratio: 1; }
.pcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .3rem;
	padding: 1.1rem 1.25rem 1.3rem;
}
.pcard__title { margin: 0; font-size: 1.3rem; font-weight: 420; line-height: 1.2; }
.pcard__title a { color: inherit; text-decoration: none; }
.pcard__title a:hover .pcard__name { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
/* The product line follows the supply name (never an eyebrow above it). */
.pcard__line {
	display: block;
	margin-top: .3rem;
	font-family: var(--font-ui);
	font-size: var(--fs-micro);
	font-weight: 650;
	letter-spacing: .01em;
	color: var(--ink-soft);
}
.pcard__name { display: block; }
.pcard__price { margin: .4rem 0 0; font-size: 1.0625rem; font-weight: 700; }
.pcard__per { margin: 0; font-size: var(--fs-micro); font-weight: 650; color: var(--moss-700); }
.pcard__actions { margin-top: auto; padding-top: 1rem; }
.pcard__btn { width: 100%; }

/* ---- Sticky buy bar (phones + tablets) ------------------------------------ */
.pbuybar { display: none; }
@media (max-width: 1023px) {
	.js .pbuybar {
		position: fixed;
		left: .5rem;
		right: .5rem;
		bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
		z-index: 30;
		display: flex;
		align-items: center;
		gap: .75rem;
		max-width: 40rem;
		margin-inline: auto;
		padding: .5rem .5rem .5rem .55rem;
		border: 1px solid rgb(242 245 232 / .1);
		border-radius: var(--r-lg);
		background: rgb(18 41 26 / .93);
		color: var(--on-moss);
		box-shadow: var(--shadow-3);
		backdrop-filter: blur(14px) saturate(1.2);
		-webkit-backdrop-filter: blur(14px) saturate(1.2);
		transform: translate3d(0, calc(100% + 2rem), 0);
		visibility: hidden;
		transition: transform var(--d-3) var(--ease-out), visibility 0s linear var(--d-3);
	}
	.js .pbuybar.is-visible {
		transform: none;
		visibility: visible;
		transition-delay: 0s;
	}
}
.pbuybar :focus-visible { outline-color: var(--focus-on-moss); }
/* While the bar shows, the shell's bottom toast sits above it. */
@media (max-width: 1023px) {
	.has-buybar .ormus-toast--global { bottom: calc(var(--ormus-buybar-h, 0px) + var(--s-3) + env(safe-area-inset-bottom, 0px)); }
}
.pbuybar__thumb {
	display: grid;
	grid-template: 100% / 100%;
	flex: none;
	place-items: center;
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: radial-gradient(90% 80% at 25% 15%, rgb(246 226 166 / .55), transparent 65%), var(--lichen-200);
}
.pbuybar__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pbuybar__img--cutout { width: auto; height: 90%; mix-blend-mode: normal; }
.pbuybar__info { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.pbuybar__name,
.pbuybar__sel {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.pbuybar__name { font-size: var(--fs-micro); font-weight: 600; color: var(--on-moss-soft); }
.pbuybar__sel { font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pbuybar__sel del { color: var(--on-moss-soft); font-size: .8125rem; }
.pbuybar__btn { flex: none; min-height: 2.9rem; padding-inline: 1.1rem; }

/* ---- Drops meter (ratings) -------------------------------------------------- */
.drops {
	position: relative;
	display: inline-flex;
	flex: none;
	line-height: 0;
	vertical-align: middle;
}
.drops__base,
.drops__fill { display: inline-flex; white-space: nowrap; }
.drops__base { color: color-mix(in oklab, var(--humus-900) 15%, transparent); }
.drops__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: var(--gold-600);
}
.drops .drop { flex: none; width: 1em; height: 1em; fill: currentColor; }
.drops--sm { font-size: 1.05rem; }
.drops--md { font-size: 1.3rem; }
.drops--lg { font-size: 1.65rem; }
.drops--lg .drops__fill { color: var(--gold-500); }

/* ---- Small screens ------------------------------------------------------------ */
@media (max-width: 479px) {
	.ptile { grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; padding: .9rem 1rem; }
	.ptile__tags { right: .75rem; }
	.pstage form.cart:not(.variations_form):not(.grouped_form),
	.pstage .woocommerce-variation-add-to-cart { flex-wrap: nowrap; gap: .6rem; }
	.pstage .quantity { height: 3.5rem; }
	.pstage .quantity .qty { width: 2.1rem; }
	.qty-stepper__btn { width: 2.45rem; }
	.pstage .single_add_to_cart_button {
		flex: 1 1 0;
		min-width: 0;
		min-height: 3.5rem;
		padding-inline: 1rem;
		font-size: 1rem;
		line-height: 1.2;
		white-space: normal;
		text-align: center;
	}
	.pstage .single_add_to_cart_button .pbtn__price { display: none; }
	.review__head { grid-template-columns: auto minmax(0, 1fr); }
	.review__head .drops { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.js .pgal__stage::after { animation: none; }
	.ptile.is-checked .ptile__check,
	.ptile.is-checked .ptile__drops .drop { animation: none; }
}