/* Restore the classic two-column product layout using flexbox instead of
   float. Our .lz-gallery replaces WooCommerce's own gallery markup, and the
   theme's float/clear rules for .images/.summary behaved inconsistently
   with the swapped-in markup in a way that was hard to pin down remotely —
   flex children ignore float/clear entirely, which sidesteps the problem.
   luzrosa-gallery.js wraps .images + .summary in .lz-product-top at runtime. */
.lz-product-top{
	display:flex!important;
	flex-wrap:wrap!important;
	gap:0 4%;
	align-items:flex-start;
}
/* Widths matched to the reference site (enfermeraenapuros.com): its
   product-single__wrapper--grid computes to ~76% media / ~24% info, not an
   even 50/50 — the gallery dominates and the buy panel reads as a sidebar. */
.lz-product-top > .images{
	float:none!important;
	clear:none!important;
	width:65%!important;
	flex:0 0 65%!important;
	margin:0!important;
}
.lz-product-top > .summary{
	float:none!important;
	clear:none!important;
	width:31%!important;
	flex:0 0 31%!important;
	margin:0!important;
}
@media(max-width:768px){
	.lz-product-top > .images,
	.lz-product-top > .summary{
		flex:0 0 100%!important;
		width:100%!important;
	}
}

/* Luzrosa — simple equal-weight product gallery (no single "featured" photo).
   Replaces the plugin slider entirely: plain CSS grid + a tiny click-to-enlarge
   overlay, no slider library, so there's nothing that depends on JS-computed
   pixel widths at load time. */
.lz-gallery{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:0px;
	margin:0 0 20px;
}
.lz-gallery-item{
	display:block;
	position:relative;
	aspect-ratio:1/1;
	border-radius:10px;
	overflow:hidden;
	background:#f5e6eb;
	border:1px solid #ead9d8;
	cursor:zoom-in;
	padding:0;
}
.lz-gallery-item img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .25s ease;
}
.lz-gallery-item:hover img{
	transform:scale(1.04);
}

/* Video card: same size/style as a photo card, plus a play badge overlay. */
.lz-gallery-item--video::before{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(59,36,50,.32);
	z-index:1;
}
.lz-play-badge{
	position:absolute;
	inset:0;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
}
.lz-play-badge::after{
	content:"";
	width:0;
	height:0;
	margin-left:4px;
	border-style:solid;
	border-width:12px 0 12px 20px;
	border-color:transparent transparent transparent #fff;
	filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}

/* Hover preview: muted autoplay right in the grid cell, above the thumbnail
   and its dark overlay/badge. pointer-events:none so clicks still reach the
   <a> underneath and open the full lightbox with sound. */
.lz-hover-preview{
	position:absolute;
	inset:0;
	z-index:4;
	width:100%;
	height:100%;
	border:0;
	pointer-events:none;
}

.lz-lightbox{
	position:fixed;
	inset:0;
	z-index:9999;
	background:rgba(59,36,50,.9);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
}
.lz-lightbox[hidden]{display:none}
.lz-lightbox img{
	max-width:min(900px,92vw);
	max-height:88vh;
	object-fit:contain;
	border-radius:8px;
}
.lz-lightbox img[hidden]{display:none}
.lz-lightbox-video{
	width:min(900px,92vw);
	aspect-ratio:16/9;
	max-height:88vh;
}
.lz-lightbox-video[hidden]{display:none}
.lz-lightbox-video iframe{
	width:100%;
	height:100%;
	border:0;
	border-radius:8px;
}
.lz-lightbox-close{
	position:absolute;
	top:18px;right:24px;
	background:none;
	border:0;
	color:#fff;
	font-size:32px;
	line-height:1;
	cursor:pointer;
	padding:6px 10px;
}
.lz-lightbox-prev,.lz-lightbox-next{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	background:rgba(255,255,255,.15);
	border:0;
	color:#fff;
	font-size:28px;
	width:48px;height:48px;
	border-radius:50%;
	cursor:pointer;
}
.lz-lightbox-prev{left:18px}
.lz-lightbox-next{right:18px}

/* Mobile: swipeable one-photo-at-a-time carousel (native CSS scroll-snap,
   no JS library) instead of the small-tile grid — this is what the old
   plugin slider felt like on phones, kept here while the grid above stays
   for desktop. luzrosa-gallery.js adds the dot indicators. */
@media(max-width:600px){
	.lz-gallery{
		display:flex;
		grid-template-columns:none;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		gap:0;
		margin:0 0 10px;
		border-radius:10px;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.lz-gallery::-webkit-scrollbar{display:none}
	.lz-gallery-item{
		flex:0 0 100%;
		scroll-snap-align:start;
		border-radius:0;
		border-width:0;
	}
}

/* Mobile thumbnail strip: real photo previews under the swipeable hero,
   so someone can see and tap exactly which one they want. */
.lz-gallery-thumbs{
	display:none;
	gap:8px;
	margin:0 0 20px;
	overflow-x:auto;
	scrollbar-width:none;
	padding:2px;
}
.lz-gallery-thumbs::-webkit-scrollbar{display:none}
@media(max-width:600px){
	.lz-gallery-thumbs{display:flex}
}
.lz-gallery-thumb{
	position:relative;
	flex:0 0 56px;
	width:56px;
	height:56px;
	border-radius:8px;
	overflow:hidden;
	border:2px solid transparent;
	padding:0;
	background:#f5e6eb;
	cursor:pointer;
	opacity:.65;
}
.lz-gallery-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.lz-gallery-thumb.is-active{
	border-color:#a84461;
	opacity:1;
}
.lz-play-badge--sm::after{
	border-width:7px 0 7px 11px;
}