/* ==========================================================================
   TB Single-Product (PDP) – Mobile Pro-Shop Polish
   --------------------------------------------------------------------------
   WooCommerce-Single-Product-Seiten (`body.single-product`) auf Mobile.
   BeTheme + WooCommerce rendern in dieser Reihenfolge im `.entry-summary`:

     1. Title        (h1.product_title)
     2. Description  (div.woocommerce-product-details__short-description)
     3. Price        (p.price)
     4. CTA          (p.cart  ← „Jetzt gestalten")
     5. Wishlist     (a.mfn-wish-button)
     6. Meta         (div.product_meta)
     7. Share        (div.share-simple-wrapper)

   Auf Mobile ist die Description ~640 px hoch — der User scrollt durch
   eine halbe Seite Text, bevor er Preis und Buy-Button sieht. Klassisches
   PDP-Anti-Pattern.

   Pro-Shop-Pattern (Apple, Allbirds, Nike, About You, …):
   - Hero-Image groß
   - Title
   - PRICE direkt nach Title (prominent, in Markenfarbe)
   - Short Description darunter
   - Sticky-CTA am unteren Bildschirmrand (immer erreichbar)

   Wir machen das per CSS-flex `order` ohne HTML-Änderung. Plus `.cart`
   wird `position: fixed; bottom: 0` → permanent sichtbar.

   Site-wide geladen (siehe class-product-styling.php) — wirkt nur auf
   Single-Product-Seiten via `body.single-product`-Scope.
   ========================================================================== */

@media (max-width: 767px) {

	/* Post-Nav (Pfeil-Icons über dem Bild) ausblenden — wirkt cluttered */
	body.single-product .column.post-nav {
		display: none !important;
	}

	/* Image-Wrapper voll breit */
	body.single-product .product_image_wrapper {
		width: 100% !important;
		padding: 0 !important;
	}

	/* Summary-Wrapper auf flex-column setzen, damit `order` auf Kinder wirkt.
	   Wichtig: Kinder liegen in `.mcb-column-inner`, NICHT direkt in
	   `.entry-summary` — daher beide Layer auf flex-column. */
	body.single-product .entry-summary,
	body.single-product .entry-summary > .mcb-column-inner {
		display: flex !important;
		flex-direction: column !important;
	}

	body.single-product .entry-summary {
		padding-bottom: 100px !important; /* Platz für sticky CTA */
	}

	/* Reorder via flex-`order`. */
	body.single-product .product_title {
		order: 1 !important;
		font-size: 26px !important;
		line-height: 1.15 !important;
		margin: 8px 0 4px !important;
	}

	body.single-product .entry-summary .price {
		order: 2 !important;
		font-size: 22px !important;
		font-weight: 700 !important;
		color: #0089f7 !important;
		margin: 0 0 18px !important;
	}

	body.single-product .woocommerce-product-details__short-description {
		order: 3 !important;
		font-size: 15px !important;
		line-height: 1.6 !important;
		color: #3a414a !important;
		margin-bottom: 24px !important;
	}

	/* Wishlist als kreisförmiger Icon-Button (Pro-Look) */
	body.single-product .entry-summary .mfn-wish-button {
		order: 4 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		border-radius: 50% !important;
		background: #f6f8fb !important;
		margin: 12px 0 !important;
	}

	/* Meta + Share dezent klein */
	body.single-product .product_meta {
		order: 5 !important;
		font-size: 13px !important;
		color: #5a6270 !important;
		padding-top: 16px !important;
		border-top: 1px solid #f0f1f3 !important;
	}

	body.single-product .share-simple-wrapper {
		order: 6 !important;
		padding-top: 12px !important;
	}

	/* ===================== STICKY .cart-CTA ============================
	   Pro-Shop-Pattern: Add-to-Cart immer sichtbar, kein Hin- und
	   Rück-Scrollen zum Buy-Button.
	   `.cart` ist <p class="cart"> mit dem CTA-Button drin.
	   `safe-area-inset-bottom` schützt vor iPhone-Home-Indicator-Overlap. */

	/* Specificity-Wettrennen mit BeTheme: dort gibt es
	   `.woocommerce .product.style-default .entry-summary .cart
	    { margin-bottom: 30px !important; }`
	   → Specificity (0,0,5,0). Würden wir nur `.entry-summary .cart`
	   schreiben (3 Klassen), bliebe der 30 px Margin am unteren Rand und
	   der sticky CTA sässe 30 px überm Viewport-Boden.
	   Wir matchen + überbieten mit 6 Klassen (woocommerce + product
	   + style-default + entry-summary + cart + body.single-product). */
	body.single-product.woocommerce .product.style-default .entry-summary p.cart {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		z-index: 999 !important;
		background: #ffffff !important;
		margin: 0 !important;
		margin-bottom: 0 !important;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
		border-top: 1px solid #f0f1f3 !important;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
	}

	body.single-product.woocommerce .product.style-default .entry-summary p.cart .button {
		width: 100% !important;
		margin: 0 !important;
		padding: 14px 16px !important;
		border-radius: 12px !important;
		font-size: 16px !important;
		font-weight: 600 !important;
	}

	/* Body-Padding-Bottom — sonst verschwindet der letzte Inhalt unter
	   dem sticky CTA */
	body.single-product {
		padding-bottom: 90px !important;
	}

	/* ===================== Tabs polish =============================== */
	body.single-product .woocommerce-tabs ul.tabs {
		padding: 0 16px !important;
	}

	body.single-product .woocommerce-tabs .panel {
		padding: 16px !important;
	}
}

/* ==========================================================================
   Desktop-Polish (≥ 768 px) — angelehnt an Mockup „Frauen T-Shirt"
   --------------------------------------------------------------------------
   Mobile-Block oben behandelt Reorder + sticky-CTA.
   Hier: alles, was Desktop und Mobile gleichermaßen betrifft (Pfeil-Nav,
   Rating-Block, Tax-Note, Bullets, Wishlist-Button).
   ========================================================================== */

/* Post-Nav (Pfeil-Icons + Grid-Icon über dem Bild) komplett ausblenden —
   visuell unruhig, kaum Klicks, Browser-Back tut's auch. Mobile war bereits
   im @media-Block oben weg, hier unkonditional. */
body.single-product .column.post-nav { display: none !important; }

/* === Rating-Block: Label „Kundenbewertungen" + Reformat ==================
   Layout (drei Zeilen-Logik):
   Zeile 1: Label „Kundenbewertungen" (via ::before, width:100% → eigene Zeile)
   Zeile 2: Sterne + „4.5 / 5 aus 69 Bewertungen" inline.
   .wc-rating-text wird ausgeblendet — der Average steckt nun komplett im
   Link-Text (vom JS-Patch in class-product-styling.php geschrieben). Sonst
   würde „4.5" doppelt erscheinen (BeTheme rendert es separat). */
body.single-product .entry-summary .woocommerce-product-rating {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px 6px !important;
	margin: 0 0 10px !important;
}
body.single-product .entry-summary .woocommerce-product-rating::before {
	content: "Kundenbewertungen";
	width: 100% !important;
	font-size: 13px;
	font-weight: 500;
	color: #5a6270;
	letter-spacing: .2px;
}
body.single-product .entry-summary .woocommerce-product-rating .wc-rating-with-text {
	display: inline-flex !important;
	align-items: center !important;
}
body.single-product .entry-summary .woocommerce-product-rating .wc-rating-text {
	display: none !important; /* Average erscheint im Link, hier wäre er doppelt */
}
body.single-product .entry-summary .woocommerce-product-rating .woocommerce-review-link {
	display: inline !important; /* nicht inline-flex — sonst werden Whitespaces im Text-Inhalt collapsed */
	color: #1a2330 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	margin: 0 !important;
}
/* Sterne explizit gelb halten — Flex-Wrap auf .woocommerce-product-rating
   würde sonst die color-Vererbung von der grauen Label-Farbe ziehen. */
body.single-product .entry-summary .woocommerce-product-rating .star-rating,
body.single-product .entry-summary .woocommerce-product-rating .star-rating::before,
body.single-product .entry-summary .woocommerce-product-rating .star-rating span::before {
	color: #FFB400 !important;
}

/* === Tax-Note unter Preis (vom PHP-Filter eingehängt) ==================== */
body.single-product .entry-summary p.price .tb-tax-note {
	display: block !important;
	margin-top: 6px !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: #5a6270 !important;
	letter-spacing: .1px;
}
body.single-product .entry-summary p.price .tb-tax-note a {
	color: #0089f7 !important;
	text-decoration: none !important;
}
body.single-product .entry-summary p.price .tb-tax-note a:hover {
	text-decoration: underline !important;
}

/* === Bullets: blaue Haken + optionaler Bold-Heading + Subtext ============
   Existing Plain-Bullets („einfacher Satz") bleiben funktionsfähig.
   Wenn die Kurzbeschreibung später als <li><strong>Title</strong>Subtext</li>
   gepflegt wird, springt das Subtext-Layout automatisch an. */
body.single-product .entry-summary .woocommerce-product-details__short-description ul li::before {
	color: #0089f7 !important;
}
body.single-product .entry-summary .woocommerce-product-details__short-description ul li strong:first-child {
	display: block !important;
	font-weight: 700 !important;
	color: #1a2330 !important;
	font-size: 15px !important;
	margin-bottom: 2px !important;
	line-height: 1.3 !important;
}

/* === Cart-Row: CTA + Heart als saubere Flex-Row =========================
   Voraussetzung: das JS in class-product-styling.php hat den Heart vorher
   in den `<p class="cart">` Container verschoben (DOM-Move). Damit fallen
   die alten BeTheme-Tricks mit negativer Margin/calc-Offset weg.

   Wichtig: die Selektoren im Child-Theme (`.entry-summary > .mcb-column-inner
   > .mfn-wish-button`) greifen nach dem Move nicht mehr — der Heart ist kein
   direkter Child von .mcb-column-inner mehr. Tot, aber unschädlich. */
body.single-product .entry-summary p.cart {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	gap: 10px !important;
	width: 100% !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
}

/* CTA-Button: kein max-width-Cap mehr, nutzt verfügbaren Platz neben Heart */
body.single-product .entry-summary p.cart .button,
body.single-product .entry-summary p.cart a.button.product_type_external,
body.single-product .entry-summary p.cart .single_add_to_cart_button {
	flex: 1 1 auto !important;
	max-width: none !important;
	padding: 12px 24px !important;
	height: auto !important;
	min-height: 56px !important;
	margin: 0 !important;
}

/* Heart-Button: jetzt im Cart drin → keine negative Margin nötig */
body.single-product .entry-summary p.cart .mfn-wish-button {
	position: static !important;
	margin: 0 !important;
	width: 56px !important;
	height: 56px !important;
	flex: 0 0 56px !important;
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.single-product .entry-summary p.cart .mfn-wish-button:hover {
	border-color: #d6d6d6 !important;
	box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
}
body.single-product .entry-summary p.cart .mfn-wish-button svg {
	width: 22px !important;
	height: 22px !important;
}
/* Heart per Default Outline (dunkel, gut sichtbar auf weissem Button).
   Hover: Outline rot. Beim Klick (.loved): voll rot gefüllt. */
body.single-product .entry-summary p.cart .mfn-wish-button svg path {
	fill: none !important;
	stroke: #1a2330 !important;
	stroke-width: 1.8px !important;
}
body.single-product .entry-summary p.cart .mfn-wish-button:hover svg path {
	stroke: #ef4444 !important;
}
body.single-product .entry-summary p.cart .mfn-wish-button.loved svg path {
	fill: #ef4444 !important;
	stroke: #ef4444 !important;
}

/* === Spacing rund um Cart-Row & Beschreibung =========================== */
body.single-product .entry-summary > .mcb-column-inner > p.price {
	margin: 18px 0 6px !important;
}
body.single-product .entry-summary > .mcb-column-inner > .woocommerce-product-details__short-description {
	border-top: none !important; /* Mockup hat keine Trennlinie */
	padding-top: 0 !important;
	margin-top: 18px !important;
}

/* === Breadcrumb kleiner (BeTheme #Subheader) ===========================
   BeTheme setzt `font-size: 1em !important` auf `#Subheader ul.breadcrumbs`
   (Specificity 111). Mein Selector mit `body.single-product`-Prefix hat 122
   und gewinnt. Kinder bekommen `inherit` — sonst multipliziert sich 0.8em
   pro DOM-Level (ul → li → a → span = 0.8 × 0.8 × 0.8 × 0.8 = ~0.4em). */
body.single-product #Subheader ul.breadcrumbs {
	font-size: 0.8em !important;
}
body.single-product #Subheader ul.breadcrumbs li,
body.single-product #Subheader ul.breadcrumbs li a,
body.single-product #Subheader ul.breadcrumbs li span {
	font-size: inherit !important;
}

/* === Single-Product-Summary Reihenfolge (CSS Flex-`order`) ===========
   Child-Theme `betheme-child/style.css` Zeilen 577ff setzt schon
   `display: flex; flex-direction: column` plus `order: 1..7` für
   product_title/price/cart/etc. Plugin-Hooks-Output (Pills, sizeLink,
   Rating) hat default `order: 0` und landet damit GANZ OBEN — egal
   wo das DOM die Elemente hat.
   Mein DOM-Move per JS ist sinnlos gegen Flexbox-`order`.
   Lösung: ich vergebe explizite Order-Werte für ALLE Summary-Children. */
.entry-summary > .mcb-column-inner > .woocommerce-product-rating              { order: 1 !important; }
.entry-summary > .mcb-column-inner > .product_title                           { order: 2 !important; }
.entry-summary > .mcb-column-inner > .tb-feature-pills                        { order: 3 !important; }
.entry-summary > .mcb-column-inner > .tb-size-table-link                      { order: 4 !important; }
.entry-summary > .mcb-column-inner > p.price                                  { order: 5 !important; }
.entry-summary > .mcb-column-inner > p.cart                                   { order: 6 !important; }
.entry-summary > .mcb-column-inner > .mfn-wish-button                         { order: 7 !important; }
.entry-summary > .mcb-column-inner > .woocommerce-product-details__short-description { order: 8 !important; }
.entry-summary > .mcb-column-inner > .product_meta                            { order: 9 !important; }
.entry-summary > .mcb-column-inner > .share-simple-wrapper                    { order: 10 !important; }

/* === „Kundenbewertungen"-Label entfernen ============================
   BeTheme rendert das Label via Pseudo-Element auf `.woocommerce-product-rating::before`
   (im DOM nicht sichtbar, daher findet kein JS-Selector den Text). Wir killen
   nur DAS Pseudo-Element — `.star-rating::before` (Sterne-Filler) ist ein
   anderes Element und bleibt unangetastet. */
body.single-product .entry-summary .woocommerce-product-rating::before {
	content: "" !important;
	display: none !important;
}
body.single-product .entry-summary .wc-rating-heading,
body.single-product .entry-summary .reviews-heading,
body.single-product .entry-summary .product-reviews-heading {
	display: none !important;
}

/* === Star-Rating Filling-Span garantiert orange ====================
   Falls Theme's CSS für `.star-rating > span::before` nicht greift,
   bringen wir's hier nach (Standard WC-Pattern). Span wird via JS
   injiziert wenn er fehlt (BeTheme/Plugin override). */
body.single-product .entry-summary .star-rating {
	overflow: hidden;
	position: relative;
}
body.single-product .entry-summary .star-rating > span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}
body.single-product .entry-summary .star-rating > span::before {
	content: "\53\53\53\53\53";
	top: 0;
	position: absolute;
	left: 0;
	color: #ffb400;
}

/* === Rating-Block: Flex-Layout, dezent grau, vertikal zentriert =========
   Sterne + Text + Trenner alle horizontal aligned, sanftes Grau wie Pills.
   WICHTIG: font-size/line-height NICHT auf .star-rating überschreiben — WC
   nutzt dort unicode-Sterne mit relativen em-Units; eigene Werte zerstören
   das Rendering der gefüllten Sterne. */
body.single-product .entry-summary .woocommerce-product-rating {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 0 12px !important;
}
body.single-product .entry-summary .woocommerce-product-rating .star-rating {
	margin: 0 !important;
	flex: 0 0 auto;
}
body.single-product .entry-summary .woocommerce-product-rating .wc-rating-text,
body.single-product .entry-summary .woocommerce-product-rating .woocommerce-review-link {
	color: #6b7280 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}
body.single-product .entry-summary .woocommerce-product-rating .tb-rating-sep {
	color: #d0d4d9 !important;
	margin: 0 2px !important;
}

/* === H1-Größe und Preis (Felix-Wünsche) ============================== */
body.single-product.woocommerce .product div.entry-summary h1.product_title,
body.single-product .entry-summary h1.product_title {
	font-size: 30px;
	line-height: 37px;
	font-weight: 700;
}
body.single-product .entry-summary p.price,
body.single-product .entry-summary .price,
body.single-product .entry-summary .price .woocommerce-Price-amount {
	color: #1a2330 !important;
	font-weight: 500 !important;
	font-size: 25px !important;
}

/* === Meta-Block (Kategorie + SKU) und Share-Wrapper komplett ausblenden */
body.single-product .entry-summary > .mcb-column-inner > .product_meta,
body.single-product .entry-summary > .mcb-column-inner > .share-simple-wrapper {
	display: none !important;
}

/* === Beschreibung-Tab Styling ======================================
   Headings (H3) prominenter, Body-Text mit Atmung, custom Bullet-Punkte
   in Brand-Blau. Intro-Paragraph (erstes <p>) als „Lead-Text" mit
   dezenter Trennlinie zum Rest. */
body.single-product .tab-description .the_content_wrapper {
	font-size: 16px;
	line-height: 1.65;
	color: #2d3340;
	max-width: 820px;
}
body.single-product .tab-description .the_content_wrapper > p:first-child {
	font-size: 18px;
	line-height: 1.55;
	color: #4a5163;
	margin: 0 0 32px;
	padding: 0 0 24px;
	border-bottom: 1px solid #e6e9ef;
}
body.single-product .tab-description .the_content_wrapper h3 {
	font-size: 20px;
	font-weight: 600;
	color: #1a2330;
	margin: 32px 0 12px;
	line-height: 1.3;
}
body.single-product .tab-description .the_content_wrapper h3:first-child {
	margin-top: 0;
}
body.single-product .tab-description .the_content_wrapper p {
	margin: 0 0 16px;
}
body.single-product .tab-description .the_content_wrapper ul {
	margin: 12px 0 24px;
	padding-left: 0;
	list-style: none;
}
body.single-product .tab-description .the_content_wrapper ul li {
	position: relative;
	padding-left: 26px;
	margin: 0 0 10px;
	line-height: 1.55;
}
body.single-product .tab-description .the_content_wrapper ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0089f7;
}
body.single-product .tab-description .the_content_wrapper ul li::after {
	display: none !important;
}

/* === „Ähnliche Produkte"-Section ====================================
   Card-Layout für die Related-Section auf Single-Product-Pages. BeTheme
   rendert dort die gleichen `.mfn-li-product-row-*` Klassen wie im
   Shop-Loop, daher ähnlich wie shop.css aber spezifisch auf .related. */
body.single-product section.related.products {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid #e6e9ef;
	max-width: none !important;
	width: 100% !important;
}
body.single-product section.related.products > h3 {
	font-size: 24px;
	font-weight: 700;
	color: #1a2330;
	margin: 0 0 32px;
	text-align: center;
}
body.single-product section.related .products_wrapper,
body.single-product section.related .mfn-woo-products {
	width: 100% !important;
	max-width: none !important;
}
body.single-product section.related ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}
body.single-product section.related ul.products li.product {
	background: #fff !important;
	border: 1px solid #e6e9ef !important;
	border-radius: 12px !important;
	padding: 16px !important;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	display: flex !important;
	flex-direction: column !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.single-product section.related ul.products li.product:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}
body.single-product section.related ul.products li.product .image_frame,
body.single-product section.related ul.products li.product .mfn-li-product-row-image {
	background: #f6f7f9 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	margin: 0 0 16px !important;
	aspect-ratio: 1;
}
body.single-product section.related ul.products li.product .mfn-woo-product-title {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #1a2330 !important;
	margin: 0 0 6px !important;
	line-height: 1.3 !important;
}
body.single-product section.related ul.products li.product .mfn-woo-product-title a {
	color: inherit !important;
}
body.single-product section.related ul.products li.product .star-rating {
	margin: 4px 0 8px !important;
}
body.single-product section.related ul.products li.product .tb-feature-pills {
	font-size: 12px !important;
	margin: 0 0 12px !important;
	gap: 6px 10px !important;
}
body.single-product section.related ul.products li.product > div:nth-of-type(2) {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
}
body.single-product section.related ul.products li.product .price,
body.single-product section.related ul.products li.product .price * {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #1a2330 !important;
	margin: 0 !important;
}
body.single-product section.related ul.products li.product .mfn-li-product-row-button {
	margin-top: auto !important;
	padding-top: 8px !important;
}
body.single-product section.related ul.products li.product .button,
body.single-product section.related ul.products li.product .add_to_cart_button,
body.single-product section.related ul.products li.product .product_type_external {
	background: #0089f7 !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 8px 14px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	width: 100%;
	text-align: center;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: none !important;
}