/* Category page: quiet heading and an animated full-card hover contour. */
@property --cs-category-card-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes csCategoryCardContour {
	to {
		--cs-category-card-angle: 360deg;
	}
}

#product-category .us-main-shop-title {
	padding-bottom: 0 !important;
}

#product-category .us-main-shop-title::after {
	content: none !important;
	display: none !important;
}

#product-category .subcat-item {
	isolation: isolate;
	transition:
		border-color .3s ease,
		box-shadow .3s ease,
		transform .3s cubic-bezier(.2, .8, .2, 1);
}

#product-category .subcat-item::before,
#product-category .subcat-item-title::after {
	content: none !important;
	display: none !important;
}

#product-category .subcat-item:focus-visible {
	border-color: rgba(217, 138, 58, .72) !important;
	outline: 2px solid rgba(217, 138, 58, .34);
	outline-offset: 3px;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
	#product-category .subcat-item::before {
		content: "" !important;
		position: absolute;
		inset: 0;
		z-index: 2;
		display: block !important;
		box-sizing: border-box;
		width: auto;
		height: auto;
		padding: 2px;
		border-radius: inherit;
		background: conic-gradient(
			from var(--cs-category-card-angle),
			transparent 0deg,
			transparent 280deg,
			rgba(255, 148, 31, .18) 301deg,
			rgba(255, 174, 78, .82) 321deg,
			#fff2dc 334deg,
			#ff941f 346deg,
			transparent 360deg
		);
		-webkit-mask:
			linear-gradient(#000 0 0) content-box,
			linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		opacity: 0;
		pointer-events: none;
		transition: opacity .32s ease;
	}

	#product-category .subcat-item:focus-visible::before {
		opacity: 1;
	}
}

@media (hover: hover) and (pointer: fine) {
	#product-category .subcat-item:hover {
		border-color: rgba(217, 138, 58, .5) !important;
		box-shadow:
			0 18px 42px rgba(17, 19, 21, .14),
			0 0 0 1px rgba(217, 138, 58, .08) !important;
		transform: translateY(-2px);
	}

	@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
		#product-category .subcat-item:hover::before {
			opacity: 1;
			animation: csCategoryCardContour 3.2s linear infinite;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	#product-category .subcat-item {
		transition: none;
	}

	#product-category .subcat-item:hover {
		transform: none;
	}

	#product-category .subcat-item:hover::before {
		animation: none !important;
	}
}