/* =========================================================
   Natural Gems — Front Page CSS (front-page.css)
   Contains hero slides, homepage collections, curve editorials.
   ========================================================= */

/* =================== BELPEARL HERO =================== */
.ng-belpearl-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	width: 100%;
	overflow: hidden;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;

	/* CSS Custom Variables for Masking and Geometry */
	--header-h: 100px;
	--img-w: min(72vw, 300px);
	--img-h: calc(min(72vw, 300px) * 1.45);
	--img-top: calc(var(--header-h) + (100vh - var(--header-h) - var(--img-h)) / 2);
	--img-top: calc(var(--header-h) + (100svh - var(--header-h) - var(--img-h)) / 2);
	--line1-size: clamp(2.4rem, 11.5vw, 3.2rem);
	--line2-size: clamp(1.9rem, 9vw, 2.5rem);
}

@media (min-width: 768px) {
	.ng-belpearl-hero {
		--header-h: 150px;
		--img-w: min(22vw, 340px);
		--img-h: calc(min(22vw, 340px) * 1.4);
		--img-top: calc(var(--header-h) + (100vh - var(--header-h) - var(--img-h)) / 2);
		--img-top: calc(var(--header-h) + (100svh - var(--header-h) - var(--img-h)) / 2);
		--line1-size: clamp(3.25rem, 15vw, 8.5rem);
		--line2-size: clamp(2.4rem, 11vw, 5.75rem);
		padding-bottom: 24px;
	}
}

/* Side navigation on desktop */
.ng-belpearl-side-nav {
	position: absolute;
	left: 32px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 30;
	display: none;
	flex-direction: column;
	gap: 40px;
}

@media (min-width: 768px) {
	.ng-belpearl-side-nav {
		display: flex;
	}
}

.ng-belpearl-side-nav a {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.28em;
	color: #070e22;
	text-decoration: none;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	transition: color 0.3s;
}

.ng-belpearl-side-nav a:hover {
	color: #b48f3a;
}

/* Rotating Image Card */
.ng-belpearl-image-card {
	position: absolute;
	left: 50%;
	top: var(--img-top);
	width: var(--img-w);
	height: var(--img-h);
	transform: translate3d(-50%, 0, 0);
	overflow: hidden;
	z-index: 10;
	background: #fdfbf8;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
	will-change: transform;
}

.ng-belpearl-image-wrapper {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ng-belpearl-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transform: scale(1.08);
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1), transform 1.2s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s ease;
	will-change: clip-path, transform, opacity;
}

.ng-belpearl-img.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
	clip-path: inset(0 0 0 0);
	z-index: 2;
}

.ng-belpearl-img.is-exiting {
	opacity: 1;
	pointer-events: none;
	transform: scale(1);
	clip-path: inset(100% 0 0 0);
	z-index: 1;
}

/* Caption and Slides Indicator */
.ng-belpearl-caption-wrap {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	z-index: 12;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	pointer-events: none;
}

.ng-belpearl-caption {
	position: relative;
	width: 80%;
	height: 16px;
	text-align: center;
}

.ng-belpearl-cap-text {
	position: absolute;
	left: 0;
	right: 0;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ng-belpearl-cap-text.is-active {
	opacity: 1;
	transform: translateY(0);
}

.ng-belpearl-cap-text.is-exiting {
	opacity: 0;
	transform: translateY(-6px);
}

.ng-belpearl-ticks {
	display: flex;
	gap: 8px;
}

.ng-belpearl-tick {
	height: 1.5px;
	background: rgba(255, 255, 255, 0.4);
	width: 16px;
	transition: width 0.5s, background 0.5s;
}

.ng-belpearl-tick.is-active {
	width: 32px;
	background: #ffffff;
}

/* Titles Layers */
.ng-belpearl-title-layer {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: var(--header-h);
	box-sizing: border-box;
	pointer-events: none;
	will-change: transform, opacity;
}

.ng-belpearl-title-lines {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	will-change: transform, opacity;
}

.ng-belpearl-title-lines h2 {
	margin: 0;
	font-family: "Libre Caslon Text", "Cormorant Garamond", Georgia, serif;
	font-weight: 400;
	line-height: 0.85;
	text-align: center;
	position: relative;
	width: 100%;
}

.ng-belpearl-title-lines h2.line-1 {
	font-size: var(--line1-size);
	height: var(--line1-size);
}

.ng-belpearl-title-lines h2.line-2 {
	font-size: var(--line2-size);
	height: var(--line2-size);
	letter-spacing: 0.02em;
	margin-top: 10px;
}

@media (min-width: 768px) {
	.ng-belpearl-title-lines h2.line-2 {
		margin-top: 16px;
	}
}

.ng-belpearl-title-lines span {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	opacity: 0;
	transform: translateY(40px);
	filter: blur(12px);
	transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1), filter 1s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform, filter;
}

.ng-belpearl-title-lines span.is-active {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0px);
	z-index: 2;
}

.line-2 span {
	transition-delay: 0.1s;
}

.ng-belpearl-title-lines span.is-exiting {
	opacity: 0;
	transform: translateY(-20px);
	filter: blur(8px);
	z-index: 1;
}

.line-2 span.is-exiting {
	transition-delay: 0s;
}

/* Layer-specific Title styling */
.ng-belpearl-title-layer--navy .ng-belpearl-title-lines h2 {
	color: #154470;
}

.ng-belpearl-title-layer--diff .ng-belpearl-title-lines h2 {
	color: #ffffff;
	mix-blend-difference: difference;
}

/* Composite Masking for navy layer */
.ng-belpearl-title-layer--navy {
	mask-image: linear-gradient(#000,#000), linear-gradient(#000,#000);
	mask-size: 100% 100%, var(--img-w) var(--img-h);
	mask-position: 0 0, center var(--img-top);
	mask-repeat: no-repeat, no-repeat;
	mask-composite: exclude;
	-webkit-mask-image: linear-gradient(#000,#000), linear-gradient(#000,#000);
	-webkit-mask-size: 100% 100%, var(--img-w) var(--img-h);
	-webkit-mask-position: 0 0, center var(--img-top);
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-composite: xor;
}

/* Clip-path for white difference layer */
.ng-belpearl-title-layer--diff {
	clip-path: inset(var(--img-top) calc(50% - var(--img-w) / 2) calc(100% - var(--img-top) - var(--img-h)) calc(50% - var(--img-w) / 2));
}

/* Sparkle element */
.ng-belpearl-sparkle {
	position: absolute;
	bottom: 64px;
	right: 24px;
	z-index: 30;
	color: var(--c-primary);
	animation: belpearlShimmer 3s ease-in-out infinite;
}

@media (min-width: 768px) {
	.ng-belpearl-sparkle {
		bottom: 80px;
		right: 64px;
	}
}

@keyframes belpearlShimmer {
	0%, 100% { opacity: 0.4; transform: scale(1) rotate(0deg); }
	50%      { opacity: 1;   transform: scale(1.2) rotate(45deg); }
}

/* Scroll cue */
.ng-belpearl-scroll-cue {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--c-primary);
	pointer-events: none;
}

.ng-belpearl-scroll-cue span {
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.28em;
}

.ng-belpearl-scroll-cue .cue-bar {
	width: 1px;
	height: 32px;
	background: rgba(7, 14, 34, 0.3);
	position: relative;
	overflow: hidden;
}

.ng-belpearl-scroll-cue .cue-bar::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #070e22;
	animation: cueBob 1.6s infinite ease-in-out;
}

@keyframes cueBob {
	0%   { transform: translateY(-100%); }
	50%  { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

/* =================== SECTIONS =================== */
.ng-section { padding: 80px 0; }
@media (min-width: 768px) { .ng-section { padding: 120px 0; } }
.ng-secthead { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 56px; gap: 12px; }
@media (min-width: 768px) { .ng-secthead { margin-bottom: 80px; gap: 16px; } }
.ng-secthead .ng-label-caps { letter-spacing: .3em; font-size: 11px; }
.ng-secthead .ng-headline { font-size: 30px; max-width: 640px; }
@media (min-width: 768px) { .ng-secthead .ng-headline { font-size: 48px; line-height: 56px; } }
.ng-secthead__rule { width: 48px; height: 1px; background: rgba(119,90,25,.5); margin-top: 8px; }

/* =================== CATEGORIES =================== */
.ng-catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 768px) { .ng-catgrid { grid-template-columns: repeat(4, 1fr); gap: 40px; } }
.ng-catcard { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ng-catcard__img {
	width: 100%; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 20px;
	background: var(--c-surface-lowest); display: flex; align-items: center; justify-content: center;
	padding: 24px; border: 1px solid var(--c-outline-variant);
}
@media (min-width: 768px) { .ng-catcard__img { margin-bottom: 28px; } }
.ng-catcard__img img {
	max-width: 100%; max-height: 100%; object-fit: contain;
	transition: transform 1.4s ease;
}
.ng-catcard:hover .ng-catcard__img img { transform: scale(1.1); }
.ng-catcard__title { font-size: 20px; margin-bottom: 8px; color: var(--c-primary); }
@media (min-width: 768px) { .ng-catcard__title { font-size: 24px; } }
.ng-catcard__desc {
	color: var(--c-on-surface-variant); font-size: 12px; max-width: 280px;
	display: none; margin: 0 0 16px;
}
@media (min-width: 768px) { .ng-catcard__desc { display: block; font-size: 14px; } }
.ng-catcard__cta {
	font-size: 11px; color: var(--c-primary);
	border-bottom: 1px solid rgba(0,0,0,.3); padding-bottom: 4px;
	transition: color .25s, border-color .25s;
}
.ng-catcard:hover .ng-catcard__cta { color: var(--c-secondary); border-color: var(--c-secondary); }

/* =================== MARQUEE =================== */
.ng-marquee {
	overflow: hidden; border-top: 1px solid var(--c-outline-variant);
	border-bottom: 1px solid var(--c-outline-variant);
	padding: 20px 0; background: var(--c-surface-lowest);
}
@media (min-width: 768px) { .ng-marquee { padding: 28px 0; } }
.ng-marquee__track {
	display: flex; gap: 48px; white-space: nowrap;
	animation: ng-marquee 38s linear infinite;
	font-family: var(--font-headline); font-size: 30px;
	color: rgba(255,255,255,.9); width: max-content;
}
@media (min-width: 768px) { .ng-marquee__track { font-size: 48px; } }
.ng-marquee__phrase { display: inline-flex; align-items: center; gap: 48px; }
.ng-marquee__phrase em { color: rgba(119,90,25,.6); font-style: normal; }
@keyframes ng-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ng-collections__inner { margin-top: 64px; }
@media (min-width: 768px) { .ng-collections__inner { margin-top: 96px; } }

/* =================== COLLECTIONS =================== */
.ng-collections__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .ng-collections__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.ng-coll {
	position: relative; display: block; aspect-ratio: 3 / 4;
	overflow: hidden; background: var(--c-surface-lowest);
}
.ng-coll img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: contain; padding: 40px;
	transition: transform 1.4s ease;
}
.ng-coll:hover img { transform: scale(1.1); }
.ng-coll__overlay {
	position: absolute; inset: auto 0 0 0; padding: 24px;
	background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.3) 50%, transparent);
	color: var(--c-on-primary);
}
@media (min-width: 768px) { .ng-coll__overlay { padding: 32px; } }
.ng-coll__overlay h3 { font-size: 24px; color: var(--c-on-primary); margin: 8px 0; }
@media (min-width: 768px) { .ng-coll__overlay h3 { font-size: 30px; } }
.ng-coll__overlay p { font-size: 14px; color: rgba(255,255,255,.7); margin: 0 0 16px; max-width: 280px; }
.ng-coll__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--c-secondary-fixed); letter-spacing: .25em; font-size: 11px; transition: gap .25s; }
.ng-coll:hover .ng-coll__cta { gap: 12px; }

/* =================== BEST SELLING =================== */
.ng-best__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	margin-bottom: 48px;
}
@media (min-width: 768px) { .ng-best__head { margin-bottom: 64px; } }
.ng-best__head h2 { font-size: 30px; color: var(--c-primary); }
@media (min-width: 768px) { .ng-best__head h2 { font-size: 48px; } }
.ng-best__shopall { font-size: 14px; color: var(--c-primary); text-decoration: underline; text-underline-offset: 4px; }
.ng-best__shopall:hover { color: var(--c-secondary); }
.ng-best__more { text-align: center; margin-top: 56px; }


/* =================== CUSTOMISE CTA =================== */
.ng-customise {
	position: relative; height: 60vh; display: flex; align-items: center; justify-content: center;
	overflow: hidden; text-align: center;
}
@media (min-width: 768px) { .ng-customise { height: 70vh; } }
.ng-customise__bg {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	filter: brightness(.45); transform: scale(1.1); transition: transform 2s ease;
}
.ng-customise:hover .ng-customise__bg { transform: scale(1); }
.ng-customise__content {
	position: relative; z-index: 1; max-width: 720px; padding: 0 20px; color: var(--c-on-primary);
}
.ng-customise__content .ng-label-caps { letter-spacing: .4em; font-size: 11px; color: var(--c-secondary-fixed); display: block; margin-bottom: 20px; }
@media (min-width: 768px) { .ng-customise__content .ng-label-caps { font-size: 12px; margin-bottom: 24px; } }
.ng-customise__content h2 {
	font-family: var(--font-headline); font-size: 36px; line-height: 1.15;
	color: var(--c-on-primary); margin: 0 0 24px;
}
@media (min-width: 768px) { .ng-customise__content h2 { font-size: 48px; line-height: 56px; margin-bottom: 32px; } }
.ng-customise__content p { color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.7; margin: 0 0 32px; }
@media (min-width: 768px) { .ng-customise__content p { font-size: 18px; margin-bottom: 48px; } }

.ng-customise__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.2) 50%, rgba(0,0,0,.6));
}
.ng-customise__content { z-index: 2; }
.ng-btn--pill { border-radius: 999px; box-shadow: 0 10px 40px -10px rgba(0,0,0,.5); }

/* =================== CATEGORY EDITORIAL (Editorial split: image left, content right) =================== */
.ng-cat-editorial {
	position: relative;
	padding: 0;
	overflow: hidden;
	background: #070e22; /* deep theme blue */
	color: #ffffff;
	isolation: isolate;
}
.ng-cat-editorial__lines {
	position: absolute; inset: 0; width: 100%; height: 100%;
	color: #ecb5b5; /* theme pink */
	pointer-events: none; z-index: 0;
}
.ng-cat-editorial__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr; gap: 0;
	align-items: stretch; min-height: 520px;
	padding: 0 !important; max-width: none !important; width: 100%;
}
@media (min-width: 900px) {
	.ng-cat-editorial__grid { grid-template-columns: 1fr 1fr; min-height: 640px; }
}

/* LEFT: image stack */
.ng-cat-editorial__media {
	position: relative; width: 100%; aspect-ratio: 16/11; overflow: hidden;
	background: #0a1226;
}
@media (min-width: 900px) { .ng-cat-editorial__media { aspect-ratio: auto; height: 100%; min-height: 640px; } }
.ng-cat-editorial__media img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: 0;
	transition: opacity .8s ease, transform 8s ease;
	transform: scale(1.04);
}
.ng-cat-editorial__media img.is-active { opacity: 1; transform: scale(1); }

/* RIGHT: content */
.ng-cat-editorial__content {
	position: relative;
	display: flex; flex-direction: column; justify-content: center;
	padding: 56px 32px 64px;
}
@media (min-width: 900px) { .ng-cat-editorial__content { padding: 80px 72px 80px 64px; } }
@media (min-width: 1200px) { .ng-cat-editorial__content { padding: 96px 96px 96px 80px; } }

.ng-cat-editorial__eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--font-body); font-weight: 600;
	font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
	color: #ecb5b5; margin: 0 0 28px;
}
.ng-cat-editorial__dot {
	width: 8px; height: 8px; border-radius: 50%; background: #ecb5b5;
	display: inline-block;
}

.ng-cat-editorial__list {
	list-style: none; margin: 0 0 40px; padding: 0;
	display: flex; flex-direction: column; gap: 4px;
}
.ng-cat-editorial__item {
	display: inline-flex; align-items: baseline;
	font-family: var(--font-headline); font-style: italic; font-weight: 400;
	font-size: clamp(34px, 5.2vw, 64px); line-height: 1.08;
	color: rgba(255,255,255,.55);
	text-decoration: none;
	transition: color .3s ease, transform .3s ease, letter-spacing .3s ease;
	padding: 2px 0;
}
.ng-cat-editorial__item:hover,
.ng-cat-editorial__item:focus,
.ng-cat-editorial__item.is-active { color: #ffffff; }
.ng-cat-editorial__item:hover { transform: translateX(8px); }

.ng-cat-editorial__cta { margin-top: 8px; }

.ng-cat-pill {
	display: inline-flex; align-items: center; gap: 14px;
	background: #ecb5b5; color: #070e22;
	font-family: var(--font-body); font-weight: 700;
	font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
	padding: 16px 32px 16px 22px;
	border-radius: 999px; text-decoration: none;
	transition: background .25s ease, transform .25s ease, color .25s ease;
	box-shadow: 0 16px 40px -18px rgba(236,181,181,.65);
}
.ng-cat-pill:hover { background: #ffffff; color: #070e22; transform: translateY(-2px); }
.ng-cat-pill__bullet {
	width: 8px; height: 8px; border-radius: 50%; background: #070e22; display: inline-block;
}

/* Right-edge number index */
.ng-cat-editorial__index {
	position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	display: none; flex-direction: column; gap: 12px;
	list-style: none; margin: 0; padding: 0;
	font-family: var(--font-body); font-weight: 500;
	font-size: 12px; letter-spacing: .15em;
	color: rgba(255,255,255,.35);
	z-index: 2;
}
@media (min-width: 900px) { .ng-cat-editorial__index { display: flex; right: 28px; } }
.ng-cat-editorial__index li {
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 1px solid transparent;
	transition: color .25s ease, border-color .25s ease;
}
.ng-cat-editorial__index li.is-active {
	color: #ffffff; border-color: rgba(236,181,181,.7);
}


/* =================== NEW NOW EDITORIAL =================== */
.ng-newnow { position: relative; padding: 80px 0; background: var(--c-header-bg) !important; }
@media (min-width: 768px) { .ng-newnow { padding: 140px 0; } }
.ng-newnow__grid {
	display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
}
@media (min-width: 768px) { .ng-newnow__grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.ng-newnow__hero {
	display: block; position: relative; aspect-ratio: 4/5; overflow: hidden;
	border-radius: 0 !important;
}
@media (min-width: 768px) {
	.ng-newnow__hero {
		width: 80% !important;
		max-width: 420px !important;
		margin-right: auto !important;
	}
}
.ng-newnow__hero img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.4s ease;
}
.ng-newnow__hero:hover img { transform: scale(1.05); }
.ng-newnow__right { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.ng-newnow__title-wrap { position: relative; }
.ng-newnow__title {
	font-family: var(--font-headline); font-style: italic;
	font-size: 48px; color: #ffffff !important; margin: 0;
}
@media (min-width: 768px) { .ng-newnow__title { font-size: 60px; } }
.ng-newnow__circles {
	display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%;
	align-items: end !important;
}
@media (min-width: 768px) { .ng-newnow__circles { gap: 32px; } }
.ng-newnow__circle {
	display: block; overflow: hidden;
}
.ng-newnow__circle:nth-child(1) {
	border-radius: 50% 50% 0 0 / 50% 50% 0 0 !important;
	aspect-ratio: 3/4 !important;
}
.ng-newnow__circle:nth-child(2) {
	border-radius: 50% !important;
	aspect-ratio: 3/4 !important;
	width: 100% !important;
}
@media (min-width: 768px) {
	.ng-newnow__circle:nth-child(2) {
		width: 80% !important;
		margin-left: auto !important;
	}
}
.ng-newnow__circle img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.2s ease;
}
.ng-newnow__circle:hover img { transform: scale(1.1); }

/* Ellipse SVG decoration for New Now title */
.ng-newnow__ellipse {
	position: absolute;
	inset: -12px -24px;
	width: calc(100% + 48px);
	height: calc(100% + 24px);
	color: var(--c-secondary-fixed) !important;
	pointer-events: none;
}
.ng-newnow .ng-pill {
	border-color: rgba(255, 255, 255, 0.4) !important;
	color: #ffffff !important;
}
.ng-newnow .ng-pill:hover {
	background: #ffffff !important;
	color: var(--c-header-bg) !important;
	border-color: #ffffff !important;
}
.ng-newnow .ng-pill__icon {
	border-right-color: rgba(255, 255, 255, 0.3) !important;
}

/* Category Editorial right column background SVG */
.ng-cat-editorial__decor {
	display: none;
}
@media (min-width: 768px) {
	.ng-cat-editorial__decor {
		display: block;
		position: absolute;
		right: 16px;
		bottom: 24px;
		width: 260px;
		color: rgba(119, 90, 25, 0.5);
		pointer-events: none;
		z-index: 5;
	}
}

/* Rectangular catalog CTA button with long arrow */
.ng-rect-btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	padding: 10px 24px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	transition: all 0.3s ease;
	background: transparent;
}
.ng-rect-btn:hover {
	background: #ecb5b5;
	color: #070e22;
	border-color: #ecb5b5;
}
.ng-rect-btn svg {
	transition: transform 0.3s ease;
	color: currentColor;
}
.ng-rect-btn:hover svg {
	transform: translateX(4px);
}

/* =================== CATEGORY LIST (plain list with dividers, hover-swap image) =================== */
.ng-cat-list {
	position: relative;
	background: #070e22;
	color: #ffffff;
	padding: 64px 0 72px;
	overflow: hidden;
	isolation: isolate;
}
@media (min-width: 900px) { .ng-cat-list { padding: 96px 0 104px; } }
.ng-cat-list__lines {
	position: absolute; inset: 0; width: 100%; height: 100%;
	color: #ecb5b5; pointer-events: none; z-index: 0;
}
.ng-cat-list__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr; gap: 40px;
	align-items: start;
}
@media (min-width: 900px) {
	.ng-cat-list__grid { grid-template-columns: minmax(280px, 360px) 1fr; gap: 120px; align-items: center; }
}
.ng-cat-list__media-col { display: flex; flex-direction: column; gap: 24px; max-width: 360px; }
.ng-cat-list__media {
	position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden;
	background: #0a1226;
}
.ng-cat-list__media img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: 0;
	transition: opacity .6s ease, transform 6s ease;
	transform: scale(1.04);
}
.ng-cat-list__media img.is-active { opacity: 1; transform: scale(1); }
.ng-cat-list__copy {
	font-family: var(--font-body); font-size: 14px; line-height: 1.65;
	color: rgba(255,255,255,.82); margin: 0;
}
.ng-cat-list__copy strong { color: #ffffff; font-weight: 700; }

.ng-cat-list__list {
	list-style: none; margin: 0; padding: 0;
	border-top: 1px solid rgba(255,255,255,.18);
}
.ng-cat-list__row { border-bottom: 1px solid rgba(255,255,255,.18); }
.ng-cat-list__link {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 22px 8px; text-decoration: none;
	font-family: var(--font-body); font-weight: 400;
	font-size: clamp(18px, 2vw, 24px); letter-spacing: .005em;
	color: #ffffff;
	transition: color .25s ease, padding .25s ease;
}
.ng-cat-list__row:hover .ng-cat-list__link,
.ng-cat-list__row.is-active .ng-cat-list__link { color: #ecb5b5; padding-left: 14px; }
.ng-cat-list__name { flex: 1 1 auto; }
.ng-cat-list__plus {
	width: 36px; height: 36px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; color: transparent;
	font-family: var(--font-body); font-weight: 300; font-size: 22px; line-height: 1;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
.ng-cat-list__row:hover .ng-cat-list__plus,
.ng-cat-list__row.is-active .ng-cat-list__plus {
	background: #ecb5b5; color: #070e22; transform: rotate(0deg);
}

/* ============================================
   Shop Sapphires by Color — v0.8.0
   ============================================ */
.ng-sapcolors{
	background:#000;
	color:#fff;
	padding:48px 0 54px;
	position:relative;
}
.ng-sapcolors__head{
	text-align:center;
	margin-bottom:42px;
}
.ng-sapcolors__title{
	font-family:"Libre Caslon Text","Cormorant Garamond",Georgia,serif;
	font-size:clamp(28px,3.4vw,44px);
	font-weight:400;
	letter-spacing:.02em;
	margin:0 0 12px;
	color:#fff;
}
.ng-sapcolors__sub{
	max-width:640px;
	margin:0 auto;
	color:rgba(255,255,255,.62);
	font-size:14px;
	line-height:1.6;
}
.ng-sapcolors__row{
	display:grid;
	grid-template-columns:repeat(9,minmax(0,1fr));
	gap:8px;
	align-items:end;
}
.ng-sapcolors__item{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	text-decoration:none;
	color:#fff;
	padding:8px 4px 4px;
	transition:transform .35s ease;
}
.ng-sapcolors__item:hover{ transform:translateY(-4px); }
.ng-sapcolors__imgwrap{
	width:100%;
	aspect-ratio:1/1;
	display:flex;
	align-items:center;
	justify-content:center;
	background:transparent;
	border-radius:50%;
	overflow:visible;
	position:relative;
}
.ng-sapcolors__imgwrap::after{ content:none; }
.ng-sapcolors__imgwrap img{
	width:100%;
	height:100%;
	object-fit:contain;
	display:block;
	transform:scale(1.18);
	transition: transform .55s cubic-bezier(.22,1,.36,1), filter .45s ease, box-shadow .45s ease;
	filter: drop-shadow(0 8px 16px rgba(0,0,0,.55));
	transform-origin: center center;
	will-change: transform;
}
.ng-sapcolors__item:hover .ng-sapcolors__imgwrap img,
.ng-sapcolors__item:focus-visible .ng-sapcolors__imgwrap img{
	transform: scale(1.32) translateY(-6px);
	filter: drop-shadow(0 22px 38px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(255,255,255,.15));
}
.ng-sapcolors__item:hover .ng-sapcolors__label,
.ng-sapcolors__item:focus-visible .ng-sapcolors__label{
	color:#fff;
	transform: translateY(2px);
}
.ng-sapcolors__label{
	font-family:Inter,system-ui,sans-serif;
	font-size:13px;
	letter-spacing:.08em;
	color:rgba(255,255,255,.85);
	text-transform:none;
}

/* Tablet */
@media (max-width:1024px){
	.ng-sapcolors__row{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
}
/* Mobile */
@media (max-width:640px){
	.ng-sapcolors{ padding:32px 0 36px; }
	.ng-sapcolors__row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 12px; }
	.ng-sapcolors__label{ font-size:12px; }
}