/* Moleano storefront tweaks (loaded on the storefront app). */

/* ---------------------------------------------------------------------------
 * Age gate: lining figures
 *
 * Raleway defaults to old-style figures, where 1 is short and 8 is full height,
 * so "18" reads as two different sizes sitting off the line. Force lining,
 * tabular figures everywhere in the gate - including the SVG shield.
 * ------------------------------------------------------------------------- */
.age-gate,
.age-gate *,
.ag-adults,
.ag-text,
.ag-confirm,
.ag-exit,
.ag-remember,
.ag-privacy,
.ag-shield text {
	font-variant-numeric: lining-nums tabular-nums !important;
	-webkit-font-feature-settings: "lnum" 1, "tnum" 1;
	font-feature-settings: "lnum" 1, "tnum" 1 !important;
}

.ag-confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Age gate: let the site show for a moment first
 *
 * The gate is in the markup from the start, so it covers the page instantly.
 * Hold it back half a second, then fade it in, so visitors register that there
 * is a site behind it.
 * ------------------------------------------------------------------------- */
/* Held back until the storefront has actually finished rendering, then shown
   by adding .mlco-in (see adapter.js). A fixed delay fired while the page was
   still painting, so the glimpse behind the gate was a half-drawn page. */
.age-gate {
	opacity: 0;
	animation: none;
	transition: opacity 0.18s ease-out, visibility 0.18s;
}

.age-gate.mlco-in {
	opacity: 1;
}

/* The gate's own dismissal must still win. */
.age-gate.hide {
	animation: none !important;
	opacity: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Age gate on mobile: slightly smaller, showing more of the site behind
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {

	.age-gate {
		padding: 18px;
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		background:
			radial-gradient(820px 560px at 50% 26%, rgba(28, 52, 92, 0.38), transparent 60%),
			rgba(4, 5, 7, 0.74);
	}

	.ag-card { max-width: 400px; }
	.ag-shield { width: 92px; height: 100px; margin: 12px auto 4px; }
	.ag-adults { font-size: 19px; margin: 10px 0 12px; }
	.ag-confirm { padding: 15px 20px; font-size: 14px; }
}

/* Sign-up: note replacing the password fields */
.auth-note {
	margin: 2px 0 16px;
	color: var(--silver-dim);
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}