/* Agency Reviews widget. All classes prefixed agyrev-; themed via custom properties. */
.agyrev {
	--agyrev-accent: #1a73e8;
	--agyrev-bg: transparent;
	--agyrev-text: #1f1f1f;
	--agyrev-muted: #5f6368;
	--agyrev-border: #dadce0;
	--agyrev-card-bg: #fff;
	--agyrev-star-fill: #fbbc04;
	--agyrev-star-empty: #dadce0;
	--agyrev-clamp-lines: 3;
	box-sizing: border-box;
	background: var(--agyrev-bg);
	color: var(--agyrev-text);
	color-scheme: light;
	/* Default inherits the page/theme font (byte-identical to 1.0.0); a chosen
	   font-family key sets --agyrev-font-family via an .agyrev--font-* class. */
	font-family: var(--agyrev-font-family, inherit);
	font-size: var(--agyrev-font-size, 0.9375rem);
	line-height: 1.5;
	padding: var(--agyrev-container-padding, 0);
	max-width: var(--agyrev-max-width, none);
}

/* Widget alignment (align=center|right). Only visible with a max-width;
   the default (left) emits no class. */
.agyrev--align-center {
	margin-inline: auto;
}

.agyrev--align-right {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

/* Curated system-font stacks — no web fonts are loaded, so the widget makes no
   extra network request. Selected in the generator / block as "Font". */
.agyrev--font-sans {
	--agyrev-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

.agyrev--font-serif {
	--agyrev-font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

.agyrev--font-rounded {
	--agyrev-font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, "Segoe UI", system-ui, sans-serif;
}

.agyrev--font-mono {
	--agyrev-font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Visually-hidden but screen-reader-available. The Google attribution now shows
   the logo alone (the logo already says "from Google"); the textual label moves
   here so assistive tech still announces "Reviews from Google" / "Posted on
   Google". */
.agyrev .agyrev__sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.agyrev *,
.agyrev *::before,
.agyrev *::after {
	box-sizing: inherit;
}

/* Theme-proofing. The widget renders in the host page's light DOM (no shadow
   DOM / iframe), so the active theme's button/link styling cascades onto the
   widget's own controls — including on :hover/:focus (e.g. a stock
   `button:hover{background:#c36}` or `[type=button]:hover{…}`). Two layers
   defeat that:
   1. SELECTORS are scoped under the widget root as real compounds
      (`.agyrev .agyrev-…` = (0,2,0)), beating common theme selectors for the
      GEOMETRY props (padding, radius, width/height, font/size) that stay in the
      normal cascade — so the badge skins, inline custom-property overrides and
      per-control font sizes keep working.
   2. The CHROME quartet (border, background, color, text-decoration — plus
      box-shadow/text-transform/letter-spacing/text-shadow) carries !important
      on the reset here AND on every per-control paint / badge skin / :hover
      state below. !important outranks ANY normal-author theme rule regardless
      of its specificity OR state, so a theme can never repaint widget chrome in
      any state; the widget's own !important rules still resolve among themselves
      by specificity/source order. Geometry deliberately stays WITHOUT !important
      so it never freezes the badge skins' padding/radius.
   Keep the `.agyrev` prefix AND the !important on chrome — dropping either
   re-opens the bug, which the admin iframe preview (no theme CSS) cannot show. */
.agyrev .agyrev-review__more,
.agyrev .agyrev__more-on-google,
.agyrev .agyrev-badge,
.agyrev .agyrev-carousel__button,
.agyrev .agyrev-carousel__dot,
.agyrev .agyrev-popup__close,
.agyrev .agyrev-badge__close,
.agyrev .agyrev__place-link,
.agyrev .agyrev__count,
.agyrev .agyrev__attribution,
.agyrev .agyrev-review__author {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	line-height: normal;
}

/* Header */
.agyrev__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin-bottom: 1rem;
}

.agyrev__name {
	font-size: 1.0625rem;
	font-weight: 600;
}

.agyrev .agyrev__place-link {
	color: inherit;
	text-decoration: none;
}

.agyrev .agyrev__place-link:hover,
.agyrev .agyrev__place-link:focus {
	text-decoration: underline !important;
}

.agyrev__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.agyrev__score {
	font-weight: 600;
}

.agyrev .agyrev__count {
	color: var(--agyrev-muted) !important;
	text-decoration: none;
}

.agyrev .agyrev__count:hover,
.agyrev .agyrev__count:focus {
	text-decoration: underline !important;
}

.agyrev .agyrev__attribution {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-left: auto;
	color: var(--agyrev-muted) !important;
	font-size: 0.8125rem;
	text-decoration: none;
}

.agyrev .agyrev__attribution:hover,
.agyrev .agyrev__attribution:focus {
	text-decoration: underline !important;
}

.agyrev__glogo {
	flex-shrink: 0;
}

/* Header presets */
.agyrev--header-centered .agyrev__header {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.agyrev--header-centered .agyrev__attribution {
	margin-left: 0;
}

.agyrev--header-minimal .agyrev__attribution {
	display: none;
}

/* Stars */
.agyrev-stars {
	display: inline-block;
	line-height: 1;
}

.agyrev-stars__base {
	position: relative;
	display: inline-block;
	color: var(--agyrev-star-empty);
	font-size: 1rem;
	letter-spacing: 0.0625em;
}

.agyrev-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--agyrev-star-fill);
}

/* Review list (list style) */
.agyrev__items {
	display: flex;
	flex-direction: column;
	gap: var(--agyrev-card-gap, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.agyrev__items--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	align-items: stretch;
}

/* Fixed grid columns (grid_columns=1..6). The default (0 = auto) emits no
   class, so the responsive auto-fit grid above still applies. */
.agyrev--grid-cols-1 .agyrev__items--grid {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.agyrev--grid-cols-2 .agyrev__items--grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agyrev--grid-cols-3 .agyrev__items--grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agyrev--grid-cols-4 .agyrev__items--grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agyrev--grid-cols-5 .agyrev__items--grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.agyrev--grid-cols-6 .agyrev__items--grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Keep fixed grids readable on small screens: collapse 3+ columns to two,
   then to one, regardless of the chosen column count. */
@media (max-width: 768px) {
	.agyrev--grid-cols-3 .agyrev__items--grid,
	.agyrev--grid-cols-4 .agyrev__items--grid,
	.agyrev--grid-cols-5 .agyrev__items--grid,
	.agyrev--grid-cols-6 .agyrev__items--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.agyrev--grid-cols-2 .agyrev__items--grid,
	.agyrev--grid-cols-3 .agyrev__items--grid,
	.agyrev--grid-cols-4 .agyrev__items--grid,
	.agyrev--grid-cols-5 .agyrev__items--grid,
	.agyrev--grid-cols-6 .agyrev__items--grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Masonry style — pure CSS columns, no JS. The card_gap override feeds both
   the inter-column gap and the vertical card margin (gap doesn't apply to
   multi-column), so the control works for masonry as it does for list/grid;
   the default (unset) resolves to 1rem, byte-identical. */
.agyrev__items--masonry {
	display: block;
	column-count: 1;
	column-gap: var(--agyrev-card-gap, 1rem);
}

.agyrev__items--masonry .agyrev-review {
	margin: 0 0 var(--agyrev-card-gap, 1rem);
	break-inside: avoid;
}

@media (min-width: 600px) {
	.agyrev__items--masonry {
		column-count: 2;
	}
}

@media (min-width: 960px) {
	.agyrev__items--masonry {
		column-count: 3;
	}
}

.agyrev-review {
	margin: 0;
	padding: var(--agyrev-review-padding, 1rem);
	/* Chrome-armored (border + background !important) so a host theme cannot
	   repaint the card, mirroring the badge/attribution armor above. The card
	   color and border are driven ENTIRELY by the wrapper vars, so a preset that
	   wants a different look (e.g. spotlight) sets --agyrev-card-bg /
	   --agyrev-border-width defaults on the wrapper — never an element rule that
	   would beat an explicit inline card_color / border_width. */
	border: var(--agyrev-border-width, 1px) solid var(--agyrev-border) !important;
	border-radius: var(--agyrev-radius, 8px);
	background: var(--agyrev-card-bg) !important;
}

/* Card shadow presets (shadow=none|soft|floating). The default ('') emits no
   class and keeps the current look (1px border, no shadow). Border and shadow
   are decoupled: a preset sets ONLY box-shadow, so border_width/border_color
   always control the card border regardless of the chosen shadow. */
.agyrev--shadow-soft .agyrev-review {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.agyrev--shadow-floating .agyrev-review {
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 10px -6px rgba(0, 0, 0, 0.12);
}

.agyrev-review__head {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 0.5rem;
}

.agyrev-review__avatar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--agyrev-avatar-size, 2.25rem);
	height: var(--agyrev-avatar-size, 2.25rem);
	border-radius: 50%;
	background: var(--agyrev-accent);
	color: #fff;
	font-weight: 600;
}

.agyrev-review__avatar-img {
	display: block;
	object-fit: cover;
}

.agyrev-review__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.agyrev .agyrev-review__author {
	color: inherit;
	/* Per-element font/size (name_font / name_size). Falls back to the container
	   font var, then the inherited page font, so the default emits no override. */
	font-family: var(--agyrev-font-family-name, var(--agyrev-font-family, inherit));
	font-size: var(--agyrev-name-size, inherit);
	font-weight: 600;
	text-decoration: none;
}

.agyrev a.agyrev-review__author:hover,
.agyrev a.agyrev-review__author:focus {
	text-decoration: underline !important;
}

.agyrev-review__date {
	color: var(--agyrev-muted);
	font-size: 0.8125rem;
}

.agyrev-review__source {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	color: var(--agyrev-muted);
	font-size: 0.8em;
}

.agyrev-review__source .agyrev__glogo {
	width: 12px;
	height: 12px;
}

.agyrev-review__text {
	margin: 0.375rem 0 0;
	/* Per-element font/size (text_font / text_size). Falls back to the container
	   font var, then the inherited page font, so the default emits no override. */
	font-family: var(--agyrev-font-family-text, var(--agyrev-font-family, inherit));
	font-size: var(--agyrev-text-size, inherit);
}

.agyrev-is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--agyrev-clamp-lines);
	line-clamp: var(--agyrev-clamp-lines);
	overflow: hidden;
}

.agyrev .agyrev-review__more {
	margin-top: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--agyrev-accent) !important;
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
}

.agyrev .agyrev-review__more:hover,
.agyrev .agyrev-review__more:focus {
	text-decoration: underline !important;
}

.agyrev .agyrev__more-on-google {
	display: inline-flex;
	align-items: center;
	margin-top: 0.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--agyrev-accent) !important;
	border-radius: 0.375rem;
	color: var(--agyrev-accent) !important;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.agyrev .agyrev__more-on-google:hover,
.agyrev .agyrev__more-on-google:focus {
	background: var(--agyrev-accent) !important;
	color: #fff !important;
}

.agyrev-review__translated {
	display: block;
	margin-top: 0.25rem;
	color: var(--agyrev-muted);
	font-size: 0.75rem;
	font-style: italic;
}

.agyrev__empty {
	color: var(--agyrev-muted);
	font-style: italic;
}

/* Card presets (classic carries no CSS and must stay default-identical) */
.agyrev--card-balloon .agyrev-review {
	position: relative;
	overflow: visible;
}

.agyrev--card-balloon .agyrev-review__text {
	position: relative;
	margin-top: 0.75rem;
	padding: 0.875rem 1rem;
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--agyrev-accent) 10%, var(--agyrev-card-bg));
}

.agyrev--card-balloon .agyrev-review__text::after {
	content: "";
	position: absolute;
	bottom: -0.55rem;
	left: 1.25rem;
	width: 0;
	height: 0;
	border-top: 0.6rem solid color-mix(in srgb, var(--agyrev-accent) 10%, var(--agyrev-card-bg));
	border-right: 0.6rem solid transparent;
	border-left: 0.6rem solid transparent;
}

/* Spotlight = borderless transparent quote. Set as WRAPPER var defaults so an
   explicit inline card_color / border_width (set on the same .agyrev element)
   overrides them (inline style beats this class selector). */
.agyrev--card-spotlight {
	--agyrev-card-bg: transparent;
	--agyrev-border-width: 0;
}

.agyrev--card-spotlight .agyrev-review__text {
	/* Preset size is the fallback; an explicit text_size still wins. */
	font-size: var(--agyrev-text-size, 1.125rem);
	font-style: italic;
	line-height: 1.65;
}

/* Carousel style */
.agyrev-carousel {
	position: relative;
}

.agyrev-carousel__viewport {
	overflow: hidden;
}

.agyrev-carousel__track {
	flex-direction: row;
	gap: 0;
	transition: transform 220ms ease;
	will-change: transform;
}

.agyrev-carousel__slide {
	flex: 0 0 100%;
	outline: none;
	/* Slides need inner breathing room so card content isn't edge-to-edge.
	   Slider reuses the carousel engine, so this covers both styles. */
	padding: 0 0.75rem;
	box-sizing: border-box;
}

.agyrev-carousel__slide:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--agyrev-accent) 35%, transparent);
}

.agyrev-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.agyrev .agyrev-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--agyrev-border) !important;
	border-radius: 999px;
	background: transparent !important;
	color: var(--agyrev-muted) !important;
	cursor: pointer;
	line-height: 1;
}

.agyrev .agyrev-carousel__button:hover,
.agyrev .agyrev-carousel__button:focus {
	border-color: var(--agyrev-accent) !important;
	color: var(--agyrev-accent) !important;
}

.agyrev .agyrev-carousel__chevron {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
}

.agyrev-carousel__status {
	color: var(--agyrev-muted);
	font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
	.agyrev-carousel__track {
		transition: none;
	}
}

/* Slider style — one-item-per-view carousel with dot pagination, no autoplay. */
.agyrev-carousel--slider .agyrev-carousel__slide {
	padding: 0 0.25rem;
}

/* Slider cards-per-view (slider_per_view=2..4). The default (1) emits no class,
   so each slide stays full-width (flex: 0 0 100% above). The carousel JS reads
   the laid-out width to page by whole views, so it follows these breakpoints. */
.agyrev--slider-pv-2 .agyrev-carousel__slide {
	flex-basis: calc(100% / 2);
}

.agyrev--slider-pv-3 .agyrev-carousel__slide {
	flex-basis: calc(100% / 3);
}

.agyrev--slider-pv-4 .agyrev-carousel__slide {
	flex-basis: calc(100% / 4);
}

/* Collapse multi-card sliders on small screens so cards stay legible. */
@media (max-width: 768px) {
	.agyrev--slider-pv-3 .agyrev-carousel__slide,
	.agyrev--slider-pv-4 .agyrev-carousel__slide {
		flex-basis: calc(100% / 2);
	}
}

@media (max-width: 480px) {
	.agyrev--slider-pv-2 .agyrev-carousel__slide,
	.agyrev--slider-pv-3 .agyrev-carousel__slide,
	.agyrev--slider-pv-4 .agyrev-carousel__slide {
		flex-basis: 100%;
	}
}

.agyrev-carousel__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.agyrev .agyrev-carousel__dot {
	width: 0.625rem;
	height: 0.625rem;
	padding: 0;
	border: 1px solid var(--agyrev-border) !important;
	border-radius: 999px;
	background: transparent !important;
	cursor: pointer;
}

.agyrev .agyrev-carousel__dot:hover,
.agyrev .agyrev-carousel__dot:focus-visible {
	border-color: var(--agyrev-accent) !important;
}

.agyrev .agyrev-carousel__dot[aria-current="true"] {
	background: var(--agyrev-accent) !important;
	border-color: var(--agyrev-accent) !important;
}

/* Badge style */
.agyrev .agyrev-badge {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.625rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--agyrev-border) !important;
	border-radius: var(--agyrev-radius, 8px);
	background: var(--agyrev-card-bg) !important;
}

.agyrev-badge__name {
	font-weight: 600;
}

.agyrev-badge__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.agyrev--badge .agyrev__attribution {
	margin-left: 0;
}

/* Badge layouts */
.agyrev .agyrev-badge {
	cursor: default;
	color: inherit;
	text-decoration: none;
}

.agyrev a.agyrev-badge,
.agyrev button.agyrev-badge {
	cursor: pointer;
}

.agyrev button.agyrev-badge {
	font: inherit;
	text-align: left;
}

.agyrev a.agyrev-badge:hover,
.agyrev a.agyrev-badge:focus-visible,
.agyrev button.agyrev-badge:hover,
.agyrev button.agyrev-badge:focus-visible {
	border-color: var(--agyrev-accent) !important;
}

.agyrev .agyrev-badge--card {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1rem 1.125rem;
	border-color: transparent !important;
	border-radius: var(--agyrev-radius, 12px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px -10px rgba(0, 0, 0, 0.28) !important;
}

.agyrev-badge--card .agyrev__glogo {
	width: 22px;
	height: 22px;
}

.agyrev-badge--card .agyrev-badge__summary {
	font-size: 1.25rem;
	font-weight: 700;
}

.agyrev-badge__rating {
	display: inline-flex;
	flex-direction: column;
	gap: 0.25rem;
}

.agyrev-badge__label {
	color: var(--agyrev-muted);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.agyrev .agyrev-badge--button {
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
}

.agyrev-badge__cta {
	font-weight: 600;
	color: var(--agyrev-accent);
}

/* Sticker layouts (badge skins over the compact content). */
.agyrev .agyrev-badge--light {
	background: var(--agyrev-card-bg) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
	border-color: transparent !important;
}

.agyrev .agyrev-badge--bold {
	border: 0 !important;
	background: var(--agyrev-accent) !important;
	color: #fff !important;
}

.agyrev-badge--bold .agyrev-badge__name,
.agyrev-badge--bold .agyrev__count,
.agyrev-badge--bold .agyrev__attribution {
	color: #fff !important;
}

.agyrev .agyrev-badge--tag {
	border-radius: 0 999px 999px 0;
	padding-left: 1.25rem;
}

.agyrev .agyrev-badge--oval {
	border-radius: 999px;
	padding: 0.5rem 1.125rem;
}

.agyrev .agyrev-badge--achievement {
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	text-align: center;
	border-radius: var(--agyrev-radius, 12px);
	padding: 1rem 1.25rem;
}

.agyrev-badge--achievement .agyrev-badge__outof {
	color: var(--agyrev-muted);
	font-size: 0.8125rem;
}

/* Reviews popup dialog */
.agyrev .agyrev-popup {
	width: min(40rem, 92vw);
	max-height: 85vh;
	padding: 0;
	border: 1px solid var(--agyrev-border);
	border-radius: var(--agyrev-radius, 8px);
	background: var(--agyrev-card-bg);
	color: var(--agyrev-text);
	/* overflow:hidden suppresses Chromium's UA dialog{overflow:auto} (the inner's
	   85vh was 2px taller than the dialog's border-box content area, so the
	   dialog grew its own spurious second scrollbar). position:relative anchors
	   the close × — which is a direct child of the dialog, NOT of the scrolling
	   inner — so it stays pinned while the reviews scroll. */
	overflow: hidden;
	position: relative;
	/* Snappy open/close: fade + slight rise & scale. A native <dialog> toggles
	   `display` and the top-layer `overlay` discretely, so allow-discrete keeps it
	   painted through the EXIT, and @starting-style gives the ENTRY its from-state.
	   Browsers without @starting-style/allow-discrete just open/close instantly. */
	opacity: 0;
	transform: translateY(8px) scale(0.97);
	transition:
		opacity 150ms ease-out,
		transform 150ms ease-out,
		overlay 150ms ease-out allow-discrete,
		display 150ms ease-out allow-discrete;
}

/* The flex column (which makes the inner the SOLE scroll container) is applied
   ONLY when [open], so this never overrides the UA `dialog:not([open]){display:
   none}` and reveals a closed dialog. */
.agyrev .agyrev-popup[open] {
	display: flex;
	flex-direction: column;
	opacity: 1;
	transform: translateY(0) scale(1);
}

@starting-style {
	.agyrev .agyrev-popup[open] {
		opacity: 0;
		transform: translateY(8px) scale(0.97);
	}
}

.agyrev .agyrev-popup::backdrop {
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition:
		opacity 150ms ease-out,
		overlay 150ms ease-out allow-discrete,
		display 150ms ease-out allow-discrete;
}

.agyrev .agyrev-popup[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.agyrev .agyrev-popup[open]::backdrop {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.agyrev .agyrev-popup,
	.agyrev .agyrev-popup::backdrop {
		transition: none;
		transform: none;
	}
}

.agyrev .agyrev-popup__inner {
	flex: 1 1 auto;
	min-height: 0;
	padding: 1.25rem;
	overflow-y: auto;
}

.agyrev .agyrev-popup__close {
	position: absolute;
	top: 0.75rem;
	right: 0.875rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--agyrev-muted) !important;
	cursor: pointer;
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
}

.agyrev .agyrev-popup__close:hover,
.agyrev .agyrev-popup__close:focus-visible {
	background: color-mix(in srgb, var(--agyrev-accent) 12%, transparent) !important;
	color: var(--agyrev-text) !important;
}

/* Floating badge */
.agyrev--float {
	position: fixed;
	z-index: 9999;
	max-width: calc(100vw - 2 * var(--agyrev-float-x, 20px));
}

.agyrev--float-tl {
	top: var(--agyrev-float-y, 20px);
	left: var(--agyrev-float-x, 20px);
}

.agyrev--float-tr {
	top: var(--agyrev-float-y, 20px);
	right: var(--agyrev-float-x, 20px);
}

.agyrev--float-bl {
	bottom: var(--agyrev-float-y, 20px);
	left: var(--agyrev-float-x, 20px);
}

.agyrev--float-br {
	bottom: var(--agyrev-float-y, 20px);
	right: var(--agyrev-float-x, 20px);
}

.agyrev--float-t {
	top: var(--agyrev-float-y, 20px);
	left: 50%;
	transform: translateX(-50%);
}

.agyrev--float-b {
	bottom: var(--agyrev-float-y, 20px);
	left: 50%;
	transform: translateX(-50%);
}

/* JS hides delay/scroll badges until reveal; without JS they stay visible. */
.agyrev--float.agyrev-float-pending {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 200ms ease, visibility 200ms ease;
}

.agyrev--float {
	transition: opacity 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.agyrev--float,
	.agyrev--float.agyrev-float-pending {
		transition: none;
	}
}

/* Dismiss button (sibling of the trigger, anchored to the fixed wrapper). */
.agyrev .agyrev-badge__close {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--agyrev-border) !important;
	border-radius: 999px;
	background: var(--agyrev-card-bg) !important;
	color: var(--agyrev-muted) !important;
	cursor: pointer;
	font: inherit;
	font-size: 1rem;
	line-height: 1;
}

.agyrev .agyrev-badge__close:hover,
.agyrev .agyrev-badge__close:focus-visible {
	border-color: var(--agyrev-accent) !important;
	color: var(--agyrev-text) !important;
}

/* Device gating (≤600px = "mobile"). */
@media (max-width: 600px) {
	.agyrev--float-desktop {
		display: none;
	}
}

@media (min-width: 601px) {
	.agyrev--float-mobile {
		display: none;
	}
}

/* Typography presets — body (line_height / letter_spacing) on .agyrev-review__text;
   reviewer name (name_weight / name_style) on .agyrev-review__author. Defaults
   ('') emit no class. name_style needs !important + late source order because
   text-transform on .agyrev-review__author is chrome-armored above. */
.agyrev--lh-tight .agyrev-review__text {
	line-height: 1.35;
}
.agyrev--lh-normal .agyrev-review__text {
	line-height: 1.6;
}
.agyrev--lh-relaxed .agyrev-review__text {
	line-height: 1.9;
}

.agyrev--ls-tight .agyrev-review__text {
	letter-spacing: -0.02em;
}
.agyrev--ls-normal .agyrev-review__text {
	letter-spacing: 0;
}
.agyrev--ls-wide .agyrev-review__text {
	letter-spacing: 0.05em;
}

.agyrev--nw-normal .agyrev-review__author {
	font-weight: 400;
}
.agyrev--nw-medium .agyrev-review__author {
	font-weight: 500;
}
.agyrev--nw-semibold .agyrev-review__author {
	font-weight: 600;
}
.agyrev--nw-bold .agyrev-review__author {
	font-weight: 700;
}

.agyrev--ns-none .agyrev-review__author {
	text-transform: none !important;
}
.agyrev--ns-upper .agyrev-review__author {
	text-transform: uppercase !important;
}
.agyrev--ns-caps .agyrev-review__author {
	text-transform: capitalize !important;
}