/*
 * REMEDA - product image gallery.
 *
 * One big photo with a strip of thumbnails under it. Used by every product
 * page; assets/js/product-thumbnails.js fills the strip.
 *
 * This is a separate file rather than an addition to brand.css on purpose.
 * netlify.toml serves /assets/css with a day-long cache, so appending to a
 * file every page already holds would leave returning visitors with a strip
 * of unstyled full-size images until their copy expired. A new filename is
 * a URL nobody has cached.
 */

.product-gallery {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.product-image-large {
	width: 400px;
	max-width: 100%;
	text-align: center;
	margin-bottom: 15px;
}

.product-image-large img {
	width: 400px;
	max-width: 100%;
	height: 400px;
	object-fit: contain;
}

.product-thumbnails-wrapper {
	width: 400px;
	max-width: 100%;
}

/* Wraps rather than scrolls. Eko krpe already has seven photos, and a
   scrolling strip hides the later ones behind a scrollbar sitting directly
   under the picture; a second row shows every thumbnail at once. */
.product-thumbnails {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 5px 0;
	justify-content: center;
}

.thumbnail-item {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.thumbnail-item:hover {
	border-color: #999;
}

.thumbnail-item.active {
	border-color: var(--r-amber-text);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.thumbnail-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

@media (max-width: 768px) {
	.product-thumbnails-wrapper {
		width: 100%;
		max-width: 100%;
	}

	.thumbnail-item {
		width: 70px;
		height: 70px;
	}
}

@media (max-width: 600px) {
	.product-image-large img {
		width: 300px;
		height: 300px;
	}
}