/**
 * Products Section Styles
 *
 * @package Bocian
 * @since 2.0.0
 */

/* ============================================
   FULLPAGE.JS LAZY LOADING INTEGRATION
   ============================================ */

/* Image lazy loading states */
img[data-src] {
	transition: opacity 0.3s ease-in-out;
	opacity: 0;
}

img[data-src].loaded {
	opacity: 1;
}

/* Background lazy loading states */
[data-background] {
	transition: none !important;
	opacity: 1;
}

[data-background-loaded='true'] {
	opacity: 1 !important;
}

/* Product view background transitions */
.product-display-background {
	transition: none !important;
}

/* Corner elements lazy loading */
.corner-element img[data-src] {
	transition: opacity 0.3s ease-in-out;
	opacity: 1;
}

/* Product bottle lazy loading */
.product-bottle[data-src] {
	transition: opacity 0.3s ease-in-out;
}

/* ============================================
   SECTION BACKGROUND & TRANSITIONS
   ============================================ */

/* Smooth background changes */
.products-section {
	transition: background-color 0.2s ease-in-out;
}

/* Background - no transitions to prevent foreground image animation */
.product-display-background {
	/* Removed transitions to prevent foreground image distortion */
}

/* ============================================
   CATEGORY NAVIGATION BUTTONS
   ============================================ */

.category-btn.active {
	background: rgba(255, 255, 255, 0.5);
	border-color: rgba(255, 255, 255, 0.8);
}

.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
	display: none;
}

/* ============================================
   CORNER ELEMENTS ANIMATIONS
   ============================================ */

.corner-element {
	opacity: 0;
	transform: scale(1) rotate(0deg);
	transition: opacity 0.3s ease-in-out;
}

.product-view.active .corner-element {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	transition: opacity 0.3s ease-in-out;
}

/* Corner element animation states */
.product-view:not(.active) .corner-element {
	opacity: 0;
	transform: scale(1) rotate(0deg);
	transition: opacity 0.3s ease-in-out;
}

.product-view.active .corner-element {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	transition: opacity 0.3s ease-in-out;
}

/* ============================================
   PRODUCT BOTTLE STYLES & ANIMATIONS
   ============================================ */

/* Enhanced product bottle - keep existing transitions */
.product-bottle {
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
	transition:
		opacity 0.7s ease-in-out,
		transform 0.7s ease-in-out,
		filter 0.3s ease-in-out;
	opacity: 1;
	transform: translateY(0);
}

.product-bottle:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.4));
}

/* Bottle animation states */
.product-view:not(.active) .product-bottle {
	opacity: 0;
	transform: translateY(20px);
}

.product-view.active .product-bottle {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================
   PRODUCT VIEW VISIBILITY STATES
   ============================================ */

/* Product view transitions - removed to prevent foreground image distortion */
.product-view {
	/* No transitions to prevent foreground image stretching */
}

.product-view:not(.active) {
	opacity: 0 !important;
	visibility: hidden !important;
}

.product-view.active {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ============================================
   FOREGROUND OVERLAY
   ============================================ */

/* Enhanced foreground overlay - no animations */
.foreground-overlay {
	/* No transitions or animations on foreground elements */
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Mobile viewport fixes */
@media (max-width: 1023px) {
	#products {
		height: 100vh !important;
		height: 100dvh !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
	}

	.product-bottle {
		max-width: 280px !important;
	}

	/* Corner elements sizing for mobile */
	.corner-element {
		width: 40vw !important;
		height: 40vw !important;
		max-width: 300px !important;
		max-height: 300px !important;
	}
}

/* ============================================
   DESKTOP RESPONSIVE STYLES
   ============================================ */

/* Desktop bottle sizing - make it much larger */
@media (min-width: 1024px) {
	.product-bottle {
		max-width: 450px !important;
		max-height: none !important;
		min-height: 400px !important;
	}

	/* Mobile element spacing to prevent overlap */
	.category-menu-container {
		height: 40px !important;
		margin-bottom: 0px;
	}

	#mobileProductTitle {
		margin-top: 0px;
		margin-bottom: 20px;
	}

	.mobile-product-card-global {
		position: relative !important;
		bottom: auto !important;
		z-index: 500 !important;
		left: auto !important;
		right: auto !important;
		max-height: none !important;
	}

	#global-mobile-card {
		transition:
			max-height 0.3s ease-in-out,
			opacity 0.3s ease-in-out !important;
		overflow: hidden !important;
	}

	.global-toggle-btn {
		position: relative !important;
		bottom: auto !important;
		z-index: 600 !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Disable corner element scaling animations on mobile */
	.corner-element {
		transform: none !important;
		transition: opacity 0.3s ease-in-out;
	}
}

/* ============================================
   IOS SAFARI SPECIFIC FIXES
   ============================================ */

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
	#products {
		height: 100vh !important;
		height: -webkit-fill-available !important;
		min-height: 100vh !important;
		min-height: -webkit-fill-available !important;
	}
}