/* UI/CRO V4 - Produktseite (PDP v2, /produkt/) - 2026-09-29 Nur geladen, wenn der Bereich "Produktseite" im Admin (/admin/ui_v4.php) aktiv ist (body.ui-v4-pdp, s. index.php + de/head.php). Reine Praesentations-Variante der bestehenden PDP v2: gleiche Daten, gleiche Buybox, gleiches Add-to-Cart. Prefix body.ui-v4-pdp, weil product_v2.php eigene Inline-Styles im hat. Konzept: CHEERCITY_UI_CRO_V4_AB_FLAG_VSCODE_AGENT.md, Abschnitte 10 + 14. */ body.ui-v4-pdp { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --content-pdp: 1440px; } /* ── Breite 1440px (Header, Breadcrumb, Inhalt, Footer) ── */ body.ui-v4-pdp .page-width { width: min(var(--content-pdp), calc(100% - 48px)); } body.ui-v4-pdp.nh-home-active .container { width: min(var(--content-pdp), calc(100% - 48px)) !important; max-width: min(var(--content-pdp), calc(100% - 48px)) !important; } /* Innenabstaende wie PDP v2 (20px), nur unten mehr Luft */ body.ui-v4-pdp .pdp-v2-page { padding-bottom: 48px; } /* ── Galerie + Buybox ── */ body.ui-v4-pdp .pdp-v2-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; } body.ui-v4-pdp .pdp-v2-gallery { top: 16px; } body.ui-v4-pdp .pdp-v2-gallery .product-detail-img img { border: 0; border-radius: var(--radius-lg); } body.ui-v4-pdp .pdp-v2-buybox { border: 0; border-radius: var(--radius-lg); box-shadow: 0 12px 36px rgba(6, 38, 64, .09); padding: 32px; } body.ui-v4-pdp .pdp-v2-buybox h1 { font-size: 36px; line-height: 1.05; margin-bottom: 8px; } body.ui-v4-pdp .pdp-v2-rating-inline { margin-bottom: 10px; } body.ui-v4-pdp button.btn-cart { border-radius: var(--radius-sm); } body.ui-v4-pdp .orderbox select.selectpicker, body.ui-v4-pdp #matrix-table td input.matrix-menge { border-radius: var(--radius-sm); } body.ui-v4-pdp .pdp-v2-anfrage-banner, body.ui-v4-pdp .pdp-v2-preorder-banner { border-radius: var(--radius-sm); } /* ── Benefits (admin/benefits.php) staerker gewichten: 2 Spalten, groessere Icons ── */ body.ui-v4-pdp .product-benefits-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 18px; padding: 18px 20px; border: 0; border-radius: var(--radius-md); background: #f1f5f8; } body.ui-v4-pdp .product-benefits-box li { font-size: 13px; font-weight: 600; gap: 10px; } body.ui-v4-pdp .product-benefits-box svg { font-size: 22px; } /* ── Abschnitte: Details, FAQ, Bewertungen, "Das passt dazu" als Karten ── */ body.ui-v4-pdp .pdp-v2-section { margin-top: 28px; } body.ui-v4-pdp .pdp-v2-description, body.ui-v4-pdp .pdp-v2-faq, body.ui-v4-pdp .pdp-v2-ratings { margin-left: 0; margin-right: 0; padding: 32px; border-radius: var(--radius-lg); } body.ui-v4-pdp .pdp-v2-description { background: #fff; box-shadow: 0 0 0 1px var(--line) inset; } /* Karten volle Breite, lange Texte in Lesebreite */ body.ui-v4-pdp .pdp-v2-description > *, body.ui-v4-pdp .pdp-v2-faq-item { max-width: 1000px; } body.ui-v4-pdp .pdp-v2-similar-grid { gap: 16px; } body.ui-v4-pdp .product-card-v2 { border-radius: var(--radius-md); overflow: hidden; } /* ── Sticky "In den Warenkorb" (de/_pdp_v4_sticky.php) ── */ .v4-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #fff; box-shadow: 0 -6px 24px rgba(6, 38, 64, .14); transform: translateY(110%); transition: transform .25s ease; } .v4-sticky-cta.is-visible { transform: none; } .v4-sticky-inner { display: flex; align-items: center; gap: 16px; padding: 10px 0; } .v4-sticky-info { flex: 1; min-width: 0; } .v4-sticky-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v4-sticky-price { margin: 3px 0 0; font: 700 20px/1 "Barlow Condensed", Arial, sans-serif; color: var(--navy); } .v4-sticky-btn { flex: 0 0 auto; min-height: 50px; padding: 0 30px; border: 0; border-radius: var(--radius-sm); background: var(--pink, #ed0b87); color: #fff; font: 700 19px/1 "Barlow Condensed", Arial, sans-serif; text-transform: uppercase; letter-spacing: .02em; } .v4-sticky-btn:hover:not([disabled]) { background: var(--pink-dark, #c90070); } .v4-sticky-btn.is-select { background: var(--navy); } .v4-sticky-btn[disabled] { opacity: .7; } body.v4-sticky-on { padding-bottom: 72px; } /* Chat-Bubble (Chatwoot) ueber die Leiste schieben */ body.v4-sticky-on .woot-widget-bubble { bottom: 86px !important; } /* Schwebender Warenkorb-Button ebenfalls ueber die Leiste */ body.v4-sticky-on #floating-cart-btn { bottom: 86px !important; } /* ── Tablet/Mobil ── */ @media (max-width: 900px) { body.ui-v4-pdp .pdp-v2-wrap { grid-template-columns: 1fr; gap: 20px; } body.ui-v4-pdp .pdp-v2-buybox { padding: 22px; } } @media (max-width: 680px) { body.ui-v4-pdp .page-width { width: min(100% - 24px, var(--content-pdp)); } body.ui-v4-pdp.nh-home-active .container { width: min(100% - 24px, var(--content-pdp)) !important; max-width: min(100% - 24px, var(--content-pdp)) !important; } body.ui-v4-pdp .pdp-v2-buybox { padding: 18px; box-shadow: 0 6px 20px rgba(6, 38, 64, .08); } body.ui-v4-pdp .pdp-v2-buybox h1 { font-size: 28px; } body.ui-v4-pdp .product-benefits-box { grid-template-columns: 1fr; } body.ui-v4-pdp .pdp-v2-description, body.ui-v4-pdp .pdp-v2-faq, body.ui-v4-pdp .pdp-v2-ratings { padding: 20px 16px; border-radius: var(--radius-md); } .v4-sticky-name { font-size: 13px; } .v4-sticky-price { font-size: 18px; } .v4-sticky-btn { padding: 0 18px; font-size: 16px; min-height: 46px; } }