/*
 * NUÁURA — homepage / landing sections
 *
 * Adapted from the VAYUÉ section set. What changed:
 *   · Palette swapped from VAYUÉ's gold-on-black to the NUÁURA palette
 *     decoded from the logo: silver #CBCBCB / #A9A9A9, black #141414,
 *     ivory #F5F3EF. NUÁURA is light-first, so the sections alternate
 *     ivory and black bands instead of running dark throughout.
 *   · Fonts: Cormorant Garamond + Jost (already enqueued site-wide).
 *   · Content swapped from attars to the real NUÁURA catalogue.
 *
 * Lives in the child theme because Elementor strips <style> on save —
 * paste only the markup into HTML widgets.
 */

.ns {
	--ns-ink:       #141414;
	--ns-ink-soft:  #55524e;
	--ns-silver:    #cbcbcb;
	--ns-silver-dk: #a9a9a9;
	--ns-ivory:     #f5f3ef;
	--ns-surface:   #ffffff;
	--ns-line:      #e4e1db;
	--ns-line-dk:   #2a2a2a;

	--ns-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--ns-body: "Jost", "Helvetica Neue", Arial, sans-serif;

	--ns-wrap: 1240px;

	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--ns-body);
}
.ns *, .ns *::before, .ns *::after { box-sizing: border-box; }

/* Full-bleed breakout. translateX(-50%) rather than the
   left:50% + margin-left:-50vw trick, which mis-renders when a
   scrollbar is present. */
.ns--bleed {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
}

/* Shared section head: rule — ✦ TITLE ✦ — rule */
.ns-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 auto 40px;
	width: 100%;
}
.ns-head__line { flex: 1 1 auto; max-width: 140px; height: 1px; background: var(--ns-line); }
.ns-head__spark { color: var(--ns-silver-dk); display: inline-flex; }
.ns-head__spark svg { width: 11px; height: 11px; }
.ns-head__title {
	margin: 0;
	white-space: nowrap;
	font-family: var(--ns-head);
	font-weight: 600;
	font-size: 30px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ns-ink);
	-webkit-text-fill-color: var(--ns-ink);
}
.ns-head__eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	/* silver (#a9a9a9) only reaches 2.35:1 on white — use the soft ink on
	   light sections; the .ns--dark variant below restores silver. */
	color: var(--ns-ink-soft);
	-webkit-text-fill-color: var(--ns-ink-soft);
	margin-bottom: 10px;
	text-align: center;
}
/* dark variant */
.ns--dark .ns-head__title { color: #fff; -webkit-text-fill-color: #fff; }
.ns--dark .ns-head__line { background: var(--ns-line-dk); }
.ns--dark .ns-head__spark { color: var(--ns-silver); }
.ns--dark .ns-head__eyebrow { color: var(--ns-silver); -webkit-text-fill-color: var(--ns-silver); }

/* =====================================================================
   1 · HERO CAROUSEL  (one responsive hero — the source had separate
   desktop and mobile files; a single component avoids them drifting)
   ===================================================================== */
.ns-hero { background: var(--ns-ivory); padding: 0; overflow: hidden; }
.ns-hero__viewport { position: relative; }
.ns-hero__track { position: relative; min-height: 520px; }
@media (min-width: 992px) { .ns-hero__track { min-height: 600px; } }

.ns-hero__slide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease;
	background: var(--ns-slide-soft, var(--ns-ivory));
}
.ns-hero__slide.is-active { opacity: 1; visibility: visible; position: relative; }
@media (min-width: 992px) { .ns-hero__slide { grid-template-columns: 1fr 1fr; } }

.ns-hero__copy {
	padding: 44px 22px 30px;
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
	order: 2;
}
@media (min-width: 992px) {
	.ns-hero__copy { padding: 60px 40px 60px 60px; text-align: left; order: 1; margin: 0 0 0 auto; }
}
.ns-hero__eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ns-slide-ink, var(--ns-silver-dk));
	-webkit-text-fill-color: var(--ns-slide-ink, var(--ns-silver-dk));
	margin: 0 0 12px;
}
.ns-hero__title {
	font-family: var(--ns-head);
	font-weight: 600;
	font-size: clamp(34px, 6vw, 62px);
	line-height: 1.05;
	letter-spacing: .01em;
	margin: 0 0 14px;
	color: var(--ns-ink);
	-webkit-text-fill-color: var(--ns-ink);
}
.ns-hero__text {
	font-size: 15px;
	line-height: 1.75;
	color: var(--ns-ink-soft);
	-webkit-text-fill-color: var(--ns-ink-soft);
	margin: 0 0 22px;
	max-width: 46ch;
}
@media (max-width: 991px) { .ns-hero__text { margin-left: auto; margin-right: auto; } }
.ns-hero__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	justify-content: center;
	margin: 0 0 22px;
	font-size: 20px;
	font-weight: 500;
	color: var(--ns-ink);
	-webkit-text-fill-color: var(--ns-ink);
}
@media (min-width: 992px) { .ns-hero__price { justify-content: flex-start; } }
.ns-hero__price del {
	font-size: 15px;
	font-weight: 400;
	color: var(--ns-silver-dk);
	-webkit-text-fill-color: var(--ns-silver-dk);
}
.ns-hero__media {
	order: 1;
	position: relative;
	min-height: 260px;
	background: var(--ns-slide-soft, var(--ns-ivory));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
@media (min-width: 992px) { .ns-hero__media { order: 2; min-height: 600px; } }
.ns-hero__media img {
	width: 100%;
	height: 100%;
	max-height: 560px;
	object-fit: contain;
	padding: 18px;
	display: block;
}

.ns-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	height: 52px;
	padding: 0 30px;
	border: 1px solid var(--ns-ink);
	border-radius: 2px;
	background: var(--ns-ink);
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	font-family: var(--ns-body);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background .22s ease, color .22s ease;
}
.ns-btn:hover { background: #000; color: #fff !important; -webkit-text-fill-color: #fff; }
.ns-btn--ghost {
	background: transparent;
	color: var(--ns-ink) !important;
	-webkit-text-fill-color: var(--ns-ink);
	margin-left: 10px;
}
.ns-btn--ghost:hover { background: var(--ns-ink); color: #fff !important; -webkit-text-fill-color: #fff; }

.ns-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--ns-line);
	background: rgba(255,255,255,.92);
	color: var(--ns-ink);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0;
	transition: background .2s ease, color .2s ease;
}
.ns-hero__nav:hover { background: var(--ns-ink); color: #fff; }
.ns-hero__nav svg { width: 19px; height: 19px; }
.ns-hero__nav--prev { left: 14px; }
.ns-hero__nav--next { right: 14px; }
@media (max-width: 767px) { .ns-hero__nav { display: none; } }

.ns-hero__dots {
	position: absolute;
	left: 0; right: 0; bottom: 14px;
	display: flex; justify-content: center; gap: 8px;
	z-index: 5;
}
.ns-hero__dot {
	width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
	background: var(--ns-silver); cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.ns-hero__dot.is-active { background: var(--ns-ink); transform: scale(1.3); }

/* =====================================================================
   2 · OFFERS MARQUEE
   ===================================================================== */
.ns-marquee {
	background: var(--ns-ink);
	border-top: 1px solid var(--ns-line-dk);
	border-bottom: 1px solid var(--ns-line-dk);
	padding: 11px 0;
	overflow: hidden;
}
.ns-marquee__track {
	display: flex;
	gap: 0;
	width: max-content;
	white-space: nowrap;
	animation: nsMarquee 30s linear infinite;
}
.ns-marquee:hover .ns-marquee__track { animation-play-state: paused; }
.ns-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0 26px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.ns-marquee__item::after {
	content: "";
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--ns-silver-dk);
	display: inline-block;
}
@keyframes nsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   3 · SHOP BY CATEGORY
   ===================================================================== */
.ns-cat { background: var(--ns-surface); padding: 64px 20px; text-align: center; }
.ns-cat__inner { max-width: var(--ns-wrap); margin: 0 auto; }
.ns-cat__grid {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 22px 16px;
	max-width: 1000px; margin: 0 auto;
}
.ns-cat__item {
	text-decoration: none;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	flex: 0 0 calc((100% - 5 * 16px) / 6);
	min-width: 92px;
}
.ns-cat__disc {
	width: 100%; max-width: 132px; aspect-ratio: 1/1; border-radius: 50%;
	background: var(--ns-ivory); overflow: hidden; position: relative;
	border: 1px solid var(--ns-line);
	display: flex; align-items: center; justify-content: center;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ns-cat__disc img {
	width: 100%; height: 100%; object-fit: contain; padding: 12px;
	position: absolute; inset: 0; z-index: 2;
	transition: transform .5s ease;
}
.ns-cat__ph { position: relative; width: 26px; height: 26px; color: var(--ns-silver-dk); }
.ns-cat__item:hover .ns-cat__disc {
	transform: translateY(-6px);
	border-color: var(--ns-silver-dk);
	box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
.ns-cat__item:hover .ns-cat__disc img { transform: scale(1.07); }
.ns-cat__name {
	font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ns-ink-soft); -webkit-text-fill-color: var(--ns-ink-soft);
	transition: color .3s ease;
}
.ns-cat__item:hover .ns-cat__name { color: var(--ns-ink); -webkit-text-fill-color: var(--ns-ink); }

@media (max-width: 860px) {
	.ns-cat { padding: 50px 20px; }
	.ns-cat__item { flex: 0 0 calc((100% - 3 * 16px) / 4); min-width: 80px; }
	.ns-head__line { max-width: 70px; }
	.ns-head__title { font-size: 23px; }
}
@media (max-width: 520px) {
	.ns-cat { padding: 40px 16px; }
	.ns-cat__grid { gap: 26px 10px; }
	.ns-cat__item { flex: 0 0 calc((100% - 2 * 10px) / 3); min-width: 0; gap: 10px; }
	.ns-head__title { font-size: 17px; letter-spacing: .06em; white-space: normal; }
	.ns-head__line { max-width: 26px; }
	.ns-cat__name { font-size: 10px; letter-spacing: .06em; }
}

/* =====================================================================
   4 · SCROLLING TRUST STRIP
   ===================================================================== */
.ns-strip {
	width: 100%; overflow: hidden; padding: 18px 0;
	background: var(--ns-ivory);
	border-top: 1px solid var(--ns-line);
	border-bottom: 1px solid var(--ns-line);
}
.ns-strip__track { display: flex; width: max-content; align-items: center; animation: nsStrip 42s linear infinite; }
.ns-strip:hover .ns-strip__track { animation-play-state: paused; }
.ns-strip__item { text-align: center; margin: 0 26px; min-width: 148px; }
.ns-strip__item svg { width: 28px; height: 28px; color: var(--ns-ink); display: block; margin: 0 auto; }
.ns-strip__item p {
	margin: 9px 0 0 !important;
	font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ns-ink-soft); -webkit-text-fill-color: var(--ns-ink-soft);
}
@keyframes nsStrip { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   5 · STATIC TRUST GRID
   ===================================================================== */
.ns-trust { width: 100%; padding: 54px 0; background: var(--ns-surface); }
.ns-trust__row {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
	max-width: 940px; margin: auto; text-align: center; padding: 0 16px;
}
.ns-trust__circle {
	width: 74px; height: 74px; border-radius: 50%;
	background: var(--ns-ivory);
	border: 1px solid var(--ns-line);
	display: flex; justify-content: center; align-items: center; margin: 0 auto 14px;
	transition: border-color .3s ease, transform .3s ease;
}
.ns-trust__icon:hover .ns-trust__circle { border-color: var(--ns-silver-dk); transform: translateY(-4px); }
.ns-trust__circle svg { width: 28px; height: 28px; color: var(--ns-ink); }
.ns-trust__icon p {
	font-size: 12.5px; font-weight: 500; letter-spacing: .08em;
	color: var(--ns-ink); -webkit-text-fill-color: var(--ns-ink);
	line-height: 1.5; margin: 0; text-transform: uppercase;
}
.ns-trust__icon span {
	display: block; margin-top: 4px;
	font-size: 11.5px; letter-spacing: .02em; text-transform: none;
	color: var(--ns-ink-soft); -webkit-text-fill-color: var(--ns-ink-soft);
}
@media (max-width: 768px) {
	.ns-trust__row { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
	.ns-trust__circle { width: 64px; height: 64px; }
	.ns-trust__circle svg { width: 24px; height: 24px; }
}

/* =====================================================================
   6 · REVIEWS CAROUSEL
   ===================================================================== */
.ns-reviews {
	padding: 60px 20px;
	background: var(--ns-ink);
	overflow: hidden;
}
.ns-reviews__track {
	display: flex; width: max-content; gap: 20px;
	animation: nsReviews 48s linear infinite;
}
.ns-reviews:hover .ns-reviews__track { animation-play-state: paused; }
@keyframes nsReviews { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ns-card {
	width: 320px; flex: 0 0 320px;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--ns-line-dk);
	padding: 26px 24px;
	display: flex; flex-direction: column; gap: 12px;
}
.ns-card__stars { color: var(--ns-silver); display: flex; gap: 3px; }
.ns-card__stars svg { width: 13px; height: 13px; }
.ns-card__quote {
	font-family: var(--ns-head);
	font-size: 18px; line-height: 1.55; margin: 0;
	color: #fff !important; -webkit-text-fill-color: #fff !important;
}
.ns-card__author { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 8px; }
.ns-card__avatar {
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--ns-silver-dk);
	color: var(--ns-ink) !important; -webkit-text-fill-color: var(--ns-ink) !important;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 600;
	flex: 0 0 36px;
}
.ns-card__who { display: flex; flex-direction: column; }
.ns-card__name {
	font-size: 12.5px; font-weight: 500; letter-spacing: .06em;
	color: #fff !important; -webkit-text-fill-color: #fff !important;
}
.ns-card__meta {
	font-size: 11px; letter-spacing: .04em;
	color: var(--ns-silver-dk) !important; -webkit-text-fill-color: var(--ns-silver-dk) !important;
}

@media (max-width: 520px) {
	.ns-card { width: 265px; flex: 0 0 265px; padding: 22px 20px; }
	.ns-card__quote { font-size: 16px; }
	.ns-reviews { padding: 46px 0 50px; }
}

@media (prefers-reduced-motion: reduce) {
	.ns-marquee__track, .ns-strip__track, .ns-reviews__track { animation: none; }
	.ns-cat__disc, .ns-cat__disc img, .ns-hero__slide { transition: none; }
}

/*
 * Deliberately NO @media (prefers-color-scheme: dark) block.
 * Light sections pin dark ink and dark sections pin white with both
 * `color` and `-webkit-text-fill-color`, so a device in dark mode cannot
 * repaint either into invisibility.
 */

/* =====================================================================
   7 · HERO BANNER CAROUSEL  (artwork with baked-in text)
   Adapted from the VAYUÉ index6/index7 pair. Differences:
     · One responsive component instead of a desktop file + a mobile file,
       so the two cannot drift apart.
     · Chrome recoloured from VAYUÉ gold to NUÁURA silver.
     · --nsb-ratio matches the supplied artwork EXACTLY (1600x686), so
       object-fit: cover crops nothing at any width. If you swap in
       artwork of a different shape you MUST update this or the sides
       will be cut off. Keep all slides identical in size to each other.
   The slide change is pure CSS keyframes, so it keeps cycling even if a
   page builder strips the <script>. JS is enhancement only.
   ===================================================================== */
.nsb {
	--nsb-ratio: 1600 / 686;
	--nsb-step: 5s;
	--nsb-silver: #cbcbcb;
	--nsb-bg: #141414;

	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--nsb-bg);
	display: block;
}
.nsb *, .nsb *::before, .nsb *::after { box-sizing: border-box; }

.nsb__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: var(--nsb-ratio);
	overflow: hidden;
}

/* Four slots: 1, 2, 3, then a duplicate of 1 so the wrap is invisible. */
.nsb__track {
	display: flex;
	width: 400%;
	height: 100%;
	animation: nsbCycle calc(var(--nsb-step) * 4) infinite;
	will-change: transform;
}
.nsb__slide { flex: 0 0 25%; width: 25%; height: 100%; position: relative; }
.nsb__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes nsbCycle {
	0%,   21.5% { transform: translateX(0%); }
	25%,  46.5% { transform: translateX(-25%); }
	50%,  71.5% { transform: translateX(-50%); }
	75%, 100%   { transform: translateX(-75%); }
}
.nsb:hover .nsb__track { animation-play-state: paused; }

/* Once the script loads it drives the track itself. */
.nsb.is-js .nsb__track {
	animation: none;
	transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}

/* ---- arrows ---- */
.nsb__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 52px; height: 52px;
	display: none;                 /* shown only once JS is running */
	align-items: center; justify-content: center;
	padding: 0;
	border: 1px solid rgba(255,255,255,.42);
	border-radius: 50%;
	background: rgba(20,20,20,.42);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.nsb.is-js .nsb__nav { display: flex; }
.nsb__nav:hover { background: #fff; border-color: #fff; color: #141414; }
.nsb__nav svg { width: 22px; height: 22px; }
.nsb__nav--prev { left: 26px; }
.nsb__nav--next { right: 26px; }

/* Scrim so the dots stay readable over any artwork. Banner 1 is a warm
   mid-tone at the bottom (#A8815D) and 2/3 are near-black, so a single
   dark scrim serves all three without changing how the art reads. */
.nsb__viewport::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 92px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to top, rgba(10,10,10,.55), rgba(10,10,10,0));
}

/* ---- dots ---- */
.nsb__dots {
	position: absolute;
	left: 0; right: 0; bottom: 24px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.nsb__dot {
	width: 34px; height: 3px;
	padding: 0; border: 0; border-radius: 2px;
	background: rgba(255,255,255,.38);
	cursor: pointer;
	overflow: hidden;
	position: relative;
}
.nsb__dot::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--nsb-silver);
	transform: scaleX(0);
	transform-origin: left;
}
/* Without JS the dots fill on the same clock as the slides. */
.nsb__dot:nth-child(1)::after { animation: nsbDot calc(var(--nsb-step) * 4) infinite; }
.nsb__dot:nth-child(2)::after { animation: nsbDot calc(var(--nsb-step) * 4) infinite; animation-delay: var(--nsb-step); }
.nsb__dot:nth-child(3)::after { animation: nsbDot calc(var(--nsb-step) * 4) infinite; animation-delay: calc(var(--nsb-step) * 2); }
@keyframes nsbDot {
	0%   { transform: scaleX(0); }
	25%  { transform: scaleX(1); }
	26%, 100% { transform: scaleX(0); }
}
.nsb:hover .nsb__dot::after { animation-play-state: paused; }
/* With JS the active dot is simply filled. */
.nsb.is-js .nsb__dot::after { animation: none; transition: transform .4s ease; }
.nsb.is-js .nsb__dot.is-active::after { transform: scaleX(1); }

@media (max-width: 1024px) {
	.nsb__nav { width: 44px; height: 44px; }
	.nsb__nav--prev { left: 14px; }
	.nsb__nav--next { right: 14px; }
	.nsb__dots { bottom: 16px; }
}
@media (max-width: 767px) {
	/* The dedicated square mobile banner (.nsb-m below) takes over here —
	   purpose-shot 1000x1000 artwork, not a cropped landscape banner. */
	.nsb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nsb__track { animation: none; transition: none; }
	.nsb__dot::after { animation: none; }
}

/* =====================================================================
   8 · HERO BANNER CAROUSEL — MOBILE  (square artwork, swipe-driven)
   Adapted from index7.html (VAYUÉ). Pair with .nsb above:
     .nsb    visible >= 768px  ·  hidden on phones
     .nsb-m  visible <  768px  ·  hidden on tablet + desktop
   Square artwork on purpose — a 2.33:1 landscape crop on a narrow phone
   leaves a strip only ~160px tall and can cut the wordmark and bottle.
   If you swap the images, keep them square or update --nsbm-ratio.
   ===================================================================== */
.nsb-m {
	--nsbm-ratio: 1 / 1;
	--nsbm-step: 5s;
	--nsbm-silver: #cbcbcb;
	--nsbm-bg: #141414;

	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--nsbm-bg);
	display: none;                 /* hidden on tablet + desktop */
}
.nsb-m *, .nsb-m *::before, .nsb-m *::after { box-sizing: border-box; }
@media (max-width: 767px) { .nsb-m { display: block; } }

.nsb-m__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: var(--nsbm-ratio);
	overflow: hidden;
	touch-action: pan-y;           /* let the page scroll vertically */
}

.nsb-m__track {
	display: flex;
	width: 400%;
	height: 100%;
	animation: nsbmCycle calc(var(--nsbm-step) * 4) infinite;
	will-change: transform;
}
.nsb-m__slide { flex: 0 0 25%; width: 25%; height: 100%; }
.nsb-m__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes nsbmCycle {
	0%,   21.5% { transform: translateX(0%); }
	25%,  46.5% { transform: translateX(-25%); }
	50%,  71.5% { transform: translateX(-50%); }
	75%, 100%   { transform: translateX(-75%); }
}
.nsb-m.is-js .nsb-m__track { animation: none; transition: transform 650ms cubic-bezier(.22,.61,.36,1); }
.nsb-m.is-js.is-dragging .nsb-m__track { transition: none; }

/* dots only — swipe replaces arrows on a phone */
.nsb-m__dots {
	position: absolute;
	left: 0; right: 0;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.nsb-m__dot {
	width: 28px; height: 3px;
	padding: 0; border: 0; border-radius: 2px;
	background: rgba(255,255,255,.38);
	box-shadow: 0 1px 4px rgba(0,0,0,.55);
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.nsb-m__dot::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--nsbm-silver);
	transform: scaleX(0);
	transform-origin: left;
}
.nsb-m__dot:nth-child(1)::after { animation: nsbmDot calc(var(--nsbm-step) * 4) infinite; }
.nsb-m__dot:nth-child(2)::after { animation: nsbmDot calc(var(--nsbm-step) * 4) infinite; animation-delay: var(--nsbm-step); }
.nsb-m__dot:nth-child(3)::after { animation: nsbmDot calc(var(--nsbm-step) * 4) infinite; animation-delay: calc(var(--nsbm-step) * 2); }
@keyframes nsbmDot {
	0%   { transform: scaleX(0); }
	25%  { transform: scaleX(1); }
	26%, 100% { transform: scaleX(0); }
}
.nsb-m.is-js .nsb-m__dot::after { animation: none; transition: transform .4s ease; }
.nsb-m.is-js .nsb-m__dot.is-active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.nsb-m__track { animation: none; transition: none; }
	.nsb-m__dot::after { animation: none; }
}