/* =========================================================================
   Naim Shop — Widget Interactions CSS
   Countdown Timer + Carousel/Slider Styles
   ========================================================================= */

/* ---------- Countdown Timer ---------- */
.ns-countdown {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	font-weight: 700;
}
.ns-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 50px;
}
.ns-countdown__val {
	background: #1f2937;
	color: #fff;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	min-width: 52px;
	text-align: center;
}
.ns-countdown__label {
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ---------- Arrow / dot carousel (manual scroll) ---------- */
.ns-carousel-wrap { position: relative; }
.ns-scroller {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	gap: 18px;
	padding: 6px 2px 12px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	grid-template-columns: none !important;
}
.ns-scroller::-webkit-scrollbar { display: none; }
.ns-scroller > * {
	flex: 0 0 auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
/* Auto-loop (Flash Sale) — no manual scroll / snap. */
.ns-scroller--auto { overflow-x: hidden !important; scroll-snap-type: none !important; }

/* Category row uses a tighter gap. */
.ns-cat-grid.ns-scroller { gap: 6px; }

/* Product rows: show 5 per view. Category row: show 6 per view (tight gap). */
@media (min-width: 1200px) {
	.ns-products.ns-scroller > * { width: calc((100% - 4 * 18px) / 5); }
	.ns-cat-grid.ns-scroller > * { width: calc((100% - 5 * 6px) / 6); }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.ns-products.ns-scroller > * { width: calc((100% - 3 * 18px) / 4); }
	.ns-cat-grid.ns-scroller > * { width: calc((100% - 4 * 6px) / 5); }
}
@media (min-width: 480px) and (max-width: 767px) {
	.ns-products.ns-scroller > * { width: calc((100% - 2 * 18px) / 3); }
	.ns-cat-grid.ns-scroller > * { width: calc((100% - 3 * 6px) / 4); }
}
@media (max-width: 479px) {
	.ns-products.ns-scroller > * { width: calc((100% - 18px) / 2); }
	.ns-cat-grid.ns-scroller > * { width: calc((100% - 6px) / 3); }
}

/* Prev / Next arrows — hidden until the row is hovered. */
.ns-arrow {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 8;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #1f2937;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .16);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.ns-carousel-wrap.ns-has-scroll .ns-arrow { opacity: 1; visibility: visible; }
.ns-arrow:hover { background: #6366f1; color: #fff; border-color: #6366f1; }
.ns-arrow.is-disabled { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.ns-arrow--prev { left: -6px; }
.ns-arrow--next { right: -6px; }

/* Pagination dots (category). */
.ns-dots { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.ns-dot { width: 9px; height: 9px; border-radius: 999px; border: 0; background: #cbd5e1; cursor: pointer; padding: 0; transition: width .2s ease, background .2s ease; }
.ns-dot.active { width: 24px; background: #6366f1; }

/* Touch: keep arrows visible (no hover) on coarse pointers. */
@media (hover: none) {
	.ns-carousel-wrap.ns-has-scroll .ns-arrow { opacity: 1; visibility: visible; }
}

/* ---------- Load More (Latest Products grid) ---------- */
.ns-loadmore-wrap { text-align: center; margin-top: 26px; }
.ns-loadmore {
	background: var(--ns-primary);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 13px 40px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--ns-primary) 32%, transparent);
	transition: transform .15s ease, filter .18s ease;
}
.ns-loadmore:hover { background: var(--ns-navy); }
.ns-loadmore:hover { transform: translateY(-2px); filter: brightness(1.06); }
.ns-loadmore.is-loading { opacity: .7; pointer-events: none; }

/* ==========================================================================
   HERO BANNER SLIDER — one continuous, premium banner for every demo.

   How the merge works (no "two images side by side" look):
   1. .ns-hero__wash  — the same product photo, blurred, covers the whole
                        banner and bleeds the photo's colours into the copy side.
   2. .ns-hero__media — the sharp photo sits on the right, feathered into that
                        ambient layer with a wide horizontal mask.
   3. .ns-hero--photo::after — a brand-tinted scrim over the copy side keeps
                        the headline and paragraph fully readable.

   Every colour comes from the per-scheme custom properties in the palette
   section below, so the same markup fits Fashion, Grocery, Tech, Mango,
   Digital, Organic, Gadget and every future demo.
   ========================================================================== */

.ns-hero-slider.ns-banner-slider {
	position: relative;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(118deg, #eef1ff 0%, #e6e9ff 55%, #dfe4ff 100%);
	box-shadow: 0 24px 60px -30px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .05);
	isolation: isolate;
}

/* ---- Slide shell ------------------------------------------------------- */
.ns-hero-slider .ns-banner-slide {
	position: relative;
	display: none;
	align-items: stretch;
	min-height: 430px;
	padding: 0;
	border-radius: 20px;
	color: var(--h-ink, #1e293b);
	background: var(--h-bg, linear-gradient(118deg, #eef1ff 0%, #dfe4ff 100%));
	overflow: hidden;
	isolation: isolate;
}
.ns-hero-slider .ns-banner-slide.active { display: flex !important; }
/* No-JS fallback: the first slide is visible until the slider script runs. */
.ns-hero-slider .ns-banner-slide:first-of-type { display: flex; }

/* ---- Layer 1: ambient wash (blurred copy of the photo) ------------------ */
.ns-hero-slider .ns-hero__wash {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: var(--h-bg, linear-gradient(118deg, #eef1ff 0%, #dfe4ff 100%));
}
.ns-hero-slider .ns-hero__bgimg {
	position: absolute;
	inset: -12%;
	width: 124%;
	height: 124%;
	object-fit: cover;
	object-position: 62% 50%;
	filter: blur(46px) saturate(1.22) brightness(1.04);
	transform: scale(1.06);
	opacity: .95;
	display: block;
}

/* ---- Layer 2: the sharp product photo, feathered into the wash --------- */
.ns-hero-slider .ns-hero__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 26%;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	/* Soft top/bottom edges so the photo never ends on a hard line. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.ns-hero-slider .ns-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 52% 48%;
	filter: saturate(1.05) contrast(1.02);
	/* Wide feather: the photo melts into the tinted copy side. */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .12) 14%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .92) 42%, #000 54%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .12) 14%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .92) 42%, #000 54%);
}

/* ---- Layer 3: brand scrim that keeps the copy readable ----------------- */
.ns-hero-slider .ns-banner-slide.ns-hero--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(100deg, var(--h-base, #eef0ff) 0%, color-mix(in srgb, var(--h-base, #eef0ff) 92%, transparent) 28%, color-mix(in srgb, var(--h-base, #eef0ff) 55%, transparent) 46%, transparent 64%);
	background:
		radial-gradient(ellipse 54% 92% at 22% 50%, var(--h-base, #eef0ff) 0%, color-mix(in srgb, var(--h-base, #eef0ff) 74%, transparent) 58%, transparent 82%),
		linear-gradient(100deg, var(--h-base, #eef0ff) 0%, color-mix(in srgb, var(--h-base, #eef0ff) 92%, transparent) 28%, color-mix(in srgb, var(--h-base, #eef0ff) 55%, transparent) 46%, color-mix(in srgb, var(--h-base, #eef0ff) 26%, transparent) 68%, color-mix(in srgb, var(--h-base, #eef0ff) 8%, transparent) 86%, transparent 100%),
		linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 26%);
}

/* Inner hairline + soft grounding shadow (painted above the scrim). */
.ns-hero-slider .ns-banner-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 -46px 60px -46px rgba(15, 23, 42, .22);
}

/* ---- Copy column ------------------------------------------------------- */
.ns-hero-slider .ns-hero__copy {
	position: relative;
	z-index: 3;
	flex: 0 0 54%;
	max-width: 660px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	padding: 54px 28px 54px 54px;
	min-width: 0;
}

.ns-hero-slider .ns-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--h-accent, #4338ca);
	opacity: 1;
}
.ns-hero-slider .ns-hero__eyebrow::before {
	content: "";
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: .75;
}

.ns-hero-slider .ns-hero__title {
	margin: 0 0 14px;
	font-size: clamp(32px, 3.9vw, 54px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.024em;
	color: var(--h-ink, #1e293b);
	max-width: 15ch;
	text-wrap: balance;
}

.ns-hero-slider .ns-hero__text {
	margin: 0 0 26px;
	max-width: 42ch;
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--h-muted, #64748b);
	opacity: 1;
}

/* ---- Call to action: solid pill + arrow -------------------------------- */
.ns-hero-slider .ns-hero__main .ns-hero__cta,
.ns-hero-slider .ns-hero__main .ns-btn--primary {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 30px;
	border-radius: 999px;
	background: var(--h-accent, #4338ca);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border: 0;
	box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--h-accent, #4338ca) 62%, transparent);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ns-hero-slider .ns-hero__main .ns-hero__cta::after {
	content: "\2192";
	font-weight: 900;
	line-height: 1;
	transition: transform .18s ease;
}
.ns-hero-slider .ns-hero__main .ns-hero__cta:hover,
.ns-hero-slider .ns-hero__main .ns-btn--primary:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	color: #fff;
	box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--h-accent, #4338ca) 72%, transparent);
}
.ns-hero-slider .ns-hero__main .ns-hero__cta:hover::after { transform: translateX(4px); }

/* ---- Feature strip / handwritten note (kept for existing content) ------ */
.ns-hero-slider .ns-hero__features {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--h-muted, #64748b);
}
.ns-hero-slider .ns-hero__features li { display: inline-flex; align-items: center; gap: 7px; }
.ns-hero-slider .ns-hero__features .ns-icon { width: 15px; height: 15px; background-color: var(--h-accent, #4338ca); }
.ns-hero-slider .ns-hero__feature-txt { display: inline-flex; flex-direction: column; line-height: 1.25; }
.ns-hero-slider .ns-hero__feature-txt strong { font-weight: 700; color: var(--h-ink, #1e293b); }
.ns-hero-slider .ns-hero__feature-txt em { font-style: normal; font-size: 11.5px; opacity: .8; }
.ns-hero-slider .ns-hero__note {
	margin-top: 18px;
	font-size: 13px;
	font-style: italic;
	color: var(--h-accent, #4338ca);
	opacity: .9;
}

/* ---- Slides without a photo: one centred column ------------------------ */
.ns-hero-slider .ns-banner-slide:not(.ns-hero--photo) .ns-hero__copy {
	flex: 0 0 100%;
	max-width: none;
	padding-right: 54px;
}
.ns-hero-slider .ns-banner-slide:not(.ns-hero--photo) .ns-hero__title { max-width: 20ch; }

/* ---- Offer badge: starburst pinned to the top-right -------------------- */
.ns-hero-slider .ns-hero__badge {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	margin: 0;
	padding: 0 13px;
	border-radius: 0;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: .02em;
	background-color: var(--h-badge, #065f46);
	background-image: linear-gradient(158deg, color-mix(in srgb, var(--h-badge, #065f46) 74%, #fff) 0%, var(--h-badge, #065f46) 100%);
	filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .24));
	-webkit-clip-path: polygon(50.0% 0.0%, 58.0% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%, 84.1% 27.2%, 96.2% 30.9%, 90.2% 42.0%, 100.0% 50.0%, 90.2% 58.0%, 96.2% 69.1%, 84.1% 72.8%, 85.4% 85.4%, 72.8% 84.1%, 69.1% 96.2%, 58.0% 90.2%, 50.0% 100.0%, 42.0% 90.2%, 30.9% 96.2%, 27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58.0%, 0.0% 50.0%, 9.8% 42.0%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%, 30.9% 3.8%, 42.0% 9.8%);
	clip-path: polygon(50.0% 0.0%, 58.0% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%, 84.1% 27.2%, 96.2% 30.9%, 90.2% 42.0%, 100.0% 50.0%, 90.2% 58.0%, 96.2% 69.1%, 84.1% 72.8%, 85.4% 85.4%, 72.8% 84.1%, 69.1% 96.2%, 58.0% 90.2%, 50.0% 100.0%, 42.0% 90.2%, 30.9% 96.2%, 27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58.0%, 0.0% 50.0%, 9.8% 42.0%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%, 30.9% 3.8%, 42.0% 9.8%);
}

/* ---- Prev / Next arrows ------------------------------------------------ */
.ns-banner-prev,
.ns-banner-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 7;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(15, 23, 42, .08);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--h-ink, #1e293b);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(15, 23, 42, .14);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, background .2s ease, transform .2s ease, color .2s ease;
}
.ns-hero-slider:hover .ns-banner-prev,
.ns-hero-slider:hover .ns-banner-next,
.ns-hero-slider:focus-within .ns-banner-prev,
.ns-hero-slider:focus-within .ns-banner-next { opacity: 1; visibility: visible; }
.ns-banner-prev { left: 14px; }
.ns-banner-next { right: 14px; }
.ns-banner-prev:hover,
.ns-banner-next:hover {
	background: #fff;
	color: var(--h-accent, #4338ca);
	transform: translateY(-50%) scale(1.06);
}
@media (hover: none) {
	.ns-banner-prev, .ns-banner-next { opacity: 1; visibility: visible; }
}

/* ---- Dots: a small glass pill, readable on top of the photo ------------ */
.ns-banner-dots {
	position: absolute;
	left: 50%;
	right: auto;
	bottom: 16px;
	z-index: 7;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	padding: 7px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
	transform: translateX(-50%);
}
.ns-banner-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	border: 0;
	background: color-mix(in srgb, var(--h-ink, #1e293b) 26%, transparent);
	cursor: pointer;
	padding: 0;
	transition: width .2s ease, background .2s ease;
}
.ns-banner-dot.active {
	width: 24px;
	background: var(--h-accent, #4338ca);
	transform: none;
}

/* ==========================================================================
   Per-scheme palettes. Each scheme sets the same six custom properties, so
   the banner, feathering, scrim and badge all follow the demo's brand colour.
   --h-base is the flat tint used by the scrim/mask layers.
   ========================================================================== */
.ns-hero--indigo {
	--h-base: #eef0ff;
	--h-bg: linear-gradient(118deg, #eef0ff 0%, #e6e9ff 52%, #dde2ff 100%);
	--h-ink: #1e1b4b;
	--h-muted: #5b5f7d;
	--h-accent: var(--ns-primary, #3730c4);
	--h-badge: var(--ns-navy, #171c8f);
}
.ns-hero--navy {
	--h-base: #eaf1ff;
	--h-bg: linear-gradient(118deg, #eaf1ff 0%, #e2ebfd 52%, #d8e4fb 100%);
	--h-ink: #10214a;
	--h-muted: #55637e;
	--h-accent: #1e3a8a;
	--h-badge: #172c8f;
}
.ns-hero--purple {
	--h-base: #f4edff;
	--h-bg: linear-gradient(118deg, #f4edff 0%, #efe6ff 52%, #e9dcff 100%);
	--h-ink: #3b1d6e;
	--h-muted: #6b5a86;
	--h-accent: #7c3aed;
	--h-badge: #5b21b6;
}
.ns-hero--lavender {
	--h-base: #f5f3ff;
	--h-bg: linear-gradient(118deg, #f5f3ff 0%, #f0ecff 52%, #eae4ff 100%);
	--h-ink: #2e2a5e;
	--h-muted: #625d85;
	--h-accent: #6366f1;
	--h-badge: #4c1d95;
}
.ns-hero--green {
	--h-base: #eafaf0;
	--h-bg: linear-gradient(118deg, #eafaf0 0%, #e0f6ea 52%, #d3f0e2 100%);
	--h-ink: #053f2b;
	--h-muted: #4a6d5f;
	--h-accent: #0f8a4d;
	--h-badge: #065f46;
}
.ns-hero--teal {
	--h-base: #e9f9f1;
	--h-bg: linear-gradient(118deg, #e9f9f1 0%, #ddf4ea 52%, #cfeede 100%);
	--h-ink: #064e3b;
	--h-muted: #4b6b62;
	--h-accent: #0d7a5f;
	--h-badge: #065f46;
}
.ns-hero--cyan {
	--h-base: #e8f7fd;
	--h-bg: linear-gradient(118deg, #e8f7fd 0%, #ddf2fc 52%, #d0ecfa 100%);
	--h-ink: #0b3b52;
	--h-muted: #4a6b7c;
	--h-accent: #0e7490;
	--h-badge: #0369a1;
}
.ns-hero--orange {
	--h-base: #fff3e8;
	--h-bg: linear-gradient(118deg, #fff3e8 0%, #ffebdb 52%, #ffe1c9 100%);
	--h-ink: #5c2a08;
	--h-muted: #7d5a44;
	--h-accent: #ea6a12;
	--h-badge: #c2410c;
}
.ns-hero--sunset {
	--h-base: #fff1ec;
	--h-bg: linear-gradient(118deg, #fff1ec 0%, #ffe8e2 52%, #ffdcd6 100%);
	--h-ink: #5a1a2e;
	--h-muted: #7f5563;
	--h-accent: #e2467a;
	--h-badge: #be185d;
}
.ns-hero--pink {
	--h-base: #fdeef6;
	--h-bg: linear-gradient(118deg, #fdeef6 0%, #fce5f0 52%, #f9d8e8 100%);
	--h-ink: #59102f;
	--h-muted: #7d4d64;
	--h-accent: #db2777;
	--h-badge: #9d174d;
}
.ns-hero--yellow {
	--h-base: #fefbe8;
	--h-bg: linear-gradient(118deg, #fefbe8 0%, #fdf5d2 52%, #fbedb8 100%);
	--h-ink: #4a3606;
	--h-muted: #77663a;
	--h-accent: #b45309;
	--h-badge: #92400e;
}
.ns-hero--gaming {
	--h-base: #eef2ff;
	--h-bg: linear-gradient(118deg, #eef2ff 0%, #e5eaff 52%, #dbe2ff 100%);
	--h-ink: #1e1b4b;
	--h-muted: #55597c;
	--h-accent: #4f46e5;
	--h-badge: #312e81;
}
.ns-hero--brands {
	--h-base: #f1f5f9;
	--h-bg: linear-gradient(118deg, #f1f5f9 0%, #e9eef5 52%, #dfe6ee 100%);
	--h-ink: #0f172a;
	--h-muted: #5a6577;
	--h-accent: #334155;
	--h-badge: #0f172a;
}

/* ==========================================================================
   Responsive — the photo melts into the copy on desktop; on tablets and
   phones the copy moves above a soft photo band and the badge becomes a
   sticker on that band, so it can never cover the headline.
   ========================================================================== */
@media (max-width: 1024px) {
	.ns-hero-slider .ns-banner-slide { min-height: 390px; }
	.ns-hero-slider .ns-hero__copy { padding: 44px 22px 44px 40px; flex-basis: 56%; }
	.ns-hero-slider .ns-hero__title { font-size: clamp(29px, 4.4vw, 42px); }
	.ns-hero-slider .ns-hero__media { left: 24%; }
	.ns-hero-slider .ns-hero__badge { width: 96px; height: 96px; font-size: 11.5px; top: 20px; right: 20px; }
}

@media (max-width: 860px) {
	.ns-hero-slider .ns-banner-slide {
		display: block;
		min-height: 0;
	}
	.ns-hero-slider .ns-banner-slide.active { display: block !important; }
	.ns-hero-slider .ns-banner-slide:first-of-type { display: block; }

	.ns-hero-slider .ns-hero__copy {
		display: flex;
		width: 100%;
		max-width: none;
		flex: none;
		padding: 34px 24px 224px;
		align-items: flex-start;
	}
	.ns-hero-slider .ns-hero__media {
		left: 0;
		top: auto;
		height: 224px;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 32%);
	}
	.ns-hero-slider .ns-hero__img {
		object-position: 50% 42%;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.ns-hero-slider .ns-banner-slide.ns-hero--photo::after {
		background: linear-gradient(180deg, var(--h-base, #eef0ff) 0%, color-mix(in srgb, var(--h-base, #eef0ff) 96%, transparent) 38%, color-mix(in srgb, var(--h-base, #eef0ff) 62%, transparent) 62%, transparent 82%);
		background: linear-gradient(180deg, var(--h-base, #eef0ff) 0%, color-mix(in srgb, var(--h-base, #eef0ff) 96%, transparent) 38%, color-mix(in srgb, var(--h-base, #eef0ff) 62%, transparent) 62%, transparent 82%);
	}
	.ns-hero-slider .ns-hero__badge {
		top: auto;
		right: 16px;
		bottom: 16px;
		width: 80px;
		height: 80px;
		padding: 0 8px;
		font-size: 9.5px;
		line-height: 1.12;
		letter-spacing: .01em;
		filter: drop-shadow(0 6px 12px rgba(15, 23, 42, .22));
	}
	.ns-hero-slider .ns-hero__title { max-width: 100%; font-size: clamp(26px, 6.6vw, 34px); }
	.ns-hero-slider .ns-hero__text { font-size: 14.8px; margin-bottom: 20px; }
	.ns-hero-slider .ns-hero__features { margin-top: 18px; gap: 8px 18px; }
	.ns-hero-slider .ns-banner-slide:not(.ns-hero--photo) .ns-hero__copy { padding-bottom: 34px; }
}

@media (max-width: 600px) {
	.ns-hero-slider.ns-banner-slider { border-radius: 14px; }
	.ns-hero-slider .ns-banner-slide { border-radius: 14px; }
	.ns-hero-slider .ns-hero__copy { padding: 26px 18px 190px; }
	.ns-hero-slider .ns-hero__eyebrow { font-size: 11px; letter-spacing: .14em; margin-bottom: 11px; }
	.ns-hero-slider .ns-hero__title { font-size: clamp(24px, 7vw, 30px); line-height: 1.08; }
	.ns-hero-slider .ns-hero__text { font-size: 14.2px; line-height: 1.56; }
	.ns-hero-slider .ns-hero__media { height: 190px; }
	.ns-hero-slider .ns-hero__main .ns-hero__cta,
	.ns-hero-slider .ns-hero__main .ns-btn--primary { padding: 12px 24px; font-size: 14px; }
	.ns-hero-slider .ns-hero__badge { width: 76px; height: 76px; font-size: 9.4px; right: 14px; bottom: 14px; }
	.ns-banner-prev, .ns-banner-next { width: 34px; height: 34px; font-size: 20px; }
	.ns-banner-prev { left: 8px; }
	.ns-banner-next { right: 8px; }
	.ns-banner-dots { bottom: 12px; padding: 6px 10px; }
	.ns-hero-slider .ns-banner-slide:not(.ns-hero--photo) .ns-hero__copy { padding-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.ns-hero-slider .ns-hero__main .ns-hero__cta,
	.ns-banner-prev,
	.ns-banner-next,
	.ns-banner-dot { transition: none; }
}

/* Corner badges are not part of every demo's art direction. Keep them on the
   sale-led stores (Fashion, Grocery, FreshMart, Tech); the editorial demos run
   a cleaner hero without the badge. The demo body class is added in header.php,
   and the demo datasets for these four no longer ship a badge at all. */
.ns-demo-mango .ns-hero__badge,
.ns-demo-gadget .ns-hero__badge,
.ns-demo-digital .ns-hero__badge,
.ns-demo-organic .ns-hero__badge { display: none !important; }

/* Phones: centre the hero copy and keep the CTA directly below the text.
   This lives here (not only in main.css) because widgets.css is loaded after
   main.css and would otherwise win with its tablet flex-start rule. */
@media (max-width: 600px) {
	.ns-hero-slider .ns-hero__copy,
	.ns-hero-slider .ns-banner-slide:not(.ns-hero--photo) .ns-hero__copy {
		align-items: center;
		text-align: center;
	}
	.ns-hero-slider .ns-hero__eyebrow { justify-content: center; }
	.ns-hero-slider .ns-hero__title {
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
		text-align: center;
	}
	.ns-hero-slider .ns-hero__text {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.ns-hero-slider .ns-hero__features { justify-content: center; }
	.ns-hero-slider .ns-hero__note { text-align: center; }
}