/* ════════════════════════════════════════════════════════════
   NATURKOSMETIK KARL — PRODUKT-HERO (modulare Familie)
   Container + Stage + Content + alle Inner-Bausteine
   ═══════════════════════════════════════════════════════════ */

/* Variablen-Scope auf alle Hero-Elemente */
.nk-hero,
.nk-hero__stage,
.nk-hero__content {
	--sand-4:  #f4f6ef;
	--sand-3:  #ebe8d8;
	--sage:    #8faf86;
	--sage-2:  #c8d8bf;
	--sage-3:  #b4c9a8;
	--olive:   #3a3a35;
	--olive-2: #6a6a63;
	--olive-3: #a9a9a0;
	--cream:   #fbfaf4;
	--rule:    #d4dcc8;
	--rose:    #d68a8a;
	--rose-2:  #e8b5b5;
	--nk-display: "Cormorant", Georgia, serif;
	--nk-script:  "Dancing Script", "Apple Chancery", cursive;
	--nk-sans:    "Jost", ui-sans-serif, system-ui, sans-serif;
}


/* ─────────────────────────────────────────────────────────────
   CONTAINER
   ───────────────────────────────────────────────────────────── */
.nk-hero {
	padding: 46px 0 110px;
	position: relative;
	overflow: hidden;
	color: var(--olive);
	font-family: var(--nk-sans);
}
.nk-hero__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 88px;
	align-items: center;
	position: relative;
	z-index: 2;
}

/* Hintergrund-Verläufe via Pseudo-Elemente */
.nk-hero::before,
.nk-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	display: none;
}
.nk-hero--sage::before {
	display: block;
	top: 80px;
	right: -160px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(143, 175, 134, .18), transparent 70%);
}
.nk-hero--sage::after {
	display: block;
	bottom: -100px;
	left: -140px;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(232, 196, 192, .18), transparent 70%);
}
.nk-hero--rose::before {
	display: block;
	top: 80px;
	right: -160px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(214, 138, 138, .18), transparent 70%);
}
.nk-hero--rose::after {
	display: block;
	bottom: -100px;
	left: -140px;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(143, 175, 134, .15), transparent 70%);
}
.nk-hero--rose-sage::before {
	display: block;
	top: 80px;
	right: -160px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(214, 138, 138, .18), transparent 70%);
}
.nk-hero--rose-sage::after {
	display: block;
	bottom: -100px;
	left: -140px;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(143, 175, 134, .18), transparent 70%);
}


/* ─────────────────────────────────────────────────────────────
   STAGE (linke Spalte)
   ───────────────────────────────────────────────────────────── */
.nk-hero__stage {
	position: relative;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--rule);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

/* Bühnen-Hintergrund-Schemata */
.nk-hero__stage--sage {
	background:
		radial-gradient(ellipse at 30% 25%, rgba(168, 200, 160, .45) 0%, transparent 55%),
		radial-gradient(ellipse at 75% 80%, rgba(232, 196, 192, .32) 0%, transparent 55%),
		linear-gradient(160deg, #e4ecdd 0%, #f4f6ef 100%);
}
.nk-hero__stage--rose {
	background:
		radial-gradient(ellipse at 30% 25%, rgba(232, 181, 181, .40) 0%, transparent 55%),
		radial-gradient(ellipse at 75% 80%, rgba(168, 200, 160, .30) 0%, transparent 55%),
		linear-gradient(160deg, #fbf3f0 0%, #f4f6ef 100%);
}
.nk-hero__stage--plain {
	background: var(--cream);
}

/* Konzentrische Ringe */
.nk-hero__stage--ring-single::before,
.nk-hero__stage--ring-double::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 74%;
	aspect-ratio: 1;
	border: 1px solid rgba(143, 175, 134, .4);
	border-radius: 50%;
	pointer-events: none;
}
.nk-hero__stage--ring-double::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 54%;
	aspect-ratio: 1;
	border: 1px dashed rgba(143, 175, 134, .3);
	border-radius: 50%;
	pointer-events: none;
}

/* Hauptbild (als Background-Image für saubere Drop-Shadow-Filter) */
.nk-hero__bottle {
	width: 64%;
	aspect-ratio: 3 / 5;
	position: relative;
	z-index: 2;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	filter:
		drop-shadow(0 40px 70px rgba(58, 58, 53, .32))
		drop-shadow(0 12px 20px rgba(58, 58, 53, .18));
}

/* Ribbon */
.nk-hero__ribbon {
	position: absolute;
	top: 30px;
	left: -10px;
	z-index: 3;
	padding: 11px 22px 11px 28px;
	font-family: var(--nk-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--cream);
	clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
	line-height: 1;
}
.nk-hero__ribbon--sage  { background: #8faf86; }
.nk-hero__ribbon--rose  { background: #d68a8a; }
.nk-hero__ribbon--olive { background: #3a3a35; }

/* Thumbs */
.nk-hero__thumbs {
	position: absolute;
	left: -22px;
	bottom: 30px;
	z-index: 4;
	display: grid;
	gap: 12px;
}
.nk-hero__thumb {
	width: 64px;
	height: 64px;
	border: 1px solid var(--rule);
	background: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color .2s, transform .2s;
	box-sizing: border-box;
}
.nk-hero__thumb:hover {
	border-color: var(--sage);
	transform: translateX(2px);
}
.nk-hero__thumb--sel {
	border-color: var(--olive);
	box-shadow: 0 6px 14px rgba(58, 58, 53, .18);
}
.nk-hero__thumb img {
	height: 46px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}
.nk-hero__swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: block;
}


/* ─────────────────────────────────────────────────────────────
   CONTENT (rechte Spalte)
   ───────────────────────────────────────────────────────────── */
.nk-hero__content {
	color: var(--olive);
}

/* Kategorie */
.nk-hero__cat {
	font-family: var(--nk-sans);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--olive-2);
	margin: 0 0 14px;
	line-height: 1.4;
}
.nk-hero__cat em {
	font-family: var(--nk-script);
	font-style: normal;
	color: var(--sage);
	font-size: 18px;
	letter-spacing: 0;
	text-transform: none;
	margin: 0 6px;
	font-weight: 500;
}

/* Titel */
.nk-hero__title {
	font-family: var(--nk-display);
	font-weight: 300;
	line-height: .98;
	letter-spacing: -.02em;
	color: var(--olive);
	margin: 6px 0 14px;
}
.nk-hero__title--lg { font-size: 84px; }
.nk-hero__title--md { font-size: 72px; }
.nk-hero__title--sm { font-size: 56px; }
.nk-hero__title .nk-script {
	font-family: var(--nk-script);
	color: var(--sage);
	font-weight: 500;
	font-style: normal;
}

/* Tagline */
.nk-hero__tagline {
	font-family: var(--nk-display);
	font-style: italic;
	font-weight: 300;
	font-size: 24px;
	line-height: 1.4;
	color: var(--olive-2);
	margin: 0 0 30px;
	max-width: 30ch;
}

/* Rating */
.nk-hero__rating {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 0;
	margin-bottom: 28px;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.nk-hero__stars {
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 1;
}
.nk-hero__stars-filled { color: var(--sage); }
.nk-hero__stars-empty  { color: var(--olive-3); }
.nk-hero__rating-num {
	font-family: var(--nk-display);
	font-size: 18px;
	color: var(--olive);
	font-weight: 400;
}
.nk-hero__rating-lab {
	font-family: var(--nk-sans);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--olive-2);
}
.nk-hero__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--olive-3);
	display: inline-block;
}

/* Beschreibungs-Text */
.nk-hero__text {
	font-family: var(--nk-sans);
	font-weight: 300;
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--olive);
	max-width: 50ch;
	margin: 0 0 28px;
}
.nk-hero__text p { margin: 0 0 12px; }
.nk-hero__text p:last-child { margin-bottom: 0; }

/* Claims */
.nk-hero__claims {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	margin: 0 0 32px;
}
.nk-hero__claim {
	font-family: var(--nk-sans);
	font-size: 13px;
	color: var(--olive);
	padding-left: 24px;
	position: relative;
	line-height: 1.5;
}
.nk-hero__claim::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 14px;
	height: 1px;
	background: var(--sage);
}

/* Buy-Box */
.nk-hero__buy {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 18px;
	align-items: center;
	padding: 24px 0 0;
	border-top: 1px solid var(--rule);
}
.nk-hero__price {
	font-family: var(--nk-display);
	font-weight: 300;
	font-size: 46px;
	color: var(--olive);
	line-height: 1;
}
.nk-hero__price em {
	font-family: var(--nk-script);
	font-style: normal;
	color: var(--sage);
	font-size: 24px;
	margin-left: 4px;
	font-weight: 500;
}
.nk-hero__vol {
	font-family: var(--nk-sans);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--olive-2);
	line-height: 1.5;
}
.nk-hero__vol strong {
	display: block;
	font-family: var(--nk-display);
	font-size: 18px;
	color: var(--olive);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.nk-hero__ctas {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* Buttons */
.nk-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	border-radius: 999px;
	font-family: var(--nk-sans);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all .25s ease;
	text-decoration: none;
	line-height: 1;
}
.nk-btn--primary {
	background: var(--sage);
	color: var(--cream);
}
.nk-btn--primary:hover {
	background: var(--olive);
	color: var(--cream);
	transform: translateY(-1px);
}
.nk-btn--ghost {
	background: transparent;
	color: var(--olive);
	border-color: var(--olive);
}
.nk-btn--ghost:hover {
	background: var(--olive);
	color: var(--cream);
}
.nk-arr { transition: transform .2s; }
.nk-btn:hover .nk-arr { transform: translateX(4px); }

/* Trust-Icons */
.nk-hero__trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 30px;
	font-family: var(--nk-sans);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--olive-2);
}
.nk-hero__trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.4;
}
.nk-hero__trust-icon {
	width: 22px;
	height: 22px;
	color: var(--sage);
	flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.nk-hero { padding: 30px 0 70px; }
	.nk-hero__inner {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 0 24px;
	}
	.nk-hero__title--lg { font-size: 60px; }
	.nk-hero__title--md { font-size: 54px; }
	.nk-hero__title--sm { font-size: 44px; }
	.nk-hero__tagline   { font-size: 20px; }
	.nk-hero__thumbs {
		left: 12px;
		bottom: 12px;
	}
	.nk-hero__thumb { width: 52px; height: 52px; }
	.nk-hero__thumb img { height: 36px; }
}

@media (max-width: 600px) {
	.nk-hero__title--lg { font-size: 48px; }
	.nk-hero__title--md { font-size: 42px; }
	.nk-hero__title--sm { font-size: 36px; }
	.nk-hero__cat em    { font-size: 16px; }
	.nk-hero__claims    { grid-template-columns: 1fr; }
	.nk-hero__buy       { grid-template-columns: 1fr; }
	.nk-hero__ctas      { justify-content: flex-start; }
	.nk-hero__trust     { grid-template-columns: 1fr; }
	.nk-hero__price     { font-size: 38px; }
}