/**
 * Product single page — mobile-first layout overrides.
 * Loaded after frontend.css on comparix_product singular views.
 */

article.cx-product {
	--cx-product-gutter: clamp(16px, 4vw, 24px);
	--cx-product-section-gap: 12px;
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: clip !important;
}

/* Full-bleed hero without horizontal scroll */
article.cx-product .cx-hero {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-bottom: clamp(28px, 6vw, 44px) !important;
}

article.cx-product .cx-hero-inner {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 0 var(--cx-product-gutter) !important;
}

article.cx-product .cx-body {
	width: 100% !important;
	max-width: 100% !important;
	margin: -20px auto 0 !important;
	padding: 0 var(--cx-product-gutter) calc(100px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Breadcrumbs — scroll on small screens, no overflow */
article.cx-product .cx-breadcrumbs,
article.cx-product .cx-breadcrumbs-v2 {
	font-size: 11px !important;
	color: rgba(255, 255, 255, 0.55) !important;
	padding: 10px 0 0 !important;
	margin: 0 0 12px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	max-width: 100%;
}

article.cx-product .cx-breadcrumbs::-webkit-scrollbar,
article.cx-product .cx-breadcrumbs-v2::-webkit-scrollbar {
	display: none;
}

article.cx-product .cx-breadcrumbs a,
article.cx-product .cx-breadcrumbs-v2 .cx-bc-item a {
	color: rgba(255, 255, 255, 0.78) !important;
	text-decoration: none;
	white-space: nowrap;
}

article.cx-product .cx-breadcrumbs-v2 .cx-bc-list {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 2px 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: min-content;
}

article.cx-product .cx-breadcrumbs-v2 .cx-bc-item {
	white-space: nowrap;
	flex-shrink: 0;
}

article.cx-product .cx-breadcrumbs-v2 .cx-bc-item:last-child span[aria-current] {
	display: inline-block;
	max-width: min(42vw, 160px);
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
	color: rgba(255, 255, 255, 0.92) !important;
}

article.cx-product .cx-breadcrumbs-v2 .cx-bc-sep {
	color: rgba(255, 255, 255, 0.35) !important;
	flex-shrink: 0;
}

/* Hero header alignment */
article.cx-product .cx-hero-title-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px !important;
}

article.cx-product .cx-hero-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
	width: 100%;
}

article.cx-product .cx-gallery-wrap {
	width: 100% !important;
	max-width: 100% !important;
}

/* Prominent product image on mobile */
article.cx-product .cx-gallery {
	border-radius: 16px !important;
	width: 100% !important;
}

article.cx-product .cx-gallery-slide {
	min-height: clamp(280px, 72vw, 360px) !important;
	max-height: none !important;
	padding: clamp(16px, 4vw, 28px) !important;
}

article.cx-product .cx-gallery-slide img {
	max-height: clamp(240px, 64vw, 320px) !important;
	width: auto !important;
	max-width: 100% !important;
}

article.cx-product .cx-hero-info {
	width: 100% !important;
	padding: 0 !important;
}

article.cx-product .cx-title {
	font-size: clamp(22px, 6.5vw, 32px) !important;
	line-height: 1.12 !important;
	letter-spacing: -0.025em !important;
}

article.cx-product .cx-brand {
	font-size: 14px !important;
	margin-bottom: 14px !important;
}

article.cx-product .cx-hero-meta {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 12px 16px !important;
	width: 100%;
}

article.cx-product .cx-price-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}

article.cx-product .cx-price-now {
	font-size: clamp(24px, 6vw, 30px) !important;
	letter-spacing: -0.02em;
}

/* Spec chips — consistent sizing */
article.cx-product .cx-quick-specs {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-top: 14px !important;
	width: 100%;
}

article.cx-product .cx-qbadge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 32px !important;
	padding: 6px 12px !important;
	font-size: 11px !important;
	line-height: 1.2 !important;
	border-radius: 100px !important;
	white-space: normal !important;
	text-align: center;
}

article.cx-product .cx-qicon {
	flex-shrink: 0;
}

/* Badges & tags */
article.cx-product .cx-type-badge,
article.cx-product .cx-tag {
	border-radius: 100px !important;
	font-weight: 600 !important;
}

article.cx-product .cx-tags {
	gap: 6px !important;
	margin-top: 4px;
}

/* Content sections — unified spacing */
article.cx-product .cx-section {
	padding: clamp(16px, 4vw, 20px) !important;
	margin-bottom: var(--cx-product-section-gap) !important;
	border-radius: 16px !important;
	width: 100%;
	max-width: 100%;
}

article.cx-product .cx-sh {
	font-size: clamp(16px, 4.2vw, 18px) !important;
	margin-bottom: 14px !important;
}

article.cx-product .cx-glance-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 8px !important;
}

article.cx-product .cx-glance-pill {
	padding: 12px 8px !important;
}

article.cx-product .cx-pc-grid {
	grid-template-columns: 1fr !important;
	gap: 10px !important;
}

article.cx-product .cx-offer {
	flex-wrap: wrap;
	padding: 12px 14px !important;
	border-radius: 12px !important;
}

article.cx-product .cx-offer-go {
	padding: 8px 14px !important;
	font-size: 12px !important;
}

/* Sticky CTA + bottom nav clearance */
.cx-nav-bottom-bar article.cx-product .cx-body,
body.cx-nav-bottom-bar article.cx-product .cx-body {
	padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
}

.cx-sticky-cta {
	padding: 10px var(--cx-product-gutter, 16px) !important;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

body.cx-nav-bottom-bar .cx-sticky-cta {
	bottom: calc(var(--cx-nav-bottom-h, 56px) + env(safe-area-inset-bottom, 0px));
}

/* Price intelligence block mobile */
article.cx-product .cx-price-intel .cx-pi-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

/* Very small phones */
@media (max-width: 359px) {
	article.cx-product {
		--cx-product-gutter: 12px;
	}

	article.cx-product .cx-score-ring {
		width: 52px !important;
		height: 52px !important;
	}

	article.cx-product .cx-score-num {
		font-size: 18px !important;
	}
}

/* Standard mobile */
@media (min-width: 360px) and (max-width: 430px) {
	article.cx-product .cx-glance-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 431px) and (max-width: 639px) {
	article.cx-product .cx-glance-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	article.cx-product .cx-pc-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* Tablet */
@media (min-width: 640px) {
	article.cx-product .cx-hero-inner {
		max-width: 960px !important;
	}

	article.cx-product .cx-body {
		max-width: 900px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	article.cx-product .cx-hero-title-row {
		align-items: center;
		text-align: center;
	}

	article.cx-product .cx-hero-grid {
		align-items: center;
	}

	article.cx-product .cx-hero-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	article.cx-product .cx-hero-meta,
	article.cx-product .cx-quick-specs,
	article.cx-product .cx-tags {
		justify-content: center;
	}

	article.cx-product .cx-glance-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* Desktop */
@media (min-width: 1024px) {
	article.cx-product .cx-hero-inner {
		max-width: 1040px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	article.cx-product .cx-body {
		max-width: 880px !important;
	}

	article.cx-product .cx-glance-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}

	article.cx-product .cx-hero-grid {
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 28px !important;
	}

	article.cx-product .cx-gallery-wrap {
		flex: 0 0 46% !important;
		max-width: 460px !important;
	}

	article.cx-product .cx-hero-info {
		flex: 1 !important;
		align-items: flex-start !important;
	}

	article.cx-product .cx-hero-title-row {
		align-items: flex-start;
		text-align: left;
		width: 100%;
	}

	article.cx-product .cx-hero-meta,
	article.cx-product .cx-quick-specs,
	article.cx-product .cx-tags {
		justify-content: flex-start;
	}

	article.cx-product .cx-title {
		font-size: 36px !important;
	}
}