.nss-hero__layout,
.nss-section.alignwide {
	width: min(100% - 2rem, var(--nss-container));
	margin-inline: auto;
}

.nss-hero {
	margin-block-start: 0;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	background:
		linear-gradient(135deg, rgba(239, 246, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 247, 237, 0.8) 100%),
		var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.nss-hero__layout {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

.nss-hero h1 {
	max-width: 44rem;
	margin-block: 0 1rem;
	font-size: clamp(2.2rem, 5.4vw, 4.2rem);
	line-height: 1.04;
	letter-spacing: 0;
}

.nss-hero__text {
	max-width: 42rem;
	margin-block: 0 1.5rem;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	line-height: 1.65;
}

.nss-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	margin-block: 0 0.85rem;
	padding: 0.42rem 0.75rem;
	background: linear-gradient(135deg, color-mix(in srgb, var(--nss-primary) 8%, transparent) 0%, color-mix(in srgb, var(--nss-accent) 6%, transparent) 100%);
	border: 1px solid color-mix(in srgb, var(--nss-primary) 25%, transparent);
	border-radius: var(--nss-radius-pill);
	color: var(--nss-primary-dark);
	font-size: 0.82rem;
	font-weight: 900;
	line-height: 1;
}

.nss-hero__buttons {
	gap: 0.75rem;
}

.nss-hero-badges {
	gap: 0.5rem;
	margin-block-start: 1.25rem;
}

.nss-hero-badges p {
	margin: 0;
	padding: 0.5rem 0.75rem;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(24, 184, 200, 0.22);
	border-radius: var(--nss-radius-pill);
	color: var(--wp--preset--color--secondary);
	font-size: 0.875rem;
	font-weight: 800;
}

.nss-hero__card,
.nss-category-card,
.nss-benefit-card,
.nss-guide-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--nss-radius);
	box-shadow: var(--nss-shadow);
}

.nss-hero__card {
	position: relative;
	overflow: hidden;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-color: color-mix(in srgb, var(--nss-primary) 15%, transparent);
	border-top: 4px solid var(--nss-primary);
	background: linear-gradient(135deg, rgba(239, 246, 255, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.nss-hero__card h2 {
	margin-block: 0 1rem;
	font-size: clamp(1.25rem, 2.5vw, 1.55rem);
	line-height: 1.2;
}

.nss-hero-card__label {
	display: inline-flex;
	margin-block: 0 0.65rem;
	padding: 0.42rem 0.72rem;
	background: linear-gradient(135deg, color-mix(in srgb, var(--nss-primary) 12%, transparent) 0%, color-mix(in srgb, var(--nss-accent) 8%, transparent) 100%);
	border-radius: var(--nss-radius-pill);
	color: var(--nss-primary);
	font-size: 0.78rem;
	font-weight: 900;
	line-height: 1;
}

.nss-hero-product {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 0.95rem;
	align-items: center;
	margin-block: 1rem;
	padding: 0.85rem;
	background: linear-gradient(135deg, rgba(239, 246, 255, 0.6) 0%, rgba(255, 247, 237, 0.4) 100%);
	border: 1px solid color-mix(in srgb, var(--nss-primary) 15%, transparent);
	border-radius: var(--nss-radius-lg);
}

.nss-hero-product__visual {
	position: relative;
	min-height: 74px;
	margin: 0;
	background:
		linear-gradient(180deg, #ffffff 0%, #edf7fc 100%);
	border: 1px solid rgba(12, 63, 92, 0.1);
	border-radius: var(--nss-radius);
	box-shadow:
		inset 0 -10px 18px rgba(8, 119, 201, 0.08),
		0 10px 24px rgba(12, 63, 92, 0.08);
}

.nss-hero-product__visual::before {
	position: absolute;
	right: 0.9rem;
	bottom: 0.72rem;
	left: 0.9rem;
	height: 4px;
	background: rgba(12, 63, 92, 0.18);
	border-radius: var(--nss-radius-pill);
	content: "";
}

.nss-hero-product__visual::after {
	position: absolute;
	top: 0.65rem;
	right: 0.75rem;
	width: 0.7rem;
	height: 0.7rem;
	background: var(--nss-success);
	border-radius: var(--nss-radius-pill);
	box-shadow: -1rem 0 0 rgba(24, 184, 200, 0.42);
	content: "";
}

.nss-hero-product__meta {
	margin: 0;
}

.nss-hero-product__title {
	margin-block: 0 0.35rem;
	color: var(--wp--preset--color--text);
	font-weight: 900;
	line-height: 1.3;
}

.nss-hero-product__price {
	margin: 0;
	color: var(--nss-price-color);
	font-size: 1.15rem;
	font-weight: 950;
	line-height: 1.2;
}

.nss-hero-benefits {
	display: grid;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nss-hero-benefits li {
	position: relative;
	padding: 0.75rem 0.75rem 0.75rem 2.35rem;
	background: linear-gradient(135deg, rgba(239, 246, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 100%);
	border: 1px solid color-mix(in srgb, var(--nss-primary) 15%, transparent);
	border-radius: var(--nss-radius);
	font-weight: 800;
}

.nss-hero-benefits li::before {
	position: absolute;
	top: 0.85rem;
	left: 0.8rem;
	width: 0.85rem;
	height: 0.85rem;
	background: var(--nss-success);
	border-radius: var(--nss-radius-pill);
	content: "";
}

.nss-hero--catalog {
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
	background:
		linear-gradient(180deg, rgba(239, 246, 255, 0.8) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 247, 237, 0.5) 100%),
		var(--wp--preset--color--background);
}

.nss-storefront-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: stretch;
}

.nss-promo-slide,
.nss-promo-banner,
.nss-promo-mini,
.nss-hero-service__card,
.nss-quick-tiles {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--nss-radius);
	box-shadow: 0 10px 26px rgba(12, 63, 92, 0.06);
}

.nss-promo-carousel {
	display: grid;
	grid-auto-columns: minmax(18rem, 100%);
	grid-auto-flow: column;
	gap: 1rem;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	scrollbar-width: thin;
}

.nss-promo-zone {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.8rem;
	margin: 0;
}

/* Allow these grid tracks to shrink below their content's min-content. Without
   this the hero banner slider (a horizontal scroller) forces the whole hero
   wider than the mobile viewport, causing a right-side overflow on the page. */

.nss-storefront-hero > *,
.nss-promo-zone > *,
.nss-promo-minis > * {
	min-width: 0;
}

.nss-promo-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 21rem;
	margin: 0;
	overflow: hidden;
	padding: clamp(1.35rem, 4vw, 2.6rem);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--nss-primary-dark) 95%, transparent) 0%, color-mix(in srgb, var(--nss-primary) 92%, transparent) 45%, color-mix(in srgb, var(--nss-primary-light) 80%, transparent) 100%);
	border-color: color-mix(in srgb, var(--nss-primary) 30%, transparent);
	color: #ffffff;
	box-shadow: 0 20px 48px color-mix(in srgb, var(--nss-primary-dark) 25%, transparent);
}

.nss-promo-banner::before {
	position: absolute;
	right: clamp(1rem, 4vw, 2.6rem);
	bottom: clamp(1rem, 4vw, 2.2rem);
	width: min(34%, 14rem);
	aspect-ratio: 1.7;
	background:
		linear-gradient(180deg, #ffffff 0%, #eaf8ff 100%);
	border: 1px solid rgba(255, 255, 255, 0.44);
	border-radius: var(--nss-radius);
	box-shadow:
		0 22px 46px rgba(0, 27, 66, 0.22),
		inset 0 -14px 28px rgba(8, 119, 201, 0.09);
	content: "";
}

.nss-promo-banner::after {
	position: absolute;
	right: clamp(2.4rem, 6vw, 5.2rem);
	bottom: clamp(3.1rem, 7vw, 5rem);
	width: 0.72rem;
	height: 0.72rem;
	background: var(--nss-success);
	border-radius: var(--nss-radius-pill);
	box-shadow: -1rem 0 0 rgba(24, 184, 200, 0.6);
	content: "";
}

.nss-promo-banner__eyebrow {
	display: inline-flex;
	align-self: flex-start;
	margin-block: 0 0.8rem;
	padding: 0.44rem 0.72rem;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--nss-radius-pill);
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 900;
	line-height: 1;
	backdrop-filter: blur(4px);
}

.nss-promo-banner h1 {
	position: relative;
	z-index: 1;
	max-width: 31rem;
	margin-block: 0 0.8rem;
	color: #ffffff;
	font-size: clamp(2rem, 4vw, 3.35rem);
	line-height: 1.05;
	letter-spacing: 0;
}

.nss-promo-banner__text {
	position: relative;
	z-index: 1;
	max-width: 28rem;
	margin-block: 0 1.1rem;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1.02rem;
	line-height: 1.58;
}

.nss-promo-banner__stats {
	position: relative;
	z-index: 1;
	gap: 0.55rem;
	margin-block: 0 1.2rem;
}

.nss-promo-banner__stats p {
	display: grid;
	gap: 0.08rem;
	min-width: 7.3rem;
	margin: 0;
	padding: 0.66rem 0.72rem;
	background: rgba(255, 255, 255, 0.13);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--nss-radius);
}

.nss-promo-banner__stats strong {
	color: #ffffff;
	font-size: 0.98rem;
	font-weight: 950;
	line-height: 1.1;
}

.nss-promo-banner__stats span {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.74rem;
	font-weight: 800;
	line-height: 1.2;
}

.nss-promo-banner__buttons {
	position: relative;
	z-index: 1;
}

.nss-promo-banner__buttons .wp-block-button__link {
	background: #ffffff;
	color: var(--wp--preset--color--primary);
	box-shadow: 0 14px 28px rgba(0, 27, 66, 0.16);
}

.nss-promo-banner--media,
.nss-promo-mini--media {
	display: block;
	min-height: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.nss-promo-banner--media::before,
.nss-promo-banner--media::after {
	display: none;
}

.nss-promo-media-link {
	display: block;
	overflow: hidden;
	border-radius: var(--nss-radius-lg);
	box-shadow: 0 18px 46px rgba(9, 82, 158, 0.15);
	text-decoration: none;
	transition:
		box-shadow var(--nss-transition),
		transform var(--nss-transition);
}

.nss-promo-media-link:hover,
.nss-promo-media-link:focus {
	box-shadow: 0 22px 52px rgba(9, 82, 158, 0.22);
	transform: translateY(-2px);
}

.nss-promo-media-link img {
	display: block;
	width: 100%;
	aspect-ratio: 2.5 / 1;
	height: auto;
	object-fit: cover;
}

.nss-promo-mini--media .nss-promo-media-link {
	border-radius: var(--nss-radius);
	box-shadow: 0 10px 24px rgba(12, 63, 92, 0.08);
}

.nss-promo-mini--media .nss-promo-media-link img {
	aspect-ratio: 2.5 / 1;
}

.nss-promo-minis {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 0.8rem;
	margin: 0;
}

.nss-promo-mini.nss-promo-mini--media {
	display: flex;
	height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.nss-promo-mini {
	margin: 0;
	padding: 1rem;
	background:
		linear-gradient(135deg, #ffffff 0%, rgba(239, 246, 255, 0.6) 100%);
	border-color: color-mix(in srgb, var(--nss-primary) 15%, transparent);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
}

.nss-promo-mini--warm {
	background:
		linear-gradient(135deg, #ffffff 0%, rgba(255, 247, 237, 0.7) 100%);
	border-color: color-mix(in srgb, var(--nss-accent) 20%, transparent);
}

.nss-promo-mini__label {
	display: inline-flex;
	margin-block: 0 0.6rem;
	padding: 0.38rem 0.65rem;
	background: linear-gradient(135deg, color-mix(in srgb, var(--nss-primary) 10%, transparent) 0%, color-mix(in srgb, var(--nss-accent) 8%, transparent) 100%);
	border-radius: var(--nss-radius-pill);
	color: var(--nss-primary-dark);
	font-size: 0.76rem;
	font-weight: 900;
	line-height: 1;
}

.nss-promo-mini--warm .nss-promo-mini__label {
	background: linear-gradient(135deg, color-mix(in srgb, var(--nss-accent) 12%, transparent) 0%, color-mix(in srgb, var(--nss-accent) 8%, transparent) 100%);
	color: #92400e;
}

.nss-promo-mini h2 {
	margin-block: 0 0.45rem;
	font-size: 1.08rem;
	line-height: 1.2;
}

.nss-promo-mini p:not(.nss-promo-mini__label) {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.86rem;
	line-height: 1.45;
}

.nss-promo-slide {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 20rem;
	margin: 0;
	overflow: hidden;
	padding: clamp(1.25rem, 3vw, 2rem);
	scroll-snap-align: start;
}

.nss-promo-slide::after {
	position: absolute;
	right: clamp(1rem, 4vw, 2rem);
	bottom: clamp(1rem, 4vw, 2rem);
	width: min(34%, 12rem);
	aspect-ratio: 1.7;
	background:
		linear-gradient(180deg, #ffffff 0%, #edf7fc 100%);
	border: 1px solid rgba(12, 63, 92, 0.11);
	border-radius: var(--nss-radius);
	box-shadow:
		0 16px 34px rgba(12, 63, 92, 0.12),
		inset 0 -12px 24px rgba(8, 119, 201, 0.08);
	content: "";
	pointer-events: none;
}

.nss-promo-slide--primary {
	background:
		linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 58%, rgba(255, 247, 237, 0.85) 100%);
	border-color: color-mix(in srgb, var(--nss-primary) 20%, transparent);
}

.nss-promo-slide--secondary {
	background:
		linear-gradient(135deg, #ffffff 0%, rgba(239, 246, 255, 0.6) 100%);
	border-color: color-mix(in srgb, var(--nss-primary) 15%, transparent);
}

.nss-promo-slide--sale {
	background:
		linear-gradient(135deg, #ffffff 0%, rgba(255, 247, 237, 0.7) 100%);
	border-color: color-mix(in srgb, var(--nss-accent) 20%, transparent);
}

.nss-promo-slide__eyebrow {
	display: inline-flex;
	align-self: flex-start;
	margin-block: 0 0.85rem;
	padding: 0.42rem 0.72rem;
	background: linear-gradient(135deg, color-mix(in srgb, var(--nss-primary) 10%, transparent) 0%, color-mix(in srgb, var(--nss-accent) 8%, transparent) 100%);
	border-radius: var(--nss-radius-pill);
	color: var(--nss-primary-dark);
	font-size: 0.78rem;
	font-weight: 900;
	line-height: 1;
}

.nss-promo-slide h1,
.nss-promo-slide h2 {
	position: relative;
	z-index: 1;
	max-width: 30rem;
	margin-block: 0 0.8rem;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.08;
	letter-spacing: 0;
}

.nss-promo-slide h2 {
	font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.nss-promo-slide__text {
	position: relative;
	z-index: 1;
	max-width: 27rem;
	margin-block: 0 1.15rem;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.55;
}

.nss-promo-slide__buttons,
.nss-promo-slide__meta {
	position: relative;
	z-index: 1;
}

.nss-promo-slide__meta {
	gap: 0.45rem;
	margin-block-start: 1rem;
}

.nss-promo-slide__meta p {
	margin: 0;
	padding: 0.42rem 0.62rem;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(24, 184, 200, 0.18);
	border-radius: var(--nss-radius-pill);
	color: var(--wp--preset--color--secondary);
	font-size: 0.8rem;
	font-weight: 900;
	line-height: 1;
}

.nss-hero-service {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: 0;
}

.nss-hero-service__card {
	margin: 0;
	padding: 0.95rem;
	box-shadow: none;
}

.nss-hero-service__card h3 {
	margin-block: 0 0.35rem;
	font-size: 0.98rem;
	line-height: 1.2;
}

.nss-hero-service__card p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.86rem;
	line-height: 1.45;
}

.nss-quick-tiles {
	width: min(100% - 2rem, var(--nss-container));
	margin-block-start: 0.75rem;
	margin-inline: auto;
	padding: 0.58rem;
}

.nss-quick-tiles__label {
	margin-block: 0 0.48rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.78rem;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

.nss-quick-tiles__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.42rem;
	margin: 0;
}

.nss-quick-tiles__grid p {
	margin: 0;
}

.nss-quick-tiles__grid a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	padding: 0.46rem 0.58rem;
	background: linear-gradient(135deg, rgba(239, 246, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 100%);
	border: 1px solid color-mix(in srgb, var(--nss-primary) 15%, transparent);
	border-radius: var(--nss-radius-sm);
	color: var(--wp--preset--color--text);
	font-size: 0.84rem;
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--nss-transition),
		border-color var(--nss-transition),
		color var(--nss-transition),
		box-shadow var(--nss-transition);
}

.nss-quick-tiles__grid a:hover,
.nss-quick-tiles__grid a:focus {
	background: linear-gradient(135deg, color-mix(in srgb, var(--nss-primary) 12%, transparent) 0%, color-mix(in srgb, var(--nss-accent) 8%, transparent) 100%);
	border-color: color-mix(in srgb, var(--nss-primary) 25%, transparent);
	color: var(--nss-primary);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--nss-primary) 12%, transparent);
}

.nss-section {
	padding-block: var(--nss-section-spacing);
}

.nss-section__head {
	margin-block-end: 0;
}

.nss-section__head--row {
	display: grid;
	gap: 0.75rem;
	align-items: end;
}

.home .nss-section > .nss-section__head,
.home .nss-section > .nss-section__head--row,
.home .nss-brand-carousel__head,
.home .nss-quiz__intro,
.home .nss-seo-text,
.home .nss-blog-materials > .nss-section__head {
	justify-items: center;
	text-align: center;
}

.home .nss-section__eyebrow,
.home .nss-quiz__eyebrow {
	margin-inline: auto;
}

.nss-section h2 {
	margin-block: 0 0.75rem;
	font-size: 2rem;
	line-height: 1.15;
	letter-spacing: 0;
}

.nss-section__eyebrow {
	display: inline-flex;
	width: fit-content;
	margin-block: 0 0.65rem;
	padding: 0.38rem 0.65rem;
	background: var(--nss-climate-tint);
	border-radius: var(--nss-radius-pill);
	color: var(--wp--preset--color--primary);
	font-size: 0.78rem;
	font-weight: 950;
	line-height: 1;
}

.nss-section__lead {
	max-width: 42rem;
	margin-block: 0 1.5rem;
	color: var(--wp--preset--color--muted);
}

.nss-section__head--row .nss-section__lead {
	margin-block-end: 0;
}

.nss-section__link {
	margin: 0;
	font-weight: 900;
}

.nss-section__link a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.5rem;
	padding: 0.62rem 0.8rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--nss-radius);
	text-decoration: none;
}

.nss-products-section--real .nss-section__link--after {
	display: flex;
	justify-content: flex-end;
	margin-block: 0.65rem 0;
}

.nss-products-section--real .nss-section__link--after a {
	color: #111827;
	font-weight: 950;
}

.nss-products-section--real .nss-section__link--after a:hover,
.nss-products-section--real .nss-section__link--after a:focus {
	background: #ffffff;
	border-color: rgba(17, 24, 39, 0.22);
	color: #111827;
	box-shadow: 0 10px 22px rgba(12, 63, 92, 0.08);
}

.nss-category-grid,
.nss-benefits-grid,
.nss-guide-grid,
.nss-quick-pick-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-block-start: 1.5rem;
}

.nss-category-card,
.nss-benefit-card,
.nss-guide-card,
.nss-quick-pick-card {
	padding: var(--nss-card-padding);
	transition:
		transform var(--nss-transition),
		box-shadow var(--nss-transition),
		border-color var(--nss-transition);
}

.nss-category-card:hover,
.nss-quick-pick-card:hover {
	transform: translateY(-3px);
	border-color: rgba(31, 94, 255, 0.26);
	box-shadow: var(--nss-shadow-hover);
}

.nss-category-card__badge,
.nss-benefit-card__mark,
.nss-guide-card__step,
.nss-quick-pick-card__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-block: 0 0.8rem;
	border-radius: var(--nss-radius-pill);
	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1;
}

.nss-category-card__badge {
	padding: 0.45rem 0.65rem;
	background: #fff6e4;
	color: #7a4b00;
}

.nss-category-card h3,
.nss-benefit-card h3,
.nss-guide-card h3,
.nss-quick-pick-card h3 {
	margin-block: 0 0.55rem;
	font-size: 1.12rem;
	line-height: 1.3;
}

.nss-category-card__text,
.nss-benefit-card p,
.nss-guide-card p,
.nss-quick-pick-card p {
	margin-block: 0;
	color: var(--wp--preset--color--muted);
}

.nss-quick-pick {
	padding-block: clamp(2rem, 5vw, 3rem);
}

.nss-quick-pick-grid {
	grid-template-columns: 1fr;
	gap: 0.8rem;
}

.nss-quick-pick-card {
	display: grid;
	gap: 0.45rem;
	background: linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
	border: 1px solid rgba(24, 184, 200, 0.2);
	border-radius: var(--nss-radius);
	box-shadow: 0 10px 24px rgba(12, 63, 92, 0.055);
}

.nss-quick-pick-card__label {
	justify-self: start;
	padding: 0.42rem 0.62rem;
	background: rgba(24, 184, 200, 0.12);
	color: var(--wp--preset--color--secondary);
}

.nss-quick-pick-card h3 a,
.nss-category-card h3 a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.nss-climate-categories {
	padding-block-start: clamp(2rem, 5vw, 3rem);
}

.nss-climate-categories .nss-category-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
	border-color: rgba(24, 184, 200, 0.16);
}

.nss-climate-categories .nss-category-card::after {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	width: 2.2rem;
	height: 2.2rem;
	background: rgba(24, 184, 200, 0.09);
	border-radius: var(--nss-radius-pill);
	content: "";
}

.nss-climate-categories .nss-category-card__badge {
	background: #eaf8ff;
	color: var(--wp--preset--color--secondary);
}

.nss-category-card__link {
	margin-block: 1rem 0;
	font-weight: 800;
}

.nss-category-card__link a {
	text-decoration: none;
}

.nss-category-grid--compact {
	gap: 0.85rem;
}

.nss-category-grid--compact .nss-category-card {
	box-shadow: 0 8px 18px rgba(12, 63, 92, 0.045);
}

.nss-products-section {
	border-block: 1px solid var(--wp--preset--color--border);
}

.nss-products-section--real {
	background: var(--wp--preset--color--surface);
	padding-block: clamp(2.4rem, 5vw, 3.4rem);
}

.home .nss-hero--catalog {
	padding-block-end: clamp(0.85rem, 1.8vw, 1.25rem);
}

.home .nss-products-section--real {
	padding-block: clamp(1.15rem, 2.6vw, 1.85rem);
}

.home .nss-products-section--sale {
	padding-block-start: clamp(0.95rem, 2vw, 1.35rem);
	padding-block-end: clamp(0.7rem, 1.6vw, 1.05rem);
}

.home .nss-products-section--new {
	padding-block-start: clamp(0.95rem, 2vw, 1.35rem);
	padding-block-end: clamp(1.15rem, 2.6vw, 1.85rem);
}

.home .nss-products-section--real > .nss-section__head,
.home .nss-products-section--real > .nss-showcase,
.home .nss-products-section--real > .nss-section__link--after {
	width: 100%;
	max-width: 100% !important;
}

.home .nss-products-section--real .nss-product-grid {
	gap: clamp(1rem, 1.35vw, 1.25rem);
}

.home .nss-products-section--real .nss-store-product-card__media {
	padding: clamp(1.05rem, 1.5vw, 1.25rem);
}

.home .nss-products-section--real .nss-store-product-card__body {
	padding: 1.08rem 1.15rem 1.15rem;
}

.home .nss-products-section--real .nss-store-product-card__title {
	font-size: clamp(1.02rem, 1.1vw, 1.12rem);
}

.home .nss-products-section--real .nss-store-product-card__price {
	font-size: clamp(1.22rem, 1.35vw, 1.36rem);
}

.home .nss-products-section--real .nss-store-product-card__actions .button,
.home .nss-products-section--real .nss-store-product-card__actions .wp-block-button__link {
	min-height: 2.9rem;
	font-size: 0.96rem;
}

.nss-home-promos {
	width: min(100% - 2rem, var(--nss-container));
	margin-inline: auto;
	padding-block: clamp(1rem, 2.4vw, 1.45rem);
}

.nss-home-promos__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
	margin: 0;
}

.nss-home-promo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	min-height: clamp(5.8rem, 8vw, 7.1rem);
	overflow: hidden;
	padding: clamp(1rem, 2vw, 1.25rem);
	background: #ffffff;
	border: 1px solid rgba(102, 112, 133, 0.12);
	border-radius: var(--nss-radius);
	box-shadow: 0 12px 28px rgba(12, 63, 92, 0.055);
}

.nss-home-promo::after {
	position: absolute;
	inset: auto -2rem -3.5rem auto;
	width: 9rem;
	height: 9rem;
	background: rgba(31, 94, 255, 0.08);
	border-radius: 999px;
	content: "";
}

.nss-home-promo--consult::after {
	background: rgba(24, 184, 200, 0.1);
}

.nss-home-promo__content {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.28rem;
	min-width: 0;
}

.nss-home-promo__eyebrow {
	width: fit-content;
	padding: 0.28rem 0.5rem;
	background: var(--nss-climate-tint);
	border-radius: var(--nss-radius-pill);
	color: var(--wp--preset--color--primary);
	font-size: 0.72rem;
	font-weight: 950;
	line-height: 1;
}

.nss-home-promo strong {
	color: var(--wp--preset--color--text);
	font-size: clamp(1rem, 1.45vw, 1.18rem);
	font-weight: 950;
	line-height: 1.18;
}

.nss-home-promo small {
	max-width: 28rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.86rem;
	font-weight: 850;
	line-height: 1.35;
}

.nss-home-promo__visual {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: clamp(3.6rem, 5.6vw, 4.7rem);
	height: clamp(3.6rem, 5.6vw, 4.7rem);
	margin-left: 1rem;
	background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
	border-radius: var(--nss-radius);
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 -10px 22px rgba(31, 94, 255, 0.12);
}

.nss-home-promo--consult .nss-home-promo__visual {
	background: linear-gradient(145deg, #dff8fb 0%, #c7eef7 100%);
	color: var(--wp--preset--color--secondary);
}

.nss-home-promo__visual .nss-icon {
	width: 2.25rem;
	height: 2.25rem;
	stroke-width: 1.75;
}

.nss-products-section--budget {
	margin-block-start: 0;
	border-top: 0;
	background:
		linear-gradient(180deg, rgba(255, 247, 232, 0.62) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.nss-products-section--sale {
	background:
		linear-gradient(180deg, rgba(255, 247, 232, 0.72) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.nss-products-section--new {
	margin-block-start: 0;
	border-top: 0;
	background:
		linear-gradient(180deg, rgba(234, 248, 255, 0.56) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.nss-products-section--real .woocommerce,
.nss-products-section--real .wc-block-grid {
	margin-block-start: 1.2rem;
}

.nss-products-section--real .woocommerce ul.products,
.nss-products-section--real .wc-block-grid__products {
	margin-block-end: 0;
}

.nss-products-section--real .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
	padding: 0;
}

.nss-products-section--real .wc-block-grid.has-4-columns .wc-block-grid__product {
	max-width: none;
	margin: 0;
	padding: 0;
	flex: initial;
}

.nss-products-section--real .wc-block-grid__product {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(102, 112, 133, 0.16);
	border-radius: var(--nss-radius);
	box-shadow: 0 10px 26px rgba(12, 63, 92, 0.055);
	transition:
		border-color var(--nss-transition),
		box-shadow var(--nss-transition),
		transform var(--nss-transition);
}

.nss-products-section--real .wc-block-grid__product:hover,
.nss-products-section--real .wc-block-grid__product:focus-within {
	border-color: rgba(31, 94, 255, 0.28);
	box-shadow: 0 16px 34px rgba(12, 63, 92, 0.12);
	transform: translateY(-2px);
}

.nss-products-section--real .wc-block-grid__product-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.nss-products-section--real .wc-block-grid__product-image {
	display: grid;
	place-items: center;
	min-height: clamp(10.5rem, 22vw, 15.5rem);
	margin: 0;
	padding: 1rem;
	background:
		linear-gradient(180deg, #f8fcff 0%, #eef8ff 100%);
	border-bottom: 1px solid rgba(102, 112, 133, 0.13);
}

.nss-products-section--real .wc-block-grid__product-image img {
	display: block;
	width: min(100%, 15rem);
	height: auto;
	max-height: 13.5rem;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--nss-transition);
}

.nss-products-section--real .wc-block-grid__product:hover .wc-block-grid__product-image img {
	transform: scale(1.035);
}

.nss-products-section--real .wc-block-grid__product-title {
	margin: 0;
	padding: 0.95rem 1rem 0;
	color: var(--wp--preset--color--text);
	font-size: 0.98rem;
	font-weight: 900;
	line-height: 1.35;
	text-align: left;
}

.nss-products-section--real .wc-block-grid__product-price {
	margin: 0;
	padding: 0.8rem 1rem 0.95rem;
	color: var(--nss-price-color);
	font-size: 1.18rem;
	font-weight: 950;
	line-height: 1.2;
	text-align: left;
}

.nss-products-section--real .wc-block-grid__product-price del {
	display: block;
	margin-block-end: 0.18rem;
	color: var(--nss-price-color);
	font-size: 0.82rem;
	font-weight: 800;
	opacity: 0.72;
	text-decoration: line-through;
}

.nss-products-section--real .wc-block-grid__product-price ins {
	color: var(--nss-price-sale-color);
	text-decoration: none;
}

.nss-products-section--real .wc-block-grid__product-add-to-cart {
	margin: auto 1rem 1rem;
}

.nss-products-section--real .wc-block-grid__product-add-to-cart .wp-block-button__link {
	width: 100%;
	min-height: 2.65rem;
	background: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--nss-radius);
	color: var(--wp--preset--color--surface);
	font-size: 0.92rem;
	font-weight: 900;
	box-shadow: none;
}

.nss-products-section--real .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.nss-products-section--real .wc-block-grid__product-add-to-cart .wp-block-button__link:focus {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--surface);
	box-shadow: var(--nss-shadow-button);
}

.nss-section__head--align-center {
	text-align: center;
}

.nss-section__head--align-right {
	text-align: right;
}

.nss-promo-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(16rem, 32vw, 24rem);
	overflow: hidden;
	padding: clamp(1.1rem, 3vw, 2rem);
	/* No full-image darkening mask — show the picture as-is; text stays readable
	   via the scrim on .nss-promo-card__content below. Only the fallback gradient
	   remains (shown when no image is set). */
	background:
		var(--nss-banner-image),
		linear-gradient(135deg, rgba(9, 82, 158, 0.95), rgba(24, 184, 200, 0.84));
	background-position: center;
	background-size: cover;
	border-radius: var(--nss-radius-lg);
	box-shadow: 0 18px 46px rgba(9, 82, 158, 0.15);
	color: #ffffff;
	text-decoration: none;
	transition:
		box-shadow var(--nss-transition),
		transform var(--nss-transition);
}

.nss-promo-card:hover,
.nss-promo-card:focus {
	box-shadow: 0 22px 52px rgba(9, 82, 158, 0.24);
	transform: translateY(-2px);
}

.nss-promo-card--mini {
	width: 100%;
	height: 100%;
	min-height: 11.5rem;
	aspect-ratio: 2.5 / 1;
	border-radius: var(--nss-radius);
	box-shadow: 0 10px 24px rgba(12, 63, 92, 0.08);
}

.nss-promo-card--accent {
	background:
		var(--nss-banner-image),
		linear-gradient(135deg, #1f5eff, #18b8c8);
	background-position: center;
	background-size: cover;
}

.nss-promo-card--service {
	background:
		var(--nss-banner-image),
		linear-gradient(135deg, #16825d, #18b8c8);
	background-position: center;
	background-size: cover;
}

.nss-promo-card__content {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.55rem;
	max-width: min(30rem, 72%);
}

.nss-promo-card__eyebrow {
	width: fit-content;
	padding: 0.36rem 0.58rem;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--nss-radius-pill);
	font-size: 0.76rem;
	font-weight: 950;
	line-height: 1;
}

.nss-promo-card__title {
	display: block;
	font-size: clamp(1.45rem, 3.5vw, 2.6rem);
	font-weight: 950;
	line-height: 1.05;
}

.nss-promo-card--mini .nss-promo-card__title {
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.15;
}

.nss-promo-card__text {
	max-width: 26rem;
	color: rgba(255, 255, 255, 0.84);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.5;
}

.nss-promo-card__button {
	width: fit-content;
	margin-block-start: 0.25rem;
	padding: 0.68rem 0.92rem;
	background: #ffffff;
	border-radius: var(--nss-radius);
	color: var(--wp--preset--color--primary);
	font-size: 0.9rem;
	font-weight: 950;
	line-height: 1;
}

.nss-service-strip {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 0.85rem;
	width: min(100% - 2rem, var(--nss-container));
	margin-block: 1rem 1rem;
	margin-inline: auto;
}

.nss-service-strip > * {
	margin: 0;
}

.nss-service-tile {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 5.4rem;
	align-items: center;
	height: 100%;
	min-height: 6.15rem;
	min-width: 0;
	overflow: hidden;
	padding: 1.1rem 1.05rem 1.1rem 1.25rem;
	background: linear-gradient(135deg, rgba(239, 246, 255, 0.5) 0%, rgba(255, 255, 255, 0.9) 100%);
	border: 1px solid color-mix(in srgb, var(--nss-primary) 15%, transparent);
	border-radius: var(--nss-radius);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
	transition:
		border-color var(--nss-transition),
		box-shadow var(--nss-transition),
		transform var(--nss-transition),
		background-color var(--nss-transition);
}

.nss-service-tile:hover,
.nss-service-tile:focus {
	border-color: color-mix(in srgb, var(--nss-primary) 25%, transparent);
	box-shadow: 0 20px 48px color-mix(in srgb, var(--nss-primary) 15%, transparent);
	transform: translateY(-3px);
	background: linear-gradient(135deg, rgba(239, 246, 255, 0.8) 0%, rgba(255, 247, 237, 0.4) 100%);
}

.nss-service-tile__content {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.55rem;
	min-width: 0;
}

.nss-service-tile strong {
	max-width: 15rem;
	font-size: clamp(1rem, 1.5vw, 1.18rem);
	font-weight: 950;
	line-height: 1.15;
}

.nss-service-tile small {
	max-width: 16rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.88rem;
	font-weight: 850;
	line-height: 1.35;
}

.nss-service-tile__visual {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 5rem;
	height: 5rem;
	justify-self: end;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--nss-primary) 12%, transparent) 0%, color-mix(in srgb, var(--nss-accent) 8%, transparent) 100%);
	border: 2px solid color-mix(in srgb, var(--nss-primary) 20%, transparent);
	border-radius: 1rem;
	color: var(--nss-primary);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--nss-primary) 10%, transparent);
}

.nss-service-tile__visual .nss-icon {
	position: relative;
	z-index: 1;
	width: 2.8rem;
	height: 2.8rem;
	stroke-width: 1.7;
}

.nss-service-tile--install .nss-service-tile__visual {
	color: var(--nss-primary-dark);
	border-color: color-mix(in srgb, var(--nss-primary-dark) 25%, transparent);
	background: linear-gradient(135deg, color-mix(in srgb, var(--nss-primary-dark) 12%, transparent) 0%, color-mix(in srgb, var(--nss-primary) 8%, transparent) 100%);
}

.nss-service-tile--warranty .nss-service-tile__visual {
	color: var(--nss-primary);
	border-color: color-mix(in srgb, var(--nss-primary) 25%, transparent);
	background: linear-gradient(135deg, color-mix(in srgb, var(--nss-primary) 12%, transparent) 0%, color-mix(in srgb, var(--nss-primary-light) 8%, transparent) 100%);
}

/* Mobile: allow a 3rd title line on storefront cards (home grids, "похожие"
   block, any product preview) so product names stop getting clamped to 2. */

@media (max-width: 600px) {
	.home .nss-products-section--real .nss-store-product-card__title {
		min-height: 3.4rem;
		max-height: 3.4rem;
		font-size: 0.9rem;
		line-height: 1.25;
		-webkit-line-clamp: 3;
	}
}

.nss-benefit-card {
	border-top: 3px solid var(--nss-climate-cyan);
}

.nss-benefits--compact {
	padding-block: clamp(2rem, 5vw, 3.25rem);
}

.nss-benefits--compact .nss-benefits-grid {
	gap: 0.85rem;
}

.nss-benefits--compact .nss-benefit-card {
	box-shadow: none;
}

.nss-benefit-card__mark {
	width: 2rem;
	height: 2rem;
	background: #eaf8ff;
	color: var(--wp--preset--color--secondary);
}

.nss-guide-card {
	position: relative;
	box-shadow: none;
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(24, 184, 200, 0.17);
}

.nss-guide-card__step {
	width: 2.15rem;
	height: 2.15rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.nss-blog-materials {
	padding-block: clamp(3rem, 6vw, 4.6rem);
	background: #ffffff;
}

.nss-blog-materials__query {
	margin-block-start: 1rem;
}

.nss-blog-materials__grid {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 0.9rem;
	margin: 0;
	padding: 0;
}

.nss-blog-materials__grid > li {
	margin: 0;
}

.nss-blog-materials__card {
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(102, 112, 133, 0.12);
	border-radius: var(--nss-radius);
	box-shadow: 0 12px 28px rgba(12, 63, 92, 0.055);
	transition:
		border-color var(--nss-transition),
		box-shadow var(--nss-transition),
		transform var(--nss-transition);
}

.nss-blog-materials__card:hover,
.nss-blog-materials__card:focus-within {
	border-color: rgba(31, 94, 255, 0.22);
	box-shadow: 0 18px 36px rgba(12, 63, 92, 0.1);
	transform: translateY(-2px);
}

.nss-blog-materials__image {
	display: block;
	aspect-ratio: 1 / 1;
	margin: 0;
	background: #f7f8fc;
	border-bottom: 1px solid rgba(102, 112, 133, 0.1);
	overflow: hidden;
}

.nss-blog-materials__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nss-blog-materials__body {
	display: grid;
	gap: 0.55rem;
	padding: 1rem;
}

.nss-blog-materials__date {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.78rem;
	font-weight: 900;
}

.nss-blog-materials__title {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 950;
	line-height: 1.25;
}

.nss-blog-materials__title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.nss-blog-materials__title a:hover,
.nss-blog-materials__title a:focus {
	color: var(--wp--preset--color--primary);
}

.nss-blog-materials__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	line-height: 1.45;
}

.nss-blog-materials__excerpt p {
	margin: 0;
}

.nss-blog-materials__empty {
	margin: 1rem 0 0;
	padding: 1rem;
	background: #f7f8fc;
	border: 1px solid rgba(102, 112, 133, 0.12);
	border-radius: var(--nss-radius);
	color: var(--wp--preset--color--muted);
	font-weight: 850;
}

.nss-home > .nss-hsec:not(.nss-hsec--brands) {
	overflow-x: clip;
}

@media (min-width: 700px) {
	.nss-section {
		padding-block: 4rem;
	}

	.nss-section h2 {
		font-size: 2.25rem;
	}

	.nss-category-grid,
.nss-benefits-grid,
.nss-guide-grid,
.nss-quick-pick-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nss-quick-tiles__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nss-blog-materials__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nss-home-promos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 980px) {

	.nss-blog-materials__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nss-hero__layout {
		grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
		gap: 3rem;
	}

	.nss-storefront-hero {
		grid-template-columns: minmax(13rem, 0.45fr) minmax(0, 1.75fr);
		gap: 1rem;
	}

	.nss-promo-zone {
		grid-template-rows: minmax(0, 1fr) auto;
	}

	.nss-promo-carousel {
		grid-auto-columns: minmax(0, 100%);
	}

	.nss-promo-minis {
		grid-template-columns: repeat(var(--nss-mini-count, 3), minmax(0, 1fr));
	}

	.nss-service-strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nss-promo-slide {
		min-height: 24rem;
	}

	.nss-quick-tiles__grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.nss-section__head--row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.nss-products-section--real .wc-block-grid__products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}

	.nss-category-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nss-benefits-grid,
.nss-guide-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nss-quick-pick-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.nss-guide-grid {
		margin-block-start: 0;
	}
}

@media (max-width: 420px) {
	.nss-hero__layout,
.nss-section.alignwide {
		width: min(100% - 1rem, var(--nss-container));
	}

	.nss-hero--catalog {
		padding-block: 1rem 1.5rem;
	}

	.nss-storefront-hero,
.nss-service-strip,
.nss-quick-tiles {
		width: min(100% - 1rem, var(--nss-container));
	}

	.nss-promo-carousel {
		grid-auto-columns: minmax(17rem, 92%);
	}

	.nss-promo-slide {
		min-height: 21rem;
	}

	.nss-promo-banner {
		min-height: 0;
	}

	.nss-promo-card {
		min-height: 15.5rem;
		padding: 1rem;
		background-position: center right 28%;
	}

	.nss-promo-card--mini {
		min-height: 10.25rem;
	}

	.nss-promo-card__content {
		max-width: 88%;
	}

	.nss-promo-card__title {
		font-size: 1.42rem;
	}

	.nss-promo-card__text {
		font-size: 0.88rem;
	}

	.nss-promo-media-link img {
		aspect-ratio: 1.45 / 1;
	}

	.nss-promo-slide::after {
		width: min(45%, 9rem);
		opacity: 0.78;
	}

	.nss-quick-tiles__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nss-hero__buttons .wp-block-button,
.nss-hero__buttons .wp-block-button__link {
		width: 100%;
	}

	.nss-promo-slide__buttons .wp-block-button,
.nss-promo-slide__buttons .wp-block-button__link {
		width: 100%;
	}

	.nss-hero-product {
		grid-template-columns: 1fr;
	}

	.nss-hero-product__visual {
		min-height: 96px;
	}

	.nss-quick-pick,
.nss-section {
		padding-block: 2.4rem;
	}

	.nss-section h2 {
		font-size: 1.75rem;
	}

	.nss-products-section--real .wc-block-grid__products {
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}
	.nss-hsec-products:not(.nss-hsec-products--carousel) .nss-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nss-products-section--real .wc-block-grid__product-image {
		min-height: 14rem;
	}

	.nss-products-section--real .wc-block-grid__product-image img {
		max-height: 12.8rem;
	}

	.nss-products-section--real .wc-block-grid__product-title {
		font-size: 1rem;
	}

	.nss-guide-card,
.nss-benefit-card,
.nss-category-card,
.nss-quick-pick-card,
.nss-hero-service__card {
		padding: 1rem;
	}
}

.nss-main > .nss-hero:first-child,
.nss-hero--catalog {
	margin-block-start: 0;
}

.nss-products-section--sale .nss-showcase {
	margin-block-start: 0.8rem;
}

.home .nss-hero--catalog,
.home .nss-home-promos,
.home .nss-brand-section,
.home .nss-benefits,
.home .nss-seo-text {
	background: #ffffff;
}

.home .nss-products-section--sale,
.home .nss-products-section--new,
.home .nss-quiz-section,
.home .nss-blog-materials {
	background: #f7f8fc;
}

.home .nss-hero--catalog,
.home .nss-section {
	border-block: 0;
	box-shadow: none;
}

.home .nss-products-section--sale,
.home .nss-products-section--new,
.home .nss-brand-section,
.home .nss-quiz-section,
.home .nss-seo-text,
.home .nss-blog-materials {
	background-image: none;
}

.home .nss-brand-carousel__viewport::before {
	background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0) 100%);
}

.home .nss-brand-carousel__viewport::after {
	background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0) 100%);
}

/* ====================================================================== *
 * Home section builder — frontend
 * ====================================================================== */

.nss-home > .nss-section,
.nss-home > .nss-hero {
	margin-block: clamp(1.4rem, 3.2vw, 2.6rem);
}

.nss-storefront-hero--no-menu {
	grid-template-columns: 1fr !important;
}

/* Category tiles with image */

.nss-category-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	margin-block-end: 0.75rem;
	border-radius: var(--nss-radius, 12px);
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--surface, #f1f5f9);
}

.nss-category-card__name {
	display: block;
	margin-block-start: 0.35rem;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--wp--preset--color--heading, #0f172a);
}

.nss-category-grid--compact {
	grid-template-columns: repeat(var(--nss-grid-columns, 4), minmax(0, 1fr));
}

/* Banner / CTA section */

.nss-home-banners__grid {
	display: grid;
	grid-template-columns: repeat(var(--nss-grid-columns, 3), minmax(0, 1fr));
	gap: clamp(0.85rem, 1.6vw, 1.25rem);
	margin-block-start: 1.2rem;
}

.nss-home-banner .nss-promo-card {
	aspect-ratio: 16 / 4;
	min-height: 0;
	box-shadow: none;
}

.nss-home-banner .nss-promo-card:hover,
.nss-home-banner .nss-promo-card:focus {
	box-shadow: none;
}

/* Lock the hero slide to a fixed 3.2:1 (16:5) box so a correctly-sized image
   (~1920×600) fills it with no cropping at any screen width — the height was
   previously clamp()-driven, so the ratio drifted and cover() cropped. Minis
   keep their own 2.5:1. Mobile switches to 3:2 to match the mobile image. */
.nss-hsec--hero .nss-promo-card--main {
	aspect-ratio: 16 / 5;
	min-height: 0;
}

@media (max-width: 767px) {
	.nss-hsec--hero .nss-promo-card--main {
		aspect-ratio: 3 / 2;
	}
}

/* Let the "Стиль секции" setting control the text block background. The inner
   block is opaque white by default (".home .nss-seo-text"), which would hide the
   section style — clear it so the chosen style (card / colour / premium) shows. */

.home .nss-hsec--style-light_card .nss-seo-text,
.home .nss-hsec--style-color_bg .nss-seo-text,
.home .nss-hsec--style-premium .nss-seo-text,
.home .nss-hsec--style-compact .nss-seo-text {
	background: transparent;
}

.nss-hsec--style-premium .nss-seo-text,
.nss-hsec--style-premium .nss-seo-text p {
	color: rgba(255, 255, 255, 0.88);
}

/* Left-align text inside the side-image layout (the home seo block is
   centred by default — see ".home .nss-seo-text") and drop the centred
   max-width so the column fills the available width. */

.home .nss-seo-text--has-image,
.home .nss-seo-text--has-image .nss-seo-text__body {
	justify-items: stretch;
	text-align: left;
}

@media (max-width: 760px) {
	.nss-category-grid--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.nss-home-banners__grid {
		grid-template-columns: 1fr;
	}
}

/* ====================================================================== *
 * Home section builder v2 — wrapper modifiers
 * ====================================================================== */

.nss-home > .nss-hsec { margin-block: 0; }

/* Spacing */

.nss-hsec--sp-small  { padding-block: clamp(0.8rem, 1.6vw, 1.2rem); }

.nss-hsec--sp-medium { padding-block: clamp(1.4rem, 3vw, 2.4rem); }

.nss-hsec--sp-large  { padding-block: clamp(2.4rem, 5vw, 3.6rem); }

/* Width */

.nss-hsec--narrow.alignwide { width: min(100% - 2rem, 780px); }

.nss-section.alignfull.nss-hsec { width: 100%; }

/* Title size + align */

.nss-hsec-title--small  { font-size: clamp(1.1rem, 2vw, 1.35rem); }

.nss-hsec-title--medium { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }

.nss-hsec-title--large  { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }

.nss-hsec-align-center { text-align: center; }

.nss-hsec-align-center.nss-section__head { justify-content: center; }

.nss-hsec-align-right { text-align: right; }

.nss-hsec-align-right.nss-section__head { justify-content: flex-end; }

/* Section button */

.nss-hsec-btn {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .6rem 1.2rem; border-radius: var(--nss-radius-pill, 999px);
	font-weight: 700; text-decoration: none; transition: all var(--nss-transition, .18s); white-space: nowrap;
}

.nss-hsec-btn--primary { background: var(--nss-button-primary-bg, #1f5eff); color: var(--nss-button-primary-text, #fff); }

.nss-hsec-btn--primary:hover { background: var(--nss-button-primary-hover-bg, #1746c4); }

.nss-hsec-btn--outline { border: 1px solid var(--nss-button-primary-bg, #1f5eff); color: var(--nss-button-primary-bg, #1f5eff); }

.nss-hsec-btn--outline:hover { background: var(--nss-button-primary-bg, #1f5eff); color: var(--nss-button-primary-text, #fff); }

.nss-hsec-btn--light { background: var(--wp--preset--color--surface, #f1f5f9); color: var(--wp--preset--color--heading, #0f172a); }

.nss-hsec-btn--text {
	color: var(--nss-button-primary-bg, #1f5eff);
	padding: 0 0 4px;
	border-radius: 0;
	border-bottom: 2px solid currentColor;
}

.nss-hsec-btn--text:hover { color: var(--nss-button-primary-hover-bg, #1746c4); }

/* Product / benefits / posts column control */

.nss-hsec-products .nss-product-grid { gap: var(--nss-card-gap, 1.25rem); }

.nss-benefits-grid { grid-template-columns: repeat(var(--nss-grid-columns, 4), minmax(0, 1fr)); }

.nss-home .nss-blog-materials__grid { grid-template-columns: repeat(var(--nss-grid-columns, 4), minmax(0, 1fr)); }

/* Style presets */

.nss-hsec--style-light_card { background: #fff; border-radius: var(--nss-radius-lg, 18px); box-shadow: 0 10px 30px rgba(15,23,42,.05); }

.nss-hsec--style-color_bg { background: var(--wp--preset--color--surface, #f5f7fb); }

.nss-hsec--style-compact { --nss-card-padding: .8rem; }

.nss-hsec--style-premium { background: linear-gradient(135deg, #0b1220, #15264a); color: #fff; border-radius: var(--nss-radius-lg, 18px); }

.nss-hsec--style-premium .wp-block-heading { color: #fff; }

@media (max-width: 600px) {
	.nss-promo-minis--hide-mobile { display: none !important; }
	.nss-hsec--nobg-mobile { background-image: none !important; background-color: transparent !important; }
	.nss-hsec--tight-mobile { padding-block: clamp(0.7rem, 3vw, 1.1rem); }
	.nss-benefits-grid,
.nss-home .nss-blog-materials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====================================================================== *
 * Home builder v2.1 — hero slider, section bg/style, full width
 * ====================================================================== */

/* Section heading above any section (incl. hero) */

.nss-hsec > .nss-section__head { margin-bottom: clamp(0.8rem, 2vw, 1.4rem); }

/* Custom section background / non-default style must show through the hero's
   own backdrop (otherwise blue/style was hidden behind .nss-hero--catalog). */

.nss-hsec--has-bg.nss-hsec--hero .nss-hero--catalog,
.nss-hsec--style-light_card.nss-hsec--hero .nss-hero--catalog,
.nss-hsec--style-color_bg.nss-hsec--hero .nss-hero--catalog,
.nss-hsec--style-premium.nss-hsec--hero .nss-hero--catalog,
.nss-hsec--style-compact.nss-hsec--hero .nss-hero--catalog {
	background: transparent;
}

.nss-hsec--has-bg.nss-hsec--hero,
.nss-hsec--has-bg { border-radius: var(--nss-radius-lg, 18px); }

/* Full width: make the hero layout (and its banners) actually wider. */

.nss-hsec--hero.alignfull .nss-hero__layout { width: min(100% - 3rem, 1800px); }

.nss-hsec.alignfull:not(.nss-hsec--hero) { padding-inline: clamp(1rem, 4vw, 3rem); }

/* Full-width hero on mobile: the slider should go edge-to-edge (no side gaps).
   The catalog menu is already hidden < 700px, so only the promo zone remains. */

@media (max-width: 700px) {
	.nss-hsec--hero.alignfull .nss-hero__layout {
		width: 100%;
		max-width: 100%;
	}
	.nss-hsec--hero.alignfull .nss-hero-slider__track,
.nss-hsec--hero.alignfull .nss-promo-banner--media,
.nss-hsec--hero.alignfull .nss-promo-card {
		border-radius: 0;
	}
	.nss-hsec--hero.alignfull .nss-promo-minis {
		padding-inline: 0.5rem;
	}
}

/* Visible style presets (also for content sections) */

.nss-hsec--style-light_card { background: #fff; border-radius: var(--nss-radius-lg, 18px); box-shadow: 0 12px 34px rgba(15,23,42,.06); }

.nss-hsec--style-color_bg { background: var(--wp--preset--color--surface, #eef3fb); border-radius: var(--nss-radius-lg, 18px); }

.nss-hsec--style-premium { background: linear-gradient(135deg, #0b1220, #16284c); border-radius: var(--nss-radius-lg, 18px); color: #fff; }

.nss-hsec--style-premium .wp-block-heading,
.nss-hsec--style-premium .nss-section__eyebrow { color: #fff; }

.nss-hsec--style-compact { padding-block: clamp(0.6rem, 1.4vw, 1rem); }

/* Hero main-banner slider */

.nss-hero-slider { position: relative; }

.nss-hero-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--nss-radius-lg, 18px);
}

.nss-hero-slider__track::-webkit-scrollbar { display: none; }

.nss-hero-slider__slide { flex: 0 0 100%; scroll-snap-align: start; }

.nss-hero-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.4rem;
	height: 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #0f172a;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: background .15s, transform .15s;
	z-index: 2;
}

.nss-hero-slider__arrow:hover { background: #fff; }

.nss-hero-slider__arrow--prev { left: 0.7rem; }

.nss-hero-slider__arrow--next { right: 0.7rem; }

/* Mobile: hide the banner arrows; they fade in only while the user is actively
   swiping the slider with a finger (JS toggles .is-scrolling). */

@media (max-width: 600px) {
	.nss-hero-slider__arrow {
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease, visibility .2s ease;
	}
	.nss-hero-slider.is-scrolling .nss-hero-slider__arrow {
		opacity: 1;
		visibility: visible;
	}
}

.nss-hero-slider__dots {
	position: absolute;
	bottom: 0.8rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.4rem;
	z-index: 2;
}

.nss-hero-slider__dot {
	width: 0.55rem;
	height: 0.55rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: width .2s, background .2s;
}

.nss-hero-slider__dot.is-active { width: 1.4rem; background: #fff; }

/* ====================================================================== *
 * Home builder v2.1 — heading alignment & size overrides
 * (beat legacy ".home .nss-section > .nss-section__head{text-align:center}"
 *  and ".nss-section h2{font-size:2rem}")
 * ====================================================================== */

.home .nss-hsec > .nss-section__head.nss-hsec-align-left { justify-items: start; text-align: left; }

.home .nss-hsec > .nss-section__head.nss-hsec-align-center { justify-items: center; text-align: center; }

.home .nss-hsec > .nss-section__head.nss-hsec-align-right { justify-items: end; text-align: right; }

.home .nss-hsec-align-left .nss-section__eyebrow { margin-inline: 0; }

.home .nss-hsec-align-right .nss-section__eyebrow { margin-inline-start: auto; margin-inline-end: 0; }

.nss-hsec .nss-hsec-title--small { font-size: clamp(1.1rem, 2vw, 1.4rem); }

.nss-hsec .nss-hsec-title--medium { font-size: clamp(1.3rem, 2.8vw, 1.9rem); }

.nss-hsec .nss-hsec-title--large { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }

/* Section head row with a button (e.g. products "Смотреть все").
   The button is always flush to the right edge, regardless of title alignment. */

.nss-section__head--right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.nss-section__head--right .nss-section__head-text { flex: 1 1 auto; min-width: 0; }

.home .nss-hsec > .nss-section__head--right { justify-items: stretch; }

.nss-section__head--right .nss-hsec-btn { flex: 0 0 auto; margin-inline-start: auto; }

/* ====================================================================== *
 * Home builder v2.2 — hero hover behaviour & top spacing
 * ====================================================================== */

/* (2) No colour change on the banner eyebrow/title/text on hover — only the
   button reacts. */

.nss-promo-card:hover,
.nss-promo-card:focus,
.nss-promo-card:hover .nss-promo-card__title,
.nss-promo-card:hover .nss-promo-card__eyebrow,
.nss-promo-card:focus .nss-promo-card__title,
.nss-promo-card:focus .nss-promo-card__eyebrow {
	color: #fff;
}

.nss-promo-card:hover .nss-promo-card__text,
.nss-promo-card:focus .nss-promo-card__text {
	color: rgba(255, 255, 255, 0.84);
}

.nss-promo-card__button { transition: background .15s ease, color .15s ease; }

.nss-promo-card:hover .nss-promo-card__button,
.nss-promo-card:focus .nss-promo-card__button {
	background: var(--nss-button-primary-hover-bg, var(--nss-button-primary-bg, #1f5eff));
	color: var(--nss-button-primary-text, #fff);
	border-color: transparent;
}

/* (3) Slider arrows and mini-banner buttons appear only on hover (devices with
   a real pointer; touch devices keep them visible). */

@media (hover: hover) {
	.nss-hero-slider__arrow {
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease, visibility .2s ease, background .15s ease;
	}
	.nss-hero-slider:hover .nss-hero-slider__arrow,
.nss-hero-slider__arrow:focus-visible {
		opacity: 1;
		visibility: visible;
	}

	.nss-promo-mini .nss-promo-card__button {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity .2s ease, transform .2s ease, background .15s ease, color .15s ease;
	}
	.nss-promo-mini:hover .nss-promo-card__button,
.nss-promo-mini:focus-within .nss-promo-card__button {
		opacity: 1;
		transform: none;
	}
}

/* (5) Halve the first-screen gap below the sticky header. */

.nss-home > .nss-hsec:first-child { padding-block-start: clamp(0.3rem, 0.8vw, 0.55rem); }

.home .nss-hsec--hero .nss-hero--catalog { padding-block-start: clamp(0.55rem, 1.5vw, 1rem); }

/* ====================================================================== *
 * Home builder v2.3 — banner button styles & text position
 * ====================================================================== */

/* Button styles (base = solid white). Hover (accent fill) handled above. */

.nss-promo-card__button { border: 1.5px solid transparent; }

.nss-promo-card--btn-accent .nss-promo-card__button {
	background: var(--nss-button-primary-bg, #1f5eff);
	color: var(--nss-button-primary-text, #fff);
}

.nss-promo-card--btn-outline .nss-promo-card__button {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
}

.nss-promo-card--btn-light .nss-promo-card__button {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
	backdrop-filter: blur(4px);
}

/* Text position on the banner */

.nss-promo-card--text-center { justify-content: center; }

.nss-promo-card--text-center .nss-promo-card__content { text-align: center; justify-items: center; }

.nss-promo-card--text-center .nss-promo-card__eyebrow,
.nss-promo-card--text-center .nss-promo-card__button { margin-inline: auto; }

.nss-promo-card--text-right { justify-content: flex-end; }

.nss-promo-card--text-right .nss-promo-card__content { text-align: right; justify-items: end; }

.nss-promo-card--text-right .nss-promo-card__eyebrow,
.nss-promo-card--text-right .nss-promo-card__button { margin-inline-start: auto; margin-inline-end: 0; }

/* No darkening mask for any text alignment — the image shows as-is and text
   colour is controlled per block (Цвет заголовка/текста/кнопки). The base
   .nss-promo-card background already sets image + fallback gradient. */

/* ====================================================================== *
 * Home builder v2.4 — padding inside styled/background sections
 * ====================================================================== */

.nss-hsec--has-bg,
.nss-hsec--style-light_card,
.nss-hsec--style-color_bg,
.nss-hsec--style-premium {
	padding-inline: clamp(1.2rem, 3vw, 2.6rem);
}

/* keep a comfortable inner top/bottom too when a background is present */

.nss-hsec--has-bg.nss-hsec--sp-small,
.nss-hsec--style-light_card.nss-hsec--sp-small,
.nss-hsec--style-color_bg.nss-hsec--sp-small,
.nss-hsec--style-premium.nss-hsec--sp-small {
	padding-block: clamp(1.1rem, 2.4vw, 1.8rem);
}

/* hero keeps its own internal layout padding — don't double it */

.nss-hsec--hero.nss-hsec--has-bg,
.nss-hsec--hero[class*="nss-hsec--style-"] { padding-inline: 0; }

/* ====================================================================== *
 * Home builder v2.5 — product card styles, carousel, tabs
 * ====================================================================== */

/* Card styles */

.nss-hsec-products--card-bordered .nss-store-product-card { border: 1px solid var(--wp--preset--color--border, #e2e8f0); }

.nss-hsec-products--card-shadow .nss-store-product-card { box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12); }

.nss-hsec-products--card-flat .nss-store-product-card { box-shadow: none; border: 0; background: transparent; }

/* Carousel — same card width as the grid blocks: the track spans the full
   section width and each card uses the exact grid column formula (no peek
   shrink on desktop), so "Новые поступления" matches "Распродажа". Arrows
   sit just inside the track edges (the section is overflow-x: clip, so they
   must stay within bounds or they get cut off) and only appear while the row
   is scrollable. */

.nss-hsec-products--carousel { position: relative; padding-inline: 0; --nss-carousel-peek: 0px; }

.nss-hsec-products--carousel .nss-product-grid {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block-end: 4px;
}

.nss-hsec-products--carousel .nss-product-grid::-webkit-scrollbar { display: none; }

.nss-hsec-products--carousel .nss-product-grid > * {
	flex: 0 0 calc((100% - var(--nss-carousel-peek, 0px) - (var(--nss-grid-columns, 4) - 1) * var(--nss-card-gap, 16px)) / var(--nss-grid-columns, 4));
	scroll-snap-align: start;
}

/* Tablet: mirror the grid blocks (two cards per row) so the carousel keeps the
   same card width as "Распродажа" at this breakpoint too. */

@media (min-width: 601px) and (max-width: 979px) {
	.nss-hsec-products--carousel .nss-product-grid > * { --nss-grid-columns: 2; }
}

@media (max-width: 600px) {
	.nss-hsec-products:not(.nss-hsec-products--carousel) .nss-product-grid {
		gap: clamp(0.4rem, 2.2vw, 0.7rem);
	}
	.nss-hsec-products--carousel { padding-inline: 0; --nss-carousel-peek: 25%; }
	.nss-hsec-products--carousel .nss-product-grid > * { --nss-grid-columns: 1; }
}

/* ====================================================================== *
 * Home builder v2.6 — benefits icons & alignment
 * ====================================================================== */

.nss-benefit-card__icon { display: block; margin-block-end: 0.8rem; }

.nss-benefit-card__icon img {
	display: block;
	width: clamp(40px, 4vw, 60px);
	height: clamp(40px, 4vw, 60px);
	object-fit: contain;
}

.nss-benefits-grid--align-center .nss-benefit-card { text-align: center; }

.nss-benefits-grid--align-center .nss-benefit-card__icon img,
.nss-benefits-grid--align-center .nss-benefit-card__mark { margin-inline: auto; }

.nss-benefits-grid--align-right .nss-benefit-card { text-align: right; }

.nss-benefits-grid--align-right .nss-benefit-card__icon img,
.nss-benefits-grid--align-right .nss-benefit-card__mark { margin-inline-start: auto; margin-inline-end: 0; }

/* ====================================================================== *
 * Gallery / certificates block
 * ====================================================================== */

.nss-gallery {
	display: grid;
	grid-template-columns: repeat(var(--nss-gallery-cols, 4), minmax(0, 1fr));
	gap: var(--nss-gallery-gap, 16px);
}

.nss-gallery__item { margin: 0; min-width: 0; }

.nss-gallery__media {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: #fff;
	overflow: hidden;
	cursor: default;
}

button.nss-gallery__media,
a.nss-gallery__media { cursor: pointer; }

.nss-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform .3s ease;
}

/* Aspect ratios */

.nss-gallery--ratio-square .nss-gallery__media { aspect-ratio: 1 / 1; }

.nss-gallery--ratio-landscape .nss-gallery__media { aspect-ratio: 4 / 3; }

.nss-gallery--ratio-wide .nss-gallery__media { aspect-ratio: 16 / 9; }

.nss-gallery--ratio-portrait .nss-gallery__media { aspect-ratio: 3 / 4; }

.nss-gallery--ratio-auto .nss-gallery__img { height: auto; }

/* Fit */

.nss-gallery--fit-cover .nss-gallery__img { object-fit: cover; }

.nss-gallery--fit-contain .nss-gallery__img { object-fit: contain; }

/* Corner rounding */

.nss-gallery--round-small .nss-gallery__media { border-radius: 8px; }

.nss-gallery--round-medium .nss-gallery__media { border-radius: 14px; }

.nss-gallery--round-large .nss-gallery__media { border-radius: 22px; }

/* Style variants */

.nss-gallery--style-card .nss-gallery__media {
	padding: clamp(8px, 1.4vw, 16px);
	border: 1px solid var(--wp--preset--color--border, #e2e8f0);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.nss-gallery--style-framed .nss-gallery__media {
	border: 1px solid var(--wp--preset--color--border, #e2e8f0);
}

/* Hover affordance for interactive tiles */

a.nss-gallery__media:hover .nss-gallery__img,
button.nss-gallery__media:hover .nss-gallery__img { transform: scale(1.045); }

.nss-gallery--fit-contain a.nss-gallery__media:hover .nss-gallery__img,
.nss-gallery--fit-contain button.nss-gallery__media:hover .nss-gallery__img { transform: scale(1.02); }

.nss-gallery__caption {
	margin-top: 0.55rem;
	color: var(--wp--preset--color--text, #1f2937);
	font-size: 0.92rem;
	font-weight: 600;
	text-align: center;
	line-height: 1.4;
}

@media (max-width: 1024px) {
	.nss-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.nss-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====================================================================== *
 * Promo grid / mosaic block
 * ====================================================================== */

.nss-promo-grid {
	display: grid;
	grid-template-columns: repeat(var(--pg-cols, 3), minmax(0, 1fr));
	gap: var(--pg-gap, 20px);
	--pg-h: 17rem;
}

.nss-promo-grid--h-short { --pg-h: 12.5rem; }

.nss-promo-grid--h-medium { --pg-h: 17rem; }

.nss-promo-grid--h-tall { --pg-h: 22rem; }

.nss-promo-grid--mosaic { grid-auto-rows: minmax(var(--pg-h), 1fr); }

.nss-promo-grid--mosaic .nss-pg-card:first-child { grid-column: span 2; grid-row: span 2; }

.nss-promo-grid--align-center .nss-pg-card__content { text-align: center; align-items: center; }

.nss-promo-grid--align-left .nss-pg-card__content { align-items: flex-start; }

.nss-promo-grid--align-center .nss-pg-card__btn { align-self: center; }

/* Mosaic — make the lead card's text larger. */

.nss-promo-grid--mosaic .nss-pg-card:first-child .nss-pg-card__eyebrow { font-size: clamp(1.4rem, 2.2vw, 2rem); }

.nss-promo-grid--mosaic .nss-pg-card:first-child .nss-pg-card__title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }

/* Light style — product image on a soft background, dark text. */

.nss-promo-grid--light .nss-pg-card {
	background: #f3f4f6;
	color: var(--wp--preset--color--text, #1f2937);
}

.nss-promo-grid--light .nss-pg-card__media {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 1rem 1rem;
}

.nss-promo-grid--light .nss-pg-card__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform .3s ease;
}

.nss-promo-grid--light a.nss-pg-card:hover .nss-pg-card__img { transform: scale(1.04); }

/* Overlay style — darkened photo background, white text. */

.nss-promo-grid--overlay .nss-pg-card {
	justify-content: center;
	background-image:
		linear-gradient(180deg, rgba(8, 15, 30, 0.12) 0%, rgba(8, 15, 30, 0.58) 100%),
		var(--pg-image, none);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.nss-promo-grid--overlay .nss-pg-card__content { flex: 1 1 auto; justify-content: center; }

.nss-promo-grid--overlay .nss-pg-card__title { text-transform: uppercase; }

.nss-promo-grid--overlay .nss-pg-card__eyebrow { text-transform: uppercase; font-weight: 700; }

.nss-promo-grid--overlay .nss-pg-card__price { color: #fff; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.03em; }

.nss-promo-grid--overlay .nss-pg-card__text { color: rgba(255, 255, 255, 0.85); }

.nss-promo-grid--overlay .nss-pg-card__btn { color: #fff; }

@media (max-width: 1024px) {
	.nss-promo-grid:not(.nss-promo-grid--mosaic) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.nss-promo-grid { grid-template-columns: 1fr; }
	.nss-promo-grid--mosaic .nss-pg-card:first-child { grid-column: auto; grid-row: auto; }
}

/* ====================================================================== *
 * FAQ accordion block
 * ====================================================================== */

.nss-faq {
	display: grid;
	gap: 12px;
	max-width: 880px;
}

.home .nss-hsec-align-center .nss-faq,
.nss-faq.nss-faq--center { margin-inline: auto; }

.nss-faq__item {
	border: 1px solid var(--wp--preset--color--border, #e2e8f0);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow .18s ease, border-color .18s ease;
}

.nss-faq__item.is-open {
	border-color: var(--nss-button-primary-bg, #1f5eff);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.nss-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	padding: 1.1rem 1.25rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--text, #111827);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.nss-faq__q:hover { color: var(--nss-button-primary-bg, #1f5eff); }

.nss-faq__icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }

/* Plus / minus icon */

.nss-faq--icon-plus .nss-faq__icon::before,
.nss-faq--icon-plus .nss-faq__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.nss-faq--icon-plus .nss-faq__icon::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }

.nss-faq--icon-plus .nss-faq__icon::after { width: 2px; height: 16px; transform: translate(-50%, -50%); }

.nss-faq--icon-plus .nss-faq__item.is-open .nss-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

/* Chevron icon */

.nss-faq--icon-chevron .nss-faq__icon::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 45%;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform .2s ease;
}

.nss-faq--icon-chevron .nss-faq__item.is-open .nss-faq__icon::before { transform: translate(-50%, -30%) rotate(225deg); }

.nss-faq__a[hidden] { display: none; }

.nss-faq__a-inner {
	padding: 0 1.25rem 1.15rem;
	color: var(--wp--preset--color--text, #374151);
	line-height: 1.65;
}

.nss-faq__a-inner > :first-child { margin-top: 0; }

.nss-faq__a-inner > :last-child { margin-bottom: 0; }

/* ====================================================================== *
 * Lightbox (gallery / certificates)
 * ====================================================================== */

.nss-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 5vh 5vw;
	background: rgba(8, 12, 20, 0.88);
}

.nss-lightbox.is-open { display: flex; }

body.nss-lightbox-open { overflow: hidden; }

.nss-lightbox__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0;
	max-width: min(1100px, 92vw);
}

.nss-lightbox__img {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.nss-lightbox__caption { color: #e5e7eb; font-size: 0.95rem; text-align: center; }

.nss-lightbox__close,
.nss-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.nss-lightbox__close:hover,
.nss-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }

.nss-lightbox__close { top: 18px; right: 22px; width: 44px; height: 44px; font-size: 1.9rem; }

.nss-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; }

.nss-lightbox__nav--prev { left: 18px; }

.nss-lightbox__nav--next { right: 18px; }

.nss-lightbox.is-solo .nss-lightbox__nav { display: none; }

@media (max-width: 600px) {
	.nss-lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
	.nss-lightbox__nav--prev { left: 6px; }
	.nss-lightbox__nav--next { right: 6px; }
}
/* Отдельное изображение слайда для телефонов: переменная перебивает
   inline-значение десктопной картинки (!important побеждает inline style). */
@media (max-width: 767px) {
	.nss-promo-card--has-mobile-image {
		--nss-banner-image: var(--nss-banner-image-mobile) !important;
	}
	/* The standalone banner is 16:4 (a thin strip on phones). When a dedicated
	   mobile image is provided, give it a 3:2 box so it shows in full instead of
	   being cropped to a sliver. Banners without a mobile image keep 16:4. */
	.nss-home-banner .nss-promo-card--has-mobile-image {
		aspect-ratio: 3 / 2;
	}
}