/*
 * Mobiele scroll-header (inc/jv-scroll-kop.php, js/jv-scroll-kop.js).
 *
 * De klassen op <html> zet alleen het script, en alleen tot 767 px:
 *   jv-kop-actief  de bestaande Loobek-header staat vast bovenaan (sticky, blijft in de pagina: geen plaatshouder,
 *                  geen verspringing). Wordt pas gezet als de header al uit beeld is gescrold.
 *   jv-kop-weg     de header is naar boven weggeschoven.
 *   jv-kop-anim    overgang aan; komt een beeld later dan jv-kop-actief, zodat het vastzetten niet zichtbaar is.
 *   jv-balk-weg    alleen op categorie-/archiefpagina's: de balk met tabs/sorteren/filters is mee weggeschoven.
 * Geen klasse = de gewone Loobek-header.
 */
@media only screen and (max-width: 767px) {

	html.jv-kop-actief .ts-header.header-sticky {
		position: sticky;
		top: 0;
	}

	/*
	 * Sticky werkt niet als html én body overflow-x: hidden hebben: dan wordt body een eigen scrollcontainer die
	 * nooit scrolt. Elementor-CSS op de homepage zet precies dat (html, body { overflow-x: hidden !important },
	 * gemeten: header top -1770 px). "clip" knipt net zo goed af maar maakt geen scrollcontainer. !important omdat
	 * de Elementor-regel dat ook heeft. Menu's die overflow: hidden zetten blijven werken: clip naast hidden telt
	 * als hidden.
	 */
	html.jv-kop-actief,
	html.jv-kop-actief body {
		overflow-x: clip !important;
	}

	/*
	 * Menu, zijpaneel of quickshop open: die zetten overflow: hidden op html/body (sv-mobile-menu.css:53,
	 * loobek/css/responsive.css:74, loobek/style.css:14276). Dan wordt body de scrollcontainer en schiet een sticky
	 * header naar zijn plek bovenaan de pagina, ver buiten beeld (gemeten: top -1386 px). Zolang dat duurt de header
	 * fixed; het menu of paneel dekt de pagina eronder af.
	 */
	html.jv-kop-actief.sv-mmenu-open .ts-header.header-sticky,
	html.jv-kop-actief body.floating-sidebar-active .ts-header.header-sticky,
	html.jv-kop-actief body.opening-quickshop .ts-header.header-sticky {
		position: fixed;
		left: 0;
		right: 0;
	}

	/* Zichtbaar en vastgezet: de schaduw die Loobek zelf aan een vaste header geeft (style.css .is-sticky). */
	html.jv-kop-actief:not(.jv-kop-weg) .ts-header.header-sticky {
		box-shadow: 0 4px 4px rgba(155, 155, 155, .3);
	}

	/*
	 * Weg. Niet zolang het mobiele menu, een Loobek-zijpaneel (zoeken, winkelwagen, account, filters), quickshop of
	 * de menulaag open staat: dan hoort de header in beeld.
	 */
	html.jv-kop-weg:not(.sv-mmenu-open) body:not(.floating-sidebar-active):not(.opening-quickshop):not(.menu-background-overlay) .ts-header.header-sticky {
		transform: translateY(-100%);
		box-shadow: none;
	}

	/*
	 * De menulaag .overlay in de header is position: fixed en 100000px hoog (loobek/style.css:343). Een transform
	 * maakt de header het referentievlak voor die laag, en dan wordt de pagina 100.000 px lang, ook tijdens de
	 * terugschuif-animatie (gemeten: 99.952 px). Die laag hoort alleen bij het hover-megamenu op desktop
	 * (main.js:117), dus zolang de header vastgezet is kan hij weg.
	 */
	html.jv-kop-actief .ts-header.header-sticky > .overlay {
		display: none;
	}

	/*
	 * Categorie-/archiefpagina's: de balk met categorie-tabs, sorteren en "Filters weergeven" (Loobek
	 * .before-loop-wrapper) gaat mee met de header. Sticky, dus hij blijft in de pagina: de productlijst verschuift
	 * niet. Staat de header in beeld, dan direct eronder (--jv-kop-h, gemeten door het script); is de header weg,
	 * dan bovenaan. Loobek zet deze balk op mobiel zelf al sticky met top 0 (css/responsive.css:1804) en Extra CSS
	 * op live zet hem static; deze selector is specifieker dan allebei. Zonder klassen blijft de balk zoals het
	 * thema en Extra CSS hem zetten.
	 */
	html.jv-kop-actief #page .before-loop-wrapper {
		position: sticky;
		top: var(--jv-kop-h, 0px);
	}

	html.jv-kop-actief.jv-kop-weg #page .before-loop-wrapper {
		top: 0;
	}

	/*
	 * Weg: pas als de gewone plek van de balk uit beeld is (jv-balk-weg, zet het script). Zelfde uitzonderingen als
	 * de header. Zichtbaar is de transform "none": in de balk zit de filterlade #ts-filter-widget-area
	 * (position: fixed), en een transform zou die aan de balk vastmaken.
	 */
	html.jv-balk-weg:not(.sv-mmenu-open) body:not(.floating-sidebar-active):not(.opening-quickshop):not(.menu-background-overlay) #page .before-loop-wrapper {
		transform: translateY(-100%);
	}

	html.jv-kop-anim .ts-header.header-sticky {
		transition: transform .22s ease-out, box-shadow .22s ease-out;
	}

	html.jv-kop-anim #page .before-loop-wrapper {
		transition: top .22s ease-out, transform .22s ease-out;
	}

	/* Filterlade of ander paneel open: de balk meteen zonder transform, anders zit de lade even aan de balk vast. */
	html.jv-kop-anim body.floating-sidebar-active #page .before-loop-wrapper,
	html.jv-kop-anim body.opening-quickshop #page .before-loop-wrapper {
		transition: none;
	}
}

@media only screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {

	html.jv-kop-anim .ts-header.header-sticky,
	html.jv-kop-anim #page .before-loop-wrapper {
		transition: none;
	}
}