/* ==========================================================================
   AVD BLOK 39 - productcategoriepagina (4 augustus 2026)

   Hoort bij avd-categoriepagina.php en bij twee Elementor-sjablonen:
   "AVD Productarchief" (Products Archive) en "AVD Productkaart" (Loop Item).

   De inhoud, de teksten en de meeste kleuren en maten staan in Elementor.
   Hier staat alleen wat Elementor niet kan: de twee kolommen op desktop,
   de opmaak van onderdelen die door plug-ins worden gemaakt (Filter
   Everything, prijs per kilo, productbadges) en de meelopende balk op mobiel.
   ========================================================================== */

:root,
.avd-archief{
	--avd-petrol:#126985;
	--avd-inkt:#0d2a35;
	--avd-tekst:#3d5560;
	--avd-grijs:#7d99a3;
	--avd-lijn:#e4ebee;
	--avd-lijn2:#e0e8eb;
	--avd-rand:#cfdde2;
	--avd-pilrand:#bcd6de;
	--avd-licht:#eaf3f6;
	--avd-rood:#c0392b;
}

/* --------------------------------------------------------------- 1. raster */

/* Het Elementor-archiefsjabloon staat niet in de .col-full van het thema,
   dus zetten we dezelfde breedte en binnenmarge zelf. 1170px inhoud met
   41,8868px marge boven 992px, daaronder 15px. Zo loopt de categoriepagina
   precies in de rooilijn van de kopbalk en de footer. */
.avd-archief.avd-archief{
	box-sizing:border-box;
	max-width:1170px; margin-left:auto; margin-right:auto;
	padding-left:15px; padding-right:15px;
}
@media (min-width:993px){
	.avd-archief.avd-archief{
		max-width:1254px;
		padding-left:41.8868px; padding-right:41.8868px;
	}
}

.avd-archief{ overflow:visible; }
.avd-archief > .elementor-element{ overflow:visible; }

@media (min-width:1025px){

	.avd-archief.avd-archief{
		display:grid;
		grid-template-columns:260px minmax(0,1fr);
		column-gap:32px;
		row-gap:0;
		align-items:start;
	}

	.avd-archief > .avd-kruimelhouder{ grid-column:1 / -1; grid-row:1; }
	.avd-archief > .avd-filterkolom  { grid-column:1; grid-row:2 / span 8; }
	.avd-archief > .avd-kopblok          { grid-column:2; grid-row:2; }
	.avd-archief > .avd-subcats      { grid-column:2; grid-row:3; }
	.avd-archief > .avd-sorteerbalk  { grid-column:2; grid-row:4; }
	.avd-archief > .avd-lijst        { grid-column:2; grid-row:5; }
	.avd-archief > .avd-paginahouder { grid-column:2; grid-row:6; }
	.avd-archief > .avd-seohouder    { grid-column:2; grid-row:7; }
}

/* Onder 1025px staat alles onder elkaar in de volgorde van het sjabloon. */

/* ----------------------------------------------------------- 2. kruimelpad */

.avd-kruimelrij{
	display:flex; align-items:center; gap:14px;
	font-size:14px; color:#6b7f88;
}
/* De terugknop is dezelfde als op de dierpagina's: de opmaak en het pijltje
   komen van de klasse wxp-back-button uit style.css. Hier alleen zorgen dat
   hij niet meekrimpt in de rij. */
.avd-kruimelrij .avd-terug{ flex:none; white-space:nowrap; }
.avd-kruimels{
	font-size:14px; min-width:0; white-space:nowrap;
	overflow-x:auto; scrollbar-width:none;
}
.avd-kruimels::-webkit-scrollbar{ height:0; }
.avd-kruimels a{ color:var(--avd-petrol); text-decoration:none; }
.avd-kruimels a:hover{ text-decoration:underline; }
.avd-kruimelsep{ color:#a8b8bf; margin:0 6px; }
.avd-kruimelhuidig{ color:var(--avd-tekst); }

/* ------------------------------------------------------- 3. kop en intro */

/* Grootte en kleur van de H1 en van de intro staan in Elementor
   (widgets Archieftitel en Archiefbeschrijving), niet hier. */
.avd-intro p{ margin:0; }
/* De intro werd op twee regels afgekapt. Op een telefoon paste de tekst
   daardoor niet en eindigde hij midden in een zin. De hele beschrijving staat
   er nu; de diepgang zit in het SEO-blok onder "Meer informatie". */
.avd-intro .elementor-widget-container > div,
.avd-intro .term-description{ max-width:78ch; }
/* De knop van Read More WP hoort niet in een intro van twee regels. */
.avd-intro [class*="rmwp"],
.avd-intro [class*="read-more"],
.avd-intro button{ display:none !important; }

.avd-meerinfo{
	display:inline-flex; align-items:center; gap:7px;
	font-size:15.5px; font-weight:600; color:var(--avd-petrol); text-decoration:none;
}
.avd-meerinfo:hover{ text-decoration:underline; color:var(--avd-petrol); }
.avd-meerinfo-pijl{ font-size:13px; }

/* --------------------------------------------------- 4. subcategorierij */

.avd-subrij{ display:flex; align-items:center; gap:10px; }
.avd-subpillen{
	display:flex; gap:10px; flex:1 1 auto; min-width:0;
	overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none;
	padding:2px 0; scroll-padding-left:2px;
}
.avd-subpillen::-webkit-scrollbar{ height:0; }
.avd-subpil{
	flex:none; white-space:nowrap; background:#fff;
	border:1px solid var(--avd-pilrand); border-radius:99px;
	padding:11px 20px; font-size:15px; font-weight:600;
	color:var(--avd-petrol); text-decoration:none;
}
.avd-subpil:hover{ border-color:var(--avd-petrol); background:var(--avd-licht); color:var(--avd-petrol); text-decoration:none; }

.avd-archief .avd-subpijl{
	flex:none; width:42px; height:42px; padding:0; line-height:1;
	border:1px solid var(--avd-pilrand) !important; border-radius:99px;
	background:#fff !important; color:var(--avd-petrol) !important;
	display:flex; align-items:center; justify-content:center;
	font-size:17px; font-family:inherit; font-weight:400;
	text-transform:none !important; letter-spacing:0; cursor:pointer;
}
.avd-archief .avd-subpijl:hover{ border-color:var(--avd-petrol) !important; background:var(--avd-licht) !important; }
.avd-archief .avd-subpijl[hidden]{ display:none !important; }

@media (max-width:1024px){
	/* 5 augustus 2026: overflow-x toegevoegd. De rij loopt met de negatieve marge
	   door tot de schermrand, zodat je ziet dat er meer staat, en de vervaging
	   erachter (de ::after verderop) hangt daar nog eens 15px buiten. Samen maakte
	   dat de hele pagina 15px breder dan het scherm: rechtsboven een witte strook
	   en je kon de pagina heen en weer vegen. Clip knipt dat af zonder een
	   schuifvlak te maken, dus plakkende elementen blijven gewoon werken. */
	.avd-subrij{ margin-right:-15px; overflow-x:clip; }
	.avd-subpillen{ padding-right:15px; }
	.avd-subpil{ padding:10px 17px; font-size:14.5px; }
	.avd-archief .avd-subpijl{ display:none !important; }
}

/* ------------------------------------------------------- 5. sorteerbalk */

.avd-sorteerbalk{
	display:flex; align-items:center; justify-content:space-between; gap:20px;
	padding-bottom:16px;
}
.avd-archief .avd-sorteer{ display:flex; align-items:center; gap:10px; margin:0; }
.avd-archief .avd-sorteer label{ font-size:14.5px; color:#5b7480; margin:0; font-weight:400; }
.avd-archief .avd-sorteer select.orderby{
	height:38px; width:auto; max-width:none;
	border:1px solid var(--avd-rand); border-radius:5px; padding:0 10px;
	font-size:14.5px; font-family:inherit; color:var(--avd-inkt); background:#fff; cursor:pointer;
}
.avd-teller{ font-size:14.5px; color:#5b7480; }

@media (max-width:1024px){
	.avd-sorteerbalk{ display:none !important; }
}

/* ---------------------------------------------------------- 6. de kaart */

.avd-kaart{
	border:1px solid var(--avd-lijn); border-radius:8px; background:#fff;
	overflow:hidden; height:100%;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.avd-kaart:hover{ border-color:var(--avd-rand); box-shadow:0 2px 10px rgba(13,42,53,.08); }

.avd-fotovlak{ position:relative; }
.avd-fotovlak .elementor-widget-container,
.avd-fotovlak img{ margin:0; }
.avd-fotovlak img{
	max-height:166px; width:auto; height:auto; max-width:100%;
	object-fit:contain; margin-inline:auto;
}

.avd-fotovlak .onsale{ display:none !important; }

.avd-kaarttitel a,
.avd-kaarttitel .elementor-heading-title{
	font-size:14.5px; line-height:1.4; font-weight:600;
	color:var(--avd-petrol); text-decoration:none;
	display:block; min-height:41px;
}
.avd-kaarttitel a:hover{ text-decoration:underline; }

.avd-kaartprijs .price,
.avd-kaartprijs{ font-size:17px; font-weight:700; color:var(--avd-inkt); line-height:1.3; margin:0; }
.avd-kaartprijs del{ font-size:13.5px; color:#8ba3ac; font-weight:400; text-decoration:line-through; margin-right:7px; opacity:1; }
.avd-kaartprijs ins{ text-decoration:none; background:none; font-weight:700; color:var(--avd-inkt); }
.avd-kaartprijs .eubaprdi-base-price{
	display:block; margin-top:2px;
	font-size:12.5px; font-weight:400; color:var(--avd-grijs);
}
.avd-kaartprijs .eubaprdi-base-price:empty{ display:none; }
.avd-kaartprijs .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.avd-chip{
	display:inline-block; background:#fdecea; color:var(--avd-rood);
	font-size:12px; font-weight:600; padding:3px 7px; border-radius:3px;
}

.avd-kaart .avd-kknop,
.avd-kaart a.button.avd-kknop{
	height:44px; border-radius:5px; font-size:14.5px; font-weight:600;
}

/* --------------------------------------------------------- 7. paginering */

.avd-lijst .elementor-pagination{
	display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
	padding-top:12px; margin:0;
}
.avd-lijst .elementor-pagination .page-numbers{
	height:40px; min-width:40px; padding:0 12px; margin:0;
	border:1px solid var(--avd-rand); border-radius:5px;
	display:flex; align-items:center; justify-content:center;
	font-size:14.5px; font-weight:500; color:var(--avd-petrol);
	text-decoration:none; background:#fff;
}
.avd-lijst .elementor-pagination .page-numbers:hover{ background:var(--avd-licht); }
.avd-lijst .elementor-pagination .page-numbers.current{
	background:var(--avd-petrol); border-color:var(--avd-petrol); color:#fff; font-weight:600;
}
.avd-lijst .elementor-pagination .page-numbers.dots{
	border:0; background:none; min-width:24px; padding:0; color:#8ba3ac;
}
.avd-lijst .elementor-pagination .next,
.avd-lijst .elementor-pagination .prev{ min-width:92px; padding:0 14px; }

.avd-paginalabel{ font-size:13.5px; color:var(--avd-grijs); text-align:center; }

@media (min-width:1025px){
	.avd-paginalabel{ display:none; }
}
@media (max-width:1024px){
	.avd-lijst .elementor-pagination{ gap:6px; }
	.avd-lijst .elementor-pagination .page-numbers{ height:44px; min-width:44px; padding:0 6px; }
	.avd-lijst .elementor-pagination .page-numbers.dots{ min-width:18px; padding:0; }
	.avd-lijst .elementor-pagination .next,
	.avd-lijst .elementor-pagination .prev{ min-width:44px; padding:0; }
}

/* ----------------------------------------------------------- 8. SEO-blok */

.avd-seo{
	margin-top:20px; padding-top:32px; border-top:1px solid var(--avd-lijn);
	max-width:80ch;
	scroll-margin-top:90px;
}
.avd-seo h2{ font-size:26px; line-height:1.2; font-weight:600; color:var(--avd-petrol); margin:0 0 18px; }
.avd-seo h3{ font-size:19px; line-height:1.3; font-weight:600; color:var(--avd-petrol); margin:28px 0 8px; }
.avd-seo p{ font-size:16px; line-height:1.7; color:var(--avd-tekst); margin:0 0 18px; }
.avd-seo ul,.avd-seo ol{ font-size:16px; line-height:1.7; color:var(--avd-tekst); margin:0 0 18px 18px; }
.avd-seo a{ color:var(--avd-petrol); text-decoration:underline; }

@media (max-width:1024px){
	.avd-seo{ padding-top:26px; }
	.avd-seo h2{ font-size:22px; line-height:1.25; }
	.avd-seo h3{ font-size:17.5px; }
	.avd-seo p,.avd-seo ul,.avd-seo ol{ font-size:15.5px; }
}

/* ------------------------------------------------- 9. filters op desktop */

/* Let op: al deze regels staan bewust achter een mediaquery voor desktop.
   Onder 1025px is precies dezelfde HTML het filterpaneel dat achter de knop
   "Filter en sorteer" opent, en dat paneel moet ongewijzigd blijven. */
@media (min-width:1025px){

	.avd-filterkolom .wpc-filters-main-wrap{ margin:0; }
	.avd-filterkolom .wpc-filters-widget-content{ padding:0; }
	/* De kop "Filter" en het kruisje horen bij het paneel op mobiel, niet in de kolom. */
	.avd-filterkolom .wpc-filter-set-widget-title,
	.avd-filterkolom .wpc-widget-close-container,
	.avd-filterkolom .wpc-filters-widget-top-container:empty{ display:none; }

	.avd-filterkolom .wpc-filters-widget-wrapper{ display:flex; flex-direction:column; gap:16px; }
	.avd-filterkolom .wpc-filters-section{
		border:1px solid var(--avd-lijn2); border-radius:8px; overflow:hidden;
		background:#fff; margin:0; padding:0;
	}
	.avd-filterkolom .wpc-filter-header{
		padding:0; margin:0; border-bottom:1px solid var(--avd-lijn2); background:#fff;
	}
	.avd-filterkolom .wpc-filter-title{ margin:0; padding:0; }
	.avd-filterkolom .wpc-filter-title button{
		display:flex; align-items:center; justify-content:space-between; gap:10px;
		width:100%; padding:14px 16px; margin:0; height:auto; line-height:1.3;
		background:none !important; border:0 !important; border-radius:0;
		font-family:inherit; font-size:15px; font-weight:600; color:var(--avd-petrol) !important;
		text-transform:none !important; letter-spacing:0; text-align:left; cursor:pointer;
	}
	.avd-filterkolom .wpc-filter-title button:hover{ background:var(--avd-licht) !important; }
	.avd-filterkolom .wpc-wrap-icons{ font-size:15px; font-weight:600; color:var(--avd-petrol); }
	.avd-filterkolom .wpc-open-icon{ color:var(--avd-grijs); flex:none; }
	.avd-filterkolom .wpc-filter-content{ padding:14px 16px 16px; }
	.avd-filterkolom .wpc-filters-ul-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
	.avd-filterkolom .wpc-filters-ul-list li{ margin:0; padding:0; }
	.avd-filterkolom .wpc-term-item-content-wrapper{ display:flex; align-items:center; gap:10px; }
	.avd-filterkolom .wpc-filters-ul-list label{ font-size:14.5px; line-height:1.35; color:var(--avd-tekst); margin:0; cursor:pointer; }
	.avd-filterkolom input[type="checkbox"]{ width:16px; height:16px; margin:0; flex:none; accent-color:var(--avd-petrol); }

	/* De knop van de plugin heet "Meer zien"; wij zetten er een chevron achter. Het paneel op mobiel blijft ongemoeid. */
	.avd-filterkolom .wpc-see-more-control{ font-size:0 !important; line-height:0; display:inline-block; margin-top:12px; text-decoration:none; }
	.avd-filterkolom .wpc-see-more-control::after{
		content:"Meer zien \203A"; font-size:14px; line-height:1.4; font-weight:500; color:var(--avd-petrol);
	}
	.avd-filterkolom .wpc-see-less-control{ font-size:14px; font-weight:500; color:var(--avd-petrol); margin-top:12px; display:inline-block; }

	/* Prijs: twee vakjes met een euroteken, het woord "tot" ertussen en een slanke slider. */
	.avd-filterkolom .wpc-filters-range-wrapper{ display:flex; align-items:center; gap:8px; }
	.avd-filterkolom .wpc-filters-range-column{
		position:relative; display:flex; align-items:center;
		width:88px; height:36px; box-sizing:border-box; flex:none;
		border:1px solid var(--avd-rand); border-radius:5px; padding:0 9px 0 22px;
	}
	.avd-filterkolom .wpc-filters-range-column::before{
		content:"\20AC"; position:absolute; left:9px; top:50%; transform:translateY(-50%);
		font-size:14px; color:#8ba3ac; pointer-events:none;
	}
	.avd-filterkolom .wpc-filters-range-min-column::after{
		content:"tot"; position:absolute; right:-26px; top:50%; transform:translateY(-50%);
		font-size:14px; color:#8ba3ac;
	}
	.avd-filterkolom .wpc-filters-range-wrapper{ gap:34px; }
	.avd-filterkolom .wpc-filters-range-column input{
		border:0 !important; outline:0; background:transparent !important; box-shadow:none !important;
		width:100% !important; min-height:0 !important; height:34px !important; line-height:34px !important;
		padding:0 !important; margin:0 !important;
		font-family:inherit; font-size:14.5px !important; color:var(--avd-inkt) !important;
	}
	.avd-filterkolom .wpc-range-clear{ display:none !important; }
	/* De plug-in houdt rechts 40px vrij voor het wis-kruisje; dat kruisje
	   staat hier uit, dus die ruimte mag weg (anders valt "149" buiten beeld). */
	.avd-productarchief .avd-filterkolom .wpc-filters-range-column input{
		padding-right:0 !important; padding-left:0 !important;
	}
	.avd-filterkolom .wpc-filters-range-slider-wrapper{ margin:14px 3px 0; }
	.avd-filterkolom .wpc-filters-range-slider-control{
		position:relative; height:4px; background:var(--avd-lijn2); border:0; border-radius:99px;
	}
	.avd-filterkolom .ui-slider-range{ background:var(--avd-petrol) !important; border:0; border-radius:99px; height:4px; }
	.avd-filterkolom .ui-slider-handle{
		width:16px; height:16px; top:-6px; margin-left:-8px;
		background:#fff !important; border:2px solid var(--avd-petrol) !important; border-radius:99px;
		box-sizing:border-box; outline:0;
	}
	.avd-filterkolom .avd-toepassen{
		display:block; width:100%; height:36px; margin-top:14px; padding:0;
		border:1px solid var(--avd-petrol) !important; border-radius:5px;
		background:#fff !important; color:var(--avd-petrol) !important;
		font-family:inherit; font-size:14.5px; font-weight:600;
		text-transform:none !important; letter-spacing:0; cursor:pointer; line-height:1;
	}
	.avd-filterkolom .avd-toepassen:hover{ background:var(--avd-licht) !important; }

}

.avd-extrafilters{
	border:1px dashed var(--avd-rand); border-radius:8px; padding:14px 16px;
	font-size:13.5px; line-height:1.55; color:var(--avd-grijs);
}
.avd-extrafilters p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--avd-grijs); }

/* --------------------------------- 10. meelopende filterbalk op mobiel */

@media (max-width:1024px){

	/* Alleen de knop plakt. De kolom en de omhulsels van de filterwidget
	   verdwijnen als vakje (display:contents), zodat de knop rechtstreeks in
	   de pagina hangt: dan heeft hij de hele pagina om in mee te lopen en
	   blijft het filterpaneel buiten zijn stapelcontext. Zou de kolom zelf
	   plakken, dan zou dat paneel (position:fixed) binnen die balk blijven
	   hangen: onder de donkere laag en onder de kopbalk. */
	.avd-filterkolom,
	.avd-filterkolom > .avd-filters,
	.avd-filterkolom > .avd-filters > .elementor-widget-container,
	.avd-filterkolom .widget_wpc_filters_widget,
	.avd-filterkolom .wpc-filters-main-wrap{
		display:contents !important;
	}
	/* Het aantal producten loopt gewoon met de pagina mee; het hoort niet in
	   de plakkende balk. */
	.avd-filterkolom .avd-teller{
		display:block; text-align:right; font-size:13.5px; color:var(--avd-grijs);
	}
	.avd-filterkolom > .avd-tellermob{ margin-top:14px; }
	/* Filter Everything verbergt deze knop standaard; in blok 21 werd hij door
	   JavaScript verplaatst. In dit sjabloon staat hij gewoon in de balk. */
	.avd-filterkolom .wpc-filters-open-button-container{
		display:block !important; width:100%; margin:6px 0 8px !important;
		position:sticky !important;
		top:calc(var(--avd-catbalk-top,0px) + var(--avd-verzendbalk-h,0px) + 6px) !important;
		z-index:5;
		padding:0 !important;
		box-sizing:border-box;
		background:transparent !important;
	}
	.avd-filterkolom .wpc-filters-open-button-container a.wpc-filters-open-widget{
		display:flex; align-items:center; justify-content:center; gap:10px;
		width:100%; height:48px; box-sizing:border-box;
		border:1.5px solid var(--avd-petrol) !important; border-radius:8px;
		background:#fff !important; color:var(--avd-petrol) !important;
		font-size:16px; font-weight:600; text-transform:none !important; letter-spacing:0;
	}
	.avd-filterkolom .wpc-filters-open-button-container a.wpc-filters-open-widget:hover,
	.avd-filterkolom .wpc-filters-open-button-container a.wpc-filters-open-widget:active{ background:var(--avd-licht) !important; }
	.avd-filterkolom .wpc-button-inner{
		display:flex; align-items:center; justify-content:center; gap:10px;
	}
	/* Alleen het eigen icoontje in de knop zelf verbergen. Deze regel gold
	   eerder voor de hele filterkolom en haalde daarmee ook het kruisje weg
	   waarmee je het filterpaneel sluit. */
	.avd-filterkolom .wpc-filters-open-button-container > a .wpc-open-icon,
	.avd-filterkolom .wpc-filters-open-button-container > a .wpc-icon-html-wrapper{
		display:none !important;
	}
	.avd-filterkolom .wpc-button-inner::before{
		content:""; flex:none; width:18px; height:18px;
		background:no-repeat center/18px 18px;
		background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23126985' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5h17l-6.6 7.6V20l-3.8-2.2v-5.2z'/%3E%3C/svg%3E");
	}
	.avd-filterkolom .wpc-filters-button-text{ font-size:0 !important; color:transparent !important; }
	.avd-filterkolom .wpc-filters-button-text::after{
		content:"Filter en sorteer"; font-size:16px; font-weight:600; color:var(--avd-petrol) !important;
	}
	/* De filterlijst zelf hoort op mobiel alleen in het paneel te staan. */
	/* De witte achtergrond met blur staat op een ::before en niet op de balk
	   zelf. backdrop-filter maakt van een element namelijk een houvast voor
	   alles wat position:fixed is - en dan komt het filterpaneel van Filter
	   Everything niet meer los van deze balk. */
	/* Geen witte laag achter de knop: de pagina mag er zichtbaar onderdoor
	   schuiven. De knop zelf is wel dicht. */
	.avd-extrafilters{ display:none; }
}

@media (min-width:1025px){
	.avd-filterkolom .wpc-filters-open-button-container{ display:none !important; }
	.avd-filterkolom .avd-teller{ display:none; }
}


/* --------------------------------------------------- 11. kaart, aanvullend
   Deze regels horen bij het Loop Item-sjabloon "AVD Productkaart".
   -------------------------------------------------------------------------- */

.avd-kaart{ display:flex; flex-direction:column; }
.avd-kaart > .avd-kaartbody{ flex:1 1 auto; }
.avd-kaart .avd-prijsblok{ margin-top:auto; }

.avd-fotovlak{ position:relative; overflow:hidden; }
.avd-fotovlak > .avd-fotoh{ width:100%; display:flex; align-items:center; justify-content:center; }
.avd-fotovlak .elementor-widget-container{ width:100%; display:flex; align-items:center; justify-content:center; }

a.avd-kaartfoto{ display:block; line-height:0; max-width:100%; }
a.avd-kaartfoto img{
	max-height:166px; max-width:calc(100% - 20px); width:auto; height:auto;
	object-fit:contain; margin:0 auto; display:block;
}

/* Het lint "Extra voordeel" komt uit Product Badges for WooCommerce. Kleur,
   vorm en plek zijn een instelling van die plug-in; daar blijven we vanaf.
   We zorgen alleen dat het fotovlak het houvast is. */
.avd-fotovlak .pbfw_square_data{ margin:0; }

.avd-kaart .onsale{ display:none !important; }

.avd-kaartprijs .elementor-widget-container > .price,
.avd-kaartprijs .price{ margin:0; font-size:17px; font-weight:700; color:var(--avd-inkt); line-height:1.3; }
.avd-chiph:empty{ display:none; }
.avd-knoph .elementor-widget-container{ display:flex; }
.avd-knoph a.button{ width:100%; }

/* Geen "Vorige" op pagina 1: Elementor zet die dan als span neer. */
.avd-lijst .elementor-pagination span.page-numbers.prev{ display:none !important; }

@media (max-width:1024px){
	a.avd-kaartfoto img{ max-height:132px; max-width:calc(100% - 16px); }
	.avd-kaartprijs .price{ font-size:16.5px; }
	.avd-kaarttitel a,
	.avd-kaarttitel .elementor-heading-title{ font-size:14px; min-height:39px; }
	.avd-lijst .elementor-pagination .next,
	.avd-lijst .elementor-pagination .prev{ font-size:0; }
	.avd-lijst .elementor-pagination .next::after{ content:"\203A"; font-size:15px; }
	.avd-lijst .elementor-pagination .prev::after{ content:"\2039"; font-size:15px; }
}


/* ---------------------------------------- 12. prijs op de kaart, aanvullend
   Shoptimizer kleurt elke .price oranje en de plug-in EU Base Price zet de
   prijs per kilo achter de prijs. Op de kaart hoort hij eronder te staan.
   Blok 26 uit style.css maakt daarnaast een kopie in .avd-perkg; die tonen
   we niet nog een keer.
   -------------------------------------------------------------------------- */

.avd-kaart .avd-kaartprijs .price,
.avd-kaart .avd-kaartprijs .price bdi,
.avd-kaart .avd-kaartprijs .price > .woocommerce-Price-amount,
.avd-kaart .avd-kaartprijs .price ins,
.avd-kaart .avd-kaartprijs .price ins bdi{
	color:var(--avd-inkt) !important;
	font-size:17px; font-weight:700;
}
.avd-kaart .avd-kaartprijs .price del,
.avd-kaart .avd-kaartprijs .price del bdi,
.avd-kaart .avd-kaartprijs .price del .woocommerce-Price-amount{
	color:#8ba3ac !important; font-size:13.5px !important; font-weight:400 !important;
	text-decoration:line-through; margin-right:7px; opacity:1;
}
.avd-kaart .avd-kaartprijs .price ins{ text-decoration:none; background:none; }
/* Twee bronnen voor de prijs per kilo: de plug-in EU Base Price
   (.eubaprdi-base-price) en blok 23 uit functions.php, dat het gewicht uit de
   titel haalt (.avd-perkg-kaart). Samen dekken ze alle producten. Ze staan
   nooit tegelijk op een kaart. .avd-perkg is de kopie die het script op de
   productpagina maakt; die hoort hier niet. */
.avd-kaart .avd-kaartprijs .avd-perkg{ display:none !important; }
.avd-kaart .avd-kaartprijs .avd-perkg-kaart{
	display:block !important; margin:2px 0 0 !important;
	font-size:12.5px !important; font-weight:400 !important; color:var(--avd-grijs) !important;
	white-space:normal !important;
}
.avd-kaart .avd-kaartprijs .avd-perkg-kaart *{
	font-size:12.5px !important; font-weight:400 !important; color:var(--avd-grijs) !important;
}
.avd-kaart .avd-kaartprijs .eubaprdi-base-price{
	display:block !important; margin:2px 0 0 !important;
	font-size:12.5px !important; font-weight:400 !important; color:var(--avd-grijs) !important;
	white-space:normal;
}
.avd-kaart .avd-kaartprijs .eubaprdi-base-price .woocommerce-Price-amount,
.avd-kaart .avd-kaartprijs .eubaprdi-base-price bdi{
	font-size:12.5px !important; font-weight:400 !important; color:var(--avd-grijs) !important;
}
.avd-kaart .avd-kaartprijs .screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (max-width:1024px){
	.avd-kaart .avd-kaartprijs .price,
	.avd-kaart .avd-kaartprijs .price bdi,
	.avd-kaart .avd-kaartprijs .price > .woocommerce-Price-amount,
	.avd-kaart .avd-kaartprijs .price ins,
	.avd-kaart .avd-kaartprijs .price ins bdi{ font-size:16.5px; }
	.avd-kaart .avd-kaartprijs .eubaprdi-base-price,
	.avd-kaart .avd-kaartprijs .eubaprdi-base-price *{ font-size:12px !important; }
}


/* ------------------------------------- 13. losse eindjes op productarchieven */

/* Het megamenu bevat dezelfde filterset. De knop daarvan hoort op een
   categoriepagina niet in beeld; alleen die in onze balk telt. */
.avd-productarchief .wpc-filters-open-button-container{ display:none !important; }
@media (max-width:1024px){
	.avd-productarchief .avd-filterkolom .wpc-filters-open-button-container{ display:block !important; }
}

/* Bestelknop op de kaart: op mobiel niet over twee regels afbreken. */
.avd-kaart .avd-kknop,
.avd-kaart a.button.avd-kknop{ white-space:nowrap; padding:0 8px !important; gap:6px; }


/* --------------------------------------- 14. kaarten mogen niet uitpuilen
   Een rasteritem heeft standaard min-width:auto. Een lange, niet-afbreekbare
   regel in de kaart (bijvoorbeeld "(vanaf € 10,53 per kilo)") maakte het
   item daardoor breder dan zijn kolom en gaf een horizontale schuifbalk.
   -------------------------------------------------------------------------- */

.avd-lijst .elementor-loop-container > *,
.avd-kaart,
.avd-kaart .avd-kaartbody,
.avd-kaart .avd-prijsblok,
.avd-kaart .avd-kaarttitel,
.avd-kaart .avd-kaartprijs{ min-width:0; }

.avd-kaart .avd-kaartprijs .eubaprdi-base-price{ white-space:normal !important; }
.avd-kaart .avd-kknop,
.avd-kaart a.button.avd-kknop{ overflow:hidden; }


/* Shoptimizer dwingt op 768px twee kolommen af (klasse m-grid-2). Op een
   categoriepagina horen daar drie kolommen te staan, zoals in de opdracht. */
@media (min-width:768px) and (max-width:1024px){
	.avd-productarchief .avd-lijst .elementor-grid{ grid-template-columns:repeat(3,1fr) !important; }
}



/* Zie paginaSmal() in avd-categoriepagina.js */
.avd-lijst .elementor-pagination .page-numbers.avd-nummer-verborgen{ display:none !important; }


/* ==========================================================================
   15. Aanscherpingen na de eerste ronde feedback (4 augustus)
   ========================================================================== */

/* Elementor geeft elke container standaard 10px binnenmarge. Daardoor stonden
   de kop, de intro en het filterblok 10px naar binnen ten opzichte van de
   terugknop en het productraster. Op de categoriepagina hoort alles in
   dezelfde rooilijn te staan. */
.avd-archief > .e-con{ padding-left:0; padding-right:0; }
.avd-kopblok > .elementor-element{ margin-left:0; margin-right:0; }

/* De intro is twee regels; de alinea eronder liet nog ruimte staan waardoor
   het gat naar "Meer informatie" te groot werd. */
/* De widget zet naast de tekst ook lege regels neer. Als flexkolom tellen
   die niet mee, en klopt de hoogte weer met de twee regels tekst. */
.avd-intro{ display:flex; flex-direction:column; }
/* Filter Everything hangt een leeg blokje onder de categorietekst. Het stond
   er altijd al, maar in een flexkolom neemt het wel ruimte in. */
.avd-archief .wpc-custom-selected-terms{ display:none; }
/* Zodra er een filter aanstaat, hoort de bezoeker dat boven de producten te
   zien. Leeg blijft het blok verborgen, anders neemt het ruimte in. */
.avd-archief .wpc-custom-selected-terms:has(.wpc-filter-chips-list li){ display:block; }
.avd-intro .elementor-widget-container{ margin:0; }
.avd-intro .elementor-widget-container > *:last-child,
.avd-intro p:last-child{ margin-bottom:0; }

/* Het pijltje van de sorteerkeuze. Het thema zet appearance:none, waardoor
   het eigen pijltje van de browser verdwijnt. */
.avd-archief .avd-sorteer select.orderby{
	padding-right:32px;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23126985' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 10px center;
	background-size:14px 14px;
}

/* Een pil waar nog geen categorie achter zit: zelfde vorm, geen link. */
.avd-subpil.avd-subpil-zonderlink{ cursor:default; }
.avd-subpil.avd-subpil-zonderlink:hover{ border-color:var(--avd-pilrand); background:#fff; }

/* Het kortingschip staat boven de prijs, zodat de prijzen van alle kaarten
   op dezelfde hoogte blijven staan. */
.avd-kaart .avd-chiph{ line-height:0; }
.avd-kaart .avd-chiph:empty,
.avd-kaart .avd-chiph .elementor-shortcode:empty{ display:none; }
.avd-kaart .avd-chip{ margin:0 0 2px; }

@media (min-width:1025px){

	/* Filter Everything zet zelf nog marges om de blokken; die halen we weg
	   zodat het blok even breed is als de kolom en netjes onder de terugknop
	   begint. */
	.avd-filterkolom .wpc-filters-widget-content,
	.avd-filterkolom .wpc-filters-scroll-container,
	.avd-filterkolom .wpc-filters-widget-wrapper,
	.avd-filterkolom .wpc-filters-main-wrap,
	.avd-filterkolom .widget_wpc_filters_widget,
	.avd-filterkolom .elementor-widget-container{ padding:0; margin:0; }

	.avd-filterkolom .wpc-filter-title button{ padding:13px 16px; font-weight:700; }
	.avd-filterkolom .wpc-wrap-icons{ font-weight:700; }

	/* Minder lucht tussen de merken. */
	.avd-filterkolom .wpc-filter-content{ padding:12px 16px 14px; }
	.avd-filterkolom .wpc-filters-ul-list{ gap:9px; }
	.avd-filterkolom .wpc-filters-ul-list li,
	.avd-filterkolom .wpc-term-item-content-wrapper{ min-height:0; padding:0; }
	.avd-filterkolom .wpc-filters-ul-list label{ line-height:1.25; }
	.avd-filterkolom .wpc-see-more-control{ margin-top:10px; }
	.avd-filterkolom .wpc-filters-section{ margin-bottom:0; }
	.avd-filterkolom .wpc-filters-widget-wrapper{ display:flex; flex-direction:column; gap:16px; }
}


/* ==========================================================================
   16. Tweede ronde feedback (4 augustus)
   ========================================================================== */

/* Het woord "Vanaf" is bijzaak, het bedrag is de informatie. */
.avd-kaart .avd-kaartprijs .price .avd-vanaf{
	font-size:14px !important; font-weight:400 !important; color:#5b7480 !important;
	margin-right:2px;
}

/* Het kortingschip zit in de prijsregel zelf (zie avd_cat_chip_in_prijs in
   avd-categoriepagina.php) en staat dus altijd direct achter het bedrag. */
.avd-kaart .avd-kaartprijs .price .avd-chip{
	display:inline-block; margin-left:7px; vertical-align:2px;
	line-height:1; white-space:nowrap;
}

/* De prijs per kilo helemaal in het grijs, ook het bedrag zelf. */
.avd-kaart .avd-kaartprijs .avd-perkg-kaart bdi,
.avd-kaart .avd-kaartprijs .avd-perkg-kaart .woocommerce-Price-amount,
.avd-kaart .avd-kaartprijs .avd-perkg-kaart .woocommerce-Price-currencySymbol,
.avd-kaart .avd-kaartprijs .eubaprdi-base-price bdi,
.avd-kaart .avd-kaartprijs .eubaprdi-base-price .woocommerce-Price-currencySymbol{
	color:var(--avd-grijs) !important;
}

@media (min-width:1025px){

	/* Filter Everything zet 5px boven en onder elke keuzeregel. Daardoor
	   stonden de merken veel te ver uit elkaar. */
	.avd-filterkolom .wpc-term-item-content-wrapper{ padding:0 !important; }
	.avd-filterkolom .wpc-filters-ul-list{ gap:12px; }
	.avd-filterkolom .wpc-filters-ul-list label{ font-size:14.5px !important; }
	.avd-filterkolom .wpc-filters-section{ margin:0 !important; }
	.avd-filterkolom .wpc-filter-content{ padding:14px 16px 16px; }

	/* De meer/minder-knoppen dikgedrukt. */
	.avd-filterkolom .wpc-see-more-control::after,
	.avd-filterkolom .wpc-see-less-control{ font-weight:700; }
}


/* De prijsregel krijgt een vaste regelhoogte. Zonder dat is een kaart met
   "Vanaf" ervoor twee pixel korter dan een kaart zonder, en beginnen de
   prijzen in een rij net niet op dezelfde hoogte. */
.avd-kaart .avd-kaartprijs .price{ line-height:22px !important; }
/* Vaste hoogte voor het prijsblok: prijsregel 22px, tussenruimte 2px,
   regel met de prijs per kilo 18px. Zo begint de prijs op elke kaart in de
   rij op exact dezelfde hoogte, ook als er geen prijs per kilo is. */
.avd-kaart .avd-kaartprijs{ height:42px; }
.avd-kaart .avd-kaartprijs .avd-perkg-kaart,
.avd-kaart .avd-kaartprijs .eubaprdi-base-price{ line-height:18px !important; }


/* ==========================================================================
   17. Derde ronde feedback (4 augustus)
   ========================================================================== */

/* De categorietekst kreeg de petrolkleur van het thema mee (een inline regel
   op .term-description p). Op de categoriepagina hoort hij gewoon in de
   leeskleur te staan. Grootte en kleur van de intro staan dus hier, niet in
   Elementor: de themaregel wint het daar toch van. */
.avd-archief .avd-intro .term-description,
.avd-archief .avd-intro .term-description p{
	color:var(--avd-tekst) !important;
	font-size:16.5px !important;
	line-height:1.6 !important;
}
.avd-archief .avd-intro .term-description a{ color:var(--avd-petrol) !important; }

/* Minder lucht tussen de oude en de nieuwe prijs. */
.avd-kaart .avd-kaartprijs .price del,
.avd-kaart .avd-kaartprijs .price del bdi,
.avd-kaart .avd-kaartprijs .price del .woocommerce-Price-amount{ margin-right:2px; }

@media (max-width:1024px){
	.avd-archief .avd-intro .term-description,
	.avd-archief .avd-intro .term-description p{ font-size:15.5px !important; }
	/* Op een smalle kaart is naast de prijs weinig ruimte; het chipje mag dan
	   iets krapper. */
	.avd-kaart .avd-kaartprijs .price .avd-chip{ margin-left:5px; padding:2px 5px; }
}


/* ============================================================
   18. DE PRIJSREGEL EN HET KORTINGSCHIPJE
   De prijs is een flexregel. De volgorde is altijd: 'Vanaf', de oude prijs,
   het bedrag en dan het kortingschipje. De prijs per kilo begint altijd op
   een nieuwe regel. Zo staat het chipje op elke kaart op dezelfde plek en
   beginnen alle prijzen in een rij op dezelfde hoogte.
   Op een smalle kaart (telefoon, ongeveer 167px breed) past het chipje niet
   naast het bedrag. Daar zakt het onder de prijs per kilo, precies zoals in
   het mobiele ontwerp. We meten de kaart zelf en niet het scherm, zodat dit
   ook klopt op andere plekken waar deze kaart staat.
   ============================================================ */

/* De containermaat hangt aan het blokje om de prijs, niet aan de kaart zelf.
   Op de kaart zorgde container-type in het Elementor-raster voor een lege
   strook van bijna 500px onder de paginanummers: het raster rekende de
   kaarthoogte dan anders uit. Op dit kleinere blokje speelt dat niet. */
.avd-prijsblok,
.woolentor-product-content{ container-type:inline-size; container-name:avdkaart; }

.avd-kaart .avd-kaartprijs .price,
.woolentor-product-card .woolentor-product-price{
	display:flex; flex-wrap:wrap; align-items:baseline; align-content:flex-start;
	gap:0 !important;
}
.avd-kaart .avd-kaartprijs .price > del,
.woolentor-product-card .woolentor-product-price > del{ order:1; }

.avd-kaart .avd-kaartprijs .price > ins,
.avd-kaart .avd-kaartprijs .price > .woocommerce-Price-amount,
.woolentor-product-card .woolentor-product-price > ins,
.woolentor-product-card .woolentor-product-price > .woocommerce-Price-amount{ order:2; }

.avd-kaart .avd-kaartprijs .price > .avd-chip,
.woolentor-product-card .woolentor-product-price > .avd-chip{ order:3; }

.avd-kaart .avd-kaartprijs .price > .avd-perkg-kaart,
.avd-kaart .avd-kaartprijs .price > .eubaprdi-base-price,
.woolentor-product-card .woolentor-product-price > .avd-perkg-kaart,
.woolentor-product-card .woolentor-product-price > .eubaprdi-base-price{
	order:4; flex:0 0 100%;
}

/* ============================================================
   19. DEZELFDE PRODUCTKAART OP ANDERE PLEKKEN
   De dierpagina's en een aantal andere pagina's tonen producten in een
   raster van ShopLentor. Die kaarten krijgen hier exact dezelfde opmaak als
   de kaart op de categoriepagina: dezelfde rand, dezelfde foto-hoogte,
   dezelfde titel, prijsregel en knop. Zo herken je de kaart overal.
   ============================================================ */

.woolentor-product-card{
	border:1px solid var(--avd-lijn) !important;
	border-radius:8px !important;
	background:#fff !important;
	box-shadow:none !important;
	overflow:hidden; height:100%;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.woolentor-product-card:hover{
	border-color:var(--avd-rand) !important;
	box-shadow:0 2px 10px rgba(13,42,53,.08) !important;
}
.woolentor-product-card .woolentor-grid-view-content{
	display:flex; flex-direction:column; height:100%;
}

/* --- de foto */
.woolentor-product-card .woolentor-product-image{
	height:auto !important; min-height:0 !important;
	aspect-ratio:auto !important; background:#fff !important;
	border-radius:0 !important;
}
.woolentor-product-card .woolentor-product-image > a{
	position:relative; display:flex; align-items:center; justify-content:center;
	height:186px; padding:10px; box-sizing:border-box;
}
/* Het lint "Extra voordeel" hangt over de foto heen en mag de foto niet
   opzij duwen. */
.woolentor-product-card .woolentor-product-image .pbfw_square_data{
	position:absolute; top:0; left:0; width:100%; height:100%;
	pointer-events:none;
}
.woolentor-product-card .woolentor-product-image img{
	max-height:166px !important; max-width:100% !important;
	width:auto !important; height:auto !important;
	object-fit:contain !important;
}

/* --- de tekst onder de foto */
.woolentor-product-card .woolentor-product-content{
	display:flex; flex-direction:column; gap:10px; flex:1;
	padding:14px !important;
}
/* Sommige blokken staan gecentreerd ingesteld; de kaart is overal links
   uitgelijnd, net als op de categoriepagina. */
.woolentor-product-card .woolentor-product-content,
.woolentor-product-card .woolentor-product-title,
.woolentor-product-card .woolentor-product-title a,
.woolentor-product-card .woolentor-product-price,
.woolentor-product-card .woolentor-product-price span{ text-align:left !important; }

.woolentor-product-card .woolentor-product-title{ margin:0 !important; }
.woolentor-product-card .woolentor-product-title a{
	font-size:14.5px !important; line-height:1.4 !important; font-weight:600 !important;
	color:var(--avd-petrol) !important; text-decoration:none;
	display:block; min-height:41px;
}
.woolentor-product-card .woolentor-product-title a:hover{ text-decoration:underline; }

/* --- de prijs */
.woolentor-product-card .woolentor-product-price{
	margin:auto 0 0 !important; height:42px !important; min-height:0 !important;
	font-size:17px !important; font-weight:700 !important;
	color:var(--avd-inkt) !important; line-height:1.3 !important;
}
.woolentor-product-card .woolentor-product-price del,
.woolentor-product-card .woolentor-product-price del *{
	font-size:13.5px !important; font-weight:400 !important;
	color:#8ba3ac !important; text-decoration:line-through; opacity:1;
}
.woolentor-product-card .woolentor-product-price del{ margin-right:7px; }
.woolentor-product-card .woolentor-product-price ins,
.woolentor-product-card .woolentor-product-price ins *,
.woolentor-product-card .woolentor-product-price > .woocommerce-Price-amount,
.woolentor-product-card .woolentor-product-price > .woocommerce-Price-amount *{
	font-size:17px !important; font-weight:700 !important;
	color:var(--avd-inkt) !important;
	text-decoration:none; background:none;
}
.woolentor-product-card .woolentor-product-price .avd-vanaf,
.woolentor-product-card .woolentor-product-price .avd-vanaf *{
	font-size:14px !important; font-weight:400 !important; color:#5b7480 !important;
}
.woolentor-product-card .woolentor-product-price .avd-vanaf{ margin-right:2px; }
.woolentor-product-card .woolentor-product-price .avd-perkg-kaart,
.woolentor-product-card .woolentor-product-price .eubaprdi-base-price,
.woolentor-product-card .woolentor-product-price .avd-perkg-kaart *,
.woolentor-product-card .woolentor-product-price .eubaprdi-base-price *{
	font-size:12.5px !important; font-weight:400 !important;
	color:var(--avd-grijs) !important; white-space:normal !important;
}
.woolentor-product-card .woolentor-product-price .avd-perkg-kaart,
.woolentor-product-card .woolentor-product-price .eubaprdi-base-price{ margin-top:2px !important; }
.woolentor-product-card .woolentor-product-price .avd-perkg{ display:none !important; }

/* ShopLentor heeft een eigen kortingslabel. We gebruiken overal hetzelfde
   chipje, dus dat van ShopLentor zetten we uit. */
.woolentor-product-card .woolentor-discount-percentage{ display:none !important; }
.woolentor-product-card .woolentor-product-price .screen-reader-text{
	position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}

/* --- de knop */
/* De prijs duwt zichzelf naar beneden, de knop volgt er direct onder. Zo
   staan de prijzen in een rij altijd op dezelfde hoogte, ook als de ene
   titel twee regels heeft en de andere drie. */
.woolentor-product-card .woolentor-product-actions{ margin-top:0 !important; }
.woolentor-product-card .woolentor-cart-btn,
.woolentor-product-card a.button.woolentor-cart-btn{
	height:44px !important; border:0 !important; border-radius:4px !important;
	font-size:15px !important; font-weight:600 !important;
	white-space:nowrap; padding:0 8px !important; gap:6px; overflow:hidden;
}

/* De containerregels staan bewust achteraan, zodat ze de vaste hoogte uit
   hoofdstuk 19 overschrijven. */

/* Op een smalle kaart is er weinig ruimte naast het bedrag. Het chipje blijft
   daar wel op dezelfde regel staan, maar krap, en het woord "Vanaf" en het
   bedrag gaan een tikje kleiner. Zo blijft de prijsregel een regel en blijft
   het prijsvak overal even hoog. */
@container avdkaart (max-width:160px){

	/* Twee regels passen in 44px, ook met een doorgestreepte prijs erbij. */
	.avd-kaart .avd-kaartprijs{ height:44px; }
	.woolentor-product-card .woolentor-product-price{ height:44px !important; }

	/* Kleinere letters, zodat er zoveel mogelijk naast elkaar past. */
	.avd-kaart .avd-kaartprijs .price,
	.avd-kaart .avd-kaartprijs .price ins,
	.avd-kaart .avd-kaartprijs .price ins *,
	.avd-kaart .avd-kaartprijs .price > .woocommerce-Price-amount,
	.avd-kaart .avd-kaartprijs .price > .woocommerce-Price-amount *,
	.woolentor-product-card .woolentor-product-price,
	.woolentor-product-card .woolentor-product-price ins,
	.woolentor-product-card .woolentor-product-price ins *,
	.woolentor-product-card .woolentor-product-price > .woocommerce-Price-amount,
	.woolentor-product-card .woolentor-product-price > .woocommerce-Price-amount *{
		font-size:16px !important;
	}
	.avd-kaart .avd-kaartprijs .price .avd-vanaf,
	.woolentor-product-card .woolentor-product-price .avd-vanaf{ font-size:13px !important; }
	.avd-kaart .avd-kaartprijs .price del,
	.avd-kaart .avd-kaartprijs .price del *,
	.woolentor-product-card .woolentor-product-price del,
	.woolentor-product-card .woolentor-product-price del *{ font-size:12.5px !important; }
	.avd-kaart .avd-kaartprijs .price del,
	.woolentor-product-card .woolentor-product-price del{ margin-right:4px; }

	/* Het chipje staat naast het bedrag. Past het daar niet, dan zet het
	   script de klasse hieronder en hangt het rechtsonder in het prijsvak, op
	   de regel van de prijs per kilo. Daar staat het buiten de tekstloop, dus
	   het kan nooit een extra regel veroorzaken. */
	.avd-kaart .avd-kaartprijs .price,
	.woolentor-product-card .woolentor-product-price{ position:relative; }
	.avd-kaart .avd-kaartprijs .price > .avd-chip,
	.woolentor-product-card .woolentor-product-price > .avd-chip{
		order:3; margin-left:4px !important; padding:1px 4px; font-size:10.5px;
	}
	.avd-kaart .avd-kaartprijs .price.avd-chip-onder > .avd-chip,
	.woolentor-product-card .woolentor-product-price.avd-chip-onder > .avd-chip{
		position:absolute; right:0; bottom:1px; margin:0 !important; font-size:10px;
	}
	.avd-kaart .avd-kaartprijs .price.avd-chip-onder > .avd-perkg-kaart,
	.avd-kaart .avd-kaartprijs .price.avd-chip-onder > .eubaprdi-base-price,
	.woolentor-product-card .woolentor-product-price.avd-chip-onder > .avd-perkg-kaart,
	.woolentor-product-card .woolentor-product-price.avd-chip-onder > .eubaprdi-base-price{
		padding-right:36px; box-sizing:border-box;
		white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis;
	}
}

/* Een kaart die net wel breed genoeg is houdt het chipje naast het bedrag,
   maar dan iets krapper zodat ook een lange prijs met korting past. */
@container avdkaart (min-width:160.02px) and (max-width:240px){
	.avd-kaart .avd-kaartprijs .price > .avd-chip,
	.woolentor-product-card .woolentor-product-price > .avd-chip{
		margin-left:4px; padding:1px 5px; font-size:11px;
	}
}


/* ============================================================
   20. MOBIEL: STROOK GRATIS VERZENDING, PILLENRIJ EN PAGINERING
   ============================================================ */

@media (max-width:1024px){

	/* De strook met de voortgang naar gratis verzending staat als eerste kind
	   in het inhoudsgebied. Die hoort strak onder de kopbalk te zitten en mee
	   te plakken bij het scrollen. De marge boven haalt de vaste bovenruimte
	   van het inhoudsgebied weg; is de winkelwagen leeg, dan bouwt het andere
	   blok de strook niet en valt alles vanzelf weer op zijn plek. */
	.avd-verzendbalk{
  /* 5 augustus 2026: stond hier als "#content > .avd-verzendbalk" met
     position:sticky. Een sticky element mag zijn eigen blok niet verlaten, dus
     zodra #content ophield - precies waar de footer begint - werd de strook mee
     omhoog geduwd, dwars over de kopbalk heen, en verdween hij uit beeld.
     avd-categoriepagina.js hangt hem nu een niveau hoger, naast #content, zodat
     zijn blok tot onder aan de pagina doorloopt en hij blijft staan.
     De z-index staat onder die van de kopbalk (9), zodat hij daar nooit meer
     overheen kan komen. */
  position:sticky !important; top:var(--avd-catbalk-top,0px) !important;
  z-index:8 !important;
  margin:0 !important;
}

/* De bovenruimte van het inhoudsgebied zat eerst onder de strook (die werd met
   een negatieve marge omhoog getrokken). Nu de strook ernaast hangt, hoort die
   ruimte weg, anders schuift alles 32px omlaag. De klasse zet het script pas na
   het verplaatsen, dus gaat dit nooit mis als het script niet draait. */
html.avd-balk-los #content{
  padding-top:0 !important;
}

	/* Een vervaging aan de rechterkant laat zien dat de rij met
	   subcategorieen verder loopt. Aan het einde van de rij verdwijnt hij. */
	.avd-archief .avd-subrij{ position:relative; }
	.avd-archief .avd-subrij::after{
		content:""; position:absolute; top:0; right:-15px; width:44px; height:100%;
		background:linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 70%);
		pointer-events:none; opacity:1; transition:opacity .2s ease;
	}
	.avd-archief .avd-subrij.avd-eind::after{ opacity:0; }
	.avd-archief .avd-subrij::before{
		content:""; position:absolute; top:50%; right:1px; z-index:2;
		width:9px; height:9px; margin-top:-6px;
		border-top:2px solid var(--avd-pilrand); border-right:2px solid var(--avd-pilrand);
		transform:rotate(45deg); pointer-events:none;
		opacity:1; transition:opacity .2s ease;
	}
	.avd-archief .avd-subrij.avd-eind::before{ opacity:0; }

	/* De paginanummers passen zo op een regel; anders viel de knop "volgende"
	   op een tweede regel en bleef daar een gat onder staan. */
	.avd-lijst .elementor-pagination{ gap:6px; }
	.avd-lijst .elementor-pagination .page-numbers{
		height:40px; min-width:40px; padding:0 6px; margin:0 !important;
	}
	.avd-lijst .elementor-pagination .avd-punten{ min-width:14px; padding:0; }

	/* Het lint "Extra voordeel" is op een kaart van 165px breed te fors. */
	.avd-kaart .pbfw_square_data > div,
	.woolentor-product-card .pbfw_square_data > div{
		padding:5px 9px !important; border-radius:6px !important;
	}
	.avd-kaart .pbfw_square_data span,
	.woolentor-product-card .pbfw_square_data span{
		font-size:9.5px !important; line-height:1.25 !important;
	}
}


/* ============================================================
   14. FILTERS BIJGESCHAAFD - 5 augustus 2026

   Drie dingen, alle drie alleen op desktop (>=1025px), zodat het
   mobiele filterpaneel en de meelopende filterknop uit hoofdstuk 10
   met rust worden gelaten.
   ============================================================ */

/* --- 14a. chips met de actieve filters --- */

/* Variant D, gekozen op 5 augustus. Het zwaarste accent gaat naar WAT er
   aanstaat, want dat is de informatie: een actief filter is een gevulde pil.
   "Alles resetten" is de uitweg en mag rustiger; die staat als onderstreepte
   tekstlink achteraan de rij. Zo onderscheidt hij zich door vorm in plaats van
   door kleur en botst hij niet met de subcategoriepillen erboven, die dezelfde
   ronde vorm hebben.

   Geldt op beide plekken: de rij boven de producten en de rij bovenin het
   filterpaneel op mobiel. Daar was de resetknop oranje, en oranje is op deze
   site de bestelkleur - die hoort niet bij "filters wissen". */

.avd-archief .wpc-custom-selected-terms .wpc-filter-chips-list,
.wpc-filters-main-wrap .wpc-filter-chips-list{
	display:flex; flex-wrap:wrap; align-items:center; gap:8px;
	margin:14px 0 0; padding:0; list-style:none;
}
/* In de subcategorierij staat hij onder de pillen; daar hoort iets meer lucht
   boven, en niets eronder omdat de sorteerbalk zelf al ruimte heeft. */
.avd-subcats .wpc-custom-selected-terms .wpc-filter-chips-list{ margin-top:12px; }

.avd-archief .wpc-custom-selected-terms .wpc-filter-chip,
.wpc-filters-main-wrap .wpc-filter-chip{
	display:inline-flex; align-items:center; margin:0;
}

/* Een actief filter: gevuld, want dit is wat de klant moet zien staan. */
.avd-archief .wpc-custom-selected-terms .wpc-filter-chip a,
.wpc-filters-main-wrap .wpc-filter-chip a{
	display:inline-flex; align-items:center; gap:7px;
	background:var(--avd-petrol) !important;
	border:1px solid var(--avd-petrol) !important;
	border-radius:99px; padding:6px 14px;
	font-size:14px; font-weight:600; line-height:1.3;
	color:#fff !important; text-decoration:none;
}
.avd-archief .wpc-custom-selected-terms .wpc-filter-chip a:hover,
.wpc-filters-main-wrap .wpc-filter-chip a:hover{
	background:#0d5468 !important; border-color:#0d5468 !important; color:#fff !important;
}

/* Het kruisje mag iets rustiger dan het woord ernaast. */
.avd-archief .wpc-custom-selected-terms .wpc-filter-chip a .wpc-chip-remove-icon,
.wpc-filters-main-wrap .wpc-filter-chip a .wpc-chip-remove-icon{ opacity:.85; }

/* "Alles resetten": geen pil maar een tekstlink, en achteraan de rij. */
.avd-archief .wpc-custom-selected-terms .wpc-chip-reset-all,
.wpc-filters-main-wrap .wpc-chip-reset-all{ order:99; }

.avd-archief .wpc-custom-selected-terms .wpc-chip-reset-all a,
.wpc-filters-main-wrap .wpc-chip-reset-all a{
	background:none !important;
	border:0 !important;
	border-radius:0;
	padding:6px 2px;
	color:var(--avd-petrol) !important;
	font-size:14px; font-weight:600;
	text-decoration:underline !important;
	text-underline-offset:3px;
}
.avd-archief .wpc-custom-selected-terms .wpc-chip-reset-all a:hover,
.wpc-filters-main-wrap .wpc-chip-reset-all a:hover{
	background:none !important; color:#0d5468 !important; text-decoration:underline;
}

/* In het filterpaneel op mobiel staat "Verwijder alle filters" al in de blauwe
   kopbalk. Twee keer dezelfde actie vlak onder elkaar leest verwarrend, dus in
   de chiprij van het paneel laten we hem weg. Op de pagina zelf blijft hij wel
   staan: daar is geen kopbalk met zo'n link. */
/* .wpc-inner-widget-chips-wrapper is de chiprij ván het paneel;
   .wpc-custom-selected-terms is die op de pagina. Alleen de eerste. */
.wpc-inner-widget-chips-wrapper .wpc-chip-reset-all{ display:none !important; }

/* Bij een tekstlink hoort geen kruisje. */
.avd-archief .wpc-custom-selected-terms .wpc-chip-reset-all .wpc-chip-remove-icon,
.wpc-filters-main-wrap .wpc-chip-reset-all .wpc-chip-remove-icon{ display:none; }

/* --- 14b. de filterkolom: bewust NIET plakkend --- */

/* Geprobeerd en weer teruggedraaid op 5 augustus. Een plakkende kolom is hier
   alleen mogelijk met een eigen schuifbalk erin, want de kolom is hoger dan
   het scherm: 1895px op hondenbrokken tegen 900px beeldhoogte. Zonder die
   schuifbalk blijft de onderkant onbereikbaar en zie je Prijs nooit meer.
   Mét die schuifbalk krijg je een schuifgebied in een schuifgebied, en dat is
   een bekende ergernis: scroll je boven de filters en je bent onderaan die
   lijst, dan loopt de pagina niet verder.

   Bol, Coolblue en Amazon laten de filterkolom gewoon met de pagina
   meescrollen. Dat doen wij dus ook. Wil je het ooit toch proberen, doe het
   dan pas als de kolom op de drukste pagina binnen het scherm past. */

/* --- 14c. de subcategorierij is en blijft een slider --- */

/* NIET AANPASSEN zonder overleg.

   Ik heb hier op 5 augustus een keer flex-wrap:wrap van gemaakt, omdat de
   laatste pil op desktop middenin een woord werd afgekapt ("Graanvrije
   brokk..."). Dat was een verkeerde conclusie: die rij is bewust een slider,
   en dat afgekapte woord is juist het signaal dat er meer staat. Sean heeft
   dat bevestigd en de omvalregel is er weer uit.

   Het zijwaarts schuiven zelf staat in hoofdstuk 4 (.avd-subpillen met
   overflow-x:auto), de pijlen worden gestuurd door blok 39 in
   avd-categoriepagina.js. Daar hoeft niets aan. */

/* ============================================================
   15. LEGE UITKOMST - 5 augustus 2026
   Hoort bij blok 45 in avd-categoriepagina.js.
   ============================================================ */

.avd-geenresultaat{
	border:1px solid var(--avd-pilrand);
	border-radius:16px;
	background:#fff;
	padding:28px 24px;
	margin:0 0 24px;
	text-align:center;
}
.avd-geenresultaat-kop{
	margin:0 0 6px;
	font-size:18px; font-weight:700;
	color:var(--avd-petrol);
}
.avd-geenresultaat-tekst{
	margin:0 0 18px;
	font-size:15px; color:#333;
}
.avd-geenresultaat-knop{
	display:inline-block;
	background:var(--avd-petrol); border:1px solid var(--avd-petrol);
	color:#fff; text-decoration:none;
	border-radius:8px; padding:11px 22px;
	font-size:15px; font-weight:600;
}
.avd-geenresultaat-knop:hover{ background:#0d5468; border-color:#0d5468; color:#fff; text-decoration:none; }