/*
Theme Name:   TrackStore Child (Yithsu)
Template:     trackstore
Description:  Child theme voor yithsu.com. Eigen CSS en PHP-aanpassingen komen hier, zodat updates van TrackStore ze niet overschrijven.
Author:       Shu
Version:      1.0.1
Text Domain:  trackstore-child
*/

/* Eigen CSS hieronder. Dit bestand laadt ná alle stijlen van TrackStore.
   Overgenomen uit Customizer > Extra CSS op 2026-11-08. */

/* Productcategorie verbergen */
.eltd-pl-categories,
.eltd-pli-category {
	display: none !important;
}

/* Product card */
ul.products > .product .eltd-pl-text-wrapper .eltd-pl-text-wrapper-info-top-holder,
.eltd-pl-holder .eltd-pli .eltd-pli-text-wrapper .eltd-pli-text-wrapper-info-top-holder {
	border-bottom: 0px solid #666;
	display: grid;
}

.eltd-woocommerce-columns-3 .eltd-pl-main-holder > .products > .product {
	min-height: 420px;
}

/* Out of stock notification */
#stock_notifier_main_form {
	margin-top: 25px;
}

#stock_notifier_main_form button {
	padding: 18px 25px;
	border: 1px solid black;
	color: white;
	background-color: black;
	font-weight: 600;
}

#stock_notifier_main_form h5 {
	text-transform: none !important;
}

button.stock_manager_button {
	margin: 0px !important;
}

.woocommerce-page .eltd-content input[type="text"] {
	margin-bottom: 12px;
	text-transform: none !important;
}

/* Disable cart button
.eltd-woocommerce-page .eltd-content .single_variation_wrap {
	display: none !important;
} */

/* Popup Builder */
@media only screen and (max-width: 680px) {
	.sgpb-popup-builder-content-5907 h3 {
		font-size: 26px;
	}
}

/* Checkout form */
.eltd-woocommerce-page .woocommerce-checkout .col-1 p,
.eltd-woocommerce-page .woocommerce-checkout .col-2 p {
	margin-bottom: 8px;
}

.eltd-woocommerce-page .woocommerce-checkout .select2-container {
	margin-bottom: 10px;
}

.eltd-woocommerce-page .woocommerce-checkout .col-1 label:not(.checkbox),
.eltd-woocommerce-page .woocommerce-checkout .col-2 label:not(.checkbox) {
	margin-top: 10px;
}

/* Megamenu dropdown */
.eltd-drop-down .wide .second .inner > ul > li {
	margin: 0 0 30px 0;
	border-left: 0px solid #ccc;
}

/* Pagination */
.woocommerce-pagination .page-numbers li a.next,
.woocommerce-pagination .page-numbers li a.prev {
	width: 44px;
	height: 34px;
	border: 1px solid darkblue;
	text-align: center;
	padding-top: 10px;
}

.woocommerce-pagination .page-numbers li.eltd-parent-active,
.woocommerce-pagination .page-numbers li.eltd-pag-last-page {
	margin-top: 10px;
}

/* Mobile body width */
@media only screen and (max-width: 480px) {
	.eltd-container-inner,
	.eltd-grid,
	.eltd-row-grid-section {
		width: auto;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* UITGESCHAKELD: in de originele Extra CSS stond een tab midden in deze klassenaam
	   (".wp-block-	navigation__submenu-container"), waardoor de regel nooit werkte.
	   Haal het commentaar weg als je hem wél wilt laten werken, en test dan het mobiele menu.
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		width: auto !important;
	} */

	/* Hoogte van het opengeklapte mobiele menu: stond hier vast op 100vw (schermbreedte),
	   waardoor het menu werd afgekapt als een submenu openklapte. Verwijderd (2026-11-08):
	   het menu krijgt weer de hoogte van zijn inhoud, zoals het thema het bedoelt. */
}

/* Page title position */
@media only screen and (max-width: 1024px) {
	.eltd-title-holder.eltd-has-bg-image .eltd-title-wrapper {
		top: 0%;
	}

	/* Iconen rechts (taal, zoeken, winkelwagen, hamburger) op één lijn met het logo.
	   Het thema centreert dit blok verticaal met vertical-align: middle. Eerder stond hier
	   vertical-align: sub + padding-top: 20px, waardoor alles lager kwam dan het logo.
	   Nu: naast elkaar (inline-flex), onderling gecentreerd (align-items) en als blok
	   gecentreerd in de header (vertical-align: middle, zoals het thema zelf doet). */
	.eltd-vertical-align-containers .eltd-position-right-inner {
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
	}

	/* Thema zet de hamburger op top: 50% (relative); in deze opzet is dat niet nodig. */
	.eltd-mobile-header .eltd-mobile-menu-opener {
		top: 0;
	}

	.wpml-language-switcher-block > .wp-block-navigation-item {
		margin-right: 8px; /* margin-top: 4px weggehaald: duwde de vlag uit de lijn */
	}

	/* Taalswitch op één lijn (gemeten 2026-11-08). De taalswitch is een blok-widget en
	   krijgt van het thema .widget { margin: 0 0 35px }. Die 35px ondermarge maakte de
	   iconenrij 55px hoog met de vlag bovenaan. Hier: geen marge op de widget. */
	.eltd-mobile-header .eltd-position-right-inner > .widget {
		margin: 0;
	}

	/* WPML zet zelf margin-top: -4px op het blok (inline stijl uit de blokinstellingen),
	   en de vlag is een inline afbeelding met extra regelruimte eronder. Beide weg,
	   zodat het blok precies zo hoog is als de vlag en netjes centreert. */
	.eltd-mobile-header .wpml-language-switcher-block {
		margin-top: 0 !important;
	}

	.eltd-mobile-header .wpml-language-switcher-block .current-language-item .wpml-ls-flag {
		display: block;
	}

	/* Witte mobiele header + wit menu met zwarte iconen/teksten, voor alle schermen waarop de
	   mobiele header verschijnt (tot 1024px). Stond eerst alleen tot 480px, waardoor de header
	   tussen 481 en 1024px zwart bleef (kleur uit de Elated-opties, style_dynamic.css). */
	.eltd-mobile-header .eltd-mobile-header-inner {
		background-color: #fff !important;
	}

	.eltd-mobile-header .eltd-mobile-nav {
		background-color: #fff !important;
	}

	/* Hamburgermenu-icoon zwart. In Elated-opties (Mobile Header > icoonkleur) staat wit (#ffffff),
	   gemaakt voor een zwarte mobiele header. Hierboven is de header wit gemaakt, dus de streepjes
	   werden onzichtbaar. Zelfde selector als style_dynamic.css; child CSS laadt daarna en wint. */
	.eltd-mobile-header .eltd-mobile-menu-opener a .eltd-mobile-menu-icon .eltd-mm-line {
		background-color: #000;
	}

	/* Menu-items in het mobiele menu zwart. Ook hier staat in de Elated-opties wit (#ffffff),
	   zie style_dynamic.css (mobile navigation). Zelfde selectors; child CSS laadt daarna en wint. */
	.eltd-mobile-header .eltd-mobile-nav .eltd-grid > ul > li > a,
	.eltd-mobile-header .eltd-mobile-nav .eltd-grid > ul > li > h6,
	.eltd-mobile-header .eltd-mobile-nav .eltd-grid > ul > li.eltd-active-item > a,
	.eltd-mobile-header .eltd-mobile-nav .eltd-grid > ul > li.eltd-active-item > h6,
	.eltd-mobile-header .eltd-mobile-nav .eltd-grid > ul > li > a:hover,
	.eltd-mobile-header .eltd-mobile-nav .eltd-grid > ul > li > h6:hover,
	.eltd-mobile-header .eltd-mobile-nav ul ul li a,
	.eltd-mobile-header .eltd-mobile-nav ul ul li h6,
	.eltd-mobile-header .eltd-mobile-nav ul ul li.current-menu-ancestor > a,
	.eltd-mobile-header .eltd-mobile-nav ul ul li.current-menu-item > a,
	.eltd-mobile-header .eltd-mobile-nav ul ul li.current-menu-ancestor > h6,
	.eltd-mobile-header .eltd-mobile-nav ul ul li.current-menu-item > h6,
	.eltd-mobile-header .eltd-mobile-nav ul ul li a:hover,
	.eltd-mobile-header .eltd-mobile-nav ul ul li h6:hover {
		color: #000;
	}
}

/* Hoofdmenu (desktop): menu-items 24px dichter bij elkaar.
   Thema: .eltd-main-menu > ul > li > a { padding: 0 29px } = 58px tussen twee items.
   Hier 17px per kant = 34px tussen twee items. Vervangt de eerdere regel voor
   1025-1100px (19px), want deze is smaller en past daar dus ook. */
.eltd-main-menu > ul > li > a {
	padding: 0 17px;
}

/* WPML-taalswitch in het hoofdmenu (desktop + sticky): vlag en taalnaam naast elkaar.
   Gemeten 2026-11-08: img.wpml-ls-flag kreeg display: block, waardoor de taalnaam
   eronder kwam (in het mobiele menu was hij wel inline). Hier weer inline. */
.eltd-main-menu .wpml-ls-menu-item .item_text > img.wpml-ls-flag {
	display: inline-block;
	vertical-align: middle;
	margin: 0 6px 0 0;
}

/* WPML-taalswitch in het mobiele menu: 8px ruimte tussen vlag en taalnaam.
   (WPML's eigen margin-left op de tekst op 0, zodat het precies 8px is.) */
.eltd-mobile-header .eltd-mobile-nav .wpml-ls-menu-item .wpml-ls-flag {
	margin-right: 8px;
	vertical-align: middle;
}

.eltd-mobile-header .eltd-mobile-nav .wpml-ls-menu-item .wpml-ls-flag + span {
	margin-left: 0;
	position: relative;
	top: 2px; /* taalnaam 2px omlaag, optisch gelijk met de vlag */
}

/* Desktop dropdown (hoofdmenu): geen dikke rand aan de bovenkant.
   Thema (modules.min.css): .eltd-drop-down .second { border-top: 3px solid ... } en
   hetzelfde op de 3e-niveau submenu's; style_dynamic.css (thema-opties) maakt hem zwart (#000). */
.eltd-drop-down .second,
.eltd-drop-down .narrow .second .inner ul li ul {
	border-top: 0;
}