/* Flowcat 3F: reusable product templates and multi-category catalog. */

body.single-product .product_title::before {
	display: none !important;
	content: none !important;
}

body.single-product .flowcat-product-profile {
	margin: 0 0 12px;
	color: var(--fc-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.flowcat-catalog-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	align-items: end;
	margin: 0 0 28px;
	padding: 20px;
	background: #f8f1e8;
	border: 1px solid #e3d5c6;
	border-radius: 18px;
}

.flowcat-catalog-filters label:not(.flowcat-catalog-stock) {
	display: grid;
	gap: 7px;
	color: #4a4038;
	font-size: 12px;
	font-weight: 700;
}

.flowcat-catalog-filters input[type="search"],
.flowcat-catalog-filters select {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	color: #2b2620;
	background: #fff;
	border: 1px solid #d8c7b6;
	border-radius: 10px;
	box-shadow: none;
}

.flowcat-catalog-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	color: #4a4038;
	font-size: 13px;
	font-weight: 700;
}

.flowcat-catalog-stock input {
	width: 18px;
	height: 18px;
	accent-color: #6f4e37;
}

.flowcat-catalog-filters button {
	min-height: 46px;
	padding: 0 22px;
	color: #fff;
	background: #6f4e37;
	border: 1px solid #6f4e37;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
}

.flowcat-catalog-filters > a {
	grid-column: 1 / -1;
	justify-self: start;
	color: #6f4e37;
	font-size: 13px;
	font-weight: 700;
}

body.flowcat-catalog-multi ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
}

body.flowcat-catalog-multi ul.products > li.product {
	display: flex !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 18px !important;
	flex-flow: column nowrap !important;
	align-content: stretch !important;
	column-gap: 0 !important;
}

body.flowcat-catalog-multi ul.products > li.product figure {
	flex: 0 0 auto !important;
	width: 100% !important;
	height: 280px !important;
	margin-bottom: 20px !important;
}

body.flowcat-catalog-multi ul.products > li.product :is(.woocommerce-loop-product__title, .price, .entry-meta) {
	width: 100% !important;
}

body.flowcat-catalog-multi ul.products > li.product .woocommerce-loop-product__title {
	margin: 0 0 12px !important;
	font-size: 25px !important;
}

body.flowcat-catalog-multi ul.products > li.product .price {
	margin-bottom: 12px !important;
	font-size: 21px !important;
}

body.flowcat-catalog-multi ul.products > li.product .entry-meta {
	margin-bottom: 20px !important;
}

body.flowcat-catalog-multi .flowcat-product-cta {
	margin-top: auto;
}

.flowcat-product-essentials {
	width: min(calc(100% - 48px), 1152px);
	margin: 0 auto 72px;
	padding: clamp(26px, 4vw, 46px);
	background: #f1e8dc;
	border: 1px solid #e3d5c6;
	border-radius: 28px;
}

.flowcat-product-essentials > header {
	max-width: 650px;
	margin-bottom: 28px;
}

.flowcat-product-essentials > header p {
	margin: 0 0 8px;
	color: #8e5e43;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.flowcat-product-essentials > header h2 {
	margin: 0 0 8px;
	color: #2b2620;
	font-size: clamp(32px, 4vw, 46px);
	letter-spacing: -.03em;
}

.flowcat-product-essentials > header span {
	color: #74655a;
}

.flowcat-product-benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 26px;
}

.flowcat-product-benefits article {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 10px;
	align-items: start;
	padding: 17px;
	background: #fffdf9;
	border: 1px solid #e3d5c6;
	border-radius: 15px;
}

.flowcat-product-benefits article span {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	color: #fff;
	background: #6f4e37;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
}

.flowcat-product-benefits article p {
	margin: 3px 0 0;
	color: #2b2620;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
}

.flowcat-product-detail-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.flowcat-product-detail-grid > article {
	padding: 20px;
	background: #fffdf9;
	border: 1px solid #e3d5c6;
	border-radius: 16px;
}

.flowcat-product-detail-grid h3 {
	margin: 0 0 14px;
	color: #6f4e37;
	font-size: 18px;
}

.flowcat-product-detail-grid :is(ul, dl) {
	margin: 0;
	padding: 0;
}

.flowcat-product-detail-grid ul {
	padding-left: 18px;
}

.flowcat-product-detail-grid li {
	margin-bottom: 8px;
	color: #4a4038;
}

.flowcat-product-detail-grid dl > div {
	display: grid;
	grid-template-columns: minmax(90px, .7fr) 1fr;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #eadfd2;
}

.flowcat-product-detail-grid dt {
	color: #74655a;
	font-size: 12px;
	font-weight: 700;
}

.flowcat-product-detail-grid dd {
	margin: 0;
	color: #2b2620;
	font-size: 13px;
}

.flowcat-product-policy-links {
	display: flex;
	gap: 18px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid #d8c7b6;
}

.flowcat-product-policy-links a {
	color: #6f4e37;
	font-size: 13px;
	font-weight: 800;
}

body.single-product .related.products {
	width: min(calc(100% - 48px), 1152px);
	margin-inline: auto;
}

@media (max-width: 1023px) {
	body.flowcat-catalog-multi ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.flowcat-catalog-filters {
		grid-template-columns: 1fr 1fr;
	}

	.flowcat-product-benefits,
	.flowcat-product-detail-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.flowcat-catalog-filters {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}

	.flowcat-catalog-filters button {
		width: 100%;
	}

	body.flowcat-catalog-multi ul.products {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.flowcat-product-essentials {
		width: min(calc(100% - 32px), 620px);
		margin-bottom: 52px;
		padding: 20px;
		border-radius: 22px;
	}

	.flowcat-product-benefits,
	.flowcat-product-detail-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.flowcat-product-policy-links {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}
}