/* TWG Monogram Preview — everything scoped under .twg-mp */
.twg-mp {
	margin: 14px 0 18px;
	font-family: 'Nunito', 'Trebuchet MS', sans-serif;
}
.twg-mp .twg-mp__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: #F6EFE2;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 4px 14px rgba(0, 0, 0, .08);
}
.twg-mp .twg-mp__fabric {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: background-image .2s ease;
}
/* soft cushion shading so the swatch reads as a padded surface, not a flat tile */
.twg-mp .twg-mp__fabric::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .22) 100%);
}
.twg-mp .twg-mp__text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.0;
	font-weight: 550; /* matched to real Snoozer monogram photos (Chip, Uzo) */
	letter-spacing: .01em;
	text-align: center;
	pointer-events: none;
	/* no drop shadow: the preview shows only what the thread itself looks like on the bed */
}
.twg-mp .twg-mp__text span {
	display: block;
	white-space: nowrap;
	/* room for Garamond ascenders/descenders so the satin fill isn't clipped */
	padding: .06em .08em .2em;
	margin: -.06em 0 -.2em;
	/* near-solid thread color (sampled from the real thread photos) with a faint stitch texture,
	   matched to photos of finished Snoozer monograms */
	background:
		repeating-linear-gradient(-55deg, rgba(255, 255, 255, .10) 0 .7px, rgba(0, 0, 0, .06) .7px 1.6px),
		linear-gradient(var(--twg-mp-hi), var(--twg-mp-base) 55%, var(--twg-mp-sh));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: .3px rgba(0, 0, 0, .18);
}
.twg-mp .twg-mp__text.is-sample {
	opacity: .55;
}
.twg-mp .twg-mp__empty {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: #6b6256;
}
.twg-mp.is-nofabric .twg-mp__text { opacity: .35; }
.twg-mp .twg-mp__meta {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 800;
	color: #2b2b2b;
}
.twg-mp .twg-mp__tip {
	margin-top: 6px;
	padding: 8px 10px;
	border-radius: 8px;
	background: #FFF6E5;
	border: 1px solid #CB9A4E;
	font-size: 13px;
	color: #4a3a1f;
}
.twg-mp .twg-mp__tip[hidden] { display: none; }
.twg-mp .twg-mp__try {
	margin-left: 4px;
	padding: 3px 10px;
	border: 0;
	border-radius: 999px;
	background: #4F97C6;
	color: #fff;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}
.twg-mp .twg-mp__note {
	margin-top: 6px;
	font-size: 12px;
	color: #7a7368;
}
@media (min-width: 768px) {
	.twg-mp .twg-mp__stage { aspect-ratio: 5 / 2; max-width: 520px; }
}

/* The theme caps the open monogram panel at 1000px; the preview adds ~300px, so raise the cap
   (same checkbox toggle and animation, just more room). */
body #monogram-visibility:checked ~ #monogram_content { max-height: 2400px; }

/* Show the monogram text exactly as typed. The theme styles these fields in all caps, but CSS caps
   are display-only: the order (and ShipStation) receive what was typed, so "Millington" shows as
   MILLINGTON in the box yet is stitched "Millington". Matching the field to the order and preview. */
#monogram_content input.wc-pao-addon-custom-text,
.wc-pao-addon-container input.wc-pao-addon-custom-text { text-transform: none !important; }