.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;

	--drr-space-above: 1.5rem;

	box-sizing: border-box;
	margin: var(--drr-space-above) 0 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 {
	margin: var(--drr-space-above, 1.5rem) 0 0;
}

.drr-design-preview .drr-review-spotlight {
	margin: 0;
}

/*
 * Space above the panel is owned by the panel (margin-top above), not by the
 * theme's paragraph margin, which is anything from 0 to 2rem. The paragraph
 * above gives up its bottom margin so the two never stack, and the gap is the
 * same on every theme. A site can still tune it with --drr-space-above.
 */
.single-content p:has(+ .drr-review-spotlight),
.entry-content p:has(+ .drr-review-spotlight),
.drr-design-preview p:has(+ .drr-review-spotlight) {
	margin-bottom: 0;
}

/* 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));
	}
}
/* ==========================================================================
 * Recipe Reviews 0.2.32: theme shield
 *
 * Why: themes style bare elements the Spotlight is built from. Feast (Foodie
 * Pro, Cravings Pro, Brunch Pro, Seasoned Pro and the Feast plugin) ships
 *   aside { font-size: .8em }            aside p, aside div, aside ul { margin: 17px 0 }
 *   aside a { text-decoration: underline }  blockquote, cite, em, i { font-style: italic }
 *   blockquote { margin: 40px }          blockquote::before { content: "\201C"; font-size: 2em / 77px }
 * and other themes add blockquote borders, backgrounds, serif fonts, cite
 * dashes and uppercase. 0.2.31 only reset some of these, at one-class
 * specificity, so `.entry-content aside p` style rules still won.
 *
 * How: every rule is scoped with
 *   .drr-review-spotlight:is(.drr-review-spotlight, #drr-shield)
 * :is() takes the specificity of its strongest argument, so this scores as one
 * ID plus one class (1,1,0) without the ID existing in the page. It beats any
 * class or element theme rule, and `#content blockquote` style rules too,
 * with no !important (themes that use !important on bare elements are the
 * only thing it cannot beat, and none was found in the sample).
 * ========================================================================== */

/* 1. The panel itself: a theme's aside/blockquote rules must not reach it. */
.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) {
	box-sizing: border-box;
	float: none;
	clear: both;
	width: auto;
	max-width: none;
	margin: var(--drr-space-above, 1.5rem) 0 0;
	padding: clamp(.7rem, 1.8vw, 1rem);
	border: 1px solid var(--drr-border);
	border-inline-start: 4px solid var(--drr-bar);
	border-radius: 0;
	background: var(--drr-panel);
	box-shadow: none;
	color: var(--drr-panel-text);
	font-family: inherit;
	font-size: inherit;          /* Feast: aside { font-size: .8em } */
	font-style: normal;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;
	quotes: none;
}

.drr-review-spotlight--minimal:is(.drr-review-spotlight, #drr-shield) {
	padding: clamp(.55rem, 1.4vw, .75rem) 0 0;
	border: 0;
	border-top: 3px solid var(--drr-bar);
	background: none;
	color: inherit;
}

/* 2. Every element inside starts from zero. */
.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) :is(div, blockquote, p, cite, span, strong, a) {
	box-sizing: border-box;
	float: none;
	width: auto;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-style: normal;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;
	quotes: none;
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) :is(div, blockquote, p, cite, a)::before,
.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) :is(div, blockquote, p, cite, a)::after,
.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield)::before,
.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield)::after {
	content: none;              /* Feast and others: blockquote::before { content: open quote } */
	display: none;
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) strong {
	font-weight: 700;
}

/* 3. Our own parts, re-applied at shield strength (same values as 0.2.31). */
.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) .drr-review-spotlight__heading {
	margin: 0 0 .4rem;
	color: var(--drr-heading);
	line-height: 1.2;
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) .drr-review-spotlight__heading--label {
	font-size: .8em;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) .drr-review-spotlight__heading--heading {
	margin-bottom: .35rem;
	font-size: 1.12em;
	font-weight: 700;
	letter-spacing: -.01em;
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) .drr-review-spotlight__heading--large {
	margin-bottom: .35rem;
	font-size: 1.28em;
	font-weight: 700;
	letter-spacing: -.015em;
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) .drr-review-spotlight__reviews {
	display: grid;
	gap: .5rem;
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) .drr-review-spotlight__review {
	display: block;
	font-size: 1em;             /* Theme blockquote font sizes (1.2em to 1.5em) */
	font-weight: 400;
	color: inherit;
}

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

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) .drr-review-spotlight__stars span {
	color: inherit;
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) .drr-review-spotlight__review p {
	display: block;
	margin: .08rem 0 .25rem;
	color: inherit;
	font-size: var(--drr-quote-size, 1em);
	font-weight: 400;
	line-height: var(--drr-line-height, 1.25);
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) .drr-review-spotlight__review cite {
	display: block;
	color: inherit;
	font-size: .88em;
	font-weight: 400;
	line-height: 1.3;
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) p.drr-review-spotlight__aggregate {
	margin: 0 0 .4rem;
	color: inherit;
	font-size: var(--drr-quote-size, 1em);
	line-height: var(--drr-line-height, 1.25);
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) p.drr-review-spotlight__aggregate--beside {
	margin: .4rem 0 0;
	padding-top: .35rem;
	border-top: 1px solid var(--drr-border);
	font-size: .92em;
}

.drr-review-spotlight--prominent:is(.drr-review-spotlight, #drr-shield) p.drr-review-spotlight__aggregate--beside,
.drr-review-spotlight--minimal:is(.drr-review-spotlight, #drr-shield) p.drr-review-spotlight__aggregate--beside {
	border-top-color: currentColor;
}

/* 4. The link: one look everywhere (Feast underlines aside links, Kadence and
 * Trellis do not). Bold, panel colour, underline on hover and keyboard focus. */
.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) a.drr-review-spotlight__link {
	display: inline-block;
	margin-top: .35rem;
	color: inherit;
	font-size: .86em;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	border-bottom: 0;
	background: none;
	box-shadow: none;
}

.drr-review-spotlight--minimal:is(.drr-review-spotlight, #drr-shield) a.drr-review-spotlight__link {
	color: var(--drr-accent);
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) a.drr-review-spotlight__link:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: .15em;
}

.drr-review-spotlight:is(.drr-review-spotlight, #drr-shield) a.drr-review-spotlight__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

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

/* 5. Space above the panel belongs to the panel on any wrapper, not only
 * .entry-content / .single-content (Trellis uses .entry-content too, but
 * Divi .et_pb_post_content and Elementor .elementor-widget-theme-post-content
 * do not). */
:is(p, .wp-block-group, figure, ul, ol):has(+ .drr-review-spotlight) {
	margin-bottom: 0;
}
