/**
 * Mobile Product Page Optimization - Build 005.29
 * Optimizes single product page for mobile devices (80% of traffic)
 * 
 * Requirements:
 * 1. Product title (H1) appears FIRST on mobile
 * 2. Main product image with swipe gallery
 * 3. Hide thumbnail gallery on mobile
 * 4. Fixed aspect ratio for main image container
 */

/* ============================================
   1. PRODUCT TITLE - MOVE TO TOP ON MOBILE
   ============================================ */

@media (max-width: 767px) {
	
	/* Container for single product */
	.single-product .product {
		display: flex;
		flex-direction: column;
	}
	
	/* Product title - display FIRST (order: -1) */
	.single-product .product .product_title {
		order: -2; /* Before everything */
		margin-bottom: 15px;
		font-size: 24px;
		line-height: 1.3;
		padding: 0 15px;
	}
	
	/* Images section - display SECOND (order: 0) */
	.single-product .product .woocommerce-product-gallery {
		order: -1; /* After title, before summary */
		margin-bottom: 20px;
	}
	
	/* Summary section - display THIRD (default order) */
	.single-product .product .summary {
		order: 0;
	}
	
}

/* ============================================
   2. FIXED IMAGE CONTAINER SIZE
   ============================================ */

@media (max-width: 767px) {
	
	/* Main image container - fixed aspect ratio */
	.single-product .woocommerce-product-gallery {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	
	/* Main image wrapper - fixed square aspect ratio */
	.single-product .woocommerce-product-gallery__wrapper {
		position: relative;
		width: 100%;
		padding-bottom: 100%; /* Square aspect ratio (1:1) */
		overflow: hidden;
		background: #f8f8f8;
	}
	
	/* Main image - fill container */
	.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
		width: 100%;
		height: 100%;
		object-fit: contain; /* Maintain aspect ratio, fit inside */
		object-position: center;
	}
	
}

/* ============================================
   3. HIDE THUMBNAIL GALLERY ON MOBILE
   ============================================ */

@media (max-width: 767px) {
	
	/* Hide thumbnail gallery */
	.single-product .flex-control-thumbs,
	.single-product .woocommerce-product-gallery__thumbnails,
	.single-product .product-thumbnails {
		display: none !important;
	}
	
}

/* ============================================
   4. SWIPE GALLERY IMPROVEMENTS
   ============================================ */

@media (max-width: 767px) {
	
	/* Enable smooth scrolling for swipe */
	.single-product .woocommerce-product-gallery__wrapper {
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
	}
	
	/* Gallery navigation arrows - make more visible */
	.single-product .flex-direction-nav a {
		width: 40px;
		height: 40px;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0.8;
	}
	
	.single-product .flex-direction-nav a:hover,
	.single-product .flex-direction-nav a:focus {
		opacity: 1;
		background: rgba(0, 0, 0, 0.7);
	}
	
	/* Gallery dots/bullets - make more visible */
	.single-product .flex-control-nav {
		bottom: 10px;
		z-index: 10;
	}
	
	.single-product .flex-control-nav li a {
		width: 10px;
		height: 10px;
		background: rgba(255, 255, 255, 0.5);
		border: 2px solid rgba(0, 0, 0, 0.3);
	}
	
	.single-product .flex-control-nav li a.flex-active {
		background: rgba(255, 255, 255, 1);
		border-color: rgba(0, 0, 0, 0.5);
	}
	
}

/* ============================================
   5. ZOOM ICON - HIDE OR ADJUST ON MOBILE
   ============================================ */

@media (max-width: 767px) {
	
	/* Zoom icon - optional: hide or make smaller */
	.single-product .woocommerce-product-gallery__trigger {
		width: 30px;
		height: 30px;
		top: 10px;
		right: 10px;
		opacity: 0.7;
	}
	
	.single-product .woocommerce-product-gallery__trigger:hover {
		opacity: 1;
	}
	
}

/* ============================================
   6. PRODUCT META - OPTIMIZE SPACING
   ============================================ */

@media (max-width: 767px) {
	
	/* Product summary - better spacing */
	.single-product .summary {
		padding: 0 15px;
	}
	
	/* Price - make more prominent */
	.single-product .summary .price {
		font-size: 28px;
		margin-bottom: 15px;
	}
	
	/* Add to cart button - full width on mobile */
	.single-product .summary .cart button.single_add_to_cart_button {
		width: 100%;
		padding: 15px;
		font-size: 16px;
	}
	
}

/* ============================================
   7. ALTERNATIVE: LANDSCAPE ASPECT RATIO
   ============================================ */

/* Uncomment this if you prefer 4:3 aspect ratio instead of square */
/*
@media (max-width: 767px) {
	.single-product .woocommerce-product-gallery__wrapper {
		padding-bottom: 75%; 
	}
}
*/

/* ============================================
   8. ALTERNATIVE: WIDER ASPECT RATIO (16:9)
   ============================================ */

/* Uncomment this if you prefer 16:9 aspect ratio */
/*
@media (max-width: 767px) {
	.single-product .woocommerce-product-gallery__wrapper {
		padding-bottom: 56.25%; 
	}
}
*/

/* ============================================
   9. TABLET OPTIMIZATION (768px - 1024px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
	
	/* On tablets, show thumbnails but in horizontal layout */
	.single-product .flex-control-thumbs,
	.single-product .woocommerce-product-gallery__thumbnails {
		display: flex !important;
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px 0;
	}
	
	.single-product .flex-control-thumbs li,
	.single-product .woocommerce-product-gallery__thumbnails .thumbnail {
		flex: 0 0 auto;
		width: 80px;
		height: 80px;
		margin: 0 5px;
	}
	
}

/* ============================================
   10. PERFORMANCE OPTIMIZATION
   ============================================ */

@media (max-width: 767px) {
	
	/* GPU acceleration for smooth scrolling */
	.single-product .woocommerce-product-gallery__wrapper {
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		will-change: transform;
	}
	
	/* Optimize image rendering */
	.single-product .woocommerce-product-gallery__image img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
	
}