/**
 * Location: /assets/css/home-hero.css
 * Purpose:
 * - Core desktop styling for the SuntechMall VPro homepage hero slider.
 * - Builds the orange promotional layout with a transparent front-facing SVG mockup rebuilt for true 1:1 WooCommerce feature images.
 * - Keeps the slider visually balanced after the requested 20% overall height reduction.
 *
 * @package SuntechMallVPro
 */

.hps {
	--hps-orange: #ff8500;
	--hps-orange-deep: #e66c00;
	--hps-cream: #fff3df;
	--hps-dark: #111827;
	position: relative;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background:
		radial-gradient(circle at 76% 45%, rgba(255, 204, 122, 0.22) 0 18%, transparent 42%),
		linear-gradient(135deg, var(--hps-bg, var(--hps-orange)) 0%, #fb8000 52%, #ed7000 100%);
	isolation: isolate;
}

.hps,
.hps:focus,
.hps:focus-visible {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.hps * {
	box-sizing: border-box;
}

.hps .h-container {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hps::before {
	content: "";
	position: absolute;
	left: 47%;
	bottom: -1%;
	width: 26%;
	height: 78%;
	background: linear-gradient(135deg, rgba(255, 184, 72, 0.34), rgba(255, 184, 72, 0));
	clip-path: polygon(0 100%, 76% 0, 100% 0, 34% 100%);
	pointer-events: none;
	z-index: 0;
}

.hps::after {
	content: "";
	position: absolute;
	right: -12%;
	top: 8%;
	width: 52vw;
	height: 52vw;
	max-width: 680px;
	max-height: 680px;
	border: 1px solid rgba(255, 222, 178, 0.24);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.hps-wrap {
	position: relative;
	min-height: var(--hps-min-height-desktop, 300px);
	overflow: hidden;
}

.hps-track {
	display: flex;
	width: 100%;
	height: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform var(--hps-transition-speed, 480ms) cubic-bezier(.22,.85,.22,1);
	will-change: transform;
}

.hps--fade .hps-track {
	display: block;
	transform: none !important;
}

.hps-slide {
	position: relative;
	z-index: 1;
	flex: 0 0 100%;
	min-width: 100%;
	min-height: var(--hps-min-height-desktop, 240px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 42%);
	align-items: center;
	gap: clamp(16px, 2vw, 28px);
	padding: 12px clamp(36px, 5vw, 72px) 14px;
}

.hps--fade .hps-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--hps-transition-speed, 480ms) ease, visibility var(--hps-transition-speed, 480ms) ease;
}

.hps-slide.is-active,
.hps--fade .hps-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.hps-copy {
	position: relative;
	z-index: 2;
	align-self: start;
	max-width: 640px;
	padding-top: 20px;
	padding-left: clamp(6px, 1.6vw, 20px);
}

.hps-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 6px 12px 6px 7px;
	border: 1px solid rgba(255, 239, 213, 0.32);
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(120, 48, 0, 0.36), rgba(255, 130, 0, 0.22));
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.18),
		0 10px 24px rgba(112, 49, 0, 0.14);
	color: #fffaf2;
	font-size: 12px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
}

.hps-badge::before {
	content: none;
}

.hps-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #fff;
	color: #f97316;
	box-shadow: 0 6px 14px rgba(114, 46, 0, 0.16);
	flex: 0 0 auto;
}

.hps-badge__icon svg {
	display: block;
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.hps-badge__text {
	display: inline-block;
	padding-top: 1px;
}

.hps-head {
	max-width: none;
	margin: 0;
	color: #fff;
	font-size: clamp(28px, 2.8vw, 43px);
	font-weight: 950;
	line-height: 1.06;
	letter-spacing: -.038em;
	text-shadow: 0 5px 18px rgba(124, 46, 0, 0.12);
}

.hps-head__line {
	display: block;
	white-space: nowrap;
}

.hps-head__line + .hps-head__line {
	margin-top: 2px;
}

.hps-sub {
	max-width: 50ch;
	margin: 8px 0 0;
	color: rgba(255,255,255,.96);
	font-size: clamp(13px, 0.94vw, 15px);
	font-weight: 500;
	line-height: 1.55;
}

.hps-product-name {
	max-width: 34ch;
	margin: 8px 0 0;
	color: #fff;
	font-size: clamp(13px, 0.96vw, 15px);
	font-weight: 900;
	line-height: 1.35;
}

.hps-price,
.hps-price .price,
.hps-price bdi,
.hps-price .woocommerce-Price-amount,
.hps-price ins {
	color: #fff !important;
}

.hps-price {
	margin: 28px 0 0;
	color: #fff;
	font-size: clamp(26px, 2.3vw, 40px);
	font-weight: 950;
	line-height: 1;
	letter-spacing: -.035em;
	text-shadow: 0 8px 18px rgba(95, 38, 0, 0.2);
}

.hps-price del,
.hps-price del * {
	color: rgba(255,255,255,.72) !important;
	font-size: .55em;
}

.hps-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.hps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 164px;
	min-height: 52px;
	padding: 0 16px 0 22px;
	border: 1px solid rgba(255,255,255,.78);
	border-radius: 14px;
	font-size: 14px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: -.01em;
	text-decoration: none !important;
	box-shadow: 0 18px 28px rgba(103, 49, 0, 0.13);
	transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hps-btn:hover,
.hps-btn:focus-visible {
	transform: translateY(-2px);
	text-decoration: none !important;
	box-shadow: 0 23px 34px rgba(103, 49, 0, 0.18);
}

.hps-btn__text {
	display: inline-block;
	white-space: nowrap;
}

.hps-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 10px;
	flex: 0 0 auto;
	transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.hps-btn:hover .hps-btn__icon,
.hps-btn:focus-visible .hps-btn__icon {
	transform: translateX(2px);
}

.hps-btn__icon svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.hps-btn--buy {
	background: #ffffff;
	border-color: #ffffff;
	color: #111827;
}

.hps-btn--buy .hps-btn__icon {
	background: #fff3e6;
	color: #f97316;
}

.hps-btn--buy:hover,
.hps-btn--buy:focus-visible {
	background: #fff8ef;
	color: #111827;
}

.hps-btn--view {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.76);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 18px 28px rgba(103, 49, 0, 0.10);
	backdrop-filter: blur(5px);
}

.hps-btn--view .hps-btn__icon {
	background: rgba(255,255,255,0.16);
	color: #ffffff;
}

.hps-btn--view:hover,
.hps-btn--view:focus-visible {
	background: rgba(255,255,255,0.16);
	border-color: #ffffff;
	color: #fff;
}

.hps-mediaWrap {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding-right: clamp(4px, 1vw, 18px);
}

.hps-orb {
	position: absolute;
	border: 1px solid rgba(255, 223, 183, .25);
	border-radius: 50%;
	pointer-events: none;
}

.hps-orb--one {
	right: -16%;
	top: 54%;
	width: min(48vw, 650px);
	height: min(48vw, 650px);
	transform: translateY(-50%);
}

.hps-orb--two {
	right: -8%;
	top: 55%;
	width: min(37vw, 500px);
	height: min(37vw, 500px);
	transform: translateY(-50%);
}

.hps-dotsVisual {
	position: absolute;
	width: 76px;
	height: 76px;
	background-image: radial-gradient(circle, rgba(255, 235, 207, .95) 2px, transparent 2.2px);
	background-size: 18px 18px;
	pointer-events: none;
	opacity: .9;
}

.hps-dotsVisual--top {
	right: 1%;
	top: 22px;
}

.hps-dotsVisual--bottom {
	left: -5%;
	bottom: 54px;
}

.hps-mockup {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: min(100%, 420px);
	aspect-ratio: 520 / 440;
	padding-top: 22px;
	text-decoration: none !important;
	filter: drop-shadow(0 22px 30px rgba(81, 40, 0, 0.18));
	transform: translateY(0);
	isolation: isolate;
}

.hps-mockup::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 6px;
	z-index: 1;
	width: 258px;
	height: 258px;
	transform: translateX(-50%);
	border-radius: 34px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, #fff3c8 0%, #f0a938 18%, #fffefa 48%, #ff7a00 78%, #ffd36c 100%) border-box;
	border: 9px solid transparent;
	box-shadow:
		0 0 0 14px rgba(255, 249, 239, 0.96),
		0 0 18px rgba(255, 242, 164, 0.76),
		0 12px 22px rgba(123, 51, 0, 0.16),
		inset 0 0 0 3px rgba(255,255,255,0.92);
	pointer-events: none;
}

.hps-mockup::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 0;
	width: 390px;
	height: 86px;
	transform: translateX(-50%);
	border-radius: 50%;
	background:
		linear-gradient(to bottom, rgba(255,248,237,.96) 0%, rgba(244,222,197,.96) 58%, rgba(188,130,82,.86) 100%);
	box-shadow:
		0 26px 0 -13px rgba(255, 122, 0, 0.9),
		0 38px 20px -18px rgba(104, 45, 0, 0.28);
	pointer-events: none;
}

.hps-mockup:hover,
.hps-mockup:focus-visible {
	text-decoration: none !important;
}

.hps-mockup__screen {
	position: relative;
	z-index: 4;
	display: block;
	width: 218px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
	box-shadow:
		0 10px 22px rgba(88, 42, 0, 0.08),
		inset 0 0 0 1px rgba(224, 209, 188, 0.55);
	pointer-events: none;
}

.hps-mockup__screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 7;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
	pointer-events: none;
}

.hps-mockup__art {
	display: none !important;
}

.hps-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	padding: 0;
	object-fit: cover;
	object-position: center center;
	background: #fff;
	transform: none;
	transform-origin: center center;
	position: relative;
	z-index: 6;
}

.hps-arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	border: 1px solid rgba(255, 238, 216, .46);
	border-radius: 16px;
	background: rgba(255, 225, 188, .16);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(5px);
	transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.hps-arrow:hover,
.hps-arrow:focus-visible {
	background: rgba(255, 246, 233, .9);
	color: #7a4106;
	transform: translateY(-2px);
}

.hps-arrow span {
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
}

.hps-arrow--prev {
	left: 18px;
}

.hps-arrow--next {
	right: 18px;
}

.hps-dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 8px;
	transform: translateX(-50%);
}

.hps-dot {
	width: 28px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 213, 162, .42);
	cursor: pointer;
	transition: width .18s ease, background-color .18s ease, opacity .18s ease;
}

.hps-dot.is-active,
.hps-dot:hover,
.hps-dot:focus-visible {
	width: 38px;
	background: #fff;
	opacity: 1;
}

.hps-dot:not(.is-active) {
	opacity: .65;
}

/*
 * Legacy guest-cache compatibility guard.
 * Purpose: if a server/page cache serves older homepage slider HTML to logged-out users,
 * these selectors force the old markup into the same front-facing premium slider layout.
 * Blog sliders are excluded via .hps--blog.
 */
.hps:not(.hps--blog) .hps-left {
	position: relative;
	z-index: 2;
	align-self: center;
	max-width: 640px;
	padding-top: 0;
	padding-left: clamp(6px, 1.6vw, 20px);
}

.hps:not(.hps--blog) .hps-right {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding-right: clamp(4px, 1vw, 18px);
}

.hps:not(.hps--blog) .hps-product {
	margin-top: 8px;
}

.hps:not(.hps--blog) .hps-name {
	max-width: 34ch;
	color: #fff;
	font-size: clamp(13px, 0.96vw, 15px);
	font-weight: 900;
	line-height: 1.35;
}

.hps:not(.hps--blog) .hps-head {
	max-width: 560px;
	white-space: normal;
}

.hps:not(.hps--blog) .hps-media,
.hps:not(.hps--blog) .hps-mediaLink {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: min(100%, 420px);
	aspect-ratio: 520 / 440;
	padding-top: 22px;
	text-decoration: none !important;
	filter: drop-shadow(0 22px 30px rgba(81, 40, 0, 0.18));
	isolation: isolate;
}

.hps:not(.hps--blog) .hps-mediaLink::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 6px;
	z-index: 1;
	width: 258px;
	height: 258px;
	transform: translateX(-50%);
	border-radius: 34px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, #fff3c8 0%, #f0a938 18%, #fffefa 48%, #ff7a00 78%, #ffd36c 100%) border-box;
	border: 9px solid transparent;
	box-shadow:
		0 0 0 14px rgba(255, 249, 239, 0.96),
		0 0 18px rgba(255, 242, 164, 0.76),
		0 12px 22px rgba(123, 51, 0, 0.16),
		inset 0 0 0 3px rgba(255,255,255,0.92);
	pointer-events: none;
}

.hps:not(.hps--blog) .hps-mediaLink::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 0;
	width: 390px;
	height: 86px;
	transform: translateX(-50%);
	border-radius: 50%;
	background:
		linear-gradient(to bottom, rgba(255,248,237,.96) 0%, rgba(244,222,197,.96) 58%, rgba(188,130,82,.86) 100%);
	box-shadow:
		0 26px 0 -13px rgba(255, 122, 0, 0.9),
		0 38px 20px -18px rgba(104, 45, 0, 0.28);
	pointer-events: none;
}

.hps:not(.hps--blog) .hps-mediaLink .hps-img,
.hps:not(.hps--blog) .hps-media .hps-img {
	position: relative;
	z-index: 4;
	display: block;
	width: 218px;
	height: 218px;
	max-width: 218px;
	max-height: 218px;
	padding: 0;
	object-fit: cover;
	object-position: center center;
	border-radius: 10px;
	background: #fff;
	box-shadow:
		0 10px 22px rgba(88, 42, 0, 0.08),
		inset 0 0 0 1px rgba(224, 209, 188, 0.55);
	transform: none !important;
}

.hps:not(.hps--blog) .hps-btn--primary,
.hps:not(.hps--blog) .hps-btn:first-child {
	background: #ffffff;
	border-color: #ffffff;
	color: #111827;
}

.hps:not(.hps--blog) .hps-btn:not(.hps-btn--primary):not(.hps-btn--buy) {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.76);
	color: #fff;
}