/*
 * WooCommerce – Hero (Figma 279:2008, 1600×960 + 120px to the next section).
 * Stage: vertical gradient #3c007a → purple-70, two translucent rotated polygons, the title block at y=136
 * (767 wide: H1 + lead 665 wide, 16 apart; buttons 24 below) and the "reviewClassic" product-reviews
 * illustration (1159.365 wide) at y=445, clipped by the stage at 960.
 * Selectors on children of WordPress layout containers are doubled (.a > .b) to beat the layout margin rules.
 */

.rs-woo-hero__stage {
	position: relative;
	box-sizing: border-box;
	height: 960px;
	padding: 136px var(--wp--style--root--padding-right, 16px) 0 var(--wp--style--root--padding-left, 16px);
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, #3c007a 0%, var(--wp--preset--color--purple-70) 100%);
}

/*
 * Polygon 5 (1568:7229): a 996.029×905.045 triangle in a 1420.06px box rotated 165° about its centre at
 * (1479.61, 690.61) in the 1600 frame (1739.211px wrapper at left 610, top −179). Figma applies the inner
 * shadows in page space, so the rotation is baked into the SVG (1100×1150, origin at frame x 850, y 150)
 * instead of a CSS transform, which would rotate the shadow offsets too. Polygon 6 (1568:7313) is a
 * 742px box centred at (157, 665), image insets 1.07% / 2.05% / 4.95%, not rotated.
 * Horizontal positions are relative to the frame centre (800).
 */
.rs-woo-hero__stage::before,
.rs-woo-hero__stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	background: 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

.rs-woo-hero__stage::before {
	top: 150px;
	left: calc(50% + 50px);
	width: 1100px;
	height: 1150px;
	background-image: url("../../images/woo/hero/polygon-5.svg");
}

.rs-woo-hero__stage::after {
	top: 301.93px;
	left: calc(50% - 998.789px);
	width: 711.577px;
	height: 697.345px;
	background-image: url("../../images/woo/hero/polygon-6.svg");
}

.rs-woo-hero__stage > .rs-woo-hero__intro {
	position: relative;
	max-width: 767px;
	margin: 0 auto;
}

.rs-woo-hero__intro > *,
.rs-woo-hero__text > * {
	margin: 0;
}

/* 767px at 48px, in em so the "…WooCommerce / Review Management" break holds as the fluid size shrinks. */
.rs-woo-hero__text > .rs-woo-hero__title {
	max-width: 15.98em;
}

.rs-woo-hero__text > .rs-woo-hero__lead {
	max-width: 665px;
}

/*
 * Figma's code gives "Get ReviewScribe" the black large button, but this hero renders it translucent:
 * ~20% black over the gradient with a 1px white-20% rim (same box as the ghost button next to it).
 */
.rs-woo-hero__actions > .wp-block-button.is-style-black-lg > .wp-block-button__link {
	padding: 15px 15px 15px 19px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.2);
}

.rs-woo-hero__actions > .wp-block-button.is-style-black-lg > .wp-block-button__link:hover,
.rs-woo-hero__actions > .wp-block-button.is-style-black-lg > .wp-block-button__link:focus-visible {
	background: rgba(0, 0, 0, 0.35);
}

/* Illustration: absolute at y=445, centred; the stage clips it at 960 (515px visible). */
.rs-woo-hero__stage > .rs-woo-hero__visual {
	position: absolute;
	top: 445px;
	left: calc(50% - 579.682px);
	z-index: 1;
	width: 1159.365px;
	margin: 0;
}

/* ---------- Product reviews illustration (Figma "reviewClassic " 1562:6283) ---------- */

.rs-woo-mock {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	box-sizing: border-box;
	width: 1159.365px;
	padding: 28px 40px;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--25, 25px);
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.12);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0;
	color: var(--wp--preset--color--black);
	text-align: left;
	white-space: nowrap;
}

.rs-woo-mock span,
.rs-woo-mock i {
	display: block;
	font-style: normal;
}

.rs-woo-mock img {
	display: block;
	flex: none;
}

/* Left column: score, rating bars, recommendation, AI summary (305.365 wide, 24 apart). */
.rs-woo-mock__side {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 24px;
	width: 305.365px;
}

.rs-woo-mock__score {
	display: flex;
	align-items: center;
	gap: 11.31px;
	height: 37.699px;
}

.rs-woo-mock__avg,
.rs-woo-mock__total {
	font-size: 17px;
	font-weight: 600;
	line-height: 24px;
}

/* Star 22: 20px box (glyph 19.02×18.09), 3.77 before the text. */
.rs-woo-mock__score > .rs-woo-mock__avg {
	display: flex;
	align-items: center;
	gap: 3.77px;
}

.rs-woo-mock__avg::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("../../images/woo/hero/star-tile.svg") 0 0 / 22.857px 20px no-repeat;
}

.rs-woo-mock__score > .rs-woo-mock__dot {
	flex: none;
	width: 5.655px;
	height: 5.655px;
	border-radius: 50%;
	background: var(--wp--preset--color--black);
}

/* Rating bars: 5 rows 22.655 tall, 7.54 apart; label 37.699, count 30.159 (right-aligned). */
.rs-woo-mock__bars {
	display: flex;
	flex-direction: column;
	gap: 7.54px;
}

.rs-woo-mock__bar {
	display: flex;
	align-items: center;
	gap: 7.54px;
	font-size: 12.252px;
	line-height: 17px;
}

.rs-woo-mock__bar > .rs-woo-mock__bar-label {
	flex: none;
	width: 37.699px;
	padding: 2.827px 0;
	font-weight: 500;
}

.rs-woo-mock__bar > .rs-woo-mock__bar-count {
	flex: none;
	width: 30.159px;
	padding: 2.827px 0;
	text-align: right;
	color: var(--wp--preset--color--ink-secondary);
}

.rs-woo-mock__track {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 7.54px;
	overflow: hidden;
	border-radius: 99px;
	background: var(--wp--preset--color--stroke);
}

.rs-woo-mock__track::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w);
	border-radius: 99px;
	background: #f50;
}

/* "84% would recommend" card: 0.471px #d4d4d4 stroke (inside, no layout space), padding 15.08. */
.rs-woo-mock__rec {
	display: flex;
	align-items: center;
	gap: 11.31px;
	padding: 15.08px;
	border-radius: 11.31px;
	box-shadow: inset 0 0 0 0.471px #d4d4d4;
}

.rs-woo-mock__rec > .rs-woo-mock__donut {
	position: relative;
	flex: none;
	width: 52.779px;
	height: 52.779px;
	background: url("../../images/woo/hero/donut-84.svg") 0 0 / 100% 100% no-repeat;
}

.rs-woo-mock__donut > span {
	position: absolute;
	top: 16.97px;
	left: 17.91px;
	font-size: 13.195px;
	font-weight: 600;
	line-height: 19px;
}

.rs-woo-mock__rec-title {
	padding: 1.885px 0;
	font-size: 14.137px;
	font-weight: 600;
	line-height: 19px;
}

.rs-woo-mock__rec-count {
	padding: 2.827px 0;
	font-size: 12.252px;
	line-height: 17px;
	color: var(--wp--preset--color--ink-secondary);
}

/* AI summary card: 0.5px #d4d4d4 stroke, 16/16/20 padding, 4px gap. */
.rs-woo-mock__ai {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 16px 20px;
	border-radius: 12px;
	box-shadow: inset 0 0 0 0.5px #d4d4d4;
}

.rs-woo-mock__ai > .rs-woo-mock__ai-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
}

.rs-woo-mock__ai-title::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("../../images/woo/hero/magic-wand.svg") 0 0 / 100% 100% no-repeat;
}

.rs-woo-mock__ai-text {
	padding: 4px 0;
	opacity: 0.7;
	white-space: normal;
}

.rs-woo-mock__ai > .rs-woo-mock__tags {
	display: flex;
	gap: 8px;
}

.rs-woo-mock__tags > span {
	flex: none;
	padding: 6px 16px;
	border-radius: 99px;
	background: #efefef;
	font-weight: 500;
}

/* Right column: two review cards (734 wide, 20 apart). */
.rs-woo-mock__reviews {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 20px;
	width: 734px;
}

.rs-woo-mock__review {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 12px 24px;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 0.5px #d7d7d7;
}

.rs-woo-mock__author {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rs-woo-mock__author > .rs-woo-mock__who {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-right: 4px;
	padding: 2px 0;
}

.rs-woo-mock__name {
	font-weight: 500;
}

.rs-woo-mock__who > .rs-woo-mock__flag {
	width: 16px;
	height: 16px;
	background: url("../../images/woo/hero/flag-germany.svg") 0 0 / 100% 100% no-repeat;
}

.rs-woo-mock__author > .rs-woo-mock__verified {
	width: 20px;
	height: 20px;
	background: url("../../images/woo/hero/seal-check.svg") 0 0 / 100% 100% no-repeat;
}

/* Review body: 334px text column + criteria, 48 apart, 20px bottom padding over a 0.5px #e0e0e0 rule. */
.rs-woo-mock__body {
	display: flex;
	align-items: center;
	gap: 48px;
	padding-bottom: 20px;
	box-shadow: inset 0 -0.5px 0 #e0e0e0;
}

.rs-woo-mock__body > .rs-woo-mock__main {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 8px;
	width: 334px;
}

/* Stars: 28px boxes 4px apart (tile 32×28); the filled layer is --rating tiles wide. */
.rs-woo-mock__main > .rs-woo-mock__stars {
	position: relative;
	width: 156px;
	height: 28px;
	background: url("../../images/woo/hero/star-outline-tile.svg") 0 0 / 32px 28px repeat-x;
}

.rs-woo-mock__stars::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--rating, 5) * 32px - 4px);
	background: url("../../images/woo/hero/star-tile.svg") 0 0 / 32px 28px repeat-x;
}

.rs-woo-mock__main > .rs-woo-mock__title {
	padding: 4px 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 24px;
}

.rs-woo-mock__main > .rs-woo-mock__lines {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rs-woo-mock__lines > i {
	height: 6px;
	border-radius: 99px;
	background: #d9d9d9;
}

.rs-woo-mock__lines > i:first-child {
	height: 8px;
}

.rs-woo-mock__lines > i:nth-child(2) {
	width: 286px;
}

.rs-woo-mock__lines > i:nth-child(3) {
	width: 240px;
}

/* Criteria: label (13/18, 1px padding) over a 6px meter + value (3px padding), 8 apart. */
.rs-woo-mock__body > .rs-woo-mock__criteria {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.rs-woo-mock__crit {
	font-size: 13px;
	line-height: 18px;
}

.rs-woo-mock__crit > .rs-woo-mock__crit-label {
	padding: 1px 0;
	font-weight: 500;
}

.rs-woo-mock__crit > .rs-woo-mock__meter {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rs-woo-mock__meter > .rs-woo-mock__track {
	height: 6px;
}

.rs-woo-mock__meter > .rs-woo-mock__track::before {
	background: #4306df;
}

.rs-woo-mock__meter > .rs-woo-mock__crit-value {
	flex: none;
	padding: 3px 0;
	color: var(--wp--preset--color--ink-secondary);
}

/* Footer: Helpful / Not Helpful pills (0.5px #9a9a9a stroke) and "Report Review". */
.rs-woo-mock__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.rs-woo-mock__foot > .rs-woo-mock__votes {
	display: flex;
	gap: 8px;
}

.rs-woo-mock__votes > .rs-woo-mock__vote,
.rs-woo-mock__foot > .rs-woo-mock__report {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rs-woo-mock__votes > .rs-woo-mock__vote {
	padding: 4px 12px;
	border-radius: 99px;
	box-shadow: inset 0 0 0 0.5px #9a9a9a;
}

.rs-woo-mock__votes > .rs-woo-mock__vote.is-up {
	background: #f1f1f1;
}

.rs-woo-mock__foot > .rs-woo-mock__report {
	padding: 3px 8px;
	border-radius: var(--wp--preset--border-radius--6, 6px);
}

.rs-woo-mock__vote::before,
.rs-woo-mock__report::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: url("../../images/woo/hero/thumbs-up.svg") 0 0 / 100% 100% no-repeat;
}

.rs-woo-mock__vote.is-down::before {
	background-image: url("../../images/woo/hero/thumbs-down.svg");
}

.rs-woo-mock__report::before {
	background-image: url("../../images/woo/hero/flag.svg");
}

/*
 * Below the Figma width the illustration joins the flow, 45px under the buttons, and scales down to the
 * content width; it stays cropped at the same point as the 960px stage (515 of its 740px).
 */
@media (max-width: 1279px) {
	.rs-woo-hero__stage {
		height: auto;
	}

	.rs-woo-hero__stage > .rs-woo-hero__visual {
		position: relative;
		top: auto;
		left: auto;
		width: min(1159.365px, 100%);
		margin: 45px auto 0;
		/* min-height 0: with overflow:clip the box isn't a scroll container, so aspect-ratio would otherwise
		   grow to the (unscaled) 740px content. */
		min-height: 0;
		aspect-ratio: 1159.365 / 515;
		overflow: clip;
		overflow-clip-margin: 30px;
		container-type: inline-size;
	}

	.rs-woo-mock {
		--rs-scale: min(1, tan(atan2(100cqw, 1159.365px)));
		transform: scale(var(--rs-scale));
		transform-origin: 0 0;
	}
}

@media (max-width: 781px) {
	.rs-woo-hero__stage {
		padding-top: 120px;
	}

	.rs-woo-hero__stage > .rs-woo-hero__visual {
		margin-top: 40px;
	}

	/* Buttons share the row, full width once they wrap. */
	.rs-woo-hero__actions > .wp-block-button {
		flex: 1 1 auto;
	}

	.rs-woo-hero__actions > .wp-block-button > .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
	}

	.rs-woo-hero__stage::after {
		display: none;
	}
}