/* ==========================================================================
   eigen.css - maatwerk-CSS voor JeVibe
   --------------------------------------------------------------------------
   Aangemaakt 16-09-2026.

   WAAROM DIT BESTAND BESTAAT
   Het thema laadt zijn stylesheets in deze volgorde:
       3. loobek/style.css          (parent)
       4. loobek-child/style.css    (child)
       6. loobek/css/responsive.css (parent - LAADT NA HET CHILD)
   Daardoor verliest CSS in het child-thema van responsive.css, en juist daar
   staan de mobiele regels. Dit bestand wordt met wp_enqueue_style ingeladen
   met 'loobek-responsive' als afhankelijkheid, dus het komt altijd daarna en
   wint zonder !important.

   Het enqueue-blok staat onderaan loobek-child/functions.php.
   Terugdraaien: dat blok weghalen, of dit bestand hernoemen - de code
   controleert of het bestaat en slaat het anders over.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Productgalerij: miniatuurstrook op een scrollbare rij
   --------------------------------------------------------------------------
   Op een telefoon kiest het thema server-zijdig (wp_is_mobile) de layout
   'thumbnail-layout-horizontal'; op de computer is dat 'thumbnail-layout-grid'.
   Flexslider bouwt de strook pas in de browser op als
   <ol class="flex-control-nav flex-control-thumbs">, daarom staat hij niet
   in de paginabron.

   Bewust GEEN @media-query: de layout hangt aan wp_is_mobile() en niet aan de
   schermbreedte. Een telefoon in liggende stand is breder dan 767px maar houdt
   thumbnail-layout-horizontal - met een media-query zou deze regel daar
   uitvallen. De klasse is de mobiele voorwaarde.

   Overschrijft: flex-wrap:wrap uit loobek/style.css regel 9512.
   -------------------------------------------------------------------------- */

.woocommerce div.product.thumbnail-layout-horizontal div.woocommerce-product-gallery .flex-control-thumbs {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;        /* Firefox: geen scrollbalk */
	-ms-overflow-style: none;     /* oudere Edge */
	touch-action: pan-x;          /* zeg de browser: horizontaal vegen is scrollen */
	overscroll-behavior-x: contain;
}

/* Chrome, Safari, Edge: scrollbalk onzichtbaar. De half zichtbare volgende
   miniatuur laat al zien dat er meer is. */
.woocommerce div.product.thumbnail-layout-horizontal div.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* Zonder deze regel krimpen de miniaturen en persen ze zich alsnog op een
   rij in plaats van te scrollen. 80px is de breedte die het thema zelf
   aanhoudt (loobek/style.css regel 9516). */
.woocommerce div.product.thumbnail-layout-horizontal div.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 80px;
	scroll-snap-align: start;
}


/* --------------------------------------------------------------------------
   2. "Nieuw"-badge
   --------------------------------------------------------------------------
   Aangeleverd door Renaldo, 16-09-2026.

   LET OP - deze CSS doet op dit moment nog niets zichtbaars.
   Het element .jevibe-nieuw-badge wordt nergens uitgezonden: niet in het
   thema, niet in de mu-plugins, niet in de code-snippets en nergens in de
   database (gecontroleerd 16-09-2026). Er moet dus nog iets komen dat
   bijvoorbeeld <img class="jevibe-nieuw-badge" src="..."> op de producttegel
   en/of de productpagina plaatst. Tot die tijd is dit blok inactief maar
   onschadelijk.

   Twee dingen om te weten:
   - position:relative op .woocommerce-product-gallery is een no-op; die
     staat daar al op relative (gemeten). Hij is bewust laten staan zodat de
     regel ook klopt als het thema dat ooit verandert.
   - De badge komt linksboven te staan, net als het eigen label van het thema
     (.product-label, position:absolute, top/left 10px, z-index 5). Met
     z-index 9 ligt de badge daar OVERHEEN. Staat het "Nieuw"- of
     aanbiedingslabel van het thema aan, dan dekt de badge dat af.
   -------------------------------------------------------------------------- */

/* Product-cel als anker */
.woocommerce ul.products li.product {
    position: relative;
}
.woocommerce div.product .woocommerce-product-gallery {
    position: relative;
}

.jevibe-nieuw-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    max-width: 180px;
    height: auto;
    margin: 0;
    padding: 0;
    z-index: 9;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   3. Accountpaneel (Loobek-accountmenu, uitgelogd)
   --------------------------------------------------------------------------
   Eén responsive component: markup in loobek-child/inc/jv-klantinlog.php
   (jv_klantinlog_form), één #ts-login-form dat naar Mijn account post.
     - tot 767px   Loobeks paneel over het scherm (responsive.css r. 448),
                   met het goedgekeurde mobiele ontwerp;
     - vanaf 768px popover onder de kop, geopend door een klik op het
                   accounticoon (script in jv-klantinlog.php); tablet
                   (768-1023px) breder, desktop (1024px+) 520-580px.
   (Loobeks eigen regels voor .my-account-wrapper #ts-login-form gelden in de kop;
   hieronder dezelfde specificiteit via .jv-login, dit bestand laadt later. Zo werkt het
   ook in de modal-root, buiten de kop.)
   Breekpunten: Loobek gebruikt 767/768 en 991/992/1200; 1024 sluit aan
   bij tablet liggend.

   Oorzaak van de oude overlap op mobiel: het blok "Menu poppetje boven in
   rechtboven in styling" in Thema-opties > Custom CSS maakte van elke link
   in het open paneel een kader van 42px; Loobek trekt "wachtwoord vergeten"
   met translate(0,-100%) + margin-top:-20px omhoog (style.css r. 1597),
   dus dat kader schoof over de knop. Het blok is uit Thema-opties
   verwijderd. Het ingelogde menu is vervangen door de Account Hub (sectie 4).

   Hero: loobek-child/images/jv-login-hero(-720|-1200).webp, gemaakt van
   "Minimalistische jevibe-marktplaatsdoos met plantenschaduwen.png".
   De foto staat in de hero en vult altijd de volle hoogte ervan (mobiel als
   grid-kolom met object-fit:cover, tablet/desktop rechts uitgelijnd); links
   loopt hij via een mask over in de wandkleur. Nooit vervormd.
   -------------------------------------------------------------------------- */

/* 3a. Component (alle breedtes) */
.jv-login {
	--jv-blue: #0B33B3;
	--jv-ink: #111;
	--jv-muted: #5c6068;
	--jv-line: #e4e4e7;
	--jv-field: #d9dbe0;
	--jv-radius: 12px;
	--jv-wall: #ece7e0;
	position: relative;
	isolation: isolate;
	color: var(--jv-ink);
	font-family: var(--loobek-main-font), sans-serif;
	text-align: left;
}
.jv-login > * {
	position: relative;
	z-index: 1;
}

/* Hero-foto: een blok (geen inline-baseline-ruimte), object-fit:cover. */
.jv-login .jv-login__hero-img {
	display: block;
	max-width: none;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
	mask-image: linear-gradient(90deg, transparent 0, #000 30%);
	pointer-events: none;
}

.jv-login .jv-login__close {
	display: none;
}

.jv-login .jv-login__title {
	margin: 0;
	font-family: var(--loobek-button-font), sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--jv-ink);
}
.jv-login .jv-login__intro {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: #3f434a;
}

.jv-login__card {
	background: #fff;
}

/* Formulier: Loobek zet #ts-login-form al op grid (style.css r. 1564);
   hier kolom, tussenruimte en volgorde (zelfde selectors, laadt later). */
.jv-login #ts-login-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* anders duwt het veld (size=20) de kolom breder dan de kaart */
	gap: 18px;
}
.jv-login #ts-login-form .login-remember {
	order: 0;
	margin-top: 0;
	font-size: 15px;
}
.jv-login #ts-login-form .login-submit {
	margin: 0;
	padding-top: 0;
}
.jv-login #ts-login-form label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--jv-ink);
}

/* Veld = rand om icoon + invoer (+ oog); geen absolute positionering. */
.jv-login__control {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 6px 0 14px;
	border: 1px solid var(--jv-field);
	border-radius: var(--jv-radius);
	background: #fff;
	transition: border-color .15s ease;
}
.jv-login__control:focus-within {
	border-color: var(--jv-blue);
	outline: 3px solid rgba(11, 51, 179, .15);
}
.jv-login__icon {
	flex: none;
	color: #6b7079;
}
.jv-login .jv-login__input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0 8px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--jv-ink);
	font-family: inherit;
	font-size: 16px; /* kleiner laat iOS bij focus inzoomen */
	line-height: normal;
	outline: none;
}
.jv-login .jv-login__input::placeholder {
	color: #80858e;
	opacity: 1;
}
.jv-login .jv-login__input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: var(--jv-ink);
	caret-color: var(--jv-ink);
}
.jv-login .jv-login__toggle {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #4b5058;
	cursor: pointer;
}
.jv-login .jv-login__toggle[hidden] {
	display: none;
}
.jv-login .jv-login__toggle:hover {
	background: transparent;
	color: var(--jv-ink);
}
.jv-login .jv-login__toggle:focus-visible {
	outline: 2px solid var(--jv-blue);
	outline-offset: -2px;
}
.jv-login__eye-slash {
	display: none;
}
.jv-login__toggle[aria-pressed="true"] .jv-login__eye-slash {
	display: inline;
}

/* Onthoud mij + Wachtwoord vergeten op één regel (te smal = netjes onder elkaar). */
.jv-login .login-remember {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
}
.jv-login #ts-login-form .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
}
.jv-login .login-remember input[type="checkbox"] {
	position: static;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--jv-ink);
	cursor: pointer;
}
.jv-login a.jv-login__forgot.button-text {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	line-height: 1.3;
	color: var(--jv-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.jv-login a.jv-login__forgot.button-text::before {
	content: none; /* Loobeks geanimeerde .button-text-lijn; hier gewone onderstreping */
}

/* Primaire knop (een <button>; Loobek geeft alleen input[type=submit] volle breedte). */
.jv-login #ts-login-form .jv-login__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 56px;
	padding: 0 20px;
	border: 1px solid var(--jv-ink);
	border-radius: var(--jv-radius);
	background: var(--jv-ink);
	color: #fff;
	font-family: var(--loobek-button-font), sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.jv-login #ts-login-form .jv-login__submit:hover {
	border-color: var(--jv-blue);
	background: var(--jv-blue);
	color: #fff;
}
.jv-login #ts-login-form .jv-login__submit:focus-visible {
	outline: 3px solid rgba(11, 51, 179, .35);
	outline-offset: 2px;
}

/* Nieuw bij JeVibe? */
.jv-login .create-account-wrapper {
	clear: none;
	margin-top: 24px;
	padding-top: 0;
	border: 0;
	text-align: center;
}
.jv-login .jv-login__register-title {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--jv-ink);
}
.jv-login .jv-login__register-title::before,
.jv-login .jv-login__register-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--jv-line);
}
.jv-login .jv-login__register-text {
	margin: 10px 0 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--jv-muted);
}
.jv-login a.jv-login__register-btn.button-text {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 10px 20px;
	border: 1.5px solid var(--jv-ink);
	border-radius: var(--jv-radius);
	background: #fff;
	color: var(--jv-ink);
	font-family: var(--loobek-button-font), sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}
.jv-login a.jv-login__register-btn.button-text::before {
	content: none; /* Loobeks .button-text-lijn */
}
.jv-login a.jv-login__register-btn.button-text:hover {
	border-color: var(--jv-blue);
	color: var(--jv-blue);
}
.jv-login a.jv-login__register-btn.button-text:focus-visible,
.jv-login a.jv-login__forgot.button-text:focus-visible,
.jv-login .jv-login__close:focus-visible {
	outline: 3px solid rgba(11, 51, 179, .35);
	outline-offset: 2px;
}

/* USP's (bewust geen <ul>: het thema-script plakt menulinks in de eerste ul) */
.jv-login .jv-login__usps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.jv-login .jv-login__usp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0 6px;
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
	color: var(--jv-ink);
}
.jv-login .jv-login__usp + .jv-login__usp {
	border-left: 1px solid var(--jv-line);
}
.jv-login .jv-login__usps .jv-login__icon {
	width: 28px;
	height: 28px;
	color: var(--jv-ink);
}

/* Slogan */
.jv-login__tagline {
	display: flex;
	align-items: center;
	gap: 10px;
}
.jv-login__crown {
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
}
.jv-login .jv-login__tagline p {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #6b7079;
}
.jv-login .jv-login__tagline p::before,
.jv-login .jv-login__tagline p::after {
	content: "";
	flex: 1 1 16px;
	height: 1px;
	background: #cfd2d8;
}

/* Keuzescherm verkoper (na een geslaagde inlog via het paneel; markup:
   jv_klantinlog_vendor_choice). Knoppen naast elkaar als er ruimte is,
   anders onder elkaar (auto-fit), zonder vaste breekpunten. */
.jv-login .jv-login__status {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--jv-radius);
	background: #f5f6f8;
	font-size: 14px;
	line-height: 1.4;
	color: var(--jv-muted);
	overflow-wrap: anywhere;
}
.jv-login .jv-login__status strong {
	color: var(--jv-ink);
	font-weight: 600;
}
.jv-login__choice {
	padding: 20px;
	border-radius: 16px;
	background: #f2f5fd;
}
.jv-login__choice-head {
	display: flex;
	align-items: center;
	gap: 14px;
}
.jv-login__choice-badge {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid #d8e0f6;
	border-radius: 50%;
	background: #e7edfb;
}
.jv-login__choice-badge img {
	display: block;
	width: 30px;
	height: 30px;
}
.jv-login .jv-login__choice-title {
	margin: 0;
	font-family: var(--loobek-button-font), sans-serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--jv-ink);
}
.jv-login .jv-login__choice-text {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--jv-muted);
}
.jv-login__choice-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 16px 12px;
	margin-top: 18px;
}
.jv-login__choice-item {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid; /* knoppen naast elkaar even hoog, hints op één lijn */
	row-gap: 8px;
	min-width: 0;
	text-align: center;
}
.jv-login a.jv-login__choice-btn {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 14px;
	border: 1.5px solid var(--jv-ink);
	border-radius: var(--jv-radius);
	font-family: var(--loobek-button-font), sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.jv-login a.jv-login__choice-btn--primary {
	background: var(--jv-ink);
	color: #fff;
}
.jv-login a.jv-login__choice-btn--primary:hover {
	border-color: var(--jv-blue);
	background: var(--jv-blue);
	color: #fff;
}
.jv-login a.jv-login__choice-btn--secondary {
	background: #fff;
	color: var(--jv-ink);
}
.jv-login a.jv-login__choice-btn--secondary:hover {
	border-color: var(--jv-blue);
	color: var(--jv-blue);
}
.jv-login a.jv-login__choice-btn:focus-visible {
	outline: 3px solid rgba(11, 51, 179, .35);
	outline-offset: 2px;
}
.jv-login__choice-btn .jv-login__icon {
	color: currentColor;
}
.jv-login .jv-login__choice-hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--jv-muted);
}

/* 3b. Mobiel (tot 767px): goedgekeurd ontwerp in Loobeks schermvullende paneel */
@media only screen and (max-width: 767px) {
	#page .ts-tiny-account-wrapper .dropdown-container.jv-account-panel {
		padding: 0;
		border-top-width: 0; /* Loobeks 1px-lijn (responsive.css r. 448): hero sluit direct aan op de kop */
		background: #f7f6f3;
	}
	.jv-login {
		--jv-gutter: 12px;
		min-height: 100%;
		padding: 0 0 28px;
		background: linear-gradient(180deg, var(--jv-wall) 0, #f1eee9 170px, #f7f6f3 240px);
	}
	/* Hero = grid: tekst | foto. De foto is een grid-item met height:100% en
	   vult dus altijd precies de hoogte van de hero, hoe hoog de tekst die ook
	   maakt: direct tegen de kop en direct tegen de kaart, op elke breedte. */
	.jv-login__hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(124px, 44%, 230px);
		align-items: stretch;
		min-height: 150px;
		padding: 0;
	}
	.jv-login__hero-text {
		align-self: center;
		padding: 26px 8px 24px calc(var(--jv-gutter) + 12px);
	}
	.jv-login .jv-login__hero-img {
		width: 100%;
		height: 100%;
		object-position: 88% 50%; /* doos in beeld; links de plant, uitgefaded */
	}
	.jv-login .jv-login__title {
		font-size: 26px;
	}
	.jv-login .jv-login__intro {
		font-size: 14px;
	}
	.jv-login__card {
		margin: 0 var(--jv-gutter);
		padding: 24px 20px;
		border-radius: 18px;
		box-shadow: 0 8px 28px rgba(17, 17, 17, .07);
	}
	.jv-login .jv-login__usps {
		margin: 16px var(--jv-gutter) 0;
		padding: 18px 4px;
		border-radius: 18px;
		background: #fff;
	}
	.jv-login__choice {
		padding: 16px;
	}
	.jv-login a.jv-login__choice-btn {
		gap: 8px;
		padding-right: 12px;
		padding-left: 12px;
	}
	.jv-login__tagline {
		flex-direction: column-reverse; /* kroon boven de slogan */
		gap: 6px;
		margin: 20px var(--jv-gutter) 0;
	}
	.jv-login .jv-login__tagline p {
		width: 100%;
	}
}

/* Smalle telefoons (320-360px): iets minder ruimte, zodat "Onthoud mij" en
   "Wachtwoord vergeten?" op één regel passen. */
@media only screen and (max-width: 360px) {
	.jv-login {
		--jv-gutter: 10px;
	}
	.jv-login__hero {
		grid-template-columns: minmax(0, 1fr) clamp(116px, 40%, 150px);
	}
	.jv-login .jv-login__title {
		font-size: 24px;
	}
	.jv-login__card {
		padding: 22px 16px;
	}
	.jv-login #ts-login-form .login-remember,
	.jv-login #ts-login-form .login-remember label,
	.jv-login a.jv-login__forgot.button-text {
		font-size: 14px;
	}
	.jv-login .login-remember {
		column-gap: 8px;
	}
	.jv-login #ts-login-form .login-remember label {
		gap: 8px;
	}
	.jv-login .jv-login__usp {
		padding: 0 3px;
		font-size: 12px;
	}
	.jv-login .jv-login__tagline p {
		gap: 8px;
		letter-spacing: .16em;
	}
}

/* 3c. Tablet en desktop (vanaf 768px): modal met backdrop
   Het script verplaatst het paneel bij openen naar #jv-modal-root (direct onder
   <body>) en terug bij sluiten. Waarom: .ts-header is een stacking context
   (position:relative + z-index 993, Loobek); een paneel of backdrop binnen de
   kop kan daardoor nooit boven de rest van de pagina (o.a. #to-top z 996,
   sidebars/popups tot 99991) uitkomen. In de kop blijft het paneel dicht. */
@media only screen and (min-width: 768px) {
	/* In de kop: nooit tonen (ook niet bij Loobeks :hover-dropdown, style.css r. 1476). */
	#page .my-account-wrapper .dropdown-container.jv-account-panel {
		display: none;
	}

	/* Modal-root: boven Loobeks hoogste laag (99991, sidebars/popups). */
	.jv-modal {
		display: none;
	}
	.jv-modal.is-open {
		position: fixed;
		z-index: 100000;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: clamp(16px, 4vh, 40px) 24px;
	}
	/* Fullscreen JeVibe-achtergrond ("Meer dan alleen producten.png" als webp,
	   images/jv-login-bg.webp 1672x941 en -1280.webp voor tablet). Dekt de pagina
	   volledig af; een lichte overlay laat het paneel loskomen. Wordt pas geladen
	   als de modal voor het eerst opent (het element bestaat daarvoor niet). */
	.jv-modal__backdrop {
		position: absolute;
		inset: 0;
		background:
			linear-gradient(rgba(10, 18, 28, .22), rgba(10, 18, 28, .22)),
			url("../images/jv-login-bg.webp") center center / cover no-repeat,
			#e9e3da;
		animation: jv-fade-in .18s ease-out both;
	}
	#jv-modal-root.is-closing .jv-modal__backdrop {
		animation: jv-fade-out .16s ease-in both;
	}
	#jv-modal-root .jv-account-panel {
		position: relative;
		z-index: 1;
		display: block;
		box-sizing: border-box;
		width: min(100%, 640px);
		max-height: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		overflow-y: auto; /* lage schermen: de modal scrolt intern, de pagina niet */
		overscroll-behavior: contain;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 24px 64px rgba(10, 18, 28, .28), 0 2px 8px rgba(10, 18, 28, .08);
		text-align: left;
		animation: jv-login-in .2s ease-out both;
	}
	#jv-modal-root.is-closing .jv-account-panel {
		animation: jv-login-out .16s ease-in both;
	}

	/* Scroll-lock van de pagina zolang de modal open is (ruimte van de scrollbalk
	   blijft, dus geen verspringen). */
	html.jv-modal-open {
		overflow: hidden;
	}
	html.jv-modal-open body {
		padding-right: var(--jv-sbw, 0);
	}

	.jv-login {
		--jv-hero-h: clamp(170px, 17vw, 196px);
		background: #fff;
	}
	.jv-login__hero {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: var(--jv-hero-h);
		padding: 24px clamp(28px, 4vw, 44px);
		background: var(--jv-wall);
	}
	/* Foto rechts in de hero, volle hoogte (top/bottom 0), breedte volgt (2:1). */
	.jv-login .jv-login__hero-img {
		position: absolute;
		z-index: 1; /* boven de wandkleur van de hero, onder de tekst */
		top: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: 100%;
		object-position: right center;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
		mask-image: linear-gradient(90deg, transparent 0, #000 34%);
	}
	.jv-login__hero-text {
		position: relative;
		z-index: 2;
		max-width: 54%;
	}
	.jv-login .jv-login__title {
		font-size: clamp(28px, 2.6vw, 34px);
	}
	.jv-login .jv-login__close {
		position: absolute;
		z-index: 3;
		top: 12px;
		right: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, .6);
		color: var(--jv-ink);
		cursor: pointer;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}
	.jv-login .jv-login__close:hover {
		background: rgba(255, 255, 255, .9);
		color: var(--jv-ink);
	}
	.jv-login__card {
		padding: 24px clamp(28px, 4vw, 44px) 0;
	}
	.jv-login--keuze .jv-login__card {
		padding-right: clamp(24px, 3vw, 36px);
		padding-left: clamp(24px, 3vw, 36px);
	}
	.jv-login .jv-login__usps {
		margin: 28px clamp(28px, 4vw, 44px) 0;
		padding-top: 22px;
		border-top: 1px solid var(--jv-line);
	}
	.jv-login__tagline {
		margin: 20px clamp(28px, 4vw, 44px) 0;
		padding-bottom: 26px;
	}
}

/* Tablet (768-1279px): kleinere achtergrondversie; staand ligt de doos rechts van het midden. */
@media only screen and (min-width: 768px) and (max-width: 1279px) {
	.jv-modal__backdrop {
		background:
			linear-gradient(rgba(10, 18, 28, .22), rgba(10, 18, 28, .22)),
			url("../images/jv-login-bg-1280.webp") 70% center / cover no-repeat,
			#e9e3da;
	}
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
	.jv-modal__backdrop {
		background-position: 0 0, center center, 0 0;
	}
}

/* Desktop (1024px+): compacter paneel, 520-580px breed. */
@media only screen and (min-width: 1024px) {
	#jv-modal-root .jv-account-panel {
		width: clamp(520px, 40vw, 580px);
	}
	/* Keuzescherm: iets breder, zodat beide knoppen naast elkaar op één regel passen. */
	#jv-modal-root .jv-account-panel--keuze {
		width: clamp(660px, 54vw, 740px);
	}
	.jv-login .jv-login__usp {
		font-size: 14px;
	}
}

@keyframes jv-login-in {
	from { opacity: 0; transform: translateY(12px) scale(.985); }
	to   { opacity: 1; transform: none; }
}
@keyframes jv-login-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(8px) scale(.99); }
}
@keyframes jv-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes jv-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	#jv-modal-root .jv-account-panel,
	#jv-modal-root.is-closing .jv-account-panel,
	#jv-modal-root .jv-modal__backdrop,
	#jv-modal-root.is-closing .jv-modal__backdrop {
		animation: none;
	}
}



/* --------------------------------------------------------------------------
   4. Account Hub (ingelogd accountmenu)
   --------------------------------------------------------------------------
   Markup: loobek-child/inc/jv-klantinlog.php (jv_klantinlog_account_hub).
   Zelfde paneel-mechaniek als het inlogpaneel (sectie 3): mobiel Loobeks
   schermvullende paneel, vanaf 768px een modal (gedimde achtergrond).
   Vervangt Loobeks lijstje + de oude Customizer-CSS (.account-dropdown-form ul
   ...) en het thema-script dat er links in plakte.
   -------------------------------------------------------------------------- */

.jv-hub {
	--jv-blue: #0B33B3;
	--jv-ink: #111;
	--jv-muted: #5f636b;
	--jv-line: #e7e7ea;
	--jv-soft: #f6f4f0;
	--jv-radius: 14px;
	position: relative;
	color: var(--jv-ink);
	font-family: var(--loobek-main-font), sans-serif;
	text-align: left;
}
.jv-hub p {
	margin: 0;
}
.jv-hub .jv-hub__close {
	display: none;
}

/* Kop: profiel + banner */
.jv-hub__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: var(--jv-soft);
	border-bottom: 1px solid var(--jv-line);
}
.jv-hub__profile {
	padding: 22px 20px 18px;
}
.jv-hub__id {
	display: flex;
	align-items: center;
	gap: 14px;
}
.jv-hub__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid #dde4f6;
	border-radius: 50%;
	background: #eef2fc;
	color: var(--jv-blue);
	font-family: var(--loobek-button-font), sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}
.jv-hub__who {
	min-width: 0;
}
.jv-hub .jv-hub__hello {
	font-size: 14px;
	line-height: 1.3;
	color: var(--jv-muted);
}
.jv-hub .jv-hub__name {
	font-family: var(--loobek-button-font), sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
/* "Naar mijn account" onder de naam, op de plek van het vroegere e-mailadres */
.jv-hub a.jv-hub__account {
	display: inline-block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--jv-muted);
	text-decoration: none;
}
.jv-hub a.jv-hub__account:hover {
	color: var(--jv-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.jv-hub__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 14px;
}
.jv-hub a.jv-hub__coins {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 6px 12px 6px 8px;
	border: 1px solid var(--jv-line);
	border-radius: 999px;
	background: #fff;
	color: var(--jv-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.jv-hub a.jv-hub__coins:hover {
	border-color: #cfd5e3;
	color: var(--jv-ink);
}
.jv-hub__coin {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ffe08a, #f2b632 60%, #d99a14);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}
.jv-hub__coins .jv-login__icon {
	width: 16px;
	height: 16px;
	color: var(--jv-muted);
}
.jv-hub .jv-hub__since {
	font-size: 12px;
	line-height: 1.35;
	color: var(--jv-muted);
}
.jv-hub__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 14px;
}
.jv-hub a.jv-hub__dashboard {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--jv-ink);
	border-radius: 12px;
	background: var(--jv-ink);
	color: #fff;
	font-family: var(--loobek-button-font), sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.jv-hub a.jv-hub__dashboard:hover {
	border-color: var(--jv-blue);
	background: var(--jv-blue);
	color: #fff;
}
.jv-hub a.jv-hub__dashboard .jv-login__icon {
	width: 18px;
	height: 18px;
	color: currentColor;
}

.jv-hub__banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 96px;
	overflow: hidden;
	background: #ece7e0;
}
.jv-hub .jv-hub__banner-text {
	position: relative;
	z-index: 2;
	max-width: 55%;
	padding: 14px 20px;
	font-family: var(--loobek-button-font), sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--jv-ink);
}
.jv-hub__banner-text span {
	display: block;
	margin-top: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--jv-muted);
}
.jv-hub__sign::before {
	content: "\2014\00a0"; /* "— JEVIBE"; mobiel een blauw lijntje (4b) */
}
.jv-hub__br {
	display: none; /* alleen mobiel: "Good things / keep coming." */
}
.jv-hub .jv-hub__banner-img {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	width: auto;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
	mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}

/* Navigatie: één lijst op mobiel, twee kolommen waar ruimte is (auto-fit). */
.jv-hub__nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 8px 16px;
	padding: 14px 12px;
}
.jv-hub__col {
	display: grid;
	gap: 8px;
	align-content: start;
}
.jv-hub a.jv-hub__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var(--jv-line);
	border-radius: 12px;
	background: #fff;
	color: var(--jv-ink);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.jv-hub a.jv-hub__item:hover {
	border-color: #d6dbe6;
	background: #f7f8fb;
	color: var(--jv-ink);
}
.jv-hub a.jv-hub__item:focus-visible,
.jv-hub a.jv-hub__coins:focus-visible,
.jv-hub a.jv-hub__account:focus-visible,
.jv-hub a.jv-hub__dashboard:focus-visible,
.jv-hub a.jv-hub__logout:focus-visible,
.jv-hub .jv-hub__close:focus-visible {
	outline: 3px solid rgba(11, 51, 179, .35);
	outline-offset: 2px;
}
.jv-hub__item > .jv-login__icon:first-child {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--jv-ink);
}
.jv-hub__item > .jv-login__icon--chevron {
	flex: none;
	width: 18px;
	height: 18px;
	margin-left: auto;
	color: #8a8f98;
}
.jv-hub__label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.jv-hub__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.jv-hub__sub {
	display: none; /* mobiel: alleen de titel, snel scanbaar */
	font-size: 13px;
	line-height: 1.35;
	color: var(--jv-muted);
}

/* Voet: USP's (vanaf tablet) + uitloggen */
.jv-hub__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding: 8px 12px 24px;
}
.jv-hub__usps {
	display: none;
}
.jv-hub a.jv-hub__logout {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 10px 22px;
	border: 1px solid #cfd2d8;
	border-radius: 12px;
	background: #fff;
	color: var(--jv-ink);
	font-family: var(--loobek-button-font), sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}
.jv-hub a.jv-hub__logout:hover {
	border-color: var(--jv-ink);
	color: var(--jv-ink);
}
.jv-hub__logout .jv-login__icon {
	width: 20px;
	height: 20px;
	color: currentColor;
}

/* 4b. Mobiel (tot 767px): wit paneel (Loobek legt het over het scherm) met één doorlopende,
   compacte hero: profiel, Vibe Coins, verkoperslink en "Good things keep coming." (echte HTML)
   op de mobiele hero-foto jv-account-hero-mobile*.webp (staand, 1086x1448). Die staat op
   breedte geschaald rechtsonder, zodat de doos heel blijft en nooit achter de tekst valt (met
   cover zou de doos de halve breedte innemen); de linkerrand vloeit over in de hero-kleur, die
   uit de foto zelf komt. De <img> van de desktopbanner wordt hier niet getoond (lazy: ook niet
   geladen). Niet sticky: hij scrolt onder Loobeks kop weg. Lichtere menutekst. */
@media only screen and (max-width: 767px) {
	#page .ts-tiny-account-wrapper .dropdown-container.jv-account-panel--hub {
		background: #fff;
	}
	.jv-hub {
		--jv-line: #e6eaf0;
		--jv-photo-w: min(84vw, 390px);
	}
	.jv-hub__top {
		position: relative;
		display: block;
		overflow: hidden;
		background: linear-gradient(180deg, #e3eefd 0, #e8f0fb 55%, #ecf0f6 100%);
		border-bottom: 0;
	}
	.jv-hub__top::before,
	.jv-hub__top::after {
		content: "";
		position: absolute;
		z-index: 0;
		pointer-events: none;
	}
	/* Foto: doos (49–98% van de breedte, 58–79% van de hoogte) rechtsonder, ca. 18px boven de onderrand. */
	.jv-hub__top::before {
		right: 0;
		bottom: calc(18px - var(--jv-photo-w) * .28);
		width: var(--jv-photo-w);
		aspect-ratio: 1086 / 1448;
		background: url("../images/jv-account-hero-mobile-480.webp") center / cover no-repeat;
		background-image: -webkit-image-set(url("../images/jv-account-hero-mobile-480.webp") 1x, url("../images/jv-account-hero-mobile-800.webp") 2x, url("../images/jv-account-hero-mobile.webp") 3x);
		background-image: image-set(url("../images/jv-account-hero-mobile-480.webp") type("image/webp") 1x, url("../images/jv-account-hero-mobile-800.webp") type("image/webp") 2x, url("../images/jv-account-hero-mobile.webp") type("image/webp") 3x);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
		mask-image: linear-gradient(90deg, transparent 0, #000 24%);
	}
	/* Heel licht wit links, voor de leesbaarheid van profiel en tekst; geen donkere overlay. */
	.jv-hub__top::after {
		inset: 0;
		background: linear-gradient(90deg, rgba(255, 255, 255, .38) 0, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, 0) 65%);
	}
	.jv-hub .jv-hub__banner-img {
		display: none;
	}
	.jv-hub__profile {
		position: relative;
		z-index: 1;
		padding: 18px 16px 0;
	}
	.jv-hub__id {
		gap: 12px;
	}
	.jv-hub__avatar {
		width: 54px;
		height: 54px;
		border-color: #d9e2f6;
		background: #eaf0fc;
		font-size: 21px;
	}
	.jv-hub .jv-hub__hello {
		font-size: 13px;
		color: #5b6577;
	}
	.jv-hub .jv-hub__name {
		font-size: 22px;
		font-weight: 700;
		line-height: 1.15;
		letter-spacing: -.01em;
	}
	.jv-hub a.jv-hub__account {
		margin-top: 3px;
		font-size: 13px;
		color: var(--jv-blue);
	}
	.jv-hub a.jv-hub__account:hover {
		color: var(--jv-blue);
	}
	.jv-hub__meta {
		flex-wrap: nowrap;
		gap: 14px;
		margin-top: 14px;
	}
	.jv-hub a.jv-hub__coins {
		flex: none;
		min-height: 38px;
		padding: 5px 10px 5px 7px;
		border-color: #dfe5ef;
		font-weight: 600;
		box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
	}
	.jv-hub .jv-hub__since {
		min-width: 0;
		padding-left: 14px;
		border-left: 1px solid #d5dcea;
		color: #3f4a5c;
		text-shadow: 0 0 6px #fff, 0 0 12px rgba(255, 255, 255, .9); /* leesbaar boven de plant (smalle schermen) */
	}
	/* Smalle schermen: de plant komt achter "Lid sinds"; dan een lichte pil, als de Coins. */
	@media (max-width: 374px) {
		.jv-hub .jv-hub__since {
			padding: 4px 10px;
			border: 1px solid rgba(223, 229, 239, .9);
			border-radius: 12px;
			background: rgba(255, 255, 255, .78);
			text-shadow: none;
		}
	}
	/* Verkoper: compacte link in de hero, geen zwart vlak. Klanten krijgen hem niet. */
	.jv-hub__links {
		margin-top: 10px;
	}
	.jv-hub a.jv-hub__dashboard {
		min-height: 36px;
		padding: 6px 12px;
		border-color: #d5dcea;
		border-radius: 999px;
		background: rgba(255, 255, 255, .9);
		color: var(--jv-ink);
		font-size: 13px;
		font-weight: 600;
	}
	.jv-hub a.jv-hub__dashboard:hover {
		border-color: var(--jv-blue);
		background: #fff;
		color: var(--jv-blue);
	}
	.jv-hub a.jv-hub__dashboard .jv-login__icon {
		width: 16px;
		height: 16px;
	}
	.jv-hub__banner {
		position: static; /* de foto positioneert t.o.v. de hele hero */
		display: block;
		min-height: 0;
		overflow: visible;
		background: none;
	}
	.jv-hub .jv-hub__banner-text {
		max-width: 60%;
		padding: 28px 16px 20px;
		font-family: var(--loobek-button-font), sans-serif;
		font-size: clamp(26px, 7vw, 32px);
		font-weight: 400;
		line-height: 1.08;
		letter-spacing: -.02em;
		color: #0f172a;
	}
	.jv-hub__br {
		display: inline;
	}
	.jv-hub__banner-text .jv-hub__sign {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 12px;
		font-family: var(--loobek-main-font), sans-serif;
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: .28em;
		color: #4a5468;
	}
	.jv-hub__sign::before {
		content: "";
		flex: none;
		width: 28px;
		height: 1.5px;
		background: var(--jv-blue);
	}

	/* Menu: zelfde kaarten, rustiger. */
	.jv-hub__nav {
		gap: 8px;
		padding: 14px 12px;
	}
	.jv-hub a.jv-hub__item {
		gap: 14px;
		min-height: 50px;
		padding: 13px 14px;
		border-color: var(--jv-line);
		border-radius: 13px;
	}
	.jv-hub__item > .jv-login__icon:first-child {
		width: 21px;
		height: 21px;
		color: #1b2433;
		stroke-width: 1.7;
	}
	.jv-hub__item > .jv-login__icon--chevron {
		width: 17px;
		height: 17px;
		color: #9aa1ac;
		stroke-width: 1.7;
	}
	.jv-hub__title {
		font-size: 15.5px;
		font-weight: 500; /* IBM Plex Sans: 500 niet geladen, valt terug op 400 (geen extra fontbestand) */
		line-height: 1.25;
		letter-spacing: -.005em;
		color: #111827;
	}
}

/* Tablet en desktop: in de modal (sectie 3c), gedimde achtergrond i.p.v. de foto. */
@media only screen and (min-width: 768px) {
	#jv-modal-root.jv-modal--hub .jv-modal__backdrop {
		background: rgba(10, 18, 28, .42);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}
	#jv-modal-root .jv-account-panel--hub {
		width: min(100%, 760px);
	}
	.jv-hub .jv-hub__close {
		position: absolute;
		z-index: 3;
		top: 14px;
		right: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, .8);
		color: var(--jv-ink);
		cursor: pointer;
	}
	.jv-hub .jv-hub__close:hover {
		background: #fff;
		color: var(--jv-ink);
	}
	.jv-hub__top {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
	.jv-hub__profile {
		padding: 28px 28px 22px;
	}
	.jv-hub__avatar {
		width: 64px;
		height: 64px;
		font-size: 26px;
	}
	.jv-hub .jv-hub__name {
		font-size: 28px;
	}
	.jv-hub__banner {
		min-height: 100%;
	}
	.jv-hub .jv-hub__banner-text {
		font-size: 20px;
	}
	.jv-hub__nav {
		gap: 10px 16px;
		padding: 22px 28px 8px;
	}
	.jv-hub__col {
		gap: 10px;
	}
	.jv-hub a.jv-hub__item {
		min-height: 64px;
		padding: 14px 16px;
		border-radius: var(--jv-radius);
	}
	.jv-hub__sub {
		display: block;
	}
	.jv-hub__foot {
		margin: 14px 28px 0;
		padding: 18px 0 24px;
		border-top: 1px solid var(--jv-line);
	}
	.jv-hub__usps {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 26px;
	}
	.jv-hub__usp {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-size: 12px;
		line-height: 1.35;
		color: var(--jv-muted);
	}
	.jv-hub__usp strong {
		display: block;
		font-size: 13px;
		font-weight: 600;
		color: var(--jv-ink);
	}
	.jv-hub__usp .jv-login__icon {
		flex: none;
		width: 24px;
		height: 24px;
		color: var(--jv-ink);
	}
	.jv-hub a.jv-hub__logout {
		flex: 0 0 auto;
	}
}

/* Desktop: breder, twee volle kolommen zoals de referentie. */
@media only screen and (min-width: 1024px) {
	#jv-modal-root .jv-account-panel--hub {
		width: clamp(880px, 70vw, 1000px);
	}
	.jv-hub__profile {
		padding: 30px 32px 24px;
	}
	.jv-hub__nav {
		gap: 12px 20px;
		padding: 24px 32px 8px;
	}
	.jv-hub__foot {
		margin: 16px 32px 0;
	}
	.jv-hub .jv-hub__banner-text {
		font-size: 24px;
	}
}

/* Account Hub: profielfoto (JVCA_Avatar) in de bestaande ronde avatar; initiaal blijft eronder als terugval. */
.jv-hub__avatar {
	position: relative;
	overflow: hidden;
}
.jv-hub__avatar .jvca-avatar__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}