/* ===== RAVE ON — Tee Studio ===== */

.ro-studio {
	background: #fff;
	border-radius: 22px;
	padding: 20px;
	margin: 0 0 22px;
	box-shadow: 0 14px 40px rgba(123, 43, 255, .14);
}

.ro-studio__head {
	font-family: var(--ro-font-display, 'Unbounded', sans-serif);
	font-weight: 900;
	font-size: 15px;
	letter-spacing: .04em;
	margin: 0 0 4px;
}
.ro-studio__intro { font-size: 13px; color: var(--ro-muted, #6e6e7e); margin: 0 0 14px; }

.ro-studio label { display: block; font-weight: 700; font-size: 13px; margin: 0 0 5px; }
.ro-studio select,
.ro-studio textarea {
	width: 100%;
	border: 2px solid var(--ro-ink, #0b0b14);
	border-radius: 14px;
	padding: 11px 14px;
	font-family: var(--ro-font-body, 'Space Grotesk', sans-serif);
	font-size: 14px;
	background: #fafafd;
	outline: none;
	box-sizing: border-box;
}
.ro-studio textarea { border-radius: 16px; resize: vertical; min-height: 74px; }
.ro-studio .form-row { margin: 0 0 12px; }

/* Generate button */
.ro-studio__generate {
	background: linear-gradient(100deg, #ff2ec4, #7b2bff, #00e5ff) !important;
	background-size: 200% auto !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 13px 26px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background-position .6s ease;
}
.ro-studio__generate:hover:not(:disabled) {
	background-position: right center !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(123, 43, 255, .4);
}
.ro-studio__generate:disabled { opacity: .55; cursor: wait; }

.ro-studio__remaining { font-size: 12px; color: var(--ro-muted, #6e6e7e); margin-left: 10px; }

/* The shirt stage */
.ro-studio__stage {
	position: relative;
	width: 100%;
	max-width: 340px;
	margin: 16px auto 8px;
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	overflow: hidden;
	background: #f4f4f8 center/contain no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ro-studio__shirt { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Art sits on the chest of the mockup. Tuned to this specific mockup image. */
.ro-studio__art {
	position: absolute;
	top: 38%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30%;
	display: none;
	/* Art is knocked out to real transparency server-side, so it composites
	   directly. multiply still lets the shirt's folds read through the ink. */
	mix-blend-mode: multiply;
}
.ro-studio__stage.has-art .ro-studio__placeholder { display: none; }

/* Brand mark: viewer's top-right of the chest, where a logo normally sits.
   Percentages are tuned to tee-mockup-blank.png — retune if that image changes. */
.ro-studio__mark {
	position: absolute;
	top: 27%;
	left: 60%;
	width: 15%;
	mix-blend-mode: multiply;
	pointer-events: none;
	opacity: .95;
}

.ro-studio__placeholder {
	position: absolute;
	inset: auto 0 14px;
	text-align: center;
	font-size: 12px;
	color: #9a9ab5;
	pointer-events: none;
}

/* Loading shimmer */
.ro-studio.is-loading .ro-studio__stage::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(123, 43, 255, .18) 50%, transparent 70%);
	background-size: 200% 100%;
	animation: ro-shimmer 1.1s linear infinite;
}
@keyframes ro-shimmer { to { background-position: -200% 0; } }

/* Status line */
.ro-studio__status { font-size: 13px; margin: 8px 0 0; min-height: 18px; }
.ro-studio__status.is-error { color: #b32d2e; font-weight: 600; }
.ro-studio__status.is-ok    { color: #1a7f37; }
.ro-studio__status.is-busy  { color: var(--ro-muted, #6e6e7e); }

/* Approve */
.ro-studio__approve {
	display: none;
	background: var(--ro-ink, #0b0b14);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 11px 24px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	margin-top: 6px;
	transition: transform .2s ease;
}
.ro-studio__approve:hover { transform: translateY(-2px); }
.ro-studio__approve.is-approved { background: #1a7f37; cursor: default; }

/* Add-to-cart stays locked until a design is approved */
.single_add_to_cart_button.ro-locked {
	opacity: .4 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}