.single-product form.variations_form table.variations select.lzd-native-select-hidden,
select.lzd-native-select-hidden{
	position:absolute!important;
	width:1px!important;
	height:1px!important;
	min-height:1px!important;
	padding:0!important;
	margin:-1px!important;
	border:0!important;
	overflow:hidden!important;
	clip:rect(0,0,0,0)!important;
	white-space:nowrap!important;
	opacity:0!important;
}
.lzd-picker{position:relative;margin:0 0 14px}
.lzd-trigger{display:flex!important;align-items:center;gap:12px;width:100%!important;min-height:58px;padding:7px 14px 7px 7px!important;border:1px solid #ead9d8!important;border-radius:9px!important;background:#fff!important;cursor:pointer;text-align:left;font:400 15px "DM Sans",sans-serif;color:#4d2532}
.lzd-trigger:focus{outline:0;border-color:#a84461!important;box-shadow:0 0 0 3px #f8e2e6!important}
.lzd-trigger-thumb{width:44px;height:44px;border-radius:7px;background:#f5e6eb center/cover no-repeat;flex:none}
.lzd-trigger-text{flex:1;font-weight:600}
.lzd-trigger-hint{font-size:11.5px;color:#a98d92;font-weight:400}
.lzd-trigger i{font:18px "DM Sans",sans-serif;color:#a98d92;transition:transform .2s}
.lzd-trigger[aria-expanded="true"] i{transform:rotate(180deg)}

.lzd-panel{position:absolute;z-index:400;top:calc(100% + 7px);left:0;width:100%;min-width:320px;padding:12px;border:1px solid #ead9d8;border-radius:12px;background:#fff;box-shadow:0 16px 40px rgba(77,37,50,.18)}
.lzd-search{position:sticky;top:0;z-index:2;width:100%!important;min-height:42px!important;margin:0 0 10px!important;padding:8px 12px!important;border:1px solid #ead9d8!important;border-radius:8px;background:#fff!important;font:400 14px "DM Sans",sans-serif}
.lzd-search:focus{outline:0;border-color:#a84461!important}
/* -webkit-overflow-scrolling + translateZ force this onto its own GPU
   compositing layer. Without it, iOS Safari has a well-known tearing bug on
   scrollable containers with many images (like this 132-item grid) — tiles
   from the wrong scroll position get painted as sheared diagonal strips.
   Not reproducible in this dev environment (no real iOS Safari available
   here) — this is the standard documented fix for that exact symptom. */
.lzd-grid{
	max-height:min(62vh,560px);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	transform:translateZ(0);
	-webkit-transform:translateZ(0);
	isolation:isolate;
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:8px;
}
/* Square tiles via the old padding-top:100% trick, not the `aspect-ratio`
   property — on this iPhone's Safari, aspect-ratio wasn't being honoured
   inside the grid (tiles collapsed to a thin strip instead of a square).
   padding-top:100% forces a square from an intrinsic-ratio box that every
   browser, including old Safari, has always supported. */
.lzd-item{position:relative;border:2px solid transparent;border-radius:9px;padding:0;cursor:pointer;background:#f5e6eb;overflow:hidden;display:block}
.lzd-item::before{content:"";display:block;padding-top:100%}
.lzd-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lzd-item span{position:absolute;left:4px;bottom:4px;background:rgba(59,36,50,.72);color:#fff;font-size:10.5px;font-weight:700;line-height:1;padding:3px 6px;border-radius:999px}
.lzd-item:hover{border-color:#dbb9c5}
.lzd-item.lzd-active{border-color:#a84461}
.lzd-item.lzd-hidden{display:none}
.lzd-empty{grid-column:1/-1;text-align:center;padding:20px;color:#a98d92;font-size:13px}

.lzd-preview{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:12px;border:1px solid #ead9d8;border-radius:12px;background:#fffaf7}
.lzd-preview[hidden]{display:none}
.lzd-preview img{
	width:160px;
	height:160px;
	object-fit:cover;
	border-radius:10px;
	background:#f5e6eb;
	flex:none;
	cursor:zoom-in;
}
/* Restarted on every new selection (see luzrosa-design-selector.js) — grows
   into place instead of just silently swapping, so picking a design reads as
   an action with visible feedback, not a click-to-open-elsewhere step. */
.lzd-preview img.lzd-preview-pop{
	animation:lzd-pop .35s ease;
}
@keyframes lzd-pop{
	0%{transform:scale(.82);opacity:.5}
	60%{transform:scale(1.04);opacity:1}
	100%{transform:scale(1)}
}
.lzd-preview-text{font-size:12.5px;color:#76535c}
.lzd-preview-text strong{display:block;font-size:14px;color:#4d2532;margin-bottom:2px}

.lzd-zoom-overlay{
	position:fixed;
	inset:0;
	z-index:9999;
	background:rgba(59,36,50,.9);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	cursor:zoom-out;
}
.lzd-zoom-overlay img{
	max-width:min(900px,92vw);
	max-height:88vh;
	object-fit:contain;
	border-radius:8px;
	cursor:auto;
}

@media(max-width:480px){
	.lzd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}