/* =========================================================
   SOUQDENT HOME
   TRENDING PRODUCTS
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.sd-home-trending{
	padding:54px 0 58px;

	background:#f7f8fa;

	border-top:1px solid #edf0f3;
	border-bottom:1px solid #edf0f3;
}


/* =========================================================
   HEADER
   ========================================================= */

.sd-home-trending-header{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;

	gap:24px;

	margin-bottom:24px;
}


.sd-home-trending-heading{
	min-width:0;
}


.sd-home-trending-kicker{
	display:block;

	margin:0 0 6px;

	color:#d99000;

	font-size:11px;
	font-weight:800;
	line-height:1.2;

	letter-spacing:1.6px;
	text-transform:uppercase;
}


.sd-home-trending-heading h2{
	margin:0;

	color:#172230;

	font-size:30px;
	font-weight:800;
	line-height:1.18;
}


.sd-home-trending-heading p{
	margin:8px 0 0;

	color:#718096;

	font-size:14px;
	line-height:1.5;
}


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

.sd-home-trending-controls{
	display:flex;
	align-items:center;

	gap:8px;

	flex:0 0 auto;
}


.sd-home-trending-controls.is-hidden{
	display:none;
}


.sd-home-trending-arrow{
	display:flex;
	align-items:center;
	justify-content:center;

	width:40px;
	height:40px;

	padding:0;

	background:#fff;
	color:#172230;

	border:1px solid #dfe5eb;
	border-radius:8px;

	box-shadow:none;

	cursor:pointer;

	transition:
		background .18s ease,
		border-color .18s ease,
		color .18s ease,
		opacity .18s ease;
}


.sd-home-trending-arrow:hover:not(:disabled){
	background:#ffad00;

	border-color:#ffad00;

	color:#172230;
}


.sd-home-trending-arrow:disabled{
	opacity:.35;

	cursor:default;
}


.sd-home-trending-arrow .dashicons{
	width:18px;
	height:18px;

	font-size:18px;
	line-height:18px;
}


/* =========================================================
   SLIDER
   ========================================================= */

.sd-home-trending-slider{
	position:relative;

	width:100%;

	overflow:hidden;
}


.sd-home-trending-track{
	display:flex;
	align-items:stretch;

	gap:22px;

	width:max-content;
	max-width:none;

	transform:translate3d(0,0,0);

	transition:
		transform .35s ease;

	will-change:transform;
}


/* =========================================================
   SLIDE
   ========================================================= */

.sd-home-trending-slide{
	flex:0 0 auto;

	width:
		calc(
			(var(--sd-trending-container-width, 100vw) - 66px)
			/ 4
		);

	min-width:0;
}


/*
 * Real width is assigned by JavaScript.
 * This fallback prevents giant cards before JS initializes.
 */
.sd-home-trending-slide{
	max-width:300px;
}


.sd-home-trending-slide .sd-product-card{
	width:100%;
	height:100%;

	margin:0;
}


/* =========================================================
   PRODUCT CARD HOMEPAGE REFINEMENTS
   ========================================================= */

.sd-home-trending .sd-product-card{
	background:#fff;
}


.sd-home-trending .sd-product-card-image{
	height:260px;
}


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

@media(max-width:1024px){

	.sd-home-trending{
		padding:46px 0 50px;
	}


	.sd-home-trending-slide{
		width:
			calc(
				(var(--sd-trending-container-width, 100vw) - 22px)
				/ 2
			);

		max-width:none;
	}


	.sd-home-trending .sd-product-card-image{
		height:240px;
	}

}


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

@media(max-width:640px){

	.sd-home-trending{
		padding:36px 0 40px;
	}


	.sd-home-trending-header{
		align-items:flex-end;

		gap:12px;

		margin-bottom:18px;
	}


	.sd-home-trending-kicker{
		font-size:10px;
	}


	.sd-home-trending-heading h2{
		font-size:24px;
	}


	.sd-home-trending-heading p{
		margin-top:6px;

		font-size:12px;
	}


	.sd-home-trending-arrow{
		width:35px;
		height:35px;
	}


	.sd-home-trending-track{
		gap:12px;
	}


	.sd-home-trending-slide{
		width:
			calc(
				(var(--sd-trending-container-width, 100vw) - 12px)
				/ 2
			);

		max-width:none;
	}


	.sd-home-trending .sd-product-card-image{
		height:180px;
	}

}