.drr-review-spotlight {
	--drr-panel: #faf9f6;
	--drr-panel-text: #201912;
	--drr-border: #d9d9d2;
	--drr-bar: #3e4f23;
	--drr-heading: #3e4f23;
	--drr-accent: #3e4f23;
	--drr-stars: #d99400;
	--drr-quote-size: 1em;
	--drr-line-height: 1.25;

	box-sizing: border-box;
	margin: 0;
	padding: clamp(.7rem, 1.8vw, 1rem);
	border: 1px solid var(--drr-border);
	border-left: 4px solid var(--drr-bar);
	background: var(--drr-panel);
	color: var(--drr-panel-text);
	line-height: 1.35;
}

/*
 * Kadence `.single-content` and Genesis `.entry-content` add aside / sibling
 * margins the Design preview never sees (the leftover gap around a filled
 * panel). Beat those wrappers and share the reset with `.drr-design-preview`.
 */
.drr-review-spotlight,
.single-content .drr-review-spotlight,
.entry-content .drr-review-spotlight,
.drr-design-preview .drr-review-spotlight {
	margin: 0;
}

.single-content p:has(+ .drr-review-spotlight),
.entry-content p:has(+ .drr-review-spotlight),
.drr-design-preview p:has(+ .drr-review-spotlight) {
	margin-bottom: .25rem;
}

/* No panel — the block sits directly on the page and is marked by a single rule. */
.drr-review-spotlight--minimal {
	padding: clamp(.55rem, 1.4vw, .75rem) 0 0;
	border: 0;
	border-top: 3px solid var(--drr-bar);
	background: none;
	color: inherit;
}

.drr-review-spotlight__heading {
	margin: 0 0 .4rem;
	color: var(--drr-heading);
	font-family: inherit;
	line-height: 1.2;
}

/* A quiet eyebrow above the quote. */
.drr-review-spotlight__heading--label {
	font-size: .8em;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Reads at the weight of a section heading without being one in the markup. */
.drr-review-spotlight__heading--heading {
	margin-bottom: .35rem;
	font-size: 1.12em;
	font-weight: 700;
	letter-spacing: -.01em;
}

.drr-review-spotlight__heading--large {
	margin-bottom: .35rem;
	font-size: 1.28em;
	font-weight: 700;
	letter-spacing: -.015em;
}

.drr-review-spotlight__stars {
	margin: 0 0 .05rem;
	color: var(--drr-stars);
	letter-spacing: .08em;
	line-height: 1.15;
	font-size: .95em;
}

.drr-review-spotlight__reviews {
	display: grid;
	gap: .5rem;
}

.drr-review-spotlight__review {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
}

.drr-review-spotlight blockquote,
.single-content .drr-review-spotlight blockquote,
.entry-content .drr-review-spotlight blockquote,
.drr-design-preview .drr-review-spotlight blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Kadence applies `.single-content p { margin-bottom: var(--global-md-spacing) }`
 * (~2rem). The quote and the “Rated … out of 5” line are both <p>, so they pick
 * that up on the live recipe. Reset every paragraph in the card, with selectors
 * that beat one-class-plus-element theme rules and wp-admin `.form-table td p`.
 * Quote and aggregate re-apply the controlled spacing below. Design preview
 * shares these declarations via `.drr-design-preview`.
 */
.drr-review-spotlight p,
.single-content .drr-review-spotlight p,
.entry-content .drr-review-spotlight p,
.drr-design-preview .drr-review-spotlight p {
	margin: 0;
	line-height: var(--drr-line-height, 1.25);
}

.drr-review-spotlight__review p,
.single-content .drr-review-spotlight__review p,
.entry-content .drr-review-spotlight__review p,
.drr-design-preview .drr-review-spotlight__review p {
	margin: .08rem 0 .25rem;
	font-size: var(--drr-quote-size, 1em);
	line-height: var(--drr-line-height, 1.25);
}

/*
 * Reviewer names must stay at the panel text colour. Opacity on white cite
 * over a filled prominent panel (Stretch & Folds brown #a06342) dropped
 * contrast to ~3.5:1. Theme cite grey must not win either: keep colour
 * inherited from the Spotlight, and use the same wrapper prefixes as the
 * quote / paragraph resets.
 */
.drr-review-spotlight__review cite,
.single-content .drr-review-spotlight__review cite,
.entry-content .drr-review-spotlight__review cite,
.drr-design-preview .drr-review-spotlight__review cite {
	font-size: .88em;
	font-style: normal;
	color: inherit;
}

.drr-review-spotlight__aggregate {
	font-size: var(--drr-quote-size, 1em);
	line-height: var(--drr-line-height, 1.25);
}

.drr-review-spotlight p.drr-review-spotlight__aggregate,
.single-content .drr-review-spotlight p.drr-review-spotlight__aggregate,
.entry-content .drr-review-spotlight p.drr-review-spotlight__aggregate,
.drr-design-preview .drr-review-spotlight p.drr-review-spotlight__aggregate {
	margin: 0 0 .4rem;
}

/* Under a quote the average is a summary, not the headline, so it sits quieter. */
.drr-review-spotlight__aggregate--beside {
	padding-top: .35rem;
	border-top: 1px solid var(--drr-border);
	font-size: .92em;
	line-height: var(--drr-line-height, 1.25);
	color: inherit;
}

.drr-review-spotlight p.drr-review-spotlight__aggregate--beside,
.single-content .drr-review-spotlight p.drr-review-spotlight__aggregate--beside,
.entry-content .drr-review-spotlight p.drr-review-spotlight__aggregate--beside,
.drr-design-preview .drr-review-spotlight p.drr-review-spotlight__aggregate--beside {
	margin: .4rem 0 0;
}

/* On a filled panel the border colour is the fill, and on no panel at all there is
   nothing to draw against, so both borrow the text colour for the rule. Keep full
   opacity so “Rated …” stays as readable as the quote on prominent brown fills. */
.drr-review-spotlight--prominent .drr-review-spotlight__aggregate--beside,
.drr-review-spotlight--minimal .drr-review-spotlight__aggregate--beside {
	border-top-color: currentColor;
	color: inherit;
}

.drr-review-spotlight__link {
	display: inline-block;
	margin-top: .35rem;
	color: inherit;
	font-size: .86em;
	font-weight: 700;
}

.drr-review-spotlight--minimal .drr-review-spotlight__link {
	color: var(--drr-accent);
}

@media (min-width: 760px) {
	.drr-review-spotlight__reviews--2,
	.drr-review-spotlight__reviews--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}