/*
 * Header ohne Elementor (partials/header/layout.php).
 *
 * Masse nach der Elementor-Vorlage 12349, gemessen am 27.09.2026 auf 1440,
 * 1024 und 390 px. Die Dropdown-Gestaltung stammt aus der Stealth-Luxe-
 * Angleichung vom 08.07. (vorher in style.css auf das Elementor-Widget gezielt).
 */

/* Dunkle Leiste */

.mylook-topbar {
	background: #222;
	color: #fff;
}
.mylook-topbar__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	max-width: 1010px;
	height: 66px;
	margin: 0 auto;
	padding: 10px 20px 0;
	box-sizing: border-box;
}
ul.mylook-topbar__social {
	display: flex;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mylook-topbar__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
	color: #fff;
	transition: transform .3s;
}
.mylook-topbar .mylook-topbar__social a:hover {
	color: #fff;
	transform: scale(1.1);
}
.mylook-topbar .mylook-topbar__menu a:hover {
	color: #fff;
}
.mylook-topbar__social svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}
ul.mylook-topbar__menu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mylook-topbar__menu a {
	position: relative;
	display: block;
	padding: 13px 20px;
	font-family: "Playfair Display SC", Georgia, serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	color: #fff;
}
.mylook-topbar__menu a::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 6px;
	height: 2px;
	background: #fff;
	transform: scaleX(0);
	transition: transform .3s;
}
.mylook-topbar__menu a:hover::after,
.mylook-topbar__menu .current-menu-item > a::after {
	transform: scaleX(1);
}

/* Header */

/* Mit ID, weil OceanWP `#site-header { position: relative }` setzt und sonst gewinnt */
#site-header.mylook-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: #fff;
	box-shadow: 0 0 24px rgba(0, 0, 0, .15);
}
.mylook-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: 1140px;
	height: 100px;
	margin: 0 auto;
	padding: 3px 0 5px;
	box-sizing: border-box;
}

.mylook-header__logo {
	grid-column: 2;
	padding: 0 40px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 50px;
	font-weight: 500;
	line-height: 1;
	color: #070707;
	text-shadow: 0 0 70px rgba(0, 0, 0, .3);
	text-decoration: none;
}
/* Die Kit-Regel `.mylook-kit a:hover` (Gold) ist spezifischer als eine Klasse */
#site-header .mylook-header__logo:hover,
#site-header .mylook-header__logo:focus {
	color: #070707;
}

.mylook-header__toggle {
	display: none;
}

/* Hauptmenue, Desktop */

.mylook-nav {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	height: 100%;
}
ul.mylook-nav__menu {
	display: flex;
	height: 100%;
	margin: 0 0 0 33px;
	padding: 0;
	list-style: none;
}
.mylook-nav__menu li {
	position: relative;
}
.mylook-nav__menu > li {
	margin-right: 6px;
}
.mylook-nav__menu > li > a {
	position: relative;
	display: flex;
	white-space: nowrap;
	align-items: center;
	height: 100%;
	padding: 0 20px;
	font-family: var(--mylook-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	text-transform: uppercase;
	color: #070707;
	transition: color .3s;
}
.mylook-nav__menu > li > a::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 0;
	height: 3px;
	background: #c3ae68;
	transform: scaleX(0);
	transition: transform .3s;
}
.mylook-nav__menu > li:hover > a,
.mylook-nav__menu > li:focus-within > a,
.mylook-nav__menu > li.current-menu-item > a {
	color: #c3ae68;
}
.mylook-nav__menu > li:hover > a::after,
.mylook-nav__menu > li:focus-within > a::after,
.mylook-nav__menu > li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* Pfeil wie das Elementor-caret-down */
.mylook-nav__caret {
	width: 0;
	height: 0;
	margin-left: 15px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .2s ease;
}
.mylook-nav__menu li:hover > a > .mylook-nav__caret,
.mylook-nav__menu li:focus-within > a > .mylook-nav__caret,
.mylook-nav__menu li.is-open > a > .mylook-nav__caret {
	transform: rotate(180deg);
}

/* Untermenue-Panel */
ul.mylook-nav__menu ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 220px;
	margin: 10px 0 0;
	padding: 8px 0;
	list-style: none;
	background: var(--mylook-surface);
	border: 1px solid var(--mylook-border);
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(13, 13, 13, .08);
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s, visibility .15s;
}
/* Unsichtbare Bruecke ueber den 10-px-Abstand, sonst schliesst das Panel beim Hinfahren */
ul.mylook-nav__menu ul.sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -11px;
	height: 11px;
}
ul.mylook-nav__menu ul.sub-menu ul.sub-menu {
	top: 0;
	left: 100%;
	margin: -9px 0 0 6px;
}
ul.mylook-nav__menu ul.sub-menu ul.sub-menu::before {
	top: 0;
	bottom: 0;
	left: -7px;
	right: auto;
	width: 7px;
	height: auto;
}
.mylook-nav__menu li:hover > ul.sub-menu,
.mylook-nav__menu li:focus-within > ul.sub-menu {
	visibility: visible;
	opacity: 1;
}
.mylook-nav__menu .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 22px;
	font-family: var(--mylook-font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mylook-text-soft);
	transition: color .18s ease, padding-left .18s ease;
}
.mylook-nav__menu .sub-menu a:hover,
.mylook-nav__menu .sub-menu .current-menu-item > a {
	color: var(--mylook-text);
	padding-left: 28px;
	box-shadow: inset 3px 0 0 var(--mylook-accent-gold);
}
.mylook-nav__menu .sub-menu .mylook-nav__caret {
	transform: rotate(-90deg);
}
.mylook-nav__menu .sub-menu li:hover > a > .mylook-nav__caret {
	transform: rotate(-90deg);
}

/* Mega-Menue (inc/header.php, Marlon 27.10.2026): Panel ueber die volle Breite des Headers. Mit #site-header,
   damit die Flyout-Regeln oben nicht gewinnen. Oeffnen nach 90 ms, Schliessen nach 160 ms: wer schraeg zur
   naechsten Spalte faehrt, verliert das Panel nicht. */

@media (min-width: 768px) {
	#site-header .mylook-nav__menu > li.mylook-mega {
		position: static;
	}
	#site-header ul.mylook-nav__menu > li.mylook-mega > ul.mylook-mega__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
		gap: 0 32px;
		min-width: 0;
		margin: 0;
		padding: 34px max(40px, calc((100% - 1140px) / 2)) 42px;
		border: 0;
		border-top: 1px solid var(--mylook-border);
		border-radius: 0;
		background: var(--mylook-surface);
		box-shadow: 0 30px 50px rgba(13, 13, 13, .10);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-4px);
		transition: opacity .16s ease .16s, transform .16s ease .16s, visibility 0s linear .32s;
	}
	#site-header .mylook-nav__menu > li.mylook-mega:hover > ul.mylook-mega__panel,
	#site-header .mylook-nav__menu > li.mylook-mega:focus-within > ul.mylook-mega__panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .2s ease .09s, transform .2s ease .09s, visibility 0s linear .09s;
	}
	/* Beim Hovern sieht nur der Punkt unter der Maus aktiv aus, nicht zusaetzlich der Punkt der aktuellen Seite
	   oder einer mit Fokus (Marlon 27.10.2026). Sein Panel liegt oben, waehrend das alte noch ausblendet. */
	#site-header .mylook-nav__menu:hover > li:not(:hover) > a {
		color: #070707;
	}
	#site-header .mylook-nav__menu:hover > li:not(:hover) > a::after {
		transform: scaleX(0);
	}
	#site-header .mylook-nav__menu:hover > li:not(:hover) > a > .mylook-nav__caret {
		transform: none;
	}
	#site-header .mylook-nav__menu > li.mylook-mega:hover > ul.mylook-mega__panel {
		z-index: 11;
	}
	#site-header .mylook-nav__menu:hover > li.mylook-mega:focus-within:not(:hover) > ul.mylook-mega__panel {
		visibility: hidden;
		opacity: 0;
	}
	#site-header ul.mylook-nav__menu > li.mylook-mega > ul.mylook-mega__panel::before {
		top: -14px;
		height: 14px;
	}
	/* Seite dahinter abdunkeln; ohne pointer-events haelt der Schleier das Panel nicht offen */
	#site-header ul.mylook-mega__panel::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 100vh;
		background: rgba(13, 13, 13, .16);
		pointer-events: none;
	}
	#site-header ul.mylook-mega__panel--shop {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
		grid-template-rows: auto 1fr;
	}
	#site-header .mylook-mega__col--women { grid-column: 1; grid-row: 1 / span 2; }
	#site-header .mylook-mega__col--men { grid-column: 2; grid-row: 1 / span 2; }
	#site-header .mylook-mega__col--collections { grid-column: 3; grid-row: 1; }
	#site-header .mylook-mega__col--brands { grid-column: 3; grid-row: 2; margin-top: 26px; }
	#site-header .mylook-mega__panel--shop > .mylook-mega__feature { grid-column: 4; grid-row: 1 / span 2; }
	#site-header .mylook-mega__panel > li + li {
		padding-left: 32px;
		border-left: 1px solid var(--mylook-border);
	}
	#site-header .mylook-mega__col--brands,
	#site-header .mylook-mega__panel > li.mylook-mega__col--brands {
		padding-top: 0;
	}

	/* Spaltenkopf wie bei Stylight als ruhiges Etikett */
	#site-header .mylook-mega__panel > li > a,
	#site-header p.mylook-mega__label {
		display: inline-flex;
		align-items: center;
		height: auto;
		margin: 0 0 14px;
		padding: 6px 11px;
		border-radius: 2px;
		background: #f4f2ec;
		font-family: var(--mylook-font-body);
		font-size: 11px;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--mylook-text-soft);
		box-shadow: none;
	}
	#site-header .mylook-mega__panel > li > a:hover {
		padding-left: 11px;
		color: var(--mylook-text);
		box-shadow: none;
	}
	#site-header .mylook-mega__panel .mylook-nav__caret {
		display: none;
	}

	/* Listen im Panel sind immer offen */
	#site-header .mylook-mega__panel ul.sub-menu {
		position: static;
		display: block;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		visibility: inherit;
		opacity: 1;
		transition: none;
	}
	#site-header .mylook-mega__panel ul.sub-menu::before {
		display: none;
	}
	#site-header .mylook-mega__panel > li > ul > li > a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 9px;
		padding: 5px 0;
		font-size: 17px;
		font-weight: 400;
		line-height: 1.35;
		letter-spacing: 0;
		text-transform: none;
		white-space: normal;
		color: var(--mylook-text);
		box-shadow: none;
	}
	#site-header .mylook-mega__panel > li > ul > li > a:hover,
	#site-header .mylook-mega__panel > li > ul > li.current-menu-item > a {
		padding-left: 0;
		color: var(--mylook-text);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
		box-shadow: none;
	}

	/* Dritte Ebene (Saisons, Feiertage, Schuh-Arten) als Chips unter ihrem Punkt */
	#site-header .mylook-mega__panel > li > ul > li > ul.sub-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 3px 0 9px;
	}
	#site-header .mylook-mega__panel > li > ul > li > ul > li > a,
	#site-header .mylook-mega__panel > li.mylook-mega__col--brands > ul > li > a,
	#site-header .mylook-mega__panel > li > ul > li.mylook-mega__collection > a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 5px 11px;
		border: 1px solid var(--mylook-border-mid);
		border-radius: 999px;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: .02em;
		text-transform: none;
		white-space: nowrap;
		color: var(--mylook-text-soft);
		background: none;
		box-shadow: none;
		transition: border-color .15s ease, color .15s ease;
	}
	#site-header .mylook-mega__panel > li > ul > li > ul > li > a:hover,
	#site-header .mylook-mega__panel > li.mylook-mega__col--brands > ul > li > a:hover,
	#site-header .mylook-mega__panel > li > ul > li.mylook-mega__collection > a:hover {
		padding-left: 11px;
		border-color: var(--mylook-text);
		color: var(--mylook-text);
		text-decoration: none;
		box-shadow: none;
	}
	/* Was gerade dran ist: laufende Saison, naechster Feiertag */
	#site-header .mylook-mega__panel li.is-now:not(.mylook-mega__collection) > a {
		border-color: var(--mylook-text);
		color: var(--mylook-text);
	}
	#site-header .mylook-mega__panel li.is-now:not(.mylook-mega__collection) > a::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--mylook-accent-gold);
	}
	#site-header .mylook-mega__panel > li.mylook-mega__col--brands > ul.sub-menu,
	#site-header .mylook-mega__panel > li.mylook-mega__col--collections > ul.sub-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	#site-header .mylook-mega__collection {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	#site-header .mylook-mega__collection > span {
		margin-right: 2px;
		font-size: 15px;
		color: var(--mylook-text);
	}
	#site-header .mylook-mega__collection.is-now > span::after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin: 0 0 2px 7px;
		border-radius: 50%;
		background: var(--mylook-accent-gold);
	}
	#site-header .mylook-mega__panel > li.mylook-mega__col--collections > ul.sub-menu {
		flex-direction: column;
		align-items: flex-start;
	}
	#site-header .mylook-mega__tag {
		padding: 2px 6px;
		border-radius: 2px;
		background: var(--mylook-accent-gold);
		font-size: 9.5px;
		font-weight: 500;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--mylook-text);
	}
	#site-header .mylook-mega__panel > li > ul > li.mylook-mega__all > a {
		margin-top: 8px;
		font-size: 13px;
		color: var(--mylook-text-soft);
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	/* Rechte Spalte: Beitraege mit Bild, im Shop die Get-the-Look-Karte */
	#site-header .mylook-mega__stories {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	#site-header .mylook-mega__panel a.mylook-mega__story,
	#site-header .mylook-mega__panel a.mylook-mega__look {
		display: block;
		padding: 0;
		font-size: inherit;
		letter-spacing: 0;
		text-transform: none;
		white-space: normal;
		color: var(--mylook-text);
		box-shadow: none;
	}
	#site-header .mylook-mega__panel a.mylook-mega__story:hover,
	#site-header .mylook-mega__panel a.mylook-mega__look:hover {
		padding-left: 0;
		box-shadow: none;
	}
	#site-header .mylook-mega__img {
		display: block;
		aspect-ratio: 4 / 5;
		overflow: hidden;
		background: #f1ece3;
	}
	#site-header .mylook-mega__img img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .5s ease;
	}
	#site-header .mylook-mega__story:hover .mylook-mega__img img {
		transform: scale(1.03);
	}
	#site-header .mylook-mega__eyebrow {
		display: block;
		margin-top: 12px;
		font-size: 10.5px;
		font-weight: 500;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--mylook-text-muted);
	}
	#site-header .mylook-mega__title {
		display: block;
		margin-top: 5px;
		font-family: var(--mylook-font-display);
		font-size: 19px;
		font-weight: 400;
		line-height: 1.2;
		color: var(--mylook-text);
	}
	#site-header .mylook-mega__story:hover .mylook-mega__title,
	#site-header .mylook-mega__look:hover .mylook-mega__title {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
	}
	#site-header .mylook-mega__more {
		display: block;
		margin-top: 6px;
		font-size: 13px;
		color: var(--mylook-text-soft);
	}
	/* Board-Regeln aus looks.css: die Datei laedt nur auf den Look-Seiten, das Menue steht auf jeder */
	#site-header .mylook-mega__look .mylook-board {
		position: relative;
		max-width: 300px;
		aspect-ratio: 4 / 5;
		overflow: hidden;
		background: #f1ece3;
	}
	#site-header .mylook-mega__look .mylook-board__item {
		position: absolute;
		overflow: hidden;
	}
	#site-header .mylook-mega__look .mylook-board__item img {
		position: absolute;
		max-width: none;
		height: auto;
		mix-blend-mode: multiply;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	#site-header ul.mylook-nav__menu > li.mylook-mega > ul.mylook-mega__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 0 22px;
		padding: 28px 24px 32px;
	}
	#site-header ul.mylook-mega__panel--shop {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	#site-header .mylook-mega__panel--shop > .mylook-mega__feature {
		display: none;
	}
	#site-header .mylook-mega__panel > li + li {
		padding-left: 22px;
	}
	#site-header .mylook-mega__stories {
		grid-template-columns: 1fr;
	}
	#site-header .mylook-mega__story + .mylook-mega__story {
		display: none;
	}
}

/* Suche */

.mylook-header__search {
	grid-column: 3;
	justify-self: end;
	position: relative;
	width: 346px;
	margin: 0 -40px 0 0;
}
.mylook-header__search svg,
.mylook-nav__search svg {
	position: absolute;
	left: 15px;
	top: 50%;
	width: 20px;
	height: 20px;
	color: #3f444b;
	transform: translateY(-50%);
	pointer-events: none;
}
.mylook-header__search input[type="search"] {
	width: 100%;
	height: 45px;
	margin: 0;
	padding: 0 15px 0 48px;
	border: 1px solid #d5d5d5;
	border-radius: 40px;
	background: transparent;
	font-family: var(--mylook-font-body);
	font-size: 15px;
	font-weight: 300;
	color: #333;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.mylook-header__search input::placeholder {
	color: #7a7a7a;
}
.mylook-nav__search {
	display: none;
}

/* Tablet */

@media (max-width: 1024px) {
	.mylook-header__inner {
		height: 132px;
		padding: 20px;
	}
	.mylook-header__logo {
		padding: 0 20px;
	}
	ul.mylook-nav__menu {
		margin-left: 42px;
	}
	.mylook-nav__menu > li {
		margin-right: 0;
	}
	.mylook-nav__menu > li > a {
		padding: 0 14px;
		font-size: 13px;
	}
	.mylook-nav__menu > li > a::after {
		left: 14px;
		right: 14px;
	}
	.mylook-header__search {
		width: 280px;
		margin: 0;
	}
	.mylook-header__search svg {
		width: 17px;
		height: 17px;
	}
}

/* Handy */

/* Seit "Get The Look" im Menue steht (27.10.2026), reicht die Breite zwischen 768 und 900 px sonst nicht:
   der Menuepunkt brach um und die Suche lief rechts aus dem Bild. */
@media (min-width: 768px) and (max-width: 900px) {
	ul.mylook-nav__menu {
		margin-left: 16px;
	}
	.mylook-nav__menu > li > a {
		padding: 0 9px;
	}
	.mylook-nav__menu > li > a::after {
		left: 9px;
		right: 9px;
	}
	.mylook-header__logo {
		padding: 0 12px;
	}
	.mylook-header__search {
		width: 200px;
	}
}

@media (max-width: 767px) {
	.mylook-topbar {
		display: none;
	}
	.mylook-header__inner {
		grid-template-columns: auto 1fr;
		height: 81px;
		padding: 15px 20px 20px;
	}
	.mylook-header__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		grid-column: 1;
		width: 45px;
		height: 45px;
		margin: 0;
		padding: 7.5px;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #070707;
		cursor: pointer;
	}
	/* OceanWP faerbt jeden button bei Hover/Fokus dunkel ein */
	.mylook-header__toggle:hover,
	.mylook-header__toggle:focus,
	.mylook-header__toggle:active {
		background: transparent;
		color: #070707;
	}
	.mylook-header__toggle svg {
		width: 30px;
		height: 30px;
	}
	.mylook-header__icon-close,
	.mylook-header.is-open .mylook-header__icon-menu {
		display: none;
	}
	.mylook-header.is-open .mylook-header__icon-close {
		display: block;
	}
	.mylook-header__logo {
		grid-column: 2;
		justify-self: end;
		padding: 0 21px 0 0;
		font-size: 40px;
	}
	.mylook-header__search {
		display: none;
	}

	/* Menue-Panel unter dem Header, volle Breite */
	.mylook-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		justify-self: stretch;
		height: auto;
		max-height: calc(100vh - 81px);
		overflow-y: auto;
		background: var(--mylook-bg);
		border-top: 1px solid var(--mylook-border);
		box-shadow: 0 24px 48px rgba(13, 13, 13, .10);
		padding: 6px 0 0;
	}
	.mylook-header.is-open .mylook-nav {
		display: block;
	}
	ul.mylook-nav__menu {
		display: block;
		height: auto;
		margin: 0;
	}
	.mylook-nav__menu > li + li {
		border-top: 1px solid var(--mylook-border);
	}
	.mylook-nav__menu > li > a,
	.mylook-nav__menu .sub-menu a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: auto;
		padding: 14px 22px;
		font-size: 13px;
		font-weight: 500;
		line-height: 20px;
		letter-spacing: .1em;
		color: var(--mylook-text);
		box-shadow: none;
	}
	.mylook-nav__menu > li > a::after {
		display: none;
	}
	.mylook-nav__menu > li:hover > a,
	.mylook-nav__menu > li:focus-within > a {
		color: var(--mylook-text);
	}
	.mylook-nav__menu a:hover,
	.mylook-nav__menu .current-menu-item > a {
		color: var(--mylook-accent-gold);
	}
	.mylook-nav__menu li:hover > a > .mylook-nav__caret,
	.mylook-nav__menu li:focus-within > a > .mylook-nav__caret {
		transform: none;
	}
	.mylook-nav__menu li.is-open > a > .mylook-nav__caret {
		transform: rotate(180deg);
	}
	.mylook-nav__menu .sub-menu .mylook-nav__caret {
		transform: none;
	}
	ul.mylook-nav__menu ul.sub-menu,
	ul.mylook-nav__menu ul.sub-menu ul.sub-menu {
		display: none;
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		visibility: visible;
		opacity: 1;
	}
	ul.mylook-nav__menu ul.sub-menu::before {
		display: none;
	}
	/* Gleiche Spezifitaet wie die Versteck-Regel fuer verschachtelte Menues darueber
	   (0,3,3) und spaeter im Code - sonst klappte "Seasons" nie auf */
	ul.mylook-nav__menu li.is-open > ul.sub-menu {
		display: block;
	}
	.mylook-nav__menu .sub-menu a {
		padding: 12px 22px 12px 36px;
		font-size: 12px;
		font-weight: 400;
		letter-spacing: .06em;
		color: var(--mylook-text-soft);
	}
	.mylook-nav__menu .sub-menu .sub-menu a {
		padding-left: 50px;
	}
	.mylook-nav__menu .sub-menu a:hover {
		padding-left: 36px;
	}
	.mylook-nav__menu .sub-menu .sub-menu a:hover {
		padding-left: 50px;
	}
	/* Vierte Ebene seit "Magazine" (Magazine > Women's Fashion > Seasons > Fall) */
	.mylook-nav__menu .sub-menu .sub-menu .sub-menu a,
	.mylook-nav__menu .sub-menu .sub-menu .sub-menu a:hover {
		padding-left: 64px;
	}
	/* Desktop-Hover (Goldstrich, Einruecken, Pfeil nach rechts) greift sonst beim Antippen */
	.mylook-nav__menu .sub-menu a:hover,
	.mylook-nav__menu .sub-menu .current-menu-item > a {
		box-shadow: none;
	}
	.mylook-nav__menu .sub-menu li > a > .mylook-nav__caret,
	.mylook-nav__menu .sub-menu li:hover > a > .mylook-nav__caret {
		transform: none;
	}
	.mylook-nav__menu .sub-menu li.is-open > a > .mylook-nav__caret,
	.mylook-nav__menu .sub-menu li.is-open:hover > a > .mylook-nav__caret {
		transform: rotate(180deg);
	}

	/* Shop ist auf dem Handy ein einfacher Link: kein Pfeil, kein Panel */
	.mylook-nav__menu > li.mylook-mega--shop > a > .mylook-nav__caret,
	ul.mylook-nav__menu > li.mylook-mega--shop > ul.sub-menu {
		display: none !important;
	}
	/* Mega-Menue auf dem Handy: dasselbe Markup als Aufklapp-Liste, Bild-Spalte aus */
	.mylook-nav__menu .mylook-mega__feature {
		display: none;
	}
	.mylook-nav__menu .mylook-mega__tag {
		margin-left: 8px;
		padding: 1px 5px;
		border-radius: 2px;
		background: var(--mylook-accent-gold);
		font-size: 9px;
		letter-spacing: .1em;
		color: var(--mylook-text);
	}
	.mylook-nav__menu .mylook-mega__collection {
		display: flex;
		align-items: center;
		padding: 0 22px 0 36px;
	}
	.mylook-nav__menu .mylook-mega__collection > span {
		flex: 1;
		font-size: 12px;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--mylook-text-soft);
	}
	.mylook-nav__menu .sub-menu .mylook-mega__collection a {
		padding: 12px 0 12px 16px;
	}
	.mylook-nav__menu li.is-now:not(.mylook-mega__collection) > a::after {
		content: "now";
		margin-left: 8px;
		font-size: 10px;
		letter-spacing: .1em;
		color: var(--mylook-text-muted);
	}

	.mylook-nav__search {
		display: block;
		position: relative;
		margin-top: 4px;
		padding: 14px 22px 18px;
		border-top: 1px solid var(--mylook-border);
		background: var(--mylook-bg);
	}
	.mylook-nav__search svg {
		left: 40px;
		width: 17px;
		height: 17px;
		margin-top: -2px;
	}
	.mylook-nav__search input[type="search"] {
		width: 100%;
		padding: 10px 18px 10px 46px;
		border: 1px solid var(--mylook-border);
		border-radius: 999px;
		background: var(--mylook-surface);
		/* 16px ist Pflicht: darunter zoomt iOS Safari beim Fokussieren (Marlon 2026-07-08) */
		font-family: var(--mylook-font-body);
		font-size: 16px;
		line-height: 1.4;
		color: var(--mylook-text);
		box-sizing: border-box;
		-webkit-appearance: none;
		appearance: none;
	}
}