/*
 * Aronia Reviews Display 2.0 — Valfrids style
 * Matches the product sections on valfrids.com (Flatsome): Lato from the theme,
 * green #2d5238, section header with thin line + small caps + green title,
 * product-card layout and the same blue stars as the product ratings.
 *
 * Geometry mirrors a Flatsome UX Builder Section placed in the page column:
 * 30px side padding (Flatsome's ".row .section"), 4/3/2 columns at Flatsome's
 * 850px/550px breakpoints and 19.6px gaps, so cards line up with the product rows.
 */

.vfr {
	--vfr-green: #2d5238;
	--vfr-text: #2b2b2b;
	--vfr-muted: #6b6b65;
	--vfr-line: #e4ddd1;
	--vfr-star: #567dad;
	--vfr-star-empty: #d9d2c5;
	--vfr-gap: 19.6px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	color: var(--vfr-text);
	text-align: left;
}
.vfr *, .vfr *::before, .vfr *::after { box-sizing: border-box; }
.vfr[data-stars="green"] { --vfr-star: #2d5238; }

/* Placed straight in a page column: behave like a UX Builder Section
   (same side padding, and the same space down to the next section). */
.row .vfr,
.container .vfr { padding: 0 30px 15px; }
/* Placed inside a UX Builder Section: the section already provides the spacing. */
.section .vfr,
.section-content .vfr { padding: 0; }

/* ---------- Section header (same pattern as .vf-section-header on the site) ---------- */
.vfr .vfr-head { max-width: 600px; margin: 0 auto 50px; text-align: center; }
.vfr .vfr-divider { display: block; width: 40px; height: 1px; margin: 0 auto 20px; background: var(--vfr-green); }
.vfr .vfr-eyebrow {
	margin: 0 0 14px;
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--vfr-muted);
}
.vfr .vfr-title {
	margin: 0;
	padding: 0;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 500;
	color: var(--vfr-green);
}
@media (max-width: 850px) { .vfr .vfr-title { font-size: 26px; } }
.vfr .vfr-summary {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 12px;
	margin: 16px 0 0;
	font-size: 14.4px;
	line-height: 1.4;
	color: var(--vfr-muted);
}
.vfr .vfr-summary strong { font-weight: 700; color: var(--vfr-text); }
.vfr .vfr-summary .vfr-stars { font-size: 16px; }
.vfr .vfr-sep { width: 1px; height: 14px; background: var(--vfr-line); }

/* ---------- Stars ---------- */
.vfr .vfr-stars { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.vfr .vfr-stars-row { display: flex; gap: .12em; color: var(--vfr-star-empty); }
.vfr .vfr-stars-row svg { display: block; width: 1em; height: 1em; flex: 0 0 auto; fill: currentColor; }
.vfr .vfr-stars-fill { position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; }
.vfr .vfr-stars-fill .vfr-stars-row { color: var(--vfr-star); }

/* ---------- Slider ---------- */
.vfr .vfr-slider { position: relative; }
.vfr .vfr-track {
	--vfr-cols: 4;
	display: flex;
	gap: var(--vfr-gap);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.vfr .vfr-track::-webkit-scrollbar { display: none; }

/* Same breakpoints as Flatsome's product rows (large 4 / medium 3 / small 2) */
@media (max-width: 849px) { .vfr .vfr-track { --vfr-cols: 3; } }
@media (max-width: 549px) { .vfr .vfr-track { --vfr-cols: 2; } }

/* ---------- Card ---------- */
.vfr .vfr-card {
	flex: 0 0 calc((100% - (var(--vfr-cols) - 1) * var(--vfr-gap)) / var(--vfr-cols));
	min-width: 0;
	display: flex;
	scroll-snap-align: start;
}
.vfr--single .vfr-card { max-width: 260px; }
.vfr .vfr-card-in { display: flex; flex-direction: column; width: 100%; }

.vfr .vfr-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.vfr .vfr-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	transition: transform .6s ease;
}
.vfr .vfr-card:hover .vfr-img img { transform: scale(1.04); }

.vfr .vfr-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 0 0; }
.vfr .vfr-product {
	margin: 0 0 5px;
	font-size: 10.8px;
	line-height: 1.4;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: .7;
}
.vfr .vfr-product a { color: inherit; text-decoration: none; }
.vfr .vfr-product a:hover { color: inherit; text-decoration: underline; }
.vfr .vfr-body > .vfr-stars { align-self: flex-start; margin: 0 0 9px; font-size: 14px; }
.vfr .vfr-text {
	margin: 0 0 12px;
	font-size: 14.4px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}
.vfr .vfr-author {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin: auto 0 0;
	font-size: 14.4px;
	line-height: 1.45;
}
.vfr .vfr-author strong { font-weight: 700; }
.vfr .vfr-date { font-size: 12.5px; color: var(--vfr-muted); white-space: nowrap; }
.vfr .vfr-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 1.4em;
	margin: 2px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--vfr-muted);
}
.vfr .vfr-meta svg { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: var(--vfr-green); stroke-width: 2.4; }

/* White cards: [aronia_reviews cards="boxed"] */
.vfr[data-cards="boxed"] .vfr-card-in { background: #fff; border: 1px solid var(--vfr-line); }
.vfr[data-cards="boxed"] .vfr-body { padding: 12px 14px 14px; }

/* ---------- Arrows (shown once the script has loaded and there is something to scroll) ---------- */
.vfr .vfr-nav {
	position: absolute;
	top: calc(var(--vfr-img-h, 200px) / 2);
	z-index: 2;
	display: none;
	place-items: center;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	max-width: none;
	margin: -20px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--vfr-green);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .10);
	font-size: 0;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: opacity .2s ease, transform .2s ease;
}
.vfr .vfr-slider.is-ready.is-scrollable .vfr-nav { display: grid; }
.vfr .vfr-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.vfr .vfr-nav:hover { background: #fff; color: var(--vfr-green); transform: scale(1.06); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .14); }
.vfr .vfr-nav:focus-visible { outline: 2px solid var(--vfr-green); outline-offset: 2px; }
.vfr .vfr-prev { left: -4px; }
.vfr .vfr-next { right: -4px; }

@media (hover: hover) {
	.vfr .vfr-nav { opacity: 0; }
	.vfr .vfr-slider:hover .vfr-nav,
	.vfr .vfr-nav:focus-visible { opacity: 1; }
}
/* Phones swipe instead */
@media (max-width: 549px) { .vfr .vfr-slider.is-ready.is-scrollable .vfr-nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.vfr .vfr-img img,
	.vfr .vfr-nav { transition: none; }
	.vfr .vfr-card:hover .vfr-img img { transform: none; }
}