/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* =========================================================
   FARMBRITE PRODUCTS - FIGMA DESIGN
   ========================================================= */

.farmbrite-wrapper {
	display: grid;
	grid-template-columns: 258px minmax(0, 1fr);
	gap: 25px;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	align-items: start;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.farmbrite-sidebar {
	width: 258px;
	box-sizing: border-box;
	padding: 25px 20px;
	border-radius: 14px;
	background: #D5F5E3;
}

.farmbrite-sidebar h2,
.farmbrite-sidebar h3 {
	margin: 0 0 25px;
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 100%;
	color: #1B4F72;
}

.farmbrite-sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.farmbrite-sidebar li {
	margin: 0 0 15px;
	padding: 0;
}

.farmbrite-sidebar a {
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 100%;
	color: #666666;
	text-decoration: none;
}

.farmbrite-sidebar a:hover,
.farmbrite-sidebar a.active {
	color: #3CB043;
}


/* =========================================================
   CONTENT
   ========================================================= */

.farmbrite-content {
	min-width: 0;
	width: 100%;
}


/* =========================================================
   TOP TOOLBAR
   ========================================================= */

.farmbrite-toolbar {
	width: 100%;
	height: 40px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.farmbrite-sort {
	width: 161px;
	height: 40px;
	padding: 0 15px;
	border: 1px solid #3CB043;
	border-radius: 4px;
	background: #FFFFFF;
	color: #3CB043;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	cursor: pointer;
}

.farmbrite-sort:focus {
	outline: none;
	border-color: #3CB043;
}


/* =========================================================
   RESULTS COUNT
   ========================================================= */

.farmbrite-results-count {
	margin: 0 0 15px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 100%;
	color: #666666;
}


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

.farmbrite-products-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}


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

.farmbrite-product-card {
	width: 100%;
	height: 296px;
	box-sizing: border-box;

	padding: 20px 20px 30px;

	border: 0.5px solid #3CB043;
	border-radius: 14px;

	background: #FFFFFF;

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 20px;

	transition:
		box-shadow 0.2s ease,
		border 0.2s ease,
		transform 0.2s ease;
}

.farmbrite-product-card:hover {
	border: 1px solid #3CB043;
	box-shadow: 0 0 20px 2px #D5F5E3;
}


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

.farmbrite-product-card img {
	display: block;

	width: 100%;
	height: 155px;

	object-fit: contain;

	border-radius: 10px;
}


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

.farmbrite-product-card h3 {
	width: 100%;
	margin: 0;

	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 100%;
	text-align: center;

	color: #1B4F72;
}


/* =========================================================
   HIDE OLD PRODUCT INFORMATION
   ========================================================= */

.farmbrite-product-card p {
	margin: 0;
}


/* =========================================================
   READ MORE BUTTON
   ========================================================= */

.farmbrite-read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 86px;
	height: 30px;

	padding: 0 10px;

	box-sizing: border-box;

	border: 1px solid #3CB043;
	border-radius: 4px;

	background: #FFFFFF;

	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 100%;
	text-align: center;

	color: #3CB043;

	text-decoration: none;

	transition:
		background 0.2s ease,
		color 0.2s ease;
}

.farmbrite-read-more:hover {
	background: #3CB043;
	color: #FFFFFF;
}


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

.farmbrite-pagination {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 6px;

	margin-top: 25px;
}

.farmbrite-pagination-link {
	width: 30px;
	height: 30px;

	padding: 0;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;

	border: 1px solid #D5F5E3;
	border-radius: 6px;

	background: #FFFFFF;

	color: #666666;

	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;

	text-decoration: none;
}

.farmbrite-pagination-link:hover {
	border-color: #3CB043;
	color: #3CB043;
}

.farmbrite-pagination-link.active {
	background: #D5F5E3;
	border-color: #D5F5E3;
	color: #3CB043;
}

.farmbrite-product-availability {
	align-self: flex-start;

	padding: 7px 12px;

	border-radius: 20px;

	background: #D5F5E3;

	color: #3CB043;

	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 100%;

	white-space: nowrap;
}



/* =========================================================
   LOADING
   ========================================================= */

.farmbrite-products-grid.loading {
	opacity: 0.5;
	pointer-events: none;
}


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

@media (max-width: 767px) {

	.farmbrite-wrapper {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.farmbrite-sidebar {
		display: none;
	}

	.farmbrite-content {
		width: 100%;
	}

	.farmbrite-toolbar {
		height: auto;
		margin-bottom: 20px;

		justify-content: space-between;
	}

	.farmbrite-sort {
		width: 161px;
	}

	.farmbrite-products-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.farmbrite-product-card {
		height: 296px;
		padding: 20px 15px 30px;
	}

	.farmbrite-product-card img {
		height: 155px;
	}

	.farmbrite-product-card h3 {
		font-size: 18px;
	}

}


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

@media (max-width: 480px) {

	.farmbrite-products-grid {
		grid-template-columns: 1fr;
	}

	.farmbrite-product-card {
		max-width: 100%;
	}

	.farmbrite-toolbar {
		justify-content: flex-end;
	}

}


/* =========================================================
   HOME PRODUCTS CAROUSEL ([farmbrite_home_products])
   ========================================================= */

.farmbrite-home-carousel {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	box-sizing: border-box;
}

.farmbrite-home-viewport {
	overflow: hidden;
	width: 100%;
}

.farmbrite-home-track {
	display: flex;
	align-items: stretch;
	gap: 0px;
	transition: transform 0.45s ease;
	will-change: transform;
}


/* =========================================================
   HOME CAROUSEL CARD
   ========================================================= */

.farmbrite-home-card {
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 20px 20px 30px;
	border: 0.5px solid #3CB043;
	border-radius: 14px;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 15px;
	transition:
		box-shadow 0.2s ease,
		border 0.2s ease;
}

.farmbrite-home-card:hover {
	border: 1px solid #3CB043;
	box-shadow: 0 0 20px 2px #D5F5E3;
}


/* =========================================================
   HOME CAROUSEL CARD TITLE
   ========================================================= */



/* =========================================================
   HOME CAROUSEL CARD TEXT
   ========================================================= */



/* =========================================================
   HOME CAROUSEL CARD IMAGE (OVAL)
   ========================================================= */

.farmbrite-home-card-image {
	margin-top: auto;
}



/* =========================================================
   HOME CAROUSEL DOTS
   ========================================================= */

.farmbrite-home-dots {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 6px;

	margin-top: 20px;
}

.farmbrite-home-dot {
	width: 10px;
	height: 10px;

	padding: 0;

	border: none;
	border-radius: 50%;

	background: #D5F5E3;

	cursor: pointer;

	transition:
		width 0.2s ease,
		background 0.2s ease;
}

.farmbrite-home-dot:hover {
	background: #3CB043;
}

.farmbrite-home-dot.active {
	width: 22px;
	border-radius: 6px;
	background: #3CB043;
}


/* =========================================================
   HOME CAROUSEL MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.farmbrite-home-card {
		padding: 20px 15px 25px;
	}

	.farmbrite-home-card-title {
		font-size: 12px;
	}

	.farmbrite-home-card-image img {
		height: 120px;
	}

}