/* 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;
}

/* Alignment: align the content inside each review card and inside the badge.
   Additive to the existing whole-widget margin-inline behaviour. */
.agyrev--align-center .agyrev-review { text-align: center; }
.agyrev--align-right  .agyrev-review { text-align: right; }
.agyrev--align-center .agyrev-badge  { align-items: center; text-align: center; }
.agyrev--align-right  .agyrev-badge  { align-items: flex-end; text-align: right; }
/* text-align only moves inline/block content (stars, review text). The avatar
   row (.agyrev-review__head, a flex row) and the reviewer name/date
   (.agyrev-review__meta, a flex column) are flex containers, so they need
   justify-content / align-items to follow the alignment too — without these the
   avatar and name stay pinned left. Geometry is un-armored, so no !important. */
.agyrev--align-center .agyrev-review__head { justify-content: center; }
.agyrev--align-center .agyrev-review__meta { align-items: center; }
.agyrev--align-right  .agyrev-review__head { justify-content: flex-end; }
.agyrev--align-right  .agyrev-review__meta { align-items: flex-end; }

/* 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__review-cta,
.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;
}

/* Every fallback below reproduces the pre-header_* appearance exactly, so an
   unconfigured widget emits no var and renders byte-identically. .agyrev__name is
   NOT in the chrome-armor list, so a plain (0,1,0) rule is enough; the linked
   variant IS armored to color:inherit, which is what makes it follow this color. */
.agyrev__name {
	color: var(--agyrev-header-name-color, var(--agyrev-text, inherit));
	font-family: var(--agyrev-font-family-header, inherit);
	font-size: var(--agyrev-header-name-size, 1.0625rem);
	font-weight: var(--agyrev-header-name-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 {
	color: var(--agyrev-header-score-color, var(--agyrev-text, inherit));
	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. The explicit tablet
   (grid_columns_tablet) overrides sit AFTER the collapse so they win on source
   order at equal (0,2,0) specificity. */
@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));
	}
	.agyrev--grid-cols-t-1 .agyrev__items--grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.agyrev--grid-cols-t-2 .agyrev__items--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.agyrev--grid-cols-t-3 .agyrev__items--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.agyrev--grid-cols-t-4 .agyrev__items--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.agyrev--grid-cols-t-5 .agyrev__items--grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.agyrev--grid-cols-t-6 .agyrev__items--grid { grid-template-columns: repeat(6, 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);
	}
	.agyrev--grid-cols-m-1 .agyrev__items--grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.agyrev--grid-cols-m-2 .agyrev__items--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.agyrev--grid-cols-m-3 .agyrev__items--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.agyrev--grid-cols-m-4 .agyrev__items--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.agyrev--grid-cols-m-5 .agyrev__items--grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.agyrev--grid-cols-m-6 .agyrev__items--grid { grid-template-columns: repeat(6, 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) !important;
}

.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) !important;
}

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

/* Chrome-armor the reviewer PHOTO only. The <img> carries BOTH avatar classes,
   so it inherits the accent disc above — which bleeds at any transparent edge of
   the photo, and shows outright when a host theme / Elementor global image rule
   (`img { height: auto }` is the classic one) resizes it away from the square
   box. Force it transparent and chrome-free. Do NOT armor .agyrev-review__avatar
   itself: the initials-fallback <span> deliberately needs that accent background,
   and a white letter on transparent would be invisible. border:0 does not touch
   border-radius, so the circular clip survives. */
.agyrev .agyrev-review__avatar-img {
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

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

/* "More reviews on Google" call-to-action.

   Every paint here is var-driven so cta_bg_color / cta_text_color can override it
   without a second rule. --agyrev-cta-bg is the button's BRAND color (the fill for
   cta_style=solid, the border + label + hover fill for the default outline), and
   --agyrev-cta-text is the label color. Both fall back to --agyrev-accent, so an
   unconfigured button is byte-identical to 1.0.0.

   The chrome quartet keeps !important because this selector sits in the
   chrome-armor reset above; the skin/alignment rules below are (0,2,0) like this
   one and win purely on source order. */
.agyrev .agyrev__more-on-google,
.agyrev .agyrev__review-cta {
	display: inline-flex;
	align-items: center;
	margin-top: 0.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--agyrev-cta-bg, var(--agyrev-accent)) !important;
	border-radius: var(--agyrev-cta-radius, 0.375rem);
	background: none !important;
	color: var(--agyrev-cta-text, var(--agyrev-cta-bg, 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,
.agyrev .agyrev__review-cta:hover,
.agyrev .agyrev__review-cta:focus {
	background: var(--agyrev-cta-bg, var(--agyrev-accent)) !important;
	color: #fff !important;
}

/* cta_style=solid — filled. */
.agyrev--cta-solid .agyrev__more-on-google,
.agyrev--cta-solid .agyrev__review-cta {
	background: var(--agyrev-cta-bg, var(--agyrev-accent)) !important;
	border-color: var(--agyrev-cta-bg, var(--agyrev-accent)) !important;
	color: var(--agyrev-cta-text, #fff) !important;
}

.agyrev--cta-solid .agyrev__more-on-google:hover,
.agyrev--cta-solid .agyrev__more-on-google:focus,
.agyrev--cta-solid .agyrev__review-cta:hover,
.agyrev--cta-solid .agyrev__review-cta:focus {
	background: color-mix(in srgb, var(--agyrev-cta-bg, var(--agyrev-accent)) 86%, #000) !important;
	color: var(--agyrev-cta-text, #fff) !important;
}

/* cta_style=text — a plain link: no border, no padding, underline on hover.
   text-decoration is chrome-armored, so the underline needs !important AND a
   later source position than the armor block. */
.agyrev--cta-text .agyrev__more-on-google,
.agyrev--cta-text .agyrev__review-cta {
	padding: 0;
	border: 0 !important;
	background: none !important;
}

.agyrev--cta-text .agyrev__more-on-google:hover,
.agyrev--cta-text .agyrev__more-on-google:focus,
.agyrev--cta-text .agyrev__review-cta:hover,
.agyrev--cta-text .agyrev__review-cta:focus {
	background: none !important;
	color: var(--agyrev-cta-text, var(--agyrev-cta-bg, var(--agyrev-accent))) !important;
	text-decoration: underline !important;
}

/* cta_align — the button is an inline-level flex box, and margin-inline:auto
   cannot move one, so promote it to a block-level fit-content box first (same
   trick as the badge). Geometry only: un-armored, wins on source order. Reaches
   the button inside the badge popup too, where the widget-level align class
   governs the badge rather than the popup body. */
.agyrev--cta-align-center .agyrev__more-on-google,
.agyrev--cta-align-right .agyrev__more-on-google {
	display: flex;
	width: fit-content;
}

.agyrev--cta-align-center .agyrev__more-on-google {
	margin-inline: auto;
}

.agyrev--cta-align-right .agyrev__more-on-google {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

/* review_cta_style — force a skin for the HEADER button only, overriding whatever
   cta_style painted on both. Three things make this harder than it looks:

   1. The shared skin's chrome (border/background/color) carries !important because
      those selectors also sit in the chrome-armor reset. IMPORTANCE beats source
      order and specificity, so every chrome declaration here must be !important
      too — a normal-weight rule can never undo an !important one.
   2. The inherited :hover rules are (0,3,0) and would out-specify a (0,2,0) base
      rule on hover, so each skin needs its own :hover/:focus pair.
   3. cta_style=text zeroes the padding, so outline/solid must restore it (padding
      is un-armored, so plain source order suffices there).

   The var() fallbacks resolve against the anchor, which carries the element-scoped
   --agyrev-cta-* overrides when review_cta_bg_color/review_cta_text_color are set. */
.agyrev--rcta-outline .agyrev__review-cta {
	padding: 0.5rem 1rem;
	border: 1px solid var(--agyrev-cta-bg, var(--agyrev-accent)) !important;
	background: none !important;
	color: var(--agyrev-cta-text, var(--agyrev-cta-bg, var(--agyrev-accent))) !important;
}

.agyrev--rcta-outline .agyrev__review-cta:hover,
.agyrev--rcta-outline .agyrev__review-cta:focus {
	background: var(--agyrev-cta-bg, var(--agyrev-accent)) !important;
	color: #fff !important;
	text-decoration: none !important;
}

.agyrev--rcta-solid .agyrev__review-cta {
	padding: 0.5rem 1rem;
	border: 1px solid var(--agyrev-cta-bg, var(--agyrev-accent)) !important;
	background: var(--agyrev-cta-bg, var(--agyrev-accent)) !important;
	color: var(--agyrev-cta-text, #fff) !important;
}

.agyrev--rcta-solid .agyrev__review-cta:hover,
.agyrev--rcta-solid .agyrev__review-cta:focus {
	background: color-mix(in srgb, var(--agyrev-cta-bg, var(--agyrev-accent)) 86%, #000) !important;
	color: var(--agyrev-cta-text, #fff) !important;
	text-decoration: none !important;
}

/* The explicit color is load-bearing: an inherited cta_style=solid sets
   color:#fff !important, which on a transparent text-link is invisible. */
.agyrev--rcta-text .agyrev__review-cta {
	padding: 0;
	border: 0 !important;
	background: none !important;
	color: var(--agyrev-cta-text, var(--agyrev-cta-bg, var(--agyrev-accent))) !important;
}

.agyrev--rcta-text .agyrev__review-cta:hover,
.agyrev--rcta-text .agyrev__review-cta:focus {
	background: none !important;
	color: var(--agyrev-cta-text, var(--agyrev-cta-bg, var(--agyrev-accent))) !important;
	text-decoration: underline !important;
}

/* The review button lives in the header flex row, pushed to the far right.
   .agyrev__attribution already carries margin-left:auto; two auto margins SPLIT
   the free space between them, so the attribution's is dropped whenever the button
   is present. Both rules below are (0,2,0)/(0,3,0) and must sit AFTER the base skin
   (margin-top:0.75rem) and the chrome-armor reset (margin:0). */
.agyrev--has-rcta .agyrev__header .agyrev__attribution {
	margin-left: 0;
}

.agyrev__header .agyrev__review-cta {
	margin-top: 0;
	margin-left: auto;
}

/* A centered header is a flex COLUMN, so margin-left:auto would shove the button
   to the right edge instead of centering it. (0,3,0) so it never depends on order. */
.agyrev--header-centered .agyrev__header .agyrev__review-cta {
	margin-left: 0;
}

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

/* The spotlight signature: a 4px accent bar. Painted as a ::before pseudo —
   NOT border-left — because .agyrev-review's border is chrome-armored
   (!important, var-driven) and a longhand would silently lose to it. The
   padding-left extends the base padding rule so review_padding keeps working. */
.agyrev--card-spotlight .agyrev-review {
	position: relative;
	padding-left: calc(var(--agyrev-review-padding, 1rem) + 0.75rem);
}

.agyrev--card-spotlight .agyrev-review::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	border-radius: 4px;
	background: var(--agyrev-accent);
}

/* 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;
	/* The slide is a GUTTER, not the card — the card is the .agyrev-review child.
	   Half the card_gap on each side means adjacent CARDS are one gap apart.
	   Slider reuses the carousel engine, so this covers both styles. */
	padding: 0 calc(var(--agyrev-card-gap, 1.5rem) / 2);
	box-sizing: border-box;
}

/* Slides stretch to the tallest one (.agyrev__items is a flex container with the
   default align-items:stretch), so the card fills its slide and the borders line
   up across a multi-card view. */
.agyrev-carousel__slide > .agyrev-review {
	height: 100%;
}

.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.
   Tighter default gap than the plain carousel (0.5rem fallback = the old 0.25rem);
   card_gap still overrides it for both. */
.agyrev-carousel--slider .agyrev-carousel__slide {
	padding: 0 calc(var(--agyrev-card-gap, 0.5rem) / 2);
}

/* 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. The
   explicit tablet/mobile (slider_per_view_tablet/_mobile) overrides sit AFTER
   the collapse so they win on source order at equal (0,2,0) specificity. */
@media (max-width: 768px) {
	.agyrev--slider-pv-3 .agyrev-carousel__slide,
	.agyrev--slider-pv-4 .agyrev-carousel__slide {
		flex-basis: calc(100% / 2);
	}
	.agyrev--slider-pv-t-2 .agyrev-carousel__slide { flex-basis: calc(100% / 2); }
	.agyrev--slider-pv-t-3 .agyrev-carousel__slide { flex-basis: calc(100% / 3); }
	.agyrev--slider-pv-t-4 .agyrev-carousel__slide { flex-basis: calc(100% / 4); }
}

@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--slider-pv-m-2 .agyrev-carousel__slide { flex-basis: calc(100% / 2); }
	.agyrev--slider-pv-m-3 .agyrev-carousel__slide { flex-basis: calc(100% / 3); }
	.agyrev--slider-pv-m-4 .agyrev-carousel__slide { flex-basis: calc(100% / 4); }
}

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

/* Badge alignment. MUST sit after every .agyrev-badge--* rule above: those are
   all (0,2,0) like the align selectors, so source order decides — the early
   `.agyrev--align-* .agyrev-badge` rules near the top of this file lose to
   `.agyrev-badge--card{align-items:flex-start}` and are inert on their own.

   Two distinct jobs, because the trigger is a shrink-to-fit inline-flex box:
   1. Move the WHOLE badge (logo + text as one unit). margin-inline:auto cannot
      move an inline-level box, so promote it to a block-level fit-content box.
   2. Align the content of the COLUMN layouts (card / achievement), where the
      cross axis is horizontal and align-items is what moves the Google logo.
   For the row layouts (compact/light/bold/tag/oval/button) the badge hugs its
   content, so there is no free space inside to redistribute — job 1 is what the
   user sees. On a floating badge only job 2 applies (position:fixed, content-
   sized), which is why .agyrev--float zeroes the wrapper margin below. */
.agyrev--align-center .agyrev-badge,
.agyrev--align-right .agyrev-badge {
	display: flex;
	width: fit-content;
}

.agyrev--align-center .agyrev-badge {
	justify-content: center;
	margin-inline: auto;
}

.agyrev--align-right .agyrev-badge {
	justify-content: flex-end;
	margin-inline-start: auto;
	margin-inline-end: 0;
}

.agyrev--align-center .agyrev-badge--card,
.agyrev--align-center .agyrev-badge--achievement {
	align-items: center;
	text-align: center;
}

.agyrev--align-right .agyrev-badge--card,
.agyrev--align-right .agyrev-badge--achievement {
	align-items: flex-end;
	text-align: right;
}

/* A floating badge is position:fixed and placed by float_position/--agyrev-float-*,
   so the whole-widget centering must never apply to it — only the content
   alignment above does. */
.agyrev--float.agyrev--align-center,
.agyrev--float.agyrev--align-right {
	margin-inline: 0;
}

/* 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));
	/* container_padding pads the card/grid container; on the floating badge it
	   would detach the corner-anchored close button from the badge — never
	   consume it here (same-specificity, later in source than .agyrev). */
	padding: 0;
}

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

/* Header secondary text (review count + Google attribution).

   Three constraints pin this rule here, at the very end of the file:
   1. !important — both elements sit in the chrome-armor list (color:inherit
      !important) AND carry their own color:var(--agyrev-muted) !important above.
      A normal declaration, at any specificity, would lose to both.
   2. Source order — it ties with those armored rules on !important, so among the
      widget's own rules the cascade falls through to specificity and then order.
      (0,3,0) already wins, but being last keeps it robust if the scope changes.
   3. The .agyrev__header scope is load-bearing, not decoration. The badge TRIGGER
      renders its own .agyrev__count / .agyrev__attribution OUTSIDE any header, and
      .agyrev-badge--bold paints them white. Unscoped, this would grey them out.
      The badge POPUP does render a real .agyrev__header, so it correctly inherits
      the header's colors.

   The Google logo's own path fills are untouched — brand marks stay brand marks. */
.agyrev .agyrev__header .agyrev__count,
.agyrev .agyrev__header .agyrev__attribution {
	color: var(--agyrev-header-muted, var(--agyrev-muted)) !important;
}