/* ============================================
   PRODUCTS CAROUSEL CSS
   ============================================ */
/* ============================================
PRODUCTS CAROUSEL CSS - Swiper.js version
============================================ */

/* Section container */
.products-carousel {
	padding: 60px 0;
	background-color: #ffffff;
}

/* Outer wrapper positions arrows outside swiper overflow */
.swiper-outer {
	position: relative;
	padding: 0 50px;
}

/* Product Card */
.product {
	position: relative;
	padding: 0 10px;
	text-align: center;
	cursor: pointer;
}

.product .product-images {
	position: relative;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	overflow: hidden;
}

.product .overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1;
}

/* Image hover swap */
.product .img-front,
.product .img-back {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.product .img-front { position: relative; }

.product .img-back {
	position: absolute;
	top: 0; left: 0; right: 0;
	opacity: 0;
}

.product:hover .img-front { opacity: 0; }
.product:hover .img-back  { opacity: 1; }
.product:hover .img-front,
.product:hover .img-back  { transform: scale(1.05); }

/* Product text */
.product .h5 {
	font-size: 18px;
	font-weight: 600;
	margin: 15px 0 10px;
	color: #333;
}

.product .price {
	font-size: 20px;
	font-weight: bold;
	color: #90CB40;
	margin: 10px 0;
}

/* View button */
.product .btn {
	display: inline-block;
	position: relative;
	z-index: 2;
	padding: 10px 30px;
	margin: 15px 0;
	background-color: #90CB40;
	color: white;
	text-decoration: none;
	border-radius: 25px;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.3s ease;
}

.product:hover .btn              { opacity: 1; transform: translateY(0); }
.product .btn:hover              { background-color: #7ab835; }

/* Arrows */
.swiper-button-prev,
.swiper-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 31px;
	z-index: 10;
	cursor: pointer;
	color: transparent;
}

.swiper-button-prev::after,
.swiper-button-next::after { display: none; }

.swiper-button-prev {
	background: url("data:image/svg+xml,%3Csvg width='18' height='31' viewBox='0 0 18 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.425 0.149993L0 15.575L15.425 31L17.9269 28.4981L5.00293 15.5742L17.9261 2.65106L15.425 0.149993Z' fill='%2390CB40'/%3E%3C/svg%3E") no-repeat center / 18px 31px;
	left: 0;
}

.swiper-button-next {
	background: url("data:image/svg+xml,%3Csvg width='18' height='31' viewBox='0 0 18 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.50162 30.8455L17.9243 15.4227L2.50162 0L0.000821958 2.50081L12.9219 15.4219L0 28.3438L2.50162 30.8455Z' fill='%2390CB40'/%3E%3C/svg%3E") no-repeat center / 18px 31px;
	right: 0;
}

.swiper-button-prev:hover {
	background-image: url("data:image/svg+xml,%3Csvg width='18' height='31' viewBox='0 0 18 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.425 0.149993L0 15.575L15.425 31L17.9269 28.4981L5.00293 15.5742L17.9261 2.65106L15.425 0.149993Z' fill='%237AB030'/%3E%3C/svg%3E");
}

.swiper-button-next:hover {
	background-image: url("data:image/svg+xml,%3Csvg width='18' height='31' viewBox='0 0 18 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.50162 30.8455L17.9243 15.4227L2.50162 0L0.000821958 2.50081L12.9219 15.4219L0 28.3438L2.50162 30.8455Z' fill='%237AB030'/%3E%3C/svg%3E");
}

/* Responsive */
@media (max-width: 768px) {
	#hurom-products-carousel { padding: 40px 0; }
	.product .h5   { font-size: 16px; }
	.product .price { font-size: 18px; }
}

@media (max-width: 420px) {
	.product .btn { opacity: 1; transform: translateY(0); }
	.swiper-button-prev,
	.swiper-button-next { display: none; }
	.swiper-outer { padding: 0; }
}