/**
 * Homepage hero, promo variant: one stylesheet for every November phase.
 *
 * Loaded on the homepage only while a November phase is running (ic-nov-hero-banner.php). Every
 * rule is scoped to the promo root, .ic-nov-hero--promo, so it never touches the base hero.
 * The frosted panel is .actual_content::before (Figma values: layer blur + background blur,
 * z-index 0; switched off on mobile). The blur sits on the pseudo-element, not the box, so it
 * softens only the panel; the badge and the content wrapper sit above it (z-index 1) and stay sharp.
 *
 * Contents:
 *   1.0 Shared - every phase
 *   2.0 Phase-specific - one or a few phases only
 */


/**
 * 1.0 Shared - every phase
 */

.ic-nov-hero--promo {
	display: flex;
	position: relative;
	z-index: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-width: 100%;
	padding: 80px 0;
}

.ic-nov-hero--promo .bg-video {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ic-nov-hero--promo .actual_content {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	max-width: 700px;
	margin: auto;
	padding: 32px 60px;
}

.ic-nov-hero--promo .actual_content::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 48px;
	background: rgba(255, 255, 255, 0.11);
	filter: blur(10.899999618530273px);
	-webkit-backdrop-filter: blur(3.700000047683716px);
	backdrop-filter: blur(3.700000047683716px);
}

.ic-nov-hero--promo .reviews_container {
	display: flex;
	position: relative;
	z-index: 1;
	align-items: center;
	gap: 7.849px;
	margin-bottom: 16px;
	padding: 3.488px 13.954px;
	border: none !important;
	border-radius: 31.396px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--nd-theme-white);
	font-size: 13px;
	-webkit-backdrop-filter: blur(1.9622695446014404px);
	backdrop-filter: blur(1.9622695446014404px);
}

.ic-nov-hero--promo .inner-main-content-wrapper {
	display: flex;
	position: relative;
	z-index: 1;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.ic-nov-hero--promo h1 {
	margin: 0;
	color: var(--nd-theme-white);
	font-family: var(--nd-primary-font);
	font-weight: 600;
	letter-spacing: -0.05em; /* Figma -2.2px at 44px, scales with the clamp. */
	text-align: center;
}

/*
 * Size and line-height. body + five classes beats the homepage Elementor CSS
 * (.elementor-367923 .elementor-element.elementor-element-57b14bc .main_container h1, four
 * classes: clamp(32px, ..., 48px) !important, and line-height 48px at 576px).
 * Line-height is 6px more than the original 1.2, at every size.
 */
body .main_container.ic-nov-hero.ic-nov-hero--promo .actual_content .inner-main-content-wrapper h1 {
	font-size: clamp(25px, 2.5vw + 12px, 44px) !important;
	line-height: calc(1.2em + 6px) !important;
}

.ic-nov-hero--promo p {
	margin: 0;
	color: var(--nd-theme-white);
	font-family: var(--nd-primary-font);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.54px;
	text-align: center;
}

.ic-nov-hero--promo .actual_content .new__design-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8.721px;
	width: 226px;
	height: 42px;
	padding: 6.977px 27.908px;
	border-radius: 69.77px;
	background: #f9ad32 !important; /* Beats the homepage Elementor rule that turns it yellow at 576px. */
	color: var(--nd-theme-dark) !important; /* Beats global.css .new__design-btn colour !important. */
	font-family: var(--nd-primary-font);
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
	text-align: center;
}

.ic-nov-hero--promo .inner-main-content-wrapper span.limit {
	max-width: 544px;
	color: var(--nd-theme-white);
	font-family: var(--nd-primary-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.33px;
	text-align: center;
}


@media (max-width: 992px) {
	.ic-nov-hero--promo {
		padding: 32px 0;
	}
}

/* Every phase, 767px and below: 7px above the hero. */
@media (max-width: 767px) {
	body .main_container.ic-nov-hero.ic-nov-hero--promo {
		margin-top: 3px;
	}
}

@media (max-width: 576px) {
	.ic-nov-hero--promo {
		min-height: 643px;
		padding: 30px 0 !important;
	}

	.ic-nov-hero--promo .actual_content {
		margin-top: 0;
		padding: 20px 32px !important;
	}

	.ic-nov-hero--promo .actual_content::before {
		background: none;
		filter: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* Fluid instead of a fixed 287px, which overflowed narrow screens. !important beats the
	   width: 287px set by the homepage Elementor CSS at the same breakpoint. */
	.ic-nov-hero--promo .actual_content .new__design-btn {
		width: 100% !important;
		max-width: 287px;
	}

	.ic-nov-hero--promo span.limit {
		font-size: 13px !important;
	}
}

@media (max-width: 474px) {
	.ic-nov-hero--promo .actual_content {
		padding: 20px !important;
	}

	.ic-nov-hero--promo h1 br {
		display: none !important;
	}
}

@media (max-width: 380px) {
	.ic-nov-hero--promo {
		padding-bottom: 280px !important;
	}
}

@media (max-width: 374px) {
	.ic-nov-hero--promo .reviews_container {
		flex-direction: column;
		gap: 4px;
		min-width: 272px;
	}
}


/**
 * 2.0 Phase-specific - one or a few phases only
 *
 * The hero root carries the running phase as a modifier class: ic-nov-hero--price-drop,
 * --veterans-stock-up, --soda-stock-up, --b2g1-early-bf, --early-bf, --black-friday,
 * --cyber-week (keys of IC_NOV_PHASES in bootstrap.php). Same pattern as the promo banner
 * (ic-nov-promo-banner--{phase}).
 *
 * How to use: copy the shared rule's selector and swap --promo for the phase, e.g.
 *   shared: .ic-nov-hero--promo h1 { ... }
 *   phase:  .ic-nov-hero--veterans-stock-up h1 { ... }
 * Same strength as the shared rule and later in the file, so the phase rule wins. Add
 * !important only where the shared rule itself uses it. Mobile-only rules go in a 576px block
 * below this comment.
 */

/* Phase 1 - Price Drop, mobile: the heading keeps its line break (the shared 474px rule hides it). */
@media (max-width: 474px) {
	.ic-nov-hero--price-drop h1 br {
		display: inline !important;
	}
}

/*
 * Phase 2 - Veterans Day, desktop: darker, softer frosted panel (Figma). Border radius 48px and
 * the 3.7px backdrop blur match the shared rule. The mask fades the panel out over its outer
 * 32px (as on Cyber Week), so the backdrop blur's hard edge never shows on the hero image.
 */
@media (min-width: 577px) {
	.ic-nov-hero--veterans-stock-up .actual_content::before {
		background: rgba(33, 33, 33, 0.11);
		filter: blur(20.149999618530273px);
		-webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent), linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent), linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent);
		mask-composite: intersect;
	}
}

/*
 * Phase 2 - Veterans Day, mobile: 240px bottom padding at every width (the shared rules use
 * 30px, then 280px at 380px), the heading keeps its line break (the shared 474px rule hides it),
 * and the frosted panel stays on (Figma), where the shared 576px rule switches it off. Same
 * strength as the shared rules and later in the file, so these win.
 */
@media (max-width: 576px) {
	.ic-nov-hero--veterans-stock-up {
		padding-bottom: 240px !important;
	}

	.ic-nov-hero--veterans-stock-up h1 br {
		display: inline !important;
	}

	.ic-nov-hero--veterans-stock-up .actual_content::before {
		border-radius: 32px;
		background: rgba(255, 255, 255, 0.11);
		filter: blur(10.899999618530273px);
		-webkit-backdrop-filter: blur(3.700000047683716px);
		backdrop-filter: blur(3.700000047683716px);
	}
}

/* Phase 2 - Veterans Day: heading 30px up to a 720px screen, growing to 48px at 1440px. */
body .main_container.ic-nov-hero.ic-nov-hero--veterans-stock-up .actual_content .inner-main-content-wrapper h1 {
	font-size: clamp(30px, 2.5vw + 12px, 48px) !important;
}

/* Phase 2 - Veterans Day: subheading 18px at a 320px screen, growing to 24px at 1200px. */
body .main_container.ic-nov-hero.ic-nov-hero--veterans-stock-up .actual_content .inner-main-content-wrapper p {
	font-size: clamp(18px, 0.68vw + 15.82px, 24px);
}

/*
 * Phase 3 - B2G1 and 3b - Black Friday Early, desktop: the darker Figma tint on the Price Drop
 * (shared) blur: radius 48px, 10.9px layer blur and 3.7px backdrop blur come from the shared rule.
 * The browser's backdrop blur stops sharply at the panel's box, and on this hero's bright city
 * lights that edge shows; the mask fades the panel out over its outer 32px (as on Cyber Week),
 * so the blur blends into the image.
 */
@media (min-width: 577px) {
	.ic-nov-hero--b2g1-early-bf .actual_content::before,
	.ic-nov-hero--early-bf .actual_content::before {
		background: rgba(17, 17, 17, 0.09);
		-webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent), linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent), linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent);
		mask-composite: intersect;
	}
}

/*
 * Phase 3 - B2G1 and 3b - Black Friday Early, mobile: frosted panel stays on (Figma), where the
 * shared 576px rule switches it off. Same strength as that rule and later in the file.
 */
@media (max-width: 576px) {
	.ic-nov-hero--b2g1-early-bf .actual_content::before,
	.ic-nov-hero--early-bf .actual_content::before {
		border-radius: 32px;
		background: rgba(88, 88, 88, 0.04);
		filter: blur(8.300000190734863px);
		-webkit-backdrop-filter: blur(0.30000001192092896px);
		backdrop-filter: blur(0.30000001192092896px);
	}
}

/* Phase 3 - B2G1 and 3b - Black Friday Early, mobile: the heading keeps its line break (the shared 474px rule hides it). */
@media (max-width: 474px) {
	.ic-nov-hero--b2g1-early-bf h1 br,
	.ic-nov-hero--early-bf h1 br {
		display: inline !important;
	}
}

/* Phase 3 - B2G1 and 3b - Black Friday Early: heading 30px up to a 720px screen, growing to 48px at 1440px. */
body .main_container.ic-nov-hero.ic-nov-hero--b2g1-early-bf .actual_content .inner-main-content-wrapper h1,
body .main_container.ic-nov-hero.ic-nov-hero--early-bf .actual_content .inner-main-content-wrapper h1 {
	font-size: clamp(30px, 2.5vw + 12px, 48px) !important;
}

/* Phase 3 - B2G1 and 3b - Black Friday Early: subheading 18px at a 320px screen, growing to 24px at 1200px. */
body .main_container.ic-nov-hero.ic-nov-hero--b2g1-early-bf .actual_content .inner-main-content-wrapper p,
body .main_container.ic-nov-hero.ic-nov-hero--early-bf .actual_content .inner-main-content-wrapper p {
	font-size: clamp(18px, 0.68vw + 15.82px, 24px);
}

/*
 * Phase 2b - Soda Stock-Up and phase 5 - Cyber Week: black heading, sub-heading and text below
 * the button. body + five classes beats the homepage Elementor CSS, which colours the hero h1
 * white.
 */
body .main_container.ic-nov-hero.ic-nov-hero--soda-stock-up .actual_content .inner-main-content-wrapper h1,
body .main_container.ic-nov-hero.ic-nov-hero--soda-stock-up .actual_content .inner-main-content-wrapper p,
body .main_container.ic-nov-hero.ic-nov-hero--soda-stock-up .actual_content .inner-main-content-wrapper span.limit,
body .main_container.ic-nov-hero.ic-nov-hero--cyber-week .actual_content .inner-main-content-wrapper h1,
body .main_container.ic-nov-hero.ic-nov-hero--cyber-week .actual_content .inner-main-content-wrapper p,
body .main_container.ic-nov-hero.ic-nov-hero--cyber-week .actual_content .inner-main-content-wrapper span.limit {
	color: var(--nd-theme-black);
}

/*
 * Phase 2b - Soda Stock-Up, desktop: the shared panel (same Figma values) with its outer 32px
 * faded out (as on Cyber Week), so the backdrop blur's hard edge never shows on the hero image.
 */
@media (min-width: 577px) {
	.ic-nov-hero--soda-stock-up .actual_content::before {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent), linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent), linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent);
		mask-composite: intersect;
	}
}

/*
 * Phase 2b - Soda Stock-Up, mobile: the heading keeps its line break down to 371px (the shared
 * 474px rule hides it) and drops it at 370px and below.
 */
@media (max-width: 474px) {
	.ic-nov-hero--soda-stock-up h1 br {
		display: inline !important;
	}
}

@media (max-width: 370px) {
	.ic-nov-hero--soda-stock-up h1 br {
		display: none !important;
	}
}

/*
 * Phase 2b - Soda Stock-Up: 240px bottom padding from 420px down to 381px. Below that the shared
 * 380px rule's 280px takes over again.
 */
@media (min-width: 381px) and (max-width: 420px) {
	.ic-nov-hero--soda-stock-up {
		padding-bottom: 240px !important;
	}
}

/*
 * Phase 2b - Soda Stock-Up: black "Trusted by" badge text, matching the heading, at semi-bold so
 * the small 13px text reads darker. !important so the homepage Elementor CSS (stored in the
 * database) cannot keep it light.
 */
body .main_container.ic-nov-hero.ic-nov-hero--soda-stock-up .actual_content .reviews_container,
body .main_container.ic-nov-hero.ic-nov-hero--soda-stock-up .actual_content .reviews_container .reviews_text {
	color: var(--nd-theme-black) !important;
	font-weight: 600;
}

/* Phase 5 - Cyber Week: black "Trusted by" badge text, same strength as the heading rule above. */
body .main_container.ic-nov-hero.ic-nov-hero--cyber-week .actual_content .reviews_container,
body .main_container.ic-nov-hero.ic-nov-hero--cyber-week .actual_content .reviews_container .reviews_text {
	color: var(--nd-theme-black);
}

/*
 * Phase 5 - Cyber Week: lighter frosted panel (Figma values; radius 48px from the shared rule).
 * The browser's backdrop blur stops sharply at the panel's box, and at 8.6px that edge showed on
 * the light hero image. The mask fades the panel out over its outer 32px, so the blur blends
 * into the image the way Figma renders it. Desktop only.
 */
@media (min-width: 577px) {
	.ic-nov-hero--cyber-week .actual_content::before {
		background: rgba(255, 255, 255, 0.29);
		filter: blur(22.700000762939453px);
		-webkit-backdrop-filter: blur(8.600000381469727px);
		backdrop-filter: blur(8.600000381469727px);
		-webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent), linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent), linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent);
		mask-composite: intersect;
	}
}

/* Phase 4 - Black Friday: heading 30px up to a 720px screen, growing to 48px at 1440px. */
body .main_container.ic-nov-hero.ic-nov-hero--black-friday .actual_content .inner-main-content-wrapper h1 {
	font-size: clamp(30px, 2.5vw + 12px, 48px) !important;
}

/* Phase 4 - Black Friday: subheading at most 500px wide, 18px at a 320px screen growing to 24px at 1200px. */
body .main_container.ic-nov-hero.ic-nov-hero--black-friday .actual_content .inner-main-content-wrapper p {
	max-width: 500px !important;
	font-size: clamp(18px, 0.68vw + 15.82px, 24px);
}

/* Phase 4 - Black Friday, mobile: the heading keeps its line break (the shared 474px rule hides it). */
@media (max-width: 474px) {
	.ic-nov-hero--black-friday h1 br {
		display: inline !important;
	}
}

/* Phase 5 - Cyber Week: heading 26px up to a 560px screen, growing to 44px at 1280px. */
body .main_container.ic-nov-hero.ic-nov-hero--cyber-week .actual_content .inner-main-content-wrapper h1 {
	font-size: clamp(26px, 2.5vw + 12px, 44px) !important;
}

/* Phase 5 - Cyber Week: subheading 18px at a 320px screen, growing to 24px at 1200px. */
body .main_container.ic-nov-hero.ic-nov-hero--cyber-week .actual_content .inner-main-content-wrapper p {
	font-size: clamp(18px, 0.68vw + 15.82px, 24px);
}

/*
 * Phase 5 - Cyber Week, mobile: the heading keeps its line break down to 375px (the shared 474px
 * rule hides it) and drops it at 374px and below.
 */
@media (max-width: 474px) {
	.ic-nov-hero--cyber-week h1 br {
		display: inline !important;
	}
}

@media (max-width: 374px) {
	.ic-nov-hero--cyber-week h1 br {
		display: none !important;
	}
}