/* ========================================================================== Your Filament — Modern Design Layer ("Dark & Premium") -------------------------------------------------------------------------- Reiner Presentation-Layer. Kein Markup, keine Logik, keine Plugin-Eingriffe. Alles unter .yf-modern gescoped -> Rollback = Layer deaktivieren. Zielort: wp-content/themes/th-shop-mania-child/design/modern.css ========================================================================== */ /* 01 Design-Tokens ========================================================================== */ .yf-modern { /* Marke — ein Gold, nicht drei */ --yf-gold: #e2b007; --yf-gold-deep: #c2960a; --yf-gold-tint: #fdf6e0; --yf-gold-ring: rgba(226, 176, 7, .38); /* Neutralfarben */ --yf-ink: #14161a; --yf-ink-soft: #3d434b; --yf-muted: #5f666f; --yf-faint: #8b929b; --yf-surface: #ffffff; --yf-surface-sunk: #f6f7f8; --yf-surface-warm: #faf9f6; --yf-line: #e6e8ec; --yf-line-strong: #d3d7dd; /* Dunkelflächen — bestehender Header-Ton #141414 bleibt Ankerfarbe */ --yf-dark: #141414; --yf-dark-line: rgba(255, 255, 255, .10); --yf-on-dark: #f2f3f4; --yf-on-dark-muted: #a8adb4; /* Statusfarben — abgestimmt, nicht Systemrot/-grün */ --yf-ok: #1a7f4b; --yf-warn: #b4690e; --yf-danger: #c0392b; /* Radien */ --yf-r-sm: 8px; --yf-r: 12px; --yf-r-lg: 16px; --yf-r-pill: 999px; /* Schatten — geschichtet statt einer harten Kante */ --yf-shadow-sm: 0 1px 2px rgba(20, 22, 26, .05); --yf-shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 4px 12px rgba(20, 22, 26, .06); --yf-shadow-lg: 0 2px 4px rgba(20, 22, 26, .05), 0 12px 28px rgba(20, 22, 26, .12); /* Bewegung */ --yf-ease: cubic-bezier(.2, 0, .2, 1); --yf-fast: 140ms; --yf-slow: 260ms; /* Fließende Typo-Skala */ --yf-fs-xs: .8125rem; --yf-fs-sm: .875rem; --yf-fs-base: 1rem; --yf-fs-md: clamp(1.0625rem, .35vw + 1rem, 1.125rem); --yf-fs-lg: clamp(1.25rem, .60vw + 1.1rem, 1.5rem); --yf-fs-xl: clamp(1.5rem, 1.10vw + 1.2rem, 2rem); --yf-fs-2xl: clamp(1.875rem, 1.80vw + 1.3rem, 2.75rem); --yf-measure: 68ch; } /* 02 Basis-Typografie ========================================================================== Das Theme setzt line-height in px (25px) und letter-spacing .5px auf . Beides skaliert nicht mit der Schriftgröße mit und lässt Fließtext gesperrt und ausgefranst wirken. */ body.yf-modern { font-size: var(--yf-fs-base); line-height: 1.65; letter-spacing: 0; color: var(--yf-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .yf-modern p, .yf-modern li, .yf-modern dd { line-height: 1.65; letter-spacing: 0; } .yf-modern h1, .yf-modern h2, .yf-modern h3, .yf-modern h4, .yf-modern h5, .yf-modern h6 { color: var(--yf-ink); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; margin-top: 0; } .yf-modern h1 { font-size: var(--yf-fs-2xl); letter-spacing: -.025em; } .yf-modern h2 { font-size: var(--yf-fs-xl); letter-spacing: -.020em; } .yf-modern h3 { font-size: var(--yf-fs-lg); } .yf-modern h4 { font-size: var(--yf-fs-md); } .yf-modern h5, .yf-modern h6 { font-size: var(--yf-fs-base); letter-spacing: 0; } /* Elementor bringt ein zweites Schriftsystem mit (Roboto / Roboto Slab aus dem unveränderten Default-Kit). Auf Jost vereinheitlichen. */ .yf-modern .elementor-widget-heading .elementor-heading-title, .yf-modern .elementor-widget-text-editor, .yf-modern .elementor-widget-container, .yf-modern .elementor-button { font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; } .yf-modern .elementor-widget-heading .elementor-heading-title { color: var(--yf-ink); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; } /* Ziffern in Preisen und Mengen tabellarisch ausrichten */ .yf-modern .woocommerce-Price-amount, .yf-modern.woocommerce-Price-amount, .yf-modern .price, .yf-modern .quantity input, .yf-modern .order-total, .yf-modern .cart-subtotal { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* 03 Links, Fokus, Auswahl ========================================================================== #ff3377 (Pink) ist der Stock-Akzent des Themes und steht 34x im Parent-Stylesheet, u.a. als a:hover. Der Customizer überschreibt nur einen Teil der Selektoren — der Rest blitzt gegen das Marken-Gold durch. */ .yf-modern a { color: var(--yf-ink); transition: color var(--yf-fast) var(--yf-ease); } .yf-modern a:hover, .yf-modern a:focus-visible { color: var(--yf-gold-deep); } .yf-modern .entry-content a:not(.button):not(.wp-block-button__link), .yf-modern .front-desc a:not(.button), .yf-modern .term-description a:not(.button) { color: var(--yf-gold-deep); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; } /* Sichtbarer Tastaturfokus — im Bestand nicht vorhanden */ .yf-modern a:focus-visible, .yf-modern button:focus-visible, .yf-modern input:focus-visible, .yf-modern select:focus-visible, .yf-modern textarea:focus-visible, .yf-modern [tabindex]:focus-visible { outline: 3px solid var(--yf-gold-ring); outline-offset: 2px; border-radius: var(--yf-r-sm); } .yf-modern ::selection { background: var(--yf-gold-ring); color: var(--yf-ink); } /* 04 Buttons ========================================================================== Primär = Gold mit dunkler Schrift. Weiß auf #e2b007 liegt bei ~1,9:1 und fällt durch jede Kontrastprüfung; #14161a auf Gold erreicht ~9,5:1. Der Bestand nutzt #333 mit weißer Schrift — lesbar, aber ohne Markenbezug. */ .yf-modern .button, .yf-modern button, .yf-modern input[type="submit"], .yf-modern .woocommerce a.button, .yf-modern.woocommerce a.button, .yf-modern .woocommerce button.button, .yf-modern.woocommerce button.button, .yf-modern .woocommerce input.button, .yf-modern.woocommerce input.button, .yf-modern .elementor-button { font-family: inherit; font-size: var(--yf-fs-sm); font-weight: 600; letter-spacing: .01em; line-height: 1.2; border-radius: var(--yf-r-sm); border: 1px solid transparent; padding: .75em 1.35em; transition: background-color var(--yf-fast) var(--yf-ease), border-color var(--yf-fast) var(--yf-ease), color var(--yf-fast) var(--yf-ease), transform var(--yf-fast) var(--yf-ease), box-shadow var(--yf-fast) var(--yf-ease); } /* Primäraktionen: Warenkorb, Kasse, Bestellung */ .yf-modern .woocommerce a.button.alt, .yf-modern.woocommerce a.button.alt, .yf-modern .woocommerce button.button.alt, .yf-modern.woocommerce button.button.alt, .yf-modern .woocommerce input.button.alt, .yf-modern.woocommerce input.button.alt, .yf-modern .woocommerce .single_add_to_cart_button, .yf-modern.woocommerce .single_add_to_cart_button, .yf-modern .woocommerce a.checkout-button, .yf-modern.woocommerce a.checkout-button, .yf-modern .woocommerce #place_order, .yf-modern.woocommerce #place_order, .yf-modern .add_to_cart_button, .yf-modern .th-shop-mania-load-more button { background: var(--yf-gold); border-color: var(--yf-gold); color: var(--yf-ink); box-shadow: var(--yf-shadow-sm); } .yf-modern .woocommerce a.button.alt:hover, .yf-modern.woocommerce a.button.alt:hover, .yf-modern .woocommerce button.button.alt:hover, .yf-modern.woocommerce button.button.alt:hover, .yf-modern .woocommerce input.button.alt:hover, .yf-modern.woocommerce input.button.alt:hover, .yf-modern .woocommerce .single_add_to_cart_button:hover, .yf-modern.woocommerce .single_add_to_cart_button:hover, .yf-modern .woocommerce a.checkout-button:hover, .yf-modern.woocommerce a.checkout-button:hover, .yf-modern .woocommerce #place_order:hover, .yf-modern.woocommerce #place_order:hover, .yf-modern .add_to_cart_button:hover, .yf-modern .th-shop-mania-load-more button:hover { background: var(--yf-gold-deep); border-color: var(--yf-gold-deep); color: var(--yf-ink); box-shadow: var(--yf-shadow); transform: translateY(-1px); } .yf-modern .woocommerce a.button.alt:active, .yf-modern.woocommerce a.button.alt:active, .yf-modern .woocommerce button.button.alt:active, .yf-modern.woocommerce button.button.alt:active, .yf-modern .woocommerce .single_add_to_cart_button:active, .yf-modern.woocommerce .single_add_to_cart_button:active, .yf-modern .woocommerce #place_order:active, .yf-modern.woocommerce #place_order:active { transform: translateY(0); box-shadow: var(--yf-shadow-sm); } /* Sekundäraktionen: Umriss statt Vollfläche */ .yf-modern .woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.checkout-button), .yf-modern.woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.checkout-button), .yf-modern .woocommerce button.button:not(.alt), .yf-modern.woocommerce button.button:not(.alt), .yf-modern .woocommerce input.button:not(.alt), .yf-modern.woocommerce input.button:not(.alt) { background: var(--yf-surface); border-color: var(--yf-line-strong); color: var(--yf-ink); } .yf-modern .woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.checkout-button):hover, .yf-modern.woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.checkout-button):hover, .yf-modern .woocommerce button.button:not(.alt):hover, .yf-modern.woocommerce button.button:not(.alt):hover, .yf-modern .woocommerce input.button:not(.alt):hover, .yf-modern.woocommerce input.button:not(.alt):hover { background: var(--yf-surface-sunk); border-color: var(--yf-ink); color: var(--yf-ink); } .yf-modern .button:disabled, .yf-modern button:disabled, .yf-modern .button.disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } /* 05 Formulare ========================================================================== */ .yf-modern input[type="text"], .yf-modern input[type="email"], .yf-modern input[type="tel"], .yf-modern input[type="url"], .yf-modern input[type="password"], .yf-modern input[type="search"], .yf-modern input[type="number"], .yf-modern select, .yf-modern textarea, .yf-modern .select2-container .select2-selection--single { font-family: inherit; font-size: var(--yf-fs-base); color: var(--yf-ink); background: var(--yf-surface); border: 1px solid var(--yf-line-strong); border-radius: var(--yf-r-sm); padding: .7em .9em; line-height: 1.4; transition: border-color var(--yf-fast) var(--yf-ease), box-shadow var(--yf-fast) var(--yf-ease); } .yf-modern input[type="text"]:focus, .yf-modern input[type="email"]:focus, .yf-modern input[type="tel"]:focus, .yf-modern input[type="password"]:focus, .yf-modern input[type="search"]:focus, .yf-modern input[type="number"]:focus, .yf-modern select:focus, .yf-modern textarea:focus { border-color: var(--yf-gold); box-shadow: 0 0 0 3px var(--yf-gold-ring); outline: none; } .yf-modern ::placeholder { color: var(--yf-faint); opacity: 1; } .yf-modern label { font-size: var(--yf-fs-sm); font-weight: 500; color: var(--yf-ink-soft); } /* 06 Header ========================================================================== */ .yf-modern .top-header { background: var(--yf-dark); border-bottom: 1px solid var(--yf-dark-line); font-size: var(--yf-fs-xs); } .yf-modern .top-header, .yf-modern .top-header a, .yf-modern .top-header p { color: var(--yf-on-dark-muted); } .yf-modern .top-header a:hover { color: var(--yf-gold); } .yf-modern .main-header { background: var(--yf-surface); border-bottom: 1px solid var(--yf-line); } .yf-modern .desktop-main-header .main-header-bar, .yf-modern .responsive-main-header .main-header-bar { padding-block: 14px; align-items: center; } /* Suchfeld — zentrales Element im Shop, verdient eine klare Kante */ .yf-modern .thaps-search-box input[type="text"], .yf-modern .thaps-search-box input[type="search"], .yf-modern .thaps-search-box .thaps-search-input { border-radius: var(--yf-r-pill); border: 1px solid var(--yf-line-strong); background: var(--yf-surface-sunk); padding-inline: 1.1em; height: 46px; } .yf-modern .thaps-search-box input[type="text"]:focus, .yf-modern .thaps-search-box .thaps-search-input:focus { background: var(--yf-surface); border-color: var(--yf-gold); box-shadow: 0 0 0 3px var(--yf-gold-ring); } .yf-modern .thaps-search-box button, .yf-modern .thaps-search-box .thaps-search-submit { border-radius: var(--yf-r-pill); } /* Konto- / Warenkorb-Icons */ .yf-modern .thunk-icon-market a { color: var(--yf-ink); } .yf-modern .thunk-icon-market a:hover, .yf-modern .thunk-icon-market a:hover .th-icon { color: var(--yf-gold-deep); } .yf-modern .cart-contents .count-item { background: var(--yf-gold); color: var(--yf-ink); font-weight: 700; font-size: 11px; border-radius: var(--yf-r-pill); } /* 07 Navigation ========================================================================== */ .yf-modern .below-header { background: var(--yf-dark); border-bottom: 1px solid var(--yf-dark-line); } .yf-modern .th-shop-mania-menu > li > a { color: var(--yf-on-dark); font-size: var(--yf-fs-sm); font-weight: 500; letter-spacing: .01em; padding: 14px 16px; position: relative; transition: color var(--yf-fast) var(--yf-ease); } .yf-modern .th-shop-mania-menu > li > a:hover, .yf-modern .th-shop-mania-menu > li.current-menu-item > a { color: var(--yf-gold); } /* Aktive Seite bekommt eine Marke statt nur einer Farbe */ .yf-modern .th-shop-mania-menu > li > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px; background: var(--yf-gold); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--yf-slow) var(--yf-ease); } .yf-modern .th-shop-mania-menu > li > a:hover::after, .yf-modern .th-shop-mania-menu > li.current-menu-item > a::after { transform: scaleX(1); } /* Untermenüs als eigenständige Ebene */ .yf-modern .th-shop-mania-menu li ul.sub-menu { background: var(--yf-surface); border: 1px solid var(--yf-line); border-radius: var(--yf-r); box-shadow: var(--yf-shadow-lg); padding: 6px; overflow: hidden; } .yf-modern .th-shop-mania-menu li ul.sub-menu li a { color: var(--yf-ink-soft); font-size: var(--yf-fs-sm); border-radius: var(--yf-r-sm); padding: 9px 12px; } .yf-modern .th-shop-mania-menu li ul.sub-menu li a:hover { background: var(--yf-gold-tint); color: var(--yf-ink); } /* Brotkrumen zurücknehmen — Orientierung, kein Blickfang */ .yf-modern .woocommerce-breadcrumb, .yf-modern.woocommerce-breadcrumb, .yf-modern .thunk-breadcrumb { font-size: var(--yf-fs-sm); color: var(--yf-faint); } .yf-modern .woocommerce-breadcrumb a, .yf-modern.woocommerce-breadcrumb a, .yf-modern .thunk-breadcrumb li a { color: var(--yf-muted); } .yf-modern .woocommerce-breadcrumb a:hover, .yf-modern.woocommerce-breadcrumb a:hover { color: var(--yf-gold-deep); } /* 08 Produktkacheln ========================================================================== Zwei verschiedene Markups im Einsatz: Shop/Kategorie -> li.product > .shop-page-products-layouts (Theme-Layout 6) Startseite -> .eael-product-grid .eael-product-wrap (EAEL-Widget) Beide bekommen dieselbe Kachel — der sichtbarste Bruch im Bestand. */ .yf-modern .woocommerce ul.products, .yf-modern.woocommerce ul.products { gap: 24px; margin: 0; } /* --- gemeinsame Kachel --- */ .yf-modern .woocommerce ul.products li.product .shop-page-products-layouts, .yf-modern.woocommerce ul.products li.product .shop-page-products-layouts, .yf-modern .eael-product-grid .eael-product-wrap { display: flex; flex-direction: column; height: 100%; background: var(--yf-surface); border: 1px solid var(--yf-line); border-radius: var(--yf-r-lg); padding: 14px 14px 16px; overflow: hidden; transition: border-color var(--yf-slow) var(--yf-ease), box-shadow var(--yf-slow) var(--yf-ease), transform var(--yf-slow) var(--yf-ease); } .yf-modern .woocommerce ul.products li.product .shop-page-products-layouts:hover, .yf-modern.woocommerce ul.products li.product .shop-page-products-layouts:hover, .yf-modern .eael-product-grid .eael-product-wrap:hover { border-color: var(--yf-gold); box-shadow: var(--yf-shadow-lg); transform: translateY(-3px); } /* --- Bildfläche: einheitliches Seitenverhältnis --- Der Shop liefert 300x300, die Startseite 232x300. Ohne feste Box entstehen unterschiedlich hohe Kacheln und das Raster franst aus. */ .yf-modern .woocommerce ul.products li.product .thunk-product-image, .yf-modern.woocommerce ul.products li.product .thunk-product-image, .yf-modern .eael-product-grid .eael-product-wrap > a:first-child { display: block; position: relative; aspect-ratio: 1 / 1; background: var(--yf-surface-warm); border-radius: var(--yf-r); overflow: hidden; margin-bottom: 14px; } .yf-modern .woocommerce ul.products li.product .thunk-product-image img, .yf-modern.woocommerce ul.products li.product .thunk-product-image img, .yf-modern .eael-product-grid .eael-product-wrap > a:first-child img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform var(--yf-slow) var(--yf-ease); } .yf-modern .woocommerce ul.products li.product:hover .thunk-product-image img, .yf-modern.woocommerce ul.products li.product:hover .thunk-product-image img, .yf-modern .eael-product-grid .eael-product-wrap:hover > a:first-child img { transform: scale(1.045); } /* --- Titel: zwei Zeilen, damit Preise auf einer Linie sitzen --- */ .yf-modern .woocommerce ul.products li.product .woocommerce-loop-product__title, .yf-modern.woocommerce ul.products li.product .woocommerce-loop-product__title, .yf-modern .eael-product-grid .eael-product-title h2 { font-size: var(--yf-fs-sm); font-weight: 500; line-height: 1.45; letter-spacing: 0; color: var(--yf-ink); margin: 0 0 8px; padding: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.45em * 2); } .yf-modern .woocommerce ul.products li.product a:hover .woocommerce-loop-product__title, .yf-modern.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title, .yf-modern .eael-product-grid .eael-product-title a:hover h2 { color: var(--yf-gold-deep); } /* --- Preis: der eigentliche Anker der Kachel --- */ .yf-modern .woocommerce ul.products li.product .price, .yf-modern.woocommerce ul.products li.product .price, .yf-modern .eael-product-grid .eael-product-price { margin-top: auto; font-size: var(--yf-fs-md); font-weight: 600; color: var(--yf-ink); line-height: 1.3; } .yf-modern .woocommerce ul.products li.product .price del, .yf-modern.woocommerce ul.products li.product .price del { font-size: var(--yf-fs-sm); font-weight: 400; color: var(--yf-faint); margin-right: .4em; } .yf-modern .woocommerce ul.products li.product .price ins, .yf-modern.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--yf-danger); font-weight: 700; } /* German-Market-Pflichtangaben: lesbar, aber untergeordnet. Bleiben ausdrücklich sichtbar — Grundpreis und MwSt.-Hinweis sind rechtlich erforderlich. */ .yf-modern .woocommerce ul.products li.product .wgm-info, .yf-modern.woocommerce ul.products li.product .wgm-info, .yf-modern .woocommerce ul.products li.product .price-per-unit, .yf-modern.woocommerce ul.products li.product .price-per-unit { display: block; font-size: var(--yf-fs-xs); font-weight: 400; color: var(--yf-faint); line-height: 1.45; margin-top: 2px; letter-spacing: 0; } /* --- Warenkorb-Button in der Kachel --- */ .yf-modern .woocommerce ul.products li.product .elemento-product-add-to-cart-button, .yf-modern.woocommerce ul.products li.product .elemento-product-add-to-cart-button { margin-top: 12px; } .yf-modern .woocommerce ul.products li.product .add_to_cart_inline, .yf-modern.woocommerce ul.products li.product .add_to_cart_inline { border: 0; padding: 0; margin: 0; } .yf-modern .woocommerce ul.products li.product .add_to_cart_button, .yf-modern.woocommerce ul.products li.product .add_to_cart_button, .yf-modern .eael-product-grid .eael-product-wrap .add_to_cart_button { display: block; width: 100%; text-align: center; margin: 0; } /* --- Leere Sternebewertung ausblenden --- Das EAEL-Grid rendert bei 0 Bewertungen sichtbar "0 von 5". Das liest sich wie eine schlechte Bewertung statt wie "noch keine Bewertung". */ .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .star-rating:has(span[style*="width:0%"]), .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .star-rating:has(span[style*="width: 0%"]), .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product .star-rating:has(span[style*="width:0%"]), .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product .star-rating:has(span[style*="width: 0%"]), .yf-modern .woocommerce ul.products li.product .star-rating:has(span[style*="width:0%"]), .yf-modern.woocommerce ul.products li.product .star-rating:has(span[style*="width:0%"]) { display: none; } /* Rueckfall fuer Browser ohne :has() — versteckt zumindest die gefuellten Sterne, der Umriss bleibt dort stehen. */ .yf-modern .eael-star-rating span[style*="width:0%"], .yf-modern .eael-star-rating span[style*="width: 0%"] { visibility: hidden; } /* --- Hover-Aktionen (Quickview, Wunschliste) --- */ .yf-modern .th_shop_mania-product-buttons { opacity: 0; transform: translateY(6px); transition: opacity var(--yf-slow) var(--yf-ease), transform var(--yf-slow) var(--yf-ease); } .yf-modern li.product:hover .th_shop_mania-product-buttons { opacity: 1; transform: translateY(0); } /* Auf Touch-Geräten dauerhaft sichtbar — dort gibt es kein Hover */ @media (hover: none) { .yf-modern .th_shop_mania-product-buttons { opacity: 1; transform: none; } } /* 09 Shop-Toolbar & Pagination ========================================================================== */ .yf-modern .th-sort-order-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 24px; background: var(--yf-surface-sunk); border: 1px solid var(--yf-line); border-radius: var(--yf-r); } .yf-modern .woocommerce-result-count, .yf-modern.woocommerce-result-count { margin: 0; font-size: var(--yf-fs-sm); color: var(--yf-muted); } .yf-modern .th-sort-order-wrapper .right { display: flex; align-items: center; gap: 10px; } .yf-modern .th-sort-by-label { font-size: var(--yf-fs-sm); color: var(--yf-muted); white-space: nowrap; } .yf-modern .woocommerce-ordering select, .yf-modern.woocommerce-ordering select { padding: .5em 2.2em .5em .8em; font-size: var(--yf-fs-sm); border-radius: var(--yf-r-sm); background-color: var(--yf-surface); } .yf-modern .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--yf-line); border-radius: var(--yf-r-sm); color: var(--yf-ink); font-size: var(--yf-fs-sm); font-weight: 500; transition: background-color var(--yf-fast) var(--yf-ease), border-color var(--yf-fast) var(--yf-ease); } .yf-modern .nav-links .page-numbers:hover { background: var(--yf-gold-tint); border-color: var(--yf-gold); color: var(--yf-ink); } .yf-modern .nav-links .page-numbers.current { background: var(--yf-gold); border-color: var(--yf-gold); color: var(--yf-ink); font-weight: 700; } /* Filter-Chips */ .yf-modern .wpc-filter-chips-list li, .yf-modern .wpc-chip { border-radius: var(--yf-r-pill); border: 1px solid var(--yf-line-strong); font-size: var(--yf-fs-sm); } /* 10 Einzelprodukt ========================================================================== */ .yf-modern .single-product .thunk-single-product-summary-wrap { gap: 40px; } .yf-modern .single-product .product_title { font-size: var(--yf-fs-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.22; margin-bottom: 12px; } /* Der Preis ist die Kernaussage der Seite. Ersetzt die 24px/31px-Regel aus dem Customizer-CSS. */ .yf-modern.woocommerce #content div.product div.summary .price, .yf-modern .single-product div.summary .price { font-size: var(--yf-fs-xl); font-weight: 700; line-height: 1.25; color: var(--yf-ink); letter-spacing: -.02em; margin-bottom: 6px !important; } .yf-modern .single-product div.summary .price del { font-size: var(--yf-fs-lg); font-weight: 400; color: var(--yf-faint); } .yf-modern .single-product div.summary .price ins { text-decoration: none; color: var(--yf-danger); } .yf-modern .single-product .summary .wgm-info, .yf-modern .single-product .summary .price-per-unit, .yf-modern .single-product .summary .woocommerce-de_price_taxrate { font-size: var(--yf-fs-xs); color: var(--yf-faint); line-height: 1.5; } /* Lagerstatus als Statuszeile statt als roter/grüner Fließtext. Die Farbregeln aus dem Child-Theme nutzen !important — daher hier auch. */ .yf-modern .single-product .stock { display: inline-flex; align-items: center; gap: 7px; font-size: var(--yf-fs-sm); font-weight: 500; padding: 5px 12px; border-radius: var(--yf-r-pill); margin-block: 10px; } .yf-modern .single-product .stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .yf-modern .single-product .stock.in-stock { background: rgba(26, 127, 75, .10); color: var(--yf-ok) !important; } .yf-modern .single-product .stock.out-of-stock { background: rgba(192, 57, 43, .10); color: var(--yf-danger) !important; } .yf-modern .single-product .stock.available-on-backorder { background: rgba(180, 105, 14, .10); color: var(--yf-warn) !important; } /* Variantenauswahl */ .yf-modern .single-product .variations { border-block: 1px solid var(--yf-line); padding-block: 16px; margin-bottom: 18px; } .yf-modern .single-product .variations label { font-weight: 600; color: var(--yf-ink); } .yf-modern .single-product .variations select { min-height: 46px; } /* Menge + Warenkorb als eine zusammenhängende Aktionszeile */ .yf-modern .single-product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .yf-modern .single-product .th-shop-mania-quantity, .yf-modern .single-product .quantity { margin: 0; } .yf-modern .single-product .quantity input.qty { height: 52px; min-width: 72px; text-align: center; font-weight: 600; font-size: var(--yf-fs-base); border-radius: var(--yf-r-sm); } .yf-modern .single-product .single_add_to_cart_button { flex: 1 1 240px; min-height: 52px; font-size: var(--yf-fs-base); font-weight: 600; border-radius: var(--yf-r-sm); } /* Produkt-Metadaten zurücknehmen */ .yf-modern .single-product .product_meta { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--yf-line); font-size: var(--yf-fs-sm); color: var(--yf-muted); } .yf-modern .single-product .product_meta > span { display: block; margin-bottom: 5px; } /* Galerie */ .yf-modern .woo-variation-gallery-wrapper { border: 1px solid var(--yf-line); border-radius: var(--yf-r-lg); overflow: hidden; background: var(--yf-surface-warm); } /* 11 Tabs ========================================================================== */ .yf-modern .woocommerce-tabs ul.tabs, .yf-modern.woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 0 4px; margin: 0 0 28px; border-bottom: 1px solid var(--yf-line); } .yf-modern .woocommerce-tabs ul.tabs::before, .yf-modern.woocommerce-tabs ul.tabs::before, .yf-modern .woocommerce-tabs ul.tabs::after, .yf-modern.woocommerce-tabs ul.tabs::after, .yf-modern .woocommerce-tabs ul.tabs li::before, .yf-modern.woocommerce-tabs ul.tabs li::before, .yf-modern .woocommerce-tabs ul.tabs li::after, .yf-modern.woocommerce-tabs ul.tabs li::after { display: none; } .yf-modern .woocommerce-tabs ul.tabs li, .yf-modern.woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; } .yf-modern .woocommerce-tabs ul.tabs li a, .yf-modern.woocommerce-tabs ul.tabs li a { display: block; padding: 12px 18px; font-size: var(--yf-fs-sm); font-weight: 600; color: var(--yf-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--yf-fast) var(--yf-ease), border-color var(--yf-fast) var(--yf-ease); } .yf-modern .woocommerce-tabs ul.tabs li a:hover, .yf-modern.woocommerce-tabs ul.tabs li a:hover { color: var(--yf-ink); } .yf-modern .woocommerce-tabs ul.tabs li.active a, .yf-modern.woocommerce-tabs ul.tabs li.active a { color: var(--yf-ink) !important; border-bottom-color: var(--yf-gold); } .yf-modern .woocommerce-tabs .panel, .yf-modern.woocommerce-tabs .panel { max-width: var(--yf-measure); } .yf-modern .woocommerce-tabs .panel > h2:first-child, .yf-modern.woocommerce-tabs .panel > h2:first-child { display: none; } /* 12 Redaktionelle Textblöcke ========================================================================== Der SEO-Text auf Start- und Kategorieseiten läuft über die volle Seitenbreite. Bei ~150 Zeichen pro Zeile verliert das Auge den Zeilenanschluss — 60-75 Zeichen sind die brauchbare Spanne. */ .yf-modern .front-desc, .yf-modern .term-description, .yf-modern .pwb-second-description { max-width: var(--yf-measure); margin-inline: auto; color: var(--yf-ink-soft); font-size: var(--yf-fs-md); line-height: 1.7; } .yf-modern .front-desc h2, .yf-modern .term-description h2, .yf-modern .pwb-second-description h2 { margin-top: 2.2em; margin-bottom: .55em; padding-top: .9em; border-top: 1px solid var(--yf-line); font-size: var(--yf-fs-lg); } .yf-modern .front-desc > h2:first-child, .yf-modern .term-description > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .yf-modern .front-desc h3, .yf-modern .term-description h3 { margin-top: 1.7em; margin-bottom: .45em; } .yf-modern .front-desc p, .yf-modern .term-description p, .yf-modern .pwb-second-description p { margin-block: 0 1.1em; } .yf-modern .front-desc ul, .yf-modern .term-description ul, .yf-modern .pwb-second-description ul { margin: 0 0 1.3em; padding-left: 0; list-style: none; } .yf-modern .front-desc ul li, .yf-modern .term-description ul li, .yf-modern .pwb-second-description ul li { position: relative; padding-left: 1.6em; margin-bottom: .55em; } .yf-modern .front-desc ul li::before, .yf-modern .term-description ul li::before, .yf-modern .pwb-second-description ul li::before { content: ""; position: absolute; left: .35em; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--yf-gold); } .yf-modern .front-desc strong, .yf-modern .term-description strong { color: var(--yf-ink); font-weight: 600; } /* 13 Footer ========================================================================== */ .yf-modern .thsm-footer { background: var(--yf-dark); color: var(--yf-on-dark-muted); } .yf-modern .widget-footer { padding-block: 56px 40px; } .yf-modern .widget-footer .widget-title, .yf-modern .widget-footer h2, .yf-modern .widget-footer h3 { color: var(--yf-on-dark); font-size: var(--yf-fs-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; } .yf-modern .widget-footer a, .yf-modern .widget-footer p, .yf-modern .widget-footer li { color: var(--yf-on-dark-muted); font-size: var(--yf-fs-sm); line-height: 1.9; } .yf-modern .widget-footer a:hover { color: var(--yf-gold); } .yf-modern .widget-footer .widget_nav_menu li { display: list-item; list-style: none; } .yf-modern .below-footer { border-top: 1px solid var(--yf-dark-line); padding-block: 18px; font-size: var(--yf-fs-xs); color: var(--yf-on-dark-muted); } .yf-modern .below-footer a:hover { color: var(--yf-gold); } /* 14 Hinweise, Badges ========================================================================== */ .yf-modern .woocommerce-message, .yf-modern.woocommerce-message, .yf-modern .woocommerce-info, .yf-modern.woocommerce-info, .yf-modern .woocommerce-error, .yf-modern.woocommerce-error { display: flex; align-items: center; gap: 12px; border: 1px solid var(--yf-line); border-left: 3px solid var(--yf-gold); border-radius: var(--yf-r); background: var(--yf-surface); box-shadow: var(--yf-shadow-sm); color: var(--yf-ink); font-size: var(--yf-fs-sm); padding: 14px 18px; } .yf-modern .woocommerce-message::before, .yf-modern.woocommerce-message::before, .yf-modern .woocommerce-info::before, .yf-modern.woocommerce-info::before, .yf-modern .woocommerce-error::before, .yf-modern.woocommerce-error::before { position: static; flex: none; } .yf-modern .woocommerce-message, .yf-modern.woocommerce-message { border-left-color: var(--yf-ok); } .yf-modern .woocommerce-error, .yf-modern.woocommerce-error { border-left-color: var(--yf-danger); } /* Sale-Badge — Position links bleibt wie im Bestand */ .yf-modern .woocommerce span.onsale, .yf-modern.woocommerce span.onsale, .yf-modern .woocommerce ul.products li.product .onsale, .yf-modern.woocommerce ul.products li.product .onsale { top: 12px; left: 12px; right: auto; min-height: 0; min-width: 0; padding: 5px 12px; border-radius: var(--yf-r-pill); background: var(--yf-ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; box-shadow: var(--yf-shadow-sm); } /* 15 Warenkorb & Kasse ========================================================================== Bewusst zurückhaltend: nur Flächen und Typografie, keine Strukturänderung. An diesen Seiten hängen German Market, der JTL-Connector und PayPal. */ .yf-modern .woocommerce table.shop_table, .yf-modern.woocommerce table.shop_table { border: 1px solid var(--yf-line); border-radius: var(--yf-r); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: var(--yf-fs-sm); } .yf-modern .woocommerce table.shop_table th, .yf-modern.woocommerce table.shop_table th { background: var(--yf-surface-sunk); color: var(--yf-ink); font-weight: 600; padding: 14px 16px; } .yf-modern .woocommerce table.shop_table td, .yf-modern.woocommerce table.shop_table td { padding: 14px 16px; border-top: 1px solid var(--yf-line); } .yf-modern .woocommerce .cart_totals h2, .yf-modern.woocommerce .cart_totals h2, .yf-modern .woocommerce-checkout h3, .yf-modern.woocommerce-checkout h3 { font-size: var(--yf-fs-lg); margin-bottom: 16px; } .yf-modern .woocommerce-checkout #payment, .yf-modern.woocommerce-checkout #payment { background: var(--yf-surface-sunk); border: 1px solid var(--yf-line); border-radius: var(--yf-r); } .yf-modern .woocommerce-checkout #payment ul.payment_methods, .yf-modern.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--yf-line); } .yf-modern .woocommerce-checkout #payment div.form-row, .yf-modern.woocommerce-checkout #payment div.form-row { padding: 18px; } .yf-modern .woocommerce .order-total .woocommerce-Price-amount, .yf-modern.woocommerce .order-total .woocommerce-Price-amount { font-size: var(--yf-fs-lg); font-weight: 700; color: var(--yf-ink); } /* 16 Motion & Responsive ========================================================================== */ @media (max-width: 1024px) { .yf-modern .woocommerce ul.products, .yf-modern.woocommerce ul.products { gap: 18px; } .yf-modern .th-sort-order-wrapper { padding: 12px 14px; } } @media (max-width: 767px) { .yf-modern .woocommerce ul.products, .yf-modern.woocommerce ul.products { gap: 14px; } .yf-modern .woocommerce ul.products li.product .shop-page-products-layouts, .yf-modern.woocommerce ul.products li.product .shop-page-products-layouts, .yf-modern .eael-product-grid .eael-product-wrap { padding: 10px 10px 12px; border-radius: var(--yf-r); } .yf-modern .single-product form.cart { gap: 10px; } .yf-modern .single-product .single_add_to_cart_button { flex: 1 1 100%; } .yf-modern .th-sort-order-wrapper { flex-direction: column; align-items: stretch; } .yf-modern .th-sort-order-wrapper .right { justify-content: space-between; } .yf-modern .widget-footer { padding-block: 36px 24px; } } /* Systemeinstellung "Bewegung reduzieren" respektieren */ @media (prefers-reduced-motion: reduce) { .yf-modern *, .yf-modern *::before, .yf-modern *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .yf-modern .woocommerce ul.products li.product .shop-page-products-layouts:hover, .yf-modern.woocommerce ul.products li.product .shop-page-products-layouts:hover, .yf-modern .eael-product-grid .eael-product-wrap:hover { transform: none; } } /* 17 Korrektur: EAEL-Raster auf der Startseite ========================================================================== Essential Addons setzt seine Kachel-Regeln mit 7 Klassen + 2 Elementen: .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .button.add_to_cart_button Damit schlägt das Plugin die Selektoren aus Abschnitt 04 und 08. Sichtbar wurde das am Warenkorb-Button: mein width:100% griff, EAELs margin:15px ebenfalls — der Button stand 30px über die Kachel hinaus. Zugleich blieb er grau (#333) und in Großbuchstaben, statt Gold zu übernehmen. Dieser Block liegt bewusst bei 8 Klassen + 2 Elementen, also genau eine Stufe über dem Plugin — kein !important nötig. */ .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .button, .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .button.add_to_cart_button, .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product .button, .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product .button.add_to_cart_button { display: block; width: 100%; box-sizing: border-box; margin: 12px 0 0; padding: 11px 14px; font-family: inherit; font-size: var(--yf-fs-sm); font-weight: 600; line-height: 1.2; letter-spacing: .01em; text-transform: none; text-align: center; color: var(--yf-ink); background-color: var(--yf-gold); border: 1px solid var(--yf-gold); border-radius: var(--yf-r-sm); box-shadow: var(--yf-shadow-sm); } .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .button:hover, .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .button.add_to_cart_button:hover, .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product .button:hover, .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product .button.add_to_cart_button:hover { color: var(--yf-ink); background-color: var(--yf-gold-deep); border-color: var(--yf-gold-deep); box-shadow: var(--yf-shadow); transform: translateY(-1px); } /* "Warenkorb ansehen" nach dem AJAX-Hinzufügen — EAEL setzt hier ebenfalls margin:15px und #333. Als Sekundäraktion zurücknehmen. */ .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product a.added_to_cart, .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product a.added_to_cart { display: block; width: 100%; box-sizing: border-box; margin: 8px 0 0; padding: 9px 14px; font-size: var(--yf-fs-xs); font-weight: 600; line-height: 1.2; text-transform: none; text-align: center; color: var(--yf-ink); background-color: transparent; border: 1px solid var(--yf-line-strong); border-radius: var(--yf-r-sm); } .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product a.added_to_cart:hover, .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product a.added_to_cart:hover { background-color: var(--yf-surface-sunk); border-color: var(--yf-ink); } /* Nachgemessen: Shop- und Startseiten-Raster zentrieren den Kachelinhalt beide. Das ist bereits stimmig — keine Ausrichtungsregel nötig. Das overflow:hidden des Plugins bleibt ebenfalls stehen, sonst tritt das diagonale Sale-Band oben aus der Kachel heraus. */ .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product, .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product { background-color: transparent; } /* Sternebewertung: EAEL erzwingt display:block mit Außenabstand, auch wenn gar keine Bewertung vorliegt. Der leere Block hinterließ eine Lücke. */ /* margin-inline muss auto bleiben — EAEL zentriert die Sternleiste ueber margin:10px auto, sie ist ein Block fester Breite (5.6em). Ein plattes margin:0 0 6px nimmt genau diese Zentrierung weg. */ .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .star-rating, .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product .star-rating { margin: 0 auto 6px; font-size: 13px; } /* 18 Korrektur: Bildfläche der Produktkachel ========================================================================== Sämtliche Produktfotos im Shop sind Freisteller auf Weiß. Gegen den warmen Kachelton (--yf-surface-warm) zeichnete sich dadurch in jeder Kachel ein weißes Rechteck ab. Die Bildfläche deshalb auf Weiß setzen; die warme Fläche bleibt der Galerie auf der Produktseite vorbehalten. */ .yf-modern .woocommerce ul.products li.product .thunk-product-image, .yf-modern.woocommerce ul.products li.product .thunk-product-image, .yf-modern .eael-product-grid .eael-product-wrap > a:first-child { background: #ffffff; } /* 19 Korrektur: th-shop-mania-pro, Shop-Layout 6 ========================================================================== Das Pro-Plugin setzt fuer Layout 6 zwei Regeln, die Abschnitt 08 auch bei korrekter Ladereihenfolge schlagen: .woocommerce ul.products li.product.thunk-woo-product-list .th-shop-mania-shop-page-layout-6 .price -> #A8B324, 700 .woocommerce ul.products li.product .th-shop-mania-shop-page-layout-6 .woocommerce-loop-product__title -> -webkit-line-clamp:initial Das Oliv-Gruen war die vierte Streufarbe im Shop, und das zurueckgesetzte line-clamp hob die zweizeilige Titelbegrenzung wieder auf. */ .yf-modern .woocommerce ul.products li.product.thunk-woo-product-list .th-shop-mania-shop-page-layout-6 .price, .yf-modern.woocommerce ul.products li.product.thunk-woo-product-list .th-shop-mania-shop-page-layout-6 .price { color: var(--yf-ink); font-weight: 600; font-size: var(--yf-fs-md); margin-bottom: 0; } .yf-modern .woocommerce ul.products li.product.thunk-woo-product-list .th-shop-mania-shop-page-layout-6 .price del, .yf-modern.woocommerce ul.products li.product.thunk-woo-product-list .th-shop-mania-shop-page-layout-6 .price del { color: var(--yf-faint); font-weight: 400; } .yf-modern .woocommerce ul.products li.product.thunk-woo-product-list .th-shop-mania-shop-page-layout-6 .price ins, .yf-modern.woocommerce ul.products li.product.thunk-woo-product-list .th-shop-mania-shop-page-layout-6 .price ins { color: var(--yf-danger); font-weight: 700; text-decoration: none; } /* Pflichtangaben erben sonst Gewicht und Groesse des Preises */ .yf-modern .woocommerce ul.products li.product.thunk-woo-product-list .th-shop-mania-shop-page-layout-6 .price .wgm-info, .yf-modern.woocommerce ul.products li.product.thunk-woo-product-list .th-shop-mania-shop-page-layout-6 .price .wgm-info { font-size: var(--yf-fs-xs); font-weight: 400; color: var(--yf-faint); } .yf-modern .woocommerce ul.products li.product .th-shop-mania-shop-page-layout-6 .woocommerce-loop-product__title, .yf-modern.woocommerce ul.products li.product .th-shop-mania-shop-page-layout-6 .woocommerce-loop-product__title { font-size: var(--yf-fs-sm); font-weight: 500; color: var(--yf-ink); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(1.45em * 2); } /* 20a Korrektur: Badge-Ecke am Kachelradius ========================================================================== li.product traegt bereits overflow:hidden vom Plugin, aber eckige Ecken. Derselbe Radius dort laesst das Band am Rundungsverlauf abschneiden. */ .yf-modern .eael-product-grid.eael-product-simple .woocommerce ul.products li.product, .yf-modern .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product { border-radius: var(--yf-r-lg); } /* 20 Korrektur: absolut positionierte Badges an der Kachelecke ========================================================================== Merchant setzt sein "ausverkauft"-Band als span.outofstock-badge absolut. Ohne position auf der Kachel war der Bezugsrahmen li.product, also eine Ebene ueber dem Karton — das Band lief oben links aus der abgerundeten Ecke heraus. Mit position:relative klammert es an die Kachel und wird von deren overflow:hidden sauber am Radius beschnitten. */ .yf-modern .woocommerce ul.products li.product .shop-page-products-layouts, .yf-modern.woocommerce ul.products li.product .shop-page-products-layouts, .yf-modern .eael-product-grid .eael-product-wrap { position: relative; }