/*  * Version: 1.8 */

/* Flexbox for Centered Rows */
 .row-pk-products-grid {
	 display: flex;
	 flex-direction: column; /* Align elements in a column */
	 align-items: center; /* Center-align all children horizontally */
	 text-align: center; /* Ensure text inside elements is also centered */
	 justify-content: center; /* Center-align grid items horizontally */
	 gap: 25px; /* Adds spacing between rows */
 }
 
	.pk-products-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 25px;
		margin: 0 auto;
		padding: 20px 50px;
	}

		.row-pk-products-grid h2 {
			margin: 0 0 20px 0; /* Adds spacing below header */
		}


		.pk-product-item {
			flex: 0 0 calc((100% - 4 * 25px) / 5); /* Correct calculation for 5 items per row */
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			box-sizing: border-box; /* Ensure consistent sizing */
		}
		
			.pk-product-image {
				width: 100%;
				height: auto;
				margin-bottom: 10px;
				opacity: 0; /* Initial state for fade-in */
				transition: opacity 0.5s ease-in-out; /* Smooth fade-in effect */
				background-color: #d8d8d8; /* Placeholder background color */
				display: flex; /* Ensure the placeholder fills the wrapper */
				align-items: center; /* Center the image inside */
				justify-content: center; /* Center the image inside */
				overflow: hidden; /* Ensure the zoom effect stays within the bounds of the image */
				position: relative; /* Required for positioning during zoom */
			}
			
			.pk-product-image.loaded {
				opacity: 1; /* Fully visible after loading */
			}
			
				.pk-product-image img {
					transition: transform 0.5s ease; /* Smooth transition for zoom */
				}
				
				.pk-product-image:hover img {
					transform: scale(1.1); /* Zoom the image to 110% of its original size */
				}
			
			.pk-product-name {
				margin-bottom: 5px;
				font-size: 15px;
				font-weight: 400;
				line-height: 1.5em;
				letter-spacing: 0.05em;
				text-transform: uppercase;
				font-family: inherit;
			}
			
			.pk-product-meta {
				font-size: 14px;
				color: #555;
			}
			
			.pk-product-meta span.pk-product-format,
			.pk-product-meta span.pk-product-dimensions {
				display: inline-block;
				margin-right: 5px;
			}
			
			.pk-product-price {
				font-size: 14px;
				color: #333;
				margin-top: 5px;
				font-weight: 400;
				text-transform: uppercase;
				font-family: inherit;
			}




		/* Reset any conflicting styles */
		.pk-products-load-more-link,
		.pk-products-final-link {
			all: unset; /* Reset inherited or conflicting styles */
			padding: 1em 1.75em;
			font-size: 15px;
			font-weight: 300;
			line-height: 1.5em;
			letter-spacing: 0.05em;
			text-transform: uppercase;
			font-family: inherit;
			-webkit-appearance: none;
			transition: all 0.5s ease-out;
			border-style: solid;
			border-width: 1px;
			border-radius: 0;
			max-width: fit-content; /* Ensures the button wraps to its content size */
			display: inline-block; /* Prevents full-width behavior */
			margin: 25px auto 0; /* Centers the button horizontally */
			text-align: center; /* Ensures text is centered inside */
			cursor: pointer;
			color: black;
			background-color: transparent;
			border-color: black;
		}
		
		.pk-products-load-more-link:hover,
		.pk-products-final-link:hover {
			color: white;
			background-color: black;
		}
		
		/* .pk-products-final-link {
			background-color: rgba(0,255,0,.1);
		}
		
		.pk-products-final-link:hover {
			background-color: rgba(0,255,0,.2);
		} */

/* Responsive Adjustments */

/* Default: 5 items per row */
.pk-product-item {
	flex: 0 0 calc((100% - 4 * 25px) / 5);
}

/* 4 items per row: Up to 1200px */
@media (max-width: 1200px) {
	.pk-product-item {
		flex: 0 0 calc((100% - 3 * 25px) / 4);
	}
}

/* 3 items per row: Up to 1080px */
@media (max-width: 1080px) {

	.pk-products-grid {
		padding: 20px 30px;
	}
	
	.pk-product-item {
		flex: 0 0 calc((100% - 2 * 25px) / 3);
	}
	
}

/* 2 items per row: Up to 780px */
@media (max-width: 780px) {
	.pk-product-item {
		flex: 0 0 calc((100% - 25px) / 2);
	}
}

/* 1 item per row: Up to 480px */
@media (max-width: 480px) {

	.pk-products-grid {
		padding: 20px 25px;
	}	
	
	.pk-product-item {
		flex: 0 0 100%;
	}
	
	.pk-products-load-more-link {
		padding: .75em 1.5em;
		font-size: 13px;
		color: white;
		background-color: black;
	}
	
	.pk-products-load-more-link:hover {
		color: black;
		background-color: transparent;
	}

	
}