/* 29 okt 2026 (Dennis): telefoonmenu. Winkelmand, Mijn account en Klantenservice als vaste balk onderin de lade (sinds Cadeaus en
   Zakelijk erbij kwamen, vielen ze onder de rand). Zitten er nog menukoppen achter de balk, dan een zachte vervaging met een
   pijltje omlaag (klasse wcw-lade-meer, gezet door het scriptje in menu.php). */
@media (max-width: 992px) {
	/* Hoogte: het thema zet 100vh. Op Android (en iOS met balk onderin) is dat hoger dan wat je ziet, dan viel de balk onder de
	   systeemknoppen (Dennis 29 okt). Nu: --wcw-lade-h = de echt zichtbare hoogte (visualViewport, gezet door het scriptje in menu.php), anders 100dvh, anders 100vh. */
	html body.wcw-menu-nieuw.mobile-toggled .col-full-nav .shoptimizer-primary-navigation.col-full { padding-bottom: 0 !important; top: 0 !important; height: 100vh !important; height: 100dvh !important; height: var(--wcw-lade-h, 100dvh) !important; max-height: var(--wcw-lade-h, 100dvh) !important; }
	html body.wcw-menu-nieuw .col-full-nav .shoptimizer-primary-navigation { padding-bottom: 0 !important; }
	html body.wcw-menu-nieuw ul.wcw-menu-extra { position: sticky !important; bottom: 0 !important; z-index: 5; display: flex !important; margin: 0 -15px !important; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) !important; background: #fff !important; border-top: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 -6px 14px rgba(0,0,0,.04); }
	html body.wcw-menu-nieuw ul.wcw-menu-extra li { flex: 1 1 0; margin: 0 !important; border: 0 !important; list-style: none; }
	/* Winkelmand rechts (Dennis 29 okt): onder de duim van rechtshandigen en waar het tasje ook in de kopbalk staat. Volgorde in de HTML
	   blijft winkelmand, account, klantenservice (header.php), dus alleen omgedraaid op het scherm. */
	html body.wcw-menu-nieuw ul.wcw-menu-extra li:first-child { order: 3; }
	html body.wcw-menu-nieuw ul.wcw-menu-extra li:last-child { order: 1; }
	html body.wcw-menu-nieuw ul.wcw-menu-extra li:nth-child(2) { order: 2; }
	html body.wcw-menu-nieuw ul.wcw-menu-extra li a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center; gap: 4px !important; padding: 6px 2px !important; border: 0 !important; font-size: 12px !important; line-height: 1.2 !important; color: #333 !important; text-align: center; }
	html body.wcw-menu-nieuw ul.wcw-menu-extra li a svg { width: 22px !important; height: 22px !important; margin: 0 !important; }
	html body.wcw-menu-nieuw ul.wcw-menu-extra::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 44px; pointer-events: none; opacity: 0; transition: opacity .25s ease;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center 14px / 20px 20px no-repeat, linear-gradient(to bottom, rgba(255,255,255,0), #fff 75%); }
	html body.wcw-menu-nieuw .wcw-lade-meer ul.wcw-menu-extra::before { opacity: 1; animation: wcw-lade-wip 1.1s ease-in-out .5s 2; }
}
@keyframes wcw-lade-wip { 0%, 100% { background-position: center 14px, 0 0; } 50% { background-position: center 20px, 0 0; } }
@media (prefers-reduced-motion: reduce) { html body.wcw-menu-nieuw .wcw-lade-meer ul.wcw-menu-extra::before { animation: none; } }