/**
 * GKN KALA mega-menu V8.7.0
 * Complete department reachability, hierarchy depth and interaction polish.
 */

.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-desktop-tabs {
	display: none;
}

.gkn-category-drawer[data-gkn-ux-version="87"] [data-depth="1"] {
	padding-inline-start: 14px !important;
}

.gkn-category-drawer[data-gkn-ux-version="87"] [data-depth="2"],
.gkn-category-drawer[data-gkn-ux-version="87"] [data-depth="3"] {
	padding-inline-start: 24px !important;
}

.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-group nav a > span {
	display: block !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: inherit !important;
	font: inherit !important;
	line-height: inherit !important;
	transform: none !important;
}

@media (min-width: 1200px) {
	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-cascade__content {
		display: grid !important;
		grid-template-rows: 52px minmax(0, 1fr) !important;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-desktop-tabs {
		position: relative;
		z-index: 3;
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
		min-width: 0;
		align-items: center;
		gap: 5px;
		padding: 6px 10px;
		border-bottom: 1px solid var(--gkn86-line);
		background: rgba(255, 255, 255, .98);
		overflow-x: hidden;
		overflow-y: hidden;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-desktop-tabs button {
		display: inline-grid;
		width: 100%;
		min-width: 0;
		min-height: 39px;
		grid-template-columns: 20px minmax(0, 1fr) auto;
		align-items: center;
		gap: 6px;
		padding: 6px 9px;
		border: 1px solid transparent;
		border-radius: 8px;
		background: #fff;
		color: #3f4350;
		font: inherit;
		font-size: 10px;
		font-weight: 850;
		line-height: 1.45;
		text-align: right;
		white-space: nowrap;
		cursor: pointer;
		touch-action: manipulation;
		transition: color .14s ease, background-color .14s ease, border-color .14s ease;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-desktop-tabs button > i {
		color: #767b89;
		font-size: 17px;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-desktop-tabs button > span {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-desktop-tabs button > small {
		display: grid;
		min-width: 20px;
		height: 20px;
		place-items: center;
		padding: 0 5px;
		border-radius: 999px;
		background: #f1f2f5;
		color: #777b88;
		font-size: 8.5px;
		font-weight: 900;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-desktop-tabs button:is(:hover, :focus-visible, .is-active) {
		border-color: #ffc6cd;
		background: var(--gkn86-red-soft);
		color: var(--gkn86-red-strong);
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-desktop-tabs button:is(:hover, :focus-visible, .is-active) > i {
		color: var(--gkn86-red);
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-desktop-tabs button.is-active > small {
		background: #fff;
		color: var(--gkn86-red-strong);
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-panel {
		grid-row: 2;
		min-height: 0 !important;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-panel__groups {
		grid-auto-flow: column !important;
		grid-auto-columns: minmax(214px, 1fr) !important;
		grid-template-columns: repeat(4, minmax(214px, 1fr)) !important;
		grid-template-rows: minmax(0, 1fr) !important;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x proximity;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-group {
		scroll-snap-align: start;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-group__visual {
		height: 96px !important;
		min-height: 96px !important;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-group nav {
		max-height: 82px !important;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-panel__empty {
		display: grid !important;
		height: 100%;
		place-content: center;
		justify-items: center;
		gap: 12px;
		padding: 28px;
		text-align: center;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-root {
		scroll-margin-block: 8px;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-root.is-active {
		box-shadow: inset -3px 0 0 var(--gkn86-red) !important;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-group nav a[data-depth="1"] {
		color: #737784 !important;
		font-size: 9.75px !important;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-group nav a:is([data-depth="2"], [data-depth="3"]) {
		color: #858995 !important;
		font-size: 9.25px !important;
	}
}

@media (max-width: 767px) {
	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mobile-category-shell.is-searching .gkn-mobile-category-featured {
		display: none !important;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mobile-category-search:focus-within {
		border-color: #ff9faa;
		background: #fff;
		box-shadow: 0 0 0 3px rgba(239, 64, 79, .09);
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mobile-category-search__empty {
		margin: 14px 0;
		padding: 22px 14px;
		border: 1px dashed #d9dce4;
		border-radius: 10px;
		background: #fafbfc;
		color: #686d7a;
		font-size: 11px;
		font-weight: 750;
		text-align: center;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mobile-category-tree nav a[data-depth="1"] {
		margin-inline-start: 8px;
		border-inline-start: 1px solid #eceef2 !important;
		color: #737784 !important;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mobile-category-tree nav a:is([data-depth="2"], [data-depth="3"]) {
		margin-inline-start: 14px;
		border-inline-start: 1px solid #e1e4ea !important;
		color: #858995 !important;
		font-size: 10px !important;
	}

	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mobile-category-tree details[hidden],
	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mobile-category-tree section[hidden],
	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mobile-category-tree a[hidden] {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gkn-category-drawer[data-gkn-ux-version="87"] .gkn-mega-desktop-tabs button {
		transition: none !important;
	}
}
