/* =========================================================
   AWTI DEVICES HUB
   SIMILAR PRODUCTS CSS
   Same Green + White + Blue Theme
   File: assets/css/similar-products.css
   ========================================================= */

.awti-similar-products {
	margin: 24px 0;
}


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

.awti-similar-products__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}


.awti-similar-products__eyebrow {
	display: block;
	margin-bottom: 4px;

	color: #2563eb;

	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
}


.awti-similar-products__title {
	margin: 0;

	color: #0f172a;

	font-size: 21px;
	font-weight: 900;
}


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

.awti-similar-products__grid {
	display: grid;

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

	gap: 12px;
}


/* =========================================================
   PRODUCT CARD
   SAME THEME AS PRICE / AI RATING CARDS
   ========================================================= */

.awti-similar-product {
	position: relative;

	min-width: 0;

	overflow: hidden;

	border: 1px solid rgba(37, 99, 235, .18);

	border-left: 3px solid #16a34a;

	border-radius: 15px;

	background:
		linear-gradient(
			135deg,
			#ecfdf5 0%,
			#ffffff 48%,
			#eff6ff 100%
		);

	box-shadow:
		0 5px 18px rgba(15, 23, 42, .045);

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}


/* TOP GREEN → TEAL → BLUE LINE */

.awti-similar-product::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;
	right: 0;

	height: 3px;

	background:
		linear-gradient(
			90deg,
			#16a34a,
			#0d9488,
			#2563eb
		);

	z-index: 2;
}


/* =========================================================
   PRODUCT LINK
   ========================================================= */

.awti-similar-product__link {
	display: block;

	color: inherit;
	text-decoration: none;
}


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

.awti-similar-product__image {
	display: flex;

	align-items: center;
	justify-content: center;

	min-height: 150px;

	padding: 12px;

	border-bottom: 1px solid rgba(37, 99, 235, .12);

	background:
		linear-gradient(
			135deg,
			#ecfdf5 0%,
			#ffffff 48%,
			#eff6ff 100%
		);
}


.awti-similar-product__image img {
	width: 100%;
	height: 150px;

	object-fit: contain;
}


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

.awti-similar-product__content {
	padding: 12px;

	background:
		linear-gradient(
			135deg,
			rgba(236, 253, 245, .65),
			rgba(255, 255, 255, .88),
			rgba(239, 246, 255, .65)
		);
}


/* =========================================================
   BRAND
   ========================================================= */

.awti-similar-product__brand {
	display: block;

	margin-bottom: 4px;

	color: #64748b;

	font-size: 11px;
	font-weight: 600;
}


/* =========================================================
   PRODUCT NAME
   ========================================================= */

.awti-similar-product__name {
	margin: 0 0 8px;

	color: #0f172a;

	font-size: 14px;
	line-height: 1.4;
	font-weight: 800;
}


/* =========================================================
   META
   ========================================================= */

.awti-similar-product__meta {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 8px;

	font-size: 12px;
}


/* =========================================================
   RATING
   ========================================================= */

.awti-similar-product__rating {
	color: #15803d;

	font-weight: 800;
}


/* =========================================================
   PRICE
   ========================================================= */

.awti-similar-product__price {
	color: #2563eb;

	font-weight: 900;
}


/* =========================================================
   HOVER
   ========================================================= */

.awti-similar-product:hover {

	border-color: rgba(22, 163, 74, .35);

	box-shadow:
		0 9px 24px rgba(15, 23, 42, .08);

	transform: translateY(-2px);
}


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

@media (max-width: 900px) {

	.awti-similar-products__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


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

@media (max-width: 520px) {

	.awti-similar-products__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 8px;
	}


	.awti-similar-product {
		border-radius: 13px;
	}


	.awti-similar-product__image {
		min-height: 120px;
	}


	.awti-similar-product__image img {
		height: 120px;
	}


	.awti-similar-product__content {
		padding: 10px;
	}


	.awti-similar-product__name {
		font-size: 13px;
	}


	.awti-similar-product__meta {
		font-size: 11px;
	}

}