/* Gedeelde live-secties: Google-reviews-blok + "andere lekkernijen"-tegels.
   Niet gescopet onder .fleur-home, dus bruikbaar op elke pagina. */

/* ===================== Reviews-blok (G3/G4) ===================== */
.fleur-rv { padding: 56px 0 64px; background: var(--fleur-cream); }
.fleur-rv__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap; margin-bottom: 10px;
}
/* .fleur-rv-prefix verhoogt de specificiteit boven `.fleur-page__content h2`
   (pages.css forceert daar font-size 28px + margin-top ~39px, wat de kop op de
   winkelwagen omlaag duwde en dus scheef zette t.o.v. de knop). */
.fleur-rv .fleur-rv__title {
	font-family: var(--fleur-font-serif);
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 400; color: #000; margin: 0; line-height: 1.15; /* Figma 477:6405: zwart */
}
.fleur-rv .fleur-rv__title em { font-style: italic; color: var(--fleur-pink-soft); } /* Figma: #f6bddd, niet de felle roze */
/* .fleur-rv-prefix verhoogt de specificiteit boven `.fleur-page__content a`
   (pages.css: felle roze + underline), zodat de knoptekst overal crème blijft. */
.fleur-rv .fleur-rv__cta {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--fleur-pink-soft); color: var(--fleur-cream); /* Figma 477:14636: crème/wit */
	font-family: var(--fleur-font-sans); font-weight: 900; font-size: 13px;
	text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
	padding: 14px 26px; border-radius: 100px; white-space: nowrap;
	transition: filter .15s ease;
}
.fleur-rv .fleur-rv__cta:hover { filter: brightness(.96); color: var(--fleur-cream); }
.fleur-rv__rating {
	display: flex; align-items: center; gap: 10px; margin-bottom: 26px;
}
.fleur-rv__rating .fleur-rv__score { font-weight: 700; color: #000; }
.fleur-rv__stars { display: inline-flex; align-items: center; gap: 1px; }
.fleur-rv__count { font-weight: 700; color: #000; }
.fleur-rv__grid { display: flex; flex-wrap: wrap; gap: 24px; }
.fleur-rv__card {
	flex: 0 1 calc(25% - 18px); min-width: 280px;
	background: #fff; border-radius: 14px; padding: 22px 24px;
	box-shadow: 0 10px 30px rgba(76, 61, 69, .08);
}
.fleur-rv__cardhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fleur-rv__avatar {
	width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 700; font-size: 18px;
}
.fleur-rv__name { font-weight: 700; color: #000; font-size: 16px; }
.fleur-rv__g { margin-left: auto; }
.fleur-rv__starrow { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.fleur-rv__text { margin: 0; color: #000; font-size: 14px; line-height: 1.55; } /* Figma 477:6446: zwart */

/* ---- Live Trustindex-widget (fleur-rv--live) -------------------------------
   De losse Google-reviews komen client-side uit de Trustindex-plugin en dragen
   hun eigen .ti-*-opmaak. We sturen die zo dicht mogelijk naar het Fleur/Figma-
   ontwerp: witte kaarten met zachte schaduw, DM Sans, zwarte tekst, roze pijlen.
   !important is nodig om de (zeer specifieke) plugin-CSS te overrulen. */
.fleur-rv__widget { margin-top: 2px; }
.fleur-rv__widget .ti-widget,
.fleur-rv__widget .ti-widget * { font-family: var(--fleur-font-sans) !important; }
.fleur-rv__widget .ti-widget { margin: 0 !important; }
/* Uitlijnen met de kop erboven: de slider-baan pakt -8px zijmarge zodat die de
   8px zij-padding van .ti-review-item opheft en de eerste kaart precies onder de
   kop (containerrand) begint i.p.v. ~16px ingesprongen. Selector bevat .ti-widget.ti-goog
   zodat 'ie de plugin-regel (.ti-widget.ti-goog .ti-reviews-container-wrapper{margin:0 8px !important}) verslaat. */
.fleur-rv__widget .ti-widget.ti-goog .ti-reviews-container-wrapper { margin-left: -8px !important; margin-right: -8px !important; }
/* Reviewkaart — vlak (GEEN schaduw, op verzoek). */
.fleur-rv__widget .ti-review-item .ti-inner {
	background: #fff !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	padding: 22px 24px !important;
}
/* Naam + datum */
.fleur-rv__widget .ti-name,
.fleur-rv__widget .ti-name a { color: #000 !important; font-weight: 700 !important; font-size: 16px !important; }
.fleur-rv__widget .ti-date { color: #6b6b6b !important; }
/* Reviewtekst */
.fleur-rv__widget .ti-review-content,
.fleur-rv__widget .ti-review-text-container { color: #000 !important; font-size: 14px !important; line-height: 1.55 !important; }
.fleur-rv__widget .ti-read-more { color: var(--fleur-pink) !important; font-weight: 700 !important; }
/* Navigatiepijlen + actieve dot in Fleur-roze */
.fleur-rv__widget .ti-next,
.fleur-rv__widget .ti-prev { color: var(--fleur-pink-soft) !important; }
.fleur-rv__widget .ti-next:hover,
.fleur-rv__widget .ti-prev:hover { color: var(--fleur-pink) !important; }
.fleur-rv__widget .ti-controls-line .dot.active { background: var(--fleur-pink-soft) !important; }
/* De widget-footer ("Google waardering: … recensies") verbergen — die staat al
   bovenin als .fleur-rv__rating, dus dubbel. (De verplichte Trustindex-credit,
   indien aan, blijft staan via .ti-verified-by.) */
.fleur-rv__widget .ti-footer { display: none !important; }

/* Liggende tablet / kleine laptop (982–1024): 2 kaarten — ongewijzigd, GEEN slider. */
@media (min-width: 982px) and (max-width: 1024px) { .fleur-rv__card { flex: 0 1 calc(50% - 12px); } }

/* Mobiel + staande tablet (≤981): reviews als oneindige (infinity) auto-slider,
   1 review per weergave, ZONDER pijlen/dots (theme.js zorgt voor auto-play + swipe).
   Kop, beoordeling en knop gestapeld — de KNOP komt ONDER de beoordeling (van plek
   gewisseld t.o.v. desktop). display:contents op de kop lost 'm op zodat titel en
   knop los in de kolom kunnen ordenen. Strikt ≤981 → desktop/landscape houden het
   rasterontwerp. */
@media (max-width: 981px) {
	/* Minder witruimte boven én onder het reviews-blok op mobiel (gebruiker-
	   feedback: "te veel witruimte boven en onder het review slider blok" op
	   assortiment, workshops, winkelwagen, productpagina's, speciale momenten). */
	.fleur-rv { padding: 14px 0 14px; }

	.fleur-rv .sellabees-container { display: flex; flex-direction: column; align-items: flex-start; }
	.fleur-rv__head { display: contents; }
	.fleur-rv .fleur-rv__title { order: 1; margin: 0 0 14px; }
	.fleur-rv__rating          { order: 2; margin: 0 0 16px; }
	.fleur-rv .fleur-rv__cta   { order: 3; margin: 0 0 24px; }
	.fleur-rv .fleur-islider-viewport { order: 4; width: 100%; }

	/* Live Trustindex-widget op mobiel: ná de kop/beoordeling/knop plaatsen. De widget
	   verzorgt zelf zijn responsive slider (JS sized de slide op de schermbreedte, net
	   als bij Sjon); we sturen die niet met eigen breedtes bij — dat botst met de
	   interne slider-positionering. overflow:hidden houdt de sectie binnen het scherm. */
	.fleur-rv__widget { order: 4; width: 100%; max-width: 100%; margin-top: 4px; overflow: hidden; }

	/* Baan: flexrij die door theme.js wordt getransformeerd (viewport clipt). */
	.fleur-rv__grid {
		flex-wrap: nowrap;
		gap: 16px;
		width: 100%;
		will-change: transform;
	}
	.fleur-rv__card {
		flex: 0 0 100%;
		min-width: 0;
	}
}

/* ============== "Bekijk ook onze andere lekkernijen" (G2) ============== */
.fleur-lekkernijen { padding: 48px 0 60px; }
.fleur-lekkernijen__title {
	font-family: var(--fleur-font-serif); font-weight: 400;
	font-size: clamp(24px, 2.4vw, 30px); color: var(--fleur-aubergine);
	margin: 0 0 26px;
}
.fleur-lekkernijen__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.fleur-lekkernijen__tile {
	position: relative; display: block; aspect-ratio: 5 / 4;
	border-radius: 10px; overflow: hidden; background: var(--fleur-aubergine);
}
.fleur-lekkernijen__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; transition: transform .3s ease;
}
.fleur-lekkernijen__tile:hover .fleur-lekkernijen__img { transform: scale(1.04); }
.fleur-lekkernijen__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.58) 100%);
}
.fleur-lekkernijen__label {
	position: absolute; left: 16px; bottom: 14px; z-index: 1;
	font-family: var(--fleur-font-sans); font-weight: 900; font-size: 18px;
	color: var(--fleur-cream);
}
@media (max-width: 1024px) { .fleur-lekkernijen__grid { grid-template-columns: repeat(2, 1fr); } }

/* Mobiel + staande tablet (≤981): "andere lekkernijen" als toppers-stijl slider
   (2 tegels per weergave, dots, oneindig — theme.js pakt [data-fleur-slider] op).
   Baan = flexrij die getransformeerd wordt; de viewport (main.css) clipt 'm.
   Strikt ≤981 → desktop/liggende tablet (982-1024 = 2-koloms grid) blijft ongemoeid. */
@media (max-width: 981px) {
	.fleur-lekkernijen { padding: 26px 0 30px; }
	.fleur-lekkernijen__grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		gap: 16px;
		will-change: transform;
	}
	.fleur-lekkernijen__grid > .fleur-lekkernijen__tile {
		flex: 0 0 calc((100% - 16px) / 2);
		min-width: 0;
	}
}