/* PrittyWoman — shop/categorie/merk-archief (gescoped). 1:1 met live. */

.sellabees-shop {
	max-width: var(--pw-container-wide);
	margin-inline: auto;
	padding: 40px 24px 72px;
}
.sellabees-shop__head { text-align: center; margin-bottom: 28px; }
.sellabees-shop__title {
	font-family: var(--pw-font-display);   /* live = Butler */
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: normal;
	font-size: 35px;                       /* live = 35px */
	color: var(--pw-text);
	margin: 0;
}

.sellabees-shop__body {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 40px;
	align-items: start;
}

/* ---- Filter-sidebar ---- */
.sellabees-filter__group { margin-bottom: 26px; }
.sellabees-filter__title {
	font-family: var(--pw-font-heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--pw-text);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--pw-line);
}
/* Prijs-slider (dubbele range, gouden fill) — 1:1 met live */
.sellabees-price { position: relative; padding: 8px 8px 4px; }
.sellabees-price__track { position: relative; height: 4px; background: #ddd; border-radius: 2px; }
.sellabees-price__fill { position: absolute; height: 100%; background: var(--pw-gold); border-radius: 2px; }
.sellabees-price__range {
	position: absolute;
	left: 0;
	top: -3px;
	width: 100%;
	height: 16px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.sellabees-price__range::-webkit-slider-thumb {
	pointer-events: auto; -webkit-appearance: none; appearance: none;
	width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--pw-gold); cursor: pointer; margin-top: -1px;
}
.sellabees-price__range::-moz-range-thumb {
	pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--pw-gold); cursor: pointer;
}
.sellabees-price__range::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.sellabees-price__range::-moz-range-track { background: transparent; height: 4px; }
.sellabees-price__labels { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; color: var(--pw-text); }
.sellabees-filter__list { list-style: none; margin: 0; padding: 0; }
.sellabees-filter__list.is-scrollable {
	max-height: none;         /* geen interne scroll — alle maten onder elkaar */
	overflow: visible;
	padding-right: 0;
}
.sellabees-filter__check {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	font-family: var(--pw-font-body);
	font-size: 14px;
	color: var(--pw-body);
	cursor: pointer;
}
.sellabees-filter__check input { accent-color: var(--pw-gold); width: 16px; height: 16px; }
.sellabees-filter__actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.sellabees-filter__apply {
	border: 0;
	background: var(--pw-text);
	color: #fff;
	font-family: var(--pw-font-heading);
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 4px;
	cursor: pointer;
}
.sellabees-filter__apply:hover { background: #000; }
.sellabees-filter__reset { font-size: 13px; color: var(--pw-body); text-decoration: underline; }

/* Sorteer-dropdown in het mobiele filterpaneel (door JS hierheen verplaatst ≤1000px). */
.sellabees-shop__sort--mobile {
	margin: 0 0 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--pw-line);
}
.sellabees-shop__sort--mobile::before {
	content: "Sorteren";
	display: block;
	font-family: var(--pw-font-heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--pw-text);
	margin: 0 0 10px;
}
.sellabees-shop__sort--mobile select {
	width: 100%;
	border: 1px solid #cfcfcf;
	border-radius: 4px;
	padding: 10px 12px;
	font-family: var(--pw-font-body);
	font-size: 14px;
	background: #fff;
	color: var(--pw-text);
}

/* ---- Bovenbalk (resultaat + sortering) ---- */
.sellabees-shop__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.sellabees-shop__bar .woocommerce-result-count { margin: 0; color: #999; font-size: 14px; }  /* live = #999 */
.sellabees-shop__bar .woocommerce-ordering select {
	border: 1px solid #cfcfcf;
	border-radius: 4px;
	padding: 8px 12px;
	font-family: var(--pw-font-body);
	font-size: 14px;
	background: #fff;
}

/* ---- Productgrid (override WC float/flex → 3-koloms grid) ---- */
.sellabees-shop ul.products {
	display: grid !important;
	/* minmax(0,1fr) i.p.v. 1fr: dwingt ÉCHT gelijke kolommen af. Met kale 1fr kan een
	 * kolom met "bredere" inhoud (min-content van afbeelding/maat-rij) uitzetten →
	 * die kaart krijgt een breder + hoger beeld → prijs/maat-rij zakt → niet uitgelijnd. */
	grid-template-columns: repeat(4, minmax(0, 1fr));   /* 4 tegels naast elkaar (kleiner) */
	gap: 50px 30px;                          /* rij-/kolomruimte */
	margin: 0;
	padding: 0;
	list-style: none;
}
.sellabees-shop ul.products::before,
.sellabees-shop ul.products::after { display: none !important; content: none !important; }
.sellabees-shop ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: center;
	position: relative;
}
.sellabees-shop li.product a img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin-bottom: 12px;
	display: block;
}
.sellabees-shop ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--pw-font-heading);
	font-size: 14px;
	font-weight: 500;
	color: var(--pw-text);
	padding: 0 6px;
	margin: 4px 0 6px;
	line-height: 1.4;
}
/* Kaart = flexkolom → prijs + maat-rij onderaan, uitgelijnd over de hele rij,
   ZONDER de titel af te kappen (titel mag vrij afbreken naar 2/3 regels). */
.sellabees-shop ul.products li.product { display: flex; flex-direction: column; }
.sellabees-shop ul.products li.product > a.woocommerce-loop-product__link { display: flex; flex-direction: column; flex: 1 1 auto; }
.sellabees-shop ul.products li.product .price { margin-top: auto; }
.sellabees-shop ul.products li.product .price,
.sellabees-shop ul.products li.product .price .woocommerce-Price-amount,
.sellabees-shop ul.products li.product .price bdi {
	display: block;
	font-family: var(--pw-font-heading);
	font-size: 14px;
	font-weight: 500;
	color: var(--pw-text);
}
.sellabees-shop ul.products li.product .price .woocommerce-Price-amount,
.sellabees-shop ul.products li.product .price bdi { display: inline; }
.sellabees-shop li.product .price del { color: #9b9b9b; font-weight: 400; margin-right: 6px; }
.sellabees-shop li.product .price ins { text-decoration: none; }
.sellabees-shop li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	margin: 10px;
	font-size: 15px;          /* groter zodat het meer opvalt */
	padding: 8px 15px;
	border-radius: 4px;
}

/* ---- Maat-swatches: ALTIJD op één regel onder het product ---- */
/* Override van de gedeelde core-stijl (.sellabees-loop-sizes = flex-wrap:wrap):
 * op de smalle 4-koloms kaarten brak een product met veel maten (S M L XL XXL)
 * af naar een 2e regel → ongelijke kaarthoogtes. Hier nooit afbreken; de pillen
 * houden hun inhoudsbreedte (= live look) maar mogen krimpen als veiligheidsnet. */
.sellabees-shop .sellabees-loop-sizes {
	flex-wrap: nowrap;
	gap: 4px;
}
.sellabees-shop .sellabees-size {
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;
	padding: 4px 6px;
}

/* ---- Paginatie ---- */
/* Verplaatst naar layout.css (globaal) zodat álle gepagineerde pagina's dezelfde
 * stijl krijgen en de regels van WooCommerce-core winnen (ook op .woocommerce-archieven). */

/* ---- Responsive ---- */
/* Filter-toggle (alleen mobiel, zoals live) */
.sellabees-filter-toggle {
	display: none;
	align-items: center; gap: 8px;
	background: #fff; border: 1px solid var(--pw-line); border-radius: 4px;
	padding: 10px 16px; margin-bottom: 18px; cursor: pointer;
	font-family: var(--pw-font-heading); font-weight: 600; color: var(--pw-text);
}
/* Overlay + sluitknop alleen op mobiel (zie media-query); desktop = verborgen. */
.sellabees-filter-overlay,
.sellabees-filter-close { display: none; }

/* Resultaat-telling: korte variant alleen op de telefoon (zie media-query). */
.woocommerce-result-count .sellabees-rc-short { display: none; }

@media (max-width: 1000px) {
	.sellabees-filter-toggle { display: inline-flex; }
	.sellabees-shop__body { grid-template-columns: 1fr; margin-top: -35px; }
	.sellabees-shop ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* tablet = 3-koloms */

	/* Filter = uitschuifpaneel vanaf links (off-canvas) */
	.sellabees-shop__sidebar {
		position: fixed; top: 0; left: 0; bottom: 0;
		width: 320px; max-width: 86vw;
		margin: 0; padding: 56px 22px 28px;
		background: #fff; z-index: 1001;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .28s ease;
		box-shadow: 2px 0 22px rgba(0, 0, 0, .18);
	}
	.sellabees-shop.filter-open .sellabees-shop__sidebar { transform: translateX(0); }

	.sellabees-filter-overlay {
		display: block;
		position: fixed; inset: 0;
		background: rgba(0, 0, 0, .45);
		opacity: 0; visibility: hidden;
		transition: opacity .28s ease;
		z-index: 1000;
	}
	.sellabees-shop.filter-open .sellabees-filter-overlay { opacity: 1; visibility: visible; }

	.sellabees-filter-close {
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: 10px; right: 12px;
		width: 38px; height: 38px;
		border: 0; background: none;
		font-size: 30px; line-height: 1; color: var(--pw-text);
		cursor: pointer;
	}
	body.sellabees-filter-open { overflow: hidden; }
}

/* ---- Telefoon: compacte kop + 2-koloms grid ---- */
@media (max-width: 640px) {
	.sellabees-shop { padding-top: 8px; }                      /* bovenmarge weg */
	.sellabees-shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }

	/* Prijs blijft uitgelijnd, onderkant mag verschillen.
	   Standaard wordt de prijs met margin-top:auto naar de BODEM gepind; dat lijnt
	   alleen uit als de maten-rij overal even hoog is. Nu de maten mogen wrappen,
	   schakelen we op mobiel over op TOP-uitlijning: kaarten niet meer rekken,
	   titel krijgt een vaste minimale hoogte → alle prijzen op dezelfde hoogte,
	   en de (variabele) maten-rij hangt er vrij onder. */
	.sellabees-shop ul.products { align-items: start; }
	.sellabees-shop ul.products li.product > a.woocommerce-loop-product__link { flex: 0 0 auto; }
	.sellabees-shop ul.products li.product .woocommerce-loop-product__title { min-height: 2.8em; }
	.sellabees-shop ul.products li.product .price { margin-top: 0; }

	/* Maat-pillen: mogen afbreken naar een 2e rij, minimaal 4 per rij (elk 1/4 breed),
	   wat groter/beter leesbaar. */
	.sellabees-shop .sellabees-loop-sizes { flex-wrap: wrap; gap: 5px; }
	.sellabees-shop .sellabees-size {
		flex: 0 0 calc(25% - 4px);
		max-width: calc(25% - 4px);
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 34px;
		padding: 6px 4px;
		font-size: .9rem;
		text-align: center;
		white-space: nowrap;
	}

	/* Titel kleiner + rechts; filterknop direct eronder (ook rechts) */
	.sellabees-shop__head { margin-bottom: 4px; }
	.sellabees-shop__title { font-size: 22px; }
	.sellabees-filter-toggle { width: max-content; margin: 0 0 12px auto; padding: 8px 14px; }

	/* Resultaat-telling klein + korte tekst ("1–24 van de 47") */
	.sellabees-shop__bar { margin-bottom: 12px; float: right; }
	.sellabees-shop__bar .woocommerce-result-count { font-size: 12px; margin: 0; }
	.woocommerce-result-count .sellabees-rc-full { display: none; }
	.woocommerce-result-count .sellabees-rc-short { display: inline; }
}