/* KK Google Reviews – front-end */
.google-review-widget {
	width: 208px;
	max-width: 100%;
	height: auto;
}

.google-single-rating {
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Reviews slider                                                     */
/* Cards per row are controlled by the --kkgr-pv-* custom properties  */
/* set inline by the block; the active value is chosen per breakpoint.*/
/* ------------------------------------------------------------------ */

.kkgr-slider {
	--kkgr-gap: 16px;
	--kkgr-pv: var(--kkgr-pv-d, 3); /* desktop default */
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.kkgr-slider__track {
	display: flex;
	gap: var(--kkgr-gap);
	flex: 1 1 auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.kkgr-slider__track::-webkit-scrollbar {
	display: none;
}

.kkgr-slider__slide {
	scroll-snap-align: start;
	box-sizing: border-box;
	flex: 0 0 calc((100% - (var(--kkgr-pv) - 1) * var(--kkgr-gap)) / var(--kkgr-pv));
	min-width: 0;
}

/* Make every card in a slide fill the slide height evenly. */
.kkgr-slider__slide > .google-single-rating {
	height: 100%;
}

/* Navigation arrows – plain black chevrons, transparent button */
.kkgr-slider__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: #000;
	cursor: pointer;
	line-height: 0;
	transition: opacity 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.kkgr-slider__icon {
	display: block;
	height: 38px; /* just under 40px; width follows the chevron ratio (~17px visible) */
	width: auto;
}

.kkgr-slider__nav:hover {
	opacity: 0.6;
}

.kkgr-slider__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Hide arrows entirely when there is nothing to scroll. */
.kkgr-slider--static .kkgr-slider__nav {
	display: none;
}

/* Tablet */
@media (max-width: 1024px) {
	.kkgr-slider {
		--kkgr-pv: var(--kkgr-pv-t, 2);
	}
}

/* Mobile */
@media (max-width: 600px) {
	.kkgr-slider {
		--kkgr-pv: var(--kkgr-pv-m, 1);
	}
}