/* CR-3D Single Product Redesign: Warenkorb-Button, PayPal-Buttons, Varianten-Select, Galerie, Sterne, Produkt-Nav */ /* Farb-Auswahl responsive: ab 1000px die WPC-Linked-Variation-Bildkacheln (Desktop), darunter die eigenen kompakten Farb-Punkte (Mobil) - siehe functions.php: cr3d_mobile_color_swatches(). Beide DOM-Elemente sind immer vorhanden, nur die Sichtbarkeit wechselt per Breakpoint (kein JS/Resize-Handling noetig). */ .cr3d-color-swatches-mobile { display: none; } /* "Farbe:" Label passend zur bestehenden "VARIANTEN"-Ueberschrift (table.variations .label: 12px, uppercase) - gilt sowohl fuer das WPC-Linked-Variation-eigene Label ueber den Bild-Kacheln (Desktop) als auch fuer unser eigenes Mobil-Label. */ .wpclv-attribute-label, .cr3d-color-select-label { font-size: 12px; text-transform: uppercase; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; } /* Abstand NACH der Farbauswahl raus - WPC Linked Variation setzt hier von sich aus einen grosszuegigen unteren Aussenabstand am ganzen Wrapper. */ .wpclv-attributes { margin-bottom: 0 !important; } @media (max-width: 999.98px) { .wpclv-attributes { display: none !important; } .cr3d-color-swatches-mobile { display: block !important; margin: 4px 0 14px; } .cr3d-color-swatches-mobile .cr3d-color-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307737a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center / 16px; border: 1.5px solid #d7dbdf; border-radius: 8px; padding: 8px 42px 8px 14px; font-size: 15px; color: #1a1a1a; width: 100%; max-width: 320px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .cr3d-color-swatches-mobile .cr3d-color-select:hover { border-color: #a7acb1; } .cr3d-color-swatches-mobile .cr3d-color-select:focus { outline: none; border-color: #07737a; box-shadow: 0 0 0 3px rgba(7, 115, 122, 0.15); } } /* Nicht kaufbare Produkte (c-serie/i-serie/fieldrack/P65X+/Druckerzubehoer): Preis, Grundpreis, Warenkorb-Formular (Varianten/Stueckzahl), PayPal-Buttons komplett weg - nur noch der "Jetzt Angebot anfordern"-Button sichtbar. */ .single-product-summary .cr3d-purchase-area { display: none !important; } .single-product-summary .cr3d-quote-button { margin-top: 0 !important; } /* Grundpreis (Germanized .price-unit): komplett weg bevor eine Variante gewählt ist - Germanized zeigt sonst eine Von-Bis-Spanne über alle Varianten an, die ohne gewählte Variante wenig aussagekräftig ist. Sobald eine Variante gewählt ist, hängt Germanized selbst die Klasse "variation_modified" an - das ist der zuverlässige Hook zum Einblenden. p.price und p.price-unit bleiben eigenstaendige Geschwister-Elemente (siehe Kommentar in functions.php: cr3d_combined_price_and_unit() - Germanized ersetzt bei jeder Variantenwahl den KOMPLETTEN Inhalt von p.price, ein verschachteltes Kind wuerde dabei jedes Mal geloescht). Beide stecken in einem gemeinsamen Flex-Wrapper (.cr3d-price-row), der sie nebeneinander auf einer Zeile darstellt, unten ausgerichtet. */ .single-product-summary .price-unit { display: none !important; } .cr3d-price-row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; } .cr3d-price-row p.price { margin-bottom: 0 !important; } .cr3d-price-row .price-unit.variation_modified { display: inline-block !important; font-size: 14px !important; font-weight: 600 !important; color: #07737a !important; margin: 0 !important; padding-left: 16px; border-left: 1px solid #d7dbdf; } /* Beim Basispreis reicht der aktuelle Wert - der durchgestrichene Ursprungspreis (inkl. "Neuer Preis:"-Label) ist hier redundant, der Streichpreis wird bereits beim Hauptpreis davor gezeigt. */ .cr3d-price-row .price-unit del, .cr3d-price-row .price-unit .screen-reader-text { display: none !important; } .cr3d-price-row .price-unit ins { text-decoration: none; } /* Sterne-Bewertung direkt unter den Produkttitel: wird jetzt per PHP-Hook- Prioritaet (Prio 6, siehe functions.php) tatsaechlich zuerst gerendert - hier nur noch der Abstand zum nachfolgenden Preis. */ .product_title.entry-title { margin-bottom: 2px !important; } .single-product-summary .woocommerce-product-rating { margin-bottom: 10px; } .single-product-summary .legal-price-info { margin-top: 2px !important; } /* Varianten-Beschreibung (z.B. "Produktion auf Bestellung - verzögerte Lieferung möglich."): dezente Teal-Box statt unauffälligem Fließtext, damit der Hinweis auffällt, ohne wie eine Fehlermeldung zu wirken. */ .woocommerce div.product form.cart .woocommerce-variation-description p, .woocommerce-variation-description p { display: inline-block; background: rgba(7, 115, 122, 0.08); border: 1px solid rgba(7, 115, 122, 0.25); color: #07737a; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 6px; margin: 10px 0 14px !important; } /* Glasfaser-Hinweis (FibCR20 etc.): Icon links + Links zu den passenden gehärteten Düsen unten in der Box. */ .woocommerce-variation-description .cr3d-glasfaser-hint { display: flex; align-items: flex-start; gap: 10px; background: rgba(7, 115, 122, 0.08); border: 1px solid rgba(7, 115, 122, 0.25); border-radius: 8px; padding: 12px 16px; margin: 10px 0 13px; } .woocommerce div.product form.cart .woocommerce-variation-description .cr3d-glasfaser-hint p, .woocommerce-variation-description .cr3d-glasfaser-hint p { display: block; background: none; border: none; padding: 0; margin: 0 !important; } .cr3d-glasfaser-hint .cr3d-hint-icon { flex: none; color: #07737a; margin-top: 2px; } .cr3d-glasfaser-hint .cr3d-glasfaser-hint-body { color: #07737a; font-size: 13px; font-weight: 600; line-height: 1.5; } .cr3d-glasfaser-hint .cr3d-glasfaser-hint-body p { margin: 0; } .cr3d-glasfaser-hint-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-weight: 500; } .cr3d-glasfaser-hint-links a { color: #07737a; text-decoration: underline; font-size: 12px; } .cr3d-glasfaser-hint-links a:hover { color: #05545a; } /* Rueckstand-Hinweis ("Produktion auf Bestellung..."): nur eine Zeile, kein Link-Block darunter - daher kompakt/inline statt volle Breite, Icon und Text mittig ausgerichtet statt oben. */ .woocommerce-variation-description .cr3d-backorder-hint { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 8px 16px; } .cr3d-backorder-hint .cr3d-hint-icon { margin-top: 0; } .cr3d-backorder-hint .cr3d-glasfaser-hint-body { line-height: 1.3; } /* Warenkorb-Button + Stückzahl */ .woocommerce-variation-add-to-cart.variations_button { display: flex; align-items: stretch; gap: 25px; flex-wrap: wrap; } .woocommerce-variation-add-to-cart.variations_button .quantity { display: flex; align-items: stretch; } .woocommerce-variation-add-to-cart.variations_button .quantity input.qty { height: 100%; box-sizing: border-box; min-height: 54px; } .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button { min-height: 54px; box-sizing: border-box; display: flex; align-items: center; padding-left: 28px; padding-right: 28px; font-size: 15px; } /* PayPal / Apple Pay / Google Pay Buttons: kleiner als der Warenkorb-Button, zentriert darunter */ .ppc-button-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 14px auto 0; width: 220px; max-width: 100%; } /* WICHTIG: kein "transform:scale()" verwenden, um die Buttons zu verkleinern - das PayPal-SDK misst per ResizeObserver die ECHTE Breite seines Containers und rendert den Button-Iframe intern in genau dieser Groesse; ein CSS-Transform auf den Wrapper aendert diese interne Messung nicht mit, sondern fuehrt nur zu abgeschnittenen/ "reingezoomten" Buttons (per Test im Browser bestaetigt: nach Entfernen von transform:scale + der festen 220px-Breite rendern die Buttons wieder korrekt in voller Groesse). Verkleinerung MUSS also ueber eine echte, kleinere Container-Breite erfolgen, nicht ueber ein optisches Scale. */ .ppc-button-wrapper > #ppc-button-ppcp-gateway { width: 100%; } .ppc-button-wrapper > .ppcp-button-apm { width: 100%; } /* "Später Bezahlen" wird über den offiziellen Plugin-Filter-Hook unterdrückt (siehe functions.php: woocommerce_paypal_payments_product_buttons_paylater_disabled) - der Button rendert in einem Cross-Origin-iframe von paypal.com, den CSS/JS von unserer Seite aus grundsätzlich nicht erreichen kann. */ /* Varianten-Select: verfügbare Optionen dunkel/klar, ausverkaufte hell/grau. Gilt fuer JEDE Variantenauswahl (Attributname egal, z.B. Gewicht, Material, Nozzle Diameter...), nicht nur fuer ein einzelnes fest verdrahtetes #id. */ table.variations select option { color: #1a1a1a; } table.variations select option:disabled { color: #c3c3c3; } /* Cross-Link zwischen normaler und "Magic"-Farblinie (siehe functions.php: cr3d_magic_family_crosslink), direkt unter den WPC-Linked-Variation-Swatches. */ .cr3d-magic-crosslink { margin: 2px 0 14px; } .cr3d-magic-crosslink a { font-size: 13px; font-weight: 600; color: #07737a; text-decoration: none; } .cr3d-magic-crosslink a:hover { text-decoration: underline; } /* Varianten-Select modernisiert: bisher der nackte Browser-Standard-Dropdown (0px border-radius, kein Innenabstand -> Text klebte links an der Kante, grauer 1px-Standardrahmen) - jetzt eigener Rahmen/Radius/Innenabstand, eigener Chevron statt des System-Pfeils, Fokus-/Hover-Zustand in Teal. */ table.variations td.value { padding-left: 4px !important; } table.variations select { color: #1a1a1a; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307737a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center / 16px; border: 1.5px solid #d7dbdf !important; border-radius: 8px !important; padding: 8px 42px 8px 14px !important; height: auto !important; font-size: 15px; min-width: 220px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } table.variations select:hover { border-color: #a7acb1 !important; } table.variations select:focus { outline: none; border-color: #07737a !important; box-shadow: 0 0 0 3px rgba(7, 115, 122, 0.15); } table.variations tr .reset_variations { margin-left: 12px; font-size: 13px; color: #6b7280; text-decoration: underline; } table.variations tr .reset_variations:hover { color: #07737a; } /* Sterne-Bewertung in Shop-Teal */ .star-rating span:before { color: #07737a; } /* Artikel-weiterschalten Pfeile oben rechts ausblenden */ .single-product .product-nav { display: none !important; } /* Galerie: Hauptbild + Thumbnail-Reihe in einer gemeinsamen Spalte mit fester Breite, damit beide garantiert exakt gleich breit sind - unabhängig von Flex/Owl-Eigenheiten weiter unten in der Kette. */ .woocommerce-product-gallery { display: flex !important; flex-direction: column !important; gap: 12px; width: 560px !important; max-width: 100% !important; } /* Festes 1:1-Seitenverhältnis für das Hauptbild, damit die Seite bei Produkt- bzw. Bildwechsel (Hoch-/Querformat/quadratisch gemischt) nicht in der Höhe springt. */ .woocommerce-product-gallery .woocommerce-product-gallery__image, .woocommerce-product-gallery .woocommerce-main-image { width: 560px !important; max-width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; } .woocommerce-product-gallery .woocommerce-main-image img { width: 100% !important; height: 100% !important; max-width: 100% !important; /* contain, kein Zuschnitt - die eigentliche Lupen-Mismatch-Behebung passiert in JS (Zoom-Zielbild wird dort auf ein weiß aufgefülltes Quadrat gerendert, siehe single-product-redesign.js: cr3dSquarePadImage). */ object-fit: contain !important; background: #fff; } #image-additional-carousel { width: 560px !important; max-width: 100% !important; } /* Bootstrap-Carousel-Pfeile ums Hauptbild (separat von den Owl-Thumbnails unten) - brauchen wir nicht, da der Bildwechsel über die Thumbnails läuft. */ .woocommerce-product-gallery .carousel-controls, .woocommerce-product-gallery a.carousel-control, .woocommerce-product-gallery a.left.carousel-control, .woocommerce-product-gallery a.right.carousel-control { display: none !important; } #image-additional-carousel .owl-nav, #image-additional-carousel .owl-controls, #image-additional-carousel .owl-controls .owl-nav, #image-additional-carousel .owl-buttons, #image-additional-carousel .owl-pagination, #image-additional-carousel .owl-prev, #image-additional-carousel .owl-next { display: none !important; } /* Owl-Theme-Default setzt hier margin-left:-15px (für "peek"-Effekt am Rand) - deshalb standen die Thumbnails 15px zu weit links versetzt zum Hauptbild. */ #image-additional-carousel .image-additional { margin-left: 0 !important; } /* WICHTIG: das ist Owl-Carousel 1.x (alte Klassennamen .owl-wrapper/.owl-wrapper-outer, NICHT .owl-stage/.owl-stage-outer wie in Owl 2.x). Das Plugin setzt hier per Inline-Style eine feste Pixelbreite auf .owl-wrapper (Track) und .owl-item (einzelnes Item), berechnet aus der Item-Anzahl - das hat die Thumbnails vorher auf ~30px zusammengequetscht. Alle Ebenen müssen freigegeben werden, damit .hitem als Flex-Grid volle Breite bekommt. */ #image-additional-carousel .owl-carousel, #image-additional-carousel .owl-wrapper-outer, #image-additional-carousel .owl-wrapper, #image-additional-carousel .owl-item { width: 100% !important; height: auto !important; max-width: none !important; overflow: visible !important; transform: none !important; left: 0 !important; margin: 0 !important; padding: 0 !important; } /* Bei mehr als ~5 Bildern splittet das Plugin die Thumbnails in MEHRERE .hitem-Gruppen auf (je eine "Slide"), nicht eine einzige. Das Grid muss daher auf .owl-wrapper (dem gemeinsamen Elternelement aller .hitem-Gruppen) sitzen; .hitem selbst wird per display:contents aufgelöst, damit alle Thumbnails - gruppenübergreifend - in EIN gemeinsames Grid einsortiert werden und erst danach zeilenweise umbrechen. */ #image-additional-carousel .owl-wrapper { display: grid !important; grid-template-columns: repeat(auto-fill, 65px) !important; justify-content: start !important; gap: 14px 10px !important; width: 100% !important; box-sizing: border-box !important; } /* .owl-item ist der Slide-Wrapper (1 pro .hitem-Gruppe) und muss ebenfalls aufgelöst werden - sonst landen dessen Kinder (die .hitem-Gruppe) als EIN Grid-Item, und die -Tags darin fallen mangels Flex/Grid-Kontext auf ihr Standard-display:inline zurück (Breite/Höhe greifen dann nicht -> riesige Stapelung nach Bildgröße). */ #image-additional-carousel .owl-item, #image-additional-carousel .hitem { display: contents !important; } #image-additional-carousel .hitem a.imagezoom { display: block !important; box-sizing: border-box !important; width: 65px !important; height: 65px !important; margin: 0 !important; } #image-additional-carousel .hitem a.imagezoom img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 4px; border: 1px solid #e0e0e0; cursor: pointer; } /* Produktdetails-Akkordeon: unauffällig, nur Text in Teal, eingeklappt startend */ .cr3d-details-accordion { margin-top: 32px; } .cr3d-details-toggle { background: none; border: none; cursor: pointer; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: #07737a; padding: 0; display: inline-flex; align-items: center; gap: 5px; } .cr3d-details-toggle .cr3d-details-arrow { transition: transform .15s ease; font-size: 10px; } .cr3d-details-toggle.is-open .cr3d-details-arrow { transform: rotate(180deg); } /* Sofort per CSS ausblenden (nicht erst via JS-Klasse) - sonst blitzt beim Laden kurz die unformatierte Original-Ansicht auf, bevor das JS die Klassen setzt. jQuery slideToggle() beim Klick überschreibt das per Inline-Style beim Öffnen. */ .single-product-summary .product_meta { display: none; padding-top: 8px; } /* Gleicher Card-Look wie table.shop_attributes im "Weitere Informationen"-Tab: Teal-Label links, Werte rechts, Kategorien/Schlagwörter als Pills statt Fließtext-Links. */ .single-product-summary .product_meta.cr3d-accordion-body { border: 1px solid #e3e3e3; border-radius: 8px; overflow: hidden; } .single-product-summary .product_meta .cr3d-meta-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 14px 20px; border-bottom: 1px solid #e3e3e3; } .single-product-summary .product_meta .cr3d-meta-row:last-child { border-bottom: none; } .single-product-summary .product_meta .cr3d-meta-row:nth-child(even) { background: #f7f8f9; } .single-product-summary .product_meta .cr3d-meta-label { flex: none; width: 160px; color: #07737a; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; font-family: 'Montserrat', sans-serif; } .single-product-summary .product_meta .cr3d-meta-value { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #333; font-family: 'Montserrat', sans-serif; } .single-product-summary .product_meta .cr3d-meta-pill { display: inline-block; background: rgba(7, 115, 122, 0.1); color: #07737a !important; font-size: 12px; font-weight: 600; text-decoration: none !important; padding: 5px 12px; border-radius: 14px; transition: background-color .15s ease; } .single-product-summary .product_meta .cr3d-meta-pill:hover { background: rgba(7, 115, 122, 0.2); } @media (max-width: 480px) { .single-product-summary .product_meta .cr3d-meta-row { flex-direction: column; gap: 8px; } .single-product-summary .product_meta .cr3d-meta-label { width: auto; } } /* Social Share: unauffälliger Icon-Button ganz oben rechts der Produktinfo-Box, öffnet die Original-Icon-Reihe unter dem Titel */ .cr3d-share-toggle { position: absolute; top: 0; right: 0; background: none; border: none; color: #b0b0b0; font-size: 16px; cursor: pointer; padding: 4px; line-height: 1; z-index: 5; } .cr3d-share-toggle:hover { color: #07737a; } .single-product-summary .product-topinfo { padding-right: 36px; } /* Sofort per CSS ausblenden, aus demselben Grund wie beim Akkordeon oben. Liegt NICHT in .single-product-summary, sondern in .product-info (eigene Spalte neben der Galerie) - falscher Vorfahren-Selektor war der Grund für 1s+ Flackern. */ .single-product-summary .opal-social-share, .product-info .opal-social-share { display: none; margin: 4px 0 16px; } .single-product-summary .opal-social-share .bo-social-icons, .product-info .opal-social-share .bo-social-icons { display: flex; gap: 8px; } /* Produkt-Tabs (Beschreibung/Weitere Informationen/Bewertungen/Datenblätter) in Shop-CI: flache Underline-Tabs statt der alten Kasten-/Border-Optik, aktiver Tab in Teal. */ .woocommerce-tabs.wc-tabs-wrapper { margin-top: 40px; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; border-bottom: 2px solid #e3e3e3 !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs:before, .woocommerce-tabs.wc-tabs-wrapper ul.tabs:after, .woocommerce-tabs.wc-tabs-wrapper ul.tabs li:before, .woocommerce-tabs.wc-tabs-wrapper ul.tabs li:after { display: none !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li { margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a { display: inline-block !important; padding: 14px 18px !important; margin-bottom: -2px !important; color: #555 !important; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; text-transform: uppercase !important; letter-spacing: .03em !important; text-decoration: none !important; border-bottom: 3px solid transparent !important; border-radius: 6px 6px 0 0 !important; transition: color .15s ease, border-color .15s ease, background-color .15s ease !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a:hover { color: #07737a !important; background: rgba(7, 115, 122, 0.06) !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.active a { color: #07737a !important; background: rgba(7, 115, 122, 0.1) !important; border-bottom-color: #07737a !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a, .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a:active, .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a:focus { outline: none !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a:focus-visible { outline: 2px solid #07737a !important; outline-offset: 2px; } .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel { padding: 28px 0 0 !important; color: #333 !important; line-height: 1.7 !important; font-size: 15px !important; font-family: 'Montserrat', sans-serif !important; } .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel h2, .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel h3 { font-family: 'Montserrat', sans-serif !important; font-size: 19px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 0 14px !important; } .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes { border: 1px solid #e3e3e3; border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; max-width: 720px; } .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes tr { border-bottom: 1px solid #e3e3e3; } .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes tr:last-child { border-bottom: none; } .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes tr:nth-child(even) { background: #f7f8f9; } .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes th, .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes td { padding: 14px 20px; border: none; background: none; font-size: 14px; font-family: 'Montserrat', sans-serif !important; } .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes th { color: #07737a; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; width: 240px; border-right: 1px solid #e3e3e3; } .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes td { color: #333; font-weight: 500; } .woocommerce-tabs.wc-tabs-wrapper td.cr3d-attr-value-pills p { display: flex; flex-wrap: wrap; gap: 8px; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-attr-pill { display: inline-block; background: rgba(7, 115, 122, 0.1); color: #07737a; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 14px; } @media (max-width: 640px) { .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes, .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes tbody, .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes tr, .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes th, .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes td { display: block; width: auto !important; } .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes th { border-right: none; border-bottom: none; padding-bottom: 4px; } .woocommerce-tabs.wc-tabs-wrapper table.shop_attributes td { padding-top: 0; } } /* "Besondere Eigenschaften": dominante Icon-Badges vor den gruppierten Kennwerte-Tabellen im "Weitere Informationen"-Tab (siehe woocommerce/single-product/product-attributes.php). Nur Eigenschaften, die tatsächlich zutreffen (Template filtert "Nein"-Werte bereits raus). */ .woocommerce-tabs.wc-tabs-wrapper .cr3d-product-features { margin: 0 0 30px; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-product-features__heading { font-family: 'Montserrat', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; color: #6b7280 !important; margin: 0 0 12px !important; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-product-features__grid { display: flex; flex-wrap: wrap; gap: 12px; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-feature-badge { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 12px; min-width: 190px; background: rgba(7, 115, 122, .1); border: 1.5px solid rgba(7, 115, 122, .3); } .woocommerce-tabs.wc-tabs-wrapper .cr3d-feature-badge__icon { flex: 0 0 auto; color: #07737a; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-feature-badge__text { display: flex; flex-direction: column; line-height: 1.3; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-feature-badge__label { font-family: 'Montserrat', sans-serif !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #07737a; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-feature-badge__value { font-family: 'Montserrat', sans-serif !important; font-size: 15px; font-weight: 700; color: #1a1a1a; } @media (max-width: 640px) { .woocommerce-tabs.wc-tabs-wrapper .cr3d-feature-badge { flex: 1 1 calc(50% - 12px); min-width: 0; } } /* Themenblöcke ("Drucker"/"Trocknung"/"Materialeigenschaften"/"Sonstiges") - eingeklappte Akkordeons per natives
/, kein JS nötig. Beginnen ohne "open"-Attribut im Template, also standardmäßig zu. */ .woocommerce-tabs.wc-tabs-wrapper .cr3d-attr-group { margin: 0 0 12px; border: 1px solid #e3e3e3; border-radius: 8px; overflow: hidden; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-attr-group:last-child { margin-bottom: 0; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-attr-group__heading { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; padding: 14px 20px; background: #f7f8f9; font-family: 'Montserrat', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; color: #1a1a1a !important; user-select: none; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-attr-group__heading::-webkit-details-marker { display: none; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-attr-group__heading::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #07737a; border-bottom: 2px solid #07737a; transform: rotate(45deg); transition: transform .15s ease; flex: 0 0 auto; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-attr-group[open] .cr3d-attr-group__heading::after { transform: rotate(225deg); } .woocommerce-tabs.wc-tabs-wrapper .cr3d-attr-group table.shop_attributes { border: none; border-radius: 0; border-top: 1px solid #e3e3e3; max-width: none; } /* Ja/Nein-Checkbox-Paar (ersetzt "... erforderlich"-Fließtext bei Gehärtete Düse/Bauraum). */ .woocommerce-tabs.wc-tabs-wrapper .cr3d-checkbox-pair { display: flex; gap: 18px; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #9aa1a6; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-checkbox__box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #c7ccd1; position: relative; flex: 0 0 auto; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-checkbox--checked { color: #07737a; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-checkbox--checked .cr3d-checkbox__box { background: #07737a; border-color: #07737a; } .woocommerce-tabs.wc-tabs-wrapper .cr3d-checkbox--checked .cr3d-checkbox__box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(40deg); } @media (max-width: 640px) { .woocommerce-tabs.wc-tabs-wrapper ul.tabs { gap: 14px; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a { font-size: 12px; padding: 10px 2px; } } /* Unter 850px: Tabs werden zu Accordions. WC-Core-JS toggelt weiterhin die .active-Klasse am li und blendet das zugehörige Panel per inline display ein/aus - hier wird das nur optisch als Akkordeon-Header/-Panel umgestylt und jedes Panel per grid-order direkt unter seinen eigenen Header gelegt. */ @media (max-width: 850px) { .woocommerce-tabs.wc-tabs-wrapper { display: grid !important; grid-template-columns: 1fr; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs { display: contents !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li { display: block !important; width: 100% !important; border-bottom: 1px solid #e3e3e3 !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a { display: flex !important; align-items: center; justify-content: space-between; width: 100%; padding: 16px 4px !important; margin-bottom: 0 !important; border-bottom: none !important; border-radius: 0 !important; font-size: 14px !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a:hover { background: none !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.active a { background: none !important; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a:after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-left: 12px; border-right: 2px solid #07737a; border-bottom: 2px solid #07737a; transform: rotate(45deg); transition: transform .2s ease; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.active a:after { transform: rotate(-135deg); } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li, .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel { order: 99; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.description_tab { order: 1; } .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel--description { order: 2; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.additional_information_tab { order: 3; } .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel--additional_information { order: 4; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.wcpoa_product_tab_tab { order: 5; } .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel--wcpoa_product_tab { order: 6; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.product_safety_tab { order: 7; } .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel--product_safety { order: 8; } .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.reviews_tab { order: 9; } .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel--reviews { order: 10; } .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel { padding: 16px 2px 22px !important; } } /* Bewertungen-Tab (single-product-reviews.php) in Shop-CI: Montserrat, Teal-Akzent, vereinfachte/lesbare Sterne-Verteilungs-Balken statt der alten gestreiften Bootstrap-Bars. */ #reviews.widget-reviews { font-family: 'Montserrat', sans-serif; } #reviews.widget-reviews h3, #reviews.widget-reviews h5 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #1a1a1a; text-transform: none; } #reviews.widget-reviews h3 { font-size: 20px; margin-bottom: 20px; } #reviews.widget-reviews h5 { font-size: 14px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 14px; } /* Überschrift eine Ebene über den 3 Spalten, statt in der Summary-Spalte selbst */ .cr3d-reviews-heading { margin-bottom: 32px !important; } /* Grid: Summary 18% / Balken 40% / CTA 35% - bewusst fr statt % als Einheit: bei %-Spalten würde der gap (32px) ZUSÄTZLICH zur Prozentbreite addiert und die Summe über 100% treiben (Overflow, v.a. spürbar bei der CTA-Box rechts). fr-Einheiten verteilen die nach Abzug der Gaps verbleibende Breite proportional - kein Overflow. */ .cr3d-reviews-grid { display: grid; grid-template-columns: 18fr 35fr 47fr; gap: 32px; align-items: center; min-width: 0; } .cr3d-reviews-grid > * { min-width: 0; } .cr3d-reviews-col-summary { display: flex; justify-content: center; } .reviews-summary .review-summary-result { width: 104px; height: 104px; border-radius: 50%; border: 4px solid #07737a; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; } .reviews-summary .review-summary-result strong { font-size: 36px; font-weight: 700; color: #07737a; } .reviews-summary .review-summary-total { text-align: center; width: 100%; color: #777; font-size: 15px; } /* Bewerten-CTA: kompakte Infobox statt frei stehendem Text+Button */ .cr3d-reviews-cta-box { box-sizing: border-box; width: 100%; background: #f7f9f9; border: 1px solid #e3e3e3; border-radius: 10px; padding: 20px; } .cr3d-reviews-cta-box h5 { margin-bottom: 8px !important; } .cr3d-reviews-cta-box .woocommerce-verification-required { font-size: 13px; color: #666; margin-bottom: 16px; } .cr3d-reviews-cta-box .btn.btn-primary { width: 100%; text-align: center; } @media (max-width: 640px) { .cr3d-reviews-grid { grid-template-columns: 1fr; } .cr3d-reviews-col-summary { justify-content: flex-start; } } .cr3d-review-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .cr3d-review-bar-label { width: 58px; flex-shrink: 0; font-size: 13px; color: #555; white-space: nowrap; } .cr3d-review-bar-track { flex: 1; height: 6px; border-radius: 3px; background: #eee; overflow: hidden; } .cr3d-review-bar-fill { height: 100%; background: #07737a; border-radius: 3px; } .cr3d-review-bar-count { width: 22px; flex-shrink: 0; text-align: right; font-size: 13px; color: #999; } .reviews-summary .btn.btn-primary { display: inline-block; background: #07737a; border: none; color: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; padding: 12px 24px; border-radius: 24px; text-decoration: none; transition: background-color .15s ease; } .reviews-summary .btn.btn-primary:hover { background: #055a5f; color: #fff; } /* Einzelbewertungen als Boxen. WICHTIG: das Theme hat ein EIGENES Override für woocommerce/single-product/review.php (opal-avata/opal-author-Klassen), nicht die WooCommerce-Standardklassen (.woocommerce-review__author etc.) - deshalb griffen alle vorherigen Versuche mit den Standardklassen nie. Das Template wurde direkt angepasst: Name+Avatar liegen jetzt als .cr3d-review-byline INNERHALB von .comment-text/.media-body, siehe review.php. */ #comments.comments ul.commentlist { list-style: none !important; margin: 0 !important; padding: 0 !important; } #comments.comments ul.commentlist li.review { list-style: none !important; background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; padding: 24px; margin-bottom: 16px; } #comments.comments ul.commentlist li.review:last-child { margin-bottom: 0; } #comments.comments .comment_container { display: block !important; float: none !important; } #comments.comments .comment-text { display: block !important; width: 100% !important; margin: 0 !important; float: none !important; } /* Name+Avatar: eine Zeile, rechtsbündig, Avatar ganz oben rechts, Name vertikal mittig zum Avatar mit kleinem Gap dazwischen. */ #comments.comments .cr3d-review-byline { display: flex !important; float: none !important; width: 100% !important; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 12px; } #comments.comments .cr3d-review-author { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: #1a1a1a; white-space: nowrap; } #comments.comments .cr3d-review-byline img.avatar, #comments.comments .cr3d-review-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; } #comments.comments .comment-text p.meta { font-size: 11px; color: #999; margin: 0 0 10px !important; } #comments.comments .comment-text p.meta em.verified { display: inline-block; font-style: normal; font-size: 11px; font-weight: 600; color: #2e7d32; background: #eaf5ec; padding: 2px 8px; border-radius: 10px; margin-right: 6px; } #comments.comments .star-rating { margin: 0 0 10px !important; } #comments.comments .star-rating span:before { color: #07737a; } #comments.comments .comment-text .description { font-size: 14px; line-height: 1.6; color: #333; } #comments.comments .comment-text .description p { margin: 0; } /* Bewertungsformular ("Bewertung hinzufügen") in Shop-CI */ #review_form_wrapper { margin-top: 32px; padding-top: 28px; border-top: 1px solid #e3e3e3; } #review_form #reply-title.comment-reply-title { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; color: #1a1a1a; display: block; margin-bottom: 20px; } #review_form .comment-form p.form-group, #review_form .comment-form p.comment-notes, #review_form .comment-form p.comment-form-cookies-consent { margin-bottom: 18px; } #review_form .comment-form label.control-label { display: block; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: #555; margin-bottom: 8px; } /* Stern-Auswahl: nur die klickbare Sterne-Leiste zeigen, das Fallback-