/**
 * Nightshift section settings: colour schemes, overlay, background effects,
 * responsive spacing/alignment and motion controls. Loaded only on pages
 * that use them (and in the editor). Classes and variables are added by
 * inc/sections/sections.php from inc/sections/settings.json.
 *
 * Everything derives from the active palette, so sections follow the
 * Nightshift, Daylight and Circuit presets (and any custom palette).
 */

/* ---------- Palette snapshot used by the colour schemes ---------- */
:root,
body,
.editor-styles-wrapper {
	--ns-c-base: var(--wp--preset--color--base);
	--ns-c-surface: var(--wp--preset--color--surface);
	--ns-c-surface-raised: var(--wp--preset--color--surface-raised);
	--ns-c-border: var(--wp--preset--color--border);
	--ns-c-border-strong: var(--wp--preset--color--border-strong);
	--ns-c-contrast: var(--wp--preset--color--contrast);
	--ns-c-contrast-muted: var(--wp--preset--color--contrast-muted);
	--ns-c-accent: var(--wp--preset--color--accent);
	--ns-c-on-accent: var(--wp--preset--color--on-accent);
	--ns-c-secondary: var(--wp--preset--color--secondary);
	--ns-c-secondary-light: var(--wp--preset--color--secondary-light);
}

/* ---------- Colour schemes: remap the palette inside the section ---------- */
.ns-scheme {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.ns-scheme--surface {
	--wp--preset--color--base: var(--ns-c-surface);
	--wp--preset--color--surface: var(--ns-c-surface-raised);
	--wp--preset--color--surface-raised: color-mix(in srgb, var(--ns-c-surface-raised) 92%, var(--ns-c-contrast));
}
.ns-scheme--raised {
	--wp--preset--color--base: var(--ns-c-surface-raised);
	--wp--preset--color--surface: color-mix(in srgb, var(--ns-c-surface-raised) 93%, var(--ns-c-contrast));
	--wp--preset--color--surface-raised: color-mix(in srgb, var(--ns-c-surface-raised) 87%, var(--ns-c-contrast));
	--wp--preset--color--border: color-mix(in srgb, var(--ns-c-border) 85%, var(--ns-c-contrast));
}
.ns-scheme--accent {
	--wp--preset--color--base: var(--ns-c-accent);
	--wp--preset--color--contrast: var(--ns-c-on-accent);
	--wp--preset--color--contrast-muted: color-mix(in srgb, var(--ns-c-on-accent) 88%, var(--ns-c-accent));
	--wp--preset--color--surface: color-mix(in srgb, var(--ns-c-accent) 90%, var(--ns-c-on-accent));
	--wp--preset--color--surface-raised: color-mix(in srgb, var(--ns-c-accent) 82%, var(--ns-c-on-accent));
	--wp--preset--color--border: color-mix(in srgb, var(--ns-c-accent) 72%, var(--ns-c-on-accent));
	--wp--preset--color--border-strong: color-mix(in srgb, var(--ns-c-accent) 55%, var(--ns-c-on-accent));
	--wp--preset--color--accent: var(--ns-c-on-accent);
	--wp--preset--color--on-accent: var(--ns-c-accent);
	--wp--preset--color--secondary: color-mix(in srgb, var(--ns-c-on-accent) 88%, var(--ns-c-accent));
	--wp--preset--color--secondary-light: color-mix(in srgb, var(--ns-c-on-accent) 92%, var(--ns-c-accent));
}
.ns-scheme--inverse {
	--wp--preset--color--base: var(--ns-c-contrast);
	--wp--preset--color--contrast: var(--ns-c-base);
	--wp--preset--color--contrast-muted: color-mix(in srgb, var(--ns-c-base) 78%, var(--ns-c-contrast));
	--wp--preset--color--surface: color-mix(in srgb, var(--ns-c-contrast) 93%, var(--ns-c-base));
	--wp--preset--color--surface-raised: color-mix(in srgb, var(--ns-c-contrast) 87%, var(--ns-c-base));
	--wp--preset--color--border: color-mix(in srgb, var(--ns-c-contrast) 78%, var(--ns-c-base));
	--wp--preset--color--border-strong: color-mix(in srgb, var(--ns-c-contrast) 62%, var(--ns-c-base));
	--wp--preset--color--accent: color-mix(in srgb, var(--ns-c-accent) 38%, var(--ns-c-base));
	--wp--preset--color--on-accent: var(--ns-c-contrast);
	--wp--preset--color--secondary: color-mix(in srgb, var(--ns-c-base) 72%, var(--ns-c-contrast));
	--wp--preset--color--secondary-light: color-mix(in srgb, var(--ns-c-base) 80%, var(--ns-c-contrast));
}

/* Icons baked in the global accent colour can't follow a scheme, so inside a
   scheme they're drawn as a mask in the scheme's own accent. */
.ns-scheme .wp-block-list.is-style-checks li::before { background-image: none; }
.ns-scheme .wp-block-list.is-style-checks li::after {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: 1.05rem;
	height: 1.05rem;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: var(--ns-mask-check) center / 70% no-repeat;
	        mask: var(--ns-mask-check) center / 70% no-repeat;
}
.ns-scheme { --ns-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8'/%3E%3C/svg%3E"); }

/* ---------- Overlay (above the background, below the content) ---------- */
.ns-overlay {
	box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--ns-overlay-color) calc(var(--ns-overlay-opacity, .4) * 100%), transparent);
}

/* ---------- Background effects ---------- */
.ns-fx {
	--ns-fx-i: var(--ns-fx-intensity, .5);
	--ns-fx-s: var(--ns-fx-speed, .4);
	--ns-fx-m: var(--ns-fx-movement, .4);
	--ns-fx-dur: calc(70s - 56s * var(--ns-fx-s));
	position: relative;
	isolation: isolate;
	overflow: clip;
}
.wp-block-cover.ns-fx { --ns-fx-z: 1; }
.ns-fx::before,
.ns-fx--float::after {
	content: "";
	position: absolute;
	inset: var(--ns-fx-inset, -12%);
	z-index: var(--ns-fx-z, -1);
	pointer-events: none;
	animation-duration: var(--ns-fx-dur);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

/* Ambient glow: two soft light sources drifting slowly. */
.ns-fx--glow::before {
	background:
		radial-gradient(38% 55% at 18% 28%, color-mix(in srgb, var(--wp--preset--color--accent) calc(55% * var(--ns-fx-i)), transparent), transparent 70%),
		radial-gradient(34% 50% at 82% 72%, color-mix(in srgb, var(--wp--preset--color--secondary) calc(60% * var(--ns-fx-i) * var(--ns-ambient-secondary, 1)), transparent), transparent 70%);
	animation-name: ns-fx-drift;
}

/* Gradient mesh: overlapping colour fields slowly turning. */
.ns-fx--mesh { --ns-fx-inset: -40%; }
.ns-fx--mesh::before {
	background:
		radial-gradient(28% 36% at 30% 32%, color-mix(in srgb, var(--wp--preset--color--accent) calc(48% * var(--ns-fx-i)), transparent), transparent 72%),
		radial-gradient(30% 38% at 68% 30%, color-mix(in srgb, var(--wp--preset--color--secondary-light) calc(42% * var(--ns-fx-i) * var(--ns-ambient-secondary, 1)), transparent), transparent 72%),
		radial-gradient(34% 34% at 58% 70%, color-mix(in srgb, var(--wp--preset--color--accent) calc(26% * var(--ns-fx-i)), transparent), transparent 72%),
		radial-gradient(26% 30% at 34% 72%, color-mix(in srgb, var(--wp--preset--color--contrast) calc(10% * var(--ns-fx-i)), transparent), transparent 72%);
	animation-name: ns-fx-swirl;
}

/* Grid: fine lines that fade out towards the edges, optionally panning. */
.ns-fx--grid::before {
	inset: -56px 0 0 -56px;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--border-strong) calc(100% * var(--ns-fx-i)), transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--border-strong) calc(100% * var(--ns-fx-i)), transparent) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 0%, transparent 78%);
	        mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 0%, transparent 78%);
	animation-name: ns-fx-pan;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-duration: calc(var(--ns-fx-dur) * .6);
}

/* Spotlight: a soft light falling from the top edge. */
.ns-fx--spotlight::before {
	inset: 0;
	transform-origin: 50% 0;
	background:
		radial-gradient(60% 55% at 50% -5%, color-mix(in srgb, var(--wp--preset--color--contrast) calc(16% * var(--ns-fx-i)), transparent), transparent 72%),
		radial-gradient(42% 42% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--accent) calc(30% * var(--ns-fx-i)), transparent), transparent 72%);
	animation-name: ns-fx-breathe;
}

/* Floating shapes: soft discs and rings gently bobbing. */
.ns-fx--float::before,
.ns-fx--float::after { inset: 0; }
.ns-fx--float::before {
	background:
		radial-gradient(circle 44px at 14% 30%, color-mix(in srgb, var(--wp--preset--color--accent) calc(70% * var(--ns-fx-i)), transparent) 97%, transparent 100%),
		radial-gradient(circle 70px at 84% 22%, transparent 66px, color-mix(in srgb, var(--wp--preset--color--border-strong) min(100%, calc(150% * var(--ns-fx-i))), transparent) 67px 69px, transparent 70px),
		radial-gradient(circle 180px at 28% 84%, color-mix(in srgb, var(--wp--preset--color--accent) calc(18% * var(--ns-fx-i)), transparent), transparent 100%);
	animation-name: ns-fx-bob;
}
.ns-fx--float::after {
	background:
		radial-gradient(circle 10px at 70% 76%, color-mix(in srgb, var(--wp--preset--color--secondary-light) calc(90% * var(--ns-fx-i)), transparent) 90%, transparent 100%),
		radial-gradient(circle 26px at 92% 64%, transparent 22px, color-mix(in srgb, var(--wp--preset--color--accent) calc(80% * var(--ns-fx-i)), transparent) 23px 25px, transparent 26px),
		radial-gradient(circle 7px at 40% 14%, color-mix(in srgb, var(--wp--preset--color--contrast) calc(50% * var(--ns-fx-i)), transparent) 90%, transparent 100%);
	animation-name: ns-fx-bob-alt;
	animation-duration: calc(var(--ns-fx-dur) * .75);
}

@keyframes ns-fx-drift {
	from { transform: translate3d(calc(-5% * var(--ns-fx-m)), calc(-4% * var(--ns-fx-m)), 0) scale(1); }
	to { transform: translate3d(calc(5% * var(--ns-fx-m)), calc(4% * var(--ns-fx-m)), 0) scale(calc(1 + .1 * var(--ns-fx-m))); }
}
@keyframes ns-fx-swirl {
	from { transform: rotate(calc(-14deg * var(--ns-fx-m))) scale(1); }
	to { transform: rotate(calc(18deg * var(--ns-fx-m))) scale(calc(1 + .12 * var(--ns-fx-m))) translate3d(calc(3% * var(--ns-fx-m)), calc(-2% * var(--ns-fx-m)), 0); }
}
@keyframes ns-fx-pan {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(56px, 56px, 0); }
}
@keyframes ns-fx-breathe {
	from { opacity: calc(1 - .4 * var(--ns-fx-m)); transform: scale(1); }
	to { opacity: 1; transform: scale(calc(1 + .1 * var(--ns-fx-m))); }
}
@keyframes ns-fx-bob {
	from { transform: translate3d(0, calc(-3% * var(--ns-fx-m)), 0) rotate(calc(-3deg * var(--ns-fx-m))); }
	to { transform: translate3d(calc(2% * var(--ns-fx-m)), calc(3% * var(--ns-fx-m)), 0) rotate(calc(3deg * var(--ns-fx-m))); }
}
@keyframes ns-fx-bob-alt {
	from { transform: translate3d(calc(1.5% * var(--ns-fx-m)), calc(2.5% * var(--ns-fx-m)), 0); }
	to { transform: translate3d(calc(-2% * var(--ns-fx-m)), calc(-3% * var(--ns-fx-m)), 0); }
}

/* Small screens: smaller shapes kept to the edges, clear of the text column. */
@media (max-width: 781px) {
	.ns-fx--float::before {
		background:
			radial-gradient(circle 22px at 94% 6%, color-mix(in srgb, var(--wp--preset--color--accent) calc(70% * var(--ns-fx-i)), transparent) 97%, transparent 100%),
			radial-gradient(circle 36px at 104% 46%, transparent 33px, color-mix(in srgb, var(--wp--preset--color--border-strong) min(100%, calc(150% * var(--ns-fx-i))), transparent) 34px 35px, transparent 36px),
			radial-gradient(circle 120px at 0% 100%, color-mix(in srgb, var(--wp--preset--color--accent) calc(14% * var(--ns-fx-i)), transparent), transparent 100%);
	}
	.ns-fx--float::after {
		background:
			radial-gradient(circle 6px at 88% 96%, color-mix(in srgb, var(--wp--preset--color--secondary-light) calc(90% * var(--ns-fx-i)), transparent) 90%, transparent 100%),
			radial-gradient(circle 16px at -2% 18%, transparent 13px, color-mix(in srgb, var(--wp--preset--color--accent) calc(80% * var(--ns-fx-i)), transparent) 14px 15px, transparent 16px);
	}
}

/* Still effects, paused off-screen (assets/js/sections.js), and page-wide. */
.ns-fx-still::before,
.ns-fx-still::after { animation: none; }
.ns-fx.is-ns-paused::before,
.ns-fx.is-ns-paused::after { animation-play-state: paused; }

body.ns-page-fx {
	position: static;
	overflow: visible;
	isolation: auto;
}
body.ns-page-fx::before,
body.ns-page-fx.ns-fx--float::after {
	position: fixed;
	z-index: -1;
}

/* ---------- Mobile behaviour ---------- */
@media (max-width: 599px) {
	.ns-fx-m-static::before,
	.ns-fx-m-static::after { animation: none; }
	.ns-fx-m-off::before,
	.ns-fx-m-off::after { display: none; }
	.ns-bg-m-hide { background-image: none !important; }
	.wp-block-cover.ns-bg-m-hide > .wp-block-cover__image-background,
	.wp-block-cover.ns-bg-m-hide > .wp-block-cover__video-background { display: none; }
}

/* ---------- Responsive spacing and alignment ----------
   Desktop uses the block's own settings (inline styles), so the smaller
   breakpoints need !important to take over from them. */
@media (min-width: 600px) and (max-width: 1023px) {
	.ns-pad-t-none { padding-top: 0 !important; padding-bottom: 0 !important; }
	.ns-pad-t-compact { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--40) !important; }
	.ns-pad-t-standard { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
	.ns-pad-t-spacious { padding-top: var(--wp--preset--spacing--80) !important; padding-bottom: var(--wp--preset--spacing--80) !important; }
	.ns-align-t-left,
	.ns-align-t-left :is(h1, h2, h3, h4, h5, h6, p, li) { text-align: left; }
	.ns-align-t-center,
	.ns-align-t-center :is(h1, h2, h3, h4, h5, h6, p, li) { text-align: center; }
	.ns-align-t-right,
	.ns-align-t-right :is(h1, h2, h3, h4, h5, h6, p, li) { text-align: right; }
	.ns-align-t-left :is(.wp-block-buttons, .is-layout-flex) { justify-content: flex-start; }
	.ns-align-t-center :is(.wp-block-buttons, .is-layout-flex) { justify-content: center; }
	.ns-align-t-right :is(.wp-block-buttons, .is-layout-flex) { justify-content: flex-end; }
}
@media (max-width: 599px) {
	.ns-pad-m-none { padding-top: 0 !important; padding-bottom: 0 !important; }
	.ns-pad-m-compact { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--40) !important; }
	.ns-pad-m-standard { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
	.ns-pad-m-spacious { padding-top: var(--wp--preset--spacing--80) !important; padding-bottom: var(--wp--preset--spacing--80) !important; }
	.ns-align-m-left,
	.ns-align-m-left :is(h1, h2, h3, h4, h5, h6, p, li) { text-align: left; }
	.ns-align-m-center,
	.ns-align-m-center :is(h1, h2, h3, h4, h5, h6, p, li) { text-align: center; }
	.ns-align-m-right,
	.ns-align-m-right :is(h1, h2, h3, h4, h5, h6, p, li) { text-align: right; }
	.ns-align-m-left :is(.wp-block-buttons, .is-layout-flex) { justify-content: flex-start; }
	.ns-align-m-center :is(.wp-block-buttons, .is-layout-flex) { justify-content: center; }
	.ns-align-m-right :is(.wp-block-buttons, .is-layout-flex) { justify-content: flex-end; }
}

/* ---------- Motion ----------
   Per section ("Turn off animations"), site-wide (Appearance → Nightshift →
   Animations) and for visitors who prefer reduced motion. */
.ns-motion-off,
.ns-motion-off *,
.ns-motion-off::before,
.ns-motion-off::after,
.ns-motion-off *::before,
.ns-motion-off *::after { animation: none !important; }
.ns-no-motion .ns-fx::before,
.ns-no-motion .ns-fx::after,
.ns-no-motion.ns-fx::before,
.ns-no-motion.ns-fx::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.ns-fx::before,
	.ns-fx::after { animation: none; }
}

/* =========================================================
   Phase C — entrance animations, image effects, stacking
   ========================================================= */

/* Entrance animations: variants of the theme's scroll reveal (motion.js). */
.ns-reveal--fade { --ns-reveal-from: none; }
.ns-reveal--slide-left { --ns-reveal-from: translateX(-40px); }
.ns-reveal--slide-right { --ns-reveal-from: translateX(40px); }
.ns-reveal--scale { --ns-reveal-from: scale(.94); }
/* Elements waiting to slide in must not widen the page. */
html:has(.ns-reveal--slide-left, .ns-reveal--slide-right) { overflow-x: clip; }
/* Staggered: the container stays put while its children appear in turn. */
.ns-js .ns-motion .ns-reveal-children.ns-reveal:not(.is-revealed) { opacity: 1; transform: none; }
/* "Turn off animations in this section" also covers entrance animations. */
.ns-motion-off.ns-reveal,
.ns-motion-off .ns-reveal,
.ns-motion-off .ns-reveal-item { opacity: 1 !important; transform: none !important; }

/* Hover effects (pointer devices). */
.wp-block-image.ns-hover--zoom,
.wp-block-cover.ns-hover--zoom,
.ns-hover--zoom .wp-block-media-text__media,
:is(.wp-block-group, .wp-block-column).ns-hover--zoom .wp-block-image { overflow: hidden; }
.ns-hover--zoom img,
.ns-hover--zoom video { transition: transform .9s var(--ns-ease); }
.ns-hover--lift { transition: transform .45s var(--ns-ease), box-shadow .45s var(--ns-ease); }
.ns-hover--glow { transition: box-shadow .45s var(--ns-ease), border-color .45s; }
@media (hover: hover) {
	.ns-hover--zoom:hover img,
	.ns-hover--zoom:hover video { transform: scale(1.06); }
	.ns-hover--lift:hover,
	.ns-hover--lift:focus-within {
		transform: translateY(calc(-6px * var(--ns-lift, 1)));
		box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--wp--custom--color--shadow) 70%, transparent);
	}
	.ns-hover--glow:hover,
	.ns-hover--glow:focus-within {
		box-shadow: 0 24px 60px -24px var(--ns-glow), 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
	}
}

/* Subtle parallax: the image drifts slightly as the section scrolls past.
   CSS scroll-driven animation; browsers without support show a still image. */
.wp-block-image.ns-parallax,
.ns-parallax .wp-block-media-text__media { overflow: hidden; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
	.wp-block-image.ns-parallax img,
	.wp-block-cover.ns-parallax > .wp-block-cover__image-background,
	.wp-block-cover.ns-parallax > .wp-block-cover__video-background,
	.wp-block-media-text.ns-parallax .wp-block-media-text__media img {
		scale: calc(1 + var(--ns-parallax, .3) * .22);
		animation: ns-parallax linear both;
		animation-timeline: view();
		animation-range: cover;
	}
}
}
@keyframes ns-parallax {
	from { translate: 0 calc(var(--ns-parallax, .3) * -9%); }
	to { translate: 0 calc(var(--ns-parallax, .3) * 9%); }
}

/* Motion preferences for image effects: parallax is only enabled above for
   visitors without a reduced-motion preference; the site-wide "Animations"
   switch and the per-section switch turn it off here. */
.ns-no-motion .ns-parallax :is(img, .wp-block-cover__image-background, .wp-block-cover__video-background),
.ns-no-motion .ns-parallax > :is(.wp-block-cover__image-background, .wp-block-cover__video-background) { animation: none !important; translate: none !important; }
@media (prefers-reduced-motion: reduce) {
	.ns-hover--zoom:hover img,
	.ns-hover--lift:hover,
	.ns-hover--lift:focus-within { transform: none; }
}

/* Stacking order on tablet (600–1023px) and mobile (<600px).
   Columns: side by side unless stacked; Media & Text: grid areas. */
@media (min-width: 600px) and (max-width: 1023px) {
	.wp-block-columns.ns-stack-t-stack { flex-wrap: wrap !important; }
	/* Reverse = full-width lines stacked bottom-to-top; keeps row direction so
	   the columns' own vertical alignment still behaves normally. */
	.wp-block-columns.ns-stack-t-stack-reverse { flex-wrap: wrap-reverse !important; }
	.wp-block-columns.ns-stack-t-stack > .wp-block-column,
	.wp-block-columns.ns-stack-t-stack-reverse > .wp-block-column { flex-basis: 100% !important; flex-grow: 1; }
	.wp-block-columns.ns-stack-t-two { flex-wrap: wrap !important; }
	.wp-block-columns.ns-stack-t-two > .wp-block-column { flex-basis: calc(50% - var(--wp--style--block-gap, 2em) / 2) !important; flex-grow: 0; }

	.wp-block-media-text.ns-stack-t-stack,
	.wp-block-media-text.ns-stack-t-stack-reverse { grid-template-columns: 100% !important; }
	.wp-block-media-text.ns-stack-t-stack > .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
	.wp-block-media-text.ns-stack-t-stack > .wp-block-media-text__content { grid-column: 1; grid-row: 2; }
	.wp-block-media-text.ns-stack-t-stack-reverse > .wp-block-media-text__media { grid-column: 1; grid-row: 2; }
	.wp-block-media-text.ns-stack-t-stack-reverse > .wp-block-media-text__content { grid-column: 1; grid-row: 1; }
}
@media (max-width: 599px) {
	.wp-block-columns.ns-stack-m-reverse { flex-wrap: wrap-reverse !important; }
	.wp-block-columns.ns-stack-m-reverse > .wp-block-column { flex-basis: 100% !important; }
	.wp-block-columns.ns-stack-m-side { flex-wrap: nowrap !important; }
	.wp-block-columns.ns-stack-m-side > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; }

	.wp-block-media-text.ns-stack-m-reverse.is-stacked-on-mobile > .wp-block-media-text__media { grid-column: 1; grid-row: 2; }
	.wp-block-media-text.ns-stack-m-reverse.is-stacked-on-mobile > .wp-block-media-text__content { grid-column: 1; grid-row: 1; }
	.wp-block-media-text.ns-stack-m-side.is-stacked-on-mobile { grid-template-columns: 50% 1fr !important; }
	.wp-block-media-text.ns-stack-m-side.is-stacked-on-mobile > .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
	.wp-block-media-text.ns-stack-m-side.is-stacked-on-mobile > .wp-block-media-text__content { grid-column: 2; grid-row: 1; }
	.wp-block-media-text.ns-stack-m-side.is-stacked-on-mobile.has-media-on-the-right { grid-template-columns: 1fr 50% !important; }
	.wp-block-media-text.ns-stack-m-side.is-stacked-on-mobile.has-media-on-the-right > .wp-block-media-text__media { grid-column: 2; }
	.wp-block-media-text.ns-stack-m-side.is-stacked-on-mobile.has-media-on-the-right > .wp-block-media-text__content { grid-column: 1; }
}

/* Split sections: the media column fills the row height. */
.ns-split > .wp-block-column > .wp-block-cover:only-child { height: 100%; }
.ns-split > .wp-block-column:has(> .wp-block-cover:only-child) { display: flex; flex-direction: column; }
.ns-split > .wp-block-column > .wp-block-cover:only-child { flex: 1 1 auto; }

/* Background video Pause/Play (added by assets/js/sections.js). */
.ns-video-toggle {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}
.ns-video-toggle::before {
	content: "";
	width: 12px;
	height: 14px;
	background: currentColor;
	-webkit-mask: linear-gradient(90deg, #000 0 35%, transparent 35% 65%, #000 65%);
	        mask: linear-gradient(90deg, #000 0 35%, transparent 35% 65%, #000 65%);
}
.ns-video-toggle.is-paused::before {
	width: 12px;
	-webkit-mask: none;
	        mask: none;
	clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}
.ns-video-toggle:hover { background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent); }
.ns-video-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* =========================================================
   Phase D — carousels (inc/sections/carousel.php + assets/js/carousel.js)
   ========================================================= */
.ns-carousel {
	--ns-cv: var(--ns-cv-m, 1);
	--ns-cg: var(--wp--preset--spacing--30);
	position: relative;
	display: flex;
	flex-direction: column;
}
@media (min-width: 600px) { .ns-carousel { --ns-cv: var(--ns-cv-t, 2); } }
@media (min-width: 1024px) { .ns-carousel { --ns-cv: var(--ns-cv-d, 3); } }
@media (max-width: 599px) { .ns-carousel--peek { --ns-cv: calc(var(--ns-cv-m, 1) + .22); } }
@media (min-width: 600px) and (max-width: 1023px) { .ns-carousel--peek { --ns-cv: calc(var(--ns-cv-t, 2) + .22); } }
.ns-carousel--gap-none { --ns-cg: 0px; }
.ns-carousel--gap-small { --ns-cg: var(--wp--preset--spacing--20); }
.ns-carousel--gap-large { --ns-cg: var(--wp--preset--spacing--50); }

/* The row of slides: native scroll-snap (swipe, trackpad, keyboard). */
/* Extra specificity: WooCommerce's responsive product grid uses !important. */
.ns-carousel .ns-carousel__track.ns-carousel__track,
.ns-carousel__track.ns-carousel__track.ns-carousel__track,
.ns-carousel .ns-carousel__track:is(.wc-block-product-template, .wp-block-term-template, .nsc-reviews__list),
.ns-carousel :is(.wc-block-product-template, .wp-block-term-template, .nsc-reviews__list) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	gap: var(--ns-cg) !important;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Room for hover lift and focus rings inside the scroll area. */
	padding-block: 12px !important;
	margin-block: -12px !important;
	list-style: none;
}
.ns-carousel__track::-webkit-scrollbar { display: none; }
.ns-carousel .ns-carousel__track.ns-carousel__track > *,
.ns-carousel__track.ns-carousel__track.ns-carousel__track > *,
.ns-carousel :is(.wc-block-product-template, .wp-block-term-template, .nsc-reviews__list) > * {
	flex: 0 0 calc((100% - (var(--ns-cv) - 1) * var(--ns-cg)) / var(--ns-cv)) !important;
	width: auto !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
.ns-carousel__track > figcaption { display: none; }
.ns-carousel__track > .block-list-appender { flex: 0 0 auto !important; align-self: center; }
.ns-carousel__track:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }

/* Image shape for every slide image (and Cover slides). */
.ns-carousel--ratio .ns-carousel__track > * img,
.ns-carousel--ratio .ns-carousel__track > figure img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--ns-cr);
	object-fit: cover;
}
.ns-carousel--ratio .ns-carousel__track > .wp-block-cover { aspect-ratio: var(--ns-cr); min-height: 0 !important; }
/* Editor: the block itself is the track (no server-side wrapper there). */
.editor-styles-wrapper .ns-carousel--ratio.ns-carousel__track > * img {
	width: 100%;
	height: auto !important;
	aspect-ratio: var(--ns-cr);
	object-fit: cover;
}
.editor-styles-wrapper .ns-carousel--ratio.ns-carousel__track > .wp-block-cover { aspect-ratio: var(--ns-cr); min-height: 0 !important; }

/* Controls (shown once the script runs; space is reserved from the start). */
.ns-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 44px;
	margin-top: var(--wp--preset--spacing--30);
}
html:not(.ns-js) .ns-carousel__controls,
html:not(.ns-js) .ns-carousel__pause { display: none; }
.ns-carousel.is-static .ns-carousel__controls { visibility: hidden; }
.ns-carousel__prev,
.ns-carousel__next,
.ns-carousel__pause {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--ns-button-radius);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s, opacity .25s;
}
.ns-carousel__prev::before,
.ns-carousel__next::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ns-carousel__prev::before { transform: scaleX(-1); }
:is(.ns-carousel__prev, .ns-carousel__next, .ns-carousel__pause):hover:not(:disabled) {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}
:is(.ns-carousel__prev, .ns-carousel__next, .ns-carousel__pause, .ns-carousel__dot):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
:is(.ns-carousel__prev, .ns-carousel__next):disabled { opacity: .35; cursor: default; }

/* Pagination: dots (default), progress bar, or "2 of 5". */
.ns-carousel__dots { display: flex; align-items: center; justify-content: center; min-height: 24px; }
.ns-carousel__dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.ns-carousel__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--border-strong);
	transition: width .3s var(--ns-ease), background-color .3s;
}
.ns-carousel__dot:hover::before { background: var(--wp--preset--color--contrast-muted); }
.ns-carousel__dot[aria-current="true"]::before { width: 22px; background: var(--wp--preset--color--accent); }
.ns-carousel--dots-bars .ns-carousel__dots {
	position: relative;
	width: min(180px, 40vw);
	min-height: 3px;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--border-strong);
	overflow: hidden;
}
.ns-carousel--dots-bars .ns-carousel__dots::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(max(.12, var(--ns-progress, 0)) * 100%);
	background: var(--wp--preset--color--accent);
	transition: width .3s var(--ns-ease);
}
.ns-carousel--dots-fraction .ns-carousel__dots {
	min-width: 64px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .1em;
	color: var(--wp--preset--color--contrast-muted);
}
.ns-carousel--dots-none .ns-carousel__dots { display: none; }

/* Arrow styles: below (default), overlaid on the slides, top-right, or none. */
.ns-carousel--arrows-overlay .ns-carousel__prev,
.ns-carousel--arrows-overlay .ns-carousel__next {
	position: absolute;
	z-index: 3;
	top: calc((100% - 44px - var(--wp--preset--spacing--30)) / 2 - 22px);
	background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
}
.ns-carousel--arrows-overlay .ns-carousel__prev { left: 12px; }
.ns-carousel--arrows-overlay .ns-carousel__next { right: 12px; }
.ns-carousel--arrows-top .ns-carousel__controls { order: -1; justify-content: flex-end; margin: 0 0 var(--wp--preset--spacing--30); }
/* Full-width carousels keep their controls inside the page gutter. */
.ns-carousel.alignfull > .ns-carousel__controls { padding-inline: var(--wp--style--root--padding-left, 24px) var(--wp--style--root--padding-right, 24px); }
.ns-carousel.alignfull > .ns-carousel__pause { right: max(12px, var(--wp--style--root--padding-right, 12px)); }
.ns-carousel--arrows-none :is(.ns-carousel__prev, .ns-carousel__next) { display: none; }
.ns-carousel--arrows-none.ns-carousel--dots-none .ns-carousel__controls { display: none; }

/* Pause/Play (only when autoplay is on). */
.ns-carousel__pause {
	position: absolute;
	z-index: 3;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
}
.ns-carousel--arrows-top .ns-carousel__pause { top: calc(44px + var(--wp--preset--spacing--30) + 12px); }
.ns-carousel__pause::before {
	content: "";
	width: 12px;
	height: 14px;
	background: currentColor;
	-webkit-mask: linear-gradient(90deg, #000 0 35%, transparent 35% 65%, #000 65%);
	        mask: linear-gradient(90deg, #000 0 35%, transparent 35% 65%, #000 65%);
}
.ns-carousel__pause.is-paused::before { -webkit-mask: none; mask: none; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }

/* Editor: same layout so the canvas shows slides side by side. */
.editor-styles-wrapper .ns-carousel__track { cursor: default; }
/* Product card titles at card size on the canvas and in pattern previews
   (the editor prints the theme's global heading sizes after theme styles). */
.editor-styles-wrapper .ns-card__title { font-size: 1.25rem; line-height: 1.1; }

/* Category carousel slides (pattern: Carousel: product categories). */
.ns-cat-slide > * { margin: 0; }
.ns-cat-slide .nsc-term-image { margin-bottom: var(--wp--preset--spacing--20); }
.ns-cat-slide__name a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.ns-cat-slide__name a::after { content: ""; position: absolute; inset: 0; }
.ns-cat-slide { position: relative; }
.ns-cat-slide__name a:focus-visible { outline: none; }
.ns-cat-slide:focus-within { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; border-radius: 16px; }
.ns-cat-slide__count { color: var(--wp--preset--color--secondary); }