/**
 * Categoriebalk met mega-menu onder de header.
 *
 * Wordt geladen door modules/woocommerce_category_menubar.php.
 *
 * @package Goedkope acties
 */

/* -------------------------------------------------------------------------
 * De balk
 * ---------------------------------------------------------------------- */

.ga-catbar {
	position: relative;
	z-index: 90;
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
	background: #f5f8fc;
}

.ga-catbar__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

.ga-catbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ga-catbar__item {
	position: static;
	margin: 0;
	list-style: none;
}

.ga-catbar__link {
	display: block;
	padding: 12px 16px;
	color: #1f3a56;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: color 0.15s ease, box-shadow 0.15s ease;
}

.ga-catbar__item:hover > .ga-catbar__link,
.ga-catbar__link:focus {
	color: #f28c20;
	box-shadow: inset 0 -3px 0 #f28c20;
}

/* -------------------------------------------------------------------------
 * Mega-menu
 * ---------------------------------------------------------------------- */

.ga-catbar__mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 95;
	border-top: 1px solid #e2e8f0;
	background: #fff;
	box-shadow: 0 12px 24px rgba(18, 60, 100, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all 0.15s ease;
}

.ga-catbar__item--has-mega:hover > .ga-catbar__mega,
.ga-catbar__item--has-mega:focus-within > .ga-catbar__mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ga-catbar__mega-inner {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px 28px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 20px 28px;
}

.ga-catbar__subtitle {
	display: block;
	margin-bottom: 6px;
	color: #1f3a56;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.ga-catbar__subtitle:hover {
	color: #f28c20;
}

.ga-catbar__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ga-catbar__sublist li {
	margin: 0 0 3px;
}

.ga-catbar__sublist a {
	color: #5a6b7d;
	font-size: 14px;
	text-decoration: none;
}

.ga-catbar__sublist a:hover {
	color: #f28c20;
}

.ga-catbar__col--all {
	align-self: end;
}

.ga-catbar__all {
	display: inline-block;
	color: #f28c20;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.ga-catbar__all:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Mobiel: swipebare rij, geen mega-menu
 * ---------------------------------------------------------------------- */

@media (max-width: 921px) {

	.ga-catbar__inner {
		padding: 0 12px;
	}

	.ga-catbar__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ga-catbar__list::-webkit-scrollbar {
		display: none;
	}

	.ga-catbar__item {
		flex: 0 0 auto;
	}

	.ga-catbar__link {
		padding: 11px 12px;
		font-size: 14px;
		white-space: nowrap;
	}

	.ga-catbar__mega {
		display: none;
	}
}