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

/* Chrome armor: scoped compounds + !important on the chrome quartet. Keep both.
   See CLAUDE.md. */
.agyrev .agyrev__more-on-google,
.agyrev .agyrev__review-cta,
.agyrev .agyrev-badge,
.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;
}

/* Hard armor — same reset, one specificity step higher, for the controls that
   render as <button type="button">. At (0,2,0) the block above TIES a theme
   reset that is both !important and (0,2,0) — `[type="button"]:not(:disabled)`
   is attribute (0,1,0) + :not(:disabled) (0,1,0), which is exactly what
   zkkozijnen.nl ships — so !important stops breaking the tie and whichever
   sheet loads last wins. Repeating the root lifts these to (0,3,0); every
   per-control rule below repeats it too, so armor-then-paint order is
   unchanged. The <a>/<span> controls stay in the block above: they match no
   button branch, and lifting them would outrank the CTA skin matrix.
   See CLAUDE.md. */
.agyrev.agyrev .agyrev-review__more,
.agyrev.agyrev .agyrev-carousel__button,
.agyrev.agyrev .agyrev-carousel__dot,
.agyrev.agyrev .agyrev-popup__close,
.agyrev.agyrev .agyrev-badge__close {
	-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 (also an inline-size container — see the @container CTA rule below) */
.agyrev__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin-bottom: 1rem;
}

/* Fallbacks reproduce the pre-header_* look exactly. */
.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;
}

/* Targets the FILL span, not .agyrev-stars: __fill declares its own color, so a
   rule on the wrapper never reaches it by inheritance. Scoped to the header on
   purpose — unscoped this would repaint every per-card row and the badge
   trigger, which is the coupling this attribute exists to break. */
.agyrev .agyrev__header .agyrev-stars__fill {
	color: var(--agyrev-header-star-fill, var(--agyrev-star-fill));
}

.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);
	/* Armored; card look is wrapper-var driven. See CLAUDE.md. */
	border: var(--agyrev-border-width, 1px) solid var(--agyrev-border) !important;
	border-radius: var(--agyrev-radius, 8px);
	background: var(--agyrev-card-bg) !important;
}

/* Preset sets box-shadow only; border stays independent. */
.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%;
	/* The initials DISC only. Never armor .agyrev-review__avatar: the <img>
	   carries both classes and __avatar-img is already armored background:none,
	   which is what keeps a photo from showing the disc. */
	background: var(--agyrev-avatar-bg, var(--agyrev-accent));
	color: var(--agyrev-avatar-text, #fff);
	font-weight: 600;
}

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

/* Armor the PHOTO only — the initials disc needs the accent bg. See CLAUDE.md. */
.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-review-meta, var(--agyrev-muted));
	font-size: 0.8125rem;
}

.agyrev-review__text {
	margin: 0.375rem 0 0;
	color: var(--agyrev-review-text, inherit);
	/* 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 .agyrev-review__more {
	margin-top: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--agyrev-more-color, var(--agyrev-accent)) !important;
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
}

.agyrev.agyrev .agyrev-review__more:hover,
.agyrev.agyrev .agyrev-review__more:focus {
	color: var(--agyrev-more-hover-color, var(--agyrev-more-color, var(--agyrev-accent))) !important;
	text-decoration: underline !important;
}

/* "More reviews on Google" CTA. Every paint is var-driven so cta_* can override
   without a second rule. See CLAUDE.md. */
.agyrev .agyrev__more-on-google,
.agyrev .agyrev__review-cta {
	display: inline-flex;
	align-items: center;
	margin-top: 0.75rem;
	padding: 0.5rem 1rem;
	border: var(--agyrev-cta-border-width, 1px) solid var(--agyrev-cta-border, 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: var(--agyrev-cta-font-size, 0.875rem);
	font-weight: 600;
	/* letter-spacing and text-transform are chrome-armored (normal/none
	   !important) by the reset above, so these need !important AND this rule's
	   later source position — see CssContinuityTest. */
	letter-spacing: var(--agyrev-cta-letter-spacing, normal) !important;
	text-transform: var(--agyrev-cta-transform, none) !important;
	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-hover-bg, var(--agyrev-cta-bg, var(--agyrev-accent))) !important;
	border-color: var(--agyrev-cta-hover-border, var(--agyrev-cta-hover-bg, var(--agyrev-cta-bg, var(--agyrev-accent)))) !important;
	color: var(--agyrev-cta-hover-text, #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: var(--agyrev-cta-hover-bg, color-mix(in srgb, var(--agyrev-cta-bg, var(--agyrev-accent)) 86%, #000)) !important;
	border-color: var(--agyrev-cta-hover-border, var(--agyrev-cta-hover-bg, var(--agyrev-cta-bg, var(--agyrev-accent)))) !important;
	color: var(--agyrev-cta-hover-text, 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: var(--agyrev-cta-hover-bg, none) !important;
	border-color: var(--agyrev-cta-hover-border, var(--agyrev-cta-hover-bg, var(--agyrev-cta-bg, var(--agyrev-accent)))) !important;
	color: var(--agyrev-cta-hover-text, 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: var(--agyrev-cta-border-width, 1px) solid var(--agyrev-cta-border, 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-hover-bg, var(--agyrev-cta-bg, var(--agyrev-accent))) !important;
	border-color: var(--agyrev-cta-hover-border, var(--agyrev-cta-hover-bg, var(--agyrev-cta-bg, var(--agyrev-accent)))) !important;
	color: var(--agyrev-cta-hover-text, #fff) !important;
	text-decoration: none !important;
}

.agyrev--rcta-solid .agyrev__review-cta {
	padding: 0.5rem 1rem;
	border: var(--agyrev-cta-border-width, 1px) solid var(--agyrev-cta-border, 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: var(--agyrev-cta-hover-bg, color-mix(in srgb, var(--agyrev-cta-bg, var(--agyrev-accent)) 86%, #000)) !important;
	border-color: var(--agyrev-cta-hover-border, var(--agyrev-cta-hover-bg, var(--agyrev-cta-bg, var(--agyrev-accent)))) !important;
	color: var(--agyrev-cta-hover-text, 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: var(--agyrev-cta-hover-bg, none) !important;
	border-color: var(--agyrev-cta-hover-border, var(--agyrev-cta-hover-bg, var(--agyrev-cta-bg, var(--agyrev-accent)))) !important;
	color: var(--agyrev-cta-hover-text, 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;
}

/* Wrap-aware alignment: when a long business name pushes the "Review us" CTA onto a
   line of its OWN (most visible in the narrow badge popup), margin-left:auto strands
   it at the far right, disconnected from the left-aligned name/rating above. The
   agency-reviews.js wrap-detector adds .agyrev__header--rcta-wrapped to that header
   so we hug the button to the start instead. A button that still SHARES a line keeps
   the base margin-left:auto and hugs the right OF THAT LINE — auto margins absorb
   their own flex line's free space, so that is the one state where right-aligning is
   not stranding. The sole mechanism above 600px, where the @container rule below
   does not apply; only JS can detect content-driven wrapping. (0,3,0) beats the base
   (0,2,0) rule; a centered header is skipped by the detector. */
.agyrev .agyrev__header--rcta-wrapped .agyrev__review-cta {
	margin-left: 0;
}

/* Small screens: the header almost always wraps, and the "Review us" CTA lands
   alone on its own line where margin-left:auto shoves it to the far right and reads
   as misaligned under the left-aligned name/rating (most visible on the full-width
   grid/slider/masonry). Drop the auto margin unconditionally so it aligns to the
   start even without JS. (0,3,0) beats the base rule above; a centered header stays
   centered via its column align-items. */
@media (max-width: 600px) {
	.agyrev .agyrev__header .agyrev__review-cta {
		margin-left: 0;
	}
}

/* Container-query baseline: align the CTA by the HEADER's own width. The @media
   rule above keys on the VIEWPORT, so a 480px column inside a 1400px window never
   matches it, and the JS wrap-detector never runs on markup Elementor injects over
   AJAX after boot(), in the Gutenberg canvas, or at first paint. Full reasoning:
   CssContinuityTest::test_header_is_an_inline_size_container_that_aligns_the_cta_without_js.

   NEVER move container-type up to .agyrev — layout containment would make it the
   containing block for the fixed popup <dialog> and the floating badge (the v1.17.1
   page-jump bug). On the header that risk is absent.

   Two costs, both accepted knowingly: inline-size containment sizes the header AS IF
   EMPTY for intrinsic width (only visible for an empty widget in a shrink-to-fit
   parent — the review text otherwise dictates the width anyway), and unlike the JS
   detector this cannot know whether anything WRAPPED, so a short name in a narrow
   container loses its auto margin too. A container query cannot exist without
   containment, and below 600px the button is alone on its line in all but contrived
   cases — a JS-free baseline is worth both.

   600px deliberately matches the @media threshold, which stays as the fallback for
   browsers without container queries. */
.agyrev__header {
	container-type: inline-size;
	container-name: agyrev-hdr;
}

@container agyrev-hdr (max-width: 600px) {
	.agyrev .agyrev__header .agyrev__review-cta {
		margin-left: 0;
	}
}

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

.agyrev__empty {
	color: var(--agyrev-empty-text, 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: var(--agyrev-balloon-bg, 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 var(--agyrev-balloon-bg, color-mix(in srgb, var(--agyrev-accent) 10%, var(--agyrev-card-bg)));
	border-right: 0.6rem solid transparent;
	border-left: 0.6rem solid transparent;
}

/* Wrapper-var defaults so an inline card_color still wins. */
.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;
}

/* ::before, not border-left — the card border is armored. */
.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-spotlight-bar, 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;
	/* Slide is a GUTTER, not the card. */
	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%;
}

/* Inset outline, not a box-shadow: an outward ring is clipped by the viewport's
   overflow:hidden at any per-view. */
.agyrev-carousel__slide:focus-visible {
	outline: 3px solid var(--agyrev-slide-focus, color-mix(in srgb, var(--agyrev-accent) 35%, transparent));
	outline-offset: -3px;
}

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

/* An author `display` beats the UA's [hidden]{display:none}, so the JS single-page
   hide needs this rule to take effect at all. */
.agyrev-carousel__controls[hidden],
.agyrev-carousel__dots[hidden] {
	display: none;
}

.agyrev.agyrev .agyrev-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	/* One token drives ring + chevron, different fallbacks. */
	border: 1px solid var(--agyrev-carousel-arrow, var(--agyrev-border)) !important;
	/* !important because a theme reset squares it — no skin varies this radius. */
	border-radius: 999px !important;
	background: var(--agyrev-carousel-arrow-bg, transparent) !important;
	color: var(--agyrev-carousel-arrow, var(--agyrev-muted)) !important;
	cursor: pointer;
	line-height: 1;
}

.agyrev.agyrev .agyrev-carousel__button:hover,
.agyrev.agyrev .agyrev-carousel__button:focus-visible {
	border-color: var(--agyrev-carousel-arrow-hover, var(--agyrev-accent)) !important;
	background: var(--agyrev-carousel-arrow-hover-bg, transparent) !important;
	color: var(--agyrev-carousel-arrow-hover, var(--agyrev-accent)) !important;
}

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

/* Not in the chrome-armor selector list, so this stays un-!important. */
.agyrev-carousel__status {
	color: var(--agyrev-carousel-status, var(--agyrev-muted));
	font-size: 0.8125rem;
}

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

/* Tighter default gap than carousel; card_gap overrides both. */
.agyrev-carousel--slider .agyrev-carousel__slide {
	padding: 0 calc(var(--agyrev-card-gap, 0.5rem) / 2);
}

/* Slider cards-per-view; the default (1) emits no class. */
.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);
}

/* Explicit tablet/mobile overrides sit AFTER the collapse. */
@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 .agyrev-carousel__dot {
	width: 0.625rem;
	height: 0.625rem;
	padding: 0;
	border: 1px solid var(--agyrev-carousel-dot, var(--agyrev-border)) !important;
	/* !important because a theme reset squares it — no skin varies this radius. */
	border-radius: 999px !important;
	background: var(--agyrev-carousel-dot-bg, transparent) !important;
	cursor: pointer;
}

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

.agyrev.agyrev .agyrev-carousel__dot[aria-current="true"] {
	background: var(--agyrev-carousel-dot-active, var(--agyrev-accent)) !important;
	border-color: var(--agyrev-carousel-dot-active, 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-badge-border, var(--agyrev-border)) !important;
	border-radius: var(--agyrev-radius, 8px);
	/* Badge's OWN token — never --agyrev-card-bg (repaints the popup). */
	background: var(--agyrev-badge-bg, #fff) !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-badge-hover-border, 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 .agyrev-badge--button {
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
}

/* The "Reviews" word on a button-layout badge. It reads --agyrev-badge-text like
   the rest of the badge's text, but falls back to the accent rather than to the
   text colour, so an unconfigured button badge keeps its link-ish look. Without
   the token it was unreachable by badge_text_color and stayed accent-on-accent —
   invisible — as soon as badge_bg_color was set to the accent. */
.agyrev .agyrev-badge__cta {
	font-weight: 600;
	color: var(--agyrev-badge-text, var(--agyrev-accent)) !important;
}

/* Sticker layouts (badge skins over the compact content). */
/* The base .agyrev-badge rule already paints --agyrev-badge-bg, so this skin only
   swaps the border for a shadow. */
.agyrev .agyrev-badge--light {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
	border-color: transparent !important;
}

/* The one sticker whose surface is the ACCENT rather than the card colour, so it
   cannot read --agyrev-card-bg like the others without turning white by default
   (that token defaults to #fff). --agyrev-badge-bg is emitted only when a badge
   colour is actually set, so the unset fallback here keeps the accent look. */
.agyrev .agyrev-badge--bold {
	border: 0 !important;
	background: var(--agyrev-badge-bg, var(--agyrev-accent)) !important;
	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;
}

/* Colour comes from the badge meta rule at end-of-file; this is size only. */
.agyrev-badge--achievement .agyrev-badge__outof {
	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-popup-border, var(--agyrev-border));
	border-radius: var(--agyrev-radius, 8px);
	/* The dialog's OWN surface. It read --agyrev-card-bg, which also paints the
	   cards inside it and the badge that opens it. */
	background: var(--agyrev-popup-bg, #fff);
	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). */
	overflow: hidden;
	/* position:fixed + inset:0 + margin:auto centres the modal in the VIEWPORT
	   (height:fit-content lets the auto margins split the leftover space in both
	   axes). A modal <dialog> lives in the top layer, so this is relative to the
	   viewport even inside a transformed floating-badge wrapper — opening it no
	   longer scrolls the page to the badge's in-flow position; it stays put
	   wherever the visitor is. fixed is also the positioning context for the
	   absolutely-positioned close × (a direct child of the dialog, NOT of the
	   scrolling inner), so it stays pinned while the reviews scroll. */
	position: fixed;
	inset: 0;
	height: fit-content;
	margin: auto;
	/* 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 {
	/* The literal fallback is load-bearing: ::backdrop inherits custom properties
	   from its originating element only in Chrome 122+ / Firefox 131+. */
	background: var(--agyrev-popup-backdrop, 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;
}

/* The pinned close × sits in the dialog's top-right corner, exactly where the
   header's right-aligned content (Google attribution + the "Review us" CTA)
   lands — reserve clearance so they never slide under it. A centered header is a
   flex column that never reaches the corner, so it keeps its full symmetry. */
.agyrev:not(.agyrev--header-centered) .agyrev-popup__inner .agyrev__header {
	padding-right: 2.5rem;
}

.agyrev.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;
	/* !important because a theme reset squares it — no skin varies this radius. */
	border-radius: 999px !important;
	background: none;
	color: var(--agyrev-popup-close, var(--agyrev-muted)) !important;
	cursor: pointer;
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
}

.agyrev.agyrev .agyrev-popup__close:hover,
.agyrev.agyrev .agyrev-popup__close:focus-visible {
	background: color-mix(in srgb, var(--agyrev-accent) 12%, transparent) !important;
	color: var(--agyrev-popup-close-hover, 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 .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;
	/* !important because a theme reset squares it — no skin varies this radius. */
	border-radius: 999px !important;
	/* Badge chrome: follows the badge, or a dark badge gets an invisible glyph. */
	background: var(--agyrev-badge-bg, #fff) !important;
	color: var(--agyrev-badge-meta, var(--agyrev-muted)) !important;
	cursor: pointer;
	font: inherit;
	font-size: 1rem;
	line-height: 1;
}

.agyrev.agyrev .agyrev-badge__close:hover,
.agyrev.agyrev .agyrev-badge__close:focus-visible {
	border-color: var(--agyrev-badge-close-hover, var(--agyrev-accent)) !important;
	color: var(--agyrev-badge-text, 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;
}

/* Badge trigger text — the mirror of the header rule above, for the name/rating/
   count the badge renders OUTSIDE any header. Same three constraints: !important,
   end-of-file order, and a scope (unscoped, each rule repaints the other's
   elements). The bold overrides fall back to #fff, not the widget defaults, and
   must stay after the generic rules — they tie on specificity. They list
   .agyrev__score because it declares its own colour, so the sticker's inherited
   #fff never reached it (dark rating number on the accent fill). */
.agyrev .agyrev-badge .agyrev-badge__name,
.agyrev .agyrev-badge .agyrev__score {
	color: var(--agyrev-badge-text, var(--agyrev-text)) !important;
}

.agyrev .agyrev-badge .agyrev__count,
.agyrev .agyrev-badge .agyrev-badge__outof,
.agyrev .agyrev-badge .agyrev__attribution {
	color: var(--agyrev-badge-meta, var(--agyrev-muted)) !important;
}

.agyrev .agyrev-badge--bold .agyrev-badge__name,
.agyrev .agyrev-badge--bold .agyrev__score {
	color: var(--agyrev-badge-text, #fff) !important;
}

.agyrev .agyrev-badge--bold .agyrev__count,
.agyrev .agyrev-badge--bold .agyrev-badge__outof,
.agyrev .agyrev-badge--bold .agyrev__attribution {
	color: var(--agyrev-badge-meta, #fff) !important;
}

/* Armored (color:inherit!important above), so !important AND end-of-file.
   Same shape as header_meta_color. */
.agyrev .agyrev-review__author {
	color: var(--agyrev-name-color, inherit) !important;
}

/* Custom card shadow. (0,2,0) like the presets, so it sits AFTER them to win on
   source order — a custom shadow REPLACES a preset, never adds to it. */
.agyrev--shadow-custom .agyrev-review {
	box-shadow: var(--agyrev-card-shadow) !important;
}

/* The viewport clips on all four edges (overflow:hidden, and the slide padding
   is inline-only), so a card shadow had exactly 0px of room. BLOCK-axis padding
   only: clientWidth includes padding while slides are a % of the content box,
   so ANY horizontal padding breaks resolvePerView paging. */
.agyrev--has-shadow .agyrev-carousel__viewport {
	padding-top: var(--agyrev-shadow-room-top, 0);
	padding-bottom: var(--agyrev-shadow-room-bottom, 0);
}