/*
 * KB Brand Showcase - front end styles.
 * Works in LTR and RTL (logical properties only).
 *
 * Colours, fonts and radius follow the active theme: WoodMart's CSS variables are used first, with plain
 * fallbacks for other themes. The accent can be set in the plugin settings (--kb-bs-accent).
 *
 * The number of logos / products per row follows the width of the showcase itself (container queries), not the
 * width of the window, so it also fits narrow columns. Old browsers without container queries use the window width.
 */

.kb-bs {
	--kb-bs-accent: var(--btn-accented-bgcolor, var(--wd-primary-color, #c8202f));
	--kb-bs-accent-contrast: var(--btn-accented-color, #fff);
	--kb-bs-surface: var(--bgcolor-white, #fff);
	--kb-bs-text: var(--wd-text-color, inherit);
	--kb-bs-title: var(--wd-title-color, inherit);
	--kb-bs-muted: var(--color-gray-500, rgba(127, 127, 127, 0.9));
	--kb-bs-radius: var(--wd-brd-radius, 12px);
	--kb-bs-line: var(--brdcolor-gray-300, rgba(127, 127, 127, 0.22));
	--kb-bs-line-strong: rgba(110, 110, 110, 0.38);
	--kb-bs-soft: rgba(127, 127, 127, 0.08);
	--kb-bs-gap: 14px;
	box-sizing: border-box;
	clear: both;
	/* Fill the whole column, also inside flex rows that would shrink the block to its content. */
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 24px 0;
	color: var(--kb-bs-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	container-type: inline-size;
	container-name: kbbs;
}

.kb-bs *,
.kb-bs *::before,
.kb-bs *::after {
	box-sizing: border-box;
}

.kb-bs--bg {
	padding: 24px;
	border-radius: var(--kb-bs-radius);
	background: var(--kb-bs-bg);
}

/* Items per row: the "desktop" value, narrowed by the width of the showcase. */
.kb-bs__inner {
	--kb-bs-n: var(--kb-bs-n-d, 5);
}

@container kbbs (max-width: 900px) {
	.kb-bs__inner { --kb-bs-n: var(--kb-bs-n-t, 3); }
}

@container kbbs (max-width: 560px) {
	.kb-bs__inner { --kb-bs-n: var(--kb-bs-n-m, 2); --kb-bs-gap: 10px; }
}

@supports not (container-type: inline-size) {
	@media (max-width: 1024px) {
		.kb-bs__inner { --kb-bs-n: var(--kb-bs-n-t, 3); }
	}
	@media (max-width: 640px) {
		.kb-bs__inner { --kb-bs-n: var(--kb-bs-n-m, 2); --kb-bs-gap: 10px; }
	}
}

.kb-bs--rtl {
	--kb-bs-shift: 50%;
}

/* ---------- Placeholder (AJAX mode): a quiet skeleton that keeps the space ---------- */
.kb-bs--pending { min-height: 200px; }

.kb-bs__skel {
	display: block;
	border-radius: 8px;
	background: linear-gradient(90deg, rgba(127, 127, 127, 0.1) 25%, rgba(127, 127, 127, 0.2) 50%, rgba(127, 127, 127, 0.1) 75%);
	background-size: 200% 100%;
	animation: kb-bs-shimmer 1.4s ease-in-out infinite;
}

.kb-bs__skel--title { width: 220px; max-width: 60%; height: 26px; margin-bottom: 18px; }
.kb-bs__skel--body { height: 150px; }

@keyframes kb-bs-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

.kb-bs--empty { padding: 28px; text-align: center; color: var(--kb-bs-muted); }
.kb-bs__empty { margin: 0; }

/* ---------- Heading ---------- */
.kb-bs__head { margin-block-end: 16px; }
.kb-bs--center .kb-bs__head { text-align: center; }

.kb-bs__title {
	margin: 0;
	color: var(--kb-bs-title);
	font-size: var(--kb-bs-title-size, 1.45em);
	font-weight: 700;
	line-height: 1.4;
}

/* ---------- Logo items ---------- */
.kb-bs__grid {
	display: grid;
	grid-template-columns: repeat(var(--kb-bs-n), minmax(0, 1fr));
	gap: var(--kb-bs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kb-bs__logo { display: flex; min-width: 0; margin: 0; padding: 0; list-style: none; }

.kb-bs__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(var(--kb-bs-logo-h) + 28px);
	padding: 14px 12px;
	color: inherit;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--kb-bs-radius);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

a.kb-bs__link:hover,
a.kb-bs__link:focus-visible { color: inherit; text-decoration: none; }

a.kb-bs__link:focus-visible { outline: 2px solid var(--kb-bs-accent); outline-offset: 2px; }

.kb-bs--style-card .kb-bs__link {
	background: var(--kb-bs-surface);
	border-color: var(--kb-bs-line-strong);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

/* Bold card: a frame that stands out on a light page (thick border, accent base, shadow). */
.kb-bs--style-bold .kb-bs__link {
	background: var(--kb-bs-surface);
	border: 2px solid var(--kb-bs-line-strong);
	border-bottom: 4px solid var(--kb-bs-accent);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	min-height: calc(var(--kb-bs-logo-h) + 40px);
	padding: 18px 14px;
}

.kb-bs--style-bold a.kb-bs__link:hover { border-color: var(--kb-bs-accent); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); }

.kb-bs--style-outline .kb-bs__link { border-color: var(--kb-bs-line); }

a.kb-bs__link:hover { border-color: var(--kb-bs-accent); }

.kb-bs--style-plain a.kb-bs__link:hover { border-color: transparent; }

.kb-bs--style-card a.kb-bs__link:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }

.kb-bs__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--kb-bs-logo-h);
	object-fit: contain;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.kb-bs--gray .kb-bs__logo .kb-bs__img { filter: grayscale(1); opacity: 0.85; }
.kb-bs--gray .kb-bs__logo .kb-bs__link:hover .kb-bs__img,
.kb-bs--gray .kb-bs__logo .kb-bs__link:focus-visible .kb-bs__img { filter: none; opacity: 1; }

.kb-bs__name { margin-top: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.kb-bs__nologo { font-size: 14px; font-weight: 700; line-height: 1.4; }

/* Discount tag sitting on the top edge of a logo card. */
.kb-bs__disc {
	position: absolute;
	z-index: 2;
	top: -10px;
	inset-inline-end: 10px;
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--kb-bs-accent);
	color: var(--kb-bs-accent-contrast);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	pointer-events: none;
}

/* Theme link rules must not recolour the tag text. */
.kb-bs .kb-bs__link .kb-bs__disc,
.kb-bs .kb-bs__link .kb-bs__disc span { color: var(--kb-bs-accent-contrast); }

/* Scrolling rows clip what sticks out, so they leave room for the tag. */
.kb-bs--logos_row .kb-bs__slides,
.kb-bs--logos_row .kb-bs__marquee { padding-top: 12px; }

/* ---------- Carousel (also used by the "swipeable row" of logos) ---------- */
.kb-bs__carousel { position: relative; }

.kb-bs__slides {
	display: flex;
	gap: var(--kb-bs-gap);
	margin: 0;
	padding: 4px 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.kb-bs__slides::-webkit-scrollbar { display: none; }

.kb-bs__slides.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.kb-bs__slides.is-dragging a { pointer-events: none; }

.kb-bs__slide {
	flex: 0 0 calc((100% - (var(--kb-bs-n) - 1) * var(--kb-bs-gap)) / var(--kb-bs-n));
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.kb-bs__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -20px 0 0;
	padding: 0;
	color: var(--kb-bs-title);
	line-height: 1;
	cursor: pointer;
	background: var(--kb-bs-surface);
	border: 1px solid var(--kb-bs-line);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
	transition: opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.kb-bs__nav:hover:not([disabled]),
.kb-bs__nav:focus-visible { color: var(--kb-bs-accent-contrast); background: var(--kb-bs-accent); border-color: var(--kb-bs-accent); }

.kb-bs__nav[disabled] { opacity: 0; pointer-events: none; }
.kb-bs__nav--prev { inset-inline-start: 6px; }
.kb-bs__nav--next { inset-inline-end: 6px; }
.kb-bs__nav svg { display: block; width: 20px; height: 20px; }
/* The drawn chevron points left: "previous" points to the start of the line, "next" to its end. */
.kb-bs__nav--next svg,
.kb-bs--rtl .kb-bs__nav--prev svg,
.kb-bs--rtl .kb-bs__all svg { transform: scaleX(-1); }
.kb-bs--rtl .kb-bs__nav--next svg { transform: none; }

/* A touch screen swipes; the arrows are for a mouse. */
@media (hover: none) {
	.kb-bs__nav { display: none; }
}

/* ---------- Endless strip of logos ---------- */
.kb-bs__marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.kb-bs__track {
	display: flex;
	gap: 0;
	width: max-content;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	animation: kb-bs-marquee var(--kb-bs-speed, 30s) linear infinite;
}

.kb-bs--logos_row.kb-bs--mode-marquee .kb-bs__slide {
	flex: 0 0 auto;
	width: calc((var(--kb-bs-mw, 100cqw) - (var(--kb-bs-n) - 1) * var(--kb-bs-gap)) / var(--kb-bs-n));
	margin-inline-end: var(--kb-bs-gap);
}

.kb-bs__marquee:hover .kb-bs__track,
.kb-bs__track:focus-within { animation-play-state: paused; }

@keyframes kb-bs-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(var(--kb-bs-shift, -50%)); }
}

@media (prefers-reduced-motion: reduce) {
	.kb-bs__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.kb-bs__track { animation: none; }
}

/* ---------- Brand header ---------- */
.kb-bs__brand + .kb-bs__brand { margin-top: 30px; }

.kb-bs__brandhead {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-end: 14px;
}

.kb-bs__brandlogo { display: inline-flex; flex: none; align-items: center; color: inherit; }
.kb-bs__brandlogo .kb-bs__img { height: min(var(--kb-bs-logo-h), 52px); }
.kb-bs__brandtext { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.kb-bs__brandname { color: var(--kb-bs-title); font-size: 1.15em; font-weight: 700; }
.kb-bs__brandcount { color: var(--kb-bs-muted); font-size: 12.5px; }

.kb-bs__all {
	display: inline-flex;
	align-items: center;
	flex: none;
	gap: 4px;
	margin-inline-start: auto;
	padding: 6px 14px;
	color: var(--kb-bs-accent);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid currentColor;
	border-radius: 999px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.kb-bs__all:hover,
.kb-bs__all:focus-visible { color: var(--kb-bs-accent-contrast); background: var(--kb-bs-accent); border-color: var(--kb-bs-accent); text-decoration: none; }

.kb-bs__all svg { display: block; width: 16px; height: 16px; }

/* ---------- Product card ---------- */
.kb-bs__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--kb-bs-surface);
	border: 1px solid var(--kb-bs-line);
	border-radius: var(--kb-bs-radius);
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.kb-bs__card:hover { border-color: var(--kb-bs-accent); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.kb-bs__card.is-oos .kb-bs__pimg { opacity: 0.5; }

.kb-bs__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	padding: 10px;
	background: #fff;
}

.kb-bs__pimg {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

.kb-bs__badge {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	padding: 1px 9px;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.8;
	background: #6b7280;
	border-radius: 999px;
}

.kb-bs__badge.is-sale { color: var(--kb-bs-accent-contrast); background: var(--kb-bs-accent); }

.kb-bs__ptitle {
	display: -webkit-box;
	min-height: 3.4em;
	margin: 10px 12px 0;
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.7;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.kb-bs__ptitle a { color: var(--kb-bs-title); text-decoration: none; }
.kb-bs__ptitle a:hover { color: var(--kb-bs-accent); }

.kb-bs__price {
	margin: auto 12px 0;
	padding: 8px 0 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.kb-bs__price.is-oos { color: var(--kb-bs-muted); font-weight: 600; }
.kb-bs__price del { display: block; margin-inline-end: 6px; font-size: 0.85em; font-weight: 400; opacity: 0.55; }
.kb-bs__price ins { text-decoration: none; }

/* ---------- Brand tabs ---------- */
.kb-bs__tabs {
	display: flex;
	gap: 10px;
	margin-block-end: 14px;
	padding: 4px 2px 8px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.kb-bs__tab {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	margin: 0;
	padding: 8px 16px;
	color: inherit;
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	background: var(--kb-bs-surface);
	border: 1px solid var(--kb-bs-line);
	border-radius: var(--kb-bs-radius);
	box-shadow: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kb-bs__tab .kb-bs__img { height: min(var(--kb-bs-logo-h), 38px); }
.kb-bs__tab:hover { border-color: var(--kb-bs-accent); }
.kb-bs__tab:focus-visible { outline: 2px solid var(--kb-bs-accent); outline-offset: 2px; }
.kb-bs__tab.is-active { border-color: var(--kb-bs-accent); box-shadow: inset 0 0 0 1px var(--kb-bs-accent); }
.kb-bs--gray .kb-bs__tab:not(.is-active) .kb-bs__img { filter: grayscale(1); opacity: 0.7; }

.kb-bs__panel[hidden] { display: none; }
.kb-bs__panel.is-loading { min-height: 330px; }
.kb-bs__panel .kb-bs__brandhead { margin-block-start: 4px; }
.kb-bs__error { margin: 0; padding: 24px; color: var(--kb-bs-muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
	.kb-bs__skel { animation: none; }
}

@media (max-width: 600px) {
	.kb-bs__title { font-size: var(--kb-bs-title-size-m, var(--kb-bs-title-size, 1.45em)); }
}