/**
 * Invite-Only Product Reviews — front-end styles.
 *
 * Colours, rounding and photo sizing come from CSS custom properties that
 * the plugin sets from your Settings, and that Elementor's own style
 * controls can override per-widget. The values below are only fallbacks
 * for when nothing has been configured.
 *
 * Nothing here needs editing by hand: change colours in Settings >
 * Advanced, or per-block in Elementor's Style tab.
 */

.cgr-block,
.cgr-form-wrap,
.cgr-gallery,
.cgr-rating-summary {
	--cgr-primary: #6b4226;
	--cgr-primary-contrast: #ffffff;
	--cgr-star-color: #d4af37;
	--cgr-star-empty: #d8d0c4;
	--cgr-border: #e5ddd3;
	--cgr-related-bg: #faf8f5;
	--cgr-radius: 8px;
	--cgr-text-muted: #7a7a7a;
	--cgr-photo-h: 210px;
	--cgr-photo-max-w: 280px;
	--cgr-gallery-cols: 6;
}

/* ---------------------------------------------------------------
 * Button reset
 *
 * Clickable photos are <button> elements so they work with a keyboard.
 * The side effect is that themes style them as buttons — which is where
 * unexpected coloured borders, backgrounds and padding around review
 * photos come from. This resets them hard enough to win against theme
 * rules, which is what the !important flags are for. It is scoped only to
 * these two classes, so nothing else on the site is affected.
 * ------------------------------------------------------------- */

button.cgr-gallery-item,
button.cgr-review-photo-block,
.cgr-gallery-item,
.cgr-review-photo-block {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: var(--cgr-radius);
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0;
	outline: 0;
	text-decoration: none !important;
	font: inherit;
	color: inherit;
	line-height: 0;
	overflow: hidden;
	display: block;
	min-width: 0;
	min-height: 0;
	width: auto;
	transition: none;
}

button.cgr-gallery-item:hover,
button.cgr-review-photo-block:hover,
button.cgr-gallery-item:focus,
button.cgr-review-photo-block:focus {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: none;
}

/* Keyboard focus still needs to be visible — just not a theme's button
   chrome. */
button.cgr-gallery-item:focus-visible,
button.cgr-review-photo-block:focus-visible {
	outline: 2px solid var(--cgr-primary) !important;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Stars
 * ------------------------------------------------------------- */

.cgr-stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	color: var(--cgr-star-color);
	line-height: 1;
	white-space: nowrap;
}

.cgr-star-empty {
	color: var(--cgr-star-empty);
}

.cgr-star-half {
	position: relative;
	display: inline-block;
	color: var(--cgr-star-empty);
}

.cgr-star-half-fill {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
	color: var(--cgr-star-color);
}

/* ---------------------------------------------------------------
 * Compact rating badge
 * ------------------------------------------------------------- */

.cgr-rating-summary {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8rem;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.cgr-rating-summary:hover {
	text-decoration: underline;
}

.cgr-rating-summary .cgr-stars {
	font-size: 0.85rem;
}

.cgr-rating-summary-count,
.cgr-rating-summary-empty {
	color: var(--cgr-text-muted);
}

.cgr-rating-summary-empty {
	font-size: 0.8rem;
	cursor: default;
	text-decoration: none;
}

/* ---------------------------------------------------------------
 * Block shell + summary
 * ------------------------------------------------------------- */

.cgr-reviews-anchor {
	scroll-margin-top: 90px; /* clears a sticky header when jumping here */
}

.cgr-block-title {
	margin: 0 0 14px;
}

.cgr-summary-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-bottom: 22px;
}

.cgr-reviews-summary {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cgr-avg-rating {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
}

.cgr-summary-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cgr-summary-meta .cgr-stars {
	font-size: 1rem;
}

.cgr-review-count {
	color: var(--cgr-text-muted);
	font-size: 0.85rem;
}

.cgr-no-reviews {
	color: var(--cgr-text-muted);
}

/* ---------------------------------------------------------------
 * Star breakdown bars
 * ------------------------------------------------------------- */

.cgr-breakdown {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 190px;
	flex: 1 1 190px;
	max-width: 320px;
}

.cgr-breakdown-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	color: var(--cgr-text-muted);
}

.cgr-breakdown-label {
	width: 26px;
	flex-shrink: 0;
	white-space: nowrap;
}

.cgr-breakdown-star {
	color: var(--cgr-star-color);
	margin-left: 1px;
}

.cgr-breakdown-bar {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--cgr-border);
	overflow: hidden;
}

.cgr-breakdown-fill {
	display: block;
	height: 100%;
	background: var(--cgr-star-color);
	border-radius: 999px;
}

.cgr-breakdown-count {
	width: 26px;
	text-align: right;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------
 * Photo gallery
 * ------------------------------------------------------------- */

.cgr-gallery-shell {
	position: relative;
}

/* A single, deliberate separator between the top customer gallery and
   the individual review list. Settings control both its weight and space. */
.cgr-block > .cgr-gallery-shell {
	margin-bottom: var(--cgr-gallery-divider-gap, 24px);
	padding-bottom: var(--cgr-gallery-divider-gap, 24px);
	border-bottom: var(--cgr-gallery-divider, 2px) solid var(--cgr-border);
}

.cgr-block > .cgr-gallery-shell > .cgr-gallery {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border-bottom: 0 !important;
}

.cgr-gallery-scroll {
	display: none;
}

.cgr-gallery {
	margin: 0 0 24px;
}

.cgr-gallery-grid {
	display: grid;
	grid-template-columns: repeat(var(--cgr-gallery-cols), minmax(0, var(--cgr-gallery-w)));
	gap: 8px;
}

.cgr-gallery-slider {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}

.cgr-gallery-slider .cgr-gallery-item {
	flex: 0 0 auto;
	width: var(--cgr-gallery-w);
	scroll-snap-align: start;
}

.cgr-gallery-item {
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
}

.cgr-gallery-item img {
	width: 100%;
	height: var(--cgr-gallery-h);
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.cgr-gallery-item:hover img {
	transform: scale(1.04);
}

@media (max-width: 1024px) {
	.cgr-gallery-grid {
		grid-template-columns: repeat(min(var(--cgr-gallery-cols), 4), minmax(0, var(--cgr-gallery-w)));
	}
}

	.cgr-gallery-shell .cgr-gallery.cgr-gallery-grid,
	.cgr-gallery-shell .cgr-gallery.cgr-gallery-slider {
		display: flex !important;
		gap: 16px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.cgr-gallery-shell .cgr-gallery::-webkit-scrollbar {
		display: none;
	}

	.cgr-gallery-shell .cgr-gallery.cgr-gallery-grid .cgr-gallery-item,
	.cgr-gallery-shell .cgr-gallery.cgr-gallery-slider .cgr-gallery-item {
		flex: 0 0 calc((100% - 16px) / 2.35) !important;
		width: calc((100% - 16px) / 2.35) !important;
		max-width: none !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		scroll-snap-align: start;
	}

	.cgr-gallery-shell .cgr-gallery .cgr-gallery-item img {
		width: 100% !important;
		height: 100% !important;
		min-width: 100% !important;
		min-height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		object-fit: cover !important;
	}

	.cgr-gallery-shell .cgr-gallery-scroll {
		position: absolute;
		top: 50%;
		z-index: 4;
		display: grid;
		place-items: center;
		width: 34px;
		height: 44px;
		min-width: 0;
		padding: 0;
		border: 0;
		border-radius: 3px;
		background: rgba(20, 20, 20, 0.58);
		color: #fff;
		font: 400 1.8rem/1 Arial, sans-serif;
		transform: translateY(-50%);
		cursor: pointer;
	}

	.cgr-gallery-shell .cgr-gallery-scroll-prev { left: 5px; }
	.cgr-gallery-shell .cgr-gallery-scroll-next { right: 5px; }

	.cgr-gallery-shell .cgr-gallery-scroll[disabled] {
		opacity: 0.25;
		cursor: default;
	}

/* ---------------------------------------------------------------
 * Toolbar (sort / filter)
 * ------------------------------------------------------------- */

.cgr-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 18px;
	font-size: 0.82rem;
}

.cgr-toolbar-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.cgr-toolbar-label {
	color: var(--cgr-text-muted);
}

.cgr-chip {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px 10px;
	border: 1px solid var(--cgr-border);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	line-height: 1.4;
}

.cgr-chip:hover {
	border-color: var(--cgr-primary);
}

.cgr-chip-active {
	background: var(--cgr-primary);
	border-color: var(--cgr-primary);
	color: var(--cgr-primary-contrast);
}

.cgr-chip-star {
	color: inherit;
}

/* ---------------------------------------------------------------
 * Review cards
 * ------------------------------------------------------------- */

.cgr-reviews-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cgr-review-card {
	display: flex;
	flex-direction: column;
}

/* Card style: separator lines (default) — a thin rule between reviews
   rather than a box around each. Lighter, and noticeably less vertical
   space per review. */
.cgr-cards-lines .cgr-reviews-list {
	gap: 0;
}

.cgr-cards-lines .cgr-review-card {
	border-bottom: 1px solid var(--cgr-border);
	padding: 18px 0;
}

.cgr-cards-lines .cgr-review-card:first-child {
	padding-top: 0;
}

.cgr-cards-lines .cgr-review-card:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Card style: boxed */
.cgr-cards-boxed .cgr-review-card {
	border: 1px solid var(--cgr-border);
	border-radius: var(--cgr-radius);
	padding: 16px 18px;
	overflow: hidden;
}

.cgr-cards-boxed .cgr-review-card.cgr-related {
	background: var(--cgr-related-bg);
}

/* Card style: plain — spacing only */
.cgr-cards-plain .cgr-review-card {
	padding: 4px 0;
}

.cgr-review-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.cgr-review-photo-block {
	display: block;
	flex: 0 1 var(--cgr-photo-max-w);
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
	cursor: zoom-in;
	width: var(--cgr-photo-max-w);
	max-width: 100%;
}

.cgr-review-photo-block img {
	display: block;
	width: 100%;
	height: var(--cgr-photo-h);
	object-fit: cover;
}

/* Fill the row cleanly instead of leaving a large empty area after two or
   three photos. One photo keeps a sensible maximum; two split the row; three
   or more use a three-column grid. */
.cgr-review-card .cgr-review-photos:not(:has(.cgr-review-photo-block:nth-child(2))) .cgr-review-photo-block {
	flex-basis: min(100%, 320px) !important;
	width: min(100%, 320px) !important;
	max-width: 320px !important;
}

.cgr-review-card .cgr-review-photos:has(.cgr-review-photo-block:nth-child(2)):not(:has(.cgr-review-photo-block:nth-child(3))) .cgr-review-photo-block {
	flex-basis: calc((100% - 8px) / 2) !important;
	width: calc((100% - 8px) / 2) !important;
	max-width: none !important;
}

.cgr-review-card .cgr-review-photos:has(.cgr-review-photo-block:nth-child(3)) .cgr-review-photo-block {
	flex-basis: calc((100% - 16px) / 3) !important;
	width: calc((100% - 16px) / 3) !important;
	max-width: none !important;
}

.cgr-review-card .cgr-review-photos .cgr-review-photo-block,
.cgr-review-card .cgr-review-photos .cgr-review-photo-block img {
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	object-fit: cover !important;
}

/* Long reviews are clamped only when JavaScript confirms that the text
   genuinely overflows. */
.cgr-review-text-collapsed {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.cgr-review-see-more {
	display: inline-block;
	align-self: flex-start;
	margin: 7px 0 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

/* Photo position — driven by the Settings dropdown, applied as a class on
   the block wrapper. */

.cgr-photo-bottom .cgr-review-card {
	flex-direction: column-reverse;
}

.cgr-photo-bottom .cgr-review-photo-block {
	margin: 0;
}

.cgr-photo-bottom .cgr-review-photos {
	margin: 14px 0 0;
}

.cgr-photo-left .cgr-review-card {
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}

.cgr-photo-left .cgr-review-photos {
	flex: 0 0 auto;
	width: var(--cgr-photo-max-w);
	max-width: var(--cgr-photo-max-w);
	margin: 0;
}

.cgr-photo-left .cgr-review-photo-block,
.cgr-photo-left .cgr-review-photo-block img {
	width: 100%;
	height: var(--cgr-photo-h);
}

.cgr-photo-left .cgr-review-body {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 600px) {
	/* A side-by-side thumbnail gets uncomfortably small on a phone, so the
	   Left layout stacks below this width. */
	.cgr-photo-left .cgr-review-card {
		flex-direction: column;
	}
	.cgr-photo-left .cgr-review-photos {
		width: 100%;
		max-width: 100%;
		margin-bottom: 12px;
	}
	.cgr-photo-left .cgr-review-photo-block,
	.cgr-photo-left .cgr-review-photo-block img {
		width: 100%;
		max-width: 100%;
		height: var(--cgr-photo-h);
	}
}

.cgr-review-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
	margin-bottom: 6px;
}

.cgr-review-identity {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.cgr-reviewer-name {
	font-weight: 600;
}

.cgr-verified {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 0.72rem;
	color: #1e7b34;
	background: #e6f4ea;
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.cgr-verified-tick {
	font-weight: 700;
}

.cgr-review-meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cgr-review-date {
	font-size: 0.78rem;
	color: var(--cgr-text-muted);
}

.cgr-related-badge {
	font-size: 0.8rem;
	color: var(--cgr-text-muted);
	margin: 2px 0 8px;
}

.cgr-related-badge a {
	color: inherit;
}

.cgr-review-title {
	margin: 4px 0 6px;
	font-size: 1rem;
	font-weight: 600;
}

.cgr-review-text {
	margin: 6px 0 0;
	line-height: 1.55;
}

.cgr-owner-reply {
	margin-top: 12px;
	padding: 10px 14px;
	border-left: 3px solid var(--cgr-primary);
	background: var(--cgr-related-bg);
	border-radius: 0 var(--cgr-radius) var(--cgr-radius) 0;
}

.cgr-owner-reply-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--cgr-primary);
	margin-bottom: 3px;
}

.cgr-owner-reply p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* ---------------------------------------------------------------
 * Helpful voting
 * ------------------------------------------------------------- */

.cgr-helpful {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 0.78rem;
	color: var(--cgr-text-muted);
}

.cgr-helpful-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: 1px solid var(--cgr-border);
	border-radius: 999px;
	padding: 3px 10px;
	cursor: pointer;
	font-size: 0.78rem;
	color: inherit;
	line-height: 1.4;
}

.cgr-helpful-btn:hover {
	border-color: var(--cgr-primary);
}

.cgr-helpful.cgr-voted .cgr-helpful-btn {
	opacity: 0.55;
	cursor: default;
}

/* ---------------------------------------------------------------
 * Load more
 * ------------------------------------------------------------- */

.cgr-load-more-wrap {
	margin-top: 18px;
	text-align: center;
}

.cgr-load-more {
	background: none;
	border: 1px solid var(--cgr-border);
	border-radius: var(--cgr-radius);
	padding: 10px 24px;
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	color: inherit;
}

.cgr-load-more:hover {
	border-color: var(--cgr-primary);
	color: var(--cgr-primary);
}

.cgr-load-more[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* ---------------------------------------------------------------
 * Numbered review pagination
 * ------------------------------------------------------------- */

.cgr-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
}

.cgr-page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.cgr-page-button {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding: 0 9px;
	border: 1px solid var(--cgr-border);
	border-radius: 4px;
	background: #fff;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.cgr-page-button:hover,
.cgr-page-button:focus-visible {
	border-color: var(--cgr-primary);
	color: var(--cgr-primary);
}

.cgr-page-button.is-current {
	border-color: #111;
	background: #111;
	color: #fff;
}

.cgr-page-button[disabled] {
	opacity: 0.3;
	cursor: default;
}

.cgr-page-ellipsis {
	min-width: 24px;
	text-align: center;
}

.cgr-pagination.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

@media (max-width: 767px) {
	.cgr-pagination,
	.cgr-page-numbers {
		gap: 4px;
	}

	.cgr-page-button {
		min-width: 32px;
		height: 32px;
		padding: 0 7px;
	}
}

/* ---------------------------------------------------------------
 * Lightbox
 * ------------------------------------------------------------- */

.cgr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 28px;
}

.cgr-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
}

.cgr-lightbox-dialog {
	position: relative;
	display: grid;
	background: #fff;
	border-radius: var(--cgr-radius);
	overflow: hidden;
	max-width: 1100px;
	width: 100%;
	max-height: 86vh;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Photo left, review right */
.cgr-lightbox-side .cgr-lightbox-dialog {
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
}

/* Photo on top, review underneath */
.cgr-lightbox-stacked .cgr-lightbox-dialog {
	grid-template-columns: minmax(0, 1fr);
	max-width: 640px;
}

/* Photo only */
.cgr-lightbox-image .cgr-lightbox-dialog {
	grid-template-columns: minmax(0, 1fr);
	background: transparent;
	box-shadow: none;
	max-width: none;
	width: auto;
}

.cgr-lightbox-image .cgr-lightbox-panel {
	display: none;
}

.cgr-lightbox-media {
	position: relative;
	background: #14110f;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	min-width: 0;
}

.cgr-lightbox-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 86vh;
	object-fit: contain;
}

/* These arrows and indicators change photos inside the current review. */
.cgr-lightbox button.cgr-lightbox-photo-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 32px !important;
	height: 40px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72) !important;
	color: #111 !important;
	font: 400 1.65rem/1 Arial, sans-serif !important;
	cursor: pointer;
	box-shadow: none !important;
}

.cgr-lightbox button.cgr-lightbox-photo-nav:hover,
.cgr-lightbox button.cgr-lightbox-photo-nav:focus-visible {
	background: #fff !important;
	color: #000 !important;
}

.cgr-lightbox-photo-prev { left: 14px; }
.cgr-lightbox-photo-next { right: 14px; }

.cgr-lightbox-photo-dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 5px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(4px);
}

.cgr-lightbox button.cgr-lightbox-photo-dot {
	display: block;
	width: 7px !important;
	height: 7px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px;
	background: #fff !important;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) !important;
	cursor: pointer;
	transition: width 0.18s ease, background 0.18s ease;
}

.cgr-lightbox button.cgr-lightbox-photo-dot.is-active {
	width: 28px !important;
	background: #111 !important;
	box-shadow: none !important;
}

.cgr-lightbox-image .cgr-lightbox-media {
	background: transparent;
}

.cgr-lightbox-image .cgr-lightbox-media img {
	width: auto;
	max-width: 92vw;
	border-radius: var(--cgr-radius);
}

.cgr-lightbox-panel {
	padding: 30px 30px 34px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cgr-lightbox-stars {
	font-size: 1.15rem;
	margin-bottom: 8px;
}

.cgr-lightbox-name {
	font-weight: 700;
	font-size: 1.05rem;
}

.cgr-lightbox-verified {
	display: inline-flex;
	align-self: flex-start;
	font-size: 0.72rem;
	color: #1e7b34;
	background: #e6f4ea;
	padding: 2px 8px;
	border-radius: 999px;
	margin-top: 4px;
}

.cgr-lightbox-date {
	font-size: 0.8rem;
	color: var(--cgr-text-muted);
	margin-top: 4px;
}

.cgr-lightbox-title {
	margin: 14px 0 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.cgr-lightbox-text {
	margin: 10px 0 0;
	line-height: 1.6;
	white-space: pre-line;
}

.cgr-lightbox-reply {
	margin-top: 16px;
	padding: 10px 14px;
	border-left: 3px solid var(--cgr-primary);
	background: var(--cgr-related-bg);
	border-radius: 0 var(--cgr-radius) var(--cgr-radius) 0;
}

.cgr-lightbox-reply-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--cgr-primary);
	margin-bottom: 3px;
}

.cgr-lightbox-reply-text {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
}

.cgr-lightbox-product {
	margin-top: auto;
	padding-top: 18px;
	font-size: 0.82rem;
	color: var(--cgr-primary);
	text-decoration: underline;
}

.cgr-lightbox button.cgr-lightbox-close {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.82) !important;
	border: 0 !important;
	border-radius: 50%;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	font: 400 1.25rem/1 Arial, sans-serif !important;
	cursor: pointer;
	color: #111 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.cgr-lightbox button.cgr-lightbox-close:hover {
	background: #fff !important;
}

/* Two columns stop making sense on a narrow screen — stack them, and let
   the panel scroll rather than squashing the photo. */
@media (max-width: 900px) {
	.cgr-lightbox {
		padding: 8px;
	}

	.cgr-lightbox-side .cgr-lightbox-dialog,
	.cgr-lightbox-stacked .cgr-lightbox-dialog {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 150px minmax(0, auto);
		max-width: 560px;
		height: auto;
		max-height: calc(100dvh - 16px);
		overflow: hidden;
	}

	.cgr-lightbox-side .cgr-lightbox-media,
	.cgr-lightbox-stacked .cgr-lightbox-media {
		height: 150px;
		min-height: 0;
		overflow: hidden;
	}

	.cgr-lightbox-side .cgr-lightbox-media img,
	.cgr-lightbox-stacked .cgr-lightbox-media img {
		width: 100% !important;
		height: 150px !important;
		max-width: 100% !important;
		max-height: 150px !important;
		object-fit: cover !important;
	}

	.cgr-lightbox-panel {
		max-height: calc(100dvh - 182px);
		padding: 18px 20px 22px;
		gap: 3px;
	}

	.cgr-lightbox-stars {
		margin-bottom: 7px;
	}

	.cgr-lightbox-photo-prev { left: 8px; }
	.cgr-lightbox-photo-next { right: 8px; }

	.cgr-lightbox-photo-dots {
		bottom: 9px;
	}
}

@supports not (height: 100dvh) {
	@media (max-width: 900px) {
		.cgr-lightbox-side .cgr-lightbox-dialog,
		.cgr-lightbox-stacked .cgr-lightbox-dialog {
			height: auto;
			max-height: calc(100vh - 16px);
		}
		.cgr-lightbox-panel {
			max-height: calc(100vh - 182px);
		}
	}
}

/* ---------------------------------------------------------------
 * Submission form
 * ------------------------------------------------------------- */

.cgr-form-wrap {
	max-width: 540px;
}

.cgr-review-form-intro {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.cgr-form-product-img {
	width: 62px;
	height: 62px;
	object-fit: cover;
	border-radius: var(--cgr-radius);
	flex-shrink: 0;
}

.cgr-form-eyebrow {
	display: block;
	font-size: 0.8rem;
	color: var(--cgr-text-muted);
}

.cgr-form-product-name {
	font-size: 1.1rem;
}

.cgr-field {
	display: block;
	margin-bottom: 16px;
}

.cgr-field-label {
	display: block;
	font-weight: 600;
	font-size: 0.88rem;
	margin-bottom: 5px;
}

.cgr-req {
	color: #b3261e;
}

.cgr-optional {
	font-weight: 400;
	color: var(--cgr-text-muted);
}

.cgr-review-form input[type="text"],
.cgr-review-form input[type="email"],
.cgr-review-form textarea,
.cgr-review-form input[type="file"] {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cgr-border);
	border-radius: var(--cgr-radius);
	font: inherit;
	box-sizing: border-box;
	background: #fff;
}

.cgr-submit-btn {
	background: var(--cgr-primary);
	color: var(--cgr-primary-contrast);
	border: none;
	padding: 12px 28px;
	border-radius: var(--cgr-radius);
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95rem;
}

.cgr-submit-btn:hover {
	opacity: 0.9;
}

.cgr-notice {
	padding: 12px 14px;
	border-radius: var(--cgr-radius);
	margin-bottom: 16px;
	font-size: 0.9rem;
}

.cgr-notice-success {
	background: #e6f4ea;
	color: #1e7b34;
}

.cgr-notice-error {
	background: #fdecea;
	color: #b3261e;
}

.cgr-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
}

/* Pure-CSS star picker */
.cgr-star-input {
	display: inline-flex;
	flex-direction: row-reverse;
	font-size: 1.8rem;
	line-height: 1;
}

.cgr-star-input input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cgr-star-input label {
	color: var(--cgr-star-empty);
	cursor: pointer;
	padding: 0 2px;
	margin: 0;
	font-weight: 400;
	transition: color 0.1s ease;
}

.cgr-star-input input:checked ~ label,
.cgr-star-input label:hover,
.cgr-star-input label:hover ~ label {
	color: var(--cgr-star-color);
}

.cgr-star-input input:focus-visible + label {
	outline: 2px solid var(--cgr-primary);
	outline-offset: 2px;
}

/* Screen-reader-only text, in case the active theme does not define it */
.cgr-helpful .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}