/* Demo Gallery block — front-end + editor styles.
 * All selectors are scoped under .ns-ecdemo so they cannot bleed into the theme.
 * Ported from the EasyCommerce demo design (masthead / CSS mockups removed;
 * card + preview visuals are driven by uploaded images). */

.ns-ecdemo {
	--ground: #FBFAFF;
	--surface: #FFFFFF;
	--surface-2: #F4F1FE;
	--ink: #0F004E;
	--ink-2: #3A3068;
	--muted: #6E6890;
	--line: #E4DFF7;
	--line-strong: #CFC6F0;
	--violet: #7351FD;
	--magenta: #C026D3;
	--night: #06001C;
	--good: #0E7C5C;
	--good-wash: #E1F5EE;
	--shadow-card: 0 1px 2px rgba( 15, 0, 78, 0.05 ), 0 10px 26px -14px rgba( 15, 0, 78, 0.20 );
	--shadow-lift: 0 2px 4px rgba( 15, 0, 78, 0.06 ), 0 30px 64px -22px rgba( 35, 10, 120, 0.34 );
	--r-s: 8px;
	--r-m: 12px;
	--r-l: 18px;

	color: var(--ink-2);
	font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.ns-ecdemo *,
.ns-ecdemo *::before,
.ns-ecdemo *::after {
	box-sizing: border-box;
}

.ns-ecdemo [hidden] {
	display: none !important;
}

.ns-ecdemo h1,
.ns-ecdemo h2,
.ns-ecdemo h3 {
	color: var(--ink);
	margin: 0;
	text-wrap: balance;
}

.ns-ecdemo h1,
.ns-ecdemo h2 {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 500;
	letter-spacing: -0.005em;
}

.ns-ecdemo h1 {
	font-size: clamp( 2.1rem, 4vw, 3.15rem );
	line-height: 1.12;
}

.ns-ecdemo h2 {
	font-size: clamp( 1.5rem, 2.6vw, 1.95rem );
	line-height: 1.18;
}

.ns-ecdemo h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ns-ecdemo p {
	margin: 0;
}

.ns-ecdemo .wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.ns-ecdemo .eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--violet);
	margin: 0;
}

.ns-ecdemo .mono {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ---- Buttons ---- */
.ns-ecdemo .btn {
	font: inherit;
	font-weight: 600;
	font-size: 0.9rem;
	border-radius: var(--r-s);
	padding: 10px 17px;
	cursor: pointer;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s, filter 0.15s;
}

.ns-ecdemo .btn--primary {
	background: linear-gradient( 96deg, var(--violet), var(--magenta) );
	color: #fff;
	border: 0;
}

.ns-ecdemo .btn--primary:hover {
	filter: saturate( 1.15 ) brightness( 1.07 );
}

.ns-ecdemo .btn--ghost {
	background: transparent;
	border-color: var(--line-strong);
	color: var(--ink);
}

.ns-ecdemo .btn--ghost:hover {
	border-color: var(--violet);
	color: var(--violet);
}

.ns-ecdemo .btn--glass {
	background: rgba( 255, 255, 255, 0.15 );
	border-color: rgba( 255, 255, 255, 0.5 );
	color: #fff;
	backdrop-filter: blur( 3px );
}

.ns-ecdemo .btn--glass:hover {
	background: rgba( 255, 255, 255, 0.28 );
}

.ns-ecdemo .btn--block {
	width: 100%;
	padding: 13px 20px;
	font-size: 0.95rem;
}

/* ---- Welcome ---- */
.ns-ecdemo .welcome {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	padding: clamp( 30px, 5vw, 58px ) 0 clamp( 26px, 3.5vw, 40px );
}

.ns-ecdemo .welcome p.lead {
	font-size: 1.06rem;
	color: var(--ink-2);
	line-height: 1.55;
	max-width: 52ch;
}

.ns-ecdemo .welcome .facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 0;
	list-style: none;
	padding: 0;
	margin: 6px 0 0;
}

.ns-ecdemo .welcome .facts li {
	font-size: 0.8rem;
	color: var(--muted);
	padding: 0 14px;
	border-left: 1px solid var(--line);
}

.ns-ecdemo .welcome .facts li:first-child {
	border-left: 0;
}

.ns-ecdemo .welcome .facts b {
	color: var(--ink);
	font-weight: 600;
}

/* ---- Grid + tiles ---- */
.ns-ecdemo .grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
	padding-bottom: clamp( 52px, 7vw, 88px );
}

@media ( max-width: 900px ) {
	.ns-ecdemo .grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.ns-ecdemo .grid {
		grid-template-columns: 1fr;
	}
}

.ns-ecdemo .tile {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-l);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.ns-ecdemo .tile:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY( -2px );
	border-color: var(--line-strong);
}

.ns-ecdemo .tile__visual {
	position: relative;
	aspect-ratio: 16 / 10;
	border-bottom: 1px solid var(--line);
	background: var(--surface-2);
	overflow: hidden;
}

.ns-ecdemo .tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ns-ecdemo .tile__img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--line-strong);
}

.ns-ecdemo .tile__img--empty .dashicons {
	font-size: 40px;
	width: 40px;
	height: 40px;
}

.ns-ecdemo .tile__body {
	padding: 15px 17px 17px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
}

.ns-ecdemo .tile__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.ns-ecdemo .tile__body p {
	font-size: 0.86rem;
	color: var(--muted);
	line-height: 1.5;
}

.ns-ecdemo .tile__actions {
	display: none;
	gap: 8px;
	margin-top: 12px;
}

.ns-ecdemo .tile__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: color-mix( in srgb, var(--night) 66%, transparent );
	opacity: 0;
	transition: opacity 0.18s ease;
}

.ns-ecdemo .tile:hover .tile__overlay,
.ns-ecdemo .tile:focus-within .tile__overlay {
	opacity: 1;
}

@media ( hover: none ) {
	.ns-ecdemo .tile__overlay {
		display: none;
	}
	.ns-ecdemo .tile__actions {
		display: flex;
	}
}

/* ---- Modals ---- */
.ns-ecdemo .modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.ns-ecdemo .modal.is-open {
	display: flex;
}

.ns-ecdemo .modal__scrim {
	position: absolute;
	inset: 0;
	background: color-mix( in srgb, var(--night) 78%, transparent );
}

.ns-ecdemo .modal__panel {
	position: relative;
	width: min( 940px, 100% );
	max-height: 88vh;
	overflow: auto;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-l);
	box-shadow: var(--shadow-lift);
}

.ns-ecdemo .modal__chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 15px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-2);
	position: sticky;
	top: 0;
	z-index: 2;
}

.ns-ecdemo .m-dots {
	display: flex;
	gap: 5px;
}

.ns-ecdemo .m-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--line-strong);
	display: block;
}

.ns-ecdemo .modal__addr {
	flex: 1;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 99px;
	padding: 6px 12px;
	font-size: 0.75rem;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ns-ecdemo .modal__close {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	color: var(--ink);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	flex: none;
	display: grid;
	place-items: center;
	padding: 0;
}

.ns-ecdemo .modal__close:hover {
	border-color: var(--violet);
	color: var(--violet);
}

/* Preview modal */
.ns-ecdemo .shopPreview__hero {
	padding: 26px 28px 18px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.ns-ecdemo .shopPreview__hero h3 {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	font-size: 1.6rem;
}

.ns-ecdemo .shopPreview__hero p {
	color: var(--muted);
	font-size: 0.9rem;
	max-width: 56ch;
}

.ns-ecdemo .shopPreview__image {
	padding: 0 28px 22px;
}

.ns-ecdemo .shopPreview__image img {
	width: 100%;
	height: auto;
	border-radius: var(--r-m);
	border: 1px solid var(--line);
	display: block;
}

.ns-ecdemo .modal__foot {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 13px 20px;
	border-top: 1px solid var(--line);
	background: var(--surface);
}

.ns-ecdemo .modal__foot p {
	font-size: 0.82rem;
	color: var(--muted);
}

.ns-ecdemo .modal__foot-actions {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

/* Clone form modal */
.ns-ecdemo .modal--form .modal__panel {
	width: min( 470px, 100% );
	padding: clamp( 26px, 4vw, 34px );
}

.ns-ecdemo .modal__close--float {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
}

.ns-ecdemo .formHead {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 11px;
	margin-bottom: 24px;
}

.ns-ecdemo .formHead h2 {
	font-size: clamp( 1.45rem, 3.4vw, 1.8rem );
}

.ns-ecdemo .formHead p {
	color: var(--muted);
	font-size: 0.92rem;
	max-width: 36ch;
	line-height: 1.55;
}

.ns-ecdemo .field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 16px;
}

.ns-ecdemo .field > label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ink);
}

.ns-ecdemo .hint {
	font-size: 0.77rem;
	color: var(--muted);
	line-height: 1.45;
}

.ns-ecdemo input[type="text"],
.ns-ecdemo input[type="email"] {
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--ground);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-s);
	padding: 11px 13px;
	width: 100%;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ns-ecdemo input[type="text"]:focus,
.ns-ecdemo input[type="email"]:focus {
	outline: none;
	border-color: var(--violet);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--violet) 22%, transparent );
}

.ns-ecdemo input[disabled] {
	background: var(--surface-2);
	color: var(--muted);
	cursor: not-allowed;
}

.ns-ecdemo .finePrint {
	font-size: 0.75rem;
	color: var(--muted);
	margin-top: 11px;
	line-height: 1.5;
	text-align: center;
}

/* Messages + validation */
.ns-ecdemo .ns-ecdemo-messages {
	margin-bottom: 12px;
	font-size: 0.9rem;
}

.ns-ecdemo .ns-ecdemo-messages.is-error {
	color: #b32d2e;
}

.ns-ecdemo .field-error {
	display: block;
	color: #b32d2e;
	font-size: 0.8rem;
	margin-top: 4px;
}

/* Sent state */
.ns-ecdemo .sent {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}

.ns-ecdemo .formBody.is-sent .sent {
	display: flex;
}

.ns-ecdemo .formBody.is-sent form,
.ns-ecdemo .formBody.is-sent .formHead {
	display: none;
}

.ns-ecdemo .sent__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--good-wash);
	color: var(--good);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 5px 11px;
	border-radius: 99px;
}

.ns-ecdemo .sent h2 {
	font-size: 1.5rem;
}

.ns-ecdemo .sent__addr:not( :empty ) {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.84rem;
	color: var(--ink);
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	padding: 10px 12px;
	word-break: break-all;
}

.ns-ecdemo .sent p.note {
	font-size: 0.87rem;
	color: var(--muted);
	line-height: 1.6;
	max-width: 38ch;
}

/* Honeypot — visually hidden. */
.ns-ecdemo .ns-clonerfe-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media ( max-width: 520px ) {
	.ns-ecdemo .welcome .facts li {
		border-left: 0;
		padding: 0 10px;
	}
	.ns-ecdemo .modal {
		padding: 0;
		align-items: stretch;
	}
	.ns-ecdemo .modal__panel {
		max-height: 100vh;
		border-radius: 0;
		border: 0;
		width: 100%;
	}
	.ns-ecdemo .modal--form .modal__panel {
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ns-ecdemo * {
		transition-duration: 0.01ms !important;
	}
	.ns-ecdemo .tile:hover {
		transform: none;
	}
}