/* =========================================================
   HLxHub — Static Mobile Card
   File: assets/css/components/mobile-card.css

   Matches:
   template-parts/components/card/mobile-card.php

   Static UI only.
   No dynamic data.
   No additional elements.
   ========================================================= */


/* =========================================================
   1. MAIN CARD
   ========================================================= */

.hlxhub-mobile-card {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 24px;
	box-sizing: border-box;
	overflow: hidden;

	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;

	color: #171717;
	font-family: "Poppins", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
}

.hlxhub-mobile-card *,
.hlxhub-mobile-card *::before,
.hlxhub-mobile-card *::after {
	box-sizing: border-box;
}

.hlxhub-mobile-card button {
	font-family: inherit;
	cursor: pointer;
}


/* =========================================================
   2. HEADER
   ========================================================= */

.hlxhub-mobile-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;

	margin: 0;
	padding: 0 0 20px;

	border-bottom: 1px solid #eeeeee;
}

.hlxhub-mobile-card__heading {
	flex: 1 1 auto;
	min-width: 0;
}

.hlxhub-mobile-card__title {
	margin: 0 0 5px;
	padding: 0;

	color: #171717;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.4px;

	overflow-wrap: anywhere;
}

.hlxhub-mobile-card__release-date {
	margin: 0;
	padding: 0;

	color: #777777;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
}

.hlxhub-mobile-card__compare {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 5px;

	margin: 2px 0 0;
	padding: 8px 12px;

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

	background: #ffffff;
	color: #1769ff;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.hlxhub-mobile-card__compare span {
	font-size: 19px;
	line-height: 1;
}


/* =========================================================
   3. MAIN CONTENT — TWO COLUMNS
   ========================================================= */

.hlxhub-mobile-card__main {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.45fr);
	align-items: start;
	gap: 30px;

	min-width: 0;
	margin: 0;
	padding: 24px 0;
}


/* =========================================================
   4. PHONE IMAGE
   ========================================================= */

.hlxhub-mobile-card__media {
	position: relative;

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

	min-width: 0;
	margin: 0;
}

.hlxhub-mobile-card__score {
	position: absolute;
	top: 10px;
	left: 8px;
	z-index: 1;

	display: inline-block;
	max-width: calc(100% - 16px);
	padding: 6px 10px;

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

	background: #e8f8ed;
	color: #16803b;

	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.hlxhub-mobile-card__image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-width: 0;
	min-height: 290px;
	padding: 28px 12px 12px;

	border-radius: 12px;
	background: #fafafa;
}

.hlxhub-mobile-card__image {
	display: block;

	width: 100%;
	max-width: 220px;
	height: 250px;
	margin: 0 auto;

	object-fit: contain;
	object-position: center;
}

.hlxhub-mobile-card__photos {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 43px;
	margin: 12px 0 0;
	padding: 9px 12px;

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

	background: #ffffff;
	color: #333333;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}


/* =========================================================
   5. AT A GLANCE
   ========================================================= */

.hlxhub-mobile-card__glance {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.hlxhub-mobile-card__section-title {
	margin: 0 0 14px;
	padding: 0;

	color: #171717;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.2px;
}

.hlxhub-mobile-card__specifications {
	display: flex;
	flex-direction: column;

	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.hlxhub-mobile-card__spec-row {
	display: flex;
	align-items: center;
	gap: 11px;

	width: 100%;
	min-width: 0;
	min-height: 43px;
	margin: 0;
	padding: 8px 0;

	border-bottom: 1px solid #eeeeee;
}

.hlxhub-mobile-card__spec-row:first-child {
	padding-top: 3px;
}

.hlxhub-mobile-card__spec-icon {
	display: inline-flex;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;

	width: 28px;
	height: 28px;

	border-radius: 7px;
	background: #f3f5f8;
	color: #505967;

	font-size: 16px;
	line-height: 1;
}

.hlxhub-mobile-card__spec-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;

	color: #343a40;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;

	overflow-wrap: anywhere;
}

.hlxhub-mobile-card__all-specs {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 41px;
	margin: 15px 0 0;
	padding: 9px 16px;

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

	background: #ffffff;
	color: #1769ff;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}


/* =========================================================
   6. USER RATING
   ========================================================= */

.hlxhub-mobile-card__rating {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 16px 0;

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

.hlxhub-mobile-card__rating-label,
.hlxhub-mobile-card__rating-value {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	min-width: 0;

	font-size: 13px;
	line-height: 1.6;
}

.hlxhub-mobile-card__rating-label {
	color: #555555;
	font-weight: 500;
}

.hlxhub-mobile-card__rating-label > span:first-child {
	color: #727985;
	font-size: 18px;
	line-height: 1;
}

.hlxhub-mobile-card__rating-value {
	color: #303030;
	font-weight: 600;
}

.hlxhub-mobile-card__star {
	color: #f5a623;
	font-size: 19px;
	line-height: 1;
}


/* =========================================================
   7. FULL REVIEW + AI COMPARISON
   ========================================================= */

.hlxhub-mobile-card__actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px;

	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 20px 0 0;
}

.hlxhub-mobile-card__review-button,
.hlxhub-mobile-card__ai-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-width: 0;
	min-height: 47px;
	margin: 0;
	padding: 11px 14px;

	border: 1px solid transparent;
	border-radius: 9px;

	color: #ffffff;

	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.hlxhub-mobile-card__review-button {
	background: #171717;
	border-color: #171717;
}

.hlxhub-mobile-card__ai-button {
	background: #7138e8;
	border-color: #7138e8;
}


/* =========================================================
   8. AMAZON BUTTON
   ========================================================= */

.hlxhub-mobile-card__amazon-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;

	width: 100%;
	min-width: 0;
	min-height: 53px;
	margin: 16px 0 0;
	padding: 13px 16px;

	border: 1px solid #ff8a00;
	border-radius: 9px;

	background: #ff8a00;
	color: #ffffff;

	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
}

.hlxhub-mobile-card__amazon-button:hover {
	background: #f58200;
	border-color: #f58200;
	color: #ffffff;
}

.hlxhub-mobile-card__amazon-cart,
.hlxhub-mobile-card__amazon-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;

	line-height: 1;
}

.hlxhub-mobile-card__amazon-cart {
	font-size: 18px;
}

.hlxhub-mobile-card__amazon-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.hlxhub-mobile-card__amazon-arrow {
	font-size: 20px;
}


/* =========================================================
   9. TABLET
   ========================================================= */

@media (max-width: 768px) {

	.hlxhub-mobile-card {
		padding: 20px;
	}

	.hlxhub-mobile-card__main {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: 20px;
	}

	.hlxhub-mobile-card__title {
		font-size: 20px;
	}

	.hlxhub-mobile-card__image-wrap {
		min-height: 245px;
	}

	.hlxhub-mobile-card__image {
		height: 215px;
	}

	.hlxhub-mobile-card__spec-row {
		gap: 8px;
	}

	.hlxhub-mobile-card__spec-icon {
		flex-basis: 25px;
		width: 25px;
		height: 25px;
	}

	.hlxhub-mobile-card__spec-text {
		font-size: 12px;
	}

}


/* =========================================================
   10. MOBILE
   ========================================================= */

@media (max-width: 540px) {

	.hlxhub-mobile-card {
		padding: 15px;
		border-radius: 12px;
	}

	.hlxhub-mobile-card__header {
		gap: 8px;
		padding-bottom: 15px;
	}

	.hlxhub-mobile-card__title {
		font-size: 17px;
		line-height: 1.45;
		letter-spacing: -0.2px;
	}

	.hlxhub-mobile-card__release-date {
		font-size: 12px;
	}

	.hlxhub-mobile-card__compare {
		gap: 4px;
		padding: 7px 8px;
		font-size: 11px;
	}

	.hlxhub-mobile-card__main {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 18px 0;
	}

	.hlxhub-mobile-card__image-wrap {
		min-height: 255px;
		padding: 28px 12px 12px;
	}

	.hlxhub-mobile-card__image {
		max-width: 190px;
		height: 220px;
	}

	.hlxhub-mobile-card__score {
		top: 8px;
		left: 8px;
		font-size: 11px;
	}

	.hlxhub-mobile-card__photos {
		min-height: 42px;
		margin-top: 10px;
		font-size: 12px;
	}

	.hlxhub-mobile-card__section-title {
		margin-bottom: 12px;
		font-size: 18px;
	}

	.hlxhub-mobile-card__spec-row {
		min-height: 42px;
		gap: 10px;
		padding: 8px 0;
	}

	.hlxhub-mobile-card__spec-icon {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
		font-size: 16px;
	}

	.hlxhub-mobile-card__spec-text {
		font-size: 13px;
	}

	.hlxhub-mobile-card__all-specs {
		width: 100%;
		min-height: 42px;
	}

	.hlxhub-mobile-card__rating {
		flex-wrap: wrap;
		gap: 10px;
		padding: 14px 0;
	}

	.hlxhub-mobile-card__rating-label,
	.hlxhub-mobile-card__rating-value {
		gap: 6px;
		font-size: 12px;
	}

	.hlxhub-mobile-card__actions {
		gap: 10px;
		padding-top: 16px;
	}

	.hlxhub-mobile-card__review-button,
	.hlxhub-mobile-card__ai-button {
		min-height: 45px;
		padding: 10px 7px;
		font-size: 12px;
	}

	.hlxhub-mobile-card__amazon-button {
		gap: 8px;
		min-height: 50px;
		margin-top: 13px;
		padding: 12px 9px;
		font-size: 13px;
	}

}


/* =========================================================
   11. EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

	.hlxhub-mobile-card {
		padding: 12px;
	}

	.hlxhub-mobile-card__title {
		font-size: 16px;
	}

	.hlxhub-mobile-card__compare {
		padding: 6px;
		font-size: 10px;
	}

	.hlxhub-mobile-card__rating {
		flex-direction: column;
		align-items: flex-start;
	}

	.hlxhub-mobile-card__actions {
		gap: 8px;
	}

	.hlxhub-mobile-card__review-button,
	.hlxhub-mobile-card__ai-button {
		padding-right: 4px;
		padding-left: 4px;
		font-size: 11px;
	}

	.hlxhub-mobile-card__amazon-button {
		gap: 6px;
		font-size: 12px;
	}

}


/* =========================================================
   12. KEYBOARD FOCUS
   ========================================================= */

.hlxhub-mobile-card button:focus-visible,
.hlxhub-mobile-card a:focus-visible {
	outline: 3px solid rgba(23, 105, 255, 0.45);
	outline-offset: 3px;
}


/* =========================================================
   HLxHub Mobile Card — Premium Icons & Typography
   ========================================================= */

/* Typography */

.hlxhub-mobile-card {
	font-family: "Poppins", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.hlxhub-mobile-card__title {
	font-family: "Poppins", Arial, sans-serif;
	font-weight: 700;
	letter-spacing: -0.45px;
}

.hlxhub-mobile-card__release-date {
	font-family: "Poppins", Arial, sans-serif;
	font-weight: 400;
	letter-spacing: 0;
}

.hlxhub-mobile-card__section-title {
	font-family: "Poppins", Arial, sans-serif;
	font-weight: 700;
	letter-spacing: -0.25px;
}

.hlxhub-mobile-card__spec-text {
	font-family: "Poppins", Arial, sans-serif;
	font-weight: 500;
	letter-spacing: -0.1px;
}

.hlxhub-mobile-card__photos,
.hlxhub-mobile-card__all-specs,
.hlxhub-mobile-card__review-button,
.hlxhub-mobile-card__ai-button,
.hlxhub-mobile-card__compare,
.hlxhub-mobile-card__amazon-button {
	font-family: "Poppins", Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 0;
}

/* Consistent SVG icon sizing */

.hlxhub-mobile-card__action-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

/* Gallery and specifications buttons */

.hlxhub-mobile-card__photos,
.hlxhub-mobile-card__all-specs {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Full Review and AI Comparison */

.hlxhub-mobile-card__review-button,
.hlxhub-mobile-card__ai-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

/* Rating user icon */

.hlxhub-mobile-card__user-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #737b87;
}

/* Amazon cart and arrow */

.hlxhub-mobile-card__amazon-cart,
.hlxhub-mobile-card__amazon-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hlxhub-mobile-card__amazon-cart .hlxhub-mobile-card__action-icon {
	width: 19px;
	height: 19px;
}

.hlxhub-mobile-card__amazon-arrow .hlxhub-mobile-card__action-icon {
	width: 19px;
	height: 19px;
}

/* Small-screen button typography */

@media (max-width: 540px) {

	.hlxhub-mobile-card__photos,
	.hlxhub-mobile-card__all-specs {
		gap: 7px;
	}

	.hlxhub-mobile-card__review-button,
	.hlxhub-mobile-card__ai-button {
		gap: 6px;
	}

	.hlxhub-mobile-card__action-icon {
		width: 16px;
		height: 16px;
	}

	.hlxhub-mobile-card__user-icon {
		width: 17px;
		height: 17px;
	}
}

.hlxhub-mobile-card__image-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 280px;
	padding: 16px;
	overflow: hidden;
	background: #f8fafc;
	border-radius: 14px;
	box-sizing: border-box;
}

.hlxhub-mobile-card__image {
	display: block;
	width: 100%;
	max-width: 220px;
	height: 260px;
	object-fit: contain;
	object-position: center;
	margin: 0 auto;
}

.hlxhub-mobile-card__score {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 7px 10px;
	background: #dcfce7;
	color: #15803d;
	font-size: 12px;
	font-weight: 700;
	border-radius: 7px;
	z-index: 1;
}

@media (max-width: 600px) {
	.hlxhub-mobile-card__image-wrap {
		min-height: 230px;
	}

	.hlxhub-mobile-card__image {
		max-width: 170px;
		height: 210px;
	}
}

/* Phone Image — Large, No Extra Padding */

.hlxhub-mobile-card__image-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 300px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background: #f8fafc;
	border-radius: 12px;
	box-sizing: border-box;
}

.hlxhub-mobile-card__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 300px;
	padding: 0;
	margin: 0;
	object-fit: contain;
	object-position: center;
}

.hlxhub-mobile-card__score {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 7px 10px;
	background: #dcfce7;
	color: #15803d;
	font-size: 12px;
	font-weight: 700;
	border-radius: 7px;
}

@media (max-width: 600px) {
	.hlxhub-mobile-card__image-wrap {
		min-height: 260px;
		padding: 0;
	}

	.hlxhub-mobile-card__image {
		width: 100%;
		max-width: 100%;
		height: 260px;
	}
}

/* =========================================
   HLxHub — Same Card Layout on All Screens
   Desktop + Tablet + Mobile
========================================= */

.hlxhub-mobile-card {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/* Image left, details right — every screen */
.hlxhub-mobile-card__main {
	display: grid;
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Image area */
.hlxhub-mobile-card__image-wrap {
	width: 100%;
	min-width: 0;
	min-height: 0;
	height: auto;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
}

/* Image scales with available space */
.hlxhub-mobile-card__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
	object-position: center;
	padding: 0;
	margin: 0;
}

/* Details area */
.hlxhub-mobile-card__details {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Keep spec rows compact */
.hlxhub-mobile-card__details * {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Tablet */
@media (max-width: 900px) {
	.hlxhub-mobile-card__main {
		grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
		gap: 12px;
	}

	.hlxhub-mobile-card__image {
		max-height: 260px;
	}
}

/* Mobile — preserve the same horizontal layout */
@media (max-width: 600px) {
	.hlxhub-mobile-card__main {
		grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
		gap: 8px;
	}

	.hlxhub-mobile-card__image {
		max-height: 210px;
	}

	.hlxhub-mobile-card__details {
		font-size: 12px;
	}
}

/* ==========================================
   HLxHub — Mobile Card Image/Data Adjustment
========================================== */

@media (max-width: 600px) {

	/* Image ko zyada width do */
	.hlxhub-mobile-card__main {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr) !important;
		gap: 6px !important;
		align-items: center;
	}

	/* Left phone image ko bada rakho */
	.hlxhub-mobile-card__image-wrap {
		width: 100%;
		padding: 0 !important;
		margin: 0;
		min-height: 0;
	}

	.hlxhub-mobile-card__image {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 250px !important;
		object-fit: contain;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Right-side data compact karo */
	.hlxhub-mobile-card__details {
		min-width: 0;
		font-size: 10px !important;
		line-height: 1.3;
	}

	.hlxhub-mobile-card__details h2,
	.hlxhub-mobile-card__details h3,
	.hlxhub-mobile-card__details h4 {
		font-size: 12px !important;
		line-height: 1.3;
		margin: 0 0 5px;
	}

	.hlxhub-mobile-card__details p,
	.hlxhub-mobile-card__details li {
		font-size: 10px !important;
		line-height: 1.3;
		margin-bottom: 4px;
	}

	/* Specs ke beech ka gap kam */
	.hlxhub-mobile-card__details ul {
		padding-left: 12px;
		margin: 4px 0;
	}

	/* Image score badge compact */
	.hlxhub-mobile-card__score {
		top: 5px;
		left: 5px;
		padding: 4px 5px;
		font-size: 9px;
	}
}

/* =========================================
   HLxHub — Balanced Image & Specs Layout
   Mobile: Image and Data Equal Height
========================================= */

@media (max-width: 600px) {

	/* Dono columns ek hi row mein */
	.hlxhub-mobile-card__main {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		align-items: stretch !important;
		gap: 8px !important;
		width: 100%;
	}

	/* Left image area — right data jitni height */
	.hlxhub-mobile-card__image-wrap {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		min-height: 100%;
		padding: 0 !important;
		margin: 0;
		overflow: hidden;
		box-sizing: border-box;
	}

	/* Phone image area ko fill kare */
	.hlxhub-mobile-card__image {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: none !important;
		min-height: 280px;
		object-fit: contain;
		object-position: center;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Right data ko compact rakho */
	.hlxhub-mobile-card__details {
		width: 100%;
		min-width: 0;
		font-size: 10px !important;
		line-height: 1.3;
		box-sizing: border-box;
	}

	.hlxhub-mobile-card__details h2,
	.hlxhub-mobile-card__details h3,
	.hlxhub-mobile-card__details h4 {
		font-size: 12px !important;
		line-height: 1.3;
		margin-top: 0;
		margin-bottom: 5px;
	}

	.hlxhub-mobile-card__details p,
	.hlxhub-mobile-card__details li {
		font-size: 10px !important;
		line-height: 1.3;
		margin-bottom: 5px;
	}

	.hlxhub-mobile-card__score {
		top: 5px;
		left: 5px;
		padding: 4px 5px;
		font-size: 9px;
	}
}

/* =========================================
   HLxHub — Mobile Image First Layout
========================================= */

@media (max-width: 600px) {

	/* Left image wide, right data narrow */
	.hlxhub-mobile-card__main {
		display: grid !important;
		grid-template-columns: minmax(0, 55%) minmax(0, 1fr) !important;
		gap: 5px !important;
		align-items: start !important;
	}

	/* Left: Large phone image */
	.hlxhub-mobile-card__image-wrap {
		width: 100% !important;
		min-width: 0 !important;
		height: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		align-items: flex-start !important;
		justify-content: center !important;
		overflow: hidden;
	}

	.hlxhub-mobile-card__image {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 300px !important;
		min-height: 0 !important;
		max-height: none !important;
		object-fit: contain !important;
		object-position: top center !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Right: Compact specifications */
	.hlxhub-mobile-card__details {
		width: 100% !important;
		min-width: 0 !important;
		font-size: 8px !important;
		line-height: 1.15 !important;
		overflow-wrap: anywhere;
	}

	.hlxhub-mobile-card__details h2,
	.hlxhub-mobile-card__details h3,
	.hlxhub-mobile-card__details h4 {
		font-size: 9px !important;
		line-height: 1.2 !important;
		margin: 0 0 3px !important;
	}

	.hlxhub-mobile-card__details p,
	.hlxhub-mobile-card__details li {
		font-size: 8px !important;
		line-height: 1.15 !important;
		margin: 0 0 3px !important;
	}

	.hlxhub-mobile-card__details ul {
		padding-left: 9px !important;
		margin: 3px 0 !important;
	}

	/* Smaller image score badge */
	.hlxhub-mobile-card__score {
		top: 4px !important;
		left: 4px !important;
		padding: 3px 4px !important;
		font-size: 8px !important;
	}
}

/* Laptop: Show all 8 specs */
.hlxhub-spec-extra {
	display: block;
}

/* Mobile: Show only first 6 specs */
@media (max-width: 600px) {
	.hlxhub-spec-extra {
		display: none !important;
	}

	.hlxhub-mobile-card__details {
		font-size: 10px;
		line-height: 1.3;
	}

	.hlxhub-spec-row {
		margin-bottom: 5px;
		overflow-wrap: anywhere;
	}
}

@media (max-width: 600px) {

	/* Mobile image ko halka sa neeche karo */
	.hlxhub-mobile-card__image-wrap {
		padding-top: 5px !important;
	}

	/* Image aur data ke beech bahut halka gap */
	.hlxhub-mobile-card__main {
		column-gap: 9px !important;
	}
}
@media (max-width: 600px) {

	/* Phone image thodi aur neeche */
	.hlxhub-mobile-card__image-wrap {
		padding-top: 9px !important;
		background: #ffffff !important;
	}

	/* Image ke peeche bhi white background */
	.hlxhub-mobile-card__image {
		background: #ffffff !important;
	}
}

.hlxhub-spec-icon {
	width: 18px;
	height: 18px;
	min-width: 18px;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
	color: #64748b;
}


/* =========================================================
   HLxHub — Mobile Card: Keep Name & Compare Below Overlays
   ========================================================= */

/* Mobile card must stay in normal stacking order */
.hlxhub-mobile-card {
	position: relative;
	z-index: 0;
	isolation: auto;
}

/* Phone name */
.hlxhub-mobile-card .hlxhub-mobile-card__title,
.hlxhub-mobile-card .hlxhub-mobile-card__name {
	position: relative;
	z-index: 0;
}

/* Compare button */
.hlxhub-mobile-card .hlxhub-mobile-card__compare,
.hlxhub-mobile-card .hlxhub-mobile-card__compare-button,
.hlxhub-mobile-card .hlxhub-compare-button {
	position: relative;
	z-index: 0;
}

/* Dropdowns and overlays should appear above cards */
.hlxhub-search-dropdown,
.hlxhub-search-suggestions,
.hlxhub-search-filter-overlay,
.hlxhub-search-filter-panel {
	z-index: 1000;
}

/* Fixed filter drawer must remain above the cards */
@media (max-width: 767px) {
	.hlxhub-search-sidebar .hlxhub-search-filter-panel {
		z-index: 1001;
	}
}


/* =========================================
   HLxHub — Mobile Card Final Fix
   Wider layout + View Photos after image
========================================= */

@media (max-width: 600px) {

    .hlxhub-mobile-card {
        padding: 10px !important;
        border-radius: 12px;
    }

    .hlxhub-mobile-card__main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        padding: 12px 0 !important;
    }

    /* Image aur photos button ka order */
    .hlxhub-mobile-card__media {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        min-width: 0;
    }

    .hlxhub-mobile-card__image-wrap {
        order: 1 !important;
        width: 100% !important;
        height: 230px !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        border-radius: 10px;
    }

    .hlxhub-mobile-card__image {
        width: 100% !important;
        height: 100% !important;
        max-height: 230px !important;
        object-fit: contain !important;
        object-position: center !important;
        margin: 0 !important;
    }

    .hlxhub-mobile-card__photos {
        order: 2 !important;
        display: flex !important;
        width: 100% !important;
        min-height: 36px !important;
        margin: 5px 0 0 !important;
        padding: 7px 3px !important;
        gap: 4px !important;
        border-radius: 7px;
        font-size: 11px !important;
        line-height: 1.35 !important;
        text-align: center;
    }

    /* Details ko readable rakho */
    .hlxhub-mobile-card__details {
        min-width: 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .hlxhub-mobile-card__details h2,
    .hlxhub-mobile-card__details h3,
    .hlxhub-mobile-card__details h4 {
        font-size: 12px !important;
        line-height: 1.4 !important;
        overflow-wrap: anywhere;
    }

    .hlxhub-mobile-card__details p,
    .hlxhub-mobile-card__details li {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    .hlxhub-mobile-card__score {
        top: 5px !important;
        left: 5px !important;
        padding: 4px 6px !important;
        font-size: 9px !important;
    }
}

/* Extra-small phones */
@media (max-width: 360px) {
    .hlxhub-mobile-card {
        padding: 8px !important;
    }

    .hlxhub-mobile-card__main {
        gap: 7px !important;
    }

    .hlxhub-mobile-card__image-wrap {
        height: 200px !important;
    }

    .hlxhub-mobile-card__image {
        max-height: 200px !important;
    }

    .hlxhub-mobile-card__details {
        font-size: 10px !important;
    }

    .hlxhub-mobile-card__photos {
        font-size: 10px !important;
    }
}


/* HLxHub — Compact Mobile Specs */

@media (max-width: 600px) {

    .hlxhub-mobile-card__main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    /* Right-side specification text */
    .hlxhub-mobile-card__details,
    .hlxhub-mobile-card__spec-text {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    .hlxhub-mobile-card__details h2,
    .hlxhub-mobile-card__details h3,
    .hlxhub-mobile-card__details h4,
    .hlxhub-mobile-card__section-title {
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin-bottom: 5px !important;
    }

    /* Specification icons smaller */
    .hlxhub-mobile-card__spec-icon,
    .hlxhub-spec-icon {
        flex: 0 0 20px !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
    }

    /* Compact rows */
    .hlxhub-mobile-card__spec-row {
        gap: 5px !important;
        min-height: 32px !important;
        padding: 5px 0 !important;
    }

    .hlxhub-mobile-card__details p,
    .hlxhub-mobile-card__details li {
        font-size: 9px !important;
        line-height: 1.35 !important;
        margin-bottom: 3px !important;
    }
}

@media (max-width: 360px) {
    .hlxhub-mobile-card__details,
    .hlxhub-mobile-card__spec-text {
        font-size: 9px !important;
    }

    .hlxhub-mobile-card__spec-icon,
    .hlxhub-spec-icon {
        flex-basis: 18px !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        font-size: 11px !important;
    }
}