/* Landing-page filters: reuse the category markup (.filter-wrapper, .kw-product-filters-wrapper,
   .wc-category-brands-list, .product-archive-divider); only the differences live here.
   Rhythm matches the category header: brands 30 · line · 30 filters 30 · line · 30 products. */

/* Page content gives every <li> Flatsome's 1.3em list indent; the category header has none. */
.kw-landing-brands .wc-category-brand-item {
	margin-left: 0;
}

.kw-landing-filters {
	align-items: center;
	margin-bottom: 30px;
}

.kw-landing-filters .kw-filters-heading {
	margin-right: 8px;
}

.kw-landing-filters .kw-landing-filters-n {
	font-weight: 700;
}

.kw-landing-filters .has-chosen {
	border-color: currentColor;
}

.kw-landing-filters .chosen > a {
	font-weight: 700;
}

.kw-landing-filters-clear {
	font-size: 14px;
	text-decoration: underline;
	padding: 4px 8px;
}

/* Product grid edge: a [ux_products_ean] row uses Flatsome's -10px "small" gutter;
   the category grid sits at -4px, so cards line up with the filters above them. */
.col-inner > .kw-landing-filters-wrap ~ .ux-products-ean > .row.row-small:not(.row-collapse),
.col-inner > .kw-landing-brands ~ .ux-products-ean > .row.row-small:not(.row-collapse) {
	margin-left: -4px;
	margin-right: -4px;
}

.kw-landing-filters-empty {
	padding: 32px 0;
	text-align: center;
}

/* Off-canvas copy (mobile): stacked, no bar spacing. */
.kw-landing-filters-offcanvas .kw-landing-filters {
	flex-direction: column;
	align-items: stretch;
	margin-bottom: 0;
}

@media (max-width: 849px) {
	.kw-landing-filters {
		align-items: stretch;
	}

	/* Mobile button row: the category's filter row leaves 30px under the button. */
	.kw-landing-filters-mobile {
		margin-bottom: 0;
	}

	/* Inside the off-canvas the list opens in its own box, like in #shop-sidebar. */
	.kw-landing-filters .accordion-panel {
		min-width: 0;
		max-width: none;
		width: auto;
		border: none;
		background: none;
		padding: 0 20px 16px;
	}

	.kw-landing-filters .widget-title {
		display: none !important;
	}
}

/* [kw_landing_categories]: the category header cards (product-category-list.css scopes them
   to .shop-page-title, which landing pages don't have). Same values, so the two match. */
.kw-landing-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 30px;
}

.kw-landing-categories .product-category-list__item {
	min-width: 250px;
	max-width: 320px;
}

.kw-landing-categories .product-category-list__link {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 100%;
	background: #F7F7F7;
	border: 2px solid #F7F7F7;
	border-radius: 16px;
	padding: 25px;
	color: inherit;
}

.kw-landing-categories .product-category-list__text {
	flex: 1;
}

.kw-landing-categories .product-category-list__link:after {
	content: '';
	background: url(../../assets/arrow-circle.svg) center / contain no-repeat;
	width: 30px;
	height: 30px;
	display: block;
	flex-shrink: 0;
}

.kw-landing-categories .product-category-list__item--current .product-category-list__link:after {
	display: none;
}

.kw-landing-categories .product-category-list__link:hover {
	border-color: #E2E2E2;
}

.kw-landing-categories .product-category-list__link:focus-visible {
	outline: 2px solid #315EF3;
	outline-offset: 2px;
}

.kw-landing-categories .product-category-list__item--current .product-category-list__link {
	border-color: #315EF3;
}

.kw-landing-categories .product-category-list__image-wrapper,
.kw-landing-categories .product-category-list__image-wrapper img {
	height: 50px;
	width: auto;
	flex-shrink: 0;
	mix-blend-mode: multiply;
}

.kw-landing-categories .product-category-list__title {
	display: block;
	font-weight: 600;
	font-size: 16px;
	line-height: 18px;
	text-align: left;
}

/* No product left under the other active filters: still clickable, just quieter. */
.kw-landing-categories .kw-landing-categories__item--empty .product-category-list__link {
	opacity: .55;
}

@media (max-width: 849px) {
	.kw-landing-categories {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 10px;
	}

	.kw-landing-categories .product-category-list__item {
		flex-shrink: 0;
		min-width: 0;
	}
}