/* Audience banners.
   Minimal layout. Uses a theme spacing or radius token when one is defined,
   and falls back to plain values on every other theme. */

.kb2b-banners {
	display: flex;
	flex-direction: column;
	gap: var(--global-sm-spacing, 1rem);
	width: 100%;
}

.kb2b-banners:empty {
	display: none;
}

.kb2b-banner {
	display: block;
	overflow: hidden;
	border-radius: var(--global-border-radius, 0);
	text-decoration: none;
	line-height: 0; /* Kills the descender gap under the image. */
}

.kb2b-banner__picture {
	display: block;
}

.kb2b-banner__img {
	display: block;
	width: 100%;
	height: auto;
}

a.kb2b-banner {
	transition: opacity 0.18s ease;
}

a.kb2b-banner:hover,
a.kb2b-banner:focus-visible {
	opacity: 0.92;
}

a.kb2b-banner:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- Wide, in-content slots -------------------------------------------- */

.kb2b-banners--home-main,
.kb2b-banners--home-mid,
.kb2b-banners--shop-top,
.kb2b-banners--product-below-summary,
.kb2b-banners--cart-top,
.kb2b-banners--account-top {
	margin-block: var(--global-md-spacing, 1.5rem);
}

/* Full-bleed hero. Remove this block if your home banner sits inside a
   container that already handles width. */
.kb2b-banners--home-main {
	margin-block-start: 0;
}

/* --- Sidebar squares ---------------------------------------------------- */

.kb2b-banners--widget {
	gap: var(--global-sm-spacing, 1rem);
}

.kb2b-widget .kb2b-banner__img {
	border-radius: var(--global-border-radius, 0);
}

/* Square slots: crop to 1:1 so mismatched artwork doesn't break the column.
   Drop this rule if you'd rather banners keep their natural height. */
.kb2b-banners--home-sidebar-top .kb2b-banner__img,
.kb2b-banners--home-sidebar-bottom .kb2b-banner__img,
.kb2b-banners--shop-sidebar-top .kb2b-banner__img,
.kb2b-banners--shop-sidebar-bottom .kb2b-banner__img,
.kb2b-banners--product-sidebar-top .kb2b-banner__img,
.kb2b-banners--product-sidebar-bottom .kb2b-banner__img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* --- 'js' mode placeholder ---------------------------------------------- */

.kb2b-banners--pending {
	background: var(--global-gray-100, rgba(0, 0, 0, 0.04));
	border-radius: var(--global-border-radius, 0);
}

.kb2b-banners--pending.is-loaded {
	aspect-ratio: auto !important;
	background: none;
}

@media (prefers-reduced-motion: reduce) {
	a.kb2b-banner {
		transition: none;
	}
}

/* --- Slider ------------------------------------------------------------- */

.kb2b-banners--slider {
	position: relative;
	display: block;
}

.kb2b-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	border-radius: var(--global-border-radius, 0);
}

.kb2b-slider__track::-webkit-scrollbar {
	display: none;
}

.kb2b-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}

.kb2b-slider__slide .kb2b-banner {
	border-radius: 0; /* The track already clips. */
}

/* Arrows — desktop pointer only; touch users swipe. */
.kb2b-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	color: #1e1e1e;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.18s ease;
}

.kb2b-slider__arrow--prev {
	left: 10px;
}

.kb2b-slider__arrow--next {
	right: 10px;
}

@media (hover: hover) and (min-width: 768px) {
	.kb2b-slider__arrow {
		display: flex;
	}

	.kb2b-banners--slider:hover .kb2b-slider__arrow,
	.kb2b-slider__arrow:focus-visible {
		opacity: 1;
	}
}

.kb2b-slider__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Dots */
.kb2b-slider__dots {
	display: flex;
	gap: 7px;
	justify-content: center;
	margin-top: 10px;
}

.kb2b-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--global-gray-400, #c3c4c7);
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.kb2b-slider__dot[aria-current="true"] {
	background: var(--global-palette1, #1e1e1e);
	transform: scale(1.25);
}

.kb2b-slider__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.kb2b-slider__track {
		scroll-behavior: auto;
	}

	.kb2b-slider__arrow,
	.kb2b-slider__dot {
		transition: none;
	}
}