/**
 * HLXHub — Mobile Review Hero
 *
 * File:
 * assets/css/single-mobile/mobile-hero.css
 *
 * Responsive:
 * Desktop
 * Laptop
 * Tablet
 * Mobile
 */


/* ================================================================
   ROOT
================================================================ */
.hlx-mobile-hero {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 24px auto 0;
	overflow: hidden;

	color: #ffffff;

	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 28px;

	background:
		linear-gradient(
			135deg,
			rgba(8, 39, 75, 0.94),
			rgba(14, 83, 145, 0.88)
		);

	box-shadow:
		0 25px 70px rgba(13, 55, 96, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.38),
		inset 0 -1px 0 rgba(255, 255, 255, 0.08);

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

/* ================================================================
   BACKGROUND
================================================================ */

.hlx-mobile-hero__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;

	background:
		radial-gradient(
			circle at 78% 20%,
			rgba(255, 255, 255, 0.25),
			transparent 24%
		),
		radial-gradient(
			circle at 15% 85%,
			rgba(0, 174, 255, 0.25),
			transparent 32%
		),
		linear-gradient(
			135deg,
			rgba(31, 111, 180, 0.35),
			rgba(5, 39, 76, 0.15)
		);
}

.hlx-mobile-hero__background::before {
	content: "";
	position: absolute;
	inset: -30%;

	background:
		linear-gradient(
			115deg,
			transparent 25%,
			rgba(255, 255, 255, 0.13) 38%,
			transparent 48%
		),
		linear-gradient(
			-35deg,
			transparent 45%,
			rgba(255, 255, 255, 0.08) 52%,
			transparent 60%
		);

	filter: blur(18px);

	opacity: 0.8;

	transform: rotate(-4deg);

	animation: hlxWaterMove 12s ease-in-out infinite alternate;
}

.hlx-mobile-hero__background::after {
	content: "";

	position: absolute;

	width: 420px;
	height: 420px;

	right: -100px;
	top: -160px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.22) 0%,
			rgba(255, 255, 255, 0.08) 28%,
			transparent 68%
		);

	filter: blur(5px);

	opacity: 0.8;

	animation: hlxWaterBubble 8s ease-in-out infinite;
}

@keyframes hlxWaterMove {

	0% {
		transform:
			translateX(-30px)
			translateY(10px)
			rotate(-4deg);
	}

	50% {
		transform:
			translateX(20px)
			translateY(-10px)
			rotate(-2deg);
	}

	100% {
		transform:
			translateX(50px)
			translateY(8px)
			rotate(-4deg);
	}
}


@keyframes hlxWaterBubble {

	0%,
	100% {
		transform:
			translate3d(0, 0, 0)
			scale(1);
	}

	50% {
		transform:
			translate3d(-25px, 20px, 0)
			scale(1.08);
	}

}


.hlx-mobile-hero__glow {

	position: absolute;

	width: 600px;

	height: 600px;

	right: 18%;

	top: -220px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(93, 182, 255, 0.28) 0%,
			rgba(61, 142, 229, 0.12) 35%,
			transparent 72%
		);

	filter: blur(10px);

}


.hlx-mobile-hero__orb {

	position: absolute;

	border-radius: 50%;

	filter: blur(2px);

	opacity: .45;

}


.hlx-mobile-hero__orb--one {

	width: 260px;

	height: 260px;

	right: -80px;

	top: 100px;

	background:
		radial-gradient(
			circle,
			rgba(255,255,255,.22),
			transparent 68%
		);

}


.hlx-mobile-hero__orb--two {

	width: 420px;

	height: 420px;

	left: -220px;

	bottom: -300px;

	background:
		radial-gradient(
			circle,
			rgba(47,145,255,.25),
			transparent 70%
		);

}


/* subtle mountain-style background */
.hlx-mobile-hero__mountain {
	position: absolute;

	left: -5%;
	right: -5%;
	bottom: -8px;

	height: 145px;

	opacity: 0.16;

	background:
		linear-gradient(
			135deg,
			transparent 0 18%,
			rgba(255,255,255,.25) 18% 20%,
			transparent 20% 38%,
			rgba(255,255,255,.18) 38% 41%,
			transparent 41% 58%,
			rgba(255,255,255,.15) 58% 61%,
			transparent 61%
		);

	filter: blur(1px);

	clip-path: polygon(
		0 100%,
		0 70%,
		12% 42%,
		20% 72%,
		32% 30%,
		42% 66%,
		54% 25%,
		65% 65%,
		77% 34%,
		88% 70%,
		100% 42%,
		100% 100%
	);
}


/* ================================================================
   CONTAINER
================================================================ */
.hlx-mobile-hero__container {
	position: relative;
	z-index: 2;

	width: min(
		1240px,
		calc(100% - 40px)
	);

	margin-inline: auto;
}

/* ================================================================
   BREADCRUMB
================================================================ */

.hlx-mobile-hero__breadcrumb {

	display: flex;

	align-items: center;

	gap: 10px;

	padding-top: 20px;

	padding-bottom: 14px;

	font-size: 12px;

	line-height: 1.4;

	color: rgba(255,255,255,.68);

	white-space: nowrap;

	overflow: hidden;

}


.hlx-mobile-hero__breadcrumb a {

	color: rgba(255,255,255,.72);

	text-decoration: none;

	transition: color .2s ease;

}


.hlx-mobile-hero__breadcrumb a:hover {

	color: #ffffff;

}


.hlx-mobile-hero__breadcrumb-separator {

	color: rgba(255,255,255,.38);

	font-size: 18px;

}


.hlx-mobile-hero__breadcrumb-current {

	color: #ffffff;

	font-weight: 600;

}


/* ================================================================
   MAIN GRID
================================================================ */

.hlx-mobile-hero__grid {

	display: grid;

	grid-template-columns:
		minmax(0, 1.08fr)
		minmax(300px, .88fr)
		minmax(235px, .62fr);

	align-items: center;

	gap: 25px;

	min-height: 305px;

	padding: 5px 0 32px;

}


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

.hlx-mobile-hero__content {

	position: relative;

	z-index: 4;

}


.hlx-mobile-hero__badge {

	display: inline-flex;

	align-items: center;

	gap: 7px;

	margin-bottom: 12px;

	padding: 6px 12px;

	border: 1px solid rgba(255,255,255,.20);

	border-radius: 999px;

	background: rgba(39,143,255,.82);

	box-shadow:
		0 7px 20px rgba(0,0,0,.12);

	font-size: 11px;

	font-weight: 700;

	color: #ffffff;

	backdrop-filter: blur(10px);

}


.hlx-mobile-hero__badge-dot {

	width: 6px;

	height: 6px;

	border-radius: 50%;

	background: #ffffff;

	box-shadow: 0 0 0 3px rgba(255,255,255,.15);

}


/* ================================================================
   TITLE
================================================================ */

.hlx-mobile-hero__title {

	max-width: 680px;

	margin: 0;

	font-family:
		Poppins,
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

	font-size: clamp(
		32px,
		3.45vw,
		53px
	);

	font-weight: 800;

	line-height: 1.08;

	letter-spacing: -1.5px;

	color: #ffffff;

	text-wrap: balance;

}


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

.hlx-mobile-hero__description {

	max-width: 650px;

	margin-top: 15px;

	font-size: 14px;

	line-height: 1.65;

	color: rgba(255,255,255,.82);

}


.hlx-mobile-hero__description p {

	margin: 0;

}


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

.hlx-mobile-hero__meta {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 17px;

	margin-top: 17px;

}


.hlx-mobile-hero__meta-item {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	font-size: 11px;

	color: rgba(255,255,255,.82);

}


.hlx-mobile-hero__meta-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 18px;

	height: 18px;

}


.hlx-mobile-hero__meta-icon .dashicons {

	font-size: 16px;

	width: 16px;

	height: 16px;

}


/* ================================================================
   PRODUCT VISUAL
================================================================ */

.hlx-mobile-hero__visual {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	min-height: 345px;

	z-index: 3;

}


.hlx-mobile-hero__visual-glow {

	position: absolute;

	width: 360px;

	height: 360px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(116,198,255,.38) 0%,
			rgba(62,145,231,.20) 34%,
			transparent 72%
		);

	filter: blur(7px);

}


.hlx-mobile-hero__ring {

	position: absolute;

	width: 325px;

	height: 325px;

	border-radius: 50%;

	border: 1px solid rgba(255,255,255,.16);

	box-shadow:
		0 0 70px rgba(90,174,255,.20),
		inset 0 0 45px rgba(255,255,255,.04);

	transform: rotate(-12deg);

}


.hlx-mobile-hero__ring::before {

	content: "";

	position: absolute;

	inset: 20px;

	border-radius: 50%;

	border: 1px dashed rgba(255,255,255,.10);

}


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

.hlx-mobile-hero__product-wrap {

	position: relative;

	z-index: 4;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;

	animation:
		hlxHeroFloat
		5s
		ease-in-out
		infinite;

}


.hlx-mobile-hero__product {

	display: block;

	width: auto;

	max-width: 88%;

	max-height: 365px;

	object-fit: contain;

	filter:
		drop-shadow(
			0 30px 25px rgba(0,0,0,.34)
		)
		drop-shadow(
			0 10px 10px rgba(0,0,0,.18)
		);

	transform:
		translateY(0)
		rotate(0deg);

	transition:
		transform .45s ease,
		filter .45s ease;

}


/* floating hover */

.hlx-mobile-hero__visual:hover .hlx-mobile-hero__product {

	transform:
		translateY(-8px)
		scale(1.015);

	filter:
		drop-shadow(
			0 40px 30px rgba(0,0,0,.40)
		)
		drop-shadow(
			0 12px 12px rgba(0,0,0,.20)
		);

}


@keyframes hlxHeroFloat {

	0%,
	100% {

		transform:
			translateY(0);

	}

	50% {

		transform:
			translateY(-10px);

	}

}


/* ================================================================
   PRODUCT SHADOW
================================================================ */

.hlx-mobile-hero__floating-shadow {

	position: absolute;

	left: 50%;

	bottom: 27px;

	width: 180px;

	height: 25px;

	transform: translateX(-50%);

	border-radius: 50%;

	background: rgba(0,0,0,.32);

	filter: blur(17px);

	opacity: .65;

	animation:
		hlxShadowFloat
		5s
		ease-in-out
		infinite;

}


@keyframes hlxShadowFloat {

	0%,
	100% {

		transform:
			translateX(-50%)
			scale(1);

		opacity: .65;

	}

	50% {

		transform:
			translateX(-50%)
			scale(.82);

		opacity: .40;

	}

}


/* ================================================================
   NO IMAGE
================================================================ */

.hlx-mobile-hero__no-image {

	position: relative;

	z-index: 5;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 230px;

	height: 300px;

	border-radius: 35px;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.16),
			rgba(255,255,255,.05)
		);

	border: 1px solid rgba(255,255,255,.20);

}


.hlx-mobile-hero__no-image .dashicons {

	font-size: 75px;

	width: 75px;

	height: 75px;

	color: rgba(255,255,255,.7);

}


/* ================================================================
   QUICK SPECS
================================================================ */

.hlx-mobile-hero__quick-specs {

	display: flex;

	flex-direction: column;

	gap: 9px;

	position: relative;

	z-index: 5;

}


.hlx-mobile-hero__spec-card {

	display: flex;

	align-items: center;

	gap: 10px;

	min-height: 55px;

	padding: 8px 11px;

	border: 1px solid rgba(255,255,255,.40);

	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.94),
			rgba(244,249,255,.88)
		);

	box-shadow:
		0 10px 25px rgba(0,0,0,.12);

	backdrop-filter: blur(14px);

	transition:
		transform .25s ease,
		box-shadow .25s ease;

}


.hlx-mobile-hero__spec-card:hover {

	transform: translateX(-5px);

	box-shadow:
		0 15px 30px rgba(0,0,0,.18);

}


.hlx-mobile-hero__spec-icon {

	flex: 0 0 34px;

	width: 34px;

	height: 34px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 10px;

	background:
		linear-gradient(
			135deg,
			#1681ff,
			#005eea
		);

	color: #ffffff;

	box-shadow:
		0 7px 16px rgba(0,105,230,.22);

}


.hlx-mobile-hero__spec-icon .dashicons {

	font-size: 18px;

	width: 18px;

	height: 18px;

}


.hlx-mobile-hero__spec-content {

	min-width: 0;

	display: flex;

	flex-direction: column;

	gap: 2px;

}


.hlx-mobile-hero__spec-content strong {

	overflow: hidden;

	font-size: 12px;

	line-height: 1.25;

	font-weight: 700;

	color: #102544;

	text-overflow: ellipsis;

	white-space: nowrap;

}


.hlx-mobile-hero__spec-content span {

	font-size: 10px;

	line-height: 1.2;

	color: #61718a;

}


/* ================================================================
   ACTION WRAPPER
================================================================ */

.hlx-mobile-hero__action-wrap {

	position: relative;

	z-index: 10;

	margin-top: -1px;

	padding: 0 20px 18px;

}


.hlx-mobile-hero__action-bar {

	width: min(
		1240px,
		100%
	);

	min-height: 70px;

	margin-inline: auto;

	display: grid;

	grid-template-columns:
		minmax(190px, .9fr)
		minmax(340px, 1.35fr)
		minmax(230px, .9fr);

	align-items: center;

	gap: 14px;

	padding: 9px;

	border: 1px solid rgba(210,226,243,.90);

	border-radius: 16px;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.98),
			rgba(244,249,255,.97)
		);

	box-shadow:
		0 16px 45px rgba(4,31,66,.20);

}


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

.hlx-mobile-hero__price {

	display: flex;

	align-items: center;

	gap: 9px;

	padding-left: 8px;

	color: #122b4e;

}


.hlx-mobile-hero__price-icon {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 30px;

	height: 30px;

	border-radius: 9px;

	background: #edf6ff;

	color: #1678ef;

}


.hlx-mobile-hero__price-icon .dashicons {

	font-size: 18px;

	width: 18px;

	height: 18px;

}


.hlx-mobile-hero__price div:last-child {

	display: flex;

	flex-direction: column;

	gap: 2px;

}


.hlx-mobile-hero__price strong {

	font-size: 19px;

	line-height: 1.1;

	font-weight: 800;

	white-space: nowrap;

}


.hlx-mobile-hero__price span {

	font-size: 9px;

	color: #60738d;

}


/* ================================================================
   BUY BUTTONS
================================================================ */

.hlx-mobile-hero__buy-buttons {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 10px;

}


.hlx-mobile-hero__buy {

	min-height: 42px;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 8px;

	padding: 0 14px;

	border-radius: 9px;

	text-decoration: none;

	font-size: 11px;

	font-weight: 700;

	color: #ffffff;

	box-shadow:
		0 8px 18px rgba(0,0,0,.12);

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

}


.hlx-mobile-hero__buy:hover {

	color: #ffffff;

	transform: translateY(-2px);

	box-shadow:
		0 12px 22px rgba(0,0,0,.18);

}


.hlx-mobile-hero__buy--amazon {

	background:
		linear-gradient(
			135deg,
			#ff9900,
			#f36c0a
		);

}


.hlx-mobile-hero__buy--flipkart {

	background:
		linear-gradient(
			135deg,
			#287dff,
			#1258e8
		);

}


.hlx-mobile-hero__buy-logo {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 21px;

	height: 21px;

	border-radius: 50%;

	background: rgba(255,255,255,.18);

	font-size: 13px;

	font-weight: 900;

}


.hlx-mobile-hero__buy .dashicons {

	font-size: 13px;

	width: 13px;

	height: 13px;

	opacity: .85;

}


/* ================================================================
   ACTIONS
================================================================ */

.hlx-mobile-hero__actions {

	display: flex;

	align-items: center;

	justify-content: flex-end;

	gap: 2px;

}


.hlx-mobile-hero__action {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 5px;

	min-height: 40px;

	padding: 0 9px;

	border: 0;

	background: transparent;

	color: #173455;

	font-family: inherit;

	font-size: 10px;

	font-weight: 600;

	cursor: pointer;

	border-radius: 8px;

	transition:
		background .2s ease,
		color .2s ease;

}


.hlx-mobile-hero__action:hover {

	background: #edf5ff;

	color: #086eea;

}


.hlx-mobile-hero__action .dashicons {

	font-size: 17px;

	width: 17px;

	height: 17px;

}


/* ================================================================
   LAPTOP
================================================================ */

@media (max-width: 1100px) {

	.hlx-mobile-hero__grid {

		grid-template-columns:
			minmax(0, 1fr)
			minmax(270px, .75fr)
			minmax(205px, .58fr);

		gap: 15px;

	}


	.hlx-mobile-hero__title {

		font-size: clamp(
			30px,
			4vw,
			45px
		);

	}


	.hlx-mobile-hero__product {

		max-height: 330px;

	}


	.hlx-mobile-hero__ring {

		width: 285px;

		height: 285px;

	}


	.hlx-mobile-hero__visual-glow {

		width: 320px;

		height: 320px;

	}


	.hlx-mobile-hero__action-bar {

		grid-template-columns:
			minmax(170px, .8fr)
			minmax(300px, 1.3fr)
			minmax(200px, .8fr);

	}

}


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

@media (max-width: 850px) {

	.hlx-mobile-hero__grid {

		grid-template-columns:
			1fr
			.75fr;

		grid-template-areas:

			"content visual"
			"specs specs";

		align-items: center;

	}


	.hlx-mobile-hero__content {

		grid-area: content;

	}


	.hlx-mobile-hero__visual {

		grid-area: visual;

		min-height: 320px;

	}


	.hlx-mobile-hero__quick-specs {

		grid-area: specs;

		display: grid;

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

		gap: 8px;

	}


	.hlx-mobile-hero__spec-card {

		min-width: 0;

	}


	.hlx-mobile-hero__action-bar {

		grid-template-columns:
			1fr 1.5fr;

	}


	.hlx-mobile-hero__actions {

		grid-column: 1 / -1;

		justify-content: center;

		border-top: 1px solid #e6edf5;

		padding-top: 5px;

	}


	.hlx-mobile-hero__price {

		padding-left: 5px;

	}

}


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

@media (max-width: 620px) {

	.hlx-mobile-hero {
		width: calc(100% - 16px);
		margin-top: 12px;
		border-radius: 20px;
	}

	.hlx-mobile-hero__container {
		width: calc(100% - 24px);
	}


	.hlx-mobile-hero__breadcrumb {

		padding-top: 14px;

		padding-bottom: 8px;

		font-size: 10px;

		gap: 7px;

	}


	.hlx-mobile-hero__grid {

		display: flex;

		flex-direction: column;

		gap: 0;

		padding-bottom: 20px;

	}


	.hlx-mobile-hero__content {

		width: 100%;

		padding-top: 5px;

	}


	.hlx-mobile-hero__badge {

		font-size: 9px;

		padding: 5px 10px;

		margin-bottom: 10px;

	}


	.hlx-mobile-hero__title {

		font-size: clamp(
			28px,
			8vw,
			38px
		);

		line-height: 1.10;

		letter-spacing: -1px;

	}


	.hlx-mobile-hero__description {

		margin-top: 12px;

		font-size: 12px;

		line-height: 1.55;

	}


	.hlx-mobile-hero__meta {

		gap: 10px;

		margin-top: 13px;

	}


	.hlx-mobile-hero__meta-item {

		font-size: 9px;

	}


	/* product */

	.hlx-mobile-hero__visual {

		width: 100%;

		min-height: 320px;

		margin-top: -2px;

	}


	.hlx-mobile-hero__visual-glow {

		width: 290px;

		height: 290px;

	}


	.hlx-mobile-hero__ring {

		width: 265px;

		height: 265px;

	}


	.hlx-mobile-hero__product {

		max-width: 75%;

		max-height: 300px;

	}


	.hlx-mobile-hero__floating-shadow {

		bottom: 18px;

		width: 150px;

	}


	/* specs */

	.hlx-mobile-hero__quick-specs {

		width: 100%;

		display: grid;

		grid-template-columns:
			1fr 1fr;

		gap: 7px;

	}


	.hlx-mobile-hero__spec-card {

		min-height: 52px;

		padding: 7px;

		border-radius: 10px;

	}


	.hlx-mobile-hero__spec-icon {

		flex-basis: 30px;

		width: 30px;

		height: 30px;

		border-radius: 8px;

	}


	.hlx-mobile-hero__spec-content strong {

		font-size: 10px;

	}


	.hlx-mobile-hero__spec-content span {

		font-size: 8px;

	}


	/* action area */

	.hlx-mobile-hero__action-wrap {

		padding:
			0
			10px
			12px;

	}


	.hlx-mobile-hero__action-bar {

		display: flex;

		flex-direction: column;

		align-items: stretch;

		gap: 9px;

		padding: 10px;

		border-radius: 14px;

	}


	.hlx-mobile-hero__price {

		justify-content: center;

		padding: 2px 0;

	}


	.hlx-mobile-hero__price strong {

		font-size: 17px;

	}


	.hlx-mobile-hero__buy-buttons {

		width: 100%;

		grid-template-columns:
			1fr 1fr;

	}


	.hlx-mobile-hero__buy {

		min-height: 43px;

		font-size: 10px;

		padding: 0 7px;

	}


	.hlx-mobile-hero__buy-logo {

		width: 19px;

		height: 19px;

	}


	.hlx-mobile-hero__actions {

		width: 100%;

		border-top: 1px solid #e5edf6;

		padding-top: 4px;

		justify-content: space-around;

	}


	.hlx-mobile-hero__action {

		flex: 1;

		font-size: 9px;

	}


	.hlx-mobile-hero__action .dashicons {

		font-size: 16px;

		width: 16px;

		height: 16px;

	}

}


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

@media (max-width: 390px) {

	.hlx-mobile-hero__title {

		font-size: 27px;

	}


	.hlx-mobile-hero__description {

		font-size: 11px;

	}


	.hlx-mobile-hero__visual {

		min-height: 290px;

	}


	.hlx-mobile-hero__product {

		max-height: 270px;

		max-width: 72%;

	}


	.hlx-mobile-hero__ring {

		width: 235px;

		height: 235px;

	}


	.hlx-mobile-hero__visual-glow {

		width: 250px;

		height: 250px;

	}


	.hlx-mobile-hero__buy {

		gap: 5px;

		font-size: 9px;

	}

}


/* ================================================================
   REDUCED MOTION
================================================================ */

@media (prefers-reduced-motion: reduce) {

	.hlx-mobile-hero__product-wrap,
	.hlx-mobile-hero__floating-shadow {

		animation: none;

	}


	.hlx-mobile-hero__product,
	.hlx-mobile-hero__spec-card,
	.hlx-mobile-hero__buy {

		transition: none;

	}

}

.hlx-not-mobile {
	display: block;
}

@media (max-width: 767px) {
	.hlx-not-mobile {
		display: none !important;
	}
}


/* ==========================================================
   HLxHub — Premium Midnight Blue Hero Theme
   Add this at the END of mobile-hero.css
========================================================== */

.hlx-mobile-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 80% 25%,
            rgba(37, 99, 235, 0.30) 0%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 10% 100%,
            rgba(14, 165, 233, 0.20) 0%,
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #0B1530 0%,
            #142B55 55%,
            #0B1530 100%
        ) !important;
    border: 1px solid rgba(96, 165, 250, 0.25);
    box-shadow:
        0 20px 55px rgba(11, 21, 48, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Hero headings */

.hlx-mobile-hero h1,
.hlx-mobile-hero__title {
    color: #FFFFFF !important;
}

/* Hero description */

.hlx-mobile-hero p,
.hlx-mobile-hero__description {
    color: #CBD5E1;
}

/* Highlighted text */

.hlx-mobile-hero strong,
.hlx-mobile-hero__highlight {
    color: #8BB8FF;
}

/* Floating blue glow */

.hlx-mobile-hero::before {
    background: radial-gradient(
        circle,
        rgba(37, 99, 235, 0.28) 0%,
        rgba(59, 130, 246, 0.12) 40%,
        transparent 72%
    );
    pointer-events: none;
}

/* Subtle water-like lighting */

.hlx-mobile-hero::after {
    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(56, 189, 248, 0.16),
        transparent 65%
    );
    pointer-events: none;
}

/* Amazon button */

.hlx-mobile-hero__buy--amazon {
    background: #FF8A00 !important;
    color: #FFFFFF !important;
    border: 1px solid #FFAA33;
}

/* Flipkart button */

.hlx-mobile-hero__buy--flipkart {
    background: #1769FF !important;
    color: #FFFFFF !important;
    border: 1px solid #60A5FA;
}

/* Button hover */

.hlx-mobile-hero__buy--amazon:hover {
    background: #E87900 !important;
}

.hlx-mobile-hero__buy--flipkart:hover {
    background: #0B55D9 !important;
}

/* Mobile adjustments */

@media (max-width: 767px) {
    .hlx-mobile-hero {
        box-shadow:
            0 12px 32px rgba(11, 21, 48, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }
}