/**
 * Hoorsun Energy — independent mobile product layout
 * Version 1.9.0
 *
 * This file is loaded last only on single product pages.
 */

/* Desktop: mobile tree hidden, desktop tree visible. */
.hst-mobile-single-product-root {
	display: none;
}

.hst-desktop-single-product-root {
	display: block;
}

@media (max-width: 900px) {

	/* ======================================================
	   1. Absolute viewport safety
	   ====================================================== */
	html,
	body.single-product {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow-x: hidden !important;
		overscroll-behavior-x: none !important;
	}

	body.single-product {
		touch-action: pan-y pinch-zoom !important;
		background: #f5f7fb !important;
	}

	body.single-product *,
	body.single-product *::before,
	body.single-product *::after {
		box-sizing: border-box;
	}

	body.single-product img,
	body.single-product svg,
	body.single-product video,
	body.single-product iframe {
		max-width: 100%;
	}

	body.single-product .hst-shop-main,
	body.single-product .hst-shop-main > .hst-container,
	body.single-product .woocommerce {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		overflow-x: hidden !important;
	}

	body.single-product .hst-shop-main {
		padding: 8px 0 104px !important;
	}

	body.single-product .hst-shop-main > .hst-container {
		padding: 0 8px !important;
	}

	/* ======================================================
	   2. Use ONLY the custom mobile tree
	   ====================================================== */
	.hst-desktop-single-product-root {
		display: none !important;
	}

	.hst-mobile-single-product-root {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		overflow: hidden !important;
	}

	/* Existing breadcrumb comes from before_single_product; mobile doesn't need it. */
	body.single-product .hst-product-breadcrumb {
		display: none !important;
	}

	.hst-mobile-product-page {
		width: 100% !important;
		max-width: 560px !important;
		min-width: 0 !important;
		margin: 0 auto !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 9px !important;
		direction: rtl !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page > * {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ======================================================
	   3. Gallery — centered, never larger than phone
	   ====================================================== */
	.hst-mobile-product-page .hst-mobile-gallery {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 8px !important;
		display: block !important;
		border: 1px solid #dfe6ef !important;
		border-radius: 14px !important;
		background: #fff !important;
		box-shadow: 0 5px 18px rgba(8,41,87,.05) !important;
		overflow: hidden !important;
		direction: rtl !important;
	}

	.hst-mobile-product-page .hst-mobile-gallery__stage {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: clamp(235px, 75vw, 350px) !important;
		margin: 0 !important;
		padding: 10px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		border: 0 !important;
		border-radius: 11px !important;
		background: #fff !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mobile-gallery__stage img {
		position: static !important;
		inset: auto !important;
		width: auto !important;
		max-width: 88% !important;
		height: auto !important;
		max-height: 100% !important;
		margin: auto !important;
		display: block !important;
		object-fit: contain !important;
		object-position: center center !important;
		transform: none !important;
	}

	.hst-mobile-product-page .hst-mobile-gallery__zoom {
		position: absolute !important;
		top: 8px !important;
		left: 8px !important;
		right: auto !important;
		width: 34px !important;
		height: 34px !important;
		display: grid !important;
		place-items: center !important;
		border: 1px solid #dfe6ef !important;
		border-radius: 50% !important;
		color: #0b3d78 !important;
		background: #fff !important;
	}

	.hst-mobile-product-page .hst-mobile-gallery__thumbs {
		width: 100% !important;
		max-width: 100% !important;
		margin: 7px 0 0 !important;
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 5px !important;
		overflow: hidden !important;
		direction: ltr !important;
	}

	.hst-mobile-product-page .hst-mobile-gallery__thumb {
		width: 100% !important;
		max-width: 100% !important;
		aspect-ratio: 1 / 1 !important;
		margin: 0 !important;
		padding: 3px !important;
		display: grid !important;
		place-items: center !important;
		border: 1px solid #dfe6ef !important;
		border-radius: 8px !important;
		background: #fff !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mobile-gallery__thumb img {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
	}

	/* ======================================================
	   4. Product summary — all centered inside phone
	   ====================================================== */
	.hst-mobile-product-page .hst-mp-summary {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 12px 10px !important;
		border: 1px solid #dfe6ef !important;
		border-radius: 14px !important;
		background: #fff !important;
		box-shadow: 0 5px 18px rgba(8,41,87,.045) !important;
		text-align: center !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mp-badges {
		width: 100% !important;
		max-width: 100% !important;
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 5px !important;
	}

	.hst-mobile-product-page .hst-mp-stock,
	.hst-mobile-product-page .hst-mp-category {
		max-width: 100% !important;
		padding: 5px 8px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: 7px !important;
		font-size: 8.5px !important;
		font-weight: 900 !important;
		line-height: 1.3 !important;
		white-space: normal !important;
		text-align: center !important;
	}

	.hst-mobile-product-page .hst-mp-title {
		width: 100% !important;
		max-width: 100% !important;
		margin: 10px auto 5px !important;
		padding: 0 4px !important;
		display: block !important;
		color: #0b3d78 !important;
		font-size: clamp(16px, 4.6vw, 20px) !important;
		font-weight: 900 !important;
		line-height: 1.8 !important;
		text-align: center !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: anywhere !important;
	}

	.hst-mobile-product-page .hst-mp-price,
	.hst-mobile-product-page .hst-mp-price .amount {
		width: 100% !important;
		max-width: 100% !important;
		margin: 5px auto 8px !important;
		display: block !important;
		color: #ff6b00 !important;
		font-size: clamp(20px, 6vw, 26px) !important;
		font-weight: 900 !important;
		line-height: 1.5 !important;
		text-align: center !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}

	.hst-mobile-product-page .hst-mp-short {
		width: 100% !important;
		max-width: 100% !important;
		margin: 7px 0 9px !important;
		padding: 8px 9px !important;
		border-radius: 9px !important;
		color: #647186 !important;
		background: #f8fafc !important;
		font-size: 9.5px !important;
		line-height: 1.9 !important;
		text-align: center !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}

	.hst-mobile-product-page .hst-mp-short p {
		margin: 0 !important;
	}

	/* ======================================================
	   5. Quick specs — exactly two columns
	   ====================================================== */
	.hst-mobile-product-page .hst-mp-spec-grid {
		width: 100% !important;
		max-width: 100% !important;
		margin: 9px 0 !important;
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 6px !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mp-spec-card {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 78px !important;
		padding: 7px 5px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 4px !important;
		border: 1px solid #e2e8f0 !important;
		border-radius: 10px !important;
		background: #fbfcfe !important;
		text-align: center !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mp-spec-number {
		width: 25px !important;
		height: 25px !important;
		display: grid !important;
		place-items: center !important;
		border-radius: 7px !important;
		color: #ff6b00 !important;
		background: #fff1e7 !important;
		font-size: 9px !important;
		font-weight: 900 !important;
	}

	.hst-mobile-product-page .hst-mp-spec-card small,
	.hst-mobile-product-page .hst-mp-spec-card strong {
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		text-align: center !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}

	.hst-mobile-product-page .hst-mp-spec-card small {
		color: #7b8798 !important;
		font-size: 7.8px !important;
		line-height: 1.45 !important;
	}

	.hst-mobile-product-page .hst-mp-spec-card strong {
		color: #0b3d78 !important;
		font-size: 9.7px !important;
		line-height: 1.5 !important;
	}

	.hst-mobile-product-page .hst-mp-stock-line {
		width: 100% !important;
		max-width: 100% !important;
		margin: 7px 0 !important;
		display: block !important;
		font-size: 9.5px !important;
		font-weight: 800 !important;
		line-height: 1.6 !important;
		text-align: center !important;
		white-space: normal !important;
	}

	/* ======================================================
	   6. Cart — quantity + button stay inside
	   ====================================================== */
	.hst-mobile-product-page .hst-mp-cart,
	.hst-mobile-product-page .hst-mp-cart form.cart {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.hst-mobile-product-page .hst-mp-cart form.cart {
		display: grid !important;
		grid-template-columns: 62px minmax(0, 1fr) !important;
		gap: 6px !important;
		align-items: stretch !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mp-cart form.cart .quantity {
		width: 62px !important;
		max-width: 62px !important;
		margin: 0 !important;
		float: none !important;
	}

	.hst-mobile-product-page .hst-mp-cart form.cart .qty {
		width: 62px !important;
		max-width: 62px !important;
		height: 46px !important;
		margin: 0 !important;
		padding: 3px !important;
		border: 1px solid #d7dee8 !important;
		border-radius: 9px !important;
		text-align: center !important;
	}

	.hst-mobile-product-page .hst-mp-cart form.cart .single_add_to_cart_button {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 46px !important;
		margin: 0 !important;
		padding: 7px !important;
		float: none !important;
		border: 0 !important;
		border-radius: 9px !important;
		color: #fff !important;
		background: #ff6b00 !important;
		font-size: 10.5px !important;
		font-weight: 900 !important;
		line-height: 1.45 !important;
		text-align: center !important;
		white-space: normal !important;
	}

	.hst-mobile-product-page .hst-mp-consult {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 44px !important;
		margin: 6px 0 0 !important;
		padding: 7px 9px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		border: 1px solid #0b3d78 !important;
		border-radius: 9px !important;
		color: #0b3d78 !important;
		background: #fff !important;
		font-size: 10px !important;
		font-weight: 900 !important;
		text-align: center !important;
	}

	.hst-mobile-product-page .hst-mp-meta {
		width: 100% !important;
		max-width: 100% !important;
		margin: 8px 0 0 !important;
		padding: 8px 0 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 3px !important;
		border-top: 1px solid #edf0f4 !important;
		color: #7b8798 !important;
		font-size: 8.5px !important;
		text-align: center !important;
	}

	/* ======================================================
	   7. Trust benefits — EXACT 2 × 2
	   ====================================================== */
	.hst-mobile-product-page .hst-mp-trust {
		width: 100% !important;
		max-width: 100% !important;
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 6px !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mp-trust article {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 100px !important;
		margin: 0 !important;
		padding: 9px 5px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 5px !important;
		border: 1px solid #dfe6ef !important;
		border-radius: 11px !important;
		background: #fff !important;
		text-align: center !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mp-trust-icon {
		width: 32px !important;
		height: 32px !important;
		display: grid !important;
		place-items: center !important;
		color: #0b3d78 !important;
	}

	.hst-mobile-product-page .hst-mp-trust-icon svg {
		width: 29px !important;
		height: 29px !important;
	}

	.hst-mobile-product-page .hst-mp-trust article strong,
	.hst-mobile-product-page .hst-mp-trust article small {
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		text-align: center !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}

	.hst-mobile-product-page .hst-mp-trust article strong {
		color: #0b3d78 !important;
		font-size: 9.7px !important;
		line-height: 1.55 !important;
	}

	.hst-mobile-product-page .hst-mp-trust article small {
		color: #7b8798 !important;
		font-size: 7.7px !important;
		line-height: 1.55 !important;
	}

	/* ======================================================
	   8. Tabs — 2 × 2, no horizontal rail
	   ====================================================== */
	.hst-mobile-product-page .hst-mp-tabs {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 6px !important;
		border: 1px solid #dfe6ef !important;
		border-radius: 13px !important;
		background: #fff !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mp-tab-buttons {
		width: 100% !important;
		max-width: 100% !important;
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 5px !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mp-tab-buttons button {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 42px !important;
		margin: 0 !important;
		padding: 6px 4px !important;
		border: 0 !important;
		border-radius: 8px !important;
		color: #0b3d78 !important;
		background: #f4f7fb !important;
		font-family: inherit !important;
		font-size: 9px !important;
		font-weight: 900 !important;
		line-height: 1.45 !important;
		text-align: center !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}

	.hst-mobile-product-page .hst-mp-tab-buttons button.is-active {
		color: #fff !important;
		background: #0b3d78 !important;
	}

	.hst-mobile-product-page .hst-mp-tab-panel {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 6px 0 0 !important;
		padding: 9px 7px !important;
		overflow: hidden !important;
	}

	.hst-mobile-product-page .hst-mp-tab-panel[hidden] {
		display: none !important;
	}

	.hst-mobile-product-page .hst-mp-tab-panel *,
	.hst-mobile-product-page .hst-mp-description * {
		max-width: 100% !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: normal !important;
	}

	.hst-mobile-product-page .hst-product-spec-box {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.hst-mobile-product-page .hst-product-spec-row {
		width: 100% !important;
		max-width: 100% !important;
		padding: 9px 2px !important;
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 2px !important;
	}

	/* ======================================================
	   9. Fixed bottom actions — inside safe width
	   ====================================================== */
	body.single-product .hst-mobile-product-bar {
		position: fixed !important;
		z-index: 9998 !important;
		right: 8px !important;
		left: 8px !important;
		bottom: max(7px, env(safe-area-inset-bottom)) !important;
		width: auto !important;
		max-width: calc(100vw - 16px) !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, .75fr) !important;
		gap: 7px !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	body.single-product .hst-mobile-product-bar button,
	body.single-product .hst-mobile-product-bar a {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 47px !important;
		margin: 0 !important;
		padding: 7px 5px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: 11px !important;
		font-size: 10px !important;
		font-weight: 900 !important;
		line-height: 1.4 !important;
		text-align: center !important;
		white-space: normal !important;
	}

	/* footer follows after tabs; no related product cards on this mobile page */
	body.single-product .related,
	body.single-product .upsells {
		display: none !important;
	}
}

@media (max-width: 380px) {
	body.single-product .hst-shop-main > .hst-container {
		padding-right: 6px !important;
		padding-left: 6px !important;
	}

	.hst-mobile-product-page {
		gap: 7px !important;
	}

	.hst-mobile-product-page .hst-mp-summary {
		padding-right: 8px !important;
		padding-left: 8px !important;
	}

	.hst-mobile-product-page .hst-mp-title {
		font-size: 15.5px !important;
	}

	.hst-mobile-product-page .hst-mp-trust article {
		min-height: 96px !important;
	}
}