/* =========================================================================
   search-404.css — Zoekresultaten- en 404-pagina (Chocolaterie Fleur).

   Beide pagina's hergebruiken de aubergine titelband
   `.fleur-page--generic .fleur-page__hero` (pages.css) en — voor de zoekpagina —
   de Sinterklaas kaart/gridstijl (`.fleur-sint-shop` / `.fleur-sint-grid`,
   blocks/sint.css). Hier alleen de aanvullingen:
     - het zoekgrid vol-breed (4 kolommen i.p.v. sint's 3, want er is géén
       filterkolom); alle breakpoints expliciet gezet zodat ze de sint-regels
       (lagere specificiteit) hoe dan ook winnen;
     - de lege-staat + het gedeelde zoekformulier;
     - het 404-contentblok.

   Alles gescoped op .fleur-page--search / .fleur-page--404 / .fleur-search-* /
   .fleur-404, dus geen invloed op andere pagina's. Werkt op alle formaten.
   ========================================================================= */

/* ---- Zoekresultaten: vol-breed productgrid (geen filterkolom) ------------- */
.fleur-search-results .fleur-sint-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 982px) and (max-width: 1219px) {
	.fleur-search-results .fleur-sint-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 981px) {
	.fleur-search-results .fleur-sint-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
	.fleur-search-results .fleur-sint-grid { grid-template-columns: 1fr; }
}

/* WooCommerce-paginering. De zoekresultaten-body heeft GEEN body.woocommerce/
   .archive-class, dus de paginering-stijl uit shop.css grijpt hier niet aan →
   we spiegelen 'm hier, gescoped op .fleur-search-results (ronde pills, huisstijl). */
.fleur-search-results .woocommerce-pagination {
	margin-top: 40px;
	text-align: center;
}
.fleur-search-results .woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.fleur-search-results .woocommerce-pagination ul li { border: 0; margin: 0; list-style: none; }
.fleur-search-results .woocommerce-pagination ul li::marker { content: none; }
.fleur-search-results .woocommerce-pagination ul li a,
.fleur-search-results .woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 100px;
	font-family: var(--fleur-font-sans);
	font-weight: 600;
	font-size: 14px;
	color: var(--fleur-aubergine);
	background: #fff;
	border: 1px solid var(--fleur-line, #ece7e9);
	text-decoration: none;
}
.fleur-search-results .woocommerce-pagination ul li span.current {
	background: var(--fleur-aubergine);
	color: #fff;
	border-color: var(--fleur-aubergine);
}
.fleur-search-results .woocommerce-pagination ul li a:hover {
	background: var(--fleur-pink);
	color: #fff;
	border-color: var(--fleur-pink);
}

/* ---- Lege staat + gedeeld zoekformulier ---------------------------------- */
.fleur-search-empty { max-width: 640px; }
.fleur-search-empty__text {
	font-size: 18px;
	line-height: 1.6;
	color: var(--fleur-aubergine);
	margin: 0 0 24px;
}

.fleur-search-form {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.fleur-search-form__input {
	flex: 1 1 240px;
	min-width: 0;
	font-family: var(--fleur-font-sans);
	font-size: 16px;              /* ≥16px → geen iOS-zoom bij focus */
	color: var(--fleur-aubergine);
	background: var(--fleur-field, #e8e8e8);
	border: 1px solid transparent;
	border-radius: 100px;
	padding: 14px 24px;
}
.fleur-search-form__input:focus {
	outline: none;
	border-color: var(--fleur-pink);
	background: #fff;
}
.fleur-search-form__btn {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
}

/* ---- 404-content --------------------------------------------------------- */
.fleur-404 { max-width: 640px; }
.fleur-404__text {
	font-size: 18px;
	line-height: 1.7;
	color: #000;
	margin: 0 0 28px;
}
.fleur-404__btn { margin: 0; }

/* ---- Mobiel: knop + zoekveld vol-breed ----------------------------------- */
@media (max-width: 981px) {
	.fleur-search-empty__text,
	.fleur-404__text { font-size: 16px; }
	.fleur-404__btn { display: block; text-align: center; }
	.fleur-search-form__input { flex-basis: 100%; }
	.fleur-search-form__btn { width: 100%; }
}