/* Groninger Artikelen - nieuw menu. Alleen actief met body.ga-nav (zie novamira-sandbox/ga-menu.php). */

body.ga-nav {
	--ga-grey: #5b5b5b;
	--ga-ink: #333333;
	--ga-muted: #6b6b6b;
	--ga-line: #e9ecef;
	--ga-green: #078930;
	--ga-green-dark: #065f23;
	--ga-green-soft: #eef7f1;
	--ga-red: #d52b1e;
	--ga-blue: #1f4e9e;
}

body.ga-nav .ga-icon { display: block; flex-shrink: 0; }
body.ga-nav .ga-mobile-only { display: none; }

/* Zoekveld (desktop en mobiel): opent de live zoekfunctie van Themify */
body.ga-nav #headerwrap a.ga-search {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 6px 0 18px;
	background: #ffffff;
	border: 2px solid transparent;
	border-radius: 23px;
	box-sizing: border-box;
	color: var(--ga-muted);
	text-decoration: none;
	cursor: text;
}
body.ga-nav #headerwrap a.ga-search:hover,
body.ga-nav #headerwrap a.ga-search:focus-visible { border-color: var(--ga-green); color: var(--ga-muted); }
body.ga-nav .ga-search-placeholder {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1;
}
body.ga-nav .ga-search-btn {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 17px;
	background: var(--ga-grey);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
body.ga-nav .ga-search-btn .ga-icon { width: 16px; height: 16px; }

/* Winkelmand-teller */
body.ga-nav .ga-cart-count {
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: #ffffff;
	color: var(--ga-green);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	box-sizing: border-box;
}

/* ---------- Desktop ---------- */
@media (min-width: 1201px) {
	body.ga-nav #headerwrap { background-color: var(--ga-grey); }

	body.ga-nav #header {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		grid-template-areas: "logo nav search utils";
		column-gap: 28px;
		align-items: center;
		position: relative;
		min-height: 78px;
		padding-top: 0;
		padding-bottom: 0;
	}
	body.ga-nav #header::before,
	body.ga-nav #header::after { display: none; }
	body.ga-nav #header .header-bar { grid-area: logo; float: none; margin: 0; padding: 0; }
	body.ga-nav #header #site-description { display: none; }
	body.ga-nav .ga-top-search { grid-area: search; max-width: 620px; width: 100%; justify-self: center; }
	body.ga-nav .ga-utils { grid-area: utils; display: flex; align-items: center; gap: 24px; }

	body.ga-nav .ga-util {
		display: flex;
		align-items: center;
		gap: 7px;
		color: #ffffff;
		font-family: 'Oswald', sans-serif;
		font-size: 15px;
		text-decoration: none;
	}
	body.ga-nav .ga-util:hover { color: #ffffff; opacity: .85; }
	body.ga-nav .ga-util-cart { background: var(--ga-green); padding: 9px 14px; border-radius: 6px; gap: 9px; }

	body.ga-nav #mobile-menu {
		grid-area: nav;
		align-self: stretch;
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		background: none;
		overflow: visible;
		display: block;
	}
	body.ga-nav #mobile-menu .navbar-wrapper { display: block; width: auto; height: 100%; padding: 0; }
	body.ga-nav #mobile-menu .navbar-wrapper > .search-button,
	body.ga-nav #mobile-menu .social-widget { display: none !important; }
	body.ga-nav #headerwrap #main-nav-wrap { display: block; position: static; width: auto; height: 100%; float: none; margin: 0; }
	body.ga-nav #headerwrap #main-nav-wrap .pull-down { display: none; }
	body.ga-nav #headerwrap #main-nav {
		display: flex;
		align-items: stretch;
		position: static;
		float: none;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	body.ga-nav #headerwrap #main-nav > li { display: flex; align-items: center; position: static; margin: 0; padding: 0; float: none; }
	body.ga-nav #headerwrap #main-nav > li > a {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 46px;
		margin: 0;
		padding: 0 20px;
		border-radius: 8px;
		background: rgba(255, 255, 255, .12);
		color: #ffffff;
		font-family: 'Oswald', sans-serif;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: .03em;
		text-transform: none;
		line-height: 1;
	}
	body.ga-nav #headerwrap #main-nav > li > a:hover,
	body.ga-nav #headerwrap #main-nav > li.current-menu-item > a { color: #ffffff; background: rgba(255, 255, 255, .1); }
	body.ga-nav #headerwrap #main-nav > li > a .child-arrow { display: none; }

	/* Knop Assortiment */
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment > a { font-weight: 500; }
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment > a::before {
		content: "";
		width: 18px;
		height: 14px;
		background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) 0 6px / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) 0 12px / 60% 2px no-repeat;
	}
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment:hover > a,
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment:focus-within > a { background: #ffffff; color: var(--ga-ink); }

	/* Megamenu-paneel */
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment > .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		max-height: none;
		margin: 0;
		padding: 0;
		z-index: 1000;
		grid-template-columns: repeat(4, minmax(0, 1fr)) 250px;
		background: #ffffff;
		border: 0;
		border-radius: 0 0 10px 10px;
		box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
		opacity: 1;
		visibility: visible;
		transform: none;
		overflow: visible;
	}
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment:hover > .sub-menu,
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment:focus-within > .sub-menu { display: grid !important; }

	/* Elke groep is een kolom; ga-stack-top + ga-stack delen samen 1 kolom. */
	body.ga-nav #headerwrap #main-nav li.ga-group {
		grid-row: 1 / span 2;
		float: none;
		width: auto;
		margin: 0;
		padding: 26px 18px 24px;
		border-right: 1px solid var(--ga-line);
		background: none;
	}
	body.ga-nav #headerwrap #main-nav li.ga-group.ga-stack-top { grid-row: 1; padding-bottom: 10px; }
	body.ga-nav #headerwrap #main-nav li.ga-group.ga-stack { grid-row: 2; padding-top: 10px; }
	body.ga-nav #headerwrap #main-nav li.ga-group > a {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 10px;
		padding: 0;
		background: none;
		color: var(--ga-ink);
		font-family: 'Oswald', sans-serif;
		font-size: 17px;
		font-weight: 500;
		letter-spacing: .02em;
		text-transform: none;
		white-space: nowrap;
		pointer-events: none;
		cursor: default;
	}
	body.ga-nav #headerwrap #main-nav li.ga-group > a .child-arrow { display: none; }
	body.ga-nav #headerwrap #main-nav li.ga-group > .sub-menu {
		display: block !important;
		position: static;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	body.ga-nav #headerwrap #main-nav li.ga-group > .sub-menu > li { float: none; width: 100%; margin: 0; padding: 0; }
	body.ga-nav #headerwrap #main-nav li.ga-group > .sub-menu > li > a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 6px 6px 6px 12px;
		border-radius: 6px;
		background: none;
		color: var(--ga-ink);
		font-family: 'Open Sans', sans-serif;
		font-size: 14px;
		white-space: nowrap;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		line-height: 1.4;
	}
	body.ga-nav #headerwrap #main-nav li.ga-group > .sub-menu > li > a:hover,
	body.ga-nav #headerwrap #main-nav li.ga-group > .sub-menu > li.current-menu-item > a { background: var(--ga-green-soft); color: var(--ga-green-dark); }
	body.ga-nav #headerwrap #main-nav .ga-count { flex-shrink: 0; font-size: 12px; color: var(--ga-muted); }
	body.ga-nav #headerwrap #main-nav .ga-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

	/* Uitgelicht */
	body.ga-nav #headerwrap #main-nav li.ga-promo {
		grid-column: -2 / -1;
		grid-row: 1 / span 9;
		display: flex;
		flex-direction: column;
		gap: 12px;
		float: none;
		width: auto;
		margin: 0;
		padding: 16px;
	}
}

/* Kaart Uitgelicht */
body.ga-nav #headerwrap #main-nav .ga-promo-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	min-height: 260px;
	padding: 24px;
	border-radius: 8px;
	background: var(--ga-green);
	color: #ffffff;
	text-decoration: none;
	box-sizing: border-box;
}
body.ga-nav #headerwrap #main-nav .ga-promo-card:hover { color: #ffffff; background: var(--ga-green-dark); }
body.ga-nav #headerwrap #main-nav .ga-promo-kicker { font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
body.ga-nav #headerwrap #main-nav .ga-promo-title { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.15; }
body.ga-nav #headerwrap #main-nav .ga-promo-card span { word-break: normal; overflow-wrap: normal; hyphens: none; }
body.ga-nav #headerwrap #main-nav .ga-promo-text { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.5; }
body.ga-nav #headerwrap #main-nav .ga-promo-btn,
body.ga-nav #headerwrap #main-nav .ga-promo-all {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}
body.ga-nav #headerwrap #main-nav .ga-promo-btn { align-self: flex-start; margin-top: 6px; padding: 9px 14px; border-radius: 6px; background: #ffffff; color: var(--ga-green); }
body.ga-nav #headerwrap #main-nav .ga-promo-btn .ga-icon,
body.ga-nav #headerwrap #main-nav .ga-promo-all .ga-icon { width: 15px; height: 15px; }
body.ga-nav #headerwrap #main-nav .ga-promo-all { padding: 13px 16px; border: 2px solid var(--ga-grey); border-radius: 8px; color: var(--ga-ink); }
body.ga-nav #headerwrap #main-nav .ga-promo-all:hover { background: var(--ga-grey); color: #ffffff; }

/* ---------- Mobiel ---------- */
@media (max-width: 1200px) {
	body.ga-nav .ga-top-search,
	body.ga-nav .ga-util-contact,
	body.ga-nav .ga-util-account,
	body.ga-nav .ga-cart-label { display: none; }
	body.ga-nav .ga-mobile-only { display: block; }

	/* Open menu boven de aankondigingsbalk */
	body.ga-nav #headerwrap:has(#mobile-menu.sidemenu-on) { z-index: 2001; }

	/* Ruimte voor winkelmand + menuknop naast het logo */
	body.ga-nav #header .header-bar { max-width: calc(100% - 100px); }
	body.ga-nav #header #site-logo img { max-width: 100%; height: auto; }

	body.ga-nav .ga-utils { position: absolute; top: 50%; right: 52px; transform: translateY(-50%); z-index: 5; }
	body.ga-nav .ga-util-cart {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: #ffffff;
	}
	body.ga-nav .ga-util-cart .ga-icon { width: 24px; height: 24px; }
	body.ga-nav .ga-util-cart .ga-cart-count {
		position: absolute;
		top: 3px;
		right: 0;
		min-width: 18px;
		height: 18px;
		line-height: 18px;
		font-size: 11px;
		background: var(--ga-green);
		color: #ffffff;
	}

	body.ga-nav #mobile-menu { background: #ffffff; }
	body.ga-nav #mobile-menu .navbar-wrapper > .search-button,
	body.ga-nav #mobile-menu .social-widget { display: none !important; }
	body.ga-nav .ga-mobile-search { margin: 8px 0 18px; }
	body.ga-nav #headerwrap .ga-mobile-search a.ga-search { border-color: #d9dde3; background: #f7f8fa; height: 48px; }
	body.ga-nav .ga-mobile-search .ga-search-placeholder { font-size: 16px; }

	body.ga-nav #headerwrap #main-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
	body.ga-nav #headerwrap #main-nav > li { order: 1; margin: 0; padding: 0; border: 0; width: auto; }
	body.ga-nav #headerwrap #main-nav > li > a {
		display: inline-block;
		margin: 0;
		padding: 8px 14px;
		border-radius: 18px;
		background: var(--ga-green-soft);
		color: var(--ga-green-dark);
		font-family: 'Oswald', sans-serif;
		font-size: 15px;
		line-height: 1.3;
		text-transform: none;
	}

	/* Assortiment als vaste lijst met uitklapbare groepen */
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment { order: 2; flex-basis: 100%; margin-top: 14px; }
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment > a {
		display: block;
		padding: 0 0 6px;
		border-radius: 0;
		background: none;
		color: var(--ga-muted);
		font-size: 13px;
		letter-spacing: .12em;
		text-transform: uppercase;
		pointer-events: none;
	}
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment > a .child-arrow { display: none; }
	body.ga-nav #headerwrap #main-nav > li.ga-assortiment > .sub-menu { display: block !important; margin: 0; padding: 0; }

	body.ga-nav #headerwrap #main-nav li.ga-group { border-bottom: 1px solid var(--ga-line); margin: 0; padding: 0; }
	body.ga-nav #headerwrap #main-nav li.ga-group > a {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 56px;
		margin: 0;
		padding: 0 40px 0 4px;
		color: var(--ga-ink);
		font-family: 'Oswald', sans-serif;
		font-size: 19px;
		font-weight: 500;
		text-transform: none;
		position: relative;
	}
	body.ga-nav #headerwrap #main-nav li.ga-group > .sub-menu { margin: 0; padding: 0 0 12px 22px; }
	body.ga-nav #headerwrap #main-nav li.ga-group > .sub-menu > li { margin: 0; padding: 0; border: 0; }
	body.ga-nav #headerwrap #main-nav li.ga-group > .sub-menu > li > a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 44px;
		margin: 0;
		padding: 0 8px 0 12px;
		border-left: 2px solid var(--ga-line);
		color: var(--ga-ink);
		font-family: 'Open Sans', sans-serif;
		font-size: 15.5px;
		text-transform: none;
	}
	body.ga-nav #headerwrap #main-nav .ga-count { font-size: 12px; color: var(--ga-muted); }
	body.ga-nav #headerwrap #main-nav li.ga-promo { display: none; }

	body.ga-nav .ga-mobile-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
	body.ga-nav .ga-mobile-links a {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 52px;
		padding: 0 12px;
		border-radius: 8px;
		background: #f3f5f7;
		color: var(--ga-ink);
		font-family: 'Oswald', sans-serif;
		font-size: 15px;
		white-space: nowrap;
		text-decoration: none;
	}
	body.ga-nav .ga-mobile-wholesale { margin: 16px 0 8px; text-align: center; color: var(--ga-muted); font-size: 14px; text-decoration: underline; }
}

/* Kleurstreepje per groep */
body.ga-nav #headerwrap #main-nav li.ga-group > a::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 22px;
	border-radius: 3px;
	background: var(--ga-grey);
}
body.ga-nav #headerwrap #main-nav li.ga-group.ga-red > a::before { background: var(--ga-red); }
body.ga-nav #headerwrap #main-nav li.ga-group.ga-green > a::before { background: var(--ga-green); }
body.ga-nav #headerwrap #main-nav li.ga-group.ga-blue > a::before { background: var(--ga-blue); }