/* Mijn account - Van Yild Tegels.
   Letterlijk overgenomen uit snippet 8291 (vy-mijn-account 2.3.7). Niet herschrijven: de klant
   is tevreden over dit scherm en tests/test_vy_account.py vergelijkt dit bestand met de bron.
   Enige afwijking: de terugvalkleur van --vy-accent is #105CDA. Dat was de waarde van
   --e-global-color-accent in de Elementor-kit; die variabele bestaat op de nieuwe site niet meer.
   De regels voor .vy-ma-knopje (de accountknop in de header) staan hier ook in; de schil
   linkt dit bestand daarom op elke pagina, of neemt dat blok over via vy_account.knop_css(). */
/* Het thema en Elementor zetten koppen, links en knoppen agressief op
   eigen waarden. Binnen .vy-ma zetten we die daarom expliciet terug,
   anders krijg je de reuzenkoppen van de standaardpagina terug. */
.vy-ma{
	--vy-ink:#15171a; --vy-zacht:#6b7280; --vy-lijn:#e7e7e3; --vy-was:#fafaf8;
	--vy-accent:var(--e-global-color-accent,#105CDA); --vy-ok:#1f7a4d; --vy-stop:#b42318;
	font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	display:grid; grid-template-columns:250px minmax(0,1fr); gap:34px;
	max-width:1120px; margin:0 auto; padding:8px 0 72px; color:var(--vy-ink);
	font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.vy-ma *{box-sizing:border-box;}
/* Accountknop voor de header. Losstaand van .vy-ma, dus eigen reset:
   Elementor stijlt links in de header met eigen kleuren en hover. */
.vy-ma-knopje,.vy-ma-knopje:hover,.vy-ma-knopje:focus,.vy-ma-knopje:active,.vy-ma-knopje:visited{
	display:inline-flex!important; align-items:center!important; gap:9px; vertical-align:middle;
	background:none!important; background-color:transparent!important; border:0!important;
	box-shadow:none!important; padding:4px!important; margin:0!important; border-radius:0!important;
	font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
	font-size:14px!important; font-weight:600!important; line-height:1!important;
	color:currentColor!important; text-decoration:none!important; letter-spacing:normal!important;
}
.vy-ma-knopje__ico{position:relative; display:inline-flex; align-items:center; justify-content:center;}
.vy-ma-knopje__ico svg{width:23px; height:23px; display:block; transition:opacity .14s ease;}
.vy-ma-knopje:hover .vy-ma-knopje__ico svg{opacity:.65;}
.vy-ma-knopje__stip{position:absolute; top:-1px; right:-2px; width:8px; height:8px; border-radius:50%;
	background:#1f7a4d; border:2px solid #fff; box-sizing:content-box;}
.vy-ma-knopje__tekst{white-space:nowrap;}
/* Uitgelogd is er geen zijbalk; dan moet de eerste kolom van 250px ook
   verdwijnen, anders wordt het inlogscherm daarin geperst. */
.vy-ma.is-solo{grid-template-columns:minmax(0,1fr); max-width:920px; padding-top:34px;}
.vy-ma h1,.vy-ma h2,.vy-ma h3,.vy-ma h4{
	font-family:inherit!important; color:var(--vy-ink)!important; text-transform:none!important;
	letter-spacing:-.01em!important; margin:0!important; padding:0!important; line-height:1.25!important;
}
.vy-ma p{margin:0!important; padding:0!important;}
.vy-ma a{text-decoration:none!important; color:inherit;}
/* Typografiereset voor links die NIET van ons zijn: de privacytekst onder
   het aanmaakformulier, de meldingen van WooCommerce en het vangnet
   onderaan. Die hebben geen klasse en erven zonder deze regel de
   linktypografie van het thema, en die verschilt per Elementor-template.
   Bewust :not([class]) (0,2,1) en NIET het bredere ".vy-ma a" uit
   vy-winkel: dat is 0,1,1 en zou met !important onze eigen linkklassen
   overrulen, want .vy-ma-knop, .vy-ma-tekstlink, .vy-ma-terug,
   .vy-ma__navlink en .vy-ma-paging__knop staan allemaal op 0,1,0. In
   vy-winkel 1.7.1 stond die fout een uur live. :not([class]) raakt per
   definitie geen enkele klasse, dus ook geen van onszelf.
   color en text-decoration staan er bewust niet in: .vy-ma a hierboven
   doet dat al, en .vy-ma .woocommerce-privacy-policy-text a (verderop,
   ook 0,2,1 maar later in de bron) moet zijn onderstreping houden. */
.vy-ma a:not([class]){
	font-family:inherit!important; font-size:inherit!important; font-weight:inherit!important;
	line-height:inherit!important; letter-spacing:inherit!important; text-transform:none!important;
}
.vy-ma ul,.vy-ma ol{margin:0!important; padding:0!important; list-style:none!important;}
.vy-ma address{font-style:normal!important; margin:0!important;}
/* Bedragen. wc_price() en get_formatted_order_total() leveren een
   span.woocommerce-Price-amount.amount met een bdi en een los valutateken
   erin, en bij prijzen exclusief btw ook een small.tax_label. Thema's
   stijlen .amount rechtstreeks, want dat is de prijsopmaak op de
   productpagina. Dat kind wint dus van onze overerving: .vy-ma-regel__bedrag
   (13,5px), .vy-ma-artikel__prijs en de <strong> in .vy-ma-totaal (17px)
   zetten wel hun eigen maat, maar het bedrag zit een niveau dieper en
   trok zich daar niets van aan. Zelfde patroon als in vy-winkel, met
   .vy-ma als scope.
   Specificiteit: .vy-ma .amount / .vy-ma .woocommerce-Price-amount /
   .vy-ma .tax_label = 0,2,0 en .vy-ma bdi = 0,1,1. Dat laatste is de
   krapste en staat gelijk aan .elementor-kit-N bdi, maar deze <style>
   staat in de body en dus later in het document dan de kit in de <head>;
   bovendien is alles hier !important en zijn de kitregels dat niet.
   .includes_tax staat erbij omdat get_formatted_order_total() zijn btw-regel
   in <small class="includes_tax"> zet en niet in .tax_label; wc_price() doet
   het andersom. Beide dus.
   Overschrijft geen enkele eigen regel: wij gebruiken .amount, bdi,
   tax_label, includes_tax en woocommerce-Price-* nergens zelf (nagelopen op
   de hele snippet). Bewust niet de kale <small>: .vy-ma-artikel__naam small
   heeft een eigen maat van 11,5px en die moet blijven. */
.vy-ma .woocommerce-Price-amount,
.vy-ma .amount,
.vy-ma .woocommerce-Price-currencySymbol,
.vy-ma .tax_label,
.vy-ma .includes_tax,
.vy-ma bdi{
	font-size:inherit!important; font-weight:inherit!important;
	line-height:inherit!important; letter-spacing:inherit!important; color:inherit;
}
/* Bij een deels terugbetaalde bestelling geeft get_formatted_order_total()
   "<del>oud bedrag</del> <ins>nieuw bedrag</ins>" terug. Die twee waren
   nergens gestyled en kregen dus de themaopmaak: <ins> staat in elke
   browser standaard onderstreept en veel thema's zetten er ook nog een
   markeerkleur achter, waardoor het nieuwe bedrag op een link ging lijken.
   De doorhaling van <del> moet juist blijven staan, want dat is de hele
   betekenis; hij wordt alleen gedempt zodat het nieuwe bedrag voorgaat.
   Beide 0,1,1. Overschrijft geen eigen regel: <del> en <ins> staan nergens
   in onze eigen markup, ze komen uitsluitend uit WooCommerce. */
.vy-ma del,.vy-ma ins{
	font-size:inherit!important; font-weight:inherit!important;
	line-height:inherit!important; letter-spacing:inherit!important;
	background:none!important; color:inherit;
}
.vy-ma del{text-decoration:line-through!important; opacity:.55;}
.vy-ma ins{text-decoration:none!important;}
/* Knopreset. Hier stond alleen font-family en cursor, en dat is te weinig:
   Elementor stijlt elke <button> op deze site mee (0,1,1 via
   .elementor-kit-N button, inclusief die roze hover) en wint daarmee van
   .vy-ma-knop op 0,1,0. Zonder font-size en line-height pakt een <button>
   bovendien de maat van de browser zelf (13,33px Arial) of die van de kit,
   want een button erft van huis uit geen typografie. Zelfde patroon als in
   vy-winkel, in alle toestanden.
   Alles wat er als knop uit moet zien krijgt zijn maten verderop terug
   onder "Knopherstel", op 0,2,0 / 0,3,0.
   Bewust NIET in deze reset:
   - outline: dat zou de toetsenbordfocus onzichtbaar maken;
   - transition: die staat op .vy-ma-knop (0,1,0) en daar is geen klacht
     over; een reset zou hem stilzwijgend uitzetten.
   border, border-radius en padding staan hier ook niet in, maar wel in het
   Knopherstel verderop. Daar worden ze op 0,2,0 met !important vastgezet,
   zodat een padding uit de Elementor-kit (0,1,1) onze knopmaat niet meer
   overneemt en <button> en <a class="vy-ma-knop"> op hetzelfde uitkomen.
   :focus-visible en :focus-within staan er niet bij omdat een element dat
   :focus-visible is ook :focus is, en deze declaraties !important zijn -
   dan wint deze regel al. :visited bestaat niet op een <button>.
   cursor staat los en zonder !important, anders zou hij (0,1,1) winnen van
   .vy-ma-knop:disabled{cursor:default} (0,2,0). */
.vy-ma button,
.vy-ma button:hover,
.vy-ma button:focus,
.vy-ma button:active{
	background-color:transparent!important; background-image:none!important;
	box-shadow:none!important; text-shadow:none!important;
	transform:none!important; filter:none!important; text-decoration:none!important;
	font-family:inherit!important; font-size:inherit!important; font-weight:inherit!important;
	line-height:inherit!important; letter-spacing:normal!important; text-transform:none!important;
	min-height:0!important;
}
.vy-ma button{font-family:inherit; cursor:pointer;}
.vy-ma-h1{font-size:26px!important; font-weight:650!important;}
.vy-ma-h2{font-size:12px!important; font-weight:700!important; letter-spacing:.08em!important;
	text-transform:uppercase!important; color:var(--vy-zacht)!important;}
.vy-ma-onder{color:var(--vy-zacht); font-size:13px; margin-top:5px!important;}
.vy-ma-kop{margin-bottom:22px;}

/* Zijbalk */
.vy-ma__zij{position:sticky; top:24px; align-self:start;}
.vy-ma__wie{display:flex; gap:11px; align-items:center; padding:0 12px 16px; margin-bottom:10px; border-bottom:1px solid var(--vy-lijn);}
.vy-ma__avatar{flex:0 0 38px; width:38px; height:38px; border-radius:50%; background:var(--vy-ink); color:#fff;
	display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px;}
.vy-ma__wie-tekst{min-width:0;}
.vy-ma__wie-tekst strong{display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vy-ma__wie-tekst small{display:block; font-size:11.5px; color:var(--vy-zacht); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vy-ma__nav{display:flex; flex-direction:column; gap:1px;}
.vy-ma__navlink{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
	font-size:13.5px; font-weight:500; color:var(--vy-ink)!important; transition:background .14s ease,color .14s ease;}
.vy-ma__navlink:hover{background:var(--vy-was);}
.vy-ma__navlink.is-actief{background:var(--vy-ink); color:#fff!important; font-weight:600;}
.vy-ma__navlink--uit{margin-top:8px; padding-top:14px; border-top:1px solid var(--vy-lijn); border-radius:0 0 9px 9px; color:var(--vy-zacht)!important;}
.vy-ma__navlink--uit:hover{color:var(--vy-stop)!important; background:transparent;}
.vy-ma-ico{width:17px; height:17px; flex:0 0 17px;}

/* Paneel */
.vy-ma__paneel{position:relative; min-width:0;}
.vy-ma__inhoud{transition:opacity .16s ease;}
.vy-ma__inhoud.is-laden{opacity:.35; pointer-events:none;}
.vy-ma__toast{position:sticky; top:14px; z-index:5; margin-bottom:14px; background:var(--vy-ink); color:#fff;
	border-radius:10px; padding:11px 16px; font-size:13px; font-weight:500; box-shadow:0 8px 26px rgba(0,0,0,.16);}
.vy-ma__toast.is-fout{background:var(--vy-stop);}
.vy-ma__toast[hidden]{display:none;}

.vy-ma-kaart{background:#fff; border:1px solid var(--vy-lijn); border-radius:14px; padding:20px 22px; margin-bottom:16px;}
.vy-ma-kaart--smal{max-width:460px; margin-inline:auto;}
.vy-ma-kaart__kop{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px;}
.vy-ma-duo{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.vy-ma-duo .vy-ma-kaart{margin-bottom:0;}
.vy-ma-tekstlink{color:var(--vy-accent)!important; font-size:12.5px; font-weight:600;}
.vy-ma-tekstlink:hover{text-decoration:underline!important;}
.vy-ma-terug{display:inline-block; margin-bottom:12px; font-size:12.5px; font-weight:600; color:var(--vy-zacht)!important;}
.vy-ma-terug:hover{color:var(--vy-ink)!important;}

/* Cijfers */
.vy-ma-cijfers{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px;}
.vy-ma-cijfer{background:var(--vy-was); border:1px solid var(--vy-lijn); border-radius:12px; padding:15px 17px;}
.vy-ma-cijfer__getal{display:block; font-size:24px; font-weight:650; letter-spacing:-.02em;}
.vy-ma-cijfer__label{display:block; font-size:11.5px; color:var(--vy-zacht); margin-top:1px;}

/* Bestelregels */
.vy-ma-lijst{display:block;}
.vy-ma-regel{border-top:1px solid var(--vy-lijn);}
.vy-ma-regel:first-child{border-top:0;}
.vy-ma-regel__link{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 4px;
	border-radius:8px; transition:background .14s ease;}
.vy-ma-regel__link:hover{background:var(--vy-was);}
/* De regel hierboven zet layout en geen typografie, en dit is een <a>. Zo
   kwam de bestelregel uit op de linkmaat van het thema in plaats van op de
   14px/1,55 van .vy-ma. inherit is hier precies wat de regel altijd al
   bedoeld heeft; de kinderen (strong, __meta, __bedrag, de pillen) zetten
   hun eigen maat en veranderen dus niet.
   0,2,1 want a.vy-ma-regel__link binnen .vy-ma; dat wint van
   .elementor-kit-N a (0,1,1). Bewust alleen typografie: de mobiele
   override op .vy-ma-regel__link (0,1,0, in de 900px-media-query) zet
   flex-direction, gap en padding en blijft dus gewoon staan. */
.vy-ma a.vy-ma-regel__link{
	font-family:inherit!important; font-size:inherit!important; font-weight:inherit!important;
	line-height:inherit!important; letter-spacing:inherit!important;
}
.vy-ma-regel__hoofd strong{display:block; font-size:14px; font-weight:600;}
.vy-ma-regel__meta{display:block; font-size:11.5px; color:var(--vy-zacht); margin-top:2px;}
.vy-ma-regel__rechts{display:flex; align-items:center; gap:11px; flex-wrap:wrap; justify-content:flex-end;}
.vy-ma-regel__bedrag{font-weight:600; font-size:13.5px; min-width:72px; text-align:right;}
.vy-ma-regel__pijl{color:var(--vy-zacht); font-size:19px; line-height:1;}
.vy-ma-pil{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600;
	background:var(--vy-was); border:1px solid var(--vy-lijn); white-space:nowrap;}
.vy-ma-pil--processing{background:rgba(31,122,77,.1); border-color:rgba(31,122,77,.2); color:var(--vy-ok);}
.vy-ma-pil--completed{background:rgba(31,122,77,.14); border-color:rgba(31,122,77,.26); color:var(--vy-ok);}
.vy-ma-pil--cancelled,.vy-ma-pil--failed,.vy-ma-pil--refunded{background:rgba(180,35,24,.08); border-color:rgba(180,35,24,.2); color:var(--vy-stop);}
.vy-ma-tt-pil{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600;
	background:var(--vy-accent); color:#fff; white-space:nowrap;}

/* Tijdlijn */
.vy-ma-tijdlijn{display:flex; gap:0; margin-bottom:4px!important;}
.vy-ma-tijdlijn__stap{flex:1; position:relative; text-align:center; padding-top:26px;}
.vy-ma-tijdlijn__stap:before{content:""; position:absolute; top:8px; left:0; right:50%; height:2px; background:var(--vy-lijn);}
.vy-ma-tijdlijn__stap:after{content:""; position:absolute; top:8px; left:50%; right:0; height:2px; background:var(--vy-lijn);}
.vy-ma-tijdlijn__stap:first-child:before,.vy-ma-tijdlijn__stap:last-child:after{display:none;}
.vy-ma-tijdlijn__stap.is-klaar:before,.vy-ma-tijdlijn__stap.is-klaar:after{background:var(--vy-ok);}
.vy-ma-tijdlijn__stap.is-nu:after{background:var(--vy-lijn);}
.vy-ma-tijdlijn__bol{position:absolute; top:2px; left:50%; transform:translateX(-50%); width:14px; height:14px;
	border-radius:50%; background:#fff; border:2px solid var(--vy-lijn);}
.vy-ma-tijdlijn__stap.is-klaar .vy-ma-tijdlijn__bol{background:var(--vy-ok); border-color:var(--vy-ok);}
.vy-ma-tijdlijn__stap.is-nu .vy-ma-tijdlijn__bol{box-shadow:0 0 0 4px rgba(31,122,77,.15);}
.vy-ma-tijdlijn__label{font-size:12px; font-weight:600; color:var(--vy-zacht);}
.vy-ma-tijdlijn__stap.is-klaar .vy-ma-tijdlijn__label{color:var(--vy-ink);}
.vy-ma-tt{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
	margin-top:18px; padding-top:16px; border-top:1px solid var(--vy-lijn);}
.vy-ma-tt strong{display:block; font-size:13px; font-weight:650;}
.vy-ma-code{display:inline-block; margin-top:3px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size:12.5px; background:var(--vy-was); border:1px solid var(--vy-lijn); border-radius:7px; padding:4px 9px;}

/* Artikelen */
.vy-ma-artikel{display:flex; align-items:baseline; gap:14px; padding:11px 0; border-top:1px solid var(--vy-lijn); font-size:13.5px;}
.vy-ma-artikel:first-child{border-top:0;}
.vy-ma-artikel__naam{flex:1; font-weight:500;}
.vy-ma-artikel__naam small{display:block; font-size:11.5px; color:var(--vy-zacht); font-weight:400; margin-top:1px;}
.vy-ma-artikel__aantal{color:var(--vy-zacht); font-size:12.5px; min-width:34px; text-align:right;}
.vy-ma-artikel__prijs{font-weight:600; min-width:78px; text-align:right;}
.vy-ma-artikel--extra .vy-ma-artikel__naam{font-weight:400; color:var(--vy-zacht);}
.vy-ma-totaal{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
	margin-top:14px; padding-top:14px; border-top:2px solid var(--vy-ink); font-size:15px;}
.vy-ma-totaal strong{font-size:17px; font-weight:700;}
.vy-ma-adres{font-size:13.5px; line-height:1.6; color:var(--vy-ink);}

/* Samples */
/* auto-fill met 1fr rekt de laatste kolom op tot de volle breedte. Bij een
   smalle kaart blijft er een kolom over en werd een tegeltje van 148px dus
   een vierkant van ~370px, want de afbeelding heeft aspect-ratio 1. Een
   bovengrens houdt de tegels op formaat; justify-content laat de rij dan
   netjes links uitlijnen in plaats van de ruimte te verdelen. */
.vy-ma-samples{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,200px)); gap:14px; justify-content:start;}
.vy-ma-sample{border:1px solid var(--vy-lijn); border-radius:12px; overflow:hidden; display:flex; flex-direction:column;}
.vy-ma-sample__beeld{aspect-ratio:1; background:var(--vy-was); overflow:hidden;}
.vy-ma-sample__beeld img{width:100%; height:100%; object-fit:cover; display:block;}
.vy-ma-sample__geenbeeld{display:block; width:100%; height:100%; background:linear-gradient(135deg,#f0f0ec,#e4e4de);}
.vy-ma-sample__naam{font-size:12.5px!important; font-weight:600!important; padding:11px 12px 9px; flex:1;}
.vy-ma-sample .vy-ma-knop{margin:0 12px 12px;}
.vy-ma-sample__weg{display:block; margin:0 12px 12px; font-size:11.5px; color:var(--vy-zacht);}

/* Knoppen */
.vy-ma-knop{display:inline-flex; align-items:center; justify-content:center; background:var(--vy-ink);
	color:#fff!important; border:1px solid var(--vy-ink); border-radius:9px; padding:10px 20px;
	font-size:13px; font-weight:600; transition:background .14s ease,border-color .14s ease;}
.vy-ma-knop:hover{background:#2c3238; border-color:#2c3238; color:#fff!important;}
.vy-ma-knop:disabled{opacity:.6; cursor:default;}
.vy-ma-knop--licht{background:#fff; color:var(--vy-ink)!important; border-color:var(--vy-lijn);}
.vy-ma-knop--licht:hover{background:var(--vy-was); border-color:var(--vy-ink); color:var(--vy-ink)!important;}
.vy-ma-knop--klein{padding:7px 14px; font-size:12px; border-radius:8px;}

/* Formulieren */
.vy-ma-raster{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;}
.vy-ma-veld{display:flex; flex-direction:column; gap:6px; min-width:0;}
.vy-ma-veld--vol{grid-column:1/-1;}
.vy-ma-veld label{font-size:12.5px!important; font-weight:600!important; color:var(--vy-ink)!important; margin:0!important;}
.vy-ma-optie{font-weight:400; color:var(--vy-zacht);}
.vy-ma-veld input,.vy-ma-veld select{
	width:100%; border:1px solid var(--vy-lijn)!important; border-radius:9px!important; background:#fff!important;
	padding:10px 12px!important; font-size:14px!important; font-family:inherit!important; color:var(--vy-ink)!important;
	margin:0!important; height:auto!important; line-height:1.4!important; box-shadow:none!important; transition:border-color .14s ease,box-shadow .14s ease;
}
.vy-ma-veld input:focus,.vy-ma-veld select:focus{
	outline:none!important; border-color:var(--vy-ink)!important; box-shadow:0 0 0 3px rgba(21,23,26,.08)!important;
}
.vy-ma-veld.is-fout input,.vy-ma-veld.is-fout select{border-color:var(--vy-stop)!important;}
.vy-ma-fout{font-size:11.5px; color:var(--vy-stop); min-height:0;}
.vy-ma-fout:empty{display:none;}
.vy-ma-scheiding{margin:24px 0 14px; padding-top:20px; border-top:1px solid var(--vy-lijn);}
/* Losse knoprij zonder de streep van .vy-ma-formvoet: die staat hier al
   onder, in .vy-ma-scheiding, en twee lijnen vlak boven elkaar oogt slordig. */
.vy-ma-keuze{margin-top:16px;}
.vy-ma-formvoet{display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--vy-lijn);}
.vy-ma-melding{border-radius:10px; padding:12px 15px; font-size:13px; margin-bottom:16px!important;}
.vy-ma-melding--ok{background:rgba(31,122,77,.09); color:var(--vy-ok);}
.vy-ma-melding--fout{background:rgba(180,35,24,.08); color:var(--vy-stop);}
.vy-ma-leeg{text-align:center; padding:26px 10px;}
.vy-ma-leeg p{color:var(--vy-zacht); font-size:13.5px; margin-bottom:14px!important;}
/* Twee klassen diep (0,2,0) en niet .vy-ma-leeg__hint alleen (0,1,0): de
   regel hierboven is .vy-ma-leeg p, dus 0,1,1, en die zou anders winnen.
   De marge moet er !important bij omdat de tegenhanger dat ook heeft. */
.vy-ma-leeg .vy-ma-leeg__hint{max-width:390px; margin:20px auto 0!important; font-size:12.5px; line-height:1.6;}

/* Inloggen en registreren */
.vy-ma-inlog{display:grid; grid-template-columns:1fr; gap:18px; max-width:460px; margin:0 auto;}
.vy-ma-inlog.is-duo{grid-template-columns:1fr 1fr; max-width:860px; align-items:start;}
.vy-ma-inlog .vy-ma-kaart{margin-bottom:0; padding:26px 28px;}
.vy-ma-inlog .vy-ma-h1{font-size:21px!important;}
.vy-ma-inlog .vy-ma-onder{margin-bottom:18px!important;}
.vy-ma-inlog .vy-ma-form{max-width:none; gap:0;}
.vy-ma-kaart--rustig{background:var(--vy-was);}
.vy-ma-inlogvoet{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:12px 0 16px;}
.vy-ma-onthouden{display:inline-flex!important; flex-direction:row!important; align-items:center; gap:8px;
	font-size:12.5px!important; font-weight:400!important; color:var(--vy-zacht); cursor:pointer; white-space:nowrap;}
.vy-ma-onthouden input{width:auto!important; flex:0 0 auto; margin:0!important; accent-color:var(--vy-ink);}
.vy-ma-onthouden span{line-height:1;}
/* De privacytekst die WooCommerce onder het aanmaakformulier zet. */
.vy-ma .woocommerce-privacy-policy-text p{font-size:12px!important; line-height:1.5!important;
	color:var(--vy-zacht)!important; margin:0 0 14px!important;}
.vy-ma .woocommerce-privacy-policy-text a{color:var(--vy-accent)!important; text-decoration:underline!important;}
.vy-ma-knop--breed{width:100%; justify-content:center; padding:12px 20px; font-size:14px;}
.vy-ma-knop--licht{background:#fff!important; color:var(--vy-ink)!important; border:1px solid var(--vy-lijn)!important;}
.vy-ma-knop--licht:hover{background:var(--vy-was)!important; border-color:var(--vy-ink)!important; color:var(--vy-ink)!important;}
/* Meldingen van WooCommerce binnen onze kaart */
.vy-ma .woocommerce-error,.vy-ma .woocommerce-message,.vy-ma .woocommerce-info{
	list-style:none!important; margin:0 0 14px!important; padding:11px 14px!important;
	border:0!important; border-radius:9px!important; font-size:13px!important; background:var(--vy-was)!important;
}
.vy-ma .woocommerce-error{background:rgba(180,35,24,.08)!important; color:var(--vy-stop)!important;}
/* De 13px staat op de <ul> hierboven, maar de tekst van de melding zit in
   de <li>. Deze regel zette alleen margin, padding en list-style, dus een
   themaregel op li (bijvoorbeeld .elementor-kit-N li, 0,1,1) won van de
   overerving en zette de melding terug op de themamaat. Nu erft de li
   expliciet van de ul.
   0,2,1, en het raakt uitsluitend li's binnen een WooCommerce-melding:
   onze eigen lijst (.vy-ma-lijst > .vy-ma-regel) heeft geen
   woocommerce-klasse boven zich. color:inherit haalt bij .woocommerce-error
   de var(--vy-stop) van de ul op, bij message en info de inkt van .vy-ma.
   .woocommerce-info stond hier nog niet bij terwijl de <ul>-regel hem wel
   meeneemt; dat was een omissie. */
.vy-ma .woocommerce-error li,.vy-ma .woocommerce-message li,.vy-ma .woocommerce-info li{
	margin:0!important; padding:0!important; list-style:none!important;
	font-family:inherit!important; font-size:inherit!important; font-weight:inherit!important;
	line-height:inherit!important; letter-spacing:inherit!important; color:inherit!important;
}
/* Links in een melding zijn nooit van ons: ze komen uit WooCommerce en
   hebben geen klasse of juist a.button. Die mogen dus wel een volledige
   typografiereset. 0,2,1 wint van .elementor-kit-N a (0,1,1). Kleur en
   onderstreping laat ik staan, die komen van het thema en van .vy-ma a. */
.vy-ma .woocommerce-error a,.vy-ma .woocommerce-message a,.vy-ma .woocommerce-info a{
	font-family:inherit!important; font-size:inherit!important; font-weight:inherit!important;
	line-height:inherit!important; letter-spacing:inherit!important;
}
.vy-ma .woocommerce-error:before,.vy-ma .woocommerce-message:before,.vy-ma .woocommerce-info:before{display:none!important;}
/* Onder de 780px staan de twee inlogkaarten onder elkaar. De max-width van
   860px hoort bij die twee kolommen en moest hier dus ook terug, maar bleef
   staan. Gevolg in het gat 461-780px: op een tablet van 768px houdt .vy-ma
   na padding:14px 16px nog 736px inhoud over, en omdat 736 < 860 werd elke
   kaart 736px breed - terwijl exact dezelfde pagina zonder registratie op
   460px uitkomt. Nu vallen beide varianten samen op 460px.
   0,2,0, gelijk aan de basisregel .vy-ma-inlog.is-duo, maar later in de
   bron; precies zoals grid-template-columns hier al werkte. Overschrijft
   bewust die basisregel, en niets anders: .vy-ma-inlog zonder .is-duo staat
   al op 460px. */
@media (max-width:780px){ .vy-ma-inlog.is-duo{grid-template-columns:1fr; max-width:460px;} }

.vy-ma-paging{display:flex; gap:6px; flex-wrap:wrap;}
.vy-ma-paging__knop{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px;
	padding:0 11px; border:1px solid var(--vy-lijn); border-radius:9px; font-size:12.5px; font-weight:600; color:var(--vy-ink)!important;}
.vy-ma-paging__knop:hover{border-color:var(--vy-ink);}
.vy-ma-paging__knop.is-nu{background:var(--vy-ink); border-color:var(--vy-ink); color:#fff!important;}

/* =====================================================================
   Knopherstel na de knopreset bovenaan.
   De reset staat op .vy-ma button (0,1,1) en .vy-ma button:hover/:focus/
   :active (0,2,1), allemaal met !important. De eigen knopregels staan op
   0,1,0 (.vy-ma-knop en de modifiers) en 0,2,0 (de hovers) en verliezen
   daar dus van. Hieronder staan exact dezelfde waarden terug op 0,2,0, en
   op 0,3,0 in een toestand, in dezelfde volgorde als hierboven: basis,
   hover, licht, klein, breed. Die volgorde stond er al zo (--licht bij de
   Knoppen en nog een keer bij Inloggen, --klein ertussen, --breed daarna);
   de drie modifiers raken elkaars eigenschappen niet, dus de cascade komt
   op hetzelfde uit. De tweede .vy-ma-knop--licht bij Inloggen zet dezelfde
   waarden als de eerste, dus die is hier in een regel samengevat.
   Elke modifier krijgt dezelfde toestandenlijst mee. Zonder dat zou de
   reset op :hover/:focus/:active (0,2,1) winnen van een modifier op 0,2,0
   en zou een --klein-knop tijdens hover of klik terugspringen naar de
   basismaat.
   Bewust NIET hier: width (de 900px-media-query zet die op 100% voor
   .vy-ma-tt en .vy-ma-formvoet), margin (.vy-ma-sample .vy-ma-knop, 0,2,0),
   cursor en opacity (.vy-ma-knop:disabled, 0,2,0) en line-height (de reset
   zet die op inherit, en dat is precies wat de <a>-knoppen altijd al
   deden; button en link komen daarmee eindelijk op dezelfde hoogte uit).
   Deze regels gelden ook voor de <a>-varianten van .vy-ma-knop. De waarden
   zijn overgenomen uit de bestaande regels, dus daar verandert niets aan.
   ================================================================== */
.vy-ma .vy-ma-knop,
.vy-ma .vy-ma-knop:hover,.vy-ma .vy-ma-knop:focus,.vy-ma .vy-ma-knop:active{
	display:inline-flex!important; align-items:center!important; justify-content:center!important;
	background-color:var(--vy-ink)!important; color:#fff!important;
	border:1px solid var(--vy-ink)!important; border-radius:9px!important;
	padding:10px 20px!important; font-family:inherit!important;
	font-size:13px!important; font-weight:600!important; text-decoration:none!important;
}
.vy-ma .vy-ma-knop:hover{
	background-color:#2c3238!important; border-color:#2c3238!important; color:#fff!important;
}
.vy-ma .vy-ma-knop--licht,
.vy-ma .vy-ma-knop--licht:hover,.vy-ma .vy-ma-knop--licht:focus,.vy-ma .vy-ma-knop--licht:active{
	background-color:#fff!important; color:var(--vy-ink)!important; border:1px solid var(--vy-lijn)!important;
}
.vy-ma .vy-ma-knop--licht:hover{
	background-color:var(--vy-was)!important; border-color:var(--vy-ink)!important; color:var(--vy-ink)!important;
}
.vy-ma .vy-ma-knop--klein,
.vy-ma .vy-ma-knop--klein:hover,.vy-ma .vy-ma-knop--klein:focus,.vy-ma .vy-ma-knop--klein:active{
	padding:7px 14px!important; font-size:12px!important; border-radius:8px!important;
}
.vy-ma .vy-ma-knop--breed,
.vy-ma .vy-ma-knop--breed:hover,.vy-ma .vy-ma-knop--breed:focus,.vy-ma .vy-ma-knop--breed:active{
	justify-content:center!important; padding:12px 20px!important; font-size:14px!important;
}

/* =====================================================================
   Elementor-harding voor de eigen links.
   .vy-ma-tekstlink, .vy-ma-terug, .vy-ma__navlink en .vy-ma-paging__knop
   zetten wel een eigen font-size, maar staan op 0,1,0 zonder !important.
   Een kitregel .elementor-kit-N a is 0,1,1 en wint daarvan; die zet
   font-family, font-size, font-weight, line-height, letter-spacing en
   text-transform in een keer. Hieronder staan exact dezelfde waarden terug
   op 0,2,1 (.vy-ma a.<klasse>), plus !important. De specificiteit alleen
   zou tegen een gewone kitregel al genoeg zijn en het !important alleen
   ook, maar samen dekken ze ook een kit die zelf !important gebruikt of
   een themaregel op a:hover (0,2,1) af. Zelfde keuze als bij
   .vy-ma a.vy-ma-regel__link hierboven.
   Bewust GEEN brede ".vy-ma a"-reset zoals in vy-winkel (0,1,1 met
   !important): die zou precies deze vier klassen plus .vy-ma-knop slopen,
   want die staan allemaal op 0,1,0. Zie ook de toelichting bij
   a:not([class]) bovenaan.
   Uitsluitend typografie. Alle layout (padding, border, min-width, height,
   display) blijft op de oorspronkelijke regels van 0,1,0 staan, zodat de
   mobiele overrides in de 900px-query - die dezelfde 0,1,0 hebben en later
   in de bron staan - gewoon blijven winnen. Dat is precies de val die
   optilling hier veroorzaakt.
   VAL: de mobiele font-size van .vy-ma__navlink (13px) stond ook op 0,1,0.
   Alleen de desktopregel optillen zou die mobiele variant permanent laten
   verliezen en de chips-navigatie op telefoon op 13,5px zetten. Gekozen
   mitigatie: beide optillen naar 0,2,1, de mobiele in de 900px-query
   verderop. Gelijke specificiteit, later in de bron, dus die wint daar -
   dezelfde constructie die .vy-ma .vy-ma-native al gebruikt. Het
   alternatief (de desktopregel in een @media (min-width:901px) zetten) is
   afgevallen: dan zou de mobiele regel op 0,1,0 blijven staan en juist daar
   nog steeds van de kit verliezen, terwijl mobiel het scherm is waar de
   chips het krapst zitten. ================================================ */
.vy-ma a.vy-ma-tekstlink{
	font-family:inherit!important; font-size:12.5px!important; font-weight:600!important;
	line-height:inherit!important; letter-spacing:inherit!important; text-transform:none!important;
}
.vy-ma a.vy-ma-terug{
	font-family:inherit!important; font-size:12.5px!important; font-weight:600!important;
	line-height:inherit!important; letter-spacing:inherit!important; text-transform:none!important;
}
.vy-ma a.vy-ma__navlink{
	font-family:inherit!important; font-size:13.5px!important; font-weight:500!important;
	line-height:inherit!important; letter-spacing:inherit!important; text-transform:none!important;
}
/* .vy-ma__navlink.is-actief zet font-weight:600 op 0,2,0 en zou nu van de
   regel hierboven (0,2,1) verliezen: de actieve chip zou terugvallen naar
   500. Daarom die ene eigenschap hier terug op 0,3,1. De rest van
   .is-actief (background, color) raakt deze harding niet aan. */
.vy-ma a.vy-ma__navlink.is-actief{font-weight:600!important;}
.vy-ma a.vy-ma-paging__knop{
	font-family:inherit!important; font-size:12.5px!important; font-weight:600!important;
	line-height:inherit!important; letter-spacing:inherit!important; text-transform:none!important;
}

/* =====================================================================
   Vangnet: vy_ma_paneel() rendert [woocommerce_my_account] in
   .vy-ma-native voor de schermen die we niet zelf gebouwd hebben
   (payment-methods, add-payment-method). Dat blok had nul opmaak, dus
   daar stond de volledige themaweergave: reuzenkoppen, blauwe links,
   een tweede accountnavigatie en sinds de knopreset hierboven ook nog
   kale knoppen.
   Binnen .vy-ma-native staat uitsluitend markup van WooCommerce zelf,
   nooit een eigen .vy-ma-*-klasse. Alles hieronder kan dus geen enkele
   eigen regel raken. De twee uitzonderingen die wel bewust een eigen
   regel overschrijven staan er met een reden bij.
   ================================================================== */
.vy-ma .vy-ma-native{background:#fff; border:1px solid var(--vy-lijn); border-radius:14px;
	padding:20px 22px; font-size:14px; line-height:1.55; color:var(--vy-ink);}
/* WooCommerce zet zijn eigen accountnavigatie mee neer. Die staat hier
   dubbel naast onze zijbalk en is door het thema opgemaakt; navigeren doe
   je via .vy-ma__nav. De inhoud is een float van 68% en moet dus terug
   naar volle breedte. */
.vy-ma .vy-ma-native .woocommerce-MyAccount-navigation{display:none!important;}
.vy-ma .vy-ma-native .woocommerce-MyAccount-content{width:100%!important; float:none!important; margin:0!important;}
/* .vy-ma h1..h4 (0,1,1) zet margin:0 en géén font-size. Voor onze eigen
   koppen klopt dat (.vy-ma-h1 en .vy-ma-h2 doen de maat), maar de koppen
   van WooCommerce hielden zo de themamaat over en plakten tegen de tekst
   aan. Deze regel is 0,2,1 en overschrijft die marge dus bewust, maar
   uitsluitend binnen het vangnet. */
.vy-ma .vy-ma-native h1,.vy-ma .vy-ma-native h2,.vy-ma .vy-ma-native h3,.vy-ma .vy-ma-native h4{
	font-size:17px!important; font-weight:650!important; line-height:1.3!important;
	margin:0 0 12px!important;
}
/* Zelfde verhaal voor .vy-ma p (0,1,1, margin:0): binnen het vangnet
   lopen alinea's daardoor aan elkaar vast. Ook 0,2,1, ook alleen hier. */
.vy-ma .vy-ma-native p{font-size:inherit!important; line-height:inherit!important; margin:0 0 14px!important;}
.vy-ma .vy-ma-native p:last-child{margin-bottom:0!important;}
.vy-ma .vy-ma-native a{
	font-family:inherit!important; font-size:inherit!important; font-weight:inherit!important;
	line-height:inherit!important; letter-spacing:inherit!important;
	color:var(--vy-accent)!important; text-decoration:underline!important;
}
.vy-ma .vy-ma-native table{width:100%; border-collapse:collapse; font-size:13.5px; margin:0 0 16px;}
.vy-ma .vy-ma-native th,.vy-ma .vy-ma-native td{
	font-size:inherit!important; line-height:1.5!important; text-align:left;
	padding:10px 12px; border-bottom:1px solid var(--vy-lijn); vertical-align:middle;
}
.vy-ma .vy-ma-native th{font-size:11.5px!important; font-weight:700!important; letter-spacing:.06em;
	text-transform:uppercase; color:var(--vy-zacht);}
/* Geen display hier: WooCommerce zet zelf block op een gewoon label en
   inline op een checkboxlabel, en dat moet zo blijven. */
.vy-ma .vy-ma-native label{font-size:12.5px!important; font-weight:600!important;
	color:var(--vy-ink)!important; margin:0 0 6px!important;}
.vy-ma .vy-ma-native input[type="text"],.vy-ma .vy-ma-native input[type="email"],
.vy-ma .vy-ma-native input[type="tel"],.vy-ma .vy-ma-native input[type="number"],
.vy-ma .vy-ma-native input[type="password"],.vy-ma .vy-ma-native select,
.vy-ma .vy-ma-native textarea{
	width:100%; max-width:420px; border:1px solid var(--vy-lijn)!important; border-radius:9px!important;
	background:#fff!important; padding:10px 12px!important; font-size:14px!important;
	font-family:inherit!important; line-height:1.4!important; color:var(--vy-ink)!important;
	margin:0 0 14px!important; height:auto!important; box-shadow:none!important;
}
/* De knopreset bovenaan haalt de opmaak van deze knoppen weg en er is hier
   geen .vy-ma-knop om het mee terug te zetten, dus dat gebeurt hier.
   Zelfde uiterlijk als .vy-ma-knop.
   De drie selectors zijn 0,2,1 (button), 0,3,0 (.button) en 0,3,1
   (input[type=submit]). De krapste is button op 0,2,1: dat is gelijk aan
   de reset op .vy-ma button:hover, maar deze regel staat later in de bron
   en wint dus. De toestandsvarianten zitten er los bij, zodat ook de
   krapste er in hover, focus en active nog een streepje boven zit.
   a.button pakt hier de knopopmaak in plaats van de linkregel hierboven:
   die is 0,2,1 en staat eerder. */
.vy-ma .vy-ma-native button,.vy-ma .vy-ma-native .button,.vy-ma .vy-ma-native input[type="submit"],
.vy-ma .vy-ma-native button:hover,.vy-ma .vy-ma-native .button:hover,.vy-ma .vy-ma-native input[type="submit"]:hover,
.vy-ma .vy-ma-native button:focus,.vy-ma .vy-ma-native .button:focus,.vy-ma .vy-ma-native input[type="submit"]:focus,
.vy-ma .vy-ma-native button:active,.vy-ma .vy-ma-native .button:active,.vy-ma .vy-ma-native input[type="submit"]:active{
	display:inline-flex!important; align-items:center!important; justify-content:center!important;
	background-color:var(--vy-ink)!important; color:#fff!important;
	border:1px solid var(--vy-ink)!important; border-radius:9px!important;
	padding:10px 20px!important; margin:0!important; font-family:inherit!important;
	font-size:13px!important; font-weight:600!important; line-height:inherit!important;
	text-decoration:none!important; text-transform:none!important; width:auto!important;
}
.vy-ma .vy-ma-native button:hover,.vy-ma .vy-ma-native .button:hover,.vy-ma .vy-ma-native input[type="submit"]:hover{
	background-color:#2c3238!important; border-color:#2c3238!important; color:#fff!important;
}

@media (max-width:900px){
	/* De tekst naast het accounticoon is de voornaam van de klant, of
	   "Mijn account", of "Inloggen": tot zo'n 90px die door
	   .vy-ma-knopje__tekst{white-space:nowrap} ook nog onafbreekbaar is. Op
	   375px moet de header daarnaast het logo, de hamburger en het
	   winkelwagenicoon kwijt, en dan is dit het eerste wat eruit moet.
	   Zelfde keuze als .vy-pop__som in vy-winkel, met dezelfde reden.
	   Het icoon en de groene stip blijven staan, en de toegankelijke naam
	   ook: die zit in de aria-label op de <a> ("Naar mijn account" /
	   "Inloggen"), niet in deze span. [vy_account_knop label="nee"] blijft
	   werken zoals het werkte - dat rendert de span helemaal niet, en een
	   display:none op een element dat er niet is doet niets.
	   0,1,0 met !important. Overschrijft geen eigen regel: de enige andere
	   regel op deze klasse zet white-space, geen display. */
	.vy-ma-knopje__tekst{display:none!important;}
	/* De accountknop zelf: 23px icoon plus 4px padding is 31px, en met de
	   tekst eruit is dat ook de volle breedte. Te klein voor een vinger.
	   Opgerekt met padding in plaats van met een absolute ::after: de knop
	   staat vlak naast het winkelwagenicoon van vy-winkel, en een
	   klikvlak dat 6,5px buiten de knop uitsteekt zou daar overheen vallen
	   en afhankelijk van de stapelvolgorde kliks van dat icoon afsnoepen.
	   Met padding groeit alleen de knop zelf en blijft de tussenruimte van
	   de header intact. Het icoon blijft 23px, dus visueel verandert er
	   niets behalve de ruimte eromheen.
	   Dezelfde selectorlijst als de reset bovenaan (0,1,0 voor de kale
	   klasse, 0,2,0 voor de toestanden), hier later in de bron. Die lijst
	   is verplicht: zou ik alleen .vy-ma-knopje schrijven, dan wint
	   .vy-ma-knopje:active{padding:4px!important} (0,2,0) tijdens het
	   aanraken en klapt de knop onder de vinger terug naar 31px.
	   Overschrijft bewust de padding van die reset; de rest van de reset
	   (kleur, typografie, achtergrond) blijft ongemoeid. */
	.vy-ma-knopje,.vy-ma-knopje:hover,.vy-ma-knopje:focus,.vy-ma-knopje:active,.vy-ma-knopje:visited{
		min-width:44px!important; min-height:44px!important;
		justify-content:center!important; padding:10px!important;
	}
	.vy-ma{grid-template-columns:1fr; gap:16px; padding:14px 16px 56px;}
	.vy-ma.is-solo{padding-top:22px;}
	.vy-ma__zij{position:static;}
	/* Het gebruikersblok kost op mobiel te veel hoogte; naam en e-mail
	   staan al op het overzicht zelf. */
	.vy-ma__wie{display:none;}
	/* Navigatie als horizontaal schuivende chips. De uitloglink kreeg
	   hier een bovenrand van de desktopstijl mee, wat in een rij een
	   losse streep midden in beeld werd. */
	.vy-ma__nav{flex-direction:row; overflow-x:auto; gap:7px; padding:0 0 4px; margin:0 -16px; padding-left:16px; padding-right:16px;
		-webkit-overflow-scrolling:touch; scrollbar-width:none;}
	.vy-ma__nav::-webkit-scrollbar{display:none;}
	/* min-height erbij: 13px op line-height 1,55 plus 9px padding boven en
	   onder plus 2px rand kwam uit op ~40px, net onder de 44 die een vinger
	   nodig heeft. De chip is een flexrij met align-items:center, dus de
	   inhoud blijft gewoon gecentreerd staan en de padding hoeft niet mee te
	   groeien. 0,1,0, later in de bron dan de basisregel met dezelfde
	   specificiteit - dat is hoe deze hele query al werkt.
	   De font-size blijft hier ook staan zoals hij was; de regel eronder
	   herhaalt hem alleen op hogere specificiteit, net zoals het
	   Knopherstel de knopmaten herhaalt. */
	.vy-ma__navlink{white-space:nowrap; border:1px solid var(--vy-lijn); border-radius:999px; padding:9px 15px; font-size:13px; min-height:44px;}
	/* Mobiele tegenhanger van de Elementor-harding hierboven. Zonder deze
	   regel zou .vy-ma a.vy-ma__navlink (0,2,1, 13,5px) van de mobiele
	   13px op 0,1,0 winnen en zouden de chips op telefoon groter worden dan
	   bedoeld. Gelijke specificiteit (0,2,1), later in de bron, dus deze
	   wint binnen de query. Alleen font-size: font-weight, line-height en de
	   rest komen uit de desktopharding en zijn op mobiel hetzelfde.
	   .vy-ma a.vy-ma__navlink.is-actief (0,3,1) blijft ook hier winnen voor
	   font-weight, dus de actieve chip blijft 600. */
	.vy-ma a.vy-ma__navlink{font-size:13px!important;}
	.vy-ma__navlink--uit{margin-top:0!important; padding-top:9px!important; border-top:1px solid var(--vy-lijn)!important;
		border-radius:999px!important;}
	.vy-ma__navlink .vy-ma-ico{width:15px; height:15px; flex-basis:15px;}
	.vy-ma__toast{top:8px;}

	.vy-ma-kaart{padding:16px 16px; border-radius:12px; margin-bottom:12px;}
	/* Het vangnet is een kaart en krijgt dus dezelfde mobiele maten.
	   0,2,0, later in de bron dan de desktopregel met dezelfde
	   specificiteit, dus die wint hier. */
	.vy-ma .vy-ma-native{padding:16px 16px; border-radius:12px;}
	.vy-ma-duo,.vy-ma-raster{grid-template-columns:1fr; gap:12px;}
	.vy-ma-duo .vy-ma-kaart{margin-bottom:0;}
	.vy-ma-h1{font-size:20px!important;}
	.vy-ma-kop{margin-bottom:16px;}

	.vy-ma-cijfers{grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;}
	.vy-ma-cijfer{padding:11px 10px; border-radius:10px;}
	.vy-ma-cijfer__getal{font-size:19px;}
	.vy-ma-cijfer__label{font-size:10.5px; line-height:1.25;}

	/* Bestelregels: alles onder elkaar, bedrag en status op één rij. */
	.vy-ma-regel__link{flex-direction:column; align-items:flex-start; gap:8px; padding:13px 2px;}
	.vy-ma-regel__rechts{justify-content:flex-start; width:100%; gap:8px;}
	.vy-ma-regel__bedrag{margin-left:auto; min-width:0; text-align:right;}
	.vy-ma-regel__pijl{display:none;}

	/* Tijdlijn: labels passen niet naast elkaar op 360px. */
	.vy-ma-tijdlijn__label{font-size:10.5px; line-height:1.2; display:block; padding:0 2px;}
	.vy-ma-tt{flex-direction:column; align-items:flex-start; gap:10px;}
	.vy-ma-tt .vy-ma-knop{width:100%;}

	.vy-ma-artikel{flex-wrap:wrap; gap:6px 10px;}
	.vy-ma-artikel__naam{flex:1 1 100%;}
	.vy-ma-artikel__aantal{min-width:0;}
	.vy-ma-artikel__prijs{margin-left:auto; min-width:0;}

	.vy-ma-samples{grid-template-columns:repeat(2,1fr); gap:10px;}
	.vy-ma-form{max-width:none;}
	.vy-ma-formvoet{flex-wrap:wrap; gap:10px;}
	.vy-ma-formvoet .vy-ma-knop{width:100%; justify-content:center;}
	.vy-ma-veld input,.vy-ma-veld select{font-size:16px!important;} /* voorkomt inzoomen op iOS */
	/* Zelfde 16px voor de velden in het vangnet, anders zoomt iOS daar wel
	   in. 0,2,1, later dan de desktopregel met dezelfde specificiteit. */
	.vy-ma .vy-ma-native input[type="text"],.vy-ma .vy-ma-native input[type="email"],
	.vy-ma .vy-ma-native input[type="tel"],.vy-ma .vy-ma-native input[type="number"],
	.vy-ma .vy-ma-native input[type="password"],.vy-ma .vy-ma-native select,
	.vy-ma .vy-ma-native textarea{font-size:16px!important;}
	.vy-ma-paging{justify-content:center;}
	/* 34x34 is te klein voor een vinger. De knop is al inline-flex met
	   align-items en justify-content op center, dus alleen de doos groeit;
	   het cijfer blijft in het midden staan. padding:0 11px blijft staan,
	   die zorgt dat "10" er ook nog in past.
	   0,1,0, later in de bron dan de basisregel met dezelfde specificiteit.
	   Bewust geen typografie hier: die staat sinds deze versie op
	   .vy-ma a.vy-ma-paging__knop (0,2,1) en zou van deze regel niet meer te
	   overschrijven zijn - precies de reden dat de harding hierboven alleen
	   typografie aanpakt en de layout op 0,1,0 laat staan. */
	.vy-ma-paging__knop{min-width:44px; height:44px;}
	/* Knoppen. .vy-ma-knop komt uit op 13px op line-height 1,55 plus 10px
	   padding en 1px rand, dus ~42px, en .vy-ma-knop--klein (12px, 7px
	   padding) op ~35px. Allebei onder de 44. min-height is hier genoeg:
	   de knop is inline-flex met align-items:center, dus de tekst blijft
	   gecentreerd en de breedte verandert niet. --klein heeft altijd ook
	   .vy-ma-knop, dus deze ene regel dekt de sample-kaartjes mee. Het
	   verschil tussen de twee blijft zichtbaar in lettergrootte en
	   horizontale padding; had ik alleen --klein opgerekt, dan was de kleine
	   knop juist hoger geworden dan de gewone.
	   0,2,0 en 0,3,0, dezelfde vorm als het Knopherstel maar later in de
	   bron. De toestandenlijst is verplicht, anders wint de knopreset
	   .vy-ma button:hover{min-height:0!important} (0,2,1) tijdens hover,
	   focus en aanraken van .vy-ma .vy-ma-knop (0,2,0) en klapt de knop
	   onder de vinger terug. Overschrijft verder geen eigen regel: min-height
	   staat nergens anders op deze klasse. */
	.vy-ma .vy-ma-knop,
	.vy-ma .vy-ma-knop:hover,.vy-ma .vy-ma-knop:focus,.vy-ma .vy-ma-knop:active{
		min-height:44px!important;
	}
}
@media (max-width:420px){
	.vy-ma{padding-left:12px; padding-right:12px;}
	.vy-ma__nav{margin:0 -12px; padding-left:12px; padding-right:12px;}
	.vy-ma-cijfers{grid-template-columns:1fr 1fr;}
	.vy-ma-cijfers .vy-ma-cijfer:last-child{grid-column:1/-1;}
	.vy-ma-samples{grid-template-columns:1fr 1fr; gap:9px;}
	.vy-ma-h1{font-size:19px!important;}
}

/* =========================================================================
   AANVULLING VOOR DE NIEUWE SITE (niet uit de snippet)
   Op WordPress stond [vy_mijn_account] in een Elementor-sectie die de ruimte
   rond het blok regelde (10px opzij, een marge boven). Die sectie bestaat
   niet meer, dus zonder dit plakt het blok tussen 901 en 1140px tegen de
   rand van het venster. Onder 900px regelt .vy-ma zijn eigen zijmarge.
   ====================================================================== */
.vy-pagina-account #inhoud{padding:48px 20px 0;}
@media (max-width:900px){
	.vy-pagina-account #inhoud{padding:10px 0 0;}
}
/* Alleen-lezen e-mailveld: het adres is de inlog en wijzigt hier niet. */
.vy-ma .vy-ma-veld input[readonly]{background:var(--vy-was); color:var(--vy-zacht); cursor:default;}
/* Het hidden-attribuut moet winnen van display:grid/flex op formulieren en meldingen. */
.vy-ma [hidden]{display:none!important;}