/**
 * Union Profile - product listing with filters, output of [up_products] (inc/up-products.php).
 * Loaded on the product category archives listed in inc/up-products-config.php.
 * Every selector is scoped under .up-products. Selectors use two classes so they beat Astra and
 * Elementor kit element styles (".elementor-kit-17398 h3", "input[type=search]", "button"...)
 * without !important.
 */

.up-products {
	--up-orange: #F05A28;
	--up-orange-dark: #D4471A;
	--up-dark: #1E1E1E;
	--up-text: #4A4A4A;
	--up-label: #5E5E5E;
	--up-light: #F5F5F5;
	--up-border: #E4E4E4;
	--up-placeholder: #DEDEDE;

	color: var(--up-dark);
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

.up-products *,
.up-products *::before,
.up-products *::after {
	box-sizing: border-box;
}

/* Reset theme/kit spacing and type on the elements used here. */
.up-products h3,
.up-products p,
.up-products ul,
.up-products form {
	margin: 0;
	padding: 0;
}

.up-products h3 {
	color: inherit;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.up-products a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s;
}

.up-products a:focus-visible,
.up-products .up-products__control:focus-visible,
.up-products .up-products__apply:focus-visible {
	outline: 2px solid var(--up-orange);
	outline-offset: 2px;
}

/* ===== Filter bar ===== */

.up-products .up-products__filters {
	margin-bottom: 28px;
	padding: 24px 0 28px;
	border-top: 1px solid var(--up-border);
	border-bottom: 1px solid var(--up-border);
}

.up-products .up-products__intro {
	margin-bottom: 18px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.up-products .up-products__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 24px;
}

.up-products .up-products__field {
	display: flex;
	flex: 1 1 240px;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.up-products .up-products__field-label {
	margin: 0;
	color: var(--up-label);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.up-products .up-products__control {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--up-border);
	border-radius: 0;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	box-shadow: none;
	color: var(--up-dark);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
	transition: border-color 0.15s;
}

.up-products .up-products__control:hover {
	border-color: var(--up-label);
}

.up-products .up-products__control:focus {
	border-color: var(--up-orange);
	box-shadow: none;
}

.up-products .up-products__control::placeholder {
	color: var(--up-label);
	opacity: 1;
}

/* Magnifier on the left (the right side keeps the browser's clear button). */
.up-products .up-products__control--search {
	padding-left: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5E5E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-position: left 14px center;
	background-size: 18px;
}

.up-products .up-products__control--select {
	padding-right: 40px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5E5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-size: 16px;
	cursor: pointer;
}

.up-products .up-products__actions {
	flex: none;
}

/* Square corners, as all site buttons. */
.up-products .up-products__apply {
	height: 48px;
	margin: 0;
	padding: 0 32px;
	border: 0;
	border-radius: 0;
	background: var(--up-orange);
	box-shadow: none;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s;
}

.up-products .up-products__apply:hover,
.up-products .up-products__apply:focus {
	background: var(--up-orange-dark);
	color: #FFFFFF;
}

/* With JS the list updates as you type/choose, so the button is only needed without it. */
.up-products.is-ready .up-products__actions {
	display: none;
}

/* ===== Result count ===== */

.up-products .up-products__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 24px;
}

.up-products .up-products__count {
	color: var(--up-label);
	font-size: 15px;
}

.up-products .up-products__reset {
	color: var(--up-orange);
	font-size: 15px;
	font-weight: 700;
}

.up-products .up-products__reset:hover {
	color: var(--up-orange-dark);
}

/* ===== Grid ===== */

.up-products .up-products__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 44px 24px;
	list-style: none;
}

.up-products .up-products__item {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.up-products .up-products__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var(--up-dark);
}

/* Square image box. 'cover': photo fills it; 'contain': whole cut-out on white. */
.up-products .up-products__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--up-border);
	background: #FFFFFF;
	transition: border-color 0.15s;
}

.up-products .up-products__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.up-products .up-products__media--contain .up-products__img {
	padding: 6%;
	object-fit: contain;
}

.up-products .up-products__img--empty {
	background: var(--up-placeholder);
}

.up-products .up-products__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 8px;
	background: #FFFFFF;
	box-shadow: 0 0 0 1px var(--up-border);
	color: var(--up-dark);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.up-products .up-products__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding-top: 16px;
}

.up-products .up-products__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	transition: color 0.15s;
}

.up-products .up-products__label {
	color: var(--up-label);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.up-products .up-products__desc {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	color: var(--up-text);
	font-size: 15px;
	line-height: 1.55;
}

.up-products .up-products__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
	color: var(--up-orange);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	transition: color 0.15s;
}

.up-products .up-products__icon {
	flex: none;
	transition: transform 0.15s;
}

.up-products .up-products__card:hover .up-products__media {
	border-color: var(--up-orange);
}

.up-products .up-products__card:hover .up-products__media--cover .up-products__img {
	transform: scale(1.03);
}

.up-products .up-products__card:hover .up-products__title {
	color: var(--up-orange);
}

.up-products .up-products__card:hover .up-products__more {
	color: var(--up-orange-dark);
}

.up-products .up-products__card:hover .up-products__icon {
	transform: translateX(3px);
}

/* ===== No results ===== */

.up-products .up-products__empty {
	padding: 48px 24px;
	background: var(--up-light);
	color: var(--up-text);
	text-align: center;
}

/* Hidden by the filters (the display rules above would otherwise override [hidden]). */
.up-products .up-products__item[hidden],
.up-products .up-products__reset[hidden],
.up-products .up-products__empty[hidden] {
	display: none;
}

/* ===== Tablet ===== */

@media (max-width: 1099px) {
	.up-products .up-products__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ===== Phone ===== */

@media (max-width: 767px) {
	.up-products .up-products__filters {
		padding: 20px 0 24px;
	}

	.up-products .up-products__intro {
		font-size: 16px;
	}

	.up-products .up-products__actions,
	.up-products .up-products__apply {
		width: 100%;
	}

	/* Two cards per row. */
	.up-products .up-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 12px;
	}

	.up-products .up-products__badge {
		top: 8px;
		left: 8px;
		font-size: 11px;
	}

	.up-products .up-products__body {
		padding-top: 12px;
	}

	.up-products .up-products__title {
		font-size: 15px;
	}

	.up-products .up-products__label {
		font-size: 12px;
	}

	.up-products .up-products__desc {
		font-size: 14px;
	}

	.up-products .up-products__more {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.up-products *,
	.up-products *::before,
	.up-products *::after {
		transition: none;
	}
}