/* Woo Mosaic — Lightroom-style justified rows. Zero gaps, no cropping. */

.woo-mosaic {
	position: relative;
	width: 100%;
	margin: 16px 0;
	padding: 0;
	background: #111;
	font-size: 0; /* eliminates any inline whitespace before JS positions tiles */
	line-height: 0;
	min-height: 240px;
}

/* Pre-JS fallback: inline-block flow so images appear at natural ratio.
   Once JS runs, tiles become absolutely positioned and this is irrelevant. */
.woo-mosaic__tile {
	display: inline-block;
	vertical-align: top;
	position: relative;
	overflow: hidden;
	height: 240px;
	background: #111;
	font-size: 14px;
	line-height: 1.4;
}

.woo-mosaic.is-ready .woo-mosaic__tile {
	display: block;
	position: absolute;
	height: auto; /* JS sets explicit width + height */
}

.woo-mosaic__tile:hover { z-index: 2; }

/* Drop-shadow variant — let the page background show through gaps so shadows are visible. */
.woo-mosaic--shadow { background: transparent; }
.woo-mosaic--shadow .woo-mosaic__tile {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	transition: box-shadow .25s ease;
}
.woo-mosaic--shadow .woo-mosaic__tile:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.woo-mosaic__link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.woo-mosaic__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* never crop the product image */
	object-position: center;
	transition: filter .35s ease, transform .5s ease;
}

.woo-mosaic__tile:hover .woo-mosaic__img,
.woo-mosaic__tile.is-revealed .woo-mosaic__img {
	filter: brightness(.88);
}

.woo-mosaic__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: #e63946;
	color: #fff;
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 3px 7px;
	border-radius: 3px;
	z-index: 2;
}

.woo-mosaic__badge--reserved {
	background: #1d3557;
}

/* Dim reserved tiles slightly so they read as unavailable. */
.woo-mosaic__tile.is-reserved .woo-mosaic__img {
	filter: grayscale(.35) brightness(.92);
}

.woo-mosaic__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 12px 14px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 65%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	transform: translateY(6px);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}

.woo-mosaic__tile:hover .woo-mosaic__overlay,
.woo-mosaic__tile:focus-within .woo-mosaic__overlay,
.woo-mosaic__tile.is-revealed .woo-mosaic__overlay {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.woo-mosaic__title {
	margin: 0 0 3px;
	font-size: 14px;
	line-height: 1.25;
	font-weight: 600;
	color: #fff;
}

.woo-mosaic__price {
	font-size: 13px;
	margin-bottom: 8px;
	opacity: .95;
}

.woo-mosaic__price ins { text-decoration: none; }
.woo-mosaic__price del { opacity: .65; margin-right: 6px; }

.woo-mosaic__add {
	display: inline-block;
	background: #fff;
	color: #111;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 7px 11px;
	border-radius: 4px;
	border: 0;
	text-decoration: none;
	transition: background .2s ease;
}

.woo-mosaic__add:hover { background: #f0f0f0; }
.woo-mosaic__add.added { display: none; }
.woo-mosaic__add.loading { opacity: .7; }

.woo-mosaic__empty {
	padding: 24px;
	text-align: center;
	color: #666;
}

.woo-mosaic-page-title {
	margin: 24px 0 12px;
	text-align: center;
}

@media (max-width: 800px) {
	/* Drop the overlay entirely on mobile — tiles are pure images, taps go straight to the product. */
	.woo-mosaic__overlay { display: none; }
	.woo-mosaic__tile:hover .woo-mosaic__img,
	.woo-mosaic__tile.is-revealed .woo-mosaic__img { filter: none; }
}