/**
 * Block: Product Rating — .pdr1
 *
 * Reads: --star-size --star-gap --score-size --count-size --gap --pad
 *        --radius --star-color --star-empty --score-color --count-color
 *        --label-color --badge-bg --badge-color --box-bg --box-line
 *        --pct (inline, per block — how much of the star row is filled)
 * Root classes: is-design-{inline|pill|card|soft|outline|dark|gradient|score|stack}
 *               is-layout-{row|stack} is-text-align-{left|center|right}
 *               is-star-style-{char|svg|outline|one} is-shadow-{soft|strong}
 * Mobile-first: phones first, then 768px, then 1024px.
 */

/* ---------------------------------------------------------------- shell */
.espt-block-pd-rating .pdr1 {
	color: var(--bd-ink);
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: left;
}

.espt-block-pd-rating .espt-block-note {
	color: var(--bd-muted);
	font-size: 14px;
	margin: 0;
}

.espt-block-pd-rating .pdr1-in {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--gap, 8px);
	max-width: 100%;
	min-width: 0;
	text-align: left;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	vertical-align: middle;
}

/* --------------------------------------------------------------- label */
.espt-block-pd-rating .pdr1-label {
	color: var(--label-color, var(--bd-muted));
	font-size: var(--count-size, 13px);
	font-weight: 700;
	line-height: 1.3;
	min-width: 0;
}

/* --------------------------------------------------------------- stars */
.espt-block-pd-rating .pdr1-st {
	display: inline-block;
	flex: 0 0 auto;
	font-size: var(--star-size, 16px);
	line-height: 1;
	max-width: 100%;
	position: relative;
	white-space: nowrap;
}

.espt-block-pd-rating .pdr1-e,
.espt-block-pd-rating .pdr1-f {
	align-items: center;
	display: inline-flex;
	gap: var(--star-gap, 2px);
	line-height: 1;
}

.espt-block-pd-rating .pdr1-e {
	color: var(--star-empty, #e2e8f0);
}

.espt-block-pd-rating .pdr1-f {
	color: var(--star-color, var(--bd-accent));
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	width: var(--pct, 0%);
}

.espt-block-pd-rating .pdr1-ch {
	display: inline-block;
	letter-spacing: var(--star-gap, 2px);
	/* letter-spacing also trails the 5th star; cancel it so the row is exactly
	   5 glyphs + 4 gaps and the --pct overlay lands on the right star. */
	margin-inline-end: calc(-1 * var(--star-gap, 2px));
}

.espt-block-pd-rating .pdr1-i svg {
	display: block;
	height: 1em;
	width: 1em;
}

.espt-block-pd-rating.is-star-style-outline .pdr1-e {
	color: var(--star-empty, var(--bd-line));
}

/* one star + score */
.espt-block-pd-rating .pdr1-st.is-one {
	color: var(--star-color, var(--bd-accent));
	display: inline-flex;
}

/* ---------------------------------------------------------------- meta */
.espt-block-pd-rating .pdr1-meta {
	align-items: baseline;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

.espt-block-pd-rating .pdr1-score {
	color: var(--score-color, var(--bd-ink));
	font-size: var(--score-size, 15px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
	min-width: 0;
	white-space: nowrap;
}

.espt-block-pd-rating .pdr1-out {
	font-size: 0.7em;
	font-weight: 700;
	opacity: 0.7;
}

.espt-block-pd-rating .pdr1-count {
	color: var(--count-color, var(--bd-muted));
	font-size: var(--count-size, 13px);
	font-weight: 600;
	line-height: 1.35;
	min-width: 0;
	text-decoration: none;
}

.espt-block-pd-rating a.pdr1-count {
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.espt-block-pd-rating a.pdr1-count:hover,
.espt-block-pd-rating a.pdr1-count:focus-visible {
	border-bottom-color: currentColor;
	color: var(--star-color, var(--bd-primary));
}

.espt-block-pd-rating .pdr1-count.is-empty {
	font-weight: 500;
}

/* --------------------------------------------------------------- badge */
.espt-block-pd-rating .pdr1-badge {
	align-items: center;
	background: var(--badge-bg, var(--bd-soft));
	border-radius: 99px;
	color: var(--badge-color, var(--bd-primary-dark));
	display: inline-flex;
	flex: 0 1 auto;
	font-size: max(11px, calc(var(--count-size, 13px) - 1px));
	font-weight: 700;
	gap: 5px;
	line-height: 1.3;
	max-width: 100%;
	min-width: 0;
	padding: 3px 10px;
}

.espt-block-pd-rating .pdr1-bi {
	font-size: 1.05em;
}

/* -------------------------------------------------------------- layout */
/* The Layout control is hidden for the "score" and "stack" designs (they own
   their own arrangement), but the stored value still prints its class — so
   those two designs are excluded here instead of being fought over later. */
.espt-block-pd-rating.is-layout-stack:not(.is-design-score):not(.is-design-stack) .pdr1-in {
	align-items: flex-start;
	flex-direction: column;
	gap: max(4px, calc(var(--gap, 8px) - 4px));
}

.espt-block-pd-rating.is-layout-stack.is-text-align-center:not(.is-design-score):not(.is-design-stack) .pdr1-in {
	align-items: center;
}

.espt-block-pd-rating.is-layout-stack.is-text-align-right:not(.is-design-score):not(.is-design-stack) .pdr1-in {
	align-items: flex-end;
}

.espt-block-pd-rating.is-text-align-center .pdr1,
.espt-block-pd-rating.is-text-align-center .pdr1-in {
	text-align: center;
}

.espt-block-pd-rating.is-text-align-right .pdr1,
.espt-block-pd-rating.is-text-align-right .pdr1-in {
	text-align: right;
}

/* ------------------------------------------------------------- designs */
.espt-block-pd-rating.is-design-pill .pdr1-in {
	background: var(--box-bg, var(--bd-soft));
	border: 1px solid var(--box-line, var(--bd-soft-line));
	border-radius: 999px;
	padding: calc(var(--pad, 10px) * 0.55) calc(var(--pad, 10px) + 2px);
}

.espt-block-pd-rating.is-design-card .pdr1-in,
.espt-block-pd-rating.is-design-stack .pdr1-in {
	background: var(--box-bg, var(--bd-box-bg));
	border: 1px solid var(--box-line, var(--bd-line));
	border-radius: var(--radius, 14px);
	padding: var(--pad, 12px);
}

.espt-block-pd-rating.is-design-soft .pdr1-in {
	background: var(--box-bg, var(--bd-soft));
	border: 1px solid var(--box-line, var(--bd-soft-line));
	border-radius: var(--radius, 14px);
	padding: var(--pad, 12px);
}

.espt-block-pd-rating.is-design-outline .pdr1-in {
	background: var(--box-bg, transparent);
	border: 2px solid var(--box-line, var(--bd-line));
	border-radius: var(--radius, 14px);
	padding: var(--pad, 12px);
}

.espt-block-pd-rating.is-design-dark .pdr1-in {
	background: var(--box-bg, var(--bd-deep));
	border: 1px solid var(--box-line, rgba(255, 255, 255, 0.12));
	border-radius: var(--radius, 14px);
	padding: var(--pad, 12px);
}

.espt-block-pd-rating.is-design-gradient .pdr1-in {
	background: var(--box-bg, linear-gradient(135deg, var(--bd-primary), var(--bd-primary-dark)));
	border: 0;
	border-radius: var(--radius, 14px);
	padding: var(--pad, 12px);
}

.espt-block-pd-rating.is-design-dark .pdr1-score,
.espt-block-pd-rating.is-design-gradient .pdr1-score {
	color: var(--score-color, #ffffff);
}

.espt-block-pd-rating.is-design-dark .pdr1-count,
.espt-block-pd-rating.is-design-gradient .pdr1-count,
.espt-block-pd-rating.is-design-dark .pdr1-label,
.espt-block-pd-rating.is-design-gradient .pdr1-label {
	color: var(--count-color, rgba(255, 255, 255, 0.82));
}

.espt-block-pd-rating.is-design-dark .pdr1-e,
.espt-block-pd-rating.is-design-gradient .pdr1-e {
	color: var(--star-empty, rgba(255, 255, 255, 0.24));
}

.espt-block-pd-rating.is-design-dark .pdr1-badge,
.espt-block-pd-rating.is-design-gradient .pdr1-badge {
	background: var(--badge-bg, rgba(255, 255, 255, 0.16));
	color: var(--badge-color, #ffffff);
}

/* score chip beside the stars */
.espt-block-pd-rating.is-design-score .pdr1-in {
	align-items: center;
	flex-direction: row;
	gap: var(--gap, 10px);
}

.espt-block-pd-rating.is-design-score .pdr1-meta {
	display: contents;
}

.espt-block-pd-rating.is-design-score .pdr1-label {
	order: -2;
}

.espt-block-pd-rating.is-design-score .pdr1-score {
	background: var(--box-bg, var(--star-color, var(--bd-accent)));
	border-radius: var(--radius, 12px);
	color: var(--score-color, #ffffff);
	/* The chip must never be squeezed by the nowrap row at ≥768px. */
	flex: 0 0 auto;
	font-size: calc(var(--score-size, 15px) * 1.45);
	order: -1;
	padding: calc(var(--pad, 10px) * 0.4) calc(var(--pad, 10px) * 0.75);
}

.espt-block-pd-rating.is-design-score .pdr1-out {
	opacity: 0.8;
}

/* centred stack */
.espt-block-pd-rating.is-design-stack .pdr1-in {
	align-items: center;
	flex-direction: column;
	gap: max(4px, calc(var(--gap, 8px) - 2px));
	text-align: center;
}

.espt-block-pd-rating.is-design-stack .pdr1-meta {
	justify-content: center;
}

/* --------------------------------------------------------------- polish */
.espt-block-pd-rating.is-shadow-soft .pdr1-in {
	box-shadow: 0 6px 20px -12px rgba(15, 23, 42, 0.35);
}

.espt-block-pd-rating.is-shadow-strong .pdr1-in {
	box-shadow: 0 16px 34px -16px rgba(15, 23, 42, 0.45);
}

/* The "score" design has no box — its wrapper is transparent, so the shadow
   belongs on the chip, otherwise it floats around nothing. */
.espt-block-pd-rating.is-design-score.is-shadow-soft .pdr1-in,
.espt-block-pd-rating.is-design-score.is-shadow-strong .pdr1-in {
	box-shadow: none;
}

.espt-block-pd-rating.is-design-score.is-shadow-soft .pdr1-score {
	box-shadow: 0 6px 20px -12px rgba(15, 23, 42, 0.35);
}

.espt-block-pd-rating.is-design-score.is-shadow-strong .pdr1-score {
	box-shadow: 0 16px 34px -16px rgba(15, 23, 42, 0.45);
}

.espt-block-pd-rating.is-design-card .pdr1-in:hover,
.espt-block-pd-rating.is-design-stack .pdr1-in:hover,
.espt-block-pd-rating.is-design-pill .pdr1-in:hover {
	box-shadow: 0 12px 26px -16px rgba(15, 23, 42, 0.4);
	transform: translateY(-2px);
}

.espt-block-pd-rating a.pdr1-count:focus-visible {
	border-radius: 4px;
	outline: 2px solid var(--star-color, var(--bd-primary));
	outline-offset: 3px;
}

/* --------------------------------------------------------------- 768px */
@media (min-width: 768px) {
	.espt-block-pd-rating.is-design-score .pdr1-in,
	.espt-block-pd-rating.is-design-pill .pdr1-in {
		flex-wrap: nowrap;
	}

	.espt-block-pd-rating .pdr1-badge {
		padding: 4px 12px;
	}
}

/* -------------------------------------------------------------- 1024px */
@media (min-width: 1024px) {
	.espt-block-pd-rating.is-design-stack .pdr1-in {
		padding: calc(var(--pad, 12px) * 1.15);
	}
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
	.espt-block-pd-rating .pdr1-f,
	.espt-block-pd-rating .pdr1-in,
	.espt-block-pd-rating a.pdr1-count {
		transition: none;
	}

	.espt-block-pd-rating .pdr1-in:hover {
		transform: none;
	}
}