/* ===========================================================
   MOSCH Storefront — Shop-Mega-Menü (v0.19.0)
   Emitter: SF_Mega_Menu ([sf_mega_menu]). Mockup: Canvas
   „Mega Menus rev1 · Compendium + Shop", Board 2.

   Der Umschlag trägt .sfp: Titel, Untertitel, Tag, Rechtszeile,
   Warenkorb-Formular, Menge und Free-Shipping-Leiste kommen
   unverändert aus product.css (ein Owner der Produktoptik).
   Hier stehen nur das Raster des Menüs und was die Produktseite
   nicht kennt (Kategorien, New Arrivals, Release, USP-Zeile).
   =========================================================== */

.sfp.sfmm {
	width: 100%;
	container-type: normal;
}

/* ── Kopf: Illustration · „Shop" · Illustration ─────────────────── */

.sfmm-top {
	display: grid;
	grid-template-columns: 256px minmax(0, 1fr) 256px;
	align-items: end;
	gap: 48px;
}
.sfmm-ill img {
	display: block;
	width: 100%;
	max-width: 256px;
	height: auto;
}
.sfmm-ill.is-r img {
	margin-left: auto;
}
.sfp .sfmm-title-main {
	display: block;
	padding-bottom: 24px;
	font-family: var(--sfp-head);
	font-size: 88px;
	font-weight: 400;
	line-height: 1.05;
	text-align: center;
	color: var(--sfp-pc);
}

/* ── Raster: Kategorien | New Arrivals | Strich | Produktfeld ───── */

.sfmm-grid {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr) 1px minmax(0, 780px);
	gap: 48px;
	align-items: stretch;
	margin-top: 48px;
}
/* Vorgabe Max: senkrechter Trennstrich, 1 px Primary. */
.sfmm-vr {
	display: block;
	background: var(--sfp-pc);
}

.sfmm-cg + .sfmm-cg {
	margin-top: 32px;
}
.sfp .sfmm-cgt {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sfp-pc);
}
.sfp a.sfmm-cl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	border-bottom: 1px solid var(--sfp-dg);
	font-size: 18px;
	font-weight: 400;
	text-decoration: none;
	color: var(--sfp-tl);
}
.sfmm-cl svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .7;
}
/* Vorgabe Max: Hover der Einträge in Secondary Color. */
.sfp a.sfmm-cl:hover {
	color: var(--sfp-sc);
}

/* ── New Arrivals: Zeilen-Grammatik des Compendium ──────────────── */

.sfmm-nah {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.sfp .sfmm-h {
	font-family: var(--sfp-head);
	font-size: 44px;
	line-height: 1.05;
	color: var(--sfp-pc);
}
.sfp a.sfmm-all {
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sfp-pc);
}
.sfp a.sfmm-all:hover {
	color: var(--sfp-sc);
}
.sfp a.sfmm-lt {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 96px;
	margin-bottom: 4px;
	padding: 12px 16px 12px 12px;
	text-decoration: none;
	color: var(--sfp-tl);
}
.sfmm-lt.is-odd {
	background: var(--sfp-night);
	box-shadow: inset 0 0 0 1px rgba(74, 60, 39, .6);
}
.sfmm-lt.is-even {
	background: var(--sfp-bm);
}
.sfmm-th {
	position: relative;
	flex: none;
	width: 72px;
	height: 72px;
	background: var(--sfp-paper) #efe4cc;
}
.sfmm-th img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10%;
	object-fit: contain;
}
.sfmm-th::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 13px solid transparent;
	border-image: var(--sfp-thumb-n) 13 / 13px stretch;
	pointer-events: none;
}
.sfmm-lt.is-even .sfmm-th::after {
	border-image-source: var(--sfp-thumb-m);
}
.sfmm-lti {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
/* Titel bleibt Primary, auch beim Hover (Vorgabe Max). */
.sfp .sfmm-ltt {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .015em;
	text-transform: uppercase;
	color: var(--sfp-pc);
}
.sfp .sfmm-lts {
	font-size: 17px;
	font-style: italic;
	line-height: 1.4;
	color: var(--sfp-tl);
}
.sfmm-ltp {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}
.sfp .sfmm-ltp b {
	font-size: 22px;
	font-weight: 400;
	color: var(--sfp-tl);
}
.sfp .sfmm-ltp small {
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sfp-dim);
}
.sfp a.sfmm-lt:hover .sfmm-th::after {
	border-image-source: var(--sfp-thumb-hover);
}

.sfp .sfmm-rel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 132px;
	margin-top: 24px;
	padding: 16px 32px;
	background-color: var(--sfp-bm);
	background-position: center 30%;
	background-size: cover;
	box-shadow: inset 0 0 0 1px var(--sfp-pc);
	text-decoration: none;
	color: var(--sfp-tl);
}
.sfmm-rel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(3, 17, 24, .95) 0%, rgba(3, 17, 24, .7) 55%, rgba(3, 17, 24, .25) 100%);
}
.sfmm-rel > * {
	position: relative;
}
.sfmm-reli {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.sfp .sfmm-reli b {
	font-family: var(--sfp-head);
	font-size: 34px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--sfp-pc);
}
.sfp .sfmm-reli small {
	font-size: 15px;
	font-style: italic;
	color: var(--sfp-tl);
}

/* ── Produktfeld im Stil der Produktseite, ohne Kasten ──────────── */

.sfmm-feat {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.sfmm-fp {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
.sfp .sfmm-fp .sfp-pi {
	flex: none;
	width: 340px;
	max-width: 44%;
}
.sfmm-fi {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sfp .sfmm-fi .sfp-tags {
	margin: 0;
}
.sfp a.sfmm-tl {
	text-decoration: none;
}
/* Die Produktseite setzt den Titel als h1; im Kopfmenü ist er ein span. */
.sfp .sfmm-title {
	display: block;
	margin: 0;
	font-family: var(--sfp-head);
	font-size: min(52px, calc(100cqi / (var(--len) * .30)));
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	color: var(--sfp-pc);
}
.sfp .sfmm-fi .sfp-ticon {
	width: 64px;
	height: 64px;
}
/* Vorgabe Max: USPs in einer Zeile unter dem Bild, ohne Box,
   Glyph mmm-ornament-small in Secondary Color mittig davor. */
.sfp .sfmm-usp {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.sfp .sfmm-usp li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 64px;
	margin: 0;
	padding: 0 8px;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sfp-tl);
}
.sfp .sfmm-usp li::before {
	content: "\e90b"; /* mmm-ornament-small, wie „What's Included" */
	flex: none;
	font-family: var(--font-family-iconfont, "MaxsMagnificent-Icons");
	font-size: 18px;
	line-height: 1;
	text-transform: none;
	color: var(--sfp-sc);
}
.sfp .sfmm-feat .sfp-pb {
	margin-top: 24px;
	padding-top: 24px;
}
.sfp .sfmm-feat .sfp-cart {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}
/* v0.19.1 — Warenkorb im Menü: Menge und Avada-Standardknopf der Website,
   gleich hoch wie die drei Mengen-Quadrate (67 px, Vorgabe Max). Die
   Knopf-Grafiken und Farben kommen aus Avada und style.css. */
.sfp .sfmm-cart {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
}
.sfp .sfmm-cart .fusion-button.sfmm-atc,
.sfp .sfmm-feat a.fusion-button.sfmm-atc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 67px;
	margin: 0;
}

/* ── Free-Shipping-Leiste über die ganze Breite ─────────────────── */

.sfp .sfmm-fsu {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--sfp-dg);
}
.sfp .sfmm-fsu .sfp-fsu {
	grid-column: auto;
}

/* ── Schmalere Fenster ──────────────────────────────────────────── */

@media (max-width: 1500px) {
	.sfmm-top {
		grid-template-columns: 180px minmax(0, 1fr) 180px;
		gap: 32px;
	}
	.sfp .sfmm-title-main {
		font-size: 72px;
	}
	.sfmm-grid {
		grid-template-columns: 240px minmax(0, 1fr) 1px minmax(0, 620px);
		gap: 32px;
	}
	.sfp .sfmm-fp .sfp-pi {
		width: 260px;
	}
}
@media (max-width: 1180px) {
	.sfmm-ill {
		display: none;
	}
	.sfmm-top {
		grid-template-columns: minmax(0, 1fr);
	}
	.sfmm-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.sfmm-vr {
		display: none;
	}
	.sfmm-feat {
		grid-column: 1 / -1;
	}
}