/**
 * WooCommerce Taxonomy Banners - Frontend styles.
 *
 * The default template outputs the active theme's own "klbth-banner"
 * markup, so layout/visual styling comes from the theme's CSS. This file
 * only adds small safety-net rules the theme is not expected to provide:
 * an image fade-in once loaded, and visible keyboard focus states.
 */

.wctb-banner.wctb-banner--loaded .wctb-banner__image {
	animation: wctb-fade-in 0.4s ease;
}

@keyframes wctb-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.wctb-banner .btn.link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wctb-banner.wctb-banner--loaded .wctb-banner__image {
		animation: none;
	}
}