/**
 * Hemritu Homepage
 * Today Trending Products
 *
 * Section-level styling only.
 *
 * IMPORTANT:
 * Product card styling is controlled by the
 * central Hemritu Product Card Framework.
 */


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

.hemritu-homepage .hr-trending {

	width: 100%;

	margin: 0;

	padding: 82px 0 88px;

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#faf9f6 100%
		);

	overflow: hidden;

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.hemritu-homepage .hr-trending__container {

	width: 100%;

	max-width: 1320px;

	margin: 0 auto;

	padding: 0 28px;

	box-sizing: border-box;

}


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

.hemritu-homepage .hr-trending__header {

	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	gap: 60px;

	margin: 0 0 42px;

	padding: 0;

}


/* ==========================================================
   LEFT HEADING
   ========================================================== */

.hemritu-homepage .hr-trending__heading {

	flex: 1 1 auto;

	min-width: 0;

}


.hemritu-homepage .hr-trending__eyebrow {

	display: block;

	margin: 0 0 10px;

	font-size: 11px;

	font-weight: 700;

	line-height: 1.4;

	letter-spacing: 2.5px;

	text-transform: uppercase;

	color: #a17b3d;

}


.hemritu-homepage .hr-trending__title {

	margin: 0 !important;

	padding: 0 !important;

	font-size: clamp(
		32px,
		3.2vw,
		46px
	) !important;

	font-weight: 600 !important;

	line-height: 1.08 !important;

	letter-spacing: -0.5px;

	color: #171717;

}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.hemritu-homepage .hr-trending__description {

	width: 100%;

	max-width: 390px;

	flex: 0 1 390px;

	padding-bottom: 3px;

}


.hemritu-homepage .hr-trending__description p {

	margin: 0;

	padding: 0;

	font-size: 14px;

	font-weight: 400;

	line-height: 1.75;

	color: #6d6d6d;

}


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

.hemritu-homepage .hr-trending__products {

	display: grid !important;

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

	gap: 24px !important;

	width: 100% !important;

	margin: 0 !important;

	padding: 0 !important;

	list-style: none !important;

	box-sizing: border-box;

}


/* ==========================================================
   PRODUCT CARD — SECTION POSITION ONLY
   ========================================================== */

.hemritu-homepage .hr-trending__products > li.product {

	float: none !important;

	width: 100% !important;

	margin: 0 !important;

	box-sizing: border-box;

}


/*
 * Do NOT redefine:
 *
 * - image
 * - title
 * - price
 * - add to cart
 * - buy now
 * - discount
 *
 * Those belong to the central Hemritu Product Card.
 */


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

.hemritu-homepage .hr-trending__empty {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	width: 100%;

	min-height: 230px;

	padding: 40px;

	text-align: center;

	background: #f8f5ef;

	border: 1px solid #ece6db;

	box-sizing: border-box;

}


.hemritu-homepage .hr-trending__empty-icon {

	margin: 0 0 12px;

	font-size: 28px;

	line-height: 1;

	color: #a17b3d;

}


.hemritu-homepage .hr-trending__empty h3 {

	margin: 0 0 7px;

	font-size: 20px;

	font-weight: 600;

	color: #222222;

}


.hemritu-homepage .hr-trending__empty p {

	margin: 0;

	font-size: 14px;

	line-height: 1.6;

	color: #777777;

}


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

@media (max-width: 1024px) {


	.hemritu-homepage .hr-trending {

		padding:
			65px 0 70px;

	}


	.hemritu-homepage .hr-trending__container {

		padding:
			0 22px;

	}


	.hemritu-homepage .hr-trending__header {

		gap: 30px;

		margin-bottom: 34px;

	}


	.hemritu-homepage .hr-trending__products {

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

		gap: 20px !important;

	}

}


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

@media (max-width: 767px) {


	.hemritu-homepage .hr-trending {

		padding:
			50px 0 58px;

	}


	.hemritu-homepage .hr-trending__container {

		padding:
			0 14px;

	}


	/* Header becomes vertical */

	.hemritu-homepage .hr-trending__header {

		display: block;

		margin-bottom: 27px;

	}


	.hemritu-homepage .hr-trending__eyebrow {

		margin-bottom: 8px;

		font-size: 9px;

		letter-spacing: 1.8px;

	}


	.hemritu-homepage .hr-trending__title {

		font-size: 29px !important;

		line-height: 1.12 !important;

		letter-spacing: -0.3px;

	}


	.hemritu-homepage .hr-trending__description {

		max-width: 100%;

		margin-top: 10px;

		padding: 0;

	}


	.hemritu-homepage .hr-trending__description p {

		font-size: 12.5px;

		line-height: 1.6;

	}


	/* 2 x 2 product layout */

	.hemritu-homepage .hr-trending__products {

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

		gap: 14px !important;

	}


	/*
	 * Central product card already handles
	 * mobile card styling.
	 *
	 * No duplicate card CSS here.
	 */


}


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

@media (max-width: 380px) {


	.hemritu-homepage .hr-trending__container {

		padding:
			0 11px;

	}


	.hemritu-homepage .hr-trending__products {

		gap: 10px !important;

	}


	.hemritu-homepage .hr-trending__title {

		font-size: 26px !important;

	}

}