/* Naya Verse Product Personalizer: product page form.
   Tokens first; accent is replaced at runtime with the theme's add-to-cart colour. */
.nvp {
	--nvp-accent: #8b7462;
	--nvp-text: #1d1d1f;
	--nvp-muted: #5f5f66;
	--nvp-border: #d4d4da;
	--nvp-surface: #ffffff;
	--nvp-surface-alt: #faf9f7;
	--nvp-error: #b3261e;
	--nvp-error-bg: #fdf1f0;
	--nvp-success: #1f7a4a;
	--nvp-radius: 12px;
	--nvp-radius-sm: 8px;
	--nvp-focus: 0 0 0 3px color-mix(in srgb, var(--nvp-accent) 35%, transparent);
	--nvp-ease: cubic-bezier(.2, .7, .2, 1);

	all: revert;
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid var(--nvp-border);
	border-radius: var(--nvp-radius);
	background: var(--nvp-surface);
	color: var(--nvp-text);
	font: inherit;
	line-height: 1.5;
}
.nvp *, .nvp *::before, .nvp *::after { box-sizing: border-box; }

.nvp__title {
	float: left; /* keeps legend inside the border box */
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--nvp-text);
}
.nvp__title + * { clear: both; }
.nvp__intro { margin: 0 0 16px; color: var(--nvp-muted); font-size: .9375rem; }

.nvp__alert {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: var(--nvp-radius-sm);
	background: var(--nvp-error-bg);
	color: var(--nvp-error);
	font-size: .9375rem;
	font-weight: 500;
}

.nvp__field { margin: 0 0 20px; }
.nvp__field:last-of-type { margin-bottom: 0; }
.nvp__label {
	display: block;
	margin: 0 0 6px;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--nvp-text);
}
.nvp__req { color: var(--nvp-error); margin-left: 2px; }
.nvp__opt { font-weight: 400; color: var(--nvp-muted); margin-left: 4px; font-size: .875rem; }
.nvp__help { margin: -2px 0 8px; color: var(--nvp-muted); font-size: .875rem; }

/* Upload drop zone */
.nvp__drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 132px;
	padding: 20px 16px;
	border: 1.5px dashed var(--nvp-border);
	border-radius: var(--nvp-radius);
	background: var(--nvp-surface-alt);
	color: var(--nvp-muted);
	text-align: center;
	cursor: pointer;
	transition: border-color .18s var(--nvp-ease), background-color .18s var(--nvp-ease);
	touch-action: manipulation;
}
.nvp__drop:hover,
.nvp__drop.is-dragover {
	border-color: var(--nvp-accent);
	background: color-mix(in srgb, var(--nvp-accent) 7%, var(--nvp-surface));
}
.nvp__drop:focus-within { border-color: var(--nvp-accent); box-shadow: var(--nvp-focus); }
.nvp__drop.is-full { opacity: .55; cursor: not-allowed; }
.nvp__icon { color: var(--nvp-accent); }
.nvp__drop-main { font-size: 1rem; color: var(--nvp-text); }
.nvp__drop-link { color: var(--nvp-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nvp__drop-sub { font-size: .8125rem; }
.nvp__file {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.has-error .nvp__drop { border-color: var(--nvp-error); }

/* Uploaded file list */
.nvp__files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.nvp__files:empty { display: none; }
.nvp__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 72px;
	padding: 8px 8px 8px 8px;
	border: 1px solid var(--nvp-border);
	border-radius: var(--nvp-radius-sm);
	background: var(--nvp-surface);
	animation: nvp-in .22s var(--nvp-ease);
}
.nvp__item.is-error { border-color: var(--nvp-error); background: var(--nvp-error-bg); }
.nvp__thumb {
	flex: 0 0 56px;
	width: 56px; height: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--nvp-surface-alt);
	display: flex; align-items: center; justify-content: center;
	color: var(--nvp-muted);
}
.nvp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nvp__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nvp__name {
	font-size: .9375rem;
	font-weight: 500;
	color: var(--nvp-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nvp__sub { font-size: .8125rem; color: var(--nvp-muted); display: inline-flex; align-items: center; gap: 4px; }
.is-done .nvp__sub { color: var(--nvp-success); }
.is-error .nvp__sub { color: var(--nvp-error); white-space: normal; }
.nvp__bar {
	display: block;
	height: 4px;
	margin-top: 4px;
	border-radius: 2px;
	background: var(--nvp-border);
	overflow: hidden;
}
.nvp__bar-fill {
	display: block;
	height: 100%;
	background: var(--nvp-accent);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform .2s linear;
}
.nvp__actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.nvp__btn {
	appearance: none;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: var(--nvp-radius-sm);
	background: transparent;
	color: var(--nvp-text);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .15s var(--nvp-ease);
	touch-action: manipulation;
}
.nvp__btn:hover { background: color-mix(in srgb, var(--nvp-text) 8%, transparent); }
.nvp__btn:focus-visible { outline: none; box-shadow: var(--nvp-focus); }
.nvp__btn--text { color: var(--nvp-accent); }

/* Text inputs */
.nvp__input {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--nvp-border);
	border-radius: var(--nvp-radius-sm);
	background: var(--nvp-surface);
	color: var(--nvp-text);
	font: inherit;
	font-size: 16px; /* avoids iOS zoom */
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s var(--nvp-ease), box-shadow .15s var(--nvp-ease);
}
.nvp__input::placeholder { color: #8a8a92; }
.nvp__input:focus { outline: none; border-color: var(--nvp-accent); box-shadow: var(--nvp-focus); }
.nvp__textarea { min-height: 112px; resize: vertical; }
.has-error .nvp__input { border-color: var(--nvp-error); }

.nvp__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 6px; }
.nvp__count { margin-left: auto; font-size: .8125rem; color: var(--nvp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.is-limit .nvp__count { color: var(--nvp-error); font-weight: 600; }

.nvp__error {
	margin: 6px 0 0;
	color: var(--nvp-error);
	font-size: .875rem;
	font-weight: 500;
}
.nvp__meta .nvp__error { margin: 0; }
.nvp__error[hidden] { display: none; }

/* Consent checkbox */
.nvp__field--consent { padding-top: 4px; }
.nvp__check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	padding: 10px 0;
	cursor: pointer;
	font-size: .9375rem;
	color: var(--nvp-text);
}
.nvp__check input {
	position: absolute;
	opacity: 0;
	width: 24px; height: 24px;
	margin: 0;
	left: 0; top: 10px;
}
.nvp__check-box {
	flex: 0 0 24px;
	width: 24px; height: 24px;
	border: 1.5px solid var(--nvp-border);
	border-radius: 6px;
	background: var(--nvp-surface);
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .15s var(--nvp-ease), border-color .15s var(--nvp-ease);
}
.nvp__check-box svg { opacity: 0; transition: opacity .15s var(--nvp-ease); }
.nvp__check input:checked + .nvp__check-box { background: var(--nvp-accent); border-color: var(--nvp-accent); }
.nvp__check input:checked + .nvp__check-box svg { opacity: 1; }
.nvp__check input:focus-visible + .nvp__check-box { box-shadow: var(--nvp-focus); }
.has-error .nvp__check-box { border-color: var(--nvp-error); }
.nvp__check-text { padding-top: 1px; }

.nvp .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@keyframes nvp-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Desktop gets the drag-and-drop hint; touch devices just tap. */
@media (hover: none) { .nvp__drop-desktop { display: none; } .nvp__drop-link { text-transform: capitalize; } }

@media (min-width: 768px) { .nvp { padding: 24px; } }

@media (prefers-reduced-motion: reduce) {
	.nvp *, .nvp *::before, .nvp *::after { animation: none !important; transition: none !important; }
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.nvp { --nvp-focus: 0 0 0 3px rgba(0, 0, 0, .18); }
	.nvp__drop:hover, .nvp__drop.is-dragover { background: var(--nvp-surface-alt); }
	.nvp__btn:hover { background: rgba(0, 0, 0, .06); }
}

/* Theme isolation: the Stargaze theme styles bare inputs/buttons with high specificity.
   These rules keep the personalizer looking the same on any theme. */
.nvp input.nvp__input,
.nvp textarea.nvp__input {
	border: 1px solid var(--nvp-border) !important;
	border-radius: var(--nvp-radius-sm) !important;
	background: var(--nvp-surface) !important;
	padding: 12px 14px !important;
	min-height: 48px !important;
	font-size: 16px !important;
	color: var(--nvp-text) !important;
	box-shadow: none !important;
	height: auto !important;
}
.nvp textarea.nvp__input { min-height: 112px !important; }
.nvp input.nvp__input:focus,
.nvp textarea.nvp__input:focus { border-color: var(--nvp-accent) !important; box-shadow: var(--nvp-focus) !important; }
.nvp .has-error input.nvp__input,
.nvp .has-error textarea.nvp__input { border-color: var(--nvp-error) !important; }

.nvp button.nvp__btn {
	background: transparent !important;
	color: var(--nvp-text) !important;
	border: 0 !important;
	border-radius: var(--nvp-radius-sm) !important;
	padding: 0 10px !important;
	width: auto !important;
	min-width: 44px !important;
	min-height: 44px !important;
	height: 44px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: .875rem !important;
	line-height: 1 !important;
}
.nvp button.nvp__btn::before,
.nvp button.nvp__btn::after { display: none !important; }
.nvp button.nvp__btn:hover { background: rgba(0, 0, 0, .06) !important; }
.nvp button.nvp__btn--text { color: var(--nvp-accent) !important; }
.nvp button.nvp__btn:focus-visible { box-shadow: var(--nvp-focus) !important; }

.nvp .nvp__check input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	left: 0 !important;
	top: 10px !important;
	display: block !important;
}
.nvp .nvp__check input[type="checkbox"]::before,
.nvp .nvp__check input[type="checkbox"]::after { display: none !important; }
.nvp .nvp__check { padding-left: 0 !important; margin: 0 !important; }
.nvp .nvp__check::before, .nvp .nvp__check::after { display: none !important; }
.nvp .nvp__drop input.nvp__file { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ---------- Paid options (v1.1) ---------- */
.nvp__choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
}
.nvp__choice { position: relative; display: block; margin: 0; cursor: pointer; }
.nvp .nvp__choice input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
.nvp .nvp__choice input[type="radio"]::before,
.nvp .nvp__choice input[type="radio"]::after,
.nvp .nvp__choice::before,
.nvp .nvp__choice::after { display: none !important; }
.nvp__choice-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 64px;
	padding: 12px 14px;
	border: 1.5px solid var(--nvp-border);
	border-radius: var(--nvp-radius-sm);
	background: var(--nvp-surface);
	transition: border-color .15s var(--nvp-ease), background-color .15s var(--nvp-ease), box-shadow .15s var(--nvp-ease);
}
.nvp__choice:hover .nvp__choice-body { border-color: var(--nvp-accent); }
.nvp__choice input:checked + .nvp__choice-body {
	border-color: var(--nvp-accent);
	background: color-mix(in srgb, var(--nvp-accent) 8%, var(--nvp-surface));
	box-shadow: inset 0 0 0 1px var(--nvp-accent);
}
.nvp__choice input:focus-visible + .nvp__choice-body { box-shadow: var(--nvp-focus); }
.nvp__choice-name { font-size: .9375rem; font-weight: 600; color: var(--nvp-text); line-height: 1.3; }
.nvp__choice-price { font-size: .8125rem; color: var(--nvp-muted); font-variant-numeric: tabular-nums; }
.nvp__choice input:checked + .nvp__choice-body .nvp__choice-price { color: var(--nvp-accent); font-weight: 600; }
.has-error .nvp__choice-body { border-color: var(--nvp-error); }

/* Live price summary */
.nvp__summary {
	margin: 4px 0 20px;
	padding: 16px;
	border: 1px solid var(--nvp-border);
	border-radius: var(--nvp-radius);
	background: var(--nvp-surface-alt);
}
.nvp__summary-title {
	margin: 0 0 8px;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nvp-muted);
}
.nvp__summary-rows {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	margin: 0 0 10px;
	font-size: .9375rem;
}
.nvp__summary-rows:empty { display: none; }
.nvp__summary-rows dt { margin: 0; font-weight: 400; color: var(--nvp-muted); }
.nvp__summary-rows dd { margin: 0; text-align: right; color: var(--nvp-text); font-variant-numeric: tabular-nums; }
.nvp__summary-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--nvp-border);
	font-size: 1rem;
	font-weight: 600;
	color: var(--nvp-text);
}
.nvp__summary-total strong { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.nvp__summary-hint { margin: 6px 0 0; font-size: .875rem; color: var(--nvp-muted); }
.nvp__summary-hint[hidden] { display: none; }