/* ==========================================================================
   Doonails — header.css
   Announcement bar (45px / 53px mobile), header (80px / 64px mobile),
   desktop nav + hover mega menu, mobile drawer, search overlay.
   Reference: measured 1440x900 / 390x844 (2026-11).
   ========================================================================== */

/* --------------------------- announcement bar --------------------------- */
.dn-announcement {
	position: relative;
	z-index: 60;
	background: #f7f6f5;
	color: #272727;
	font-size: 11px;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: 0.03em;
}

.dn-announcement__desktop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 64px;
	height: 45px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
}

@media (max-width: 1200px) {
	.dn-announcement__desktop {
		gap: 36px;
	}
}

@media (max-width: 900px) {
	.dn-announcement__desktop {
		gap: 24px;
	}
}

.dn-announcement__item {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	white-space: nowrap;
}

.dn-announcement__item span {
	line-height: 17px;
}

.dn-announcement__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	stroke-width: 1.1;
}

.dn-announcement__mobile {
	display: none;
}

.dn-announcement__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #272727;
}

.dn-announcement__arrow-icon {
	width: 12px;
	height: 10px;
}

.dn-announcement__viewport {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 53px;
}

.dn-announcement__mobile .dn-announcement__item {
	display: none;
	justify-content: center;
	width: 100%;
	gap: 8px;
	text-align: left;
}

.dn-announcement__mobile .dn-announcement__item.is-active {
	display: flex;
}

@media (max-width: 991px) {
	.dn-announcement__desktop {
		padding: 0 20px;
	}
	.dn-announcement__desktop .dn-announcement__item:nth-child(2) {
		display: none;
	}
	.dn-announcement__desktop .dn-announcement__item:nth-child(1) {
		display: none;
	}
	.dn-announcement__desktop .dn-announcement__item:nth-child(3) {
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	.dn-announcement__desktop {
		display: none;
	}
	.dn-announcement__mobile {
		display: flex;
		align-items: center;
		padding: 0 10px;
	}
	.dn-announcement {
		font-size: 11px;
		line-height: 15px;
	}
	.dn-announcement__mobile .dn-announcement__item {
		font-size: 11px;
		letter-spacing: 0.02em;
	}
}

/* -------------------------------- header -------------------------------- */
.dn-header {
	position: relative;
	z-index: 50;
	background: #fff;
	color: #272727;
}

.dn-header--transparent {
	position: absolute;
	top: 45px;
	left: 0;
	right: 0;
	background: transparent;
	color: #fff;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Open-state: while a mega menu or the navigation drawer is open the
   transparent home header turns solid white (reference .dn-head state).
   Only color changes — positioning/height stay untouched (no layout shift). */
.dn-header--transparent.is-menu-open:not(.is-stuck) {
	background: #fff;
	color: #272727;
}

.dn-header--transparent.is-menu-open .dn-logo--white {
	filter: brightness(0);
}

.dn-header--transparent.is-menu-open .dn-club-btn {
	color: #272727;
}

.dn-header--transparent.is-menu-open .dn-cart-count {
	background: #272727;
	color: #fff;
}

@media (max-width: 767px) {
	.dn-header--transparent {
		top: 53px;
	}
}

.dn-header--solid {
	position: sticky;
	top: 0;
	border-bottom: 1px solid #dfdfdf;
}

.dn-header--solid .dn-header__inner {
	height: 79px;
}

.dn-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 80px;
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 40px;
}

.dn-header__left {
	display: flex;
	align-items: center;
	gap: 17px;
	min-width: 0;
}

/* hamburger (desktop mega drawer trigger, 1200px+) */
.dn-hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: currentColor;
	position: relative;
	z-index: 2;
}

.dn-hamburger__close {
	display: none;
}

.dn-hamburger[aria-expanded="true"] .dn-hamburger__open {
	display: none;
}

.dn-hamburger[aria-expanded="true"] .dn-hamburger__close {
	display: flex;
}

@media (min-width: 1200px) {
	.dn-hamburger {
		display: inline-flex;
	}
}

/* desktop nav */
.dn-nav {
	display: block;
}

.dn-nav__list {
	display: flex;
	align-items: center;
	gap: 18px;
}

.dn-nav__item {
	position: static;
}

.dn-nav__link {
	display: inline-block;
	padding: 8px 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 19.2px;
	color: currentColor;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.dn-nav__link:hover {
	opacity: 0.72;
}

@media (max-width: 1199px) {
	.dn-nav {
		display: none;
	}
}

/* logo */
.dn-header__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	line-height: 0;
}

.dn-logo {
	display: block;
}

/* utilities */
.dn-header__utils {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	color: currentColor;
}

.dn-club-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0;
	background: #272727;
	color: #fff;
	padding: 12px 21px;
	margin-right: 17px;
	white-space: nowrap;
}

.dn-header--transparent .dn-club-btn {
	background: transparent;
	border: 1px solid currentColor;
}

.dn-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: currentColor;
}

.dn-icon-btn svg {
	width: 24px;
	height: 24px;
}

.dn-cart-count {
	position: absolute;
	top: -7px;
	right: -11px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 4px;
	border-radius: 50%;
	background: #272727;
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

.dn-header--transparent .dn-cart-count {
	background: #fff;
	color: #272727;
}

/* mobile header */
.dn-icon-btn--mobile {
	display: none;
}

@media (max-width: 1199px) {
	.dn-header__inner {
		height: 64px;
		padding: 0 20px;
	}
	.dn-header__left {
		gap: 0;
	}
	.dn-hamburger {
		display: inline-flex;
		width: 24px;
		height: 24px;
	}
	.dn-hamburger__open svg,
	.dn-hamburger__close svg {
		width: 24px;
		height: 24px;
	}
	.dn-header__utils {
		gap: 18px;
	}
	.dn-club-btn,
	.dn-icon-btn--account {
		display: none;
	}
	.dn-header__utils .dn-search-toggle {
		display: none;
	}
	.dn-header__left .dn-icon-btn--mobile {
		display: inline-flex;
		margin-left: 16px;
	}
	.dn-logo-img {
		width: 152px !important;
	}
}

/* header scrolled state (transparent -> solid sticky) */
.dn-header.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	color: #272727;
	border-bottom: 1px solid #dfdfdf;
	animation: dn-header-in 0.2s ease;
}

.dn-header.is-stuck .dn-logo--white {
	filter: brightness(0);
}

.dn-header.is-stuck .dn-club-btn {
	color: #272727;
}

.dn-hamburger:focus-visible,
.dn-icon-btn:focus-visible,
.dn-nav__link:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
}

@keyframes dn-header-in {
	from {
		transform: translateY(-8px);
		opacity: 0.6;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* ------------------------------ mega menu -------------------------------- */
.dn-mega-backdrop {
	display: none;
	position: fixed;
	top: 125px;
	left: 0;
	right: auto;
	bottom: 0;
	width: 100vw;
	max-width: 100vw;
	z-index: 45;
	background: rgba(39, 39, 39, 0.3);
	pointer-events: none;
}

body.dn-mega-open .dn-mega-backdrop {
	display: block;
}

.dn-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 46;
	display: none;
	background: #fff;
	color: #272727;
	border-top: 1px solid #dfdfdf;
	box-shadow: 0 24px 32px -16px rgba(39, 39, 39, 0.12);
}

.dn-nav__item--has-mega.is-open .dn-mega {
	display: block;
}

.dn-mega__inner {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 64px;
	max-width: 1600px;
	margin-inline: auto;
	padding: 40px 40px 40px 64px;
	min-height: 417px;
	max-height: calc(100vh - 125px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dn-mega__cols {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.dn-mega__col {
	width: 302px;
}

.dn-mega__heading {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 14.4px;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: rgba(39, 39, 39, 0.5);
}

.dn-mega__heading:not(:first-child) {
	margin-top: 24px;
}

.dn-mega__links {
	display: block;
}

.dn-mega__item a,
.dn-mega__group-link {
	display: block;
	padding-bottom: 10px;
	font-size: 16px;
	font-weight: 500;
	line-height: 19.2px;
	color: #272727;
}

.dn-mega__item a:hover,
.dn-mega__group-link:hover,
.dn-mega__sub a:hover {
	opacity: 0.7;
}

.dn-mega__badge {
	display: inline-block;
	margin-left: 8px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	color: #a60039;
	letter-spacing: 0;
	vertical-align: 1px;
}

.dn-mega__group-link {
	color: #272727;
}

.dn-mega__sub a {
	display: block;
	padding-bottom: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 19.6px;
	color: #272727;
}

.dn-mega__label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: rgba(39, 39, 39, 0.5);
	padding: 16px 0 8px;
}

.dn-mega__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.dn-mega__swatch a,
.dn-mega__swatches a {
	display: block;
}

.dn-swatch {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(39, 39, 39, 0.08);
	background: #eee;
}

.dn-mega__images {
	display: flex;
	gap: 24px;
}

.dn-mega__tile {
	display: block;
	width: 240px;
}

.dn-mega__tile-media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #faf8f5;
}

.dn-mega__tile-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dn-mega__tile:hover .dn-mega__tile-media img {
	transform: scale(1.04);
}

.dn-mega__tile-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 500;
	line-height: 14.4px;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: #272727;
}

.dn-mega__tile-arrow {
	width: 15px;
	height: 14px;
}

/* --------------------------- navigation drawer --------------------------- */
.dn-drawer-shell {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	max-width: 100vw;
	z-index: 200;
	overflow: hidden;
}

.dn-drawer-shell[hidden] {
	display: none;
}

.dn-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(39, 39, 39, 0.35);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.dn-drawer-shell.is-open .dn-drawer-backdrop {
	opacity: 1;
}

.dn-drawer-panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100vw;
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #272727;
	transform: translateX(-100%);
	transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	overflow: hidden;
}

.dn-drawer-shell.is-open .dn-drawer-panel {
	transform: translateX(0);
}

/* header row: close · separator · centred wordmark · search/account/cart */
.dn-drawer-head {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 64px;
	padding: 0 20px;
	border-bottom: 1px solid #ececec;
}

.dn-drawer-sep {
	width: 1px;
	height: 22px;
	background: #dfdfdf;
}

.dn-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #272727;
	margin-left: -2px;
}

.dn-drawer-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	line-height: 0;
}

.dn-drawer-logo .dn-logo-img {
	width: 132px !important;
}

.dn-drawer-icons {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.dn-drawer-icons .dn-icon-btn {
	width: 24px;
	height: 24px;
	color: #272727;
}

.dn-drawer-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 20px 24px;
}

/* "Neue Kollektionen" thumb row */
.dn-drawer-neu {
	padding: 18px 0 20px;
	border-bottom: 1px solid #ececec;
}

.dn-drawer-neu__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 14px;
}

.dn-drawer-neu__head h3 {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: rgba(39, 39, 39, 0.55);
}

.dn-drawer-neu__head a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-size: 12px;
	font-weight: 500;
	color: #272727;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dn-drawer-neu__head a svg {
	width: 14px;
	height: 14px;
}

.dn-drawer-neu__row {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	margin: 0;
	padding: 0;
}

.dn-drawer-neu__row::-webkit-scrollbar {
	display: none;
}

.dn-drawer-neu__row li {
	flex: 0 0 auto;
}

.dn-drawer-neu__tile {
	display: block;
	width: 88px;
	color: #272727;
}

.dn-drawer-neu__img {
	display: block;
	aspect-ratio: 1 / 1;
	background: #f7f6f5;
	overflow: hidden;
}

.dn-drawer-neu__img img,
.dn-drawer-neu__img .dn-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dn-drawer-neu__title {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
}

/* level-1 list */
.dn-drawer-nav__list {
	margin: 0;
	padding: 0;
}

.dn-drawer-item {
	border-bottom: 1px solid #ececec;
}

.dn-drawer-item:last-child {
	border-bottom: 0;
}

.dn-drawer-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 17px 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: #272727;
	text-align: left;
}

.dn-drawer-toggle {
	cursor: pointer;
}

.dn-drawer-toggle .dn-drawer-chevron {
	width: 16px;
	height: 16px;
	transition: transform 0.25s ease;
}

.dn-drawer-toggle[aria-expanded="true"] .dn-drawer-chevron {
	transform: rotate(45deg);
}

.dn-drawer-badge {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 4px;
	font-size: 11px;
	font-weight: 500;
	line-height: 16px;
	text-transform: uppercase;
	color: #fff;
	background: #a60039;
	border-radius: 0;
}

.dn-drawer-sub {
	padding: 4px 0 18px;
}

.dn-drawer-sub__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.dn-drawer-sub__col ul {
	margin: 0;
	padding: 0;
}

.dn-drawer-sub__heading {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: rgba(39, 39, 39, 0.5);
}

.dn-drawer-sub__item a {
	display: inline-block;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: #272727;
}

.dn-drawer-sub__item--group a {
	font-weight: 500;
}

.dn-drawer-sub__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.dn-drawer-sub__tiles[hidden] {
	display: none;
}

.dn-drawer-sub__tile {
	display: block;
	color: #272727;
}

.dn-drawer-sub__tile-media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f7f6f5;
}

.dn-drawer-sub__tile-media img,
.dn-drawer-sub__tile-media .dn-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dn-drawer-sub__tile-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.24px;
	text-transform: uppercase;
}

.dn-drawer-nav__extra {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid #ececec;
}

.dn-drawer-nav__extra a {
	font-size: 15px;
	font-weight: 500;
	color: #272727;
}

.dn-drawer-outlet .dn-drawer-link {
	justify-content: flex-start;
}

.dn-drawer-foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #ececec;
}

.dn-drawer-loc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: #272727;
}

.dn-drawer-foot .dn-btn {
	min-height: 44px;
	padding: 10px 22px;
	background: #272727;
	color: #fff;
	border-color: #272727;
}

/* desktop: reference hamburger drawer shows columns of links + promo tiles */
@media (min-width: 1200px) {
	.dn-drawer-head {
		height: 72px;
		padding: 0 40px;
	}

	.dn-drawer-body {
		padding: 0 40px 32px;
	}

	.dn-drawer-logo .dn-logo-img {
		width: 160px !important;
	}

	.dn-drawer-neu__row {
		gap: 16px;
	}

	.dn-drawer-neu__tile {
		width: 132px;
	}

	.dn-drawer-neu__title {
		font-size: 14px;
	}

	.dn-drawer-nav__list {
		display: block;
		column-count: 2;
		column-gap: 64px;
		padding-bottom: 8px;
	}

	.dn-drawer-item {
		break-inside: avoid;
		border-bottom: 0;
		padding-bottom: 18px;
	}

	.dn-drawer-link {
		padding: 10px 0;
		font-size: 17px;
	}

	/* On desktop the reference drawer keeps the link groups open. */
	.dn-drawer-toggle {
		cursor: default;
	}

	.dn-drawer-toggle .dn-drawer-chevron {
		display: none;
	}

	.dn-drawer-sub {
		display: block !important;
		padding: 2px 0 10px;
	}

	.dn-drawer-sub[hidden] {
		display: block !important;
	}

	.dn-drawer-sub__cols {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.dn-drawer-sub__item a {
		font-size: 15px;
		padding: 4px 0;
	}

	.dn-drawer-sub__tiles {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, 190px);
	}

	.dn-drawer-nav__extra {
		gap: 12px 32px;
	}

	.dn-drawer-foot {
		padding: 16px 40px;
	}
}

@media (max-width: 1199px) {
	.dn-drawer-panel {
		width: min(86vw, 420px);
	}
}
/* ------------------------------ search ---------------------------------- */
.dn-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 210;
}

.dn-search-overlay[hidden] {
	display: none;
}

.dn-search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(39, 39, 39, 0.35);
}

.dn-search-overlay__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	color: #272727;
	padding: 24px 40px 32px;
	box-shadow: 0 24px 32px -16px rgba(39, 39, 39, 0.15);
}

.dn-search-overlay__head {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 900px;
	margin-inline: auto;
}

.dn-search-form {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	border-bottom: 1px solid #272727;
	padding-bottom: 10px;
}

.dn-search-form__input {
	flex: 1 1 auto;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 22px;
	font-weight: 400;
	padding: 4px 0;
}

.dn-search-form__submit {
	display: inline-flex;
	width: 24px;
	height: 24px;
	color: #272727;
}

.dn-search-overlay__close {
	display: inline-flex;
	width: 24px;
	height: 24px;
	color: #272727;
	flex: 0 0 auto;
}

.dn-search-overlay__body {
	max-width: 900px;
	margin: 24px auto 0;
}

.dn-search-overlay__label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: rgba(39, 39, 39, 0.5);
	margin-bottom: 12px;
}

.dn-search-overlay__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dn-search-overlay__terms a {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid #dfdfdf;
	font-size: 14px;
	color: #272727;
}

.dn-search-overlay__terms a:hover {
	background: #272727;
	color: #fff;
	border-color: #272727;
}

@media (max-width: 767px) {
	.dn-search-overlay__panel {
		padding: 16px 20px 24px;
	}
	.dn-search-form__input {
		font-size: 18px;
	}
}

/* mega menu layout fix */
.dn-mega__inner {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 0;
	max-width: 1600px;
	margin-inline: auto;
	padding: 40px 40px 40px 64px;
	min-height: 417px;
	max-height: calc(100vh - 125px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dn-mega__cols {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.dn-mega__col {
	flex: 0 0 302px;
	width: 302px;
	min-width: 0;
}

.dn-mega__images {
	margin-left: auto;
	display: flex;
	gap: 24px;
}

.dn-mega__group--swatches .dn-mega__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	max-width: 302px;
}

.dn-mega__group--swatches .dn-swatch {
	width: 28px;
	height: 28px;
}


/* ==========================================================================
   Mega menu — reference geometry (measured against qa/ref/ref-mega-menu-1440.png)
   Panel: y=125, full width white; content x=64; 2 link columns 302px + 24 gap;
   image tiles 307px square 2-up with 16px gap, right edge x=1370.
   ========================================================================== */
.dn-mega__inner {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	max-width: 1600px;
	margin-inline: auto;
	padding: 40px 70px 48px 64px;
	min-height: 417px;
	max-height: calc(100vh - 125px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dn-mega__cols {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.dn-mega__col {
	flex: 0 0 302px;
	width: 302px;
	min-width: 0;
}

/* Reference hides the generic column heading for non-first columns; the first
   group heading ("NACH FORM") takes that slot. */
.dn-mega__col:not(:first-child) > .dn-mega__heading {
	display: none;
}

.dn-mega__heading {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 500;
	line-height: 14.4px;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: rgba(39, 39, 39, 0.5);
}

.dn-mega__links {
	margin: 0;
	padding: 0;
}

.dn-mega__item a,
.dn-mega__group > .dn-mega__group-link {
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 32px;
	color: #272727;
}

/* Group headings: small uppercase muted label (NACH FORM / NACH LÄNGE / …) */
.dn-mega__group {
	margin: 30px 0 0;
}

.dn-mega__col:not(:first-child) .dn-mega__group:first-child {
	margin-top: 0;
}

.dn-mega__group > .dn-mega__group-link {
	font-size: 12px;
	font-weight: 500;
	line-height: 14.4px;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: rgba(39, 39, 39, 0.5);
	margin: 0 0 12px;
}

/* Inline sub links (Square Round Almond Coffin / Ultra Short …) */
.dn-mega__sub {
	display: inline-block;
	margin: 0 16px 0 0;
}

.dn-mega__sub a {
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #272727;
}

/* First column sub links (Anwendung / Entfernung) stack like reference */
.dn-mega__col:first-child .dn-mega__sub {
	display: block;
	margin: 0;
}

.dn-mega__col:first-child .dn-mega__sub a {
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
}

.dn-mega__label {
	padding: 0;
}

/* Badges: small uppercase red pills ("IDEAL FÜR DEN START", "BIS ZU -30%") */
.dn-mega__badge {
	display: inline-block;
	margin-left: 8px;
	padding: 4px 6px;
	background: #a60039;
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	vertical-align: 2px;
	white-space: nowrap;
}

/* Colour swatch grid: 28px round dots, 8px gap, wraps within the 302px column */
.dn-mega__group--swatches > .dn-mega__group-link {
	margin-bottom: 16px;
}

.dn-mega__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 260px;
	margin: 0;
}

.dn-mega__swatches .dn-swatch,
.dn-mega__group--swatches .dn-swatch {
	width: 28px;
	height: 28px;
}

/* Image tiles: 307px square 2-up, 16px gap, caption + arrow below */
.dn-mega__images {
	margin-left: auto;
	display: flex;
	gap: 16px;
}

.dn-mega__tile {
	width: 307px;
}

.dn-mega__tile-media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #faf8f5;
}

.dn-mega__tile-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dn-mega__tile-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 14.4px;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: #272727;
}

.dn-mega__tile-arrow {
	width: 15px;
	height: 14px;
}


/* mega-reference overrides: remove legacy paddings that inflated line heights */
.dn-mega__item > a,
.dn-mega__group > .dn-mega__group-link,
.dn-mega__sub > a,
.dn-mega__links .dn-mega__item a {
	padding: 0;
}

.dn-mega__sub {
	margin-bottom: 0;
	vertical-align: top;
}


/* final swatch-grid sizing: 7 dots per row like the reference */
.dn-mega .dn-mega__group--swatches .dn-mega__swatches {
	max-width: 260px;
}

.dn-mega .dn-mega__group--swatches > .dn-mega__group-link {
	margin-bottom: 8px;
}