/**
 * Tek Market desktop category panel.
 * Owns: Shop by Category dropdown.
 */

.tkm-navrow__inner {
	position: relative;
}

.tkm-category-panel {
	position: absolute;
	z-index: 10020;
	top: calc(100% + 10px);
	left: 0;
	width: min(920px, calc(100vw - 2rem));
	border: 1px solid rgba(0,103,216,.13);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 24px 70px rgba(0,31,78,.18);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}

.tkm-category-panel.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.tkm-category-panel__inner {
	padding: 1rem;
}

.tkm-category-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .85rem;
}

.tkm-category-panel__head strong {
	display: block;
	color: var(--tkm-text);
	font-size: 1.08rem;
	line-height: 1.05;
}

.tkm-category-panel__head small {
	display: block;
	margin-top: .25rem;
	color: var(--tkm-muted);
	font-weight: 700;
	line-height: 1.35;
}

.tkm-category-panel__head a {
	flex: 0 0 auto;
	color: var(--tkm-blue);
	font-weight: 950;
}

.tkm-category-panel__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .65rem;
}

.tkm-category-panel__item {
	position: relative;
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr) auto;
	align-items: center;
	gap: .65rem;
	min-height: 66px;
	padding: .48rem .52rem;
	border: 1px solid rgba(0,103,216,.09);
	border-radius: 15px;
	background: linear-gradient(180deg, #f8fbff, #eef6ff);
	color: var(--tkm-text);
	text-decoration: none;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.tkm-category-panel__item:hover {
	transform: translateY(-2px);
	border-color: rgba(0,103,216,.24);
	box-shadow: 0 12px 28px rgba(0,38,94,.11);
	color: var(--tkm-blue);
}

.tkm-category-panel__item:active,
.tkm-category-panel__item.is-clicked,
.tkm-category-panel__item.is-active {
	border-color: rgba(255,121,0,.38);
	background: linear-gradient(180deg, #fff8f1, #eef6ff);
	box-shadow: inset 0 0 0 2px rgba(255,121,0,.12), 0 12px 28px rgba(0,38,94,.10);
	color: var(--tkm-navy);
}

.tkm-category-panel__item.is-active::before,
.tkm-category-panel__item.is-clicked::before {
	content: "";
	position: absolute;
	inset: 10px auto 10px 0;
	width: 4px;
	border-radius: 999px;
	background: var(--tkm-orange);
}

.tkm-category-panel__thumb {
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 13px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,103,216,.08);
}

.tkm-category-panel__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tkm-category-panel__meta {
	min-width: 0;
}

.tkm-category-panel__meta b,
.tkm-category-panel__meta small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tkm-category-panel__meta b {
	font-size: .88rem;
	font-weight: 950;
	line-height: 1.1;
}

.tkm-category-panel__meta small {
	margin-top: .2rem;
	color: var(--tkm-muted);
	font-size: .72rem;
	font-weight: 850;
}

.tkm-category-panel__count {
	min-width: 34px;
	height: 34px;
	display: inline-grid;
	place-items: center;
	padding: 0 .48rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--tkm-orange);
	color: #fff;
	font-size: .78rem;
	font-style: normal;
	font-weight: 950;
	line-height: 1;
	box-shadow: 0 9px 18px rgba(255,121,0,.20);
}

.tkm-category-panel__item:hover .tkm-category-panel__count,
.tkm-category-panel__item.is-active .tkm-category-panel__count,
.tkm-category-panel__item.is-clicked .tkm-category-panel__count {
	min-width: 34px;
	height: 34px;
	display: inline-grid;
	place-items: center;
	padding: 0 .48rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--tkm-orange);
	color: #fff;
	font-size: .78rem;
	font-style: normal;
	font-weight: 950;
	line-height: 1;
	box-shadow: 0 9px 18px rgba(255,121,0,.20);
}

@media (max-width: 900px) {
	.tkm-category-panel {
		display: none;
	}
}


.tkm-category-panel__item[aria-current="page"] {
	border-color: rgba(255,121,0,.42);
	background: linear-gradient(180deg, #fff8f1, #eef6ff);
	box-shadow: inset 0 0 0 2px rgba(255,121,0,.13), 0 12px 28px rgba(0,38,94,.10);
}

.tkm-category-panel__item[aria-current="page"] .tkm-category-panel__count {
	background: var(--tkm-blue);
}