/* Nafasam campaign · Diwali on Rose Atelier */
:root { --cp-night: #1E0D11; --cp-plum: #2B1419; --cp-wine: #6E1A36; --cp-rose: #F3DCD8; --cp-pink: #E8A9B4; --cp-gold: #E6C27A; --cp-gold-d: #C99A45;
	--cp-serif: 'Bodoni Moda', 'Didot', Georgia, serif; --cp-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --cp-ease: cubic-bezier(.2, .8, .2, 1); }

/* ---------- Announcement bar ---------- */
.ncp-bar { position: relative; z-index: 9; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; padding: 8px 52px; background: var(--cp-plum); color: #fff; font: 500 13.5px/1.3 var(--cp-sans); text-align: center; overflow: hidden; }
.ncp-bar.is-hidden { display: none; }
.ncp-bar::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 140% at 50% 120%, rgba(230, 194, 122, .22), transparent 70%); pointer-events: none; }
.ncp-spark { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-gold); box-shadow: 0 0 10px 2px rgba(230, 194, 122, .7); animation: ncp-flicker 2.4s ease-in-out infinite; flex: none; }
.ncp-lines { position: relative; display: grid; }
.ncp-line { grid-area: 1 / 1; margin: 0 !important; color: #fff !important; opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .55s var(--cp-ease); }
.ncp-line.is-on { opacity: 1; transform: none; }
.ncp-count { flex: none; padding: 3px 10px; border-radius: 999px; background: rgba(230, 194, 122, .16); color: var(--cp-gold); font: 600 12px/1.4 var(--cp-sans); font-variant-numeric: tabular-nums; }
.ncp-count:empty { display: none; }
body .ncp-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; min-height: 0 !important; padding: 0 !important; display: grid; place-items: center; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: rgba(255, 255, 255, .7) !important; box-shadow: none !important; cursor: pointer; }
body .ncp-x:hover { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
.ncp-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 640px) { .ncp-bar { padding: 8px 40px 8px 14px; gap: 10px; font-size: 12.5px; justify-content: flex-start; text-align: left; } .ncp-spark { display: none; } }

/* ---------- Diya ---------- */
.ncp-diya { width: 40px; height: 40px; overflow: visible; }
.ncp-diya .b { fill: var(--cp-gold); }
.ncp-diya .r { stroke: var(--cp-gold-d); stroke-width: 3; stroke-linecap: round; }
.ncp-diya .f { fill: #F6A04D; transform-origin: 32px 30px; animation: ncp-flame 1.6s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(246, 160, 77, .9)); }
.ncp-diya .f2 { fill: #FFE7A8; transform-origin: 32px 28px; animation: ncp-flame 1.2s ease-in-out infinite reverse; }
@keyframes ncp-flame { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08, .94) rotate(2deg); } }
@keyframes ncp-flicker { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Banner ---------- */
.ncp-banner {
	position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 40px;
	padding: 64px 56px 64px 64px; border-radius: 36px; color: #fff; font-family: var(--cp-sans); text-align: left;
	background: radial-gradient(90% 120% at 85% 10%, #5A1730 0%, rgba(90, 23, 48, 0) 60%), linear-gradient(160deg, var(--cp-plum) 0%, var(--cp-night) 100%);
}
.ncp-banner::after { /* scattered sparkles */
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
	background-image:
		radial-gradient(2px 2px at 12% 18%, var(--cp-gold) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 82%, #fff 50%, transparent 51%),
		radial-gradient(2px 2px at 48% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 62% 70%, var(--cp-gold) 50%, transparent 51%),
		radial-gradient(2px 2px at 88% 86%, var(--cp-gold) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 94% 30%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 6% 64%, var(--cp-gold) 50%, transparent 51%), radial-gradient(2px 2px at 40% 46%, rgba(255,255,255,.6) 50%, transparent 51%);
	animation: ncp-twinkle 4s ease-in-out infinite alternate;
}
@keyframes ncp-twinkle { from { opacity: .35; } to { opacity: .85; } }
.ncp-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.ncp-glow-a { width: 420px; height: 420px; right: 4%; bottom: -160px; background: rgba(230, 194, 122, .28); }
.ncp-glow-b { width: 360px; height: 360px; left: -120px; top: -140px; background: rgba(232, 169, 180, .16); }

.ncp-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px !important; padding: 6px 16px 6px 8px; border: 1px solid rgba(230, 194, 122, .45); border-radius: 999px; color: var(--cp-gold) !important; font: 600 13.5px/1 var(--cp-sans) !important; }
.ncp-eyebrow .ncp-diya { width: 26px; height: 26px; margin-top: -6px; }
body .ncp-banner .ncp-title { margin: 0 0 14px !important; color: #fff !important; font: 400 64px/1.02 var(--cp-serif) !important; letter-spacing: -1px !important; text-transform: none !important; }
.ncp-title em { font-style: italic; color: var(--cp-gold); }
.ncp-sub { margin: 0 0 24px !important; max-width: 46ch; color: var(--cp-rose) !important; font: 400 17px/1.6 var(--cp-sans) !important; }
.ncp-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 26px !important; padding: 0 !important; list-style: none !important; }
.ncp-chips li { margin: 0 !important; padding: 14px 14px 13px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); backdrop-filter: blur(4px); }
.ncp-chips b { display: block; color: #fff; font: 400 21px/1.15 var(--cp-serif); }
.ncp-chips span { display: block; margin-top: 4px; color: var(--cp-pink); font: 500 13px/1.35 var(--cp-sans); }
.ncp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body .ncp-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border-radius: 999px; font: 600 15.5px/1 var(--cp-sans); text-decoration: none !important; transition: transform .25s var(--cp-ease), box-shadow .25s, background .25s, color .25s; }
body .ncp-btn-gold { background: var(--cp-gold); color: var(--cp-plum) !important; box-shadow: 0 14px 30px -14px rgba(230, 194, 122, .8); }
body .ncp-btn-gold:hover { background: #F0D08E; transform: translateY(-2px); }
body .ncp-btn-ghost { border: 1px solid rgba(255, 255, 255, .35); color: #fff !important; }
body .ncp-btn-ghost:hover { background: #fff; color: var(--cp-wine) !important; transform: translateY(-2px); }
.ncp-ends { margin: 18px 0 0 !important; color: rgba(255, 255, 255, .7) !important; font: 500 13.5px/1.4 var(--cp-sans) !important; }
.ncp-ends [data-ncp-count] { color: var(--cp-gold); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Art: three arch-framed gifts with diyas */
.ncp-art { position: relative; height: 440px; }
.ncp-arch { position: absolute; overflow: hidden; border-radius: 999px 999px 22px 22px; border: 1.5px solid rgba(230, 194, 122, .7); background: #fff; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); }
.ncp-arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ncp-arch-1 { width: 44%; height: 66%; left: 0; top: 16%; transform: rotate(-6deg); animation: ncp-float 7s ease-in-out infinite; }
.ncp-arch-2 { z-index: 2; width: 50%; height: 80%; left: 25%; top: 2%; animation: ncp-float 7s ease-in-out -2.3s infinite; }
.ncp-arch-3 { width: 44%; height: 66%; right: 0; top: 18%; transform: rotate(6deg); animation: ncp-float 7s ease-in-out -4.6s infinite; }
@keyframes ncp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.ncp-diyas { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 22px; }
.ncp-diyas .ncp-diya { width: 54px; height: 54px; }
.ncp-diyas .ncp-diya:nth-child(2) { width: 66px; height: 66px; margin-top: -8px; }

@media (max-width: 1024px) {
	.ncp-banner { gap: 24px; padding: 48px 40px; }
	body .ncp-banner .ncp-title { font-size: 50px !important; }
	.ncp-chips { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.ncp-banner { grid-template-columns: 1fr; padding: 34px 22px 28px; border-radius: 28px; gap: 8px; }
	body .ncp-banner .ncp-title { font-size: 40px !important; }
	.ncp-sub { font-size: 16px !important; margin-bottom: 18px !important; }
	.ncp-art { order: -1; height: 250px; margin: 0 -6px 14px; }
	.ncp-diyas .ncp-diya { width: 40px; height: 40px; }
	.ncp-diyas .ncp-diya:nth-child(2) { width: 48px; height: 48px; }
	.ncp-chips { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px !important; }
	.ncp-chips li { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; }
	.ncp-chips b { font-size: 18px; }
	.ncp-chips span { margin: 0; }
	body .ncp-btn { height: 48px; padding: 0 20px; font-size: 15px; }
	.ncp-actions .ncp-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Offers explainer ---------- */
.ncp-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; font-family: var(--cp-sans); }
.ncp-offer { position: relative; padding: 28px 24px 24px; border-radius: 28px; background: #fff; box-shadow: 0 24px 50px -36px rgba(110, 26, 54, .5); }
.ncp-offer-n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 50%; background: var(--cp-plum); color: var(--cp-gold); font: 400 18px/1 var(--cp-serif); }
body .ncp-offer h3 { margin: 0 0 8px !important; color: var(--cp-plum) !important; font: 400 26px/1.15 var(--cp-serif) !important; text-transform: none !important; }
.ncp-offer p { margin: 0 !important; color: #6F555B !important; font: 400 15.5px/1.6 var(--cp-sans) !important; }
.ncp-stack { margin: 18px 0 0 !important; text-align: center; color: #6F555B !important; font: 500 14.5px/1.5 var(--cp-sans) !important; }
@media (max-width: 760px) { .ncp-offers { grid-template-columns: 1fr; } }

/* ---------- Card badge + drawer ladder ---------- */
ul.products li.product .nsc-badge.is-camp { background: var(--cp-gold); color: var(--cp-plum); }
@media (max-width: 640px) { ul.products li.product .nsc-badge.is-camp { display: inline-flex; } }
.ncp-ladder { padding: 14px 16px 12px !important; background: linear-gradient(135deg, #fff 0%, #FFF8EC 100%) !important; border: 1px solid rgba(230, 194, 122, .55); }
.ncp-ladder-msg { display: flex !important; align-items: center; gap: 8px; margin: 0 0 12px !important; font: 400 14px/1.35 var(--cp-sans); color: var(--cp-plum); }
.ncp-ladder-msg strong { color: var(--cp-wine); font-weight: 600; }
.ncp-ladder-diya { width: 26px !important; height: 26px !important; flex: none; margin-top: -6px; }
.ncp-track { position: relative; height: 6px; margin: 0 6px; border-radius: 99px; background: #F3DCD8; }
.ncp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cp-wine), #A23A57, var(--cp-gold)); transition: width .6s var(--cp-ease); }
.ncp-stop { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 2px solid #E8C9C4; transition: background .3s, border-color .3s; }
.ncp-stop.is-done { background: var(--cp-gold); border-color: var(--cp-gold-d); box-shadow: 0 0 0 3px rgba(230, 194, 122, .25); }
.ncp-labels { position: relative; height: 34px; margin: 8px 6px 0; }
.ncp-labels span { position: absolute; top: 0; transform: translateX(-50%); display: grid; text-align: center; white-space: nowrap; font: 500 11px/1.3 var(--cp-sans); color: #6F555B; }
.ncp-labels span:last-child { transform: translateX(-100%); text-align: right; }
.ncp-labels span b { font-weight: 600; color: var(--cp-plum); }
.ncp-labels span.is-done b { color: var(--cp-wine); }
.ncp-bundle-tip { margin: 8px 0 0 !important; padding: 8px 12px; border-radius: 12px; background: var(--cp-plum); color: var(--cp-gold) !important; font: 600 12.5px/1.35 var(--cp-sans) !important; text-align: center; }
.nsc-gift-tag { background: var(--cp-gold) !important; color: var(--cp-plum) !important; }

@media (prefers-reduced-motion: reduce) {
	.ncp-diya .f, .ncp-diya .f2, .ncp-spark, .ncp-banner::after, .ncp-arch { animation: none !important; }
	.ncp-line { transition: none; }
}
