/**
 * Product category filter bar.
 *
 * Every value is a custom property with a sensible fallback, so the bar looks
 * right even if BOPT_Style never runs, and the Styling tab can repaint it
 * without touching this file.
 */

.bopt-cats {
	display: block;
	width: 100%;
	margin: var( --bopt-cat-margin-top, 0 ) 0 var( --bopt-cat-margin-bottom, 24px );
}

.bopt-cats__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --bopt-cat-gap, 28px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.bopt-cats--center .bopt-cats__list { justify-content: center; }
.bopt-cats--right .bopt-cats__list  { justify-content: flex-end; }

.bopt-cats__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bopt-cats__item::marker { content: none; }

.bopt-cats__link,
.bopt-cats__link:visited {
	display: inline-block;
	font-family: var( --bopt-font, inherit );
	font-size: var( --bopt-cat-font-size, 15px );
	font-weight: var( --bopt-cat-font-weight, 400 );
	line-height: 1.4;
	color: var( --bopt-cat-color, #666666 );
	background: var( --bopt-cat-bg, transparent );
	text-decoration: none;
	text-transform: var( --bopt-cat-transform, none );
	letter-spacing: var( --bopt-cat-spacing, 0 );
	padding: var( --bopt-cat-pad-y, 6px ) var( --bopt-cat-pad-x, 2px );
	border-radius: var( --bopt-cat-radius, 0 );
	border-bottom: var( --bopt-cat-underline, 2px ) solid transparent;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
	cursor: pointer;
}

.bopt-cats__link:hover,
.bopt-cats__link:focus {
	color: var( --bopt-cat-hover-color, #111111 );
	background: var( --bopt-cat-hover-bg, transparent );
	border-bottom-color: var( --bopt-cat-hover-underline-color, transparent );
}

.bopt-cats__link.is-active {
	color: var( --bopt-cat-active-color, #111111 );
	background: var( --bopt-cat-active-bg, transparent );
	font-weight: var( --bopt-cat-active-weight, 600 );
	border-bottom-color: var( --bopt-cat-active-underline-color, #111111 );
}

/* Busy state while the products are being fetched. */
.bopt-cats.is-loading .bopt-cats__link {
	opacity: .55;
	pointer-events: none;
}

.bopt-cats-target.is-loading {
	position: relative;
	min-height: 120px;
	opacity: .45;
	transition: opacity .2s ease;
}

.bopt-cats-target.is-loading::after {
	content: "";
	position: absolute;
	top: 40px;
	left: 50%;
	width: 26px;
	height: 26px;
	margin-left: -13px;
	border: 2px solid rgba( 0, 0, 0, .15 );
	border-top-color: var( --bopt-cat-active-color, #111111 );
	border-radius: 50%;
	animation: bopt-cats-spin .7s linear infinite;
}

@keyframes bopt-cats-spin {
	to { transform: rotate( 360deg ); }
}

.bopt-cats__empty {
	margin: 20px 0;
	color: var( --bopt-cat-color, #666666 );
	font-family: var( --bopt-font, inherit );
}

@media ( max-width: 782px ) {
	.bopt-cats__list {
		gap: var( --bopt-cat-gap-mobile, 18px );
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.bopt-cats__list::-webkit-scrollbar { display: none; }

	.bopt-cats__link { white-space: nowrap; }
}