/* GastroNaron: variation prompt (helper text, missing-option state, dialog). */

.gn-var-hint {
	margin: 4px 0 14px;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--gn-muted);
}
/* Hint is only useful until a variation is chosen. */
form.variations_form:has(.single_add_to_cart_button:not(.wc-variation-selection-needed)) .gn-var-hint {
	display: none;
}

/* Missing option */
.variations tr.gn-var-missing .variable-items-wrapper {
	outline: 2px solid #c0392b;
	outline-offset: 4px;
	border-radius: 6px;
}
.variations tr.gn-var-missing th.label label {
	color: #a8321f;
}
.variations tr.gn-var-missing select {
	border-color: #c0392b;
}
.gn-var-missing .variable-item:focus-visible {
	outline: 3px solid var(--gn-orange);
	outline-offset: 2px;
}

/* Dialog */
.gn-varmodal {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(23, 59, 42, 0.45);
	font-family: var(--gn-body);
}
.gn-varmodal[hidden] {
	display: none;
}
.gn-varmodal__box {
	width: 100%;
	max-width: 380px;
	padding: 24px 24px 20px;
	background: #fff;
	border: 1px solid var(--gn-line);
	border-top: 4px solid var(--gn-green);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(23, 59, 42, 0.18);
	text-align: left;
	animation: gn-varmodal-in 0.16s ease-out;
}
.gn-varmodal__title {
	margin: 0 0 8px;
	font-family: var(--gn-head);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--gn-forest);
}
.gn-varmodal__text {
	margin: 0 0 18px;
	font-size: 1rem;
	line-height: 1.5;
	color: #3b4640;
}
.gn-varmodal__btn {
	display: block;
	width: 100%;
	padding: 0.75rem 1.25rem;
	background: var(--gn-green);
	border: 2px solid var(--gn-green);
	border-radius: 999px;
	color: #fff;
	font-family: var(--gn-body);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.gn-varmodal__btn:hover {
	background: var(--gn-forest);
	border-color: var(--gn-forest);
}
.gn-varmodal__btn:focus-visible {
	outline: 3px solid var(--gn-orange);
	outline-offset: 2px;
}
html.gn-varmodal-open {
	overflow: hidden;
}
@keyframes gn-varmodal-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.gn-varmodal__box { animation: none; }
}
@media (min-width: 480px) {
	.gn-varmodal__btn { display: inline-block; width: auto; min-width: 120px; }
}