/* =====================================================================
   W27.9 - Kundenbewertungen
   =====================================================================
   Light surface, because both places this appears - the homepage press
   band and /bewertungen/ - are white sections. Tokens only: radius,
   shadow, band and type sizes come from main.css section 1.
   ===================================================================== */

/* ---------- stars ----------
   W48: the fill is `--mitode-rating-color`, the gold token in main.css,
   and no longer `--wp--preset--color--accent`. Red on this shop means
   act-or-pay-attention (CTA, price, sale badge, brand mark); a rating is
   neither. One token, so the home rail, the product card, the PDP, this
   page and the histogram cannot disagree - which they did, in five
   stylesheets, before W48. */

.mitode-stars {
	display: inline-flex;
	gap: .1rem;
	line-height: 1;
}

.mitode-stars__s svg {
	width: 1.05rem;
	height: 1.05rem;
	display: block;
}

.mitode-stars__s.is-full svg { fill: var(--mitode-rating-color, #f5a623); }
.mitode-stars__s.is-empty svg { fill: var(--mitode-rating-empty, #dcdfe5); }

/* A half star is one glyph painted twice: the gold clipped to the left
   half over the grey. No second SVG file, no rounding difference. */
.mitode-stars__s.is-half svg {
	fill: var(--mitode-rating-empty, #dcdfe5);
}

.mitode-stars__s.is-half {
	position: relative;
	display: inline-block;
}

.mitode-stars__s.is-half::after {
	content: "";
	position: absolute;
	inset: 0 50% 0 0;
	overflow: hidden;
	background: var(--mitode-rating-color, #f5a623);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 5.9 6.5.9-4.7 4.6 1.1 6.4L12 17.4l-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") left top / 1.05rem 1.05rem no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 5.9 6.5.9-4.7 4.6 1.1 6.4L12 17.4l-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") left top / 1.05rem 1.05rem no-repeat;
}

.mitode-stars--lg .mitode-stars__s svg { width: 1.6rem; height: 1.6rem; }
.mitode-stars--lg .mitode-stars__s.is-half::after {
	-webkit-mask-size: 1.6rem 1.6rem;
	mask-size: 1.6rem 1.6rem;
}

/* ---------- summary ---------- */

.mitode-reviews-summary {
	display: grid;
	/*
	 * W53 - `auto` AS THE MAXIMUM IS WHY THE BARS WERE INVISIBLE.
	 *
	 * `auto` in a grid track maximum means max-content, and the score
	 * column's longest line is "basierend auf 141 veröffentlichten
	 * Bewertungen" - about 300px of it. So the score column took whatever
	 * it wanted and the histogram got the remainder. Measured on
	 * /bewertungen/ at 1440: a track 16.09px WIDE, with the 5-star bar
	 * drawn as a 15px orange stub. That is the "distribučné pruhy sú
	 * príliš nevýrazné" in the brief, and it is a layout bug, not a
	 * styling preference - thickening a 16px bar would have changed
	 * nothing.
	 *
	 * A bounded maximum lets that sentence wrap, which is what it is for.
	 */
	grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
	gap: clamp(1.25rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	border-radius: var(--mitode-radius-lg);
	background: var(--wp--preset--color--base, #fff);
	box-shadow: var(--mitode-shadow-card);
}

.mitode-reviews-summary.is-empty {
	display: block;
	text-align: center;
}

.mitode-reviews-summary__empty {
	margin: 0 auto;
	max-width: 44rem;
	color: var(--wp--preset--color--contrast-2, #4d4d4d);
}

.mitode-reviews-summary__cta { margin: 1rem 0 0; }

.mitode-reviews-summary__score { text-align: center; }

.mitode-reviews-summary__avg {
	margin: 0 0 .35rem;
	line-height: 1;
}

.mitode-reviews-summary__avg strong {
	font-size: clamp(2.25rem, 6vw, 3rem);
	font-weight: 700;
}

.mitode-reviews-summary__avg span {
	font-size: 1rem;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-reviews-summary__count {
	margin: .5rem 0 0;
	font-size: .875rem;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-reviews-histogram {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .4rem;
	min-width: 0;
}

.mitode-reviews-histogram__row {
	display: grid;
	/*
	 * W53 - EVERY COLUMN HAS A MINIMUM AND A MAXIMUM, and the track's
	 * minimum is the point.
	 *
	 * The previous `5.5rem minmax(0, 1fr) 2.5rem` spent a FIXED 9.2rem
	 * (147px, including gaps) on the label and the count before the bar
	 * got anything. Inside the two-column /bewertungen/ intro at 1024 the
	 * histogram column is about 125px wide, so the bar was allotted a
	 * negative amount and drew at ZERO - measured, after the score column
	 * was already fixed. A picture that disappears at one viewport is not
	 * a picture.
	 *
	 * Now the label and the count give way first (they can shrink to a
	 * numeral and three digits) and the bar keeps a 2.5rem floor, which
	 * is the order that keeps the row readable as space runs out.
	 */
	grid-template-columns: minmax(2.6rem, 5.5rem) minmax(2.5rem, 1fr) minmax(1.7rem, 2.5rem);
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
}

/* When the label column is squeezed, "5 Sterne" must clip cleanly rather
   than wrap the row to two lines. The full wording stays in the DOM. */
.mitode-reviews-histogram__label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.mitode-reviews-histogram__track {
	/*
	 * W53 - 8px -> 12px. The bar is the only picture on a page of
	 * numbers; at 8px, against a #eceef2 track, the reader had to look
	 * for it. The track colour is darkened one step from surface-2 to
	 * `border` so the EMPTY part of a row reads as a measurement too -
	 * "2 Sterne: none" is information, and at the old contrast it was a
	 * blank space. `border` is an existing palette token (there is no
	 * surface-3 in theme.json) and it is the hairline colour used
	 * everywhere else in this design system, so the bar's empty half now
	 * matches the rules around it instead of introducing a shade.
	 */
	height: 12px;
	border-radius: var(--mitode-radius-pill);
	background: var(--wp--preset--color--border, #dcdfe5);
	overflow: hidden;
}

/* W48: the histogram is a picture of the ratings, so it is drawn in the
   rating colour. The slightly darker end of the pair, because a bar is a
   solid area next to grey and the star glyph is a thin shape. */
.mitode-reviews-histogram__fill {
	display: block;
	height: 100%;
	background: var(--mitode-rating-color-strong, #e08c05);
}

.mitode-reviews-histogram__n {
	text-align: end;
	/* W53 - the counts are the point of the row; contrast-3 at weight 400
	   made 136 and 0 look equally unimportant. */
	color: var(--wp--preset--color--contrast-2, #4d4d4d);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/*
 * W53 - the row a shopper looks for first. The brief asks for the 5-star
 * row to be immediately visible; it is the first child, so it is named
 * directly rather than by a class the renderer would have to learn.
 * Nothing about the NUMBERS changes - this is weight and height only.
 */
.mitode-reviews-histogram__row:first-child .mitode-reviews-histogram__track { height: 14px; }
.mitode-reviews-histogram__row:first-child .mitode-reviews-histogram__label,
.mitode-reviews-histogram__row:first-child .mitode-reviews-histogram__n { font-weight: 700; color: var(--wp--preset--color--contrast, #0f0f0f); }

/* ---------- one review ---------- */

.mitode-review {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	border-radius: var(--mitode-radius-lg);
	background: var(--wp--preset--color--base, #fff);
	box-sizing: border-box;
}

.mitode-review__head {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.mitode-review__rating-text {
	margin: 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-review__title {
	margin: 0;
	font-size: var(--mitode-fs-h3);
	line-height: 1.3;
}

.mitode-review__body { margin: 0; }
.mitode-review__body p { margin: 0 0 .6rem; }
.mitode-review__body p:last-child { margin-bottom: 0; }

.mitode-review__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .75rem;
	margin-top: auto;
	padding-top: .4rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-review__author { font-weight: 600; color: var(--wp--preset--color--contrast, #0f0f0f); }

.mitode-review__badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .1rem .55rem;
	border-radius: var(--mitode-radius-pill);
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	color: var(--wp--preset--color--contrast-2, #4d4d4d);
	line-height: 1.7;
}

.mitode-review__badge svg {
	width: .85rem;
	height: .85rem;
	fill: none;
	stroke: var(--wp--preset--color--success, #0b8c2e);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mitode-review__badge.is-purchase {
	border-color: rgba(11, 140, 46, .4);
	color: var(--wp--preset--color--success, #0b8c2e);
}

.mitode-review__source a { color: inherit; }

.mitode-review__response {
	margin-top: .4rem;
	padding: .75rem .9rem;
	border-radius: var(--mitode-radius);
	background: var(--wp--preset--color--surface, #f5f6f8);
	border-inline-start: 3px solid var(--wp--preset--color--accent, #f80120);
}

.mitode-review__response-head {
	margin: 0 0 .3rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-review__response-head strong { color: var(--wp--preset--color--contrast, #0f0f0f); }
.mitode-review__response-body p { margin: 0 0 .5rem; font-size: .9375rem; }
.mitode-review__response-body p:last-child { margin-bottom: 0; }

/* ---------- the list on /bewertungen/ ---------- */

.mitode-reviews-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: clamp(.85rem, 2vw, 1.25rem);
	margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.mitode-reviews-list.is-empty {
	display: block;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px dashed var(--wp--preset--color--border, #dcdfe5);
	border-radius: var(--mitode-radius-lg);
	text-align: center;
	color: var(--wp--preset--color--contrast-2, #4d4d4d);
}

.mitode-reviews-pager {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.mitode-reviews-pager .mitode-reviews-pager__i {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mitode-radius);
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #0f0f0f);
}

.mitode-reviews-pager .mitode-reviews-pager__i.is-current {
	background: var(--wp--preset--color--contrast, #0f0f0f);
	border-color: var(--wp--preset--color--contrast, #0f0f0f);
	color: #fff;
}

/* ---------- the homepage rail ---------- */

.mitode-reviews-rail { position: relative; }

.mitode-reviews-rail__viewport {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: .25rem 1rem;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.mitode-reviews-rail__viewport > .mitode-review {
	scroll-snap-align: start;
	flex: 0 0 clamp(16rem, 32%, 22rem);
}

.mitode-reviews-rail.is-empty {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	color: var(--wp--preset--color--contrast-2, #4d4d4d);
}

.mitode-reviews-rail__links {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.25rem;
	align-items: center;
	justify-content: center;
	margin-top: 1.25rem;
}

/* `:not([hidden])` - see the note on .mitode-pg__nav in product-guide.css. */
.mitode-reviews-rail__nav:not([hidden]) {
	display: flex;
	justify-content: center;
	gap: .75rem;
}

.mitode-reviews-rail .mitode-reviews-rail__btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mitode-radius);
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	background: var(--wp--preset--color--base, #fff);
	cursor: pointer;
	color: var(--wp--preset--color--contrast, #0f0f0f);
}

.mitode-reviews-rail__btn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mitode-reviews-rail__btn[disabled] { opacity: .35; cursor: not-allowed; }

.mitode-reviews-rail__cta {
	text-align: center;
	margin: 1.25rem 0 0;
}

/* ---------- the form ---------- */

.mitode-review-form {
	max-width: 44rem;
	margin-inline: auto;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	border-radius: var(--mitode-radius-lg);
	background: var(--wp--preset--color--surface, #f5f6f8);
	scroll-margin-top: var(--mitode-header-h);
}

.mitode-review-form__title { margin: 0 0 1rem; font-size: var(--mitode-fs-h3); }

.mitode-review-form .mitode-form__row { margin: 0 0 1rem; display: block; }

.mitode-review-form label { display: block; font-weight: 600; margin-bottom: .3rem; }

.mitode-review-form input[type="text"],
.mitode-review-form input[type="email"],
.mitode-review-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 3rem;
	padding: .6rem .8rem;
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	border-radius: var(--mitode-radius);
	background: var(--wp--preset--color--base, #fff);
	font: inherit;
}

.mitode-review-form textarea { min-height: 9rem; }

.mitode-review-form .mitode-form__hint {
	display: block;
	margin-top: .25rem;
	font-size: .8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-review-form .mitode-form__optional {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-review-form .mitode-form__error {
	margin: .3rem 0 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--accent-dark, #bb0101);
}

.mitode-review-form .mitode-form__notice {
	margin: 0 0 1.25rem;
	padding: .85rem 1rem;
	border-radius: var(--mitode-radius);
	border-inline-start: 4px solid var(--wp--preset--color--success, #0b8c2e);
	background: var(--wp--preset--color--base, #fff);
}

.mitode-review-form .mitode-form__notice.is-warn {
	border-inline-start-color: var(--wp--preset--color--accent, #f80120);
}

.mitode-review-form .mitode-form__notice p { margin: 0; }

/* ---------------------------------------------------------------------
   The star radio group.

   THE DOM IS 1..5, and everything follows from that: the visual order is
   the DOM order, and a radio group's arrow keys move through the DOM. An
   earlier version reversed the DOM so `input:checked ~ label` could light
   "this star and the ones before it" without a script, and hid the
   reversal with `flex-direction: row-reverse` (and then with
   `direction: rtl`). Neither works: Blink and WebKit decide "next radio"
   from the key and the document order - left is always "previous radio",
   RTL included - so ArrowRight moved the focus visually LEFT and lowered
   the rating.

   `:has()` does the fill in two rules instead, in the natural order:
   colour every star, then take the colour back off the ones AFTER the
   chosen label. Without `:has()` support the chosen star alone is filled,
   which is degraded but never misleading.
   ------------------------------------------------------------------ */

.mitode-review-form .mitode-form__stars {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
}

.mitode-review-form .mitode-form__stars legend {
	font-weight: 600;
	padding: 0;
	margin-bottom: .3rem;
}

.mitode-form__stars-group {
	display: inline-flex;
	gap: .15rem;
}

.mitode-form__stars-group input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mitode-form__stars-group label {
	margin: 0;
	padding: .25rem;
	cursor: pointer;
	line-height: 0;
	border-radius: var(--mitode-radius);
}

.mitode-form__stars-group svg {
	width: 2rem;
	height: 2rem;
	fill: var(--mitode-rating-empty, #dcdfe5);
	transition: fill .15s var(--mitode-ease);
}

/* Fallback for a browser without :has() - the chosen star, at least. */
.mitode-form__stars-group input:checked + label svg {
	fill: var(--mitode-rating-color, #f5a623);
}

/* Chosen: fill all, then unfill everything after the chosen label. */
.mitode-form__stars-group:has(input:checked) label svg {
	fill: var(--mitode-rating-color, #f5a623);
}
.mitode-form__stars-group input:checked + label ~ label svg {
	fill: var(--mitode-rating-empty, #dcdfe5);
}

/* Hover previews the same way, and wins over the chosen value. */
.mitode-form__stars-group:has(label:hover) label svg {
	fill: var(--mitode-rating-color, #f5a623);
}
.mitode-form__stars-group label:hover ~ label svg {
	fill: var(--mitode-rating-empty, #dcdfe5);
}

.mitode-form__stars-group input:focus-visible + label {
	outline: 2px solid var(--wp--preset--color--accent, #f80120);
	outline-offset: 2px;
}

.mitode-review-form .mitode-form__check {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .6rem;
	align-items: start;
}

.mitode-review-form .mitode-form__check input {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin-top: .2rem;
}

.mitode-review-form .mitode-form__check label { font-weight: 400; margin: 0; }

/* Off-screen, not display:none - some bots skip hidden fields. */
.mitode-form__trap {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mitode-review-form .mitode-form__actions { margin: 1.25rem 0 .5rem; }

.mitode-review-form .mitode-form__actions button[type="submit"] {
	min-height: 44px;
	padding: .7rem 1.6rem;
	border: 0;
	border-radius: var(--mitode-radius-pill);
	background: var(--wp--preset--color--contrast, #0f0f0f);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.mitode-review-form .mitode-form__note {
	margin: 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--contrast-3, #767676);
}

@media (max-width: 640px) {
	.mitode-reviews-summary {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.mitode-reviews-histogram__row {
		grid-template-columns: minmax(2.4rem, 4.5rem) minmax(2.5rem, 1fr) minmax(1.6rem, 2rem);
	}

	.mitode-reviews-rail__viewport > .mitode-review {
		flex-basis: min(20rem, 82vw);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mitode-reviews-rail__viewport { scroll-behavior: auto; }
	.mitode-form__stars-group svg { transition: none; }
}

/* =====================================================================
 * W47 - THE COMPACT HOME PAGE COMPONENT
 *
 * The section it replaces was a heading, a paragraph of policy and a
 * full-width rail of tall cards: measured at 1440x900 it filled the
 * viewport for nine reviews of which two and a half were visible. This is
 * one component - aggregate on the left, rail on the right - about 340px
 * tall on desktop.
 *
 * The proportions are the brief's: left 28-34%, right the remainder.
 * `minmax(15rem, 30%)` lands inside that band at every width the site
 * supports and refuses to collapse the score column to nothing when the
 * histogram labels are long.
 * ================================================================== */

.mitode-reviews-compact {
	display: grid;
	grid-template-columns: minmax(15rem, 30%) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: stretch;
	/*
	 * `min-width: 0` on a grid child is what stops a horizontally
	 * scrolling rail from sizing the COLUMN to its content and pushing
	 * the document sideways. The rail is the reason this section could
	 * cause page overflow, and this line is the reason it cannot.
	 */
	min-width: 0;
}

.mitode-reviews-compact > * { min-width: 0; }

/* ---- left: the aggregate ---- */

.mitode-reviews-compact__aggregate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	padding: clamp(1.1rem, 2.4vw, 1.6rem);
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	border-radius: var(--mitode-radius-lg);
	background: var(--wp--preset--color--base, #fff);
	box-shadow: var(--mitode-shadow-card);
	text-align: center;
}

.mitode-reviews-compact__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
}

.mitode-reviews-compact__avg {
	margin: 0;
	line-height: 1;
	display: flex;
	align-items: baseline;
	gap: .4rem;
}

.mitode-reviews-compact__avg strong {
	font-size: clamp(2rem, 4.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
}

.mitode-reviews-compact__of {
	font-size: .875rem;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-reviews-compact__count {
	margin: 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-reviews-compact__cta {
	margin: .9rem 0 0;
}

.mitode-reviews-compact__cta .wp-element-button {
	font-size: .875rem;
}

/*
 * The compact histogram. Same markup as /bewertungen/, tighter metrics:
 * the label column drops from 5.5rem to a number plus a star glyph,
 * because "5 Sterne" spelled out in a 15rem column is most of the column.
 */
.mitode-reviews-histogram--compact {
	width: 100%;
	gap: .25rem;
}

.mitode-reviews-histogram--compact .mitode-reviews-histogram__row {
	grid-template-columns: 1.4rem minmax(0, 1fr) 1.9rem;
	gap: .45rem;
	font-size: .75rem;
}

/*
 * "5 Sterne" becomes "5" with a star drawn after it. The full wording
 * stays in the DOM for a screen reader; only the visual text is
 * shortened, by clipping the label to its first character.
 */
.mitode-reviews-histogram--compact .mitode-reviews-histogram__label {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -9999px;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-reviews-histogram--compact .mitode-reviews-histogram__label::after {
	content: attr(data-star);
	position: absolute;
	inset: 0;
	text-indent: 0;
	display: flex;
	align-items: center;
	gap: .1rem;
}

.mitode-reviews-histogram--compact .mitode-reviews-histogram__track { height: 8px; }
.mitode-reviews-histogram--compact .mitode-reviews-histogram__row:first-child .mitode-reviews-histogram__track { height: 10px; }

.mitode-reviews-histogram--compact .mitode-reviews-histogram__n { font-size: .75rem; }

/* ---- right: the rail ---- */

.mitode-reviews-rail--compact .mitode-reviews-rail__viewport {
	padding-block: .25rem .75rem;
	height: 100%;
	align-items: stretch;
}

/*
 * Two to three cards by width, and never a card so wide that one fills
 * the rail. `clamp` rather than a media-query ladder: the rail is inside
 * a 70% column whose pixel width nobody can predict from the viewport.
 */
.mitode-reviews-rail--compact .mitode-reviews-rail__viewport > .mitode-review {
	flex: 0 0 clamp(15rem, 33%, 19rem);
	/*
	 * A compact card. The body is clamped to six lines so one long review
	 * cannot set the height of the whole rail - the rest of the card
	 * (author, date, badge, source) stays visible, which is the part a
	 * reader uses to judge it.
	 */
	padding: 1rem;
	gap: .45rem;
	font-size: .875rem;
}

.mitode-reviews-rail--compact .mitode-review__body {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mitode-reviews-rail--compact .mitode-review__title { font-size: .9375rem; }

.mitode-reviews-rail--compact .mitode-reviews-rail__nav {
	justify-content: flex-end;
	gap: .5rem;
}

.mitode-reviews-rail--compact .mitode-reviews-rail__btn {
	width: 38px;
	height: 38px;
}

/* ---- the footnote ---- */

.mitode-reviews-compact__note {
	margin: 1.1rem 0 0;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-3, #767676);
	max-width: 62rem;
}

/* ---- stacked ---- */

/*
 * 900px, not 782px. The two-column layout stops working when the rail
 * column drops under about 30rem - two cards no longer fit and the
 * "slider" shows one and a half - and that happens well before the
 * tablet breakpoint the rest of the site uses.
 */
@media (max-width: 900px) {
	.mitode-reviews-compact {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}

	/*
	 * Stacked, the aggregate becomes a wide short band rather than a tall
	 * card: the score block on the left, the histogram beside it, so it
	 * costs about 120px above the cards instead of 320px.
	 */
	.mitode-reviews-compact__aggregate {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: .5rem clamp(1rem, 4vw, 2.5rem);
		text-align: start;
	}

	.mitode-reviews-compact__cta {
		grid-column: 1 / -1;
		margin-top: .25rem;
	}
}

@media (max-width: 640px) {
	.mitode-reviews-rail--compact .mitode-reviews-rail__viewport > .mitode-review {
		flex-basis: min(18rem, 80vw);
	}

	/*
	 * Under 640px the histogram beside the score leaves both too narrow to
	 * read, so the aggregate goes back to a single centred column - still
	 * compact, because the histogram rows are 6px tall.
	 */
	.mitode-reviews-compact__aggregate {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.mitode-reviews-compact__score { align-items: center; }

	/* The arrows are a pointer affordance; a phone swipes. */
	.mitode-reviews-rail--compact .mitode-reviews-rail__nav { display: none; }
}

/* =====================================================================
   W48 - Bewertungen auf der Produktseite
   =====================================================================
   The section is the same components as /bewertungen/ - stars, summary,
   histogram, cards - laid out for a page that already has five other
   sections. It reuses `.mitode-review` verbatim so a card cannot look
   like one thing on the review page and another on the product page.
   ===================================================================== */

/* The alias target for `#reviews`.
   Zero-size, out of flow, and NOT `display:none` - a hidden element is
   not a scroll destination in any browser. `scroll-margin-top` is what
   puts the landing below the sticky header, and it is the same token the
   header keeps up to date, so the two can never disagree. */
.mitode-anchor-alias {
	display: block;
	height: 0;
	width: 0;
	overflow: hidden;
	scroll-margin-top: var(--mitode-sticky-h, 5rem);
}

.mitode-previews {
	scroll-margin-top: var(--mitode-sticky-h, 5rem);
	padding-block: clamp(2rem, 5vw, 3.5rem);
	border-top: 1px solid var(--wp--preset--color--border, #dcdfe5);
}

.mitode-previews__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: var(--wp--custom--line-height--heading, 1.2);
}

.mitode-previews__n {
	color: var(--wp--preset--color--contrast-3, #767676);
	font-weight: 400;
}

.mitode-previews__empty {
	margin: 0 0 1.5rem;
	max-width: var(--mitode-measure, 38rem);
	color: var(--wp--preset--color--contrast-2, #4d4d4d);
}

/* ---------- summary: score beside histogram ---------- */

.mitode-previews__summary {
	display: grid;
	/* Same defect, same fix - see .mitode-reviews-summary above. */
	grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
	gap: clamp(1.25rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.1rem, 3vw, 1.75rem);
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	border-radius: var(--mitode-radius-lg, 20px);
	background: var(--wp--preset--color--base, #fff);
	margin-bottom: 1.5rem;
}

.mitode-previews__score { text-align: center; }

.mitode-previews__avg {
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .35rem;
}

.mitode-previews__avg strong {
	font-size: clamp(2rem, 5vw, 2.75rem);
	line-height: 1;
}

.mitode-previews__of {
	color: var(--wp--preset--color--contrast-3, #767676);
	font-size: .9375rem;
}

.mitode-previews__score .mitode-stars { margin: .35rem 0; }

.mitode-previews__count,
.mitode-previews__scope {
	margin: .2rem 0 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--contrast-3, #767676);
}

/* ---------- cards ---------- */

.mitode-previews__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
	gap: 1rem;
}

.mitode-review--pdp { height: 100%; }

.mitode-previews__withheld,
.mitode-previews__note {
	margin: 1.25rem 0 0;
	max-width: var(--mitode-measure-long, 42rem);
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-preview-form { margin-top: 2rem; }

.mitode-review-form__title {
	margin: 0 0 .35rem;
	font-size: 1.125rem;
}

.mitode-review-form__intro {
	margin: 0 0 1rem;
	max-width: var(--mitode-measure, 38rem);
	color: var(--wp--preset--color--contrast-2, #4d4d4d);
}

@media (max-width: 640px) {
	.mitode-previews__summary {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/* =====================================================================
   W48 - Kopf von /bewertungen/: Übersicht links, Formular rechts
   =====================================================================
   Two columns on the desktop, stacked in priority order on the phone.
   The form is never behind the list - see mitode_render_review_intro().
   ===================================================================== */

.mitode-reviews-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	margin-block-end: clamp(2rem, 5vw, 3rem);
}

/* The summary already draws its own bordered card, so the aggregate
   column adds nothing around it - two nested boxes read as a mistake. */
.mitode-reviews-intro__aggregate > .mitode-reviews-summary { margin: 0; }

.mitode-reviews-intro__note {
	margin: 1rem 0 0;
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-reviews-intro__form > .mitode-review-form { margin: 0; }

/* One column under 1120px. W48 measured 900 and W48 was measuring the
   wrong thing: it checked that the FORM was usable, and it is. The
   histogram beside it is not. Measured at 1024 with the score column
   already capped, the bar track came out at its 2.5rem floor - 40px of
   bar for 136 five-star reviews, in a two-column layout that had ~125px
   to give it. Stacking earlier costs a scroll on a size of screen almost
   nobody shops on and buys the aggregate its full width.

   1120 rather than 1024: the band has to end where the layout stops
   being cramped, not exactly at a device width, or the next common
   viewport lands on the wrong side of it again. */
@media (max-width: 1120px) {
	.mitode-reviews-intro {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ---------------------------------------------------------------------
   W51 - THE HERO FORM, TIGHTER. NOTHING REMOVED.

   Measured on /bewertungen/ at 1440: the badge column is 356 px and the
   form column 914 px, so the two-column hero is really one short card
   next to a page-tall one. The instruction was to compact it gently
   through padding and field layout only - every field, label, hint and
   the whole optional block stay exactly where they were.

   Three changes, in order of what they save:

     name + e-mail share a row      ~85 px   (two 48 px fields + a gap)
     row rhythm 1rem -> .7rem       ~35 px   (seven rows)
     inputs 3rem -> 2.75rem         ~12 px   (still a 44 px target)

   All three are scoped to the desktop hero. The phone keeps one column,
   the full row rhythm and the full field height, because there the form
   is not competing with anything and a 44 px target on a touch screen is
   the floor, not a number to shave.
   ------------------------------------------------------------------ */

@media (min-width: 901px) {
	.mitode-reviews-intro__form .mitode-review-form {
		padding: clamp(1rem, 2.2vw, 1.5rem);
	}
	.mitode-reviews-intro__form .mitode-review-form .mitode-form__row {
		margin-block-end: .7rem;
	}
	.mitode-reviews-intro__form .mitode-review-form .mitode-form__stars {
		margin-block-end: .7rem;
	}
	.mitode-reviews-intro__form .mitode-review-form input[type="text"],
	.mitode-reviews-intro__form .mitode-review-form input[type="email"] {
		min-height: 2.75rem;
		padding-block: .45rem;
	}
	.mitode-reviews-intro__form .mitode-review-form .mitode-form__actions {
		margin-block: .9rem .4rem;
	}
	.mitode-reviews-intro__form .mitode-form__stars-group svg {
		width: 1.75rem;
		height: 1.75rem;
	}
	/*
	 * NO TEXTAREA RULE HERE EITHER. The review field is the tallest row
	 * at 124px and lowering its 9rem floor was the obvious next lever -
	 * it saves nothing. Measured: the field is already at the intrinsic
	 * height of `rows="4"` (124px), so the floor is not what sets it and
	 * a smaller floor changes no pixel. The only way further down is
	 * fewer rows, which is making the field smaller, not the form denser.
	 */

	/*
	 * NO NAME/E-MAIL PAIRING RULE HERE, AND THAT IS A CORRECTION.
	 *
	 * The first version of this block added one, and the form came out
	 * 951px - 37px TALLER than the 914px it was meant to shrink. The
	 * theme already pairs those two fields: `.mitode-form__grid` is a
	 * two-column grid from 700px up (see the rule further down this
	 * file). A `width: calc(50% - .4rem)` on the rows therefore halved an
	 * already-halved column - 126px inside a 546px form - and the e-mail
	 * hint, which is a whole privacy sentence, wrapped from two lines to
	 * six. That is 105px of hint where 36px belongs.
	 *
	 * Left as a comment rather than deleted silently: "add a second
	 * two-column rule" is the obvious next idea for anyone who reads
	 * "the form is too tall", and it is the wrong one.
	 */
}

/* =====================================================================
   W50 - COMPACT REVIEW PRESENTATION
   =====================================================================
   Three components were measured before this block was written, at eight
   viewports each:

     home rail        1252-1503 px, every merchant reply expanded
     /bewertungen/    form 1265-1546 px tall above the list
     product page     review section 2177 px, form 1047 px always open

   The rules below attack the causes in that order: the reply, the
   longest review setting every card's height, and a form that nobody
   asked to see. Nothing here truncates a record - the clamp is visual
   and the full text stays in the element.
   ===================================================================== */

/* ---------- the clamp ---------- */

/*
 * ONLY UNDER `.mitode-js`. Without scripting there is no "Mehr anzeigen"
 * button to undo it, so clamping would be hiding text with no way back.
 */
.mitode-js .mitode-review__body--clamp {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mitode-js .mitode-review__body--clamp.is-open {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
}

.mitode-review__more {
	align-self: flex-start;
	margin: .1rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2, #4d4d4d);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.mitode-review__more:hover { color: var(--wp--preset--color--contrast, #0f0f0f); }

/* ---------- the merchant reply, collapsed ---------- */

/*
 * `details` is the widget. The summary carries the whole affordance, so
 * the marker is removed and replaced by the chevron in the markup - a
 * default triangle beside a styled row reads as two controls.
 */
details.mitode-review__response {
	margin-top: .65rem;
	padding: 0;
	border: 0;
	background: none;
}

details.mitode-review__response > summary.mitode-review__response-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .45rem .6rem;
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	border-radius: var(--mitode-radius, 12px);
	background: var(--wp--preset--color--surface, #f6f7f9);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2, #4d4d4d);
	cursor: pointer;
	list-style: none;
}

details.mitode-review__response > summary::-webkit-details-marker { display: none; }
details.mitode-review__response > summary::marker { content: ""; }

details.mitode-review__response > summary:hover { color: var(--wp--preset--color--contrast, #0f0f0f); }

details.mitode-review__response > summary svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .16s var(--mitode-ease, ease);
}

details.mitode-review__response[open] > summary svg { transform: rotate(180deg); }

/* The reply itself: its own block, and smaller than the customer's words. */
.mitode-review__response-inner {
	margin-top: .5rem;
	padding: .7rem .8rem;
	border-inline-start: 3px solid var(--wp--preset--color--border, #dcdfe5);
	border-radius: 0 var(--mitode-radius, 12px) var(--mitode-radius, 12px) 0;
	background: var(--wp--preset--color--surface, #f6f7f9);
	font-size: .875rem;
}

.mitode-review__response-inner .mitode-review__response-head {
	margin: 0 0 .3rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-review__response-inner .mitode-review__response-body p { font-size: .875rem; }

/* ---------- product page: three cards, level rows ---------- */

/*
 * Explicit counts rather than `auto-fill`, which gave four narrow cards
 * at 1440 and one at 900. Three is the requirement and it is also what
 * the card's own measure wants.
 */
.mitode-previews__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}

@media (max-width: 1100px) {
	.mitode-previews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.mitode-previews__list { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Level rows need the card to be a column whose body is the part that
 * gives: without `margin-top:auto` on the footer the meta line floats
 * directly under a short review and the row still looks ragged.
 */
.mitode-review--pdp {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

.mitode-review--pdp .mitode-review__meta { margin-top: auto; }

/* The section's own vertical budget. */
.mitode-previews__summary { margin-bottom: 1.25rem; }
.mitode-previews { padding-block: clamp(1.75rem, 4vw, 2.75rem); }

/* ---------- product page: the form behind one control ---------- */

.mitode-review-form__disclosure { border: 0; padding: 0; }

.mitode-review-form__toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.15rem;
	border: 1px solid var(--wp--preset--color--contrast, #0f0f0f);
	border-radius: var(--mitode-radius, 12px);
	background: var(--wp--preset--color--base, #fff);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #0f0f0f);
	cursor: pointer;
	list-style: none;
}

.mitode-review-form__toggle::-webkit-details-marker { display: none; }
.mitode-review-form__toggle::marker { content: ""; }

.mitode-review-form__toggle:hover { background: var(--wp--preset--color--surface, #f6f7f9); }

.mitode-review-form__toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .16s var(--mitode-ease, ease);
}

.mitode-review-form__disclosure[open] > .mitode-review-form__toggle svg { transform: rotate(180deg); }

.mitode-review-form__inner { padding-top: 1.1rem; }

/* The textarea no longer needs to be nine rem tall to look inviting. */
.mitode-review-form textarea { min-height: 6rem; }

/* ---------- home page: a bounded component ---------- */

/*
 * The rail is given an explicit height and the cards fill it, so ONE
 * thirty-sentence review can no longer set the height of the section.
 * The clamp above does the work inside the card; this is the ceiling.
 */
.mitode-reviews-rail--compact .mitode-reviews-rail__viewport > .mitode-review {
	max-height: 22rem;
	overflow: hidden;
}

.mitode-js .mitode-reviews-rail--compact .mitode-review__body--clamp {
	-webkit-line-clamp: 5;
	line-clamp: 5;
}

/*
 * No "Mehr anzeigen" in the teaser rail: expanding a card inside a fixed
 * height would clip its own control. The full review is one click away on
 * /bewertungen/, which is what the button under the aggregate is for.
 */
.mitode-reviews-rail--compact .mitode-review__more { display: none; }

/* ---------- /bewertungen/: the optional fields ---------- */

.mitode-form__optional-block {
	margin: 0 0 1rem;
	border: 0;
	padding: 0;
}

.mitode-form__optional-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem 0;
	font-size: .875rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2, #4d4d4d);
	cursor: pointer;
	list-style: none;
}

.mitode-form__optional-toggle::-webkit-details-marker { display: none; }
.mitode-form__optional-toggle::marker { content: ""; }
.mitode-form__optional-toggle:hover { color: var(--wp--preset--color--contrast, #0f0f0f); }

.mitode-form__optional-toggle svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .16s var(--mitode-ease, ease);
}

.mitode-form__optional-block[open] > .mitode-form__optional-toggle svg { transform: rotate(180deg); }

.mitode-form__optional-inner { padding-top: .75rem; }

/* ---------- form density ---------- */

/*
 * The two short identity fields share a row from 700 px up. Below that a
 * pair of half-width inputs is harder to use than a taller form.
 */
.mitode-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 1rem;
}

@media (min-width: 700px) {
	.mitode-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* A hint under one field must not push the other field's box down. */
	.mitode-form__grid > .mitode-form__row { align-content: start; }
}

/*
 * Density, not deletion. Every label, hint and consent sentence is still
 * there - the gaps between them are smaller. The hints carry the privacy
 * statement and the health-claims rule, so they are the last thing that
 * would be shortened.
 */
.mitode-review-form .mitode-form__row { margin-bottom: .75rem; }
.mitode-review-form label { margin-bottom: .2rem; }

.mitode-review-form .mitode-form__hint {
	margin-top: .2rem;
	line-height: 1.45;
}

.mitode-review-form__title { margin-top: 0; }
.mitode-review-form .mitode-form__actions { margin: .9rem 0 .4rem; }

/* Three rows is inside the 3-5 the requirement allows and saves a row. */
.mitode-review-form textarea { min-height: 5.25rem; }

/*
 * 2rem of padding on all four sides of an already-tall form is 64 px of
 * the height for nothing. The card still reads as a card at 1.5rem.
 */
.mitode-review-form { padding: clamp(1.1rem, 2.2vw, 1.5rem); }