/*
Theme Name: Shoptimizer Child Theme
Theme URI: 
Description: Child theme of Shoptimizer
Author: CommerceGurus
Author URI: 
Template: shoptimizer
Version: 1.2.2
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ===========================================================================
   AllesVoorDieren.nl - maatwerk en fixes
   ===========================================================================
   Werkwijze:
   - Elke aanpassing krijgt een eigen genummerd blok met datum, probleem en
     oplossing. Zo is later terug te vinden waarom een regel hier staat.
   - Nieuwe fixes onderaan toevoegen en de nummering doorlopen.
   - Een fix die vervalt: nummer laten staan met de notitie VERVALLEN, niet
     hernummeren. Dat houdt verwijzingen elders kloppend.

   INHOUD
   01. Productbadges vallen over het sticky menu
   02. Filters in een eigen box per categorie, met inklapknop
   05. Terugknop, kruimelpad, filterbalk en badge-icoon
   03. Mobiel filterpaneel: kopbalk, sorteren en knop onderin
   06. Filterbalk blijft plakken bij scrollen (mobiel)
   07. Variabele producten: keuze, volgorde en bestelrij
   08. Eigen mobiel menu
   09. Eigen bestelbalk onderaan op de telefoon
   =========================================================================== */


/* ---------------------------------------------------------------------------
   01. Productbadges vallen over het sticky menu
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Plugin:    Product Badges (pbfw)
   Probleem:  De plugin zet z-index:999 rechtstreeks in de HTML van elke badge.
              Het sticky menu heeft z-index:10 op desktop en 9 op mobiel,
              waardoor de badge bij het scrollen over het menu heen schuift.
   Oplossing: De badge terugzetten naar een lage z-index. Hij hoeft alleen
              boven de productafbeelding te staan, niet boven de rest van de
              pagina. !important is nodig omdat de plugin de waarde inline in
              de HTML zet en die anders altijd wint.
   --------------------------------------------------------------------------- */

div[class*="pbfw_"] > div {
	z-index: 1 !important;
}


/* ---------------------------------------------------------------------------
   02. Filters in een eigen box per categorie, met inklapknop
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Plugin:    Filter Everything PRO
   Wens:      Elk filter in een eigen kader met een plus/min-knop, en de kop
              'Filter & Categorieen' in dezelfde stijl erboven.
   Aanpak:    Alle opmaak hangt aan .wpc-filters-section, de container die de
              plugin per filter uitspuugt. Elk filter dat je later aanzet
              krijgt dus vanzelf dezelfde vormgeving, zonder extra CSS.
   Let op 1:  Het inklappen zelf komt van de plugin. Per filter moet in de
              filterset het vinkje 'Vouwen' aanstaan (Filters > Product
              filters). Staat dat uit, dan krijgt het filter wel de box maar
              geen knop. Bij een nieuw filter dus even aanvinken.
   Let op 2:  De kolom eromheen is een Elementor-container met een witte
              achtergrond en afgeronde hoeken. Die zetten we hieronder
              transparant, anders krijg je dozen in een doos. Pas je dat ooit
              in Elementor zelf aan, houd deze regel dan in de gaten.
   Let op 3:  De regels beginnen met .wpc-filters-main-wrap. Dat is geen
              opsmuk: de stylesheet van de plugin wordt na die van dit thema
              ingeladen, dus zonder dat extra niveau wint de plugin.
   --------------------------------------------------------------------------- */

/* De Elementor-kolom waarin de filterwidget staat. Bewust zonder ID-selector,
   zodat het blijft werken als het element in Elementor opnieuw opgebouwd wordt. */
.e-con:has(> .elementor-widget > .elementor-widget-container > .widget_wpc_filters_widget) {
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Elementor zet een inspringing op de widgets in deze kolom; die halen we weg
   zodat de kop en de filterboxen exact even breed zijn. */
.e-con:has(> .elementor-widget > .elementor-widget-container > .widget_wpc_filters_widget) > .elementor-widget,
.e-con:has(> .elementor-widget > .elementor-widget-container > .widget_wpc_filters_widget) > .elementor-widget > .elementor-widget-container {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* De kop 'Filter & Categorieen' hoeft niet boven de kolom te staan; de
   filterboxen spreken voor zich. Verbergen in plaats van verwijderen, zodat
   de kop in Elementor blijft bestaan als je hem ooit terug wilt. */
.e-con:has(> .elementor-widget > .elementor-widget-container > .widget_wpc_filters_widget) > .elementor-widget-heading {
	display: none;
}

/* De box om elk afzonderlijk filter. */
.wpc-filters-main-wrap .wpc-filters-section {
	margin: 0 0 12px !important;
	background: #fff;
	border: 1px solid #dde6ea;
	border-radius: 8px;
	overflow: hidden;
}

/* De kop van de box is bij een inklapbaar filter een knop. De thema-opmaak
   voor knoppen moet daar helemaal af. */
.wpc-filters-main-wrap .wpc-filters-section .wpc-filter-header,
.wpc-filters-main-wrap .wpc-filters-section .wpc-filter-title {
	margin: 0;
	padding: 0;
	font-size: inherit;
}

.wpc-filters-main-wrap .wpc-filters-section .wpc-filter-title button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #126985;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

.wpc-filters-main-wrap .wpc-filters-section .wpc-filter-title button:hover {
	background: #f6f9fa;
	color: #126985;
}

/* Het pictogram rechts. De plugin tekent hier een chevron; die zetten we uit
   en tekenen zelf twee streepjes: een plus als het filter dicht is, een min
   als het open staat. */
.wpc-filters-main-wrap .wpc-filters-section .wpc-open-icon {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	transform: none !important;
}

.wpc-filters-main-wrap .wpc-filters-section .wpc-open-icon:before,
.wpc-filters-main-wrap .wpc-filters-section .wpc-open-icon:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	background: currentColor;
	border-radius: 1px;
	transition: transform .18s ease;
}

.wpc-filters-main-wrap .wpc-filters-section .wpc-open-icon:after {
	transform: rotate(90deg);
}

/* Een open filter toont een minteken. De plugin zet wpc-opened pas als zijn
   JavaScript geladen is; op desktop vangen we dat verderop op. */
.wpc-filters-main-wrap .wpc-filters-section.wpc-opened .wpc-open-icon:after {
	transform: rotate(0deg);
}

/* De inhoud van de box, met een scheidingslijn onder de kop. */
.wpc-filters-main-wrap .wpc-filters-section .wpc-filter-content {
	padding: 12px 14px 14px;
	border-top: 1px solid #dde6ea;
}

/* De prijs hoort onderaan de filterlijst te blijven, ook als er later filters
   bijkomen. Dat regelen we met de volgorde-eigenschap van flexbox in plaats van
   met de volgorde in de filterset, zodat je er niet aan hoeft te denken. */
.wpc-filters-main-wrap .wpc-filters-widget-wrapper {
	display: flex;
	flex-direction: column;
}

.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-_price {
	order: 99;
}

/* Op desktop staan alle filters standaard open. De plugin zet pas na het laden
   van zijn JavaScript de klasse wpc-opened; zonder deze regel zie je de
   filters daardoor heel even dichtgeklapt staan. */
@media (min-width: 993px) {

	.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-collapsible:not(.wpc-closed) > .wpc-filter-content {
		display: block;
	}

	.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-collapsible:not(.wpc-closed) .wpc-open-icon:after {
		transform: rotate(0deg);
	}
}


/* De opties in een filter. Zonder deze regels erft de lijst de opmaak van de
   plugin, die net iets anders is dan de rest van de site: de merknaam werd
   als link in de linkkleur getoond en het aantal stond even zwaar als de
   naam zelf. */
.wpc-filters-main-wrap .wpc-filters-section .wpc-filters-ul-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpc-filters-main-wrap .wpc-filters-section .wpc-checkbox-item {
	margin: 0;
	padding: 0;
}

.wpc-filters-main-wrap .wpc-filters-section .wpc-term-item-content-wrapper {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
}

.wpc-filters-main-wrap .wpc-filters-section .wpc-checkbox-item label {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: #333;
	cursor: pointer;
}

/* De naam is technisch een link, maar hoort hier niet als link te ogen. */
.wpc-filters-main-wrap .wpc-filters-section .wpc-filter-link {
	color: inherit;
	text-decoration: none;
}

/* Het aantal producten rechts uitgelijnd, rustig maar wel goed leesbaar. Te
   licht en het leest als 'niet beschikbaar'. */
.wpc-filters-main-wrap .wpc-filters-section .wpc-term-count {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 13px;
	color: #333;
	text-align: right;
}

/* 'Meer zien' en 'Minder zien' onder een lange lijst. */
.wpc-filters-main-wrap .wpc-filters-section .wpc-toggle-a {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #126985;
}


/* ---------------------------------------------------------------------------
   03. Mobiel filterpaneel: kopbalk, sorteren en knop onderin
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Plugin:    Filter Everything PRO
   Wens:      Het mobiele paneel in de opzet van Medpets, maar in de kleuren
              van AllesVoorDieren en herkenbaar als familie van het
              desktopfilter.
   Aanpak:    De plugin bouwt het paneel zelf al: een schuifpaneel met titel,
              sluitkruis en een vaste balk onderin met een knop. Dat kleden we
              hier aan. Op desktop blijven de filters losse boxen; op mobiel
              worden het rijen met scheidingslijnen, zoals bij Medpets.
   Hoort bij: het scriptje in functions.php (avd_mobiele_filter_extras). Dat
              voegt het blok Sorteren toe, zet de link 'Verwijder alle filters'
              in de kopbalk en klapt de filters op mobiel dicht.
   Let op 1:  de knop onderin past niets toe. Filteren gebeurt direct bij het
              aanvinken, ook op mobiel; de knop sluit alleen het paneel en laat
              zien hoeveel producten er overblijven.
   Let op 2:  net als bij fix 02 staat overal een extra niveau voor de selector
              (.wpc-filters-main-wrap .wpc-filters-widget-content). Zonder dat
              wint de stylesheet van de plugin, die later wordt ingeladen.
   --------------------------------------------------------------------------- */

@media (max-width: 992px) {

	/* Kopbalk van het paneel: kruisje links, titel gecentreerd, resetlink rechts. */
	.wpc-filters-main-wrap .wpc-filters-widget-content .wpc-widget-close-container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: auto;
		min-height: 52px;
		margin: 0;
		padding: 13px 112px;
		background: #126985;
	}

	.wpc-filters-main-wrap .wpc-filters-widget-content .wpc-widget-popup-title {
		margin: 0;
		padding: 0;
		color: #fff;
		font-size: 17px;
		font-weight: 700;
		line-height: 1.2;
	}

	.wpc-filters-main-wrap .wpc-filters-widget-content a.wpc-widget-close-icon {
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: 34px;
		height: 34px;
		margin: 0;
		background: none;
		border: 0;
	}

	.wpc-filters-main-wrap .wpc-filters-widget-content a.wpc-widget-close-icon .wpc-icon-line-1,
	.wpc-filters-main-wrap .wpc-filters-widget-content a.wpc-widget-close-icon .wpc-icon-line-2,
	.wpc-filters-main-wrap .wpc-filters-widget-content a.wpc-widget-close-icon .wpc-icon-line-3 {
		background: #fff;
	}

	/* Wordt door het script geplaatst en verschijnt alleen als er echt een
	   filter aanstaat. */
	.wpc-filters-main-wrap .wpc-filters-widget-content .avd-reset {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		max-width: 100px;
		color: #fff;
		font-size: 11px;
		line-height: 1.15;
		text-align: right;
		text-decoration: underline;
	}

	/* De chips met actieve filters zijn op mobiel dubbelop: je ziet het al aan
	   de aangevinkte vakjes, en resetten kan via de link in de kopbalk. */
	.wpc-filters-main-wrap .wpc-filters-widget-content .wpc-filters-widget-top-container {
		display: none;
	}

	/* Blok Sorteren bovenin. */
	.wpc-filters-main-wrap .wpc-filters-widget-content .avd-blok {
		box-sizing: border-box;
		width: 100%;
		padding: 14px 16px 2px;
	}

	.wpc-filters-main-wrap .wpc-filters-widget-content .avd-kop {
		margin: 0 0 10px;
		font-size: 15px;
		font-weight: 700;
		color: #126985;
		text-align: left;
	}

	/* De drie knoppen moeten naast elkaar passen, ook op een smal scherm.
	   Daarom delen ze de breedte gelijk en mogen ze niet afbreken. */
	.wpc-filters-main-wrap .wpc-filters-widget-content .avd-pillen {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		margin: 0 0 4px;
	}

	.wpc-filters-main-wrap .wpc-filters-widget-content .avd-pil {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		margin: 0;
		padding: 9px 4px;
		background: #fff;
		border: 1px solid #cfd9de;
		border-radius: 999px;
		font-family: inherit;
		font-size: 12px;
		white-space: nowrap;
		text-align: center;
		font-weight: 400;
		line-height: 1.2;
		color: #333;
		text-transform: none;
		letter-spacing: 0;
		cursor: pointer;
	}

	.wpc-filters-main-wrap .wpc-filters-widget-content .avd-pil.is-actief {
		padding: 8px 3px;
		border: 2px solid #126985;
		color: #126985;
		font-weight: 700;
	}

	/* Kopje boven de filterlijst. */
	.wpc-filters-main-wrap .wpc-filters-widget-content .avd-filters-kop {
		margin: 6px 0 0;
		padding: 8px 16px;
		font-size: 15px;
		font-weight: 700;
		color: #126985;
	}

	/* Op mobiel geen losse boxen maar rijen met een scheidingslijn. */
	.wpc-filters-main-wrap .wpc-filters-section {
		margin: 0 !important;
		border: 0;
		border-bottom: 1px solid #e6ecef;
		border-radius: 0;
		overflow: visible;
	}

	.wpc-filters-main-wrap .wpc-filters-section .wpc-filter-title button {
		padding: 15px 16px;
		font-size: 16px;
		font-weight: 400;
		color: #333;
	}

	.wpc-filters-main-wrap .wpc-filters-section .wpc-filter-content {
		padding: 0 16px 14px;
		border-top: 0;
	}

	.wpc-filters-main-wrap .wpc-filters-section .wpc-open-icon {
		color: #5b6b73;
	}

	/* Vaste balk onderin met een knop over de volle breedte. De knop
	   'Annuleren' van de plugin is overbodig: sluiten kan met het kruisje. */
	.wpc-filters-main-wrap .wpc-filters-widget-content .wpc-filters-widget-controls-container {
		background: #fff;
		border-top: 1px solid #e6ecef;
	}

	.wpc-filters-main-wrap .wpc-filters-widget-content .wpc-filters-widget-controls-wrapper {
		display: block;
		padding: 12px 16px;
	}

	.wpc-filters-main-wrap .wpc-filters-widget-content .wpc-filters-widget-controls-two {
		display: none;
	}

	.wpc-filters-main-wrap .wpc-filters-widget-content .wpc-filters-widget-controls-one {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.wpc-filters-main-wrap .wpc-filters-widget-content a.wpc-filters-apply-button {
		display: block;
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding: 14px 16px;
		background: #126985;
		border: 0;
		border-radius: 6px;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
	}
}


/* ---------------------------------------------------------------------------
   03b. Aanvullingen op het mobiele paneel
   ---------------------------------------------------------------------------
   Datum: 29-07-2026
   - Het paneel vult het hele scherm; eerst begon het onder de menubalk,
     waardoor je bovenin nog de site zag doorschemeren.
   - Alles start op dezelfde marge links: de widget van de plugin had een
     eigen binnenmarge van 20px waardoor de filters verder insprongen dan de
     kopjes Sorteren en Filters.
   - Het prijsfilter met eurotekens en het woordje 'tot' ertussen. Het woordje
     wordt door het script geplaatst.
   --------------------------------------------------------------------------- */

@media (max-width: 992px) {

	/* Schermvullend. 100dvh houdt rekening met de adresbalk die in en uit
	   schuift; de regel met 100vh erboven is de terugval voor oudere browsers. */
	/* Alleen wanneer het paneel openstaat. Stond dit ook op de gesloten stand,
	   dan rekende de plugin met de verkeerde hoogte om het paneel weg te
	   schuiven en piepte het onderaan de pagina weer tevoorschijn. */
	.wpc-filters-main-wrap .wpc-filters-widget-content.wpc-filters-widget-opened {
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: 100vh !important;
		height: 100dvh !important;
		max-height: none !important;
		/* De plugin zet zelf 999999; het mobiele menu van het thema staat op
		   dezelfde waarde en won daardoor. Vandaar een tandje hoger. */
		z-index: 9999999 !important;
	}

	/* De binnenmarge van de plugin eruit, zodat de filters op dezelfde lijn
	   beginnen als de kopjes erboven. */
	.wpc-filters-main-wrap .wpc-filters-widget-content .wpc-filters-widget-wrapper {
		padding: 0;
	}

	/* Prijsfilter: twee even brede vakken met een euroteken, en 'tot' ertussen. */
	/* De invoervakken hoeven niet de volle breedte. Twee compacte vakjes met
	   'tot' ertussen, netjes in het midden. */
	.wpc-filters-main-wrap .wpc-filters-section .wpc-filters-range-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.wpc-filters-main-wrap .wpc-filters-section .wpc-filters-range-column {
		position: relative;
		flex: 0 1 118px;
		min-width: 0;
		margin: 0;
		padding: 0;
		width: auto;
	}

	.wpc-filters-main-wrap .wpc-filters-section .wpc-filters-range-column:before {
		content: "\20AC";
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		color: #5b6b73;
		font-size: 14px;
		line-height: 1;
		pointer-events: none;
	}

	.wpc-filters-main-wrap .wpc-filters-section .wpc-filters-range-column input {
		box-sizing: border-box;
		width: 100%;
		/* De plugin zet de binnenmarges in een verkorte regel die hier overheen
		   zou gaan; daarom nadrukkelijk. */
		padding-left: 30px !important;
	}

	.wpc-filters-main-wrap .wpc-filters-section .avd-tot {
		flex: 0 0 auto;
		color: #5b6b73;
		font-size: 14px;
	}
}


/* ---------------------------------------------------------------------------
   05. Terugknop, kruimelpad, filterbalk en badge-icoon
   ---------------------------------------------------------------------------
   Datum: 29-07-2026
   --------------------------------------------------------------------------- */

/* De terugknop en het kruimelpad zijn in Elementor zwevend geplaatst met een
   vaste afstand in pixels vanaf links. Op een breed scherm klopt die afstand
   niet meer, want de inhoud staat gecentreerd. We maken de inhoudskolom het
   ankerpunt en zetten ze daarbinnen vast, zodat het op elk schermformaat
   klopt. */
.e-con-inner:has(> .elementor-widget.elementor-absolute) {
	position: relative;
}

.e-con-inner > .elementor-widget.elementor-absolute:has(.wxp-back-button) {
	left: 0 !important;
}

.e-con-inner > .elementor-widget.elementor-absolute:has(.woolentor-breadcrumb) {
	left: 100px !important;
}

/* De terugknop krijgt een pijltje naar links en wat meer gewicht. */
a.wxp-back-button {
	font-weight: 700;
}

a.wxp-back-button:before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	vertical-align: 1px;
}

/* Een herhaal-icoon voor de tekst in de badge Herhaal. De klasse
   avd-badge-herhaal wordt door het script gezet, want de plugin geeft alle
   badges dezelfde opmaakklasse en dan zou ook Extra voordeel het icoon
   krijgen. Het icoon zit als afbeelding in de CSS zelf, dus er wordt niets
   extra's opgehaald. */
/* AVD 38 - 14-08-2026 - Herhaalbadge weer heel na de tekstwijziging naar
   "Herhaal -5%". De plugin zet met een inline stijl een vaste breedte van
   100px; samen met het icoon brak de tekst daardoor over twee regels en liep
   de badge uit zijn doos. Hier krijgt alleen onze eigen herhaalbadge een
   breedte die meegroeit met de tekst, op een regel. Terugdraaien: dit blok
   weghalen. */
.pbfw_square_data.avd-badge-herhaal > div {
	/* 15-08-2026: even breed als de badge "Extra voordeel" (100px), en op een
	   regel. Daarvoor moeten de binnenmarge en het icoontje iets kleiner. */
	width: 100px !important;
	max-width: 100px !important;
	padding: 6px 6px !important;
	white-space: nowrap !important;
}

.pbfw_square_data.avd-badge-herhaal > div span {
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}

.pbfw_square_data.avd-badge-herhaal span:before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 5px;
	vertical-align: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpolyline points='7 23 3 19 7 15'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E") no-repeat center center;
	background-size: contain;
}

@media (max-width: 992px) {

	/* De balk staat na het verplaatsen door het script in de inhoudskolom en
	   volgt dus vanzelf die breedte. Zelfde kleur als de knop onderin het
	   paneel, zodat openen en sluiten bij elkaar horen. */
	/* De plugin plaatst meerdere knoppen, onder andere onderaan de pagina. Zodra
	   het script de juiste boven de producten heeft gezet, mogen de rest weg. */
	.avd-filterknop-verplaatst .wpc-filters-open-button-container {
		display: none !important;
	}

	.wpc-filters-open-button-container[data-avd-verplaatst] {
		display: block !important;
		margin: 0 0 14px !important;
	}

	/* De plugin heeft voor deze knop eigen regels die later worden ingeladen;
	   vandaar de nadruk op een paar eigenschappen. */
	.wpc-filters-open-button-container a.wpc-filters-open-widget {
		display: block !important;
		width: 100%;
		padding: 14px 16px !important;
		background: #126985 !important;
		border: 0 !important;
		border-radius: 6px !important;
		color: #fff !important;
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
	}

	.wpc-filters-open-button-container .wpc-button-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.wpc-filters-open-button-container .wpc-filters-button-text {
		font-size: 16px;
		font-weight: 700 !important;
		color: #fff;
	}

	a.wpc-filters-open-widget .wpc-icon-line-1,
	a.wpc-filters-open-widget .wpc-icon-line-2,
	a.wpc-filters-open-widget .wpc-icon-line-3 {
		background: #fff;
	}
}


/* ---------------------------------------------------------------------------
   05b. Aanvullingen mobiel: terugknop en lege balk boven de producten
   ---------------------------------------------------------------------------
   Datum: 29-07-2026
   --------------------------------------------------------------------------- */

@media (max-width: 992px) {

	/* De terugknop zweeft los boven de categorietekst. Hij plakte tegen de
	   linkerrand en tegen de balk erboven. De extra ruimte bovenin de kolom duwt
	   de tekst omlaag; de knop schuiven we met dezelfde afstand mee, zodat er
	   boven én onder lucht zit. */
	.e-con-inner:has(> .elementor-widget.elementor-absolute) {
		padding-top: 20px;
	}

	.e-con-inner > .elementor-widget.elementor-absolute:has(.wxp-back-button) {
		left: 20px !important;
		top: 16px !important;
	}

	/* Boven de producten staat een witte balk van ShopLentor met de sortering en
	   de weergaveknoppen. Op mobiel is die helemaal leeg en levert hij alleen
	   zo'n tachtig pixels witruimte op. */
	.woolentor-products-wrapper > .woolentor-product-filters {
		display: none;
	}
}


/* ---------------------------------------------------------------------------
   06. Filterbalk blijft plakken bij scrollen (mobiel)
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Plugin:    Filter Everything PRO, samen met het script in functions.php
   Wens:      Zoals bij Medpets: de balk "Filter en Sorteer" scrolt gewoon mee
              omhoog en blijft daarna onder de meelopende koptekst zweven,
              zodat filteren en sorteren altijd binnen handbereik is.
   Oplossing: position sticky op de balk. Alleen de knop zelf blijft staan;
              eromheen is alles doorzichtig, zodat de producten er zichtbaar
              onderdoor schuiven.
              De hoogte van de koptekst ligt niet vast (zoekbalk, adminbalk,
              ander toestel), dus die wordt in functions.php gemeten en hier
              binnengehaald als --avd-sticky-top. Die waarde bevat al een
              kleine marge onder de koptekst; wil je die anders, dan staat hij
              in functions.php als LUCHT. Ontbreekt de variabele onverhoopt,
              dan valt hij terug op 140px, de hoogte op een gewone telefoon.
   Let op:    z-index 8 is bewust lager dan de 9 van de koptekst; daardoor
              schuift de balk eronder en niet eroverheen.
              De klasse avd-vast wordt door het script gezet zodra de balk
              echt vastzit. Alleen dan komt er een schaduw onder de knop, die
              hem los laat komen van de producten erachter.
   --------------------------------------------------------------------------- */

@media (max-width: 992px) {

	.wpc-filters-open-button-container[data-avd-verplaatst] {
		position: sticky !important;
		top: var(--avd-sticky-top, 140px);
		z-index: 8;
		background: transparent;
	}

	.wpc-filters-open-button-container[data-avd-verplaatst] a.wpc-filters-open-widget {
		transition: box-shadow .18s ease;
	}

	.wpc-filters-open-button-container[data-avd-verplaatst].avd-vast a.wpc-filters-open-widget {
		box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
	}
}


/* ---------------------------------------------------------------------------
   07. Variabele producten: keuze, volgorde en bestelrij
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Plugin:    WooCommerce (kern), CommerceKit (swatches), ShopLentor/Elementor
   Probleem:  Bij een variabel product zette de leverancier de beschrijving van
              de variant tussen de keuze en de bestelknop: ruim 600 pixels tekst
              vóór het bestellen. De twee keuzeknoppen waren bovendien exact
              dezelfde kleur, dus je zag niet wat aanstond; het artikelnummer
              stond in beeld; de grootste verpakking stond vooraan; en de prijs
              bleef "Vanaf ..." ook nadat je een maat had gekozen.
   Oplossing: Een eigen keuzelijst met per verpakking de prijs, de prijs per
              kilo en de voorraad. Die lijst stuurt het gewone keuzeveld van
              WooCommerce aan, dus al het rekenwerk blijft bij WooCommerce zelf.
              De beschrijving verhuist naar het blok Productinformatie onderaan
              en Recent bekeken komt daar weer onder.
   Let op:    Bewust gebouwd op WooCommerce en niet op CommerceKit. De eigen
              knoppen van die plugin worden verborgen, niet overgeschilderd,
              zodat een update ervan ons niet in de weg kan zitten. Lukt het
              opbouwen niet, dan zet het script niets neer en blijft de
              oorspronkelijke weergave staan. De klasse avd-varianten-actief is
              dus de schakelaar: staat die er niet, dan geldt hieronder niets.
   --------------------------------------------------------------------------- */

/* De eigen weergave van de plugin gaat uit zodra onze lijst er staat. */
.variations_form.avd-varianten-actief table.variations,
.variations_form.avd-varianten-actief .reset_variations,
.variations_form.avd-varianten-actief .woocommerce-variation-description {
	display: none !important;
}

.avd-verborgen {
	display: none !important;
}

.avd-varianten {
	margin: 0 0 18px;
}

.avd-varianten-kop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 10px;
}

.avd-varianten-kop b {
	font-size: 15.5px;
}

.avd-varianten-kop span {
	font-size: 13px;
	color: #5b6b73;
}

.avd-varianten-lijst {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.avd-varianten .avd-variant {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 13px 15px;
	border: 1px solid #dde6ea;
	border-radius: 10px;
	background: #fff;
	color: #1d2b33;
	font: inherit;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
	position: relative;
	transition: border-color .15s ease, background .15s ease;
}

.avd-varianten .avd-variant:hover {
	border-color: #a9c2cc;
	background: #fafcfd;
}

.avd-varianten .avd-variant.avd-variant-aan {
	border-color: #126985;
	border-width: 2px;
	background: #eaf3f6;
	padding: 12px 14px;
}

.avd-variant-bol {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid #b9ccd4;
	border-radius: 50%;
	background: #fff;
	position: relative;
}

.avd-variant.avd-variant-aan .avd-variant-bol {
	border-color: #126985;
}

.avd-variant.avd-variant-aan .avd-variant-bol:after {
	content: "";
	position: absolute;
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	border-radius: 50%;
	background: #126985;
}

.avd-variant-maat {
	flex: 1 1 auto;
	min-width: 0;
}

.avd-variant-maat b {
	display: block;
	font-size: 16px;
	font-weight: 700;
}

.avd-variant-maat small {
	display: block;
	margin-top: 1px;
	font-size: 12.5px;
	color: #5b6b73;
}

.avd-variant-prijs {
	flex: 0 0 auto;
	text-align: right;
}

.avd-variant-prijs b {
	display: block;
	font-size: 17px;
	font-weight: 700;
}

.avd-variant-prijs b del {
	margin-right: 5px;
	font-size: 13px;
	font-weight: 400;
	color: #8d9aa1;
}

.avd-variant-prijs b ins {
	text-decoration: none;
}

.avd-variant-prijs small {
	display: block;
	font-size: 12.5px;
	color: #5b6b73;
}

.avd-variant-vlag {
	position: absolute;
	top: -9px;
	right: 12px;
	padding: 2px 8px;
	border-radius: 4px;
	background: #dd9933;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

.avd-varianten .avd-variant.avd-variant-uit {
	opacity: .5;
	cursor: not-allowed;
	background: #fafbfc;
}

.avd-varianten .avd-variant.avd-variant-uit:hover {
	border-color: #dde6ea;
}

.avd-variant.avd-variant-uit .avd-variant-maat small {
	color: #b0453a;
}

/* De voorraadregel met de levertijd erachter, in één groen. */
.variations_form.avd-varianten-actief .woocommerce-variation-availability .stock {
	margin: 0 0 4px;
	color: #1e8449;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}


/* ---------------------------------------------------------------------------
   Aantalvak en bestelknop, ook op enkelvoudige producten
   ---------------------------------------------------------------------------
   Het aantalvak was 51px breed met 32px opvulling rechts, waardoor er geen
   10px overbleef voor het getal en "10" werd afgeknipt. Het was ook 40px hoog
   tegen 48px voor de knop, en er zat geen tussenruimte.
   --------------------------------------------------------------------------- */

.e-atc-qty-button-holder {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.e-atc-qty-button-holder .quantity {
	flex: 0 0 auto;
	height: auto;
	margin: 0;
}

.e-atc-qty-button-holder .quantity select.qty,
.e-atc-qty-button-holder .quantity input.qty {
	height: 52px;
	min-width: 84px;
	padding: 0 34px 0 14px;
	border: 1px solid #dde6ea;
	border-radius: 8px;
	background-color: #fff;
	color: #1d2b33;
	font-size: 16px;
	font-weight: 600;
}

.e-atc-qty-button-holder .quantity input.qty {
	min-width: 78px;
	padding-right: 14px;
	text-align: center;
}

.e-atc-qty-button-holder .single_add_to_cart_button {
	height: 52px;
	min-height: 52px;
	border-radius: 8px;
	font-size: 16.5px;
}


/* ---------------------------------------------------------------------------
   07b. De knopopmaak van het thema terugzetten
   ---------------------------------------------------------------------------
   Shoptimizer kleurt élke button op de site blauw met witte, met hoofdletters
   beginnende tekst. Onze keuzeregels zijn buttons, dus die opmaak sloeg er ook
   op. Hieronder zetten we dat gericht terug. !important is nodig omdat de
   themastijl later wordt ingeladen dan die van het child theme.
   --------------------------------------------------------------------------- */

.avd-varianten .avd-variant {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 13px 15px !important;
	border: 1px solid #dde6ea !important;
	border-radius: 10px !important;
	background: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #1d2b33 !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.45 !important;
	text-align: left !important;
	text-transform: none !important;
	text-shadow: none !important;
}

.avd-varianten .avd-variant:hover,
.avd-varianten .avd-variant:focus {
	border-color: #a9c2cc !important;
	background: #fafcfd !important;
	color: #1d2b33 !important;
}

.avd-varianten .avd-variant.avd-variant-aan,
.avd-varianten .avd-variant.avd-variant-aan:hover {
	border: 2px solid #126985 !important;
	background: #eaf3f6 !important;
	padding: 12px 14px !important;
}

.avd-varianten .avd-variant.avd-variant-uit,
.avd-varianten .avd-variant.avd-variant-uit:hover {
	border-color: #dde6ea !important;
	background: #fafbfc !important;
	opacity: .5 !important;
	cursor: not-allowed !important;
}

.avd-varianten .avd-variant b,
.avd-varianten .avd-variant small,
.avd-varianten .avd-variant span {
	text-transform: none !important;
	letter-spacing: normal !important;
}

.avd-varianten .avd-variant .avd-variant-maat b {
	color: #1d2b33 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.avd-varianten .avd-variant .avd-variant-maat small {
	color: #5b6b73 !important;
	font-size: 12.5px !important;
	line-height: 1.35 !important;
}

.avd-varianten .avd-variant .avd-variant-prijs b {
	color: #1d2b33 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	white-space: nowrap;
}

.avd-varianten .avd-variant .avd-variant-prijs small {
	color: #5b6b73 !important;
	font-size: 12.5px !important;
	line-height: 1.35 !important;
	white-space: nowrap;
}

.avd-varianten .avd-variant.avd-variant-uit .avd-variant-maat small {
	color: #b0453a !important;
}

.avd-varianten .avd-variant .avd-variant-vlag {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	color: #fff !important;
	background: #dd9933 !important;
}

/* De bestelknop houdt de opmaak van het thema, maar niet in hoofdletters. */
.e-atc-qty-button-holder .single_add_to_cart_button {
	text-transform: none !important;
}


/* ---------------------------------------------------------------------------
   07c. Het aantalvak als één geheel: min, getal, plus
   ---------------------------------------------------------------------------
   De plugin voor de aantallen (woopq) zet naast het keuzeveld al een blokje
   met een plus en een min, maar dat stond er los naast. Met display:contents
   halen we die twee knopjes uit hun omhulsel, zodat ze samen met het getal in
   één omlijnd vak komen te staan. Er is dus geen eigen script voor nodig; we
   gebruiken wat de plugin zelf al neerzet.
   --------------------------------------------------------------------------- */

.e-atc-qty-button-holder .quantity {
	display: flex !important;
	align-items: stretch;
	width: auto !important;
	height: 52px;
	overflow: hidden;
	border: 1px solid #dde6ea;
	border-radius: 8px;
	background: #fff;
}

.e-atc-qty-button-holder .quantity .quantity-nav {
	display: contents;
}

.e-atc-qty-button-holder .quantity .quantity-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: auto !important;
	position: static !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #126985 !important;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.e-atc-qty-button-holder .quantity .quantity-button:hover {
	background: #eaf3f6 !important;
}

/* De plugin zet zijn tekentje absoluut; daardoor vielen de min en de plus
   boven op het getal. Hier weer gewoon in de rij. */
.e-atc-qty-button-holder .quantity .quantity-button:before {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	transform: none !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
}

.e-atc-qty-button-holder .quantity .quantity-down {
	order: 1;
}

.e-atc-qty-button-holder .quantity .quantity-down:before {
	content: "\2212";
}

.e-atc-qty-button-holder .quantity select.qty,
.e-atc-qty-button-holder .quantity input.qty {
	order: 2;
	width: 54px !important;
	min-width: 0 !important;
	height: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #1d2b33 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-align: center;
	text-align-last: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.e-atc-qty-button-holder .quantity .quantity-up {
	order: 3;
}

.e-atc-qty-button-holder .quantity .quantity-up:before {
	content: "+";
}

/* De pijltjes die de plugin zelf tekent zijn nu overbodig. */
.e-atc-qty-button-holder .quantity .quantity-button i,
.e-atc-qty-button-holder .quantity .quantity-button svg,
.e-atc-qty-button-holder .quantity .quantity-button span {
	display: none !important;
}


/* ---------------------------------------------------------------------------
   07d. Bestelknop op smalle schermen en de meelopende bestelbalk onderaan
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Plugin:    CommerceKit (meelopende bestelbalk) + Shoptimizer
   Probleem:  1. Op mobiel had de bestelknop 50px opvulling links en rechts. Op
                 een knop van 180px bleef er 80px over voor de tekst, waardoor
                 "Bestel · € 83,99" afbrak en werd afgeknipt.
              2. De balk die onderaan meeloopt was 312px hoog: een grote foto,
                 een titel over twee regels, "3 in Stock" in het Engels, en nog
                 een keer dezelfde keuzeknoppen mét artikelnummer.
   Oplossing: 1. Opvulling terug naar 12px, tekst op één regel, vaste hoogte.
              2. De balk wordt één rij van 68px: kleine foto, titel op één
                 regel, prijs, en één knop. De dubbele keuze eruit; die maak je
                 hierboven al. Het aantal ook, dat staat er ook al.
   Let op:    De balk is van zichzelf al position:fixed met bottom:-500px en
              wordt door de plugin omhoog geschoven. Wij borgen dat alleen, zodat
              hij nooit ergens onderaan de pagina in de tekst kan opduiken.
   --------------------------------------------------------------------------- */

@media (max-width: 992px) {

	.e-atc-qty-button-holder .single_add_to_cart_button {
		height: 52px;
		min-height: 52px;
		padding: 0 12px !important;
		font-size: 15.5px;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Smaller aantalvak, zodat de bestelknop naast "Bestel · € 123,45" ook op
   een smalle telefoon nog ruimte overhoudt. */
@media (max-width: 992px) {

	.e-atc-qty-button-holder .quantity .quantity-button {
		width: 34px;
	}

	.e-atc-qty-button-holder .quantity select.qty,
	.e-atc-qty-button-holder .quantity input.qty {
		width: 44px !important;
	}

	.e-atc-qty-button-holder .single_add_to_cart_button {
		font-size: 15px;
	}
}

/* De meelopende bestelbalk van CommerceKit stond hier vroeger opgemaakt als
   een vaste balk onderaan. Sinds fix 09 maken we die balk zelf, en staat de
   balk van CommerceKit uit in de instellingen (Sticky Add to Cart, desktop
   en mobiel allebei uit). De regels hieronder zijn een vangnet: zet iemand
   die instelling ooit terug aan, dan zie je nog steeds maar een balk. */

.commercekit_sticky-atc,
.commercekit-pdp-sticky-atc,
div[class*="wsatc"],
div[id*="wsatc"] {
	display: none !important;
}


/* ---------------------------------------------------------------------------
   07e. Twee meelopende bestelbalken tegelijk
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Plugin:    WooCommerce Sticky Add To Cart (wsatc) naast CommerceKit
   Probleem:  Er draaien twee plugins die allebei een bestelbalk onderaan de
              telefoon zetten. Die van wsatc kwam als eerste in beeld: een hoge
              balk met een tweede stel keuzeknoppen mét artikelnummer, de tekst
              "3 in Stock" in het Engels en een knop die over twee regels brak.
              Buiten beeld stond diezelfde balk ook nog ergens onderaan de
              pagina in de tekst.
   Oplossing: De balk van wsatc uit beeld; die van CommerceKit blijft over en is
              hierboven opnieuw vormgegeven. Eén balk, en wel degene die met de
              rest van het thema meebeweegt.
   Let op:    Dit is een pleister. Netter is de plugin zelf uitzetten bij
              Instellingen -> WooCommerce Sticky Add To Cart -> schakelaar uit.
              Dan laadt hij ook geen stijl en script meer mee op elke
              productpagina. Zet je hem uit, dan mag dit blok weg.
   --------------------------------------------------------------------------- */

.wsatc-variation-wrapper,
.wsatc-sticky-wrapper,
div[class^="wsatc-"],
div[id^="wsatc-"] {
	display: none !important;
}


/* ---------------------------------------------------------------------------
   08. Eigen mobiel menu
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Wens:      Het menu van het thema was een schermvullende blauwe lijst zonder
              kop, zonder zoekveld en zonder weg terug. Hier een eigen lade.
   Opzet:     Wit paneel dat van links inschuift, met een kopbalk in #126985
              zoals het filterpaneel, een zoekveld, rijen van 52px en submenu's
              als een laag die van rechts inschuift. Onderin de snelle wegen.
   Let op:    De items komen uit hetzelfde WordPress-menu; wie daar iets wijzigt
              ziet dat hier terug. De oude lade van het thema wordt niet meer
              geopend, maar staat er nog voor het geval dit script uitvalt.
   --------------------------------------------------------------------------- */

.avd-menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999990;
	visibility: hidden;
	pointer-events: none;
}

.avd-menu.avd-menu-open {
	visibility: visible;
	pointer-events: auto;
}

.avd-menu-waas {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(12, 38, 48, .45);
	opacity: 0;
	transition: opacity .25s ease;
}

.avd-menu-open .avd-menu-waas {
	opacity: 1;
}

.avd-menu-paneel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: 88%;
	max-width: 400px;
	background: #fff;
	box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
	transform: translateX(-102%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.avd-menu-open .avd-menu-paneel {
	transform: translateX(0);
}

html.avd-menu-vast,
html.avd-menu-vast body {
	overflow: hidden;
}

/* ---- kopbalk ---- */

.avd-menu-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	padding: 12px 14px;
	background: #126985;
}

.avd-menu-logo {
	display: block;
	width: auto;
	height: 30px;
	max-width: 190px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.avd-menu-logo-tekst {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}

.avd-menu-sluit {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .12);
	cursor: pointer;
}

.avd-menu-sluit:before,
.avd-menu-sluit:after {
	content: "";
	position: absolute;
	top: 19px;
	left: 11px;
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

.avd-menu-sluit:before { transform: rotate(45deg); }
.avd-menu-sluit:after  { transform: rotate(-45deg); }

/* ---- zoeken ---- */

.avd-menu-zoek {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 14px;
	background: #126985;
}

.avd-menu-zoek input[type="search"] {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 46px 0 14px;
	border: 0;
	border-radius: 8px;
	background: #fff;
	color: #1d2b33;
	font-size: 15px;
	box-shadow: none;
}

.avd-menu-zoek button {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: none;
	cursor: pointer;
}

.avd-menu-loep {
	position: absolute;
	top: 14px;
	left: 13px;
	width: 13px;
	height: 13px;
	border: 2px solid #126985;
	border-radius: 50%;
}

.avd-menu-loep:after {
	content: "";
	position: absolute;
	top: 12px;
	left: 10px;
	width: 8px;
	height: 2px;
	background: #126985;
	border-radius: 2px;
	transform: rotate(45deg);
}

/* ---- lagen ---- */

.avd-menu-lagen {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

.avd-menu-laag {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 6px 0 18px;
	background: #fff;
	transform: translateX(100%);
	transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}

.avd-menu-laag.avd-menu-laag-aan {
	transform: translateX(0);
}

.avd-menu-laag-basis {
	transform: none;
}

.avd-menu-kopje {
	padding: 18px 18px 6px;
	color: #80939c;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.avd-menu-rij {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 13px 18px;
	border: 0;
	border-bottom: 1px solid #eef3f5;
	background: #fff;
	color: #1d2b33;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

.avd-menu-rij:hover,
.avd-menu-rij:active {
	background: #f3f8fa;
	color: #126985;
}

.avd-menu-alles {
	color: #126985;
	font-weight: 700;
}

.avd-menu-chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-top: 2px solid #9bb2bd;
	border-right: 2px solid #9bb2bd;
	transform: rotate(45deg);
}

.avd-menu-terug {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 18px;
	border: 0;
	border-bottom: 1px solid #eef3f5;
	background: #f3f8fa;
	color: #126985;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.avd-menu-pijl {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-left: 2px solid #126985;
	border-bottom: 2px solid #126985;
	transform: rotate(45deg);
}

.avd-menu-titel {
	padding: 16px 18px 8px;
	color: #126985;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

/* ---- voetbalk ---- */

.avd-menu-voet {
	display: flex;
	flex: 0 0 auto;
	border-top: 1px solid #dde6ea;
	background: #f7fafb;
}

.avd-menu-snel {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 11px 4px 13px;
	color: #126985;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	position: relative;
}

.avd-menu-ic {
	width: 21px;
	height: 21px;
	background: #126985;
}

.avd-menu-ic-account {
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4 0-9 2-9 5v3h18v-3c0-3-5-5-9-5Z'/%3E%3C/svg%3E");
	mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4 0-9 2-9 5v3h18v-3c0-3-5-5-9-5Z'/%3E%3C/svg%3E");
}

.avd-menu-ic-hulp {
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm1.6-6.2-.9.9c-.5.5-.7.9-.7 1.8h-2v-.5c0-.9.4-1.7.9-2.3l1.2-1.2c.4-.3.6-.8.6-1.3a2 2 0 1 0-4 0H8a4 4 0 1 1 8 0c0 .8-.3 1.5-.9 2Z'/%3E%3C/svg%3E");
	mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm1.6-6.2-.9.9c-.5.5-.7.9-.7 1.8h-2v-.5c0-.9.4-1.7.9-2.3l1.2-1.2c.4-.3.6-.8.6-1.3a2 2 0 1 0-4 0H8a4 4 0 1 1 8 0c0 .8-.3 1.5-.9 2Z'/%3E%3C/svg%3E");
}

.avd-menu-ic-mand {
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10l1 4h3v2h-1.2l-1.3 9a2 2 0 0 1-2 1.7H7.5a2 2 0 0 1-2-1.7L4.2 10H3V8h3l1-4Zm2 4h6l-.5-2h-5L9 8Z'/%3E%3C/svg%3E");
	mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10l1 4h3v2h-1.2l-1.3 9a2 2 0 0 1-2 1.7H7.5a2 2 0 0 1-2-1.7L4.2 10H3V8h3l1-4Zm2 4h6l-.5-2h-5L9 8Z'/%3E%3C/svg%3E");
}

.avd-menu-teller {
	position: absolute;
	top: 7px;
	right: 50%;
	margin-right: -22px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: #dd9933;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* Op een breed scherm hoort deze lade niet te bestaan. */
@media (min-width: 993px) {

	.avd-menu {
		display: none !important;
	}
}


/* ---------------------------------------------------------------------------
   09. Eigen bestelbalk onderaan op de telefoon
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Wens:      Eén nette balk die verschijnt zodra de bestelknop uit beeld is.
   Opzet:     Wit, 68px, een klein productfotootje, de naam op één regel, de
              prijs eronder en rechts de bestelknop in het oranje van de
              categoriepagina's. De knop klikt de echte bestelknop aan; is er
              nog geen verpakking gekozen, dan brengt hij je naar de keuze.
   Let op:    De balken van de twee plugins staan uit (zie ook blok 07d en 07e).
   --------------------------------------------------------------------------- */

.avd-bestelbalk {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid #dde6ea;
	box-shadow: 0 -6px 18px rgba(0, 0, 0, .1);
	transform: translateY(110%);
	transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}

.avd-bestelbalk.avd-bestelbalk-aan {
	transform: translateY(0);
}

.avd-bestelbalk-info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.avd-bestelbalk-foto {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border: 1px solid #eef3f5;
	border-radius: 6px;
	object-fit: contain;
	background: #fff;
}

.avd-bestelbalk-tekst {
	min-width: 0;
}

.avd-bestelbalk-naam {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #1d2b33;
	font-size: 13px;
	line-height: 1.35;
}

.avd-bestelbalk-prijs {
	display: block;
	color: #1d2b33;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.avd-bestelbalk-prijs .price,
.avd-bestelbalk-prijs del {
	font-size: 13px;
	font-weight: 400;
	color: #8d9aa1;
}

.avd-bestelbalk-prijs ins {
	text-decoration: none;
}

.avd-bestelbalk-knop {
	flex: 0 0 auto;
	height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: #dd9933;
	color: #fff;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

.avd-bestelbalk-knop:hover {
	background: #c8862a;
}

.avd-bestelbalk-knop.avd-bestelbalk-knop-uit {
	background: #eef3f5;
	color: #5b6b73;
	font-weight: 600;
}

@media (min-width: 993px) {

	.avd-bestelbalk {
		display: none !important;
	}
}

/* De balk van CommerceKit is vervangen door die van ons. */
.commercekit_sticky-atc {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   09b. Bestellen is overal oranje
   ---------------------------------------------------------------------------
   Op de categoriepagina is elke bestelknop oranje, op de productpagina was hij
   petrolblauw. Datzelfde petrolblauw is ook de koptekst, de links, de filterbalk
   en de gekozen verpakking; het deed dus vijf dingen tegelijk. Oranje doet er
   één: bestellen. Daarom nu overal oranje.
   Wil je het terug: dit blok weghalen.
   --------------------------------------------------------------------------- */

.e-atc-qty-button-holder .single_add_to_cart_button,
.single-product .single_add_to_cart_button {
	background-color: #dd9933 !important;
	border-color: #dd9933 !important;
	color: #fff !important;
}

.e-atc-qty-button-holder .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:hover {
	background-color: #c8862a !important;
	border-color: #c8862a !important;
}

.e-atc-qty-button-holder .single_add_to_cart_button.disabled,
.e-atc-qty-button-holder .single_add_to_cart_button:disabled {
	background-color: #eef3f5 !important;
	border-color: #dde6ea !important;
	color: #5b6b73 !important;
}


/* De voorraadregel op een product zonder varianten, gelijk aan die op een
   variabel product. */
.avd-voorraad {
	margin: 0 0 6px !important;
	color: #1e8449 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}


/* ---------------------------------------------------------------------------
   08b. De oude lade van het thema uitzetten, en de terugknop op mobiel
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Probleem:  1. Op een telefoon vangt het thema de tik op de menuknop al op bij
                 het aanraken. De oude blauwe lijst schoof dan alsnog open, ook
                 al hadden we onze eigen lade klaarstaan.
              2. De terugknop op de productpagina was een wit kadertje dat over
                 de productfoto heen lag.
   Oplossing: 1. Zodra ons menu daadwerkelijk is opgebouwd komt de klasse
                 avd-menu-klaar op de html; pas dan verdwijnt de oude lade. Gaat
                 er iets mis bij het opbouwen, dan blijft de oude gewoon werken.
              2. De terugknop wordt een tekstlink met een pijltje en krijgt zijn
                 eigen ruimte boven de foto in plaats van eroverheen.
   --------------------------------------------------------------------------- */

@media (max-width: 992px) {

	html.avd-menu-klaar .col-full-nav,
	html.avd-menu-klaar .mobile-overlay {
		display: none !important;
	}

	/* Ruimte boven de foto, zodat de terugknop er niet overheen valt. */
	.e-con-inner:has(> .elementor-widget.elementor-absolute) {
		padding-top: 46px;
	}

	.e-con-inner > .elementor-widget.elementor-absolute:has(.wxp-back-button) {
		left: 16px !important;
		top: 10px !important;
	}

	a.wxp-back-button {
		display: inline-flex !important;
		align-items: center;
		gap: 7px;
		width: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 4px 2px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: #126985 !important;
		font-size: 14.5px !important;
		font-weight: 600 !important;
		line-height: 1.2 !important;
		text-transform: none !important;
	}

	a.wxp-back-button:hover {
		background: none !important;
		color: #0e5468 !important;
	}

	a.wxp-back-button:before {
		margin-right: 0;
	}
}


/* ---------------------------------------------------------------------------
   08c. Het menu van de plugin TapTap uitzetten
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Plugin:    TapTap Mobile Menu (bonfire)
   Probleem:  Het schermvullende blauwe menu op de telefoon kwam helemaal niet
              van het thema, maar van deze losse plugin. Die zet zijn eigen knop
              linksboven neer (de knop van het thema zelf is nul bij nul) en zijn
              eigen lade. Daarom bleef het oude menu verschijnen.
   Oplossing: De knop blijft staan, want dat is de knop die de bezoeker ziet; het
              script vangt de tik daarop af en opent onze lade. De lade en de
              overlays van TapTap gaan hier uit.
   Let op:    Alleen als onze lade er echt staat (klasse avd-menu-klaar). Lukt
              het opbouwen niet, dan werkt het menu van TapTap gewoon door.
              Netter is de plugin helemaal uitzetten zodra dit bevalt; dan
              scheelt het ook nog een stylesheet en een script op elke pagina.
   --------------------------------------------------------------------------- */

html.avd-menu-klaar .taptap-main-wrapper,
html.avd-menu-klaar .taptap-background-color,
html.avd-menu-klaar .taptap-background-overlay,
html.avd-menu-klaar .taptap-background-video,
html.avd-menu-klaar .taptap-search-overlay,
html.avd-menu-klaar .taptap-search-wrapper,
html.avd-menu-klaar .taptap-search-background {
	display: none !important;
}


/* ---------------------------------------------------------------------------
   09c. De bestelbalk zonder productnaam
   ---------------------------------------------------------------------------
   Datum:     29-07-2026
   Probleem:  De productnaam in de balk werd afgekapt tot "Edgard & Cooper Lam /
              Rund Kuipje Graanvri..." en dat zei niets. Hij vulde wel de halve
              balk en drukte de prijs weg.
   Oplossing: Naam en fotootje eruit. De bezoeker staat al op die pagina. Wat op
              dat moment telt is de prijs, de zekerheid dat het op voorraad is,
              en waar hij moet drukken. Prijs groot links, de groene regel
              eronder, en rechts een ruime knop.
   --------------------------------------------------------------------------- */

.avd-bestelbalk {
	gap: 14px;
	padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
}

.avd-bestelbalk .avd-bestelbalk-info {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.avd-bestelbalk .avd-bestelbalk-prijs {
	display: block;
	color: #1d2b33;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.avd-bestelbalk .avd-bestelbalk-prijs del {
	margin-right: 6px;
	font-size: 14px;
	font-weight: 400;
	color: #8d9aa1;
}

.avd-bestelbalk .avd-bestelbalk-prijs ins {
	text-decoration: none;
}

.avd-bestelbalk .avd-bestelbalk-prijs .from {
	font-size: 13px;
	font-weight: 600;
	color: #5b6b73;
}

.avd-bestelbalk-regel {
	display: block;
	overflow: hidden;
	margin-top: 2px;
	color: #1e8449;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.avd-bestelbalk .avd-bestelbalk-knop {
	flex: 0 0 auto;
	min-width: 152px;
	height: 50px;
	padding: 0 20px;
	font-size: 16px;
}


/* ---------------------------------------------------------------------------
   10. Aantalvak, bestelknop en het winkelwagentje
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   Probleem:  De plus en min naast het aantal deden niets. Reden: de plugin
              woopq zet het aantal neer als een uitklaplijst (woopq-type-select)
              maar tekent daarnaast tóch de knopjes die bij een invoerveld
              horen. Die knopjes zoeken een veld dat er niet is.
   Oplossing: De knopjes gaan weg en de uitklaplijst wordt het hele vak, met
              een pijltje rechts. Dat is precies één bedieningselement in plaats
              van drie, en het werkt wél. Zet je de plugin ooit terug op een
              invoerveld, haal dan de eerste regel hieronder weg.
   Verder:    De bestelknop heet nu overal In winkelwagen met een wagentje
              ervoor, en de koptekst krijgt hetzelfde wagentje in lijnen in
              plaats van het boodschappentasje van Shoptimizer.
   --------------------------------------------------------------------------- */

/* ---- het aantalvak ---- */

.e-atc-qty-button-holder .quantity .quantity-nav,
.e-atc-qty-button-holder .quantity .quantity-button {
	display: none !important;
}

.e-atc-qty-button-holder .quantity select.qty {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: auto !important;
	min-width: 82px !important;
	height: 52px;
	padding: 0 34px 0 16px !important;
	border: 1px solid #dde6ea;
	border-radius: 8px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231d2b33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 11px 7px;
	font-size: 16px;
	font-weight: 600;
	color: #1d2b33;
	text-align: left;
	cursor: pointer;
}

.e-atc-qty-button-holder .quantity select.qty:focus {
	border-color: #126985;
	outline: none;
}

/* Op een telefoon mag het vak smaller, maar niet zo smal dat de 10 niet past. */
@media (max-width: 992px) {

	.e-atc-qty-button-holder .quantity select.qty {
		min-width: 74px !important;
		padding: 0 30px 0 13px !important;
		background-position: right 11px center;
	}
}

/* ---- het wagentje op de knoppen ---- */

svg.avd-wagen {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.single-product .single_add_to_cart_button,
.avd-bestelbalk-knop {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

/* ---- het wagentje in de koptekst ---- */

.site-header-cart a.cart-contents {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	margin-right: 9px;
}

.site-header-cart a.cart-contents .amount {
	order: 1;
}

/* Het wagentje zelf: één kleur, geen vulling. Zelfde pad als op de knop. */
.site-header-cart a.cart-contents:after {
	content: "";
	order: 2;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	background-color: #126985;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.9 3.1h2.4l2.7 11.2h10.2l2.4-8.1H6.6'/%3E%3Ccircle cx='10.2' cy='19.3' r='1.5'/%3E%3Ccircle cx='17.2' cy='19.3' r='1.5'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.9 3.1h2.4l2.7 11.2h10.2l2.4-8.1H6.6'/%3E%3Ccircle cx='10.2' cy='19.3' r='1.5'/%3E%3Ccircle cx='17.2' cy='19.3' r='1.5'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
}

/* Het tasje van Shoptimizer was het vakje om het aantal heen, met een boogje
   erboven als hengsel. Beide uit; het aantal wordt een klein rond plaatje dat
   op het wagentje leunt. */
.site-header-cart a.cart-contents .count:after {
	display: none !important;
}

.site-header-cart a.cart-contents .count {
	position: absolute;
	top: 50%;
	right: -6px;
	margin-top: -16px;
	min-width: 18px;
	height: 18px;
	box-shadow: 0 0 0 2px #c9e1eb;
	padding: 0 5px;
	border: 0 !important;
	border-radius: 9px;
	background: #dd9933;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}


/* ---------------------------------------------------------------------------
   12. Drie kleine correcties na de ronde van 30-07
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   a) Het aantalvak is een uitklaplijst, maar zag eruit als een invulvak: geen
      enkele aanwijzing dat je erop kon tikken. Nu een chevron rechts, dezelfde
      vorm en kleur als elders op de site. De opvulling van 34px rechts stond er
      al, dus de cijfers schuiven niet.
   b) TapTap zette een lege, vaste balk van 80px hoog bovenaan elke pagina in
      bijna-zwart (#1d2124). Die dekte de eigen kopbalk van het thema af en sneed
      de zoekbalk eronder af. Er zat niets in: nul kinderen. De menuknop van
      TapTap staat er los van, dus die blijft gewoon werken.
   c) De lade was 330px breed op een scherm van 375, waardoor er rechts een reep
      achtergrond overbleef. Op een telefoon nu paginabreed. Vanaf 600px houden
      we een lade van 400px aan, want schermvullend op een tablet is te veel.
   --------------------------------------------------------------------------- */

/* a) pijltje in het aantalvak */
.e-atc-qty-button-holder .quantity select.qty {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235b6b73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 11px 7px !important;
}

/* b) de lege zwarte balk van TapTap */
html.avd-menu-klaar .taptap-header,
html.avd-menu-klaar .taptap-header-wrapper {
	display: none !important;
}

/* c) de lade paginabreed op een telefoon */
@media (max-width: 599px) {

	.avd-menu-paneel {
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* ---------------------------------------------------------------------------
   13b. Opmaak van het winkelwagentje in de kopbalk
   --------------------------------------------------------------------------- */

.shoptimizer-cart a.avd-mand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #126985;
	line-height: 1.25;
	text-decoration: none;
}

/* Het oude tasje was een pictogramletter op :before. Die gaat uit. */
.shoptimizer-cart a.avd-mand:before,
.shoptimizer-cart a.avd-mand:after {
	content: none !important;
	display: none !important;
}

.avd-mand-bron {
	display: none !important;
}

.avd-mand-ic {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
}

.avd-mand-ic svg {
	display: block;
	width: 28px;
	height: 28px;
}

.avd-mand-teller {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #c07c1c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #c9e1eb;
}

.avd-mand-tekst {
	display: flex;
	flex-direction: column;
}

.avd-mand-bedrag {
	font-size: 15px;
	font-weight: 700;
}

.avd-mand-verzend {
	font-size: 11.5px;
	font-weight: 400;
	color: #5b6b73;
}

.avd-mand-verzend b {
	color: #c07c1c;
}

.avd-mand-verzend b.avd-mand-klaar {
	color: #1e8449;
}

.avd-mand-balk {
	display: block;
	width: 128px;
	height: 4px;
	margin-top: 3px;
	border-radius: 2px;
	background: #dbe7ec;
	overflow: hidden;
}

.avd-mand-balk i {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: #1e8449;
}

/* Op een telefoon is er geen ruimte voor de tekst: alleen het wagentje. */
@media (max-width: 992px) {

	.avd-mand-tekst {
		display: none;
	}
}


/* ---------------------------------------------------------------------------
   14. Nog drie overblijfselen van TapTap in de kopbalk
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   Probleem:  TapTap zet vier losse, vaste elementen bovenaan de pagina. De
              zwarte balk was er al uit (blok 12b), maar er stonden nog een
              eigen logo op 126,23 - precies over het logo van het thema op
              127,15, vandaar het dubbele AllesVoorDieren - een zoekknop op
              325,10 die over de winkelwagen op 317 heen viel, en een losse
              achtergrondlaag van 375 bij 80.
   Oplossing: Alle drie verbergen. De menuknop zelf en het label MENU blijven
              staan, want daar hangt ons eigen menu aan.
   --------------------------------------------------------------------------- */
html.avd-menu-klaar .taptap-logo-wrapper,
html.avd-menu-klaar .taptap-search-button-wrapper,
html.avd-menu-klaar .taptap-header-bg-image {
	display: none !important;
}


/* ---------------------------------------------------------------------------
   13c. Het vinkje, en de verzendstrook op de telefoon
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   In de kopbalk paste op een telefoon alleen het wagentje. Het bedrag en de
   verzendregel staan daar nu in een eigen strook direct onder de zoekbalk:
   volle breedte, een regel tekst met het balkje eronder. Is de winkelwagen
   leeg, dan staat de strook er niet.
   --------------------------------------------------------------------------- */

.avd-mand-vink {
	width: 13px;
	height: 13px;
	margin-left: 4px;
	vertical-align: -1px;
}

.avd-verzendbalk {
	display: none;
}

@media (max-width: 992px) {

	.avd-verzendbalk {
		display: block;
		padding: 9px 16px 11px;
		background: #f2f8fa;
		border-bottom: 1px solid #dde6ea;
		color: #1d2b33;
		text-decoration: none;
	}

	.avd-verzendbalk-rij {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
	}

	.avd-verzendbalk-tekst {
		font-size: 13px;
		color: #5b6b73;
	}

	.avd-verzendbalk-tekst b {
		color: #c07c1c;
	}

	.avd-verzendbalk-tekst b.avd-mand-klaar {
		color: #1e8449;
	}

	.avd-verzendbalk-bedrag {
		flex: 0 0 auto;
		font-size: 13.5px;
		font-weight: 700;
		color: #126985;
	}

	.avd-verzendbalk .avd-mand-balk {
		width: 100%;
		margin-top: 6px;
	}
}


/* ---------------------------------------------------------------------------
   15. Diertegels bovenin het mobiele menu
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   --------------------------------------------------------------------------- */

.avd-menu-rij-verborgen {
	display: none !important;
}

.avd-menu-tegels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	padding: 12px 14px 0;
}

.avd-menu-tegels-klein {
	grid-template-columns: 1fr 1fr 1fr;
	padding: 9px 14px 14px;
}

.avd-menu-tegel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 14px 8px;
	border: 1px solid #dde6ea;
	border-radius: 12px;
	background: #fff;
	color: #126985;
	font: 650 14px/1.2 inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.avd-menu-tegel:hover {
	border-color: #a9c2cc;
}

.avd-menu-tegel-groot {
	background: #eaf3f6;
	border-color: #bcd7e0;
}

.avd-menu-tegel img {
	display: block;
	width: auto;
	height: 46px;
}

.avd-menu-tegels-klein .avd-menu-tegel {
	padding: 11px 4px;
	gap: 5px;
	border-radius: 11px;
	font-size: 12px;
}

.avd-menu-tegels-klein .avd-menu-tegel img {
	height: 30px;
}


/* ---------------------------------------------------------------------------
   16b. Opmaak bij blok 16, en het wagentje in de menuvoet
   --------------------------------------------------------------------------- */

/* Punt 6/7: de prijs per kilo, op dezelfde regel als de prijs. */
.elementor-widget-woocommerce-product-price .price .avd-perkg {
	margin-left: 8px;
	font-size: 14px;
	font-weight: 400;
	color: #5b6b73;
	vertical-align: baseline;
	white-space: nowrap;
}

/* Punt 8: het i-rondje en de uitleg. */
.avd-info {
	display: inline-grid;
	place-items: center;
	width: 17px;
	height: 17px;
	margin-left: 6px;
	padding: 0;
	border: 1.5px solid #9bb2bd;
	border-radius: 50%;
	background: none;
	color: #5b6b73;
	font: 700 11px/1 inherit;
	text-transform: none;
	letter-spacing: 0;
	vertical-align: 1px;
	cursor: pointer;
	flex: 0 0 auto;
}

.avd-info:hover {
	border-color: #126985;
	color: #126985;
	background: none;
}

.avd-info-uitleg {
	display: block;
	margin: 7px 0 2px;
	padding: 9px 12px;
	border-radius: 8px;
	background: #eaf3f6;
	color: #2a4d5a;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
}

/* Punt 9: de twee soorten knoppen op de categoriekaarten. */
.woocommerce ul.products li.product a.avd-kknop,
a.button.avd-kknop {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 46px;
	padding: 0 12px !important;
	border: 1.5px solid #dd9933;
	border-radius: 7px;
	background-color: #dd9933 !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: none !important;
	letter-spacing: 0;
}

a.button.avd-kknop.avd-kknop-kies {
	border-color: #126985;
	background-color: #fff !important;
	color: #126985 !important;
}

a.button.avd-kknop .avd-wagen {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

a.button.avd-kknop .avd-pijl {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

a.button.avd-kknop:before,
a.button.avd-kknop:after {
	content: none !important;
	display: none !important;
}

/* Hetzelfde wagentje in de voet van het mobiele menu. */
.avd-menu-ic-mand {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.2l2.4 10.4h9.8l2.3-7.4H6.2'/%3E%3Ccircle cx='9.2' cy='19.2' r='1.6'/%3E%3Ccircle cx='16.6' cy='19.2' r='1.6'/%3E%3C/svg%3E") !important;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.2l2.4 10.4h9.8l2.3-7.4H6.2'/%3E%3Ccircle cx='9.2' cy='19.2' r='1.6'/%3E%3Ccircle cx='16.6' cy='19.2' r='1.6'/%3E%3C/svg%3E") !important;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}


/* De omlijnde variant moet dezelfde specificiteit halen als de oranje regel
   hierboven, anders wint het oranje en zie je het verschil niet. */
.woocommerce ul.products li.product a.avd-kknop.avd-kknop-kies,
.woolentor-products-wrapper a.avd-kknop.avd-kknop-kies,
a.button.avd-kknop.avd-kknop-kies {
	border-color: #126985 !important;
	background-color: #fff !important;
	color: #126985 !important;
}


/* ---------------------------------------------------------------------------
   17. Correcties na de terugkoppeling van 30-07 (tweede ronde)
   ---------------------------------------------------------------------------
   a) De tegels van hond en kat waren lichtblauw; ze worden wit als de andere
      drie. Groot blijven ze wel: het formaat doet het werk, niet de kleur.
   b) Het i-rondje werd door Shoptimizer als knop opgepakt en dus een blauw vlak
      met witte tekst in hoofdletters. Bovendien is de groene voorraadregel een
      flexrij, waardoor het rondje werd uitgerekt over de volle breedte. Alles
      staat nu vast met !important en het rondje is een vaste maat die niet
      meerekt.
   c) De verzendstrook op de telefoon zat in de meelopende kopbalk en schoof
      daardoor over de filterknop. Hij staat nu in de gewone pagina eronder en
      scrollt dus mee weg. Zie ook blok 16 in functions.php.
   --------------------------------------------------------------------------- */

/* a) */
.avd-menu-tegel-groot {
	background: #fff !important;
	border-color: #dde6ea !important;
}

/* b) */
button.avd-info,
.avd-voorraad button.avd-info,
li button.avd-info {
	display: inline-grid !important;
	place-items: center !important;
	flex: 0 0 auto !important;
	align-self: center !important;
	width: 17px !important;
	height: 17px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 17px !important;
	margin: 0 0 0 6px !important;
	padding: 0 !important;
	border: 1.5px solid #9bb2bd !important;
	border-radius: 50% !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #5b6b73 !important;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	vertical-align: middle !important;
}

button.avd-info:hover {
	border-color: #126985 !important;
	color: #126985 !important;
	background: none !important;
	background-color: transparent !important;
}

/* c) De strook staat nu buiten de meelopende kop, dus niet meer vastgeplakt. */
.avd-verzendbalk {
	position: static !important;
	top: auto !important;
	z-index: auto !important;
}


/* ---------------------------------------------------------------------------
   19. Nog wat uitlijning na de terugkoppeling
   ---------------------------------------------------------------------------
   a) De verzendstrook stond te dicht op de terugknop eronder.
   b) De prijs per kilo werd door het thema met hoofdletters geschreven
      (Per Kg) en stond te hoog. Nu gewone letters en op de basislijn.
   c) Dezelfde opmaak voor de regel die de server bij variabele producten
      achter de prijs zet, zodat kaart en productpagina gelijk lezen.
   --------------------------------------------------------------------------- */

@media (max-width: 992px) {

	.avd-verzendbalk {
		margin-bottom: 14px;
	}
}

.elementor-widget-woocommerce-product-price .price .avd-perkg,
.avd-perkg,
.avd-perkg-kaart,
.eubaprdi-base-price {
	font-size: 13.5px !important;
	font-weight: 400 !important;
	color: #5b6b73 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	vertical-align: baseline !important;
	white-space: nowrap;
}

.elementor-widget-woocommerce-product-price .price .avd-perkg {
	margin-left: 7px;
}

.avd-perkg-kaart {
	display: inline;
	margin-left: 5px;
}

.avd-perkg-kaart .amount,
.avd-perkg-kaart .woocommerce-Price-amount {
	font-size: inherit !important;
	font-weight: 400 !important;
	color: inherit !important;
}

/* In de meelopende bestelbalk hoort hij helemaal niet. */
.avd-bestelbalk .avd-perkg,
.avd-bestelbalk .avd-perkg-kaart,
.avd-bestelbalk .eubaprdi-base-price {
	display: none !important;
}


/* ---------------------------------------------------------------------------
   20. Geen menu op de afrekenpagina
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   Waarom:    Een afrekenpagina zonder afleiding is vaste praktijk in webshops -
              Shoptimizer heeft er zelfs een eigen instelling voor. Elke uitgang
              die je daar aanbiedt is een kans om te vertrekken met een volle
              winkelwagen. Het logo blijft staan als enige weg terug.
   Meteen ook: op die pagina zet Shoptimizer een uitgeklede kop zonder
              navigatiebalk, waardoor onze lade daar niet werd opgebouwd en de
              zwarte balk van TapTap terugkwam. Door alles daar te verbergen is
              dat probleem en de best practice in een keer geregeld.
   --------------------------------------------------------------------------- */
body.woocommerce-checkout .taptap-menu-button-wrapper,
body.woocommerce-checkout .taptap-menu-button-label,
body.woocommerce-checkout .taptap-menu-button-01-wrapper,
body.woocommerce-checkout .taptap-header,
body.woocommerce-checkout .taptap-header-bg-image,
body.woocommerce-checkout .taptap-logo-wrapper,
body.woocommerce-checkout .taptap-search-button-wrapper,
body.woocommerce-checkout .taptap-main-wrapper,
body.woocommerce-checkout .avd-menu,
body.woocommerce-checkout .avd-verzendbalk {
	display: none !important;
}


/* ---------------------------------------------------------------------------
   21. Prijzen en knoppen op de kaarten op een lijn
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   De ene productnaam is twee regels, de andere drie, waardoor de prijs en de
   knop per kaart op een andere hoogte stonden. De naam krijgt nu ruimte voor
   drie regels, zodat alles binnen een rij op dezelfde lijn ligt. Bij een korte
   naam blijft er wat wit onder staan; dat is rustiger dan prijzen die zwabberen.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woolentor-products-wrapper .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woolentor-products-wrapper h2.woolentor-title,
.woolentor-products-wrapper .product-title {
	display: block;
	min-height: 4.2em;
}

@media (max-width: 599px) {

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woolentor-products-wrapper .woocommerce-loop-product__title,
	.woocommerce ul.products li.product h2,
	.woolentor-products-wrapper h2.woolentor-title,
	.woolentor-products-wrapper .product-title {
		min-height: 5.6em;
	}
}


/* ---------------------------------------------------------------------------
   21b. Prijs en knop op de kaarten echt op een lijn - tweede poging
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   De eerste poging gaf de productnaam ruimte voor drie regels. Dat werkte voor
   de bovenste rijen en daarna niet meer, want sommige namen zijn vier regels en
   op een telefoon in twee kolommen worden het er nog meer. Een vast aantal
   regels raden werkt dus niet.
   Nu andersom: de kaart rekt tot de volle hoogte van zijn rij, en de prijs krijgt
   margin-top: auto. De lege ruimte komt daardoor altijd boven de prijs terecht,
   hoe lang de naam ook is. Prijs en knop liggen dan per rij op dezelfde lijn,
   op elke rij, in elke kolombreedte.
   --------------------------------------------------------------------------- */

/* De regel van poging een terugdraaien. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woolentor-products-wrapper .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woolentor-products-wrapper h2.woolentor-title,
.woolentor-products-wrapper .product-title {
	min-height: 0;
}

.woolentor-product-grid-modern .product.woolentor-product-item,
.woolentor-products-wrapper .product.woolentor-product-item {
	height: 100%;
}

.woolentor-product-card,
.woolentor-grid-view-content {
	height: 100%;
}

.woolentor-product-content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.woolentor-product-content .price {
	margin-top: auto;
}

.woolentor-product-actions {
	margin-top: 12px;
}

/* De prijs heet bij Woolentor niet .price maar .woolentor-product-price. Daar
   hoort de margin-top: auto op, niet op .price. */
.woolentor-product-content .woolentor-product-price {
	margin-top: auto;
}


/* ---------------------------------------------------------------------------
   21c. Waarom de prijzen nog steeds niet op een lijn stonden
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   De prijs stond wel netjes onderaan de kaart, maar de ONDERkant lag gelijk en
   de bovenkant niet. Oorzaak: bij het ene product past "€ 21,99 (€ 7,69 per
   kilo)" op een regel en bij het andere wordt "Vanaf € 53,99 (vanaf € 7,71 per
   kilo)" twee regels. Een blok van twee regels begint hoger dan een blok van
   een regel, ook al eindigen ze op dezelfde hoogte.
   Oplossing: de prijs per kilo krijgt altijd zijn eigen regel, en het prijsblok
   krijgt de hoogte van twee regels. Dan is elk prijsblok even hoog en liggen
   boven- en onderkant gelijk. Bij een product zonder prijs per kilo blijft die
   tweede regel leeg; dat is de prijs van uitlijning.
   --------------------------------------------------------------------------- */

.woolentor-product-content .woolentor-product-price {
	display: block;
	min-height: 3.1em;
}

.woolentor-product-price .avd-perkg-kaart,
.woolentor-product-price .eubaprdi-base-price-wrapper,
.woolentor-product-price .eubaprdi-base-price {
	display: block !important;
	margin-left: 0 !important;
	margin-top: 1px;
}


/* ---------------------------------------------------------------------------
   21d. Waarom prijs en knop nog 11px verschilden
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   Blok 21b zette al margin-top: auto op de prijs en margin-top: 12px op de
   knoprij. De prijs deed het, de knoprij niet: Woolentor zet in modern.css
   .woolentor-grid-card .woolentor-product-actions op margin-top: auto, en dat is
   een klasse specifieker dan onze regel. Er stonden daardoor TWEE automatische
   marges onder elkaar. De vrije ruimte die ontstaat als een productnaam een
   regel korter is werd over die twee verdeeld: 11px boven de prijs en 11px
   boven de knop. Vandaar precies de helft van een tekstregel (22,4px).
   Nu wint onze regel wel en gaat alle vrije ruimte naar de ene auto-marge boven
   de prijs. Prijs en knop liggen daardoor in elke rij op dezelfde hoogte.
   Het lag dus niet aan de foto's: die zijn overal even hoog. Het lag aan de
   productnaam, die bij het ene product een regel langer is dan bij het andere.
   Gemeten op staging (Natvoer hond en Droogvoer hond): op 1440px en op 390px in
   alle rijen 0px verschil, was 11 tot 22px.

   De fotocontainer krijgt er een vaste vierkante verhouding bij. Alle miniaturen
   zijn nu 200x200, dus je ziet er niets van; het is er voor het geval er ooit
   een niet-vierkante miniatuur tussen zit.
   --------------------------------------------------------------------------- */

.woolentor-product-card .woolentor-product-content .woolentor-product-price {
	margin-top: auto;
}

.woolentor-product-card .woolentor-product-content .woolentor-product-actions {
	margin-top: 12px;
}

.woolentor-product-card .woolentor-product-image {
	aspect-ratio: 1 / 1;
}

.woolentor-product-card .woolentor-product-image > a {
	display: block;
	height: 100%;
}

.woolentor-product-card .woolentor-product-image img.woolentor-product-img {
	height: 100%;
}


/* ---------------------------------------------------------------------------
   21e. Minder loze ruimte onder de prijs op de kaarten
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   Tussen de prijs en de bestelknop stond 45,7px wit. Dat kwam uit drie stukjes:
   het prijsblok had een min-height van 3,1em terwijl de twee regels samen maar
   2,5em hoog zijn (zo'n 10px over), daaronder 20px margin-bottom, en daaronder
   nog eens 12px margin-top van de knoprij.
   De min-height gaat naar 2,6em: nog steeds ruimte voor twee regels, zodat de
   uitlijning van blok 21d overeind blijft, maar zonder de rest. De marge eronder
   gaat van 20px naar 8px. Samen met de 12px van de knoprij blijft er 25,7px
   over. Gemeten op desktop en op 390px, in alle rijen gelijk.
   Let op: min-height verder omlaag mag niet. Bij een product waarvan de prijs
   plus de prijs per kilo tóch twee regels vult, groeit het blok dan mee en
   begint het hoger dan bij de buren. Dat is precies wat blok 21c oploste.
   --------------------------------------------------------------------------- */

.woolentor-product-card .woolentor-product-content .woolentor-product-price {
	min-height: 2.6em;
	margin-bottom: 8px;
}


/* ---------------------------------------------------------------------------
   24. Het mobiele menu verbergen zolang het winkelmandje openstaat
   ---------------------------------------------------------------------------
   Datum:     30-07-2026
   Shoptimizer zet bij het openen van het winkelmandje-zijpaneel de klasse
   drawer-open op de body. Opgezocht en niet geraden: bij een klik op het
   wagentje in de kopbalk is dat de enige klasse die erbij komt, en hij gaat er
   bij het sluiten weer af.
   De hamburgerknop van TapTap staat vast op z-index 999999 en het paneel van
   Shoptimizer op 102. Op een telefoon bleef die knop daardoor boven het
   winkelmandje hangen, precies over de regel over gratis verzending heen.
   Zolang het paneel openstaat is de knop weg; sluit je het, dan staat hij er
   weer. Ons eigen menupaneel gaat om dezelfde reden mee, voor het geval iemand
   het mandje opent terwijl de lade nog openstaat.
   --------------------------------------------------------------------------- */

body.drawer-open .taptap-menu-button-wrapper,
body.drawer-open .avd-menu {
	display: none !important;
}


/* ---------------------------------------------------------------------------
   26. Kortingscirkel in de hero valt over de kop - 02-08-2026
   ---------------------------------------------------------------------------
   Melding: op een breed scherm ligt de oranje cirkel "10% KORTING" over de
   kop "VANWEGE OPENING" heen.

   Oorzaak: die cirkel is geen los element op de pagina, maar zit ingebakken
   in de achtergrondfoto avd-header.jpg (2420 x 880). Die foto stond op
   background-size: cover, verankerd linksboven. Bij cover groeit de foto mee
   met de vensterbreedte, terwijl de tekstkolom vastzit in een container van
   1140px die gecentreerd staat. Cirkel en tekst schuiven daardoor met
   verschillende snelheid over elkaar heen: onder de 1250px staat de cirkel
   netjes rechts van de tekst, daarboven kruipt hij eroverheen.

   Oplossing: de foto krijgt een vaste breedte in plaats van cover, en wordt
   horizontaal uitgelijnd vanaf het midden van de pagina in plaats van vanaf
   de linkerrand. Omdat de tekstkolom ook vanaf het midden wordt uitgelijnd,
   staat de cirkel nu op elke schermbreedte even ver van de tekst: ongeveer
   70px.

   Waarom dit kan: de foto is een uitsnede op een egaal vlak. Links van x=894
   en rechts van x=2175 staat niets anders dan de kleur #ebe7e8. Door diezelfde
   kleur als achtergrondkleur van de sectie te zetten loopt de foto naadloos
   door tot aan de schermranden, hoe breed het scherm ook is.

   De getallen: 0.1306 is (0.5 - 894/2420), oftewel hoe ver de linkerrand van
   de cirkel vanaf het midden van de foto ligt. De -150px is de gekozen ruimte
   tussen tekst en cirkel; maak die kleiner (bijvoorbeeld -100px) als de cirkel
   verder van de tekst mag staan. Wil je de foto groter op zeer brede schermen,
   verhoog dan de 55vw.

   Let op: de hoogte van de sectie is 595px en de foto wordt 1700 x 618. Zou de
   kop ooit over meer regels lopen waardoor de sectie hoger dan 618px wordt,
   dan verschijnt onder de foto een strook in de achtergrondkleur. Verhoog dan
   de ondergrens van 1700px.

   Terugdraaien: dit hele blok weghalen. De sectie valt dan terug op de
   instelling uit Elementor (cover, linksboven).
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {

	section.elementor-element.elementor-element-a11552a {
		--avd-hero-breedte: clamp(1700px, 55vw, 2420px);
		background-color: #ebe7e8 !important;
		background-repeat: no-repeat !important;
		background-size: var(--avd-hero-breedte) auto !important;
		background-position: calc(50% - 150px + var(--avd-hero-breedte) * 0.1306) top !important;
	}

}


/* ---------------------------------------------------------------------------
   27. Het i-rondje in de meelopende bestelbalk - 02-08-2026
   ---------------------------------------------------------------------------
   Hoort bij avd_bestelbalk_info() in functions.php. Het knopje zelf erft de
   opmaak van .avd-info uit blok 16; hier alleen wat het in de balk anders
   moet doen.

   Het rondje staat op de groene regel, dus in dezelfde groene tint als die
   regel in plaats van het grijsblauw van de productpagina.

   De uitleg kan niet onder de regel verschijnen: de balk staat vast onderaan
   het scherm en is maar 73px hoog. Hij wordt daarom boven de balk gehangen.
   .avd-bestelbalk staat op position: fixed en is daarmee het houvast voor de
   absolute positionering; de tussenliggende blokjes staan op static, dus die
   zitten niet in de weg.

   Terugdraaien: dit blok weghalen. Het knopje blijft dan werken, maar de
   uitleg valt binnen de balk en duwt die uit model.
   --------------------------------------------------------------------------- */

.avd-bestelbalk .avd-info {
	margin-left: 5px;
	width: 15px;
	height: 15px;
	border-color: #7cb494;
	color: #1e8449;
	font-size: 10px;
	vertical-align: 0;
}

.avd-bestelbalk .avd-info:hover {
	border-color: #1e8449;
	color: #1e8449;
}

.avd-bestelbalk .avd-info-uitleg {
	/* De regel in de balk staat op nowrap; de uitleg moet juist wel afbreken. */
	white-space: normal;
	text-align: left;
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 100%;
	margin: 0 0 10px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
	z-index: 1;
}


/* ---------------------------------------------------------------------------
   28. Zoek- en categoriepagina: terugknop, kruimelpad en witruimte - 02-08-2026
   ---------------------------------------------------------------------------
   Drie klachten die bij elkaar horen, alle drie op de productcategoriepagina
   en de zoekresultatenpagina.

   1. HET KRUIMELPAD EN DE TERUGKNOP STAAN OP DE ZOEKPAGINA TE VER LINKS.

   Ze zijn in Elementor zwevend geplaatst met een vaste afstand vanaf links:
   291px voor de knop, 391px voor het kruimelpad. Fix 05 heeft dat op de
   product- en categoriepagina al rechtgezet met de regel
   .e-con-inner > .elementor-widget.elementor-absolute. Op de zoekpagina grijpt
   die niet, omdat daar een nieuwere Elementor-opbouw wordt gebruikt: het
   zwevende blok hangt daar rechtstreeks onder een .e-con in plaats van onder
   een .e-con-inner, en die .e-con is schermbreed in plaats van 1140px.
   Vandaar dat het kruimelpad op 391px bleef staan terwijl de inhoud op 1006px
   begint.

   Hier hangen we ze aan het midden van de pagina, net als de inhoudskolom. De
   570px is de halve inhoudsbreedte; de 100px ertussen is de afstand die de
   knop en het kruimelpad op de productpagina ook van elkaar hebben. De max()
   zorgt dat ze op een smal venster niet buiten beeld schuiven.

   2. DE TERUGKNOP HEEFT OP MOBIEL GEEN KADER.

   Op desktop heeft hij dat al (1,25px #126985, radius 5px); op een telefoon
   viel hij terug op kale tekst. Nu overal hetzelfde.

   3. TE VEEL WITRUIMTE ONDERAAN.

   Twee oorzaken, allebei aangepakt:

   - Onder de lijst met producten zat 80px opvulling voordat de balk met
     "Gratis verzending vanaf 69 euro" begon. Dat is teruggebracht naar 24px.
     Wil je het ruimer of krapper: die 24px is de enige knop.
   - Op de zoekpagina staat in de blauwe titelbalk een tweede blok dat de
     actieve filters toont. Zolang er geen filter aanstaat is dat blok leeg,
     maar het nam nog wel 23px in plus 20px tussenruimte. Dat blok wordt nu
     verborgen zolang het niets te melden heeft. Zodra iemand een filter
     aanzet verschijnen de chips en komt het blok vanzelf terug; :has() kijkt
     live mee. Op een categoriepagina bevat dit blok de categorietekst
     (.term-description) en blijft het dus gewoon staan.

   Terugdraaien: dit hele blok weghalen.
   --------------------------------------------------------------------------- */

/* 1. Terugknop en kruimelpad op de inhoudskolom hangen (zoekpagina). */
@media (min-width: 1025px) {

	.e-con > .elementor-widget.elementor-absolute:has(.wxp-back-button) {
		left: max(15px, calc(50% - 570px)) !important;
	}

	.e-con > .elementor-widget.elementor-absolute:has(.woocommerce-breadcrumb) {
		left: max(115px, calc(50% - 470px)) !important;
	}

}

/* 2. De terugknop krijgt ook op een telefoon zijn kader. */
@media (max-width: 1024px) {

	/* Elementor zet hier zelf een regel neer met een hogere voorrang, vandaar
	   dat !important nodig is. */
	a.wxp-back-button,
	.wxp-back-button {
		padding: 6px 16px !important;
		border: 1.25px solid #126985 !important;
		border-radius: 5px !important;
		background: #fff !important;
		color: #126985 !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		display: inline-flex !important;
		align-items: center !important;
	}

}

/* 3a. Minder lucht onder de productenlijst. */
body.archive .e-con-inner:has(.woolentor-products-wrapper) {
	padding-bottom: 24px;
}

/* 3b. Het filterblok verbergen zolang het leeg is. */
.elementor-widget-woocommerce-archive-description:not(:has(.term-description)):not(:has(.wpc-filter-chips-list li)) {
	display: none;
}


/* 28d. Witruimte onder de terugknop op de categoriepagina (mobiel).

   De terugknop en het kruimelpad zweven; ze nemen dus geen hoogte in. Wat
   eronder stond was optelwerk van drie dingen die op een telefoon alle drie
   leeg zijn: de filterkolom heeft daar hoogte nul maar hield wel 20px
   bovenmarge, daar kwam 20px rijafstand van de flexcontainer bij, en de
   blauwe titelbalk begint zelf ook met 20px. Samen 67px lucht tussen de knop
   en de titel.

   De eerste twee zijn hier weggehaald; de 20px van de titelbalk blijft, want
   dat is de bedoelde ademruimte. Nagemeten op 390px: van 67px naar 27px. Op
   de zoekpagina was het al 35px en daar verandert niets, want daar staat geen
   filterkolom in dezelfde container.

   Alleen op mobiel: op desktop is die filterkolom wel gevuld en heeft hij zijn
   marge nodig. */
@media (max-width: 1024px) {

	body.archive .e-con-inner:has(> .elementor-widget.elementor-absolute .wxp-back-button) {
		row-gap: 0;
	}

	body.archive .e-con-inner:has(> .elementor-widget.elementor-absolute .wxp-back-button) > .e-con:first-child {
		margin-top: 0;
	}

}


/* ---------------------------------------------------------------------------
   29. Eén zijmarge in de mobiele menulade - 02-08-2026
   ---------------------------------------------------------------------------
   Melding: op de ene telefoon oogt de lade netjes, op de andere lijkt links en
   rechts padding te missen.

   Wat het werkelijk was: er stonden drie verschillende waarden door elkaar. De
   kopbalk met het logo, het zoekveld en de diertegels sprongen 14px in; de
   kopjes (ALLES VOOR DIEREN, INFORMATIE) en de menuregels 18px; en de drie
   snelkoppelingen onderin maar 4px. Niets lijnde dus uit met iets anders. Op
   een breed toestel valt dat nauwelijks op, op een smaller toestel juist wel,
   omdat de tegels dan dichter bij de rand komen te liggen.

   Nu staat er één waarde, als variabele bovenaan het paneel. De 18px is
   gekozen omdat de kopjes en de menuregels die al hadden; dat zijn de meeste
   regels in de lade, dus daar hoefde niets aan te veranderen.

   De voet krijgt 4px minder, omdat de drie snelkoppelingen daarbinnen zelf al
   4px opvulling hebben. Zo komt hun inhoud op dezelfde 18px uit.

   Wil je het smaller of ruimer: pas alleen --avd-menu-zij aan. De diertegels
   worden vanzelf iets smaller of breder; die staan in een raster dat de
   overgebleven ruimte verdeelt.

   Nagemeten op 390, 375, 360 en 320px breed: logo, sluitkruis, zoekveld,
   kopjes, tegels en menuregels springen overal even ver in.

   Terugdraaien: dit hele blok weghalen. Dan komen de oude waarden 14, 18 en 4
   weer terug.
   --------------------------------------------------------------------------- */

.avd-menu-paneel {
	--avd-menu-zij: 18px;
}

.avd-menu-kop,
.avd-menu-zoek,
.avd-menu-tegels,
.avd-menu-kopje,
.avd-menu-rij {
	padding-left: var(--avd-menu-zij);
	padding-right: var(--avd-menu-zij);
}

.avd-menu-voet {
	padding-left: calc(var(--avd-menu-zij) - 4px);
	padding-right: calc(var(--avd-menu-zij) - 4px);
}


/* ---------------------------------------------------------------------------
   30. De verpakkingslijst licht op als er nog niets gekozen is - 02-08-2026
   ---------------------------------------------------------------------------
   Hoort bij avd_kies_eerst() in functions.php. Drukt iemand op de bestelknop
   zonder verpakking te kiezen, dan scrolt de pagina naar de lijst en knippert
   die twee keer met een petrolkleurige rand.

   De rand staat buiten de lijst (box-shadow, geen border), zodat er niets
   verspringt als hij verschijnt.

   Wie beweging op zijn toestel heeft uitgezet krijgt geen knipper maar een
   rustige rand die vanzelf weer verdwijnt.

   Terugdraaien: dit blok weghalen. Het scrollen blijft dan werken, alleen
   zonder dat de lijst oplicht.
   --------------------------------------------------------------------------- */

.avd-let-op {
	border-radius: 10px;
	animation: avd-let-op 1.8s ease-out 1;
}

@keyframes avd-let-op {
	0%   { box-shadow: 0 0 0 0 rgba(18, 105, 133, 0); }
	12%  { box-shadow: 0 0 0 4px rgba(18, 105, 133, 0.45); }
	36%  { box-shadow: 0 0 0 4px rgba(18, 105, 133, 0); }
	60%  { box-shadow: 0 0 0 4px rgba(18, 105, 133, 0.45); }
	100% { box-shadow: 0 0 0 0 rgba(18, 105, 133, 0); }
}

@media (prefers-reduced-motion: reduce) {

	.avd-let-op {
		animation: none;
		box-shadow: 0 0 0 3px rgba(18, 105, 133, 0.45);
	}

}


/* ---------------------------------------------------------------------------
   32. De badge "Extra voordeel" werd afgesneden - 02-08-2026
   ---------------------------------------------------------------------------
   Melding: op een productkaart valt de tweede regel van de rode badge weg.

   Wat het werkelijk was. De badge komt van de plugin Product Badge for
   WooCommerce en die schrijft zijn afmetingen als inline stijl mee:

     width: 100px; height: 40px; padding: 8px 14px; box-sizing: border-box;
     overflow: hidden;

   Binnen die 100 bij 40 blijft na de opvulling 72 bij 24 pixels over. De tekst
   "Extra voordeel" past bij 12px vet niet op een regel, breekt dus in tweeen
   en wordt 31 pixels hoog. Zeven pixels meer dan er is, en overflow: hidden
   snijdt die eraf. Het is geen kwestie van schermbreedte: de badge heeft een
   vaste maat, dus het gebeurt overal - alleen valt het op een telefoon meer op
   omdat de kaart daar smaller is.

   Wat hier gebeurt: de badge mag meegroeien met zijn tekst. De hoogte gaat van
   vast naar automatisch, met de oorspronkelijke 40px als ondergrens, zodat een
   korte badge er precies zo uitziet als voorheen. Omdat de plugin ook bottom: 0
   meegeeft, moet dat op auto - anders rekt de badge uit tot de onderkant van de
   foto in plaats van mee te groeien met de tekst.

   De breedte blijft 100px. Meegroeien in de breedte zou de badge op smalle
   kaarten over de rand duwen.

   !important is nodig omdat de plugin het inline meegeeft.

   Nagemeten: badge van 40 naar 47 pixels hoog, tekst van 31 pixels past er nu
   in, en de badge blijft binnen de productfoto.

   TWEEDE PROBLEEM, GEVONDEN TIJDENS HET NAMETEN: de plugin zet de badge op
   een vaste afstand van boven, top: 147px. Dat past bij de productfoto op
   desktop, die 272px hoog is. Op een telefoon is diezelfde foto 157px hoog, en
   dan begint de badge dus 10px boven de onderrand en steekt hij er 37px onder
   uit. Dat was al zo voor deze ronde; het meegroeien in hoogte maakte het
   alleen zichtbaarder.

   Daarom staat de afstand nu in procenten: 54% is 147 gedeeld door 272, dus op
   desktop verandert er niets aan de plek van de badge. Op een telefoon komt hij
   op 85px te staan, met 25px ruimte onder zich, netjes binnen de foto.

   Nagemeten op beide breedtes: badge 47px hoog, tekst past, badge blijft
   binnen de productfoto.

   Terugdraaien: dit blok weghalen. De badge is dan weer 40px hoog, snijdt de
   tweede regel af, en steekt op een telefoon onder de foto uit.
   --------------------------------------------------------------------------- */

.pbfw_square_data > div {
	top: 54% !important;
	bottom: auto !important;
	height: auto !important;
	min-height: 40px !important;
	overflow: visible !important;
}


/* ---------------------------------------------------------------------------
   33. Scheidingslijnen bij de categorielijst op de dierpagina's - 02-08-2026
   ---------------------------------------------------------------------------
   Melding: op een telefoon staan Voeding, Benodigdheden en Verzorging als
   uitklapregels onder elkaar zonder enige scheiding. Bij Medpets staat er een
   dun lijntje tussen elke regel, en dat leest een stuk rustiger.

   Het gaat om de geneste accordeon van Elementor (.e-n-accordion met een
   <details> per regel). Die staat op de dierpagina's - honden, katten,
   konijnen, knaagdieren en reptielen - en is alleen op een telefoon zichtbaar;
   op desktop staan diezelfde categorieen als kaarten. De regels hier gelden
   dus in de praktijk voor mobiel, maar zijn niet aan een schermbreedte
   gebonden: als de accordeon ergens anders opduikt, krijgt hij vanzelf
   dezelfde lijnen.

   Elke regel krijgt een lijn bovenaan en de laatste ook een lijn onderaan. Zo
   staat de hele groep netjes tussen twee lijnen, precies zoals bij Medpets.

   De kleur #dde7eb ligt in dezelfde familie als de #eef3f5 die de menulade
   gebruikt, maar is iets sterker. Op een witte pagina is #eef3f5 nauwelijks te
   zien; in de lade werkt hij wel omdat de regels daar dichter op elkaar staan.

   INGEPERKT TOT DE DIERPAGINA'S. Eerst gold dit voor élke geneste
   Elementor-accordeon op de site. Dat is nu beperkt tot de vier pagina's waar
   deze lijst daadwerkelijk staat:

     page-id-1003     /honden/
     page-id-18988    /katten/
     page-id-126615   /konijnen/
     page-id-159191   /reptielen/

   /knaagdieren/ staat er bewust niet bij: dat adres bestaat niet en levert de
   homepagina op. Zodra die pagina er is, hoort zijn page-id hier ook bij.

   MAAK JE EEN NIEUWE DIERPAGINA: geef het accordeon-widget in Elementor de
   CSS-klasse avd-dierlijst mee (Geavanceerd, veld CSS Classes). Dan pakt de
   laatste regel hieronder hem vanzelf op en hoeft er geen page-id bij. Dat is
   ook de nettere weg als er ooit een pagina wordt herbouwd, want een page-id
   verandert dan wel en een klasse niet.

   Terugdraaien: dit blok weghalen. De regels staan dan weer zonder lijnen
   onder elkaar.
   --------------------------------------------------------------------------- */

.page-id-1003 .e-n-accordion > .e-n-accordion-item,
.page-id-18988 .e-n-accordion > .e-n-accordion-item,
.page-id-126615 .e-n-accordion > .e-n-accordion-item,
.page-id-159191 .e-n-accordion > .e-n-accordion-item,
.avd-dierlijst .e-n-accordion > .e-n-accordion-item {
	border-top: 1px solid #dde7eb;
}

.page-id-1003 .e-n-accordion > .e-n-accordion-item:last-child,
.page-id-18988 .e-n-accordion > .e-n-accordion-item:last-child,
.page-id-126615 .e-n-accordion > .e-n-accordion-item:last-child,
.page-id-159191 .e-n-accordion > .e-n-accordion-item:last-child,
.avd-dierlijst .e-n-accordion > .e-n-accordion-item:last-child {
	border-bottom: 1px solid #dde7eb;
}


/* ==========================================================================
   AVD BLOK 31a - kopbalk: alle teksten vet en de tekst in het zoekveld.
   Toegevoegd bij het bouwen van de nieuwe homepagina.
   Terugdraaien: verwijder dit hele blok tot en met "einde AVD BLOK 31a".
   ========================================================================== */

.topbar-wrapper .top-bar,
.topbar-wrapper .top-bar p,
.topbar-wrapper .top-bar a,
.site-header .secondary-navigation .menu a,
.site-header .shoptimizer-myaccount a,
.col-full-nav .main-navigation a,
.col-full-nav .main-navigation label,
.site-header-cart .avd-mand,
.site-header-cart .avd-mand span,
.site-header-cart .avd-mand b,
.site-header-cart .avd-mand div {
	font-weight: 700;
}

.site-header .site-search .search-field::placeholder {
	color: #3f6f80;
	opacity: 1;
}
.site-header .site-search .search-field::-webkit-input-placeholder {
	color: #3f6f80;
	opacity: 1;
}
.site-header .site-search .search-field::-moz-placeholder {
	color: #3f6f80;
	opacity: 1;
}

/* ===== einde AVD BLOK 31a ===== */

/* ==========================================================================
   AVD BLOK 35 - mobiele kop en menulade in de huisstijl (4 augustus 2026)

   De grijstinten hier waren neutraal grijs en vielen buiten de huisstijl:
   het woord MENU (#747a7d), de kopjes in de lade (#80939c), de tekst van de
   zoekbalk in de lade (#555) en de regels onder Informatie (#1d2b33).
   Vervangen door het petrol van de huisstijl (#126985) en de zachtere
   variant #3f6f80 die ook op de zoekbalk in de kop staat.
   ========================================================================== */

/* het woord MENU naast het hamburgericoon */
.taptap-menu-button-label,
.taptap-menu-button-label::before,
.taptap-menu-button-label::after{color:#126985 !important}

/* zoekveld in de lade */
.avd-menu-zoek input::placeholder{color:#3f6f80 !important;opacity:1}
.avd-menu-zoek input::-webkit-input-placeholder{color:#3f6f80 !important;opacity:1}
.avd-menu-zoek input{color:#126985 !important}

/* de kopjes "Alles voor Dieren" en "Informatie" */
.avd-menu-paneel .avd-menu-kopje{color:#3f6f80 !important}

/* de regels eronder, gelijk aan de tegels erboven en de balk eronder */
.avd-menu-paneel .avd-menu-rij,
.avd-menu-paneel .avd-menu-rij span{color:#126985 !important}



/* ==========================================================================
   AVD BLOK 36a - footer volgens ontwerp "Footer 2B" (desktop en mobiel)
   Hoort bij AVD BLOK 36 in functions.php.

   Drie lagen: kolommen op #eaf3f6, trustbalk op #dceaef, juridische regel op
   petrol #126985. Op mobiel dezelfde lagen, gestapeld, met accordeons.
   ========================================================================== */

/* het themaomhulsel opzij zetten, zodat de lagen over de volle breedte lopen */
footer.site-footer{padding:0 !important;margin:0 !important;background:none !important;border:0 !important}
footer.site-footer > .col-full{max-width:none !important;width:100% !important;padding:0 !important;margin:0 !important;display:block !important}
footer.copyright{display:none !important}

.avd-voet{font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#22333b;line-height:1.55;text-align:left}
.avd-voet *,.avd-voet *::before,.avd-voet *::after{box-sizing:border-box}
.avd-voet-in{max-width:1240px;margin:0 auto;padding:0 40px}
.avd-voet img{display:block;max-width:100%}

/* --- laag 1: kolommen --- */
.avd-voet-kolommen{background:#eaf3f6}
.avd-voet-kolommen > .avd-voet-in{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;padding-top:48px;padding-bottom:40px;align-items:start}

.avd-voet-merk{display:flex;flex-direction:column;gap:16px;min-width:0}
.avd-voet-logolink{display:block;line-height:0}
.avd-voet-logo{width:180px;height:auto}
.avd-voet-pitch{margin:0;font-size:15px;line-height:1.6;color:#3d5560}
.avd-voet-doelen{font-size:15px;font-weight:600;color:#126985;text-decoration:none}
.avd-voet-doelen:hover{text-decoration:underline;color:#126985}
.avd-voet-bedrijf{margin-top:6px;padding-top:18px;border-top:1px solid #cfe1e8;font-size:14px;line-height:1.7;color:#3d5560}
.avd-voet-bedrijf strong{color:#0d2a35;font-weight:600}
.avd-voet-bedrijf-mobiel{display:none}

.avd-voet-groep{display:flex;flex-direction:column;gap:14px;min-width:0}
.avd-voet-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  margin:0;padding:0;border:0;background:none;font-family:inherit;font-size:16px;font-weight:600;
  color:#0d2a35;text-align:left;cursor:default;line-height:1.4}
.avd-voet-kop .avd-voet-pijl{display:none;flex:none;line-height:0}
.avd-voet-lijst{display:flex;flex-direction:column;gap:10px}
.avd-voet-lijst a{font-size:15px;font-weight:400;color:#126985;text-decoration:none;overflow-wrap:break-word}
.avd-voet-lijst a:hover{text-decoration:underline;color:#126985}

/* de hulpkaart hoort bij mobiel */
.avd-voet-hulp{display:none}

/* --- laag 2: trustbalk --- */
/* De reviewwidget van WebwinkelKeur zit in een shadow-DOM van 325px breed die
   we niet kunnen opmaken. overflow:hidden houdt de pagina veilig, en onder
   375px verkleinen we hem zodat hij toch helemaal zichtbaar blijft. */
.avd-voet-trust{background:#dceaef;overflow:hidden}
.avd-voet-trust > .avd-voet-in{display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding-top:18px;padding-bottom:18px}
.avd-voet-keur{display:flex;align-items:center;min-width:0;max-width:100%}
@media (max-width:374px){.avd-voet-keur{transform:scale(.78);transform-origin:left center}}
.avd-voet-betaal{height:24px;width:auto;flex:none}

/* --- laag 3: juridische regel --- */
.avd-voet-slot{background:#126985}
.avd-voet-slot > .avd-voet-in{padding-top:18px;padding-bottom:18px;font-size:13px;line-height:1.5;color:#c5dfe8}

/* Tussenmaat 769-899px. Het ontwerp beschrijft alleen 1240px en 390px; hier
   houden we de vier kolommen aan maar met minder tussenruimte, zodat de
   langere links niet allemaal over twee regels vallen. */
@media (min-width:769px) and (max-width:899px){
  .avd-voet-in{padding:0 24px}
  .avd-voet-kolommen > .avd-voet-in{gap:24px;padding-top:40px;padding-bottom:32px}
  .avd-voet-lijst a{font-size:14.5px}
}

/* --- mobiel --- */
@media (max-width:768px){
  .avd-voet-kolommen > .avd-voet-in{display:block;padding:0}

  .avd-voet-merk{padding:28px 20px 22px;gap:14px}
  .avd-voet-logo{width:168px}
  .avd-voet-pitch{font-size:16px}
  .avd-voet-doelen{font-size:16px}
  .avd-voet-bedrijf-desktop{display:none}

  /* AVD 39 - 14-08-2026: het blok "Hulp nodig?" is op verzoek van Sean van de
     mobiele footer af. Het stond alleen op mobiel, dus hiermee is het overal
     weg. Terugdraaien: display:none hieronder weer display:flex maken. */
  .avd-voet-hulp{display:none;flex-direction:column;gap:10px;margin:0 20px 24px;padding:20px;
    background:#fff;border-radius:10px}
  .avd-voet-hulpkop{font-size:17px;font-weight:600;color:#0d2a35}
  .avd-voet-hulptekst{margin:0;font-size:15.5px;line-height:1.6;color:#3d5560}
  .avd-voet-knop{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 16px;
    background:#126985;color:#fff !important;font-size:16px;font-weight:600;border-radius:6px;text-decoration:none}
  .avd-voet-knop:hover,.avd-voet-knop:focus{background:#0d5468;color:#fff !important;text-decoration:none}
  .avd-voet-mail{font-size:14px;color:#5b7480}

  .avd-voet-groep{display:block;border-top:1px solid #cfe1e8}
  .avd-voet-kop{min-height:56px;padding:0 20px;font-size:17px;cursor:pointer}
  .avd-voet-kop .avd-voet-pijl{display:block;transition:transform .18s ease}
  .avd-voet-kop .avd-voet-pijl svg{display:block}
  .avd-voet-open > .avd-voet-kop .avd-voet-pijl{transform:rotate(180deg)}
  .avd-voet-lijst{padding:2px 20px 20px;gap:13px}
  .avd-voet-lijst a{font-size:16px}
  .avd-voet-js .avd-voet-groep:not(.avd-voet-open) > .avd-voet-lijst{display:none}

  .avd-voet-bedrijf-mobiel{display:block;margin-top:6px;padding-top:0;border-top:0}

  .avd-voet-trust{border-top:1px solid #cfe1e8}
  .avd-voet-trust > .avd-voet-in{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:20px}
  .avd-voet-betaal{width:100%;max-width:350px;height:auto}

  .avd-voet-slot > .avd-voet-in{padding:18px 20px;line-height:1.55}
}

/* ==========================================================================
   Geen losse regel "Bekijk winkelwagen" onder de bestelknop (5 augustus 2026)
   WooCommerce zet na een klik op In winkelwagen zelf een link onder de knop.
   Die maakte de kaart hoger dan de kaarten ernaast en voegde niets toe: het
   wagentje rechtsboven telt al op en is de plek waar mensen kijken.
   De link wordt door WooCommerce in de pagina gezet en hier verborgen; hij
   telt niet mee voor toetsenbord of schermlezer.
   ========================================================================== */
a.added_to_cart{display:none}

/* ~~~~~ AVD BLOK 33: filters zonder vouwknop krijgen dezelfde kop ~~~~~

   Staat het vinkje "Vouwen" bij een filter uit, dan zet Filter Everything geen
   knop in de kop maar alleen de tekst. Alle opmaak hierboven hangt aan die
   knop, dus zo'n filter viel uit de toon: kop links tegen de rand, zwart, 16px,
   zonder plus of min. Dat gebeurde bij Formaat hond, Aandoening en Soort
   voeding (fixlog 55) en daarna opnieuw bij Type verzorging.

   Het vinkje hoort gewoon aan te staan, en dat staat het nu ook bij alle
   filters. Maar het wordt vergeten, en dan hoort de winkel er nog steeds goed
   uit te zien. Vandaar deze terugval. Wie later een filter toevoegt en het
   vinkje vergeet, krijgt dus wel de juiste kop - alleen zonder plus en min,
   want er valt dan niets in te klappen.

   Terugdraaien: dit blok weghalen. */
.wpc-filters-main-wrap .wpc-filters-section .wpc-filter-title:not(:has(button)) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #126985;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

/* ==================================================================
   AVD 64  MIJN ACCOUNT IN DE HUISSTIJL
   Inloggen, registreren, dashboard, adressen en accountgegevens stonden nog
   in de kale opmaak van WooCommerce. Zelfde kaarten, velden en knoppen als
   op de afrekenpagina.
   ================================================================== */

.woocommerce-account .entry-content .woocommerce-notices-wrapper,
.woocommerce-account .entry-content > .woocommerce{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

.woocommerce-account .u-columns.col2-set{ float:none !important; width:100% !important; }
.woocommerce-account .u-columns.col2-set > div{
  width:auto !important;
  max-width:none !important;
  float:none !important;
  display:block !important;
  margin:0 !important;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-Addresses,
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{
  box-sizing:border-box;
  background:#fff;
  border:1px solid #dde5e8;
  border-radius:12px;
  padding:22px 24px;
}

.woocommerce-account .u-columns.col2-set{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}
.woocommerce-account .u-columns.col2-set > .col-1,
.woocommerce-account .u-columns.col2-set > .col-2{
  width:100%;
  float:none;
  margin:0;
}

.woocommerce-account .u-columns.col2-set h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-Address-title h3{
  margin:0 0 14px;
  font-size:20px;
  font-weight:700;
  color:#22333b;
}

.woocommerce-account .woocommerce form .form-row{
  display:block;
  margin:0 0 14px;
  padding:0;
}
.woocommerce-account .woocommerce form .form-row label{
  display:block;
  margin:0 0 6px;
  font-size:14px;
  font-weight:600;
  color:#22333b;
}
.woocommerce-account .woocommerce form .form-row .required{
  color:#c1272d;
  text-decoration:none;
  border:0;
}
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account .woocommerce form .woocommerce-Input{
  box-sizing:border-box;
  width:100%;
  height:50px;
  padding:0 14px;
  border:1px solid #cbd7dc;
  border-radius:8px;
  background:#fff;
  font-size:16px;
  font-family:inherit;
  color:#22333b;
}
.woocommerce-account .woocommerce form .form-row input.input-text:focus,
.woocommerce-account .woocommerce form .form-row select:focus{
  outline:0;
  border-color:#1c6e7d;
  box-shadow:0 0 0 3px rgba(28,110,125,.15);
}
.woocommerce-account .woocommerce-password-hint,
.woocommerce-account .woocommerce form em,
.woocommerce-account .woocommerce-privacy-policy-text{
  display:block;
  margin-top:8px;
  font-size:13.5px;
  line-height:1.45;
  color:#5d6f77;
  font-style:normal;
}

.woocommerce-account .woocommerce form .button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-Button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 22px;
  border:0;
  border-radius:8px;
  background:#dd9933;
  color:#fff;
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
}
.woocommerce-account .woocommerce form .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover{
  background:#c9862a;
  color:#fff;
}

.woocommerce-account .woocommerce-form-login__rememberme{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 16px;
  font-weight:400;
}
.woocommerce-account .woocommerce-form-login__rememberme input{ margin:0; }
.woocommerce-account .woocommerce-LostPassword{
  margin:14px 0 0;
  font-size:14.5px;
}
.woocommerce-account .woocommerce-LostPassword a{ color:#1c6e7d; }

.woocommerce-account .woocommerce-MyAccount-navigation ul{
  margin:0 0 24px;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;
  padding:9px 16px;
  border:1px solid #dde5e8;
  border-radius:999px;
  background:#fff;
  color:#22333b;
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  border-color:#1c6e7d;
  background:#eef5f6;
  color:#1c6e7d;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table{
  border:1px solid #dde5e8;
  border-radius:12px;
  border-collapse:separate;
  overflow:hidden;
}

@media (max-width:900px){
  .woocommerce-account .u-columns.col2-set{
    grid-template-columns:1fr;
    gap:16px;
  }
  .woocommerce-account .woocommerce-form-login,
  .woocommerce-account .woocommerce-form-register,
  .woocommerce-account .woocommerce-ResetPassword,
  .woocommerce-account .woocommerce-EditAccountForm,
  .woocommerce-account .woocommerce-address-fields{
    padding:18px 16px;
  }
  .woocommerce-account .woocommerce form .button,
  .woocommerce-account .woocommerce-MyAccount-content .button{
    width:100%;
  }
}

/* AVD 65: Mijn account, indeling en kaarten */
.woocommerce-account .woocommerce-MyAccount-navigation{
  float:none !important; width:100% !important; margin:0 0 24px !important;
}
.woocommerce-account .woocommerce-MyAccount-content{
  float:none !important; width:100% !important;
  box-sizing:border-box; background:#fff; border:1px solid #dde5e8;
  border-radius:12px; padding:24px 26px;
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{
  background:none; border:0; padding:0; margin-top:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a::after{ content:none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:flex; align-items:center; gap:8px; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info{
  border-radius:10px;
}
.woocommerce-account .woocommerce-MyAccount-content h2:first-child{ margin-top:0; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; border:0; padding:0; background:none;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{
  width:auto !important; float:none !important; margin:0 !important;
  border:1px solid #dde5e8; border-radius:12px; padding:20px 22px;
}
.woocommerce-account .woocommerce-Address-title{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{ margin:0 0 10px; font-size:17px; }
.woocommerce-account .woocommerce-Address address{ font-style:normal; line-height:1.6; }
@media (max-width:820px){
  .woocommerce-account .woocommerce-MyAccount-content{ padding:18px 16px; }
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses{ grid-template-columns:1fr; gap:16px; }
}

/* ==================================================================
   AVD 66  MIJN ACCOUNT, EIGEN OVERZICHT
   ================================================================== */

.avd-acc{ font-size:16px; line-height:1.55; color:#22333b; }
.avd-acc *{ box-sizing:border-box; }
.avd-acc a{ color:#1c6e7d; }

.avd-acc-welkom{ margin:0 0 22px; }
.avd-acc-welkom h2{ margin:0 0 4px; font-size:24px; font-weight:700; color:#22333b; }
.avd-acc-welkom p{ margin:0; color:#41565f; }

.avd-acc-kaarten{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 0 22px;
}
.avd-acc-kaart{
  display:flex; flex-direction:column;
  padding:22px 24px; border:1px solid #dde5e8; border-radius:12px; background:#fff;
}
.avd-acc-kaart h3{
  margin:0 0 14px; font-size:17px; font-weight:700; color:#22333b;
}
.avd-acc-kaart > p:last-child{ margin-bottom:0; }
.avd-acc-groot{ margin:0 0 12px; font-size:22px; font-weight:700; }
.avd-acc-leeg{ margin:0 0 16px; color:#41565f; font-size:15px; }
.avd-acc-onder{ margin:12px 0 0; font-size:14px; color:#6b7f88; }
.avd-acc-breek{ word-break:break-word; }

.avd-acc-lijst{ margin:0 0 16px; }
.avd-acc-lijst > div{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid #edf1f3; }
.avd-acc-lijst > div:last-child{ border-bottom:0; }
.avd-acc-lijst dt{ margin:0; color:#6b7f88; font-size:14.5px; font-weight:400; }
.avd-acc-lijst dd{ margin:0; font-weight:600; text-align:right; }

.avd-acc-status{
  display:inline-block; padding:3px 10px; border-radius:999px;
  background:#eef2f4; color:#41565f; font-size:13.5px; font-weight:600;
}
.avd-acc-status.is-completed,.avd-acc-status.is-processing{ background:#e8f5ec; color:#1f6b3a; }
.avd-acc-status.is-failed,.avd-acc-status.is-cancelled{ background:#fdeceb; color:#a3242a; }
.avd-acc-status.is-pending,.avd-acc-status.is-on-hold{ background:#fdf3e4; color:#8a5a13; }

.avd-acc address{ margin:0 0 16px; padding:0; border:0; font-style:normal; line-height:1.6; }

.avd-acc-dieren{ margin:0; padding:0; list-style:none; }
.avd-acc-dieren li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0; padding:8px 0; border-bottom:1px solid #edf1f3; list-style:none;
}
.avd-acc-dieren li:last-child{ border-bottom:0; }
.avd-acc-dieren strong{ font-weight:700; }
.avd-acc-dieren span{ font-size:14px; color:#6b7f88; }

.avd-acc-knop{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:10px 20px; border-radius:8px;
  background:#dd9933; color:#fff !important; font-size:15.5px; font-weight:600;
  text-decoration:none;
}
.avd-acc-knop:hover{ background:#c9862a; color:#fff !important; }
.avd-acc-knop.is-licht{
  background:#fff; color:#1c6e7d !important; border:1px solid #cbd7dc;
}
.avd-acc-knop.is-licht:hover{ background:#f2f8f9; color:#1c6e7d !important; }

.avd-acc-service{
  display:flex; align-items:center; gap:16px;
  padding:18px 22px; border:1px solid #dde5e8; border-radius:12px; background:#f7fbfc;
}
.avd-acc-service img{ flex:0 0 auto; width:54px; height:54px; border-radius:50%; object-fit:cover; }
.avd-acc-service h3{ margin:0 0 3px; font-size:16px; font-weight:700; }
.avd-acc-service p{ margin:0; font-size:15px; color:#41565f; }

@media (max-width:820px){
  .avd-acc-kaarten{ grid-template-columns:1fr; gap:14px; }
  .avd-acc-kaart{ padding:18px 18px; }
  .avd-acc-welkom h2{ font-size:21px; }
  .avd-acc-service{ flex-direction:column; text-align:center; gap:12px; padding:18px 16px; }
  .avd-acc-knop{ width:100%; }
}

/* AVD 66: knoppen zonder onderstreping, en netjes onderaan de kaart */
.avd-acc-knop,.avd-acc-knop:hover,.avd-acc-knop:focus{ text-decoration:none !important; }
/* AVD 78: de onderrand van de knop mag niet weg; hij hoort er gewoon omheen. */
body .avd-acc-knop{ border:1px solid #1c6e7d !important; }
body .avd-acc-knop:hover{ border-color:#175a66 !important; }
body .avd-acc-knop.is-licht{ border-color:#cbd7dc !important; }
body .avd-acc-knop.is-licht:hover{ border-color:#1c6e7d !important; }
/* AVD 66 zette dit op auto om de knop onderaan de kaart te duwen. Dat gaf een
   gat van 120 tot 155px tussen de tekst en de knop, waardoor die er los en
   afgesneden bij hing. Sean wil hem bij de tekst. Gewijzigd 7 augustus 2026,
   punt 1.6. Terugdraaien = auto in plaats van 16px. */
.avd-acc-kaart .avd-acc-onder{ margin-top:12px; }

/* AVD 66: meldingen op de accountpagina's in de huisstijl */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error{
  box-sizing:border-box; max-width:1000px; margin:0 auto 22px; padding:16px 20px;
  border-radius:12px; border:1px solid #cfe6d6; border-left:4px solid #2f8f4e;
  background:#f3faf5; color:#1f6b3a; font-size:15px; line-height:1.5; list-style:none;
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before{ content:none !important; }
.woocommerce-account .woocommerce-info{ border-color:#cfe0e6; border-left-color:#1c6e7d; background:#f2f8fa; color:#1c5461; }
.woocommerce-account .woocommerce-error{ border-color:#f0b7b7; border-left-color:#c1272d; background:#fdf3f3; color:#8f1d22; }
.woocommerce-account .woocommerce-error li,
.woocommerce-account .woocommerce-message li{ margin:0; padding:0; list-style:none; }
.woocommerce-account .woocommerce-error li + li{ margin-top:6px; }
.woocommerce-account .woocommerce-message .button{ display:none; }

/* ==================================================================
   AVD 67  KNOPPEN: ORANJE IS ALLEEN VOOR CONVERSIE
   Inloggen, registreren, opslaan en dat soort acties krijgen de rustige
   huiskleur. Oranje blijft voor in winkelwagen, afrekenen en betalen.
   ================================================================== */

.woocommerce-account .woocommerce form .button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account button[type=submit],
.avd-acc-knop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:11px 22px;
  border:1px solid #1c6e7d;
  border-radius:8px;
  background:#1c6e7d;
  color:#fff !important;
  font-size:15.5px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none !important;
  cursor:pointer;
}
.woocommerce-account .woocommerce form .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account button[type=submit]:hover,
.avd-acc-knop:hover{
  background:#175a66;
  border-color:#175a66;
  color:#fff !important;
}
.avd-acc-knop.is-licht{
  background:#fff;
  border-color:#cbd7dc;
  color:#1c6e7d !important;
}
.avd-acc-knop.is-licht:hover{
  background:#f2f8f9;
  border-color:#1c6e7d;
  color:#1c6e7d !important;
}

/* De knoppen onderaan een kaart op dezelfde hoogte. */
.avd-acc-kaarten{ align-items:stretch; }
.avd-acc-kaart{ height:100%; }
.avd-acc-kaart > p:has(.avd-acc-knop){ margin-top:auto; margin-bottom:0; }
.avd-acc-kaart > p:has(.avd-acc-knop) + .avd-acc-onder{ margin-top:12px; }

/* Ook Verder winkelen op de bedankpagina is geen conversieknop. */
.avd-bedankt-knop{
  background:#1c6e7d;
  border:1px solid #1c6e7d;
}
.avd-bedankt-knop:hover{ background:#175a66; border-color:#175a66; }
/* De knop om alsnog te betalen is dat wel. */
.avd-bedankt.is-mislukt .avd-bedankt-knop,
.avd-bedankt-nu .avd-bedankt-knop{
  background:#dd9933;
  border-color:#dd9933;
}
.avd-bedankt.is-mislukt .avd-bedankt-knop:hover,
.avd-bedankt-nu .avd-bedankt-knop:hover{ background:#c9862a; border-color:#c9862a; }


/* =====================================================================
   AVD 68 - Inlogpagina: een kaart, inloggen voorop
   ===================================================================== */

.woocommerce-account:not(.logged-in) .woocommerce > #customer_login{
	display:block;
	max-width:460px;
	margin:0 auto 40px;
}

#customer_login .u-column1,
#customer_login .u-column2{
	width:100%;
	float:none;
	max-width:none;
	margin:0;
	padding:0;
}

/* Registreren staat klaar, maar pas in beeld als de bezoeker erom vraagt. */
#customer_login .u-column2{ display:none !important; }
#customer_login[data-avd-toont="registreren"] .u-column1{ display:none !important; }
#customer_login[data-avd-toont="registreren"] .u-column2{ display:block !important; }

#customer_login h2{
	margin:0 0 4px;
	font-size:26px;
	line-height:1.2;
	text-align:center;
}

#customer_login .avd-acc-intro{
	margin:0 0 20px;
	text-align:center;
	font-size:15px;
	color:#5a707a;
}

#customer_login .u-column1,
#customer_login .u-column2{
	padding:28px 26px 24px;
	border:1px solid #e2e9ec;
	border-radius:14px;
	background:#fff;
	box-shadow:0 1px 2px rgba(16,42,52,.05);
}

#customer_login form.login,
#customer_login form.register{
	margin:0;
	padding:0;
	border:0;
	background:none;
}

#customer_login .form-row{ margin:0 0 16px; padding:0; }
#customer_login label{
	display:block;
	margin:0 0 6px;
	font-size:14px;
	font-weight:600;
	color:#0f3d4b;
}
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"]{
	width:100%;
	min-height:48px;
	padding:12px 14px;
	border:1px solid #cbd7dc;
	border-radius:8px;
	font-size:16px;
	background:#fff;
}
#customer_login input[type="text"]:focus,
#customer_login input[type="email"]:focus,
#customer_login input[type="password"]:focus{
	border-color:#1c6e7d;
	box-shadow:0 0 0 3px rgba(28,110,125,.15);
	outline:none;
}

#customer_login .woocommerce-form-login__rememberme{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0 0 18px;
	font-size:15px;
	font-weight:400;
	color:#41565f;
}
#customer_login .woocommerce-form-login__rememberme input{
	width:18px;
	height:18px;
	margin:0;
	accent-color:#1c6e7d;
}

#customer_login .button,
#customer_login button[type="submit"]{
	display:block;
	width:100%;
	min-height:50px;
	border-radius:8px;
	font-size:16px;
	font-weight:600;
}

#customer_login .woocommerce-LostPassword{
	margin:14px 0 0;
	text-align:center;
	font-size:14.5px;
}
#customer_login .woocommerce-LostPassword a{ color:#1c6e7d; }

#customer_login .woocommerce-privacy-policy-text p{
	margin:0 0 18px;
	font-size:13.5px;
	line-height:1.5;
	color:#5a707a;
}

#customer_login .avd-acc-voordelen{
	margin:0 0 20px;
	padding:0;
	list-style:none;
}
#customer_login .avd-acc-voordelen li{
	position:relative;
	margin:0 0 6px;
	padding-left:24px;
	font-size:14.5px;
	color:#41565f;
}
#customer_login .avd-acc-voordelen li::before{
	content:"\2713";
	position:absolute;
	left:0;
	top:0;
	color:#2f8f4e;
	font-weight:700;
}

#customer_login .avd-acc-wissel{
	margin:18px 0 0;
	padding:16px 0 0;
	border-top:1px solid #eaf0f2;
	text-align:center;
	font-size:15px;
	color:#41565f;
}
#customer_login .avd-acc-wisselknop{
	min-height:0;
	margin:0;
	padding:0;
	border:0;
	background:none;
	color:#1c6e7d;
	font-size:inherit;
	font-weight:600;
	text-decoration:underline;
	cursor:pointer;
	width:auto;
}
#customer_login .avd-acc-wisselknop:hover{ color:#12525e; }

/* De paginatitel staat op deze pagina boven de kaart, dus ook gecentreerd. */
.woocommerce-account:not(.logged-in) .entry-title,
.woocommerce-account:not(.logged-in) .page-title{ text-align:center; }

@media (max-width:600px){
	.woocommerce-account:not(.logged-in) .woocommerce > #customer_login{ max-width:none; }
	#customer_login .u-column1,
	#customer_login .u-column2{ padding:22px 18px 20px; border-radius:12px; }
	#customer_login h2{ font-size:23px; }
}


/* =====================================================================
   AVD 69 - Accountgegevens: rustige vakken, vaste velden
   ===================================================================== */

.woocommerce-EditAccountForm .avd-acc-vak{
	margin:0 0 26px;
	padding:0 0 24px;
	border-bottom:1px solid #eaf0f2;
}
.woocommerce-EditAccountForm .avd-acc-vak:last-of-type{
	margin-bottom:22px;
	padding-bottom:0;
	border-bottom:0;
}

.woocommerce-EditAccountForm .avd-acc-vaktitel{
	margin:0 0 4px;
	font-size:19px;
	line-height:1.3;
}
.woocommerce-EditAccountForm .avd-acc-vakregel{
	margin:0 0 18px;
	font-size:14.5px;
	color:#5a707a;
}
.woocommerce-EditAccountForm .avd-acc-vaktitel + .avd-acc-raster{ margin-top:18px; }

.woocommerce-EditAccountForm .avd-acc-raster{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
	margin:0 0 16px;
}

.woocommerce-EditAccountForm .avd-acc-veld{
	display:flex;
	flex-direction:column;
	gap:6px;
	margin:0 0 16px;
	max-width:420px;
}
.woocommerce-EditAccountForm .avd-acc-raster .avd-acc-veld{
	margin:0;
	max-width:none;
}

.woocommerce-EditAccountForm .avd-acc-label{
	font-size:14px;
	font-weight:600;
	color:#0f3d4b;
	line-height:1.35;
}
.woocommerce-EditAccountForm .avd-acc-ster{ color:#c1272d; }

.woocommerce-EditAccountForm .avd-acc-veld input{
	width:100%;
	min-height:48px;
	margin:0;
	padding:12px 14px;
	border:1px solid #cbd7dc;
	border-radius:8px;
	font-size:16px;
	background:#fff;
}
.woocommerce-EditAccountForm .avd-acc-veld input:focus{
	border-color:#1c6e7d;
	box-shadow:0 0 0 3px rgba(28,110,125,.15);
	outline:none;
}

.woocommerce-EditAccountForm .avd-acc-hulp{
	font-size:13px;
	color:#6b7f88;
}

/* Het e-mailadres staat vast: geen invoerveld, wel duidelijk in beeld. */
.woocommerce-EditAccountForm .avd-acc-vast{
	display:block;
	max-width:560px;
	margin:0;
	padding:14px 16px;
	border:1px solid #e2e9ec;
	border-radius:10px;
	background:#f7fafb;
}
.woocommerce-EditAccountForm .avd-acc-vast .avd-acc-label{
	display:block;
	margin:0 0 2px;
}
.woocommerce-EditAccountForm .avd-acc-vastwaarde{
	display:block;
	margin:0 0 8px;
	font-size:16px;
	color:#0f3d4b;
	word-break:break-word;
}
.woocommerce-EditAccountForm .avd-acc-vastuitleg{
	display:block;
	font-size:13px;
	line-height:1.5;
	color:#5a707a;
}
.woocommerce-EditAccountForm .avd-acc-vastuitleg a{ color:#1c6e7d; }

@media (max-width:700px){
	.woocommerce-EditAccountForm .avd-acc-raster{ grid-template-columns:1fr; }
	.woocommerce-EditAccountForm .avd-acc-vak{ margin:0 0 22px; padding:0 0 20px; }
}


/* =====================================================================
   AVD 70 - Bestelling bekijken: adressen binnen het blok houden
   De adreskolommen zweefden (float), waardoor ze buiten de witte kaart
   vielen. Nu een raster, en de kaart sluit er netjes omheen.
   ===================================================================== */

.woocommerce-MyAccount-content{ display:flow-root; }

.woocommerce-account .woocommerce-customer-details{
	margin:22px 0 0;
	padding:22px 24px;
	border:1px solid #e2e9ec;
	border-radius:14px;
	background:#fff;
}

.woocommerce-account .woocommerce-columns--addresses{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px 26px;
	margin:0;
}

.woocommerce-account .woocommerce-columns--addresses .col-1,
.woocommerce-account .woocommerce-columns--addresses .col-2{
	width:auto;
	max-width:none;
	float:none;
	margin:0;
	padding:0;
}

.woocommerce-account .woocommerce-column__title{
	margin:0 0 8px;
	font-size:17px;
	line-height:1.3;
}

.woocommerce-account .woocommerce-customer-details address{
	margin:0;
	padding:0;
	border:0;
	font-style:normal;
	font-size:15px;
	line-height:1.6;
	color:#3c525c;
}

.woocommerce-account .woocommerce-customer-details p{
	margin:6px 0 0;
	font-size:15px;
	color:#3c525c;
}

@media (max-width:700px){
	.woocommerce-account .woocommerce-columns--addresses{ grid-template-columns:1fr; }
	.woocommerce-account .woocommerce-customer-details{ padding:18px; }
}


/* =====================================================================
   AVD 71 - Bestellingentabel en accountgegevens
   ===================================================================== */

/* --- Bestellingen: de knop precies onder de kop "Acties" ----------- */
.woocommerce-account .woocommerce-orders-table__cell-order-actions{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	gap:8px;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button{
	margin:0;
}
.woocommerce-account .woocommerce-orders-table__header-order-actions{
	padding-right:0;
	text-align:right;
}
.woocommerce-account .woocommerce-orders-table th{
	font-size:14px;
	letter-spacing:.01em;
}
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-orders-table th{
	vertical-align:middle;
}

/* --- Accountgegevens: twee kolommen op een breed scherm ------------ */
@media (min-width:900px){

	.woocommerce-EditAccountForm{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:0 40px;
		align-items:stretch;
	}

	.woocommerce-EditAccountForm .avd-acc-vak{
		margin:0;
		padding:22px 24px;
		border:1px solid #e2e9ec;
		border-radius:14px;
		background:#fff;
	}

	.woocommerce-EditAccountForm .avd-acc-vak:last-of-type{
		margin:0;
		padding:22px 24px;
	}

	.woocommerce-EditAccountForm > p{
		grid-column:1 / -1;
		margin:22px 0 0;
	}

	.woocommerce-EditAccountForm .avd-acc-veld{ max-width:none; }
	.woocommerce-EditAccountForm .avd-acc-vast{ max-width:none; }
}

/* De opslaanknop hoeft niet over de volle breedte. */
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]{
	min-width:200px;
}


/* === AVD N4 meldingsbalken uitlijnen ==============================
   De meldingsbalken van WooCommerce lopen over de volle schermbreedte.
   Dat blijft zo - alleen de tekst erin begint nu op dezelfde lijn als het
   logo en het menu erboven (1170px, gecentreerd). Onder ongeveer 1215px
   verandert er niets: dan geldt de oude binnenruimte van 22,652px weer.
   De 5px die eraf gaat is de gekleurde rand aan de linkerkant van de balk.
   Toegevoegd 7 augustus 2026 (punt N4). Terugdraaien = dit blok weghalen.
   ------------------------------------------------------------------ */
body .woocommerce-error,
body .woocommerce-message,
body .woocommerce-info{
	padding-left:max(17.652px, calc((100% - 1170px) / 2 - 5px));
	padding-right:max(22.652px, calc((100% - 1170px) / 2));
}


/* ==================================================================
   AVD 77 - Bedankkaartje: landingspagina achter de QR-code op het
   bedankkaartje in de doos (/bedankkaartje/, pagina 182790).
   De pagina is in Elementor opgebouwd uit HTML- en shortcode-widgets;
   alle opmaak staat hier, niet in Elementor.
   Toegevoegd 7 augustus 2026. Terugdraaien: dit hele blok weghalen.
   ------------------------------------------------------------------ */
.page-id-182790 .elementor{padding:28px 0 56px;}
.page-id-182790 .elementor-section{padding-top:0;padding-bottom:0;}
.page-id-182790 .elementor-widget:not(:last-child){margin-bottom:44px;}
.page-id-182790 .dzkop h3{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.bk{color:#0d2a35;}
.bk h1,.bk h2,.bk h3{color:#0d2a35;}
.bk h1{font-size:clamp(28px,3.4vw,40px);line-height:1.15;margin:0 0 16px;}
.bk h2{font-size:clamp(22px,2.4vw,30px);line-height:1.25;margin:0 0 16px;}
.bk h3{font-size:18px;line-height:1.3;margin:0 0 8px;}
.bk p{font-size:16px;line-height:1.65;}
.bk .bk-lead{font-size:17px;line-height:1.7;max-width:840px;margin-left:auto;margin-right:auto;}

.bk-kop{background:#f7fbfc;border:1px solid #dde5e8;border-radius:18px;padding:38px 28px;text-align:center;}
.bk-cijfers{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.bk-cijfers li{background:#fff;border:1px solid #dde5e8;border-radius:14px;padding:16px 22px;min-width:180px;text-align:center;margin:0;}
.bk-cijfers b{display:block;font-size:26px;color:#126985;line-height:1.1;}
.bk-cijfers span{display:block;font-size:14px;color:#3f6f80;margin-top:4px;}

.bk-doelen h2{text-align:center;}
.bk-doelrij{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.bk-doel{background:#fff;border:1px solid #dde5e8;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;}
.bk-doel-f{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}
.bk-doel-t{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.bk-doel-t p{font-size:15px;line-height:1.6;margin:0 0 14px;}
.bk-doel-l{margin-top:auto;font-weight:700;color:#126985;text-decoration:underline;overflow-wrap:anywhere;}
.bk-meer{margin:22px 0 0;text-align:center;}
.bk-meer a{font-weight:700;color:#126985;}

.bk-code{background:#c9e1eb;border-radius:18px;padding:38px 28px;text-align:center;}
.bk-bon{margin:24px auto 0;max-width:470px;background:#fff;border:2px dashed #126985;border-radius:16px;padding:22px 20px;}
.bk-bon-l{display:block;font-size:13px;color:#3f6f80;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}
.bk-bon-c{display:block;font-size:clamp(28px,5vw,40px);line-height:1.1;letter-spacing:.06em;color:#0d2a35;margin:8px 0 6px;font-weight:800;}
.bk-bon-g{display:block;font-size:14px;color:#3f6f80;}
.bk-klein{font-size:14px;color:#3f6f80;margin:14px 0 0;}

/* Productrij: dezelfde tussenruimte als op de categoriepagina (12px).
   Op mobiel ook de binnenmarge van Elementor weg, anders worden de kaartjes
   132px breed en valt de tekst van de knop "In winkelwagen" buiten het kaartje. */
.page-id-182790 .elementor-widget-loop-grid .elementor-grid{column-gap:12px;row-gap:12px;}

.bk-kop2{text-align:center;}
.bk-kop2 h2{margin-bottom:0;}

@media (max-width:1023px){
  .bk-doelrij{grid-template-columns:1fr;}
  .bk-doel{flex-direction:row;}
  .bk-doel-f{width:170px;flex:0 0 170px;aspect-ratio:1/1;}
}
@media (max-width:599px){
  .page-id-182790 .elementor-container:has(.elementor-widget-loop-grid){padding-left:0;padding-right:0;}
  .page-id-182790 .elementor-widget-wrap.elementor-element-populated:has(.elementor-widget-loop-grid){padding-left:0;padding-right:0;}
  .page-id-182790 .elementor-widget:not(:last-child){margin-bottom:32px;}
  .bk-kop,.bk-code{padding:26px 18px;}
  .bk-doel{flex-direction:column;}
  .bk-doel-f{width:100%;flex:none;aspect-ratio:16/9;}
  .bk-cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .bk-cijfers li{min-width:0;padding:12px 6px;border-radius:12px;}
  .bk-cijfers b{font-size:19px;}
  .bk-cijfers span{font-size:11px;line-height:1.3;}
}


/* === AVD 1.6 accountknoppen =========================================
   Twee dingen op Mijn account:
   1. Bij Herhaalbestelling ontbrak het icoonmasker. Het vlak van 20x20 dat
      de andere knoppen als pictogram gebruiken bleef daardoor als een dicht
      vierkant staan. Hier krijgt hij een eigen pictogram: twee pijlen rond.
   2. Op smalle schermen wikkelden de zes knoppen in een rafelig raster met
      ongelijke breedtes. Onder 600px staan ze nu in twee gelijke kolommen.
      Het pictogram mag daarbij niet meer krimpen: bij de twee lange
      opschriften viel het anders terug naar 4px.
   Toegevoegd 7 augustus 2026. Terugdraaien = dit hele blok weghalen.
   ------------------------------------------------------------------ */
body .woocommerce-MyAccount-navigation-link--herhaalbestelling a::before{
	-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m17 2 4 4-4 4'/><path d='M3 11v-1a4 4 0 0 1 4-4h14'/><path d='m7 22-4-4 4-4'/><path d='M21 13v1a4 4 0 0 1-4 4H3'/></svg>");
	mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m17 2 4 4-4 4'/><path d='M3 11v-1a4 4 0 0 1 4-4h14'/><path d='m7 22-4-4 4-4'/><path d='M21 13v1a4 4 0 0 1-4 4H3'/></svg>");
}

body .woocommerce-MyAccount-navigation li a::before{
	flex-shrink:0;
	min-width:20px;
}

@media (max-width:600px){
	body .woocommerce-MyAccount-navigation ul{
		display:grid;
		grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	}
	body .woocommerce-MyAccount-navigation li{ min-width:0; }
	body .woocommerce-MyAccount-navigation li a{
		width:100%;
		justify-content:center;
		padding-left:8px;
		padding-right:8px;
		font-size:12.5px;
	}
}

/* ==================================================================
   AVD 78 - Winactieformulier op /bedankkaartje/ (blok AVD 78 in
   functions.php, shortcode [avd_winactie]).
   De opmaak van de oude kortingsbon (.bk-code, .bk-bon) staat hierboven
   nog in AVD 77. Die is nu ongebruikt maar bewust laten staan, voor het
   geval de kortingscode terugkomt.
   Toegevoegd 7 augustus 2026. Terugdraaien: dit hele blok weghalen.
   ------------------------------------------------------------------ */
.bk-win{background:#c9e1eb;border-radius:18px;padding:38px 28px;text-align:center;}
.bk-win .bk-lead{margin-left:auto;margin-right:auto;}

.bk-win-form{max-width:540px;margin:26px auto 0;text-align:left;background:#fff;border:1px solid #dde5e8;border-radius:16px;padding:22px;}
.bk-win-veld{margin:0 0 14px;}
.bk-win-veld label{display:block;font-size:14px;font-weight:700;color:#0d2a35;margin:0 0 6px;}
.bk-win-form input[type="text"],
.bk-win-form input[type="email"],
.bk-win-form select{
	width:100%;height:46px;padding:0 12px;margin:0;
	border:1px solid #c6d5db;border-radius:8px;background:#fff;
	font-size:16px;line-height:1.4;color:#0d2a35;
}
.bk-win-form select{appearance:none;-webkit-appearance:none;padding-right:34px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23126985' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;}
.bk-win-form input:focus,.bk-win-form select:focus{border-color:#126985;outline:2px solid #126985;outline-offset:1px;}

.bk-win-dier{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.bk-win-dier + .bk-win-dier{margin-top:4px;padding-top:16px;border-top:1px dashed #dde5e8;}
.bk-win-dier .bk-win-veld{margin-bottom:10px;}

.bk .bk-win-meer{
	display:inline-block;width:auto;height:auto;min-height:0;margin:2px 0 16px;padding:0;
	background:none;border:0;border-radius:0;
	font-size:14.5px;font-weight:700;line-height:1.4;letter-spacing:normal;text-transform:none;
	color:#126985;text-decoration:underline;cursor:pointer;
}
.bk .bk-win-meer:hover{background:none;color:#0d2a35;}

.bk .bk-win-weg{
	display:inline-block;width:auto;height:auto;min-height:0;margin:0 0 12px;padding:0;
	background:none;border:0;border-radius:0;
	font-size:13.5px;font-weight:600;line-height:1.4;letter-spacing:normal;text-transform:none;
	color:#7a8b93;text-decoration:underline;cursor:pointer;
}
.bk .bk-win-weg:hover{background:none;color:#a3231b;}

.bk-win-akkoord{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;font-size:14px;line-height:1.5;color:#0d2a35;cursor:pointer;}
.bk-win-akkoord input{flex:0 0 18px;width:18px;height:18px;margin:2px 0 0;}

.bk-win-web{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

.bk .bk-win-knop{
	display:block;width:100%;height:50px;margin:0;padding:0 16px;
	background:#126985;border:0;border-radius:8px;
	color:#fff;font-size:16px;font-weight:700;letter-spacing:normal;text-transform:none;cursor:pointer;
}
.bk .bk-win-knop:hover{background:#0d5268;color:#fff;}
.bk .bk-win-knop[disabled]{opacity:.65;cursor:default;}

.bk-win-melding{margin:14px 0 0;font-size:15px;line-height:1.55;}
.bk-win-melding:empty{margin:0;}
.bk-win-melding.is-fout{color:#a3231b;font-weight:600;}
.bk-win-melding.is-goed{color:#1c6b3f;font-weight:600;}
.bk-win-form > .bk-win-melding.is-goed{margin:0;text-align:center;font-size:16px;}

.bk-win .bk-klein{max-width:540px;margin-left:auto;margin-right:auto;}

@media (max-width:599px){
	.bk-win{padding:26px 18px;}
	.bk-win-form{padding:18px;}
	.bk-win-dier{grid-template-columns:1fr;gap:0;}
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   AVD 79 - Bestellingentabel: een kader in plaats van twee
   AVD 65 gaf de tabellen binnen Mijn account een eigen rand met ronde
   hoeken, terwijl de inhoudskaart daaromheen die rand al heeft. Dat las
   als een doos in een doos. De rand van de tabel gaat er hier af; de
   scheidingslijntjes tussen de rijen blijven staan.
   Verder stond de kolom Acties rechts uitgelijnd terwijl de vier koppen
   ernaast links staan, en schoof de knop Bekijken naar links zodra er
   een tweede knop naast stond. De kolom krimpt nu tot de breedte van de
   knoppen en lijnt links uit, zodat elke Bekijken-knop op dezelfde plek
   staat en de kop Acties er recht boven.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.woocommerce-account .woocommerce-MyAccount-content table.shop_table{
	border:0;
	border-radius:0;
	overflow:visible;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child th{
	border-bottom:0;
}

/* De kolom krijgt precies de breedte van twee knoppen naast elkaar.
   Op de th, want die is een gewone tabelcel; de td eronder staat op flex
   en zou met een breedte in procenten onvoorspelbaar rekenen. Onder de
   900px valt de tabel uit elkaar in blokken, verdwijnt de thead en is
   deze breedte zonder betekenis. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th.woocommerce-orders-table__header-order-actions{
	width:236px;
	text-align:left;
	padding-right:0;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions{
	justify-content:flex-start;
	text-align:left;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   AVD 80 - Bestelling bekijken: ook hier een kader in plaats van drie
   Zelfde punt als AVD 79, een pagina verder. Binnen de accountkaart
   hadden Bestelgegevens (rand uit Shoptimizer) en het adresblok (rand
   uit AVD 70) allebei nog een eigen kader. Die gaan eraf; de twee delen
   worden nu gescheiden door een lijn in plaats van door twee dozen.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details{
	border:0;
	border-radius:0;
	padding:0;
	background:none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details > h2:first-child{
	margin-top:0;
}

/* Deze regel overrulet ook de mobiele variant uit AVD 70 (padding:18px),
   want hij is een niveau specifieker. Volgorde in het bestand maakt
   daardoor niet uit. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details{
	margin:26px 0 0;
	padding:26px 0 0;
	border:0;
	border-top:1px solid #dde5e8;
	border-radius:0;
	background:none;
}


/* ~~~~~ AVD 83 - hoofdmenu blijft op een regel (8 augustus 2026) ~~~~~

   Met "Aanbiedingen" erbij telt het hoofdmenu zes items. In de meelopende
   kopbalk (.col-full-nav.is_stuck) staan naast het menu ook het kleine
   logomerk en de winkelwagen, en dan paste de rij net niet meer: het laatste
   item viel op een tweede regel.

   De ruimte tussen de menu-items komt van RT Mega Menu (15px links en rechts).
   Hier staat hij op 10px, wat 60px scheelt. Bij een smaller scherm wordt hij
   nog krapper, en onder 1183px verdwijnt het logomerk uit de meelopende balk,
   want daaronder passen logo plus zes items plus winkelwagen simpelweg niet.
   Het logo in de gewone kopbalk blijft altijd staan.

   Onder 1025px doet dit blok niets: daar geldt het mobiele menu.

   Terugdraaien: dit hele blok weghalen. Komt er ooit een zevende menu-item
   bij, dan is dit de plek om opnieuw naar te kijken.                        */

@media (min-width: 1025px) {

	.main-navigation .rtmega-menu-area ul.rtmega-megamenu > .menu-item {
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media (min-width: 1025px) and (max-width: 1230px) {

	.main-navigation .rtmega-menu-area ul.rtmega-megamenu > .menu-item {
		padding-left: 6px;
		padding-right: 6px;
	}
}

@media (min-width: 1025px) and (max-width: 1182px) {

	.main-navigation .rtmega-menu-area ul.rtmega-megamenu > .menu-item {
		padding-left: 4px;
		padding-right: 4px;
	}

	.col-full-nav.is_stuck .logo-mark {
		display: none;
	}
}

/* einde AVD 83 */


/* ~~~~~ AVD 86 - badge "Piets keuze" onder de foto (10 augustus 2026) ~~~~~

   Wens:      Een eigen productbadge voor de producten waar dierenarts Piet
              achter staat, herkenbaar anders dan de prijslabels.

   Probleem:  De plugin Product Badges (badge "Piets keuze", voorwaarde is de
              producttag "piets-keuze") kan een badge alleen OP de foto zetten.
              Daar staat het rode label "Extra voordeel" al, op 54% hoogte.
              Twee gekleurde blokken op een foto lezen allebei als aanbieding,
              en dat is deze badge juist niet.

   Oplossing: De badge wordt hier uit de foto gehaald en in de witruimte tussen
              de foto en de productnaam gezet, als lichtblauwe pil met het ronde
              portret van Piet ervoor. Het rode label blijft onaangeroerd staan.

   Herkennen: De plugin geeft geen eigen klasse mee, alleen inline stijl. De
              badge is daarom te herkennen aan zijn achtergrondkleur #eaf3f6,
              die in Product Badges is ingesteld. Wijzig je die kleur daar,
              wijzig hem dan ook in dit blok, anders valt de opmaak weg.

   Terugdraaien: dit hele blok weghalen. De badge staat dan weer op de foto.
                                                                            */

/* 1. Het fotovlak mag niet meer knippen, anders valt de badge eronder weg. */
.avd-kaart:has( .pbfw_square_data > div[style*="#eaf3f6"] ) .avd-fotovlak,
.avd-kaart:has( .pbfw_square_data > div[style*="#eaf3f6"] ) .avd-fotoh {
	overflow: visible !important;
}

/* 2. Ruimte voor de badge tussen de foto en de titel (was 14px). */
.avd-kaart:has( .pbfw_square_data > div[style*="#eaf3f6"] ) .avd-kaartbody {
	padding-top: 32px !important;
}

/* 3. De badge zelf: een pil in plaats van een blok. */
.avd-kaart .pbfw_square_data > div[style*="#eaf3f6"] {
	top: auto !important;
	bottom: -40px !important;
	left: 14px !important;
	right: auto !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 4px 11px 4px 4px !important;
	border-radius: 999px !important;
	gap: 7px;
	background-color: #eaf3f6 !important;
	color: #126985 !important;
	box-shadow: inset 0 0 0 1px #cfe2ea;
	overflow: visible !important;
	z-index: 3 !important;
}

/* 4. Het ronde portret van Piet ervoor. */
.avd-kaart .pbfw_square_data > div[style*="#eaf3f6"]::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #d9ebf2 url( /wp-content/uploads/2026/04/piet-hellemans-150x150.jpg ) center 12% / cover no-repeat;
}

/* 5. De tekst. */
.avd-kaart .pbfw_square_data > div[style*="#eaf3f6"] span {
	width: auto !important;
	font-size: 12px !important;
	line-height: 16px !important;
	white-space: nowrap;
}

/* 6. Telefoon en tablet: alles een maatje kleiner en 13px vanaf de rand,
      want daar is de binnenmarge van de kaart 12px in plaats van 14px. */
@media (max-width: 1024px) {

	.avd-kaart:has( .pbfw_square_data > div[style*="#eaf3f6"] ) .avd-kaartbody {
		padding-top: 28px !important;
	}

	.avd-kaart .pbfw_square_data > div[style*="#eaf3f6"] {
		bottom: -36px !important;
		left: 12px !important;
		padding: 3px 9px 3px 3px !important;
		border-radius: 999px !important;
		gap: 6px;
	}

	.avd-kaart .pbfw_square_data > div[style*="#eaf3f6"]::before {
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
	}

	.avd-kaart .pbfw_square_data > div[style*="#eaf3f6"] span {
		font-size: 11px !important;
		line-height: 15px !important;
	}
}

/* einde AVD 86 */


/* ===== AVD 81 - de shortcode [avd_video] ===== */

.avd-video{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 0;
	margin: 0 auto;
	background: #0d1b21;
	border-radius: 14px;
	overflow: hidden;
}

.avd-video .avd-video-speler{
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	background: #0d1b21;
	border: 0;
	outline: 0;
}

.avd-video .avd-video-start{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 78px;
	height: 78px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(18, 105, 133, 0.92);
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, background 0.15s ease;
}

.avd-video .avd-video-start::before{
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left: 7px;
	border-left: 23px solid #fff;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
}

.avd-video .avd-video-start:hover{
	background: #126985;
	transform: translate(-50%, -50%) scale(1.06);
}

.avd-video .avd-video-start:focus-visible{
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.avd-video.is-bezig .avd-video-start{
	display: none;
}

@media (max-width: 700px){
	/* Op de telefoon over de volle kolombreedte, zonder zwarte randen. */
	.avd-video{
		max-width: none !important;
		border-radius: 12px;
	}
	.avd-video .avd-video-start{
		width: 66px;
		height: 66px;
	}
	.avd-video .avd-video-start::before{
		border-left-width: 19px;
		border-top-width: 12px;
		border-bottom-width: 12px;
	}
}
/* ————— einde AVD 81 ————— */


/* -------------------------------------------------------------
   87. Hero: de rechterpersoon werd afgesneden - 10-08-2026
   -------------------------------------------------------------
   Hoort bij blok 26 hierboven. Dat blok geeft de foto een vaste
   breedte van 1700px (55vw komt daar pas boven ~3090px overheen)
   en zet hem 72px rechts van het midden. Op een breed scherm klopt
   dat, maar de groep is 900px breed en staat rechts in het beeld:
   zodra het venster smaller is dan 1500px valt de rechterkant weg
   en wordt het gezicht van de derde persoon afgesneden. Op 1280px
   ging er 109px af, op 1024px zelfs 237px.

   Drie dingen lossen dat samen op:

   1. DE FOTO KRIMPT MEE. --avd-hero-breedte wordt hier opnieuw
      gezet. De bovengrens is exact de oude waarde, dus vanaf
      ongeveer 1650px verandert er niets. Daaronder wordt de foto
      geleidelijk kleiner, zodat de groep naast de tekst past.
      De ondergrens van 1320px is geen smaakkeuze: bij precies
      1320px is de foto 480px hoog, even hoog als de sectie. Nog
      kleiner en er valt een strook achtergrondkleur onder de foto,
      dwars door de afgesneden lijven heen.

   2. DE FOTO WORDT RECHTS UITGELIJND ALS DAT NODIG IS.
      min() kiest de meest linkse van twee posities: de bestaande
      (midden + 72px) en een die aan de rechterrand hangt. Op brede
      schermen wint de bestaande, dus daar blijft alles zoals het
      was; op smallere schermen de rechter. Omdat het een min() is
      en geen breekpunt, verspringt het beeld nergens.

   3. DE TEKSTKOLOM schuift 34px naar links en staat daarmee precies
      in lijn met de blokken eronder (herotekst stond op 752,5 bij
      een venster van 2560px, de dierkiezer op 718,5).

   De getallen:
     0.1306 = 0,5 - (894 / 2420), ongewijzigd overgenomen uit blok 26
     0.1016 = 1 - (2175 / 2420), de lege strook rechts in de foto
     92vw + 180px  houdt ongeveer 20px lucht tussen het einde van de
                   langste tekstregel en de oranje cirkel - dezelfde
                   afstand als op een breed scherm
     8px    lucht tussen de foto en de rechter schermrand

   Vanaf 1025px, want op 1024px en lager zet Elementor zelf een
   padding van 7em/4em op deze sectie (dan is hij hoger dan 480px)
   en geldt tussen 768 en 1023px het tabletblok uit
   avd-homepagina.css: foto onderaan, tekst erboven.

   Terugdraaien: dit hele blok weghalen. Blok 26 werkt dan weer
   zoals hiervoor.
   ------------------------------------------------------------- */

@media (min-width: 1025px) {

  section.elementor-element.elementor-element-a11552a {

    --avd-hero-breedte: clamp(
        1320px,
        calc(92vw + 180px),
        clamp(1700px, 55vw, 2420px)
      );

    background-position: min(
        calc(50% - 150px + var(--avd-hero-breedte) * 0.1306),
        calc(100% + var(--avd-hero-breedte) * 0.1016 - 8px)
      ) top !important;
  }

  .elementor-182844 .elementor-element-a11552a .elementor-element-c31449f {
    margin-left: -34px;
  }

}
/*  einde AVD 87  */


/* ============================================================================
   AVD BLOK 88a - nieuwsbriefblok in de footer
   Hoort bij AVD BLOK 88 in functions.php.

   Een witte kaart met hoekstraal 10 op de ijsblauwe band, exact hetzelfde
   idioom als .avd-voet-hulp op mobiel. Op desktop spant hij het hele raster
   en staat hij door order:-1 boven de vier kolommen; op mobiel is het raster
   al display:block, dus staat hij vanzelf tussen het merkblok en de hulpkaart.
   Knop, invoerveld en teksten volgen de bestaande footerwaarden.
   ============================================================================ */

.avd-voet-nieuws{grid-column:1 / -1;order:-1;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
  margin-bottom:36px;padding:26px 28px;background:#fff;border-radius:10px}

.avd-nb-piet{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.avd-nb-piet-foto{width:44px;height:44px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:50% 18%;background:#dceaef}
.avd-nb-piet-tekst{font-size:13.5px;line-height:1.35;color:#3d5560}
.avd-nb-piet-tekst b{display:block;color:#0d2a35;font-weight:600}

.avd-nb-kop{margin:0 0 5px;font-size:20px;font-weight:600;line-height:1.3;color:#0d2a35}
.avd-nb-uit{margin:0;font-size:15.5px;line-height:1.6;color:#3d5560;max-width:52ch}

.avd-voet .avd-nb-form{margin:0}
.avd-nb-velden{display:flex;gap:10px}
.avd-voet .avd-nb-input{flex:1 1 auto;width:100%;min-width:0;min-height:48px;margin:0;padding:0 15px;
  border:1px solid #c3d8e0;border-radius:6px;background:#fff;box-shadow:none;
  font-family:inherit;font-size:16px;line-height:1.4;color:#22333b}
.avd-voet .avd-nb-input::placeholder{color:#94a9b2;opacity:1}
.avd-voet .avd-nb-input:focus{border-color:#126985;outline:2px solid #126985;outline-offset:1px;box-shadow:none}
.avd-voet button.avd-nb-knop{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;height:auto;margin:0;padding:8px 22px;border:0;border-radius:6px;
  background:#126985;color:#fff;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;
  letter-spacing:normal;text-transform:none;cursor:pointer;width:auto}
.avd-voet button.avd-nb-knop:hover,.avd-voet button.avd-nb-knop:focus{background:#0d5468;color:#fff}
.avd-voet button.avd-nb-knop[disabled]{opacity:.65;cursor:default}

.avd-nb-klein{margin:10px 0 0;font-size:13px;line-height:1.5;color:#5b7480}
.avd-nb-klein a{color:#126985;text-decoration:underline}
.avd-nb-fout{margin:10px 0 0;font-size:14px;line-height:1.5;color:#a3302a}

.avd-nb-verborgen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.avd-nb-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.avd-nb-succes{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;
  background:#eaf3f6;border:1px solid #c3d8e0;border-radius:6px}
.avd-nb-vink{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#3f9c6d;color:#fff;font-size:12px;font-weight:700;line-height:1}
.avd-nb-succes-in{display:block}
.avd-nb-succes-kop{display:block;margin-bottom:1px;font-size:14.5px;font-weight:600;color:#0d2a35}
.avd-nb-succes-tekst{display:block;font-size:14px;line-height:1.5;color:#3d5560}

.avd-voet-nieuws [hidden]{display:none}
.avd-nb-form[hidden]{display:none}
.avd-nb-succes[hidden]{display:none}

/* tussenmaat, gelijk aan de rest van de footer */
@media (min-width:769px) and (max-width:899px){
  .avd-voet-nieuws{gap:24px;margin-bottom:28px;padding:22px 20px}
  .avd-nb-kop{font-size:18px}
  .avd-nb-uit{font-size:15px}
}

/* mobiel: dezelfde witte kaart als "Hulp nodig?" */
@media (max-width:768px){
  .avd-voet-nieuws{display:block;order:0;margin:0 20px 24px;padding:20px;border-radius:10px}
  .avd-nb-kop{font-size:17px}
  .avd-nb-uit{font-size:15.5px;max-width:none}
  .avd-nb-velden{display:block;margin-top:16px}
  .avd-voet .avd-nb-input{width:100%}
  .avd-voet button.avd-nb-knop{display:flex;width:100%;margin-top:10px}
  .avd-nb-succes{margin-top:16px}
}
/* ===== einde AVD BLOK 88a ===== */


/* ~~~~~ AVD 40 - filter "Advies van Piet" (15-08-2026) ~~~~~

   Wens van Sean: klanten moeten de producten met de badge "Piets keuze" kunnen
   aanvinken in het filter, en het moet er op mobiel en desktop mooi uitzien.

   In Filter Everything staat nu een filter op de producttag "Piets keuze"
   (filterset "Product filters", titel "Advies van Piet", url-deel _pietskeuze).
   Dat filter staat bovenaan. Hieronder krijgt het de vorm van een lichtblauwe
   kaart met het ronde portret van Piet, dezelfde taal als de badge op de
   productkaart.

   Terugdraaien: dit blok weghalen. Het filter blijft dan gewoon werken, maar
   ziet eruit als alle andere filters. */

.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag {
	background: #eaf3f6;
	border: 1px solid #d9ebf2;
	border-radius: 14px;
	padding: 14px 16px 12px;
	margin-bottom: 18px;
}

.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag .wpc-filter-header {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag .wpc-filter-title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	background: none;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
	color: #0d2a35;
	text-transform: none;
}

.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag .wpc-filter-title:before {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff url("https://www.allesvoordieren.nl/wp-content/uploads/2026/04/piet-hellemans-150x150.jpg.webp") no-repeat center center;
	background-size: cover;
	box-shadow: 0 0 0 2px #fff;
}

/* Een regel uitleg onder de kop, zodat duidelijk is wat je aanvinkt. */
.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag .wpc-filter-header:after {
	content: "De producten die dierenarts Piet zelf aanraadt.";
	display: block;
	margin: 8px 0 2px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #5b6b73;
}

.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag .wpc-filter-content {
	padding: 0;
	margin: 0;
}

.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag .wpc-filters-ul-list {
	margin: 0;
	padding: 0;
}

.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag .wpc-term-item {
	margin: 0;
}

.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag .wpc-term-item-content-wrapper {
	align-items: center;
	min-height: 40px;
}

.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag label {
	/* 15-08-2026: gewone filtertekst, net als in de andere filters. */
	font-size: 15px;
	font-weight: 400;
	color: #3d4d55;
}

/* Op mobiel zit het filterpaneel in een lade; daar mag de kaart iets compacter. */
@media (max-width: 992px) {

	.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag {
		padding: 12px 14px 10px;
		margin-bottom: 14px;
	}

	.wpc-filters-main-wrap .wpc-filters-section.wpc-filter-product_tag .wpc-term-item-content-wrapper {
		min-height: 48px;
	}
}

/* einde AVD 40 */


/* ~~~~~ AVD 41 - mobiele hero: Piet valt er niet meer af (15-08-2026) ~~~~~

   Melding van Sean: op een smal scherm was het hoofd van Piet weg. Dat is het
   eerste wat iemand ziet, dus dat moet overal kloppen.

   Oorzaak: de mobiele hero is een lege Elementor-sectie met de foto als
   achtergrond. Die stond op background-size: cover met background-position
   linksboven, en de hoogte kwam uit 105px + 180px binnenmarge. De foto is
   1200 bij 740 (verhouding 1,62) terwijl de sectie op 390px een verhouding van
   1,30 had. Met cover wordt de foto dan opgeschaald tot hij de hoogte vult en
   daarna rechts afgesneden: 93px weg op een scherm van 390, en 163px op 320.
   Precies het stuk waar Piet staat.

   Nu: de sectie krijgt de verhouding van de foto zelf en de foto past er
   helemaal in. Op elke breedte zie je dus de hele foto, tekst en Piet.

   Terugdraaien: dit blok weghalen. */

.elementor-element-f11ece9 {
	background-size: contain !important;
	background-position: center top !important;
	background-repeat: no-repeat !important;
	background-color: #ebe7e8 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	aspect-ratio: 1200 / 740;
	min-height: 0 !important;
}

/* einde AVD 41 */


/* ~~~~~ AVD 42 - 22-08-2026 - De herhaalbadge hield precies nul pixels over ~~~~~

   Wat er misging: de badge op de productkaart is 108 px breed met 10 px
   binnenmarge, dus 88 px ruimte voor de inhoud. Die inhoud - icoon 13 px,
   marge 8 px en de tekst "Herhaal -5%" - vraagt ongeveer 90 px. Het past dus
   net niet, en hoeveel het scheelt hangt af van het lettertype van de
   bezoeker: de badge erft geen webfont en valt terug op het systeemlettertype.
   Op de ene machine past het nog, op de andere valt de rechter binnenmarge
   weg. Het lag dus niet aan de schermbreedte.

   Wat er nu staat: 108 px is een ondergrens in plaats van een vaste maat.
   Past de tekst, dan verandert er niets en blijven de badges even breed als
   elkaar. Past hij niet, dan groeit alleen die ene badge een paar pixels mee
   en blijft de binnenmarge van 10 px gewoon staan.

   Geldt voor beide badges (Herhaal en Extra voordeel) zodat ze even breed
   blijven, alleen op desktop vanaf 768 px, en nooit op de productpagina.

   Terugdraaien: dit hele blok tot "einde AVD 42" weghalen.
   ~~~~~ */

@media (min-width: 768px) {

	body:not(.single-product) .avd-kaartfoto .pbfw_square_data.avd-badge-herhaal > div,
	body:not(.single-product) .avd-kaartfoto .pbfw_square_data > div[style*="#CA2C2C"],
	body:not(.single-product) .woolentor-product-image .pbfw_square_data.avd-badge-herhaal > div,
	body:not(.single-product) .woolentor-product-image .pbfw_square_data > div[style*="#2d8665"] {
		width: auto !important;
		min-width: 108px !important;
		max-width: none !important;
	}

}

/* einde AVD 42 */

/* ~~~~~ AVD 43 - menu op tablet 769-1024 px (fixlog 167, 01-10-2026) ~~~~~
   Tussen 769 en 1024 px stond er geen menu: RT Mega Menu verbergt het desktopmenu
   tot en met 1024 px, onze menuknop kwam pas onder 769 px terug en de eigen
   menulade stond vanaf 993 px altijd op display:none. De balk met het winkelmandje
   blijft op 993-1024 px bewust staan. Het menuscript in
   functions.php (blok 08) start sinds fixlog 167 tot en met 1024 px.
   Terugdraaien: dit blok weghalen en in functions.php 1024 weer 992 maken. */
@media (min-width: 769px) and (max-width: 1024px) {
	.site-header .menu-toggle { display: block !important; }
}
@media (min-width: 993px) and (max-width: 1024px) {
	html .avd-menu { display: block !important; }
}
/* einde AVD 43 */