/* =========================================================================
   99WAVES – Store-Seite (Optik) · v1.1.0
   Scoped auf #wcfmmp-store. Rein additiv, kein Theme-Eingriff.

   WICHTIG: Das Minimog-Theme erzwingt am Store-Kopf pinke Hintergründe UND
   weiße Schrift (mit !important + hoher Spezifität). Deshalb hier bewusst
   !important + volle Farbfüllungen. Live gegen dev verifiziert.

   v1.1.0 (24.09.): Kopf-Redesign nach Manu-Freigabe — markengerechtes
   Standard-Banner (99WAVES-Look) als Karten-Banner (::before), prominenter
   Avatar (echtes Logo | Initialen via JS), Typ-Badge, dezenter Impressum-Link,
   Kurzinfo-Zeile (Produktzahl/Standort), Impressum als Akkordeon. Fremd-Element
   (rechter Überstand von .header_left) gefixt. Rating weiter ausgeblendet.
   ========================================================================= */

#wcfmmp-store {
	--nwsp-navy:      #0d1b3e;
	--nwsp-navy-deep: #021E3C;
	--nwsp-navy-2:    #24215a;
	--nwsp-pink:      #ec2a7f;
	--nwsp-ink:       #1a2233;
	--nwsp-muted:     #6b7385;
	--nwsp-line:      #e6e8ee;
	--nwsp-bg:        #f5f6f8;
	--nwsp-card:      #ffffff;
	--nwsp-radius:    16px;
	--nwsp-shadow:    0 10px 30px rgba(13, 27, 62, .10);
	--nwsp-banner-h:  180px;

	background: var(--nwsp-bg);
	color: var(--nwsp-ink);
	padding-bottom: 48px;
	/* Ohne eigenes Theme-Banner fehlt der Abstand zur festen Theme-Kopfleiste
	   (.page-header-inner, ~123px, absolut/fixed) → oben Platz schaffen. */
	padding-top: 135px !important;
}

/* Zentrierter Inhaltsrahmen ----------------------------------------------- */
#wcfmmp-store .wcfmmp-store-page-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

/* WCFM-Standard-Banner-Bereich aus: wir bringen ein eigenes Karten-Banner. */
#wcfmmp-store .wcfm_banner_area { display: none !important; }

/* =========================================================================
   Kopf-Karte + eingebautes 99WAVES-Banner
   Das Theme setzt inline `#wcfmmp-store #wcfm_store_header{background:pink!important}`
   (2 IDs, !important). Mit 3 IDs (#wcfmmp-store-content dazwischen) übersteuern.
   ========================================================================= */
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header,
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .header_area,
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .header_wrapper,
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .header_left,
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .address,
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .header_store_name {
	background: transparent !important;
}

#wcfmmp-store #wcfm_store_header {
	position: relative;
	max-width: 1140px;
	margin: 0 auto 26px !important;
	background: var(--nwsp-card) !important;
	border: 1px solid var(--nwsp-line) !important;
	border-radius: var(--nwsp-radius) !important;
	box-shadow: var(--nwsp-shadow) !important;
	overflow: hidden;              /* Banner-Ecken sauber runden */
	padding: 0 30px 24px !important;
	box-sizing: border-box !important;
}

/* Das markengerechte Standard-Banner (Verlauf Navy→Magenta + Wellen). */
#wcfmmp-store #wcfm_store_header::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: var(--nwsp-banner-h);
	background:
		url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201140%20180'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,120%20C180,60%20360,180%20570,120%20C780,60%20960,170%201140,110%20L1140,180%20L0,180%20Z'%20fill='%23ffffff'%20fill-opacity='0.05'/%3E%3Cpath%20d='M0,150%20C220,110%20380,190%20620,140%20C860,95%20980,180%201140,140%20L1140,180%20L0,180%20Z'%20fill='%23ffffff'%20fill-opacity='0.06'/%3E%3C/svg%3E") no-repeat center bottom / cover,
		radial-gradient(130% 150% at 88% 12%, rgba(236,42,127,.55) 0%, rgba(236,42,127,0) 46%),
		linear-gradient(115deg, var(--nwsp-navy-deep) 0%, var(--nwsp-navy) 48%, var(--nwsp-navy-2) 74%, var(--nwsp-pink) 132%);
	z-index: 0;
	pointer-events: none;
}

/* (Kein 99WAVES-Wortmarken-Text im Banner – Manu 24.09.: 99WAVES erscheint nur
   als echtes Logo, und das steht ohnehin in der Seiten-Kopfleiste darüber.) */

/* Kopf-Inhalt in den Vordergrund + unter das Banner schieben.
   WICHTIG: Der Banner-Platz kommt als padding-top auf den BLOCK-Container
   .header_area (nicht auf den Flex-Container .header_left – dort würde das
   Padding die Content-Box verkleinern und die Flex-Kinder nach oben überlaufen
   lassen). So bleibt die Karte hoch genug und der Avatar überlappt sauber. */
#wcfmmp-store #wcfm_store_header .header_wrapper {
	display: block !important;
	width: 100% !important;
	position: relative;
	z-index: 1;
	box-sizing: border-box !important;
}
#wcfmmp-store #wcfm_store_header .header_area {
	display: block !important;
	width: 100% !important;
	position: relative;
	z-index: 1;
	box-sizing: border-box !important;
	/* Volle Banner-Höhe reservieren → Titel/Badges/Kurzinfo stehen UNTER dem
	   Banner (heller Grund). Nur der Avatar wird per margin-top ins Banner
	   hochgezogen (siehe .logo_area). +6px kleiner Abstand zur Bannerkante. */
	padding-top: calc(var(--nwsp-banner-h) + 6px) !important;
}

/* Fremd-Element-Fix: .header_left lief mit width:100% + Padding über den Rand.
   Jetzt als saubere Identitäts-Zeile (Avatar + Titelblock), randbündig. */
#wcfmmp-store #wcfm_store_header .header_left {
	display: flex !important;
	align-items: flex-start;
	gap: 20px;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
#wcfmmp-store #wcfm_store_header .spacer { display: none !important; }

/* Avatar / Store-Logo (echtes Logo bevorzugt, sonst Initialen via JS).
   .logo_area = position:relative → bleibt im Fluss (trägt die Flex-Zeile) UND
   ist Bezugsrahmen für das vom Theme absolut gesetzte Logo-<img>. NICHT static
   (dann würde das absolute Bild auf den ganzen Header „ausbrechen"). */
#wcfmmp-store #wcfm_store_header .logo_area {
	float: none !important;
	position: relative !important;
	flex: 0 0 auto;
	width: 112px; height: 112px;
	border-radius: 22px;
	overflow: hidden;
	border: 4px solid #fff;
	box-shadow: 0 8px 20px rgba(13,27,62,.22);
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	margin: -62px 0 0 !important;   /* Avatar ins Banner hochziehen (überlappt ~62px) */
}
/* Logo als Kachel voll anzeigen (contain), nicht beschneiden – ein transparentes
   oder unregelmäßiges Logo würde bei cover als weißes Feld mit Rand-Ecke erscheinen.
   WICHTIG (am echten dev-DOM gefunden): Das Theme setzt das Logo-<img> auf
   position:absolute + transform:translate(-52px,-52px) und den <a>-Wrapper. Wir
   holen beide mit 3-ID-Spezifität in den Fluss zurück und heben den transform auf,
   sonst „schwebt" das Logo groß über dem ganzen Kopf. */
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .logo_area a {
	position: static !important;
	display: flex !important;
	width: 100% !important;
	height: 100% !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 !important;
}
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .logo_area img {
	position: static !important;
	top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
	transform: none !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	padding: 12px !important;
	box-sizing: border-box !important;
	display: block;
}
/* Initialen-Fallback (JS setzt .nwsp-avatar--initials + Inhalt). */
#wcfmmp-store #wcfm_store_header .logo_area.nwsp-avatar--initials {
	background: linear-gradient(135deg, var(--nwsp-navy) 0%, #2a3d78 100%) !important;
}
#wcfmmp-store #wcfm_store_header .logo_area .nwsp-initials {
	color: #fff; font-size: 40px; font-weight: 800; letter-spacing: .02em; line-height: 1;
}

/* Titel-Block. WICHTIG: Das Theme setzt .address auf position:absolute →
   dadurch fällt es aus dem Fluss und die Kopf-Karte kollabiert. Auf static
   zurückholen, damit die Flex-Zeile (Avatar + Titel) trägt. */
#wcfmmp-store #wcfm_store_header .address {
	float: none !important;
	position: static !important;
	flex: 1 1 auto;
	min-width: 0;
	padding-bottom: 4px;
}
#wcfmmp-store #wcfm_store_header .wcfm_store_title,
#wcfmmp-store #wcfm_store_header .address h1 {
	font-size: 28px !important;
	line-height: 1.15;
	font-weight: 800 !important;
	color: var(--nwsp-ink) !important;
	margin: 0 0 8px !important;
}

/* Die WCFM-Standard-Kontaktzeilen (E-Mail/Adresse im Kopf) blenden wir aus –
   Kontakt läuft übers Impressum-Akkordeon; im Kopf steht die Kurzinfo-Zeile. */
#wcfmmp-store #wcfm_store_header .header_store_name,
#wcfmmp-store #wcfm_store_header .store_info_parallal,
#wcfmmp-store #wcfm_store_header .wcfmmp_store_header_address { display: none !important; }

/* Verkäufer-Typ-Badge + dezenter Impressum-Link -------------------------- */
#wcfmmp-store .nwsp-header-meta {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 12px;
	margin-top: 4px;
	width: 100%;
}
#wcfmmp-store .nwsp-badge {
	display: inline-flex !important;
	width: auto !important;
	max-width: max-content !important;
	flex: 0 0 auto !important;
	align-items: center;
	gap: 7px;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	padding: 8px 14px !important;
	border-radius: 999px !important;
	border: none !important;
}
#wcfmmp-store .nwsp-badge--business,
#wcfmmp-store .nwsp-badge--business * {
	background: var(--nwsp-pink) !important;
	color: #fff !important;
}
#wcfmmp-store .nwsp-badge--business { box-shadow: 0 2px 8px rgba(236,42,127,.28); }
#wcfmmp-store .nwsp-badge--private,
#wcfmmp-store .nwsp-badge--private * {
	background: var(--nwsp-navy) !important;
	color: #fff !important;
}
#wcfmmp-store .nwsp-badge i { font-size: 13px !important; }

/* Impressum als dezenter Text-Link statt hartem Button.
   WICHTIG: Das Theme erzwingt im Store-Kopf weiße Schrift (!important + hohe
   Spezifität). Deshalb Farbe mit 2-ID-Spezifität (#wcfmmp-store #wcfm_store_header)
   erzwingen, sonst wird der Text weiß und verschwindet auf hellem Grund. */
/* 3-ID (mit #wcfmmp-store-content), weil das Theme Links im Kopf mit 3-ID-!important
   auf Weiß zwingt – ein <a> braucht mehr Spezifität als die Span-Texte. */
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .nwsp-imprint-link,
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .nwsp-imprint-link * { color: var(--nwsp-muted) !important; }
#wcfmmp-store .nwsp-imprint-link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px dashed transparent !important;
	padding: 6px 2px !important;
	border-radius: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	cursor: pointer;
}
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .nwsp-imprint-link:hover,
#wcfmmp-store #wcfmmp-store-content #wcfm_store_header .nwsp-imprint-link:hover * { color: var(--nwsp-navy) !important; }
#wcfmmp-store .nwsp-imprint-link:hover { border-bottom-color: var(--nwsp-navy) !important; }

/* Kurzinfo-Zeile (Produktzahl / Standort) — nur befüllte Items. ---------- */
#wcfmmp-store .nwsp-facts {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px 18px;
	width: 100%;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--nwsp-line);
}
#wcfmmp-store .nwsp-facts .nwsp-fact {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 13.5px;
}
/* 2-ID + !important gegen die vom Theme erzwungene weiße Schrift. */
#wcfmmp-store #wcfm_store_header .nwsp-facts .nwsp-fact,
#wcfmmp-store #wcfm_store_header .nwsp-facts .nwsp-fact * { color: var(--nwsp-muted) !important; }
#wcfmmp-store #wcfm_store_header .nwsp-facts .nwsp-fact i { color: var(--nwsp-pink) !important; font-size: 14px; }
#wcfmmp-store #wcfm_store_header .nwsp-facts .nwsp-fact b { color: var(--nwsp-ink) !important; font-weight: 700; }

/* Aktions-Buttons + Rating bleiben ausgeblendet (Manu 13.09.). */
#wcfmmp-store #wcfm_store_header .header_right { display: none !important; }
#wcfmmp-store #wcfm_store_header .logo_area_after { display: none !important; }

/* Tabs ausgeblendet (Manu 11.09.) → Seite zeigt direkt die Produkte. */
#wcfmmp-store .tab_links_area { display: none !important; }

/* Produkt-Bereich --------------------------------------------------------- */
#wcfmmp-store .body_area { margin-top: 4px; }
#wcfmmp-store .right_side { float: none; width: 100%; }
#wcfmmp-store .woocommerce-result-count,
#wcfmmp-store .wcfmmp-store-result-count { color: var(--nwsp-muted); font-size: 13.5px; }
#wcfmmp-store .woocommerce-ordering { margin-bottom: 18px; }
#wcfmmp-store ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0 !important;
	padding: 0 !important;
}
#wcfmmp-store ul.products::before,
#wcfmmp-store ul.products::after { content: none !important; display: none !important; }
#wcfmmp-store ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Sidebar (Filter/Widgets) als Karte, falls vorhanden */
#wcfmmp-store .left_sidebar .widget,
#wcfmmp-store .store-sidebar .widget {
	background: var(--nwsp-card);
	border: 1px solid var(--nwsp-line);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 18px;
}

/* =========================================================================
   Impressum als einklappbares Akkordeon (Seitenende, nur gewerblich)
   ========================================================================= */
.nwsp-impressum {
	background: var(--nwsp-bg);
	padding: 8px 0;
}
.nwsp-impressum__inner {
	max-width: 1140px;
	margin: 32px auto 0;
}
.nwsp-acc {
	background: var(--nwsp-card);
	border: 1px solid var(--nwsp-line);
	border-radius: var(--nwsp-radius);
	box-shadow: var(--nwsp-shadow);
	overflow: hidden;
}
.nwsp-acc > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 24px;
	font-size: 15px;
	font-weight: 800;
	color: var(--nwsp-navy);
}
.nwsp-acc > summary::-webkit-details-marker { display: none; }
.nwsp-acc > summary .nwsp-acc__ico {
	width: 34px; height: 34px; border-radius: 10px;
	background: rgba(13,27,62,.06);
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	color: var(--nwsp-navy);
}
.nwsp-acc > summary .nwsp-acc__ico i { font-size: 15px; }
.nwsp-acc > summary .nwsp-acc__sub { font-size: 12.5px; font-weight: 500; color: var(--nwsp-muted); margin-left: 2px; }
.nwsp-acc > summary .nwsp-acc__chev { margin-left: auto; color: var(--nwsp-muted); transition: transform .2s ease; }
.nwsp-acc[open] > summary .nwsp-acc__chev { transform: rotate(180deg); }
.nwsp-acc__body { padding: 4px 24px 22px; border-top: 1px solid var(--nwsp-line); }
.nwsp-acc__intro { color: var(--nwsp-muted); font-size: 13px; margin: 10px 0 6px; }
.nwsp-impressum__list { margin: 0; }
.nwsp-impressum__row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 6px 20px;
	padding: 11px 0;
	border-top: 1px solid var(--nwsp-line);
}
.nwsp-impressum__row:first-child { border-top: none; }
.nwsp-impressum__row dt { font-weight: 700; color: var(--nwsp-navy); font-size: 14px; margin: 0; }
.nwsp-impressum__row dd { margin: 0; color: var(--nwsp-ink); font-size: 14px; line-height: 1.5; }
.nwsp-impressum__row dd a { color: var(--nwsp-pink); text-decoration: none; }
.nwsp-impressum__admin-note {
	margin: 16px 0 0;
	padding: 12px 14px;
	background: #fff6e5;
	border: 1px solid #f0d38a;
	border-radius: 10px;
	font-size: 13px;
	color: #7a5b00;
}

/* Responsive -------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
	#wcfmmp-store ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 782px) {
	#wcfmmp-store { padding-top: 160px !important; --nwsp-banner-h: 150px; } /* mobile Kopfleiste höher */
	#wcfmmp-store #wcfm_store_header { padding: 0 18px 20px !important; }
	#wcfmmp-store #wcfm_store_header .header_left {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	#wcfmmp-store #wcfm_store_header .logo_area { width: 92px; height: 92px; }
	#wcfmmp-store #wcfm_store_header .logo_area .nwsp-initials { font-size: 34px; }
	#wcfmmp-store ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.nwsp-acc__body { padding: 4px 18px 20px; }
	.nwsp-impressum__row { grid-template-columns: 1fr; gap: 2px; }
	.nwsp-impressum__row dt { color: var(--nwsp-muted); font-size: 12.5px; }
}
@media screen and (max-width: 480px) {
	#wcfmmp-store #wcfm_store_header .wcfm_store_title { font-size: 23px !important; }
}