/**
 * Single Product Page Styles - Spec Sheet Design
 * Extracted for better performance and caching
 */

/* Reset: remove custom gallery slide overrides to use WooCommerce defaults */

/* Hide duplicate elements outputted by WooCommerce/Astra hooks (already in our custom template) */
.cnx-product-spec .woocommerce-product-details__short-description,
.cnx-product-spec .product_title.entry-title,
.cnx-product-spec .single-product-category,
.cnx-product-spec > .woocommerce-breadcrumb,
.cnx-product-screen > .woocommerce-breadcrumb {
	display: none !important;
}

/* Gallery Thumbnails Only */
.product-image-main .flex-control-thumbs,
.product-image-main .flex-control-nav {
	display: flex !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	margin-top: 1rem !important;
	padding: 0 !important;
	list-style: none !important;
}

.product-image-main .flex-control-thumbs li,
.product-image-main .flex-control-nav li {
	margin: 0 !important;
	line-height: 0 !important;
}

.product-image-main .flex-control-thumbs img,
.product-image-main .flex-control-nav img {
	border: 2px solid #ddd !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	width: 60px !important;
	height: 60px !important;
	object-fit: cover !important;
	opacity: 0.6 !important;
}

.product-image-main .flex-control-thumbs li.flex-active img,
.product-image-main .flex-control-nav li.flex-active img,
.product-image-main .flex-control-thumbs img:hover,
.product-image-main .flex-control-nav img:hover {
	border-color: #0066cc !important;
	opacity: 1 !important;
	transform: scale(1.05) !important;
}

/* Hover effect on container */
.product-image-main > div {
	transition: transform 0.2s ease;
}
.product-image-main > div:hover {
	transform: scale(1.01);
}

/* CTA Button Hover: darker for emphasis without size change */
#open-message-modal:hover {
	background: #d9d9d9 !important;
	border-color: #0066cc !important;
	color: #111 !important;
}

/* WooCommerce buttons: GPU-accelerated hover only */
.product_type_simple,
.button.product_type_simple {
	transition: transform 0.2s ease !important;
}
.product_type_simple:hover,
.button.product_type_simple:hover {
	transform: translateY(-1px) !important;
}

/* Gallery Row Styles - Overflow Scrollable */
.product-gallery-row .gallery-row {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	touch-action: pan-x;
}
/* Hide scrollbar but keep functionality */
.product-gallery-row .gallery-row::-webkit-scrollbar {
	display: none;
}
.product-gallery-row .gallery-row {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.product-gallery-row .gallery-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
	width: 180px;
	max-width: 180px;
	overflow: hidden;
	cursor: zoom-in;
	transition: transform 0.2s ease;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.product-gallery-row .gallery-card img {
	width: 100%;
	height: auto;
	max-width: 100%;
}
.product-gallery-row .gallery-card img {
	border-radius: 14px;
}
.product-gallery-row .gallery-card:hover {
	transform: translateY(-2px) scale(1.02);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
	.product-hero {
		padding: 1.5rem 1.5rem !important;
	}
	.hero-container {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
	}
	.product-image-main {
		order: 0 !important;
		padding-top: 0.05rem !important;
		padding-bottom: 0.05rem !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	.product-image-main > div {
		width: 100% !important;
		height: auto !important;
		max-height: 400px !important;
		overflow: hidden !important;
	}

	/* Override inline image sizing to fill frame properly */
	.product-image-main img {
		width: 100% !important;
		height: auto !important;
		max-height: 400px !important;
		object-fit: cover !important;
		border-radius: 14px !important;
	}

	.product-info {
		order: 1 !important;
	}
	.product-hero h1 {
		font-size: 1.6rem !important;
	}

	/* Mobile: Gallery cards smaller */
	.product-gallery-row .gallery-card {
		width: 150px;
		max-width: 150px;
	}
	/* Technical Specifications - 2 columns on mobile */
	.product-specifications .spec-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.75rem !important;
	}
	.product-specifications .spec-grid > div {
		padding: 0.75rem 1rem !important;
	}
	.product-specifications .spec-grid h3 {
		font-size: 0.75rem !important;
	}
	.product-specifications .spec-grid p {
		font-size: 0.9rem !important;
	}
}