/* CraftyWorth — Live Customization Preview (Amazon-style overlay)
   Pairs with cw-live-preview.js. Lightweight, no libraries. 2026-06-07 */

.cw-lp{
	margin:0 0 16px;
	border:1px solid #e9ddd0;
	border-radius:14px;
	overflow:hidden;
	background:#fff;
	box-shadow:0 1px 3px rgba(15,23,42,.05),0 10px 26px -12px rgba(15,23,42,.18);
}
.cw-lp__head{
	display:flex;align-items:center;gap:7px;flex-wrap:wrap;
	padding:9px 14px;font-size:12px;font-weight:800;letter-spacing:.02em;color:#7a1f30;
	background:linear-gradient(180deg,#fff,#fdf2f4);
	border-bottom:1px solid #f1e3e6;
}
.cw-lp__dot{
	width:8px;height:8px;border-radius:50%;background:#e0245e;flex-shrink:0;
	box-shadow:0 0 0 0 rgba(224,36,94,.5);animation:cwLpPulse 1.8s infinite;
}
@keyframes cwLpPulse{
	0%{box-shadow:0 0 0 0 rgba(224,36,94,.45);}
	70%{box-shadow:0 0 0 7px rgba(224,36,94,0);}
	100%{box-shadow:0 0 0 0 rgba(224,36,94,0);}
}
.cw-lp__hint{font-weight:500;color:#9a7b82;font-size:11px;}

.cw-lp__stage{
	position:relative;width:100%;
	background:#faf7f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 0h10v10H0zM10 10h10v10H10z' fill='%23f0ebe4'/%3E%3C/svg%3E");
	display:flex;align-items:center;justify-content:center;
	max-height:460px;overflow:hidden;
}
.cw-lp__mockup{
	display:block;max-width:100%;max-height:460px;width:auto;height:auto;object-fit:contain;
}
.cw-lp__zones{position:absolute;inset:0;pointer-events:none;}

.cw-lp__zone{
	position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
	text-align:center;overflow:hidden;
}
/* Text zones */
.cw-lp__zone--text{
	color:#1a1a1a;font-weight:700;line-height:1.1;padding:2px;
	font-size:clamp(11px,3.4vw,26px);
	text-shadow:0 1px 1px rgba(255,255,255,.55);
	white-space:pre-wrap;word-break:break-word;
}
/* Image zones */
.cw-lp__zone--image{
	background-size:cover;background-position:center;background-repeat:no-repeat;
	border-radius:4px;
}
/* Empty-state guides so the buyer knows where things land */
.cw-lp__zone.is-empty{
	border:1.5px dashed rgba(160,41,62,.4);border-radius:6px;
	background:rgba(160,41,62,.045);
}
.cw-lp__zone--text.is-empty::after{
	content:"Aa";color:rgba(160,41,62,.45);font-size:13px;font-weight:800;
}
.cw-lp__zone--image.is-empty::after{
	content:"🖼";font-size:18px;opacity:.5;
}

@media(max-width:480px){
	.cw-lp__stage,.cw-lp__mockup{max-height:340px;}
}