/* =========================================================
   STONE CEO PRODUCTS
========================================================= */

.sceo-products-catalog {
	--sceo-line: rgba(20, 20, 20, 0.16);
	--sceo-text: #171714;
	--sceo-bg: #f3f3f0;

	position: relative;
	width: 100%;
	color: var(--sceo-text);
}


/* =========================================================
   FILTER CONTROLS
========================================================= */

.sceo-products-controls {
	position: sticky;
	top: 0;
	z-index: 100;

	width: 100%;

	background: rgba(243, 243, 240, 0.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	border-bottom: 1px solid var(--sceo-line);
}

body.admin-bar .sceo-products-controls {
	top: 32px;
}


.sceo-products-controls__inner {
	display: flex;
	align-items: stretch;

	width: 100%;
	min-height: 72px;

	padding: 0 30px;
}


/* =========================================================
   RESET
========================================================= */

.sceo-filter-reset {
	display: flex;
	align-items: center;

	margin: 0 38px 0 0;
	padding: 0;

	border: 0;
	background: transparent;

	font: inherit;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.02em;

	color: var(--sceo-text);

	cursor: pointer;

	transition:
		opacity 0.3s ease,
		color 0.3s ease;
}

.sceo-filter-reset:disabled {
	opacity: 0.35;
	cursor: default;
}


/* =========================================================
   FILTER
========================================================= */

.sceo-filter {
	position: relative;

	display: flex;
	align-items: stretch;
}


.sceo-filter-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;

	min-width: 145px;

	padding: 0 24px;

	border: 0;
	background: transparent;

	font: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	color: var(--sceo-text);

	cursor: pointer;

	transition:
		opacity 0.25s ease;
}

.sceo-filter-trigger:hover {
	opacity: 0.58;
}


/* =========================================================
   CHEVRON
========================================================= */

.sceo-filter-chevron {
	width: 7px;
	height: 7px;

	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;

	transform:
		translateY(-2px)
		rotate(45deg);

	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


.sceo-filter.is-open
.sceo-filter-chevron {
	transform:
		translateY(2px)
		rotate(225deg);
}


/* =========================================================
   FILTER COUNT
========================================================= */

.sceo-filter-count {
	margin-left: 4px;
}


/* =========================================================
   FLOATING PANELS
========================================================= */

.sceo-filter-panel {
	position: absolute;

	top: 100%;
	left: 0;

	z-index: 150;

	width: 290px;
	max-height: min(520px, 65vh);

	padding: 24px;

	overflow-y: auto;

	background: var(--sceo-bg);

	border:
		1px solid var(--sceo-line);

	opacity: 0;
	visibility: hidden;

	transform:
		translateY(8px);

	pointer-events: none;

	transition:
		opacity 0.25s ease,
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.25s ease;
}


.sceo-filter.is-open
.sceo-filter-panel {
	opacity: 1;
	visibility: visible;

	transform:
		translateY(0);

	pointer-events: auto;
}


.sceo-filter-panel--sort {
	width: 220px;
}


.sceo-filter-panel--more {
	width: min(560px, 80vw);
}


/* =========================================================
   FILTER OPTIONS
========================================================= */

.sceo-filter-options {
	display: flex;
	flex-direction: column;
	gap: 14px;
}


.sceo-filter-option {
	position: relative;

	display: flex;
	align-items: center;
	gap: 11px;

	width: fit-content;

	font-size: 13px;
	line-height: 1.2;

	cursor: pointer;
}


.sceo-filter-option input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
	pointer-events: none;
}


.sceo-filter-option__box {
	position: relative;

	width: 14px;
	height: 14px;

	flex: 0 0 14px;

	border: 1px solid rgba(20, 20, 20, 0.35);

	transition:
		background 0.25s ease,
		border-color 0.25s ease;
}


.sceo-filter-option input:checked
+
.sceo-filter-option__box {
	background: var(--sceo-text);
	border-color: var(--sceo-text);
}


.sceo-filter-option input:checked
+
.sceo-filter-option__box::after {
	content: "";

	position: absolute;

	left: 4px;
	top: 1px;

	width: 4px;
	height: 8px;

	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;

	transform: rotate(45deg);
}


.sceo-filter-option__label {
	transition:
		opacity 0.25s ease;
}


.sceo-filter-option:hover
.sceo-filter-option__label {
	opacity: 0.55;
}


/* =========================================================
   MORE FILTERS
========================================================= */

.sceo-more-filters {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 50px;
}


.sceo-more-filter-title {
	margin-bottom: 22px;

	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	opacity: 0.55;
}


/* =========================================================
   SORT OPTIONS
========================================================= */

.sceo-sort-option {
	display: block;

	width: 100%;

	padding: 10px 0;

	border: 0;
	background: transparent;

	text-align: left;

	font: inherit;
	font-size: 13px;

	color: inherit;

	cursor: pointer;

	opacity: 0.55;

	transition:
		opacity 0.25s ease;
}


.sceo-sort-option:hover,
.sceo-sort-option.is-active {
	opacity: 1;
}


.sceo-sort-option.is-active::after {
	content: "✓";

	float: right;
}


/* =========================================================
   SEARCH
========================================================= */

.sceo-products-search {
	display: flex;
	align-items: center;
	gap: 11px;

	width: min(320px, 25vw);

	margin-left: auto;

	border-bottom:
		1px solid rgba(20, 20, 20, 0.3);
}


.sceo-products-search__icon {
	width: 17px;
	height: 17px;

	fill: none;

	stroke: currentColor;
	stroke-width: 1.5;

	flex: 0 0 auto;
}


.sceo-products-search__input {
	width: 100%;

	padding: 0;

	border: 0;
	outline: 0;

	background: transparent;

	font: inherit;
	font-size: 13px;

	color: inherit;
}


.sceo-products-search__input::placeholder {
	color: inherit;
	opacity: 0.45;
}


.sceo-products-search__input::-webkit-search-cancel-button {
	cursor: pointer;
}


/* =========================================================
   GRID
========================================================= */

.sceo-products-grid {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	width: 100%;

	border-top:
		1px solid var(--sceo-line);
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.sceo-product-card {
	min-width: 0;

	border-right:
		1px solid var(--sceo-line);

	border-bottom:
		1px solid var(--sceo-line);
}


.sceo-product-card:nth-child(4n) {
	border-right: 0;
}


.sceo-product-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
	height: 100%;

	padding:
		clamp(40px, 4vw, 72px)
		clamp(18px, 2.8vw, 45px);

	color: inherit;

	text-decoration: none;
}


/* =========================================================
   IMAGE
========================================================= */

.sceo-product-card__image-wrap {
	width: min(100%, 320px);

	aspect-ratio: 4 / 5;

	overflow: hidden;
}


.sceo-product-card__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transform: scale(1);

	transition:
		transform 0.8s
		cubic-bezier(0.22, 1, 0.36, 1);
}


.sceo-product-card:hover
.sceo-product-card__image {
	transform: scale(1.035);
}


.sceo-product-card__placeholder {
	width: 100%;
	height: 100%;

	background:
		rgba(20, 20, 20, 0.04);
}


/* =========================================================
   TITLE
========================================================= */

.sceo-product-card__title {
	margin: 26px 0 0;
	padding: 0;

	font-family: inherit;

	font-size:
		clamp(18px, 1.5vw, 28px);

	font-weight: 400;
	line-height: 1.05;

	text-align: center;
	text-transform: uppercase;
}


/* =========================================================
   EMPTY
========================================================= */

.sceo-products-empty {
	grid-column: 1 / -1;

	padding: 100px 30px;

	text-align: center;
}


/* =========================================================
   PAGINATION
========================================================= */

.sceo-products-pagination {
	display: flex;
	justify-content: center;

	padding: 50px 20px 80px;
}


.sceo-products-pagination ul {
	display: flex;
	align-items: center;
	gap: 14px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.sceo-products-pagination a,
.sceo-products-pagination span {
	color: inherit;
	text-decoration: none;
}


.sceo-products-pagination .current {
	border-bottom:
		1px solid currentColor;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.sceo-products-controls__inner {
		padding:
			0 20px;
	}


	.sceo-filter-reset {
		margin-right: 18px;
	}


	.sceo-filter-trigger {
		min-width: auto;

		padding:
			0 14px;
	}


	.sceo-products-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}


	.sceo-product-card:nth-child(4n) {
		border-right:
			1px solid var(--sceo-line);
	}


	.sceo-product-card:nth-child(3n) {
		border-right: 0;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	body.admin-bar
	.sceo-products-controls {
		top: 46px;
	}


	.sceo-products-controls {
		overflow: visible;
	}


	.sceo-products-controls__inner {
		display: grid;

		grid-template-columns:
			repeat(4, auto);

		min-height: 58px;

		padding:
			0 15px;
	}


	.sceo-filter-reset {
		display: none;
	}


	.sceo-filter-trigger {
		min-height: 58px;

		padding:
			0 10px;

		font-size: 10px;
	}


	.sceo-filter-chevron {
		width: 6px;
		height: 6px;
	}


	.sceo-products-search {
		grid-column:
			1 / -1;

		width: 100%;

		margin: 0;

		min-height: 48px;

		border-top:
			1px solid var(--sceo-line);
	}


	.sceo-filter-panel {
		position: fixed;

		left: 15px;
		right: 15px;

		top: auto;

		width: auto;
		max-height: 55vh;

		margin-top: 0;
	}


	.sceo-filter-panel--more {
		width: auto;
	}


	.sceo-more-filters {
		grid-template-columns:
			1fr;

		gap: 38px;
	}


	.sceo-products-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.sceo-product-card:nth-child(3n) {
		border-right:
			1px solid var(--sceo-line);
	}


	.sceo-product-card:nth-child(2n) {
		border-right: 0;
	}


	.sceo-product-card__link {
		padding:
			30px 14px 34px;
	}


	.sceo-product-card__title {
		margin-top: 14px;

		font-size: 17px;
	}

}


/* =========================================================
   AJAX / BUTTON NORMALISATION
========================================================= */

.sceo-products-results {
	transition:
		opacity 0.25s ease;
}

.sceo-products-results.is-loading {
	opacity: 0.35;
	pointer-events: none;
}


/* Prevent Elementor/theme button colours overriding filters */

.sceo-filter-trigger,
.sceo-filter-reset,
.sceo-sort-option {
	box-shadow: none !important;
}

.sceo-filter-trigger:hover,
.sceo-filter-trigger:focus,
.sceo-filter-trigger:active,
.sceo-filter.is-open .sceo-filter-trigger,
.sceo-filter-reset:hover,
.sceo-filter-reset:focus,
.sceo-sort-option:hover,
.sceo-sort-option:focus {
	background: transparent !important;
	color: inherit !important;
	outline: none !important;
}