/**
* WK Product Page Styles — v2.2 (custom gallery + breadcrumb)
*
* Strategy: additive overrides against real YOOtheme/WooCommerce markup only.
* - 2-column buy-box layout comes from YOOtheme Row — NO grid on div.product.
* - Native Flexslider gallery is replaced by .wk-gallery (built by product-page.js).
* The __wrapper and .flex-control-thumbs are hidden via CSS; the outer
* .woocommerce-product-gallery gets no border/overflow so it acts as a neutral shell.
* - Only own Shortcode classes (.wk-*) get full control.
*
* Design tokens: accent #E5762A, CTA #E5762A, WCAG AA on #fff.
*
* @package WK_YOOtheme_Child
* @version 2.4.0
*/
/* ==========================================================================
Design Tokens
========================================================================== */
:root {
--wk-accent: #E5762A;
--wk-cta: #E5762A; /* WCAG AA with #fff */
--wk-cta-hover: #D0661F;
--wk-accent-soft: #FCEFE4;
--wk-ink: #15181c;
--wk-ink-2: #3a424c;
--wk-muted: #5b6470;
--wk-surface: #F2F3F3;
--wk-line: #e3e8ec;
--wk-field-line: #7b8593; /* PPOM-Feldrand: 3,74:1 gegen #fff, 3,47:1 gegen --wk-surface (Soll ≥3:1) */
--wk-field-line-hover: var(--wk-ink-2); /* Hover-Rand, referenziert bestehenden Ton statt neuem Hex */
--wk-green: #1f9d57;
--wk-green-soft: #e8f6ee;
--wk-gold: #f5a623;
--wk-sale: #d92d20;
--wk-radius: 12px;
--wk-radius-sm: 10px;
--wk-shadow: 0 1px 2px rgba(21,24,28,.04), 0 8px 24px rgba(21,24,28,.06);
}
/* ==========================================================================
Gallery outer shell — neutral, no border/overflow (custom slider takes over)
The outer .woocommerce-product-gallery is now just a positioning anchor.
Native __wrapper and .flex-control-thumbs are hidden; .wk-gallery owns visuals.
========================================================================== */
/* Sticky positioning — transferred to the outer shell, applies to .wk-gallery inside */
.woocommerce div.product .woocommerce-product-gallery {
position: sticky;
top: 84px;
align-self: start;
/* No border, no overflow — the custom .wk-gallery handles those */
border: none;
border-radius: 0;
overflow: visible;
/* Reset inline opacity set by WooCommerce (cleared by JS too, belt-and-suspenders) */
opacity: 1 !important;
transition: none !important;
}
@media (max-width: 959px) {
.woocommerce div.product .woocommerce-product-gallery {
position: static;
}
}
/* Hide the native stacked gallery — both the wrapper with all images and the thumb list */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
display: none !important;
}
.woocommerce div.product .flex-control-nav,
.woocommerce div.product .flex-control-thumbs {
display: none !important;
}
/* Also hide any Flexslider chrome that might still render */
.woocommerce div.product .flex-viewport,
.woocommerce div.product .flexslider {
border: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* ==========================================================================
Custom Gallery (.wk-gallery) — built by buildCustomGallery() in product-page.js
Structure: .wk-gallery > .wk-gallery-stage + .wk-gallery-thumbs
========================================================================== */
.wk-gallery {
width: 100%;
}
/* Stage: main image with border only here (not on outer shell, not on thumbs) */
.wk-gallery-stage {
position: relative; /* anchor for .wk-gal-badges absolute positioning */
background: #fff;
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius);
overflow: hidden;
aspect-ratio: 4 / 5;
display: flex;
align-items: center;
justify-content: center;
padding: 5%;
}
.wk-gallery-main-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
/* Opacity transition for thumb-click swap (reduced-motion guarded in JS) */
transition: opacity .22s ease;
}
/* Thumb strip — horizontal, no border (border is only on stage above) */
.wk-gallery-thumbs {
display: flex;
gap: 8px;
flex-wrap: nowrap;
overflow-x: auto;
margin-top: 10px;
padding-bottom: 4px; /* space for scrollbar on some browsers */
/* Hide scrollbar visually while keeping it functional */
scrollbar-width: thin;
scrollbar-color: var(--wk-line) transparent;
scroll-snap-type: x proximity;
scroll-padding-left: 0;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.wk-gallery-thumb { scroll-snap-align: start; }
/* Let vertical page-scroll work while we capture horizontal swipes on the stage */
.wk-gallery-stage { touch-action: pan-y; }
.wk-gallery-thumbs::-webkit-scrollbar {
height: 4px;
}
.wk-gallery-thumbs::-webkit-scrollbar-track {
background: transparent;
}
.wk-gallery-thumbs::-webkit-scrollbar-thumb {
background: var(--wk-line);
border-radius: 2px;
}
/* Individual thumb button */
.wk-gallery-thumb {
flex: 0 0 auto;
width: 60px;
height: 60px;
background: var(--wk-surface);
border: 2px solid var(--wk-line);
border-radius: var(--wk-radius-sm);
overflow: hidden;
cursor: pointer;
padding: 0;
transition: border-color .15s ease;
display: flex;
align-items: center;
justify-content: center;
}
.wk-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8%;
display: block;
pointer-events: none; /* click handled by button */
}
.wk-gallery-thumb:hover,
.wk-gallery-thumb-active {
border-color: var(--wk-accent);
}
@media (max-width: 959px) {
.wk-gallery-stage {
aspect-ratio: 1 / 1;
}
.wk-gallery-thumb {
width: 52px;
height: 52px;
}
}
@media (prefers-reduced-motion: reduce) {
.wk-gallery-main-img {
transition: none;
}
.wk-gallery-thumb {
transition: none;
}
}
/* ==========================================================================
Gallery Badge Container (injected by product-page.js via wkProductData)
JS appends .wk-gal-badges inside .wk-gallery-stage (position:relative).
Badges overlay the main image in the top-left corner.
========================================================================== */
.wk-gal-badges {
position: absolute;
top: 14px;
left: 14px;
display: flex;
flex-direction: column;
gap: 7px;
z-index: 10; /* above Flexslider slides */
pointer-events: none; /* badges are decorative, not clickable */
}
.wk-gal-badge {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 999px;
line-height: 1.3;
pointer-events: none;
}
.wk-gal-badge-bestseller {
background: var(--wk-ink);
color: #fff;
}
.wk-gal-badge-stock {
background: var(--wk-green-soft);
color: #15683c;
}
/* Sale badge — same pill shape; brand blue (change to var(--wk-sale) for red if desired) */
.wk-gal-badge-sale {
background: var(--wk-accent); /* #E5762A — auf var(--wk-sale) (rot) umstellbar falls gewünscht */
color: #fff;
}
/* Belt-and-braces: hide the YOOtheme default .onsale badge ONLY in the main product
gallery so it never flashes at its original absolute position before JS runs.
The up-sells / related .onsale badges (styled ~Z.1778) are NOT affected. */
.woocommerce div.product .woocommerce-product-gallery .onsale {
display: none !important;
}
/* ==========================================================================
Category Eyebrow (injected by product-page.js above .tm-element-woo-title)
========================================================================== */
.wk-cat-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--wk-accent);
display: block;
margin-bottom: 6px;
}
/* ==========================================================================
Product Title
========================================================================== */
.woocommerce div.product .product_title.entry-title {
font-size: 30px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -.02em;
margin: 8px 0 12px;
color: var(--wk-ink);
}
@media (max-width: 959px) {
.woocommerce div.product .product_title.entry-title {
font-size: 24px;
}
}
/* ==========================================================================
Rating Row — WooCommerce native (.woocommerce-product-rating)
========================================================================== */
.woocommerce-product-rating {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.woocommerce-product-rating .star-rating {
font-size: 17px;
color: var(--wk-gold);
}
.woocommerce-product-rating .woocommerce-review-link {
color: var(--wk-muted);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ==========================================================================
Rating Row — Custom injected row (Fix 2)
Injected by product-page.js directly under .tm-element-woo-title.
Structure: .wk-rating-row > .wk-stars + .wk-rr-score + .wk-rr-count + .wk-rr-sep + .wk-rr-sku
========================================================================== */
.wk-rating-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin: 4px 0 14px;
font-size: 13.5px;
line-height: 1;
}
/* Stars use the shared .wk-stars class (--p: N%) — already in the CSS below */
.wk-rating-row .wk-stars {
font-size: 15px;
flex-shrink: 0;
}
/* Numeric score, e.g. "4,7" */
.wk-rr-score {
font-size: 13.5px;
font-weight: 700;
color: var(--wk-ink);
}
/* "N Bewertungen" link */
.wk-rr-count {
font-size: 13px;
color: var(--wk-muted);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: var(--wk-line);
}
.wk-rr-count:hover {
color: var(--wk-accent);
text-decoration-color: var(--wk-accent);
}
/* Separator dot between review count and SKU */
.wk-rr-sep {
color: var(--wk-line);
font-size: 13px;
user-select: none;
}
/* Art.-Nr. display */
.wk-rr-sku {
font-size: 12.5px;
color: var(--wk-muted);
font-weight: 500;
}
/* ==========================================================================
Fix 3 — Hide SKU in .product_meta (now shown in .wk-rating-row above title)
Kategorien + Marke remain visible in the meta block.
========================================================================== */
.woocommerce div.product .product_meta .sku_wrapper {
display: none !important;
}
/* ==========================================================================
Short Description (USP list with green checkmarks in buy box)
The text content already contains literal "✓" characters. We replace the
default paragraph layout with a styled list-like treatment via CSS only.
No DOM rewrite — content/SEO untouched.
Real staging markup (Untitled-1.html, line 4501):
✓ verschiedene Farben passend auf Brembo-Anlagen reduziert Armpump
Strategy: hide the literal "✓" via font-size 0 on the parent,
and inject a real SVG checkmark via ::before on each containing the ✓ lines — base typography */
.woocommerce-product-details__short-description p {
margin: 0;
font-size: 15px;
font-weight: 500;
color: var(--wk-ink-2);
line-height: 1.5;
}
/* After JS processes the paragraph, it gets class .wk-usp-list */
.woocommerce-product-details__short-description p.wk-usp-list {
display: flex;
flex-direction: column;
gap: 7px;
}
/* Each USP line injected by product-page.js */
.wk-usp-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 500;
color: var(--wk-ink-2);
}
/* The SVG checkmark icon */
.wk-usp-check {
width: 18px;
height: 18px;
color: var(--wk-green);
flex-shrink: 0;
}
/* Text next to the checkmark */
.wk-usp-text {
line-height: 1.4;
}
/* ==========================================================================
Price Block
========================================================================== */
/* Main price box — card now wraps price amount + tax/shipping info (German Market) */
.woocommerce div.product .legacy-itemprop-offers {
background: var(--wk-surface);
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius);
padding: 16px 20px;
margin-bottom: 20px;
}
/* Robust price card — applied via JS (.wk-price-card) so the grey box renders
whether or not German Market's .legacy-itemprop-offers wrapper exists in the
YOOtheme builder output. Class-based (no .woocommerce ancestor dependency). */
.wk-price-card {
position: relative; /* anchor for .wk-sale-pill absolute positioning */
background: var(--wk-surface);
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius);
padding: 16px 20px;
margin-bottom: 20px;
}
.wk-price-card p.price,
.wk-price-card span.price {
background: transparent;
border: 0;
padding: 0;
margin: 0;
display: block;
}
.wk-price-card p.price .woocommerce-Price-amount.amount {
font-size: 32px;
font-weight: 900;
letter-spacing: -.02em;
color: var(--wk-ink);
}
.wk-price-card .wgm-info {
display: inline;
font-size: 13px;
color: var(--wk-muted);
line-height: 1.4;
margin: 0;
}
.wk-price-card .wgm-info.woocommerce-de_price_taxrate {
display: inline-block;
margin-top: 10px;
}
.wk-price-card .wgm-info.woocommerce_de_versandkosten::before {
content: "·";
margin: 0 6px;
color: var(--wk-line);
}
/* On variable products German Market's JS does, on found_variation:
jQuery('.legacy-itemprop-offers').hide(); + shows #german-market-variation-price.
That hid OUR price card ("appears then disappears"). Our own engine keeps the
static price box updated, so force the card visible (beats GM's inline
display:none) and suppress GM's unstyled duplicate. */
.wk-price-card {
display: block !important;
}
#german-market-variation-price {
display: none !important;
}
/* ==========================================================================
Clean-load skeleton — CLS-free reserved space + shimmer
-------------------------------------------------------------------------
MECHANISM:
body.wk-pp-init — server-side class, present from first paint.
body.wk-pp-ready — swapped in by markReady() (double-rAF) after all JS
builds are complete.
SPACE RESERVATION (prevents layout shift):
1. Gallery shell (.woocommerce-product-gallery) gets aspect-ratio:4/5 so
it occupies exactly the same height before and after .wk-gallery builds.
No height jump when the custom slider appears.
2. Summary column (.tm-element-woo-title + siblings via their common
parent) gets a min-height so injected elements (eyebrow, rating row,
swatches, price card) do not push the trust strip / reviews section
downward. Variable products need more height (swatches add ~60px extra).
SHIMMER:
::before pseudo-elements on the gallery shell and the summary area overlay
a shimmer animation while wk-pp-init is active. They sit on TOP of the
real content (which is already rendered but hidden via opacity:0 on
form.cart / .wk-price-card). Shimmer uses a hardware-accelerated
background-position translate instead of translateX so it composes on the
GPU without triggering layout.
LCP GUARD:
The native gallery images are NOT hidden — the LCP image (first
.woocommerce-product-gallery__image img) is hidden via display:none via
.woocommerce-product-gallery__wrapper but the __wrapper hide rule was
already present. The shimmer overlay covers it visually until .wk-gallery
is built, at which point wk-pp-ready fades the real gallery in.
Failsafe animation reveals EVERYTHING after 2.5s even if JS never runs.
REDUCED MOTION:
Shimmer animation is gated inside a prefers-reduced-motion media query.
The fade-in transitions are also suppressed; content appears instantly.
NO NEW DOM NODES — pure CSS pseudo-elements on existing containers.
========================================================================== */
/* --- Keyframes ------------------------------------------------------------ */
@keyframes wkPPReveal { to { opacity: 1; } }
@keyframes wkSkimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* --- Gallery: reserve aspect-ratio so height = final .wk-gallery-stage ---- */
/*
The outer .woocommerce-product-gallery acts as the gallery shell.
During wk-pp-init we give it the SAME aspect-ratio as .wk-gallery-stage
(4/5 desktop, 1/1 mobile). When buildCustomGallery() inserts .wk-gallery
the shell's size does not change → zero layout shift.
We also set overflow:hidden so the shimmer ::before is clipped to the shell.
*/
body.wk-pp-init .woocommerce-product-gallery {
aspect-ratio: 4 / 5;
overflow: hidden;
position: relative; /* shimmer pseudo needs this */
}
@media (max-width: 959px) {
body.wk-pp-init .woocommerce-product-gallery {
aspect-ratio: 1 / 1;
}
}
/* Shimmer overlay on the gallery (covers the native hidden wrapper) */
body.wk-pp-init .woocommerce-product-gallery::before {
content: "";
position: absolute;
inset: 0;
z-index: 5; /* above native gallery content, below any future custom layer */
border-radius: var(--wk-radius);
background: linear-gradient(
90deg,
#e8ecef 0%,
#F2F3F3 40%,
#e8ecef 80%
);
background-size: 200% 100%;
animation: wkSkimmer 1.6s ease-in-out infinite;
pointer-events: none;
}
/* --- Buy-box summary column: reserve height so injections don't push down -- */
/*
.tm-element-woo-title is the YOOtheme wrapper that holds eyebrow + h1 + rating
row + price card + form.cart. A min-height prevents the trust strip below
from jumping when these elements are injected by JS.
520px is realistic: h1 (~80px) + rating row (~40px) + price card (~80px) +
swatches block (~80px) + add-to-cart button (~60px) + USP list (~80px) +
meta row (~40px) = ~460px; we add ~60px buffer for variable products.
overflow:hidden clips the ::before shimmer to this box so it cannot bleed
downward into the trust strip / reviews section.
*/
body.wk-pp-init .tm-element-woo-title {
min-height: 520px;
position: relative; /* shimmer pseudo anchor */
overflow: hidden; /* clip shimmer to this box */
}
/* Shimmer covers the FULL area below the title h1.
top:160px clears the h1 + rating row; bottom:0 stretches to the reserved
min-height floor, so there is no white gap between shimmer and container
bottom. The shimmer therefore fills the entire "below-title" zone as one
coherent placeholder — no partial band, no exposed white space. */
body.wk-pp-init .tm-element-woo-title::before {
content: "";
position: absolute;
top: 160px; /* approx bottom of h1 + rating row */
left: 0;
right: 0;
bottom: 0; /* stretch to container floor instead of fixed height */
z-index: 2;
border-radius: var(--wk-radius);
background: linear-gradient(
90deg,
#e8ecef 0%,
#F2F3F3 40%,
#e8ecef 80%
);
background-size: 200% 100%;
animation: wkSkimmer 1.6s ease-in-out infinite;
pointer-events: none;
}
/* --- Buy-box content: hide ALL native content below the title -------------- */
/*
During wk-pp-init the shimmer ::before covers the zone below the h1.
All real content in that zone must be opacity:0 so nothing shows through
the shimmer (price text, USP checkmarks, category chips, fitment card).
We hide:
- form.cart — add-to-cart form (select, quantity, button)
- .wk-price-card — injected price/discount box
- .woocommerce-product-details__short-description — USP list
- .tm-element-woo-meta / .product_meta — category + brand meta
- .wk-mf-fitment — moto-finder fitment card
opacity:0 keeps layout contribution (no height collapse) and is GPU-friendly.
z-index:3 ensures content paints ABOVE the shimmer (z-index:2) after reveal
so the crossfade transition looks clean.
Failsafe: wkPPReveal animates opacity to 1 after 2.5s if JS never fires.
*/
body.wk-pp-init form.cart,
body.wk-pp-init .wk-price-card,
body.wk-pp-init .woocommerce-product-details__short-description,
body.wk-pp-init .tm-element-woo-meta,
body.wk-pp-init .product_meta,
body.wk-pp-init .wk-mf-fitment {
opacity: 0;
position: relative;
z-index: 3;
animation: wkPPReveal 0s linear 2.5s forwards;
}
/* Failsafe also removes the gallery shimmer and buy-box shimmer after 2.5s. */
@keyframes wkShimmerHide { to { opacity: 0; pointer-events: none; } }
body.wk-pp-init .woocommerce-product-gallery::before,
body.wk-pp-init .tm-element-woo-title::before {
animation:
wkSkimmer 1.6s ease-in-out infinite,
wkShimmerHide 0s linear 2.5s forwards;
}
/* --- Ready state: remove all skeleton chrome, fade in real content --------- */
body.wk-pp-ready .woocommerce-product-gallery {
aspect-ratio: unset; /* .wk-gallery-stage's own aspect-ratio takes over */
overflow: visible;
}
body.wk-pp-ready .woocommerce-product-gallery::before,
body.wk-pp-ready .tm-element-woo-title::before {
/* Crossfade the shimmer OUT so it blends smoothly with content fading in. */
animation: none;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}
body.wk-pp-ready .tm-element-woo-title {
min-height: 0;
overflow: visible; /* restore so dropdowns / tooltips are not clipped */
}
/* Reveal ALL previously hidden buy-box content on ready. */
body.wk-pp-ready form.cart,
body.wk-pp-ready .wk-price-card,
body.wk-pp-ready .woocommerce-product-details__short-description,
body.wk-pp-ready .tm-element-woo-meta,
body.wk-pp-ready .product_meta,
body.wk-pp-ready .wk-mf-fitment {
opacity: 1 !important;
animation: none;
transition: opacity .3s ease;
}
/* --- Reduced motion: no shimmer, no fade, instant reveal ------------------- */
@media (prefers-reduced-motion: reduce) {
body.wk-pp-init .woocommerce-product-gallery::before,
body.wk-pp-init .tm-element-woo-title::before {
animation: none;
}
body.wk-pp-init form.cart,
body.wk-pp-init .wk-price-card,
body.wk-pp-init .woocommerce-product-details__short-description,
body.wk-pp-init .tm-element-woo-meta,
body.wk-pp-init .product_meta,
body.wk-pp-init .wk-mf-fitment {
animation: none;
opacity: 1; /* reveal instantly — reduced-motion users skip skeleton */
}
body.wk-pp-ready form.cart,
body.wk-pp-ready .wk-price-card,
body.wk-pp-ready .woocommerce-product-details__short-description,
body.wk-pp-ready .tm-element-woo-meta,
body.wk-pp-ready .product_meta,
body.wk-pp-ready .wk-mf-fitment {
transition: none;
}
}
/* Price line itself sits inside the box — no own card treatment */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
background: transparent;
border: none;
padding: 0;
margin: 0;
display: block;
}
/* Large price amount (simple product / ins inside sale price) */
.woocommerce div.product p.price .woocommerce-Price-amount.amount,
.woocommerce div.product span.price .woocommerce-Price-amount.amount {
font-size: 32px;
font-weight: 900;
letter-spacing: -.02em;
color: var(--wk-ink);
}
/* -----------------------------------------------------------------------
Sale price layout: del (old, struck-through) + ins (new, blue) inline.
Higher specificity than the generic .amount rule above so del wins.
----------------------------------------------------------------------- */
/* del element itself — explicit line-through so the strike is always visible */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.wk-price-card del {
text-decoration: line-through;
opacity: .9;
}
/* Amount INSIDE del — must beat the 32px generic rule (specificity + .amount) */
.woocommerce div.product p.price del .woocommerce-Price-amount.amount,
.woocommerce div.product span.price del .woocommerce-Price-amount.amount,
.wk-price-card del .woocommerce-Price-amount.amount {
font-size: 17px;
font-weight: 500;
color: var(--wk-muted);
text-decoration: inherit; /* carry the line-through from the del parent */
letter-spacing: 0;
}
/* ins wrapper — sale / new price in brand blue */
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
.wk-price-card ins {
text-decoration: none;
color: var(--wk-accent); /* #E5762A */
}
/* Amount INSIDE ins — large blue price */
.woocommerce div.product p.price ins .woocommerce-Price-amount.amount,
.woocommerce div.product span.price ins .woocommerce-Price-amount.amount,
.wk-price-card ins .woocommerce-Price-amount.amount {
font-size: 32px;
font-weight: 900;
letter-spacing: -.02em;
color: var(--wk-accent); /* #E5762A — overrides the generic ink rule */
text-decoration: none;
}
/* del + ins on one line, baseline-aligned, comfortable gap.
[MAJOR #3] Primary rule uses .wk-has-sale class (set by injectSalePill() in JS)
so it works on all browsers including old Firefox/Safari without :has() support.
The :has() variant below is kept as a progressive enhancement but is NOT the
sole mechanism — .wk-has-sale is the reliable path. */
.woocommerce div.product p.price.wk-has-sale,
.woocommerce div.product span.price.wk-has-sale,
.wk-price-card p.price.wk-has-sale,
.wk-price-card span.price.wk-has-sale {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
/* Progressive enhancement: :has() for browsers that support it */
.woocommerce div.product p.price:has(del):has(ins),
.woocommerce div.product span.price:has(del):has(ins),
.wk-price-card p.price:has(del):has(ins),
.wk-price-card span.price:has(del):has(ins) {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
/* Discount percentage pill — injected by injectSalePill() in product-page.js.
Positioned absolute in the top-right corner of .wk-price-card (which has
position:relative) so the pill does not add a block row or increase card height.
Pill stays right-aligned; price (del/ins) sits left — no visual overlap. */
.wk-sale-pill {
position: absolute;
top: 14px;
right: 16px;
z-index: 2;
margin: 0; /* replaces previous margin-bottom that created an extra block row */
display: inline-block;
background: var(--wk-accent);
color: #fff;
font-size: 12px;
font-weight: 800;
padding: 3px 9px;
border-radius: 999px;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1.3;
}
/* Variation price inherits the same card treatment */
.woocommerce div.product .woocommerce-variation-price .price {
background: var(--wk-surface);
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius);
padding: 16px 20px;
display: block;
margin-bottom: 20px;
}
/* German Market info — "Inkl. MwSt." + "zzgl. Versand" on ONE line under price */
.woocommerce div.product .legacy-itemprop-offers .wgm-info {
display: inline;
font-size: 13px;
color: var(--wk-muted);
line-height: 1.4;
margin: 0;
}
.woocommerce div.product .legacy-itemprop-offers .wgm-info.woocommerce-de_price_taxrate {
display: inline-block;
margin-top: 10px; /* gap below the price amount */
}
.woocommerce div.product .legacy-itemprop-offers .wgm-info.woocommerce_de_versandkosten::before {
content: "·";
margin: 0 6px;
color: var(--wk-line);
}
/* Fallback for any other wgm-info outside the price box */
.woocommerce div.product .wgm-info {
font-size: 13px;
color: var(--wk-muted);
line-height: 1.4;
}
/* "zzgl. Versand" link */
.woocommerce div.product .wgm-info.woocommerce_de_versandkosten a.versandkosten {
color: var(--wk-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Hide "delivery time not specified" — must stay hidden */
.delivery-time-nicht-angegeben,
.wgm-info.shipping_de.shipping_de_string.delivery-time-nicht-angegeben,
.wgm-gtin {
display: none !important;
}
/* ==========================================================================
Hide GPSR manufacturer blocks (from original layout JSON)
========================================================================== */
.german-market-gpsr-content.german-market-gpsr-content-manufacturer,
.german-market-summary-gpsr {
display: none !important;
}
/* ==========================================================================
Variation Swatches (custom WK implementation via product-page.js)
The native stays in DOM, JS hides it via .wk-swatches-active class.
========================================================================== */
/* Hide native selects when swatches are active */
form.variations_form.wk-swatches-active table.variations select {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
pointer-events: none;
}
/* Hide the native variation label ("Farbe" th) — our black .wk-variation-label replaces it */
form.variations_form.wk-swatches-active table.variations th.label {
display: none;
}
/* Flatten the variation table so the value cell spans full width without the label cell */
form.variations_form.wk-swatches-active table.variations,
form.variations_form.wk-swatches-active table.variations tbody,
form.variations_form.wk-swatches-active table.variations tr,
form.variations_form.wk-swatches-active table.variations td.value {
display: block;
width: 100%;
}
/* Stepper + add-to-cart button side by side in one row */
.woocommerce div.product form.cart .wk-buy-row {
display: flex;
align-items: stretch;
gap: 12px;
margin: 4px 0 14px;
}
.woocommerce div.product form.cart .wk-buy-row .quantity {
flex: 0 0 auto;
margin: 0;
}
.woocommerce div.product form.cart .wk-buy-row button.single_add_to_cart_button {
flex: 1 1 auto;
margin: 0;
}
/* Variation label line */
.wk-variation-label {
font-size: 13.5px;
font-weight: 700;
margin: 0 0 9px;
color: var(--wk-ink);
}
.wk-variation-label .wk-selected-val {
color: var(--wk-muted);
font-weight: 500;
}
/* Swatch row wrapper */
.wk-swatch-group {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-bottom: 22px;
}
/* Colour-circle swatch */
.wk-swatch-color {
width: 42px;
height: 42px;
border-radius: 999px;
cursor: pointer;
border: 2px solid var(--wk-line);
background: none;
padding: 0;
display: grid;
place-items: center;
position: relative;
transition: transform .12s ease, border-color .15s ease;
}
.wk-swatch-color:hover {
transform: translateY(-2px);
}
.wk-swatch-color .wk-sw-inner {
width: 30px;
height: 30px;
border-radius: 999px;
display: block;
/* Stronger inset edge so light colours (white/silver) stay visible */
box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
pointer-events: none;
}
/* Diagonal split swatch (e.g. "Orange/Weiß") — crisp divider line */
.wk-swatch-color.wk-swatch-multi .wk-sw-inner {
box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}
.wk-swatch-color[aria-checked="true"] {
border-color: var(--wk-accent);
}
/* Clip-safe active ring: rendered on the inner circle (inside the button bounds),
so it stays visible even if an ancestor has overflow:hidden. */
.wk-swatch-color[aria-checked="true"] .wk-sw-inner {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wk-accent), inset 0 0 0 1px rgba(0,0,0,.12);
}
/* Hide WooCommerce "Warenkorb anzeigen" (View cart) link next to add-to-cart */
.woocommerce div.product .added_to_cart,
.woocommerce div.product form.cart .added_to_cart,
.woocommerce div.product .wk-buy-row .added_to_cart {
display: none !important;
}
/* Flash hint on swatches when add-to-cart is clicked with no selection */
@keyframes wkSwatchFlash {
0%, 100% { box-shadow: none; }
50% { box-shadow: 0 0 0 5px var(--wk-accent-soft); }
}
.wk-swatch-flash {
animation: wkSwatchFlash .4s ease 2;
border-radius: 999px;
}
/* ==========================================================================
Variation layout-shift guard
FastPixel delays WooCommerce variation JS; on first interaction it inits and
fills .single_variation (price/stock) → height jump. We render price/stock
ourselves, so hide that block and keep the add-to-cart area always visible.
========================================================================== */
.woocommerce div.product .single_variation_wrap .woocommerce-variation.single_variation {
display: none !important;
}
.woocommerce div.product .woocommerce-variation-add-to-cart {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Reset link "Zurücksetzen" appears on selection — reserve no extra row, keep inline */
.woocommerce div.product .reset_variations {
display: none !important;
}
/* Active text-pill swatch */
.wk-swatch-text[aria-checked="true"] {
border-color: var(--wk-accent);
background: var(--wk-accent-soft);
color: var(--wk-cta);
font-weight: 700;
}
/* Text-pill swatch */
.wk-swatch-text {
height: 42px;
padding: 0 16px;
border-radius: 999px;
cursor: pointer;
border: 2px solid var(--wk-line);
background: var(--wk-surface);
font-size: 13.5px;
font-weight: 600;
color: var(--wk-ink-2);
display: flex;
align-items: center;
transition: border-color .15s ease, background .15s ease;
}
.wk-swatch-text:hover {
border-color: var(--wk-accent);
background: var(--wk-accent-soft);
}
.wk-swatch-text[aria-checked="true"] {
border-color: var(--wk-accent);
background: var(--wk-accent-soft);
color: var(--wk-cta);
}
/* Out-of-stock swatch */
.wk-swatch-color.wk-oos,
.wk-swatch-text.wk-oos {
opacity: .38;
cursor: not-allowed;
}
/* Option that can't combine with the current other selection (no such variation
exists). Dimmed hint — still clickable (selecting shows the "nicht lieferbar"
notice), so the user is guided without being trapped. */
/* Not available for the current combination — ONE consistent treatment
(greyed out), whether the combination doesn't exist or is sold out. The red
notice below the swatches explains the reason; still clickable. */
.wk-swatch-color.wk-combo-off .wk-sw-inner,
.wk-swatch-color.wk-oos-combo .wk-sw-inner,
.wk-swatch-text.wk-combo-off,
.wk-swatch-text.wk-oos-combo {
opacity: .35;
}
.wk-swatch-color.wk-combo-off,
.wk-swatch-color.wk-oos-combo {
border-color: var(--wk-line);
}
/* Drittanbieter-Plugin „woo-variation-swatches" rendert eigene Swatches
(.variable-items-wrapper) — auf der Produktseite unerwünscht, da unsere
eigene Swatch-Engine (.wk-swatch-*) die Varianten übernimmt. Ausblenden,
damit die Variante nicht doppelt erscheint. Nur Single-Product. */
.single-product .variable-items-wrapper,
.woocommerce div.product form.cart .variable-items-wrapper {
display: none !important;
}
/* ==========================================================================
Add to Cart — CTA button only (scoped tightly to the product form)
========================================================================== */
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt {
height: 48px;
border-radius: var(--wk-radius);
background: var(--wk-cta);
color: #fff;
font-size: 16px;
font-weight: 800;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 28px;
text-decoration: none;
letter-spacing: -.01em;
box-shadow: 0 6px 18px rgba(229,118,42,.28);
transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
width: 100%;
}
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover {
background: var(--wk-cta-hover);
box-shadow: 0 10px 26px rgba(229,118,42,.36);
}
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:active {
transform: translateY(1px);
}
/* Disabled state (no variation chosen yet) — grey, not the blue CTA */
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt[disabled],
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt.wc-variation-selection-needed {
background: var(--wk-line) !important;
color: var(--wk-muted) !important;
box-shadow: none !important;
cursor: not-allowed;
transform: none;
}
/* Visual-only blocked state (Aufgabe C): mirrors the greyed-out look above
but NEVER sets pointer-events:none so clicks still reach the submit handler. */
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt.wk-cta-blocked {
background: var(--wk-line) !important;
color: var(--wk-muted) !important;
box-shadow: none !important;
cursor: not-allowed;
transform: none;
pointer-events: auto; /* MUST stay clickable — click → submit → feedback */
}
/* Shake animation for incomplete swatch groups */
@keyframes wk-shake {
0% { transform: translateX(0); }
15% { transform: translateX(-4px); }
30% { transform: translateX( 4px); }
45% { transform: translateX(-4px); }
60% { transform: translateX( 4px); }
75% { transform: translateX(-3px); }
90% { transform: translateX( 3px); }
100% { transform: translateX(0); }
}
.wk-shake {
animation: wk-shake .45s ease;
}
/* Reduced-motion: replace shake with a brief accent-outline pulse */
@media (prefers-reduced-motion: reduce) {
.wk-shake {
animation: wk-shake-pulse .4s ease;
}
@keyframes wk-shake-pulse {
0%, 100% { outline: 2px solid transparent; }
50% { outline: 2px solid var(--wk-accent); outline-offset: 3px; }
}
}
/* Inline hint message shown after an incomplete submit attempt */
.wk-select-hint {
font-size: 13px;
color: var(--wk-sale);
margin-top: 8px;
display: none;
}
.wk-select-hint.is-visible {
display: block;
}
/* Quantity stepper (- / +) — JS wraps the native .qty input in .wk-qty-stepper */
.woocommerce div.product form.cart .qty {
text-align: center;
font-size: 15px;
font-weight: 700;
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius-sm);
height: 44px;
padding: 0 10px;
background: #fff;
-moz-appearance: textfield;
}
.woocommerce div.product form.cart .wk-qty-stepper {
display: inline-flex;
align-items: stretch;
height: 48px;
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius-sm);
overflow: hidden;
vertical-align: middle;
}
.woocommerce div.product form.cart .wk-qty-btn {
width: 42px;
border: none;
background: var(--wk-surface);
color: var(--wk-ink);
font-size: 19px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .18s ease, color .18s ease;
-webkit-appearance: none;
appearance: none;
}
.woocommerce div.product form.cart .wk-qty-btn:hover {
background: var(--wk-accent);
color: #fff;
}
.woocommerce div.product form.cart .wk-qty-stepper .qty {
width: 52px;
height: 100%;
border: none;
border-left: 1px solid var(--wk-line);
border-right: 1px solid var(--wk-line);
border-radius: 0;
padding: 0 4px;
}
.woocommerce div.product form.cart .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ==========================================================================
Stock Status
========================================================================== */
.woocommerce div.product .stock.in-stock {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--wk-green);
font-weight: 600;
margin-bottom: 16px;
}
.woocommerce div.product .stock.in-stock::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
min-width: 8px;
border-radius: 999px;
background: var(--wk-green);
}
/* ==========================================================================
Product Meta (SKU, Categories)
========================================================================== */
.woocommerce div.product .product_meta {
font-size: 13px;
color: var(--wk-muted);
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--wk-line);
display: grid;
grid-template-columns: 1fr 1fr; /* Kategorien | Marke, 50/50 inline */
gap: 6px 18px;
line-height: 1.5;
align-items: start;
}
@media (max-width: 480px) {
.woocommerce div.product .product_meta {
grid-template-columns: 1fr; /* stack on very small screens */
}
}
/* "Sofort lieferbar" (left) + categories/brand (right) in one row under the button */
.woocommerce div.product .wk-stock-meta-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
border-top: 1px solid var(--wk-line);
margin-top: 16px;
padding-top: 16px;
}
.woocommerce div.product .wk-stock-meta-row .wk-delivery-line {
margin: 0;
padding: 0;
flex: 0 0 auto;
}
/* Meta inside the row: no own divider/margins; categories+brand compact on the right */
.woocommerce div.product .wk-stock-meta-row .tm-element-woo-meta {
margin: 0 !important;
flex: 1 1 auto;
min-width: 0;
}
.woocommerce div.product .wk-stock-meta-row .product_meta {
margin: 0 0 0 auto; /* hug the right edge — no gap on the right */
padding: 0;
border: none;
display: flex;
flex-direction: column; /* Kategorien on one line, Marke below — clean when long */
align-items: flex-end;
gap: 3px;
text-align: right;
}
.woocommerce div.product .wk-stock-meta-row .product_meta > span {
display: block;
line-height: 1.4;
}
@media (max-width: 560px) {
.woocommerce div.product .wk-stock-meta-row {
flex-direction: column;
gap: 10px;
}
.woocommerce div.product .wk-stock-meta-row .product_meta {
align-items: flex-start;
text-align: left;
max-width: 100%;
}
}
.woocommerce div.product .product_meta > span {
display: block;
}
.woocommerce div.product .product_meta a {
color: var(--wk-ink-2);
text-decoration: none;
}
.woocommerce div.product .product_meta a:hover {
color: var(--wk-accent);
text-decoration: underline;
}
/* Category / brand meta as wrapping chips (clean when many categories) */
.woocommerce div.product .wk-stock-meta-row .product_meta .wk-meta-line {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin: 0 0 6px;
}
.woocommerce div.product .wk-stock-meta-row .product_meta .wk-meta-line:last-child {
margin-bottom: 0;
}
.wk-meta-label {
font-size: 12px;
color: var(--wk-muted);
font-weight: 600;
margin-right: 2px;
}
.wk-meta-chips {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.woocommerce div.product .product_meta a.wk-meta-chip {
display: inline-block;
background: var(--wk-surface);
border: 1px solid var(--wk-line);
color: var(--wk-ink-2);
font-size: 11.5px;
font-weight: 600;
line-height: 1.2;
padding: 4px 10px;
border-radius: 999px;
text-decoration: none;
transition: border-color .15s ease, color .15s ease;
}
.woocommerce div.product .product_meta a.wk-meta-chip:hover {
border-color: var(--wk-accent);
color: var(--wk-accent);
text-decoration: none;
}
/* ==========================================================================
[wk_payment_badges] Shortcode — our class, full control
========================================================================== */
.wk-payment-badges {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--wk-line);
padding-top: 16px;
flex-wrap: wrap;
margin-top: 8px;
margin-bottom: 16px;
}
.wk-pay-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
font-weight: 700;
color: var(--wk-ink-2);
}
.wk-pay-label svg {
width: 18px;
height: 18px;
color: var(--wk-green);
flex-shrink: 0;
}
.wk-pay-logos {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.wk-pay-logo {
height: 26px;
width: auto;
object-fit: contain;
border: 1px solid var(--wk-line);
border-radius: 6px;
padding: 3px 6px;
background: #fff;
}
/* ==========================================================================
[wk_trust_strip] Shortcode — our class, full control
========================================================================== */
.wk-trust-strip {
background: var(--wk-ink);
color: #fff;
margin-top: 40px;
/* Break out of the centered content container to full viewport width.
.wk-ts-inner keeps the badges centered at max-width 1240px. */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* While the sticky add-to-cart bar is open, LIFT the floating chat (Superchat)
+ cookie-settings icon up above it — instead of hiding them. The previous
hide made them disappear/reappear on scroll, which felt jumpy. A smooth
transform keeps them visible and accessible, just clear of the bar. */
body.wk-sticky-open [id^="superchat-widget"],
body.wk-sticky-open .ccm-settings-summoner,
body.wk-sticky-open .ccm-root .ccm-settings-summoner {
transform: translateY(-90px) !important;
transition: transform .3s ease !important;
}
.wk-ts-inner {
/* Flex + center so 3 badges (no rating badge) stay centered, not left-aligned. */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 24px 52px;
padding: 26px 20px;
max-width: 1240px;
margin: 0 auto;
}
.wk-ts-item {
flex: 0 1 auto;
}
.wk-ts-item {
display: flex;
align-items: center;
gap: 13px;
}
.wk-ts-item svg {
width: 30px;
height: 30px;
color: var(--wk-accent);
flex-shrink: 0;
}
.wk-ts-item b {
display: block;
font-size: 14px;
font-weight: 700;
}
.wk-ts-item span {
font-size: 12.5px;
color: #aeb7c0;
display: block;
margin-top: 2px;
}
@media (max-width: 780px) {
.wk-ts-inner {
gap: 18px 36px;
}
}
@media (max-width: 480px) {
.wk-ts-inner {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
}
/* ==========================================================================
Stars helper (used in [wk_product_reviews] and trust strip)
========================================================================== */
.wk-stars {
--p: 100%;
display: inline-block;
font-size: 17px;
line-height: 1;
letter-spacing: 1px;
background: linear-gradient(90deg, var(--wk-gold) var(--p), #d7dde2 var(--p));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.wk-stars::before {
content: "★★★★★";
}
/* ==========================================================================
[wk_product_reviews] Shortcode — our class, full control
========================================================================== */
.wk-product-reviews {
margin-top: 54px;
padding-bottom: 54px;
}
.wk-sec-head {
margin-bottom: 26px;
}
.wk-sec-head h2 {
font-size: 26px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--wk-ink);
}
.wk-rev-summary {
display: flex;
align-items: center;
gap: 26px;
background: var(--wk-surface);
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius);
padding: 24px 28px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.wk-rev-score-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.wk-rev-num {
font-size: 50px;
font-weight: 900;
letter-spacing: -.03em;
line-height: 1;
color: var(--wk-ink);
}
.wk-rev-summary .wk-stars {
font-size: 20px;
}
.wk-rev-of {
font-size: 13px;
color: var(--wk-muted);
align-self: center;
}
.wk-rev-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 760px) {
.wk-rev-grid {
grid-template-columns: 1fr;
}
}
.wk-review {
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius);
padding: 18px 20px;
background: #fff;
}
.wk-rv-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 9px;
gap: 12px;
flex-wrap: wrap;
}
.wk-rv-who {
display: flex;
align-items: center;
gap: 11px;
}
.wk-rv-ava {
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 999px;
background: var(--wk-accent-soft);
color: var(--wk-cta);
display: grid;
place-items: center;
font-weight: 800;
font-size: 15px;
flex-shrink: 0;
user-select: none;
}
.wk-rv-name {
font-size: 14px;
font-weight: 700;
color: var(--wk-ink);
}
.wk-rv-verified {
font-size: 11.5px;
color: var(--wk-green);
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
}
.wk-rv-verified svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
.wk-review .wk-stars {
font-size: 14px;
flex-shrink: 0;
}
.wk-rv-text {
font-size: 14px;
color: var(--wk-ink-2);
line-height: 1.6;
margin-top: 4px;
}
.wk-rv-text p {
margin: 0;
}
.wk-rv-date {
display: block;
font-size: 12px;
color: var(--wk-muted);
margin-top: 10px;
}
/* ==========================================================================
Full Product Description (woo_description — below buy box)
Typography only; content and DOM untouched (SEO-safe).
Demote inner h1 visually to h2 level (DOM stays h1 for Yoast/SEO).
========================================================================== */
.woocommerce div.product .woocommerce-Tabs-panel--description {
padding-top: 48px;
padding-bottom: 48px;
max-width: 820px;
}
/* Hide WooCommerce tab nav — description is shown inline in the layout */
.woocommerce div.product .woocommerce-tabs .tabs {
display: none;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
display: block !important;
padding: 0;
border: none;
background: none;
}
/* Inner h1 visually demoted — font-size only, no tag change */
.woocommerce div.product .woocommerce-Tabs-panel--description h1 {
font-size: 26px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.22;
margin: 0 0 12px;
color: var(--wk-ink);
}
.woocommerce div.product .woocommerce-Tabs-panel--description h2 {
font-size: 21px;
font-weight: 800;
letter-spacing: -.01em;
line-height: 1.3;
margin: 36px 0 12px;
color: var(--wk-ink);
}
.woocommerce div.product .woocommerce-Tabs-panel--description h3 {
font-size: 16.5px;
font-weight: 700;
margin: 24px 0 8px;
color: var(--wk-ink);
}
.woocommerce div.product .woocommerce-Tabs-panel--description p {
font-size: 15.5px;
color: var(--wk-ink-2);
line-height: 1.72;
margin: 0 0 14px;
max-width: 68ch;
}
.woocommerce div.product .woocommerce-Tabs-panel--description ul {
list-style: none;
margin: 4px 0 18px;
padding: 0;
display: grid;
gap: 10px;
}
.woocommerce div.product .woocommerce-Tabs-panel--description li {
position: relative;
padding-left: 28px;
font-size: 15px;
color: var(--wk-ink-2);
line-height: 1.55;
max-width: 66ch;
}
.woocommerce div.product .woocommerce-Tabs-panel--description li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 17px;
height: 17px;
background: var(--wk-accent-soft);
border-radius: 5px;
}
.woocommerce div.product .woocommerce-Tabs-panel--description li::after {
content: "";
position: absolute;
left: 5px;
top: 8px;
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--wk-accent);
}
/* ==========================================================================
Upsell / Related Products
========================================================================== */
.woocommerce .up-sells,
.woocommerce .related {
margin-top: 54px;
clear: both;
}
.woocommerce .up-sells h2,
.woocommerce .related h2 {
font-size: 24px;
font-weight: 800;
letter-spacing: -.02em;
margin-bottom: 24px;
color: var(--wk-ink);
}
/* Override WooCommerce float layout with grid */
.woocommerce .up-sells ul.products,
.woocommerce .related ul.products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
float: none;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 959px) {
.woocommerce .up-sells ul.products,
.woocommerce .related ul.products {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.woocommerce .up-sells ul.products,
.woocommerce .related ul.products {
grid-template-columns: 1fr;
}
}
.woocommerce .up-sells ul.products li.product,
.woocommerce .related ul.products li.product {
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius);
overflow: hidden;
background: #fff;
transition: transform .2s ease, box-shadow .2s ease;
margin: 0;
/* Neutralise YOOtheme's ul.products>* { padding-left/-bottom } that pushed
the card content right (white gap on the left). The card uses its own
inner spacing instead. */
padding: 0 !important;
float: none;
width: auto;
display: flex;
flex-direction: column;
}
.woocommerce .up-sells ul.products li.product:hover,
.woocommerce .related ul.products li.product:hover {
transform: translateY(-4px);
box-shadow: var(--wk-shadow);
}
.woocommerce .up-sells ul.products li.product a img,
.woocommerce .related ul.products li.product a img {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;
padding: 12%;
background: var(--wk-surface);
margin: 0;
}
/* Card link = flex column + positioning context: keeps the inner spacing
consistent and lets the price sit flush at the bottom across all cards. */
.woocommerce .up-sells ul.products li.product > a,
.woocommerce .related ul.products li.product > a {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
/* Sale badge — consistent rounded pill in the image's top-left corner
(was unstyled = default YOOtheme blue rectangle). */
.woocommerce .up-sells ul.products li.product .onsale,
.woocommerce .related ul.products li.product .onsale {
position: absolute;
top: 10px;
left: 10px;
right: auto;
margin: 0;
z-index: 2;
background: var(--wk-accent);
color: #fff;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
line-height: 1.3;
min-height: 0;
min-width: 0;
box-shadow: none;
}
.woocommerce .up-sells ul.products li.product .woocommerce-loop-product__title,
.woocommerce .related ul.products li.product .woocommerce-loop-product__title {
font-size: 13.5px;
font-weight: 600;
line-height: 1.35;
padding: 14px 15px 0;
margin: 0;
color: var(--wk-ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* Fixed 2-line height so titles never bleed into the stars + cards align */
height: calc(2 * 1.35em + 14px);
}
/* Star rating in cards — show ONLY the stars; clip the "Bewertet mit X von 5"
screen-reader text that was overflowing (needs overflow:hidden + fixed width). */
.woocommerce .up-sells ul.products li.product .star-rating,
.woocommerce .related ul.products li.product .star-rating {
margin: 8px 15px 0;
font-size: 14px;
}
/* Hide only the "Bewertet mit X von 5" TEXT (font-size:0) while keeping the
::before star glyphs (filled gold + empty) visible at their own size. */
.woocommerce .up-sells ul.products li.product .star-rating > span,
.woocommerce .related ul.products li.product .star-rating > span {
font-size: 0;
}
.woocommerce .up-sells ul.products li.product .star-rating::before,
.woocommerce .related ul.products li.product .star-rating::before,
.woocommerce .up-sells ul.products li.product .star-rating > span::before,
.woocommerce .related ul.products li.product .star-rating > span::before {
font-size: 14px;
}
.woocommerce .up-sells ul.products li.product .price,
.woocommerce .related ul.products li.product .price {
font-size: 17px;
font-weight: 800;
padding: 8px 15px 16px;
margin: 0;
background: none;
border: none;
display: block;
color: var(--wk-ink);
margin-top: auto; /* push price to the bottom for equal-height cards */
}
/* Sale price in cards: original struck-through + muted, sale price prominent */
.woocommerce .up-sells ul.products li.product .price del,
.woocommerce .related ul.products li.product .price del {
font-size: 13px;
font-weight: 500;
color: var(--wk-muted);
text-decoration: line-through;
margin-right: 7px;
display: inline;
}
.woocommerce .up-sells ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce .related ul.products li.product .price del .woocommerce-Price-amount {
font-size: 13px;
font-weight: 500;
}
.woocommerce .up-sells ul.products li.product .price ins,
.woocommerce .related ul.products li.product .price ins {
text-decoration: none;
color: var(--wk-ink);
font-weight: 800;
background: none;
}
/* Card price amount — keep it card-sized. The single-product price rule
(div.product span.price .woocommerce-Price-amount.amount { 32px }) otherwise
leaks into upsell/related cards (they sit inside div.product) and blew up the
sale price. Override both the sale (ins) and regular amount; struck price stays small. */
.woocommerce .up-sells ul.products li.product .price .woocommerce-Price-amount.amount,
.woocommerce .related ul.products li.product .price .woocommerce-Price-amount.amount {
font-size: 17px;
font-weight: 800;
letter-spacing: 0;
}
.woocommerce .up-sells ul.products li.product .price del .woocommerce-Price-amount.amount,
.woocommerce .related ul.products li.product .price del .woocommerce-Price-amount.amount {
font-size: 13px;
font-weight: 500;
}
/* Hide delivery strings in product cards */
.woocommerce .up-sells .wgm-info[class*="delivery-time"],
.woocommerce .related .wgm-info[class*="delivery-time"] {
display: none !important;
}
/* Waitlist-Button ("Nicht auf Lager? Benachrichtige mich!") in den
Cross-Sell-/Upsell-/Related-Karten ausblenden — dort unerwünscht.
Auf Shop-/Kategorie-Archiven bleibt der Button erhalten (nicht global). */
.woocommerce .up-sells .xoo-wl-action-btn,
.woocommerce .upsells .xoo-wl-action-btn,
.woocommerce .related .xoo-wl-action-btn,
.woocommerce .cross-sells .xoo-wl-action-btn,
.woocommerce .up-sells [class*="xoo-wl-"],
.woocommerce .upsells [class*="xoo-wl-"],
.woocommerce .related [class*="xoo-wl-"],
.woocommerce .cross-sells [class*="xoo-wl-"] {
display: none !important;
}
/* Cross-Sell-/Upsell-/Related-Karten: MwSt/Versand-Zeilen + Add-to-Cart/
„Ausführung wählen"-Buttons ausblenden — dort sollen nur Bild/Titel/
Rating/Preis stehen. Shop-/Kategorie-Loops (ul.products ohne diese
Container) bleiben unberührt. */
.woocommerce .up-sells .wgm-info,
.woocommerce .upsells .wgm-info,
.woocommerce .related .wgm-info,
.woocommerce .cross-sells .wgm-info,
.woocommerce .up-sells li.product a.button,
.woocommerce .upsells li.product a.button,
.woocommerce .related li.product a.button,
.woocommerce .cross-sells li.product a.button,
.woocommerce .up-sells li.product .add_to_cart_button,
.woocommerce .upsells li.product .add_to_cart_button,
.woocommerce .related li.product .add_to_cart_button,
.woocommerce .cross-sells li.product .add_to_cart_button {
display: none !important;
}
/* ==========================================================================
Sticky Add-to-Cart Bar (injected by product-page.js)
========================================================================== */
.wk-sticky-cart {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 200;
background: rgba(255,255,255,.96);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-top: 1px solid var(--wk-line);
box-shadow: 0 -8px 30px rgba(21,24,28,.10);
transform: translateY(110%);
transition: transform .35s cubic-bezier(.16,1,.3,1);
will-change: transform;
}
.wk-sticky-cart.wk-sc-visible {
transform: translateY(0);
}
.wk-sc-inner {
display: flex;
align-items: center;
gap: 18px;
height: 74px;
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
.wk-sc-thumb {
width: 50px;
height: 50px;
border-radius: var(--wk-radius-sm);
background: var(--wk-surface);
border: 1px solid var(--wk-line);
object-fit: contain;
padding: 5px;
flex-shrink: 0;
}
.wk-sc-info {
min-width: 0;
flex: 1;
}
.wk-sc-name {
font-size: 14.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 520px;
color: var(--wk-ink);
}
.wk-sc-meta {
font-size: 12.5px;
color: var(--wk-muted);
margin-top: 2px;
}
.wk-sc-meta b {
color: var(--wk-ink);
font-weight: 800;
font-size: 15px;
}
.wk-sc-btn {
height: 48px;
padding: 0 28px;
min-width: 200px;
border-radius: var(--wk-radius);
background: var(--wk-cta);
color: #fff;
font-size: 15px;
font-weight: 800;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-shrink: 0;
transition: background .2s ease;
letter-spacing: -.01em;
white-space: nowrap;
}
.wk-sc-btn:hover {
background: var(--wk-cta-hover);
}
.wk-sc-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
@media (max-width: 680px) {
.wk-sc-inner {
gap: 11px;
height: 64px;
padding: 0 14px;
}
/* Keep thumbnail + name + price (name truncates within the flex row);
just compact everything so it fits on small screens. */
.wk-sc-thumb {
width: 42px;
height: 42px;
}
.wk-sc-name {
font-size: 13px;
max-width: none;
}
.wk-sc-meta b {
font-size: 14px;
}
/* Button sized to content (not full-width) so it isn't oversized. */
.wk-sc-btn {
min-width: auto;
height: 44px;
padding: 0 16px;
font-size: 13.5px;
}
}
/* ==========================================================================
Scroll Reveal (.wk-reveal elements — added by shortcodes or layout)
========================================================================== */
.wk-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.wk-reveal.wk-in {
opacity: 1;
transform: none;
}
/* ==========================================================================
Add-to-Cart Button — cart icon injected by product-page.js
The icon span .wk-btn-icon is prepended inside the button by JS.
========================================================================== */
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt .wk-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
pointer-events: none;
}
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt .wk-btn-icon svg {
width: 20px;
height: 20px;
}
/* ==========================================================================
"Sofort lieferbar" delivery confirmation line (hook: woocommerce_after_add_to_cart_button)
========================================================================== */
.wk-delivery-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: var(--wk-green);
font-weight: 800;
margin-top: 10px;
margin-bottom: 4px;
}
.wk-delivery-line svg {
width: 19px;
height: 19px;
flex-shrink: 0;
color: inherit;
}
.wk-delivery-line[hidden] {
display: none;
}
/* Immediate availability — green (default). Real Lieferzeit — neutral.
Unavailable — red. Colours reflect the truth, not a blanket claim. */
.wk-delivery-line[data-kind="immediate"] {
color: var(--wk-green);
}
.wk-delivery-line[data-kind="timed"] {
color: var(--wk-ink-2);
font-weight: 800;
}
/* Unavailable → prominent red box (specificity beats the .wk-stock-meta-row reset) */
.woocommerce div.product .wk-stock-meta-row .wk-delivery-line[data-kind="unavailable"],
.wk-delivery-line[data-kind="unavailable"] {
color: #b3261e;
background: #fdecea;
border: 1px solid #f3c0bb;
padding: 9px 13px;
border-radius: var(--wk-radius-sm);
}
/* Prominent "variation not available" notice, shown right above the CTA button
so it clearly explains the greyed-out add-to-cart button. */
.wk-avail-notice {
display: flex;
align-items: center;
gap: 9px;
background: #fdecea;
border: 1px solid #f3c0bb;
color: #b3261e;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
padding: 11px 14px;
border-radius: var(--wk-radius-sm);
margin: 0 0 14px;
}
.wk-avail-notice[hidden] {
display: none;
}
.wk-avail-notice svg {
width: 19px;
height: 19px;
flex-shrink: 0;
color: currentColor;
}
/* ==========================================================================
Moto-Finder Fitment Card — redesign overlay via CSS
All states: success / warning / universal / neutral (prompt)
Targeting real classes from class-wk-mf-query.php (no markup change needed)
========================================================================== */
/* Base card reset — overwrite existing moto-finder defaults */
.wk-mf-fitment {
display: flex;
align-items: center;
gap: 11px;
border-radius: var(--wk-radius) !important;
padding: 10px 13px !important;
margin-bottom: 16px;
border: 1px solid transparent;
box-sizing: border-box;
}
/* Success: Passt */
.wk-mf-fitment.wk-mf-fitment-success {
background: var(--wk-green-soft) !important;
border-color: #bfe6cf !important;
}
/* Warning: Passt nicht */
.wk-mf-fitment.wk-mf-fitment-warning {
background: #fff8ec !important;
border-color: #f4e2c0 !important;
}
/* Universal */
.wk-mf-fitment.wk-mf-fitment-universal {
background: var(--wk-accent-soft) !important;
border-color: #cae3f4 !important;
}
/* Neutral / Prompt (kein Bike gewählt) */
.wk-mf-fitment.wk-mf-fitment-neutral {
background: var(--wk-accent-soft) !important;
border-color: #cae3f4 !important;
}
/* Icon circle */
.wk-mf-fitment-icon {
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 999px !important;
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wk-mf-fitment-success .wk-mf-fitment-icon {
background: var(--wk-green) !important;
color: #fff;
}
.wk-mf-fitment-success .wk-mf-fitment-icon svg {
color: #fff;
stroke: #fff;
}
.wk-mf-fitment-warning .wk-mf-fitment-icon {
background: #f5a623 !important;
color: #fff;
}
.wk-mf-fitment-warning .wk-mf-fitment-icon svg {
color: #fff;
stroke: #fff;
}
.wk-mf-fitment-universal .wk-mf-fitment-icon,
.wk-mf-fitment-neutral .wk-mf-fitment-icon {
background: var(--wk-accent) !important;
color: #fff;
}
.wk-mf-fitment-universal .wk-mf-fitment-icon svg,
.wk-mf-fitment-neutral .wk-mf-fitment-icon svg {
color: #fff;
stroke: #fff;
fill: #fff; /* motorcycle SVG uses fill */
}
/* Icon sizing — uniform */
.wk-mf-fitment-icon svg {
width: 18px;
height: 18px;
}
/* Text block */
.wk-mf-fitment-text {
flex: 1;
font-size: 13.5px;
line-height: 1.4;
min-width: 0;
}
.wk-mf-fitment-text strong {
display: block;
font-weight: 700;
}
.wk-mf-fitment-success .wk-mf-fitment-text strong {
color: #15683c;
}
.wk-mf-fitment-warning .wk-mf-fitment-text strong {
color: #92400e;
}
.wk-mf-fitment-universal .wk-mf-fitment-text strong,
.wk-mf-fitment-neutral .wk-mf-fitment-text strong {
color: #155a86;
}
.wk-mf-fitment-text span {
display: block;
font-size: 12.5px;
color: var(--wk-ink-2);
margin-top: 2px;
}
/* Mobile fitment card — compact per state. */
@media (max-width: 680px) {
.wk-mf-fitment {
gap: 10px;
padding: 10px 13px !important;
}
.wk-mf-fitment-text {
font-size: 12.5px;
}
.wk-mf-fitment-text span {
font-size: 12px;
}
/* Neutral "Passt dieses Produkt?" prompt: drop the decorative icon; text +
CTA use the full width (CTA wraps to its own row). */
.wk-mf-fitment-neutral {
flex-wrap: wrap;
gap: 6px 11px;
}
.wk-mf-fitment-neutral .wk-mf-fitment-icon {
display: none;
}
.wk-mf-fitment-neutral .wk-mf-fitment-text,
.wk-mf-fitment-neutral .wk-mf-fitment-link {
flex-basis: 100%;
margin-left: 0;
}
/* Status states (passt / passt-nicht / universal): keep it to ONE compact
row — small status icon, text wraps inside, switcher stays inline right. */
.wk-mf-fitment-success .wk-mf-fitment-icon,
.wk-mf-fitment-warning .wk-mf-fitment-icon,
.wk-mf-fitment-universal .wk-mf-fitment-icon {
width: 26px;
height: 26px;
min-width: 26px;
}
.wk-mf-fitment-success .wk-mf-fitment-icon svg,
.wk-mf-fitment-warning .wk-mf-fitment-icon svg,
.wk-mf-fitment-universal .wk-mf-fitment-icon svg {
width: 15px;
height: 15px;
}
.wk-mf-fitment-success .wk-mf-fitment-switcher,
.wk-mf-fitment-warning .wk-mf-fitment-switcher,
.wk-mf-fitment-universal .wk-mf-fitment-switcher {
margin-left: auto;
}
}
/* CTA / action area */
.wk-mf-fitment-switcher,
.wk-mf-fitment-vehicles,
.wk-mf-fitment-link {
margin-left: auto;
flex-shrink: 0;
}
.wk-mf-fitment-link {
font-size: 13px;
font-weight: 700;
color: var(--wk-accent) !important;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.wk-mf-fitment-link:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Switcher button */
.wk-mf-fitment-switcher-toggle {
font-size: 13px;
font-weight: 700;
color: var(--wk-accent) !important;
background: none !important;
border: none !important;
padding: 0 !important;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
/* Switcher dropdown */
.wk-mf-fitment-switcher-menu {
position: absolute;
right: 0;
top: calc(100% + 6px);
background: #fff;
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius-sm);
box-shadow: var(--wk-shadow);
z-index: 50;
min-width: 160px;
padding: 6px 0;
}
.wk-mf-fitment-switcher {
position: relative;
}
.wk-mf-fitment-switcher-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-size: 13px;
color: var(--wk-ink-2);
text-decoration: none;
transition: background .12s;
}
.wk-mf-fitment-switcher-item:hover {
background: var(--wk-surface);
color: var(--wk-ink);
}
/* Vehicle pills in neutral state */
.wk-mf-fitment-vehicles {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
width: 100%;
}
.wk-mf-fitment-btn {
font-size: 12.5px;
font-weight: 600;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--wk-line);
background: #fff;
color: var(--wk-ink-2) !important;
text-decoration: none;
transition: border-color .15s, background .15s;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
}
.wk-mf-fitment-btn:hover {
border-color: var(--wk-accent);
background: var(--wk-accent-soft);
color: var(--wk-cta) !important;
}
.wk-mf-fitment-btn-garage {
border-color: var(--wk-line);
}
/* ==========================================================================
Breadcrumb (ul.uk-breadcrumb — UIkit/YOOtheme)
Additive overrides: small, muted, accent hover, current item dimmed.
YOOtheme renders separators via ::before on li (UIkit default is "/").
========================================================================== */
.uk-breadcrumb {
font-size: 12.5px;
color: var(--wk-muted);
margin: 0;
}
/* Size on the items directly (UIkit sizes children, so the ul rule alone is overridden) */
.uk-breadcrumb > li,
.uk-breadcrumb > li > a,
.uk-breadcrumb > li > span {
font-size: 12.5px;
color: var(--wk-muted);
text-decoration: none;
font-weight: 500;
line-height: 1.4;
}
.uk-breadcrumb > li > a:hover {
color: var(--wk-accent);
text-decoration: none;
}
/* Hide the last item (the product title) — redundant with the H1 below */
.uk-breadcrumb > li:last-child {
display: none;
}
/* The new last visible item (deepest category) — dimmed as "current" */
.uk-breadcrumb > li:nth-last-child(2) > a,
.uk-breadcrumb > li:nth-last-child(2) > span {
opacity: .8;
}
/* Separator "/" before every item except the first */
.uk-breadcrumb > li:not(:first-child)::before {
content: "/";
color: var(--wk-line);
margin: 0 6px;
font-weight: 400;
}
/* Mobile: keep it on a single line and shorten to the 2 deepest categories */
@media (max-width: 640px) {
.uk-breadcrumb {
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* :last-child (product title) is already hidden; show only the last 2 categories */
.uk-breadcrumb > li:not(:nth-last-child(-n+3)) {
display: none;
}
/* Drop the leading separator on the first now-visible crumb */
.uk-breadcrumb > li:nth-last-child(3)::before {
content: none;
}
}
/* ==========================================================================
Reduced Motion — disable all transitions/transforms
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.wk-reveal {
opacity: 1;
transform: none;
transition: none;
}
.wk-sticky-cart {
transition: none;
}
.wk-swatch-color,
.wk-swatch-text {
transition: none;
}
.wk-mf-fitment-btn,
.wk-mf-fitment-link,
.wk-mf-fitment-switcher-item {
transition: none;
}
}
/* ===========================================================================
PW WooCommerce Gift Cards — Empfänger-Felder (An / Von / Nachricht)
---------------------------------------------------------------------------
PW rendert #pwgc-purchase-container ungestylt (volle Breite, riesiges
Nachricht-Feld). Hier an das Design-System (Tokens) angeglichen, damit der
Gutschein-Kaufbereich wie der Rest der Produktseite aussieht.
=========================================================================== */
/* Empfänger-Bereich als eigene Karte — konsistent mit .wk-price-card */
.pwgc-purchase-container {
background: var(--wk-surface);
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius);
padding: 18px 20px;
margin: 6px 0 20px;
}
/* Abstand zwischen den einzelnen Feldern */
.pwgc-purchase-container .pwgc-field-container {
margin: 0 0 16px;
}
.pwgc-purchase-container .pwgc-field-container:last-child {
margin-bottom: 0;
}
/* Labels (An / Von / Nachricht) — wie die übrigen Feld-Labels */
.pwgc-purchase-container .pwgc-label,
.pwgc-purchase-container label {
display: block;
font-weight: 700;
font-size: 15px;
line-height: 1.3;
color: var(--wk-ink);
margin: 0 0 7px;
}
/* Text-Inputs + Textarea einheitlich */
.pwgc-purchase-container input[type="text"],
.pwgc-purchase-container input[type="email"],
.pwgc-purchase-container textarea,
.pwgc-input-text {
width: 100%;
box-sizing: border-box;
padding: 11px 14px;
font-size: 15px;
line-height: 1.4;
color: var(--wk-ink);
background: #fff;
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius-sm);
transition: border-color .15s ease, box-shadow .15s ease;
}
.pwgc-purchase-container input[type="text"]:focus,
.pwgc-purchase-container input[type="email"]:focus,
.pwgc-purchase-container textarea:focus,
.pwgc-input-text:focus {
outline: none;
border-color: var(--wk-accent);
box-shadow: 0 0 0 3px var(--wk-accent-soft);
}
.pwgc-purchase-container ::placeholder {
color: var(--wk-muted);
opacity: 1;
}
/* Nachricht-Feld: sinnvolle Höhe statt riesig, vertikal skalierbar */
.pwgc-purchase-container textarea,
.pwgc-message {
min-height: 96px;
resize: vertical;
line-height: 1.5;
}
/* Hinweise / Zeichenzähler dezent */
.pwgc-purchase-container .pwgc-subtitle,
.pwgc-purchase-container .pwgc-message-characters-remaining,
.pwgc-purchase-container small,
.pwgc-purchase-container .description {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.4;
color: var(--wk-muted);
}
/* ===========================================================================
PPOM (Product Add-Ons) — Feldkontrast & Lesbarkeit
---------------------------------------------------------------------------
Reiner Kontrast-Fix für die von PPOM gerenderten Formularfelder auf der
Produktdetailseite (Select, Text-Input, Textarea, Labels). Kein Markup-,
PHP- oder JS-Eingriff. Gemessener Ist-Zustand: select.ppom-input hat
border-width:0 (gar kein Rahmen), input.ppom-input einen Rahmen #ced4da
mit nur 1,49:1 Kontrast, das Pflicht-Sternchen (.show_required) rgb(255,0,0)
nur 4,0:1 (AA für Text < 18,66px verlangt 4,5:1).
Vier harte Verbote in diesem Abschnitt:
(a) Kein Selektor setzt display/position/visibility mit einem PPOM-
Wrapper-Element (.ppom-wrapper, .ppom-field-wrapper, .form-row,
.ppom-col) als Subjekt. .ppom-c-hide/.ppom-c-show steuern darüber
die Conditional-Logic von PPOM (Spezifität (0,1,0), identisch zu
.ppom-field-wrapper) und .ppom-c-hide wird zusätzlich vom Required-
Sichtbarkeitstest in product-page.js (offsetParent) ausgewertet.
Wrapper-Klassen kommen hier ausschließlich als Vorfahre im Selektor
vor, nie als Subjekt. Aus demselben Grund gibt es KEINE eigene
.form-group-Abstandsregel: Bootstrap 4 setzt bereits
.form-group{margin-bottom:1rem}, eine gleichwertige eigene Regel
wäre nachweislich wirkungslos (vorher 16px, nachher 16px), und eine
:last-child-Ausnahme träfe im PPOM-Markup ausnahmslos JEDE
.form-group (jeder .ppom-field-wrapper enthält genau eine), nicht
nur die letzte. .form-group taucht unten trotzdem mehrfach als
Vorfahre auf (nie als Subjekt) — dazu gleich mehr.
(b) Jeder Selektor ist auf .ppom-wrapper verankert, weil auf derselben
Seite weitere Plugins (flexible-product-fields, waitlist-woocommerce,
b2b-market, PW Gift Cards) dieselben Bootstrap-4-Klassen
(.form-control, .form-group, .form-row) benutzen.
(c) Die einzige !important-Deklaration in diesem Abschnitt steht bei
font-size für Text-Inputs/Textarea, weil Bootstrap 4 bei
.form-control ebenfalls font-size:initial !important setzt und wir
mit derselben Priorität kontern müssen. Überall sonst entscheidet
allein die Spezifität.
(d) #ppom-price-cloner-wrapper / .ppom-price werden nicht angefasst —
die Preisanzeige ist nicht Teil dieser Aufgabe.
Rechercheergebnis Fehlerzustand: PPOM validiert per AJAX
(ppom-validation.js) ausschließlich serverseitig und hängt bei Fehlern
nur eine Notice (.ppom-ajax-validation) an form.cart an — es gibt keine
Fehlerklasse am Feld selbst. Deshalb bewusst KEIN :invalid-/Error-Styling
hier; PPOM-Felder tragen zudem kein required-Attribut (nur die Klasse
.ppom-required), :invalid würde also ohnehin nicht greifen.
Einheitliche Anker-Konvention: ALLE Selektoren dieses Abschnitts sind auf
".woocommerce div.product .ppom-wrapper" verankert und binden sich NICHT
an die Klasse .ppom-input. Grund: PPOMs Feldtyp "chained" rendert seinen
Select nachweislich als reines , ohne
.ppom-input (auf einer zweiten Konfigurator-Seite verifiziert). Zählung
über beide Referenzseiten: 48 bzw. 42 -Elemente, davon 7 bzw. 10
ohne .ppom-input — davon ausnahmslos imageselect (bereits über den
Vorfahren .form-group:not(.ppom-imageselect-design) ausgeschlossen) bis
auf genau diesen einen chained-Fall, der mit der alten .ppom-input-
Pflichtklasse dauerhaft im Ist-Zustand geblieben wäre. Die
Typ-Ausschlussliste an input bleibt der eigentliche Schutz vor
Nicht-Feld-Elementen und schützt zusätzlich vor künftigen, noch
unbekannten PPOM-Feldtypen ohne .ppom-input.
.form-group:not(.ppom-imageselect-design) als Vorfahre gilt jetzt
EINHEITLICH für input, textarea UND select — nicht mehr nur für select.
Ohne .ppom-input als Pflichtklasse war dieser Vorfahre bei input/textarea
das einzig verbliebene Tor gegen imageselect-Felder; er fehlte dort aber
(Fund aus der Vorrunde: ein unterstützt das
readonly-Attribut nicht und gilt daher laut CSS-Spezifikation IMMER als
"read-only", unabhängig vom tatsächlichen Zustand (u. a. betrifft das
auch input[type=range]/[type=color], daher deren Ausschluss oben in der
Typliste) — :read-only würde hier also jeden Select treffen, PPOM setzt
an Selects aber ohnehin kein readonly. :not(:focus) zusätzlich aus
demselben Grund wie bei input/textarea (siehe "Hover vs. Fokus" im
Abschnittskopf). */
.woocommerce div.product .ppom-wrapper .form-group:not(.ppom-imageselect-design) select:hover:not(:disabled):not(:focus) {
border-color: var(--wk-field-line-hover);
}
.woocommerce div.product .ppom-wrapper .form-group:not(.ppom-imageselect-design) select:focus,
.woocommerce div.product .ppom-wrapper .form-group:not(.ppom-imageselect-design) select:focus-visible {
border-color: var(--wk-cta);
box-shadow: 0 0 0 3px rgba(229,118,42,.25);
outline: 2px solid transparent;
outline-offset: 2px;
}
.woocommerce div.product .ppom-wrapper .form-group:not(.ppom-imageselect-design) select:disabled {
background-color: var(--wk-surface);
color: var(--wk-muted);
border-color: var(--wk-field-line);
cursor: not-allowed;
}
/* Reduced Motion: der Sammelblock weiter oben in dieser Datei steht VOR
diesem Abschnitt und kann die hier neu eingeführten transition-Werte
also nicht erfassen — deshalb ein eigener Block mit denselben Selektoren
wie die Basis-Regeln, die transition setzen. */
@media (prefers-reduced-motion: reduce) {
.woocommerce div.product .ppom-wrapper .form-group:not(.ppom-imageselect-design) input:not([type="radio"],[type="checkbox"],[type="file"],[type="hidden"],[type="submit"],[type="button"],[type="image"],[type="reset"],[type="range"],[type="color"]),
.woocommerce div.product .ppom-wrapper .form-group:not(.ppom-imageselect-design) textarea,
.woocommerce div.product .ppom-wrapper .form-group:not(.ppom-imageselect-design) select {
transition: none;
}
}
/* Labels + Pflichtkennzeichnung — 1:1 zur PWGC-Konvention weiter oben in
dieser Datei (Zeile ~2724), mit einer bewussten Abweichung: font-size
wird NICHT gesetzt. Der Kontrastgewinn kommt aus color und font-weight
(700 statt YOOthemes 400), nicht aus der Schriftgröße — bei einer
Lesbarkeits-Aufgabe wäre ein kleinerer Text das falsche Signal. Ohne
eigene font-size-Deklaration greift YOOthemes eigener Wert (16px) ganz
normal durch, weil unsere höhere Spezifität nur die Eigenschaften
verdrängt, die wir tatsächlich setzen. margin-bottom:7px und
line-height:1.3 sind ebenfalls bewusste Mitnahme aus der PWGC-Konvention
(dichterer Rhythmus als YOOthemes eigene 10px), kein Kontrast-Thema.
font-family und display lässt diese Regel bewusst bei YOOtheme: die
Aufgabe ist Kontrast/Lesbarkeit, keine Typografie-/Redesign-Änderung,
und display:block ist mit YOOthemes Wert ohnehin identisch. Lange
Label-Texte sollen umbrechen können, deshalb kein
text-overflow/white-space:nowrap. :not(:empty) nimmt das leere
ein komplett eigenes Markup baut
(.dd-container/.dd-select/.dd-options — die sogenannte ddslick-Bibliothek)
und die obigen input/textarea/select-Regeln dort gar nicht mehr greifen.
Anker deshalb spiegelverkehrt: .form-group.ppom-imageselect-design (statt
:not(...)), sonst identische Kette ".woocommerce div.product .ppom-wrapper"
davor — macht (0,5,2), genau wie die Select-/Label-Regeln oben.
Ladereihenfolge (live verifiziert): ppom-imageselect.css (Addon-CSS des
Widgets, 360 Byte) lädt VOR dieser Datei, wk-product-page.css (hier) lädt
danach, theme.1.css (YOOtheme) zuletzt. Das Addon-CSS regelt nur vier
Dinge, alle mit einem !important-Trio auf label/ul plus ein plain
a.dd-option{display:block}:
.ppom-imageselect-design .dd-container label{line-height:unset!important;display:unset!important}
.ppom-imageselect-design .dd-container ul{margin:0!important;width:100%!important;padding-left:0!important}
a.dd-option{display:block}
ul.dd-options li{margin:0}
Keine der folgenden Regeln setzt line-height/display/margin/width/
padding-left auf denselben Elementen — es gibt also keine Kollision mit
diesen vier !important-Deklarationen, und folglich braucht dieser gesamte
Unterabschnitt kein einziges eigenes !important: die (0,5,2)-Anker-Kette
(bzw. (0,6,2) für die konkreten Kind-Selektoren wie .dd-select/.dd-selected)
schlägt jede realistische Regel aus ppom-imageselect.css, der ddslick-
Basis-CSS (unbekannt, aber typischerweise bloße Klassen-Selektoren wie
.dd-pointer-down{...} mit Spezifität (0,1,0)) und aus theme.1.css (generische
a/label-Farben) allein über Spezifität — siehe "Spezifität Selects" /
"Spezifität Label" im Abschnittskopf oben für dasselbe Argumentmuster.
Die drei Inline-Styles der ddslick-Bibliothek im Live-DOM
(img: width:64px;height:auto — .dd-selected-text: line-height:50px —
.dd-options: overflow:auto) werden ebenfalls nicht angefasst: keine der
folgenden Regeln setzt width/height/line-height auf den Bild-/Text-
Elementen oder overflow auf .dd-options, also auch hier keine Kollision,
die ein !important nötig machen würde. */
/* Geschlossener Zustand: derselbe Rahmen/Radius/weiße Fläche wie bei den
übrigen Feldern oben. overflow:hidden verhindert, dass das 64px-Bild
(bleibt unverändert — nicht Teil dieser Aufgabe) die runden Ecken
überragt. min-height statt fixer height: Bild + Text wachsen die Zeile
erkennbar über 48px hinaus, das ist laut Aufgabe ausdrücklich erlaubt
("die Zeile darf höher als 48px sein") — Ziel ist Konsistenz bei Rahmen/
Radius/Farbe/Pfeil, nicht identische Pixelhöhe. padding-right:40px
reserviert denselben Platz wie beim normalen Select oben (Zeile ~2968:
"padding: 11px 40px 11px 14px") für den Pfeil — der Pfeil selbst liegt
zwar absolut positioniert außerhalb des Textflusses (siehe .dd-pointer
unten), das Padding verhindert aber, dass lange Optionstexte/Preise
optisch unter den Pfeil laufen. cursor:pointer ist bewusste Mitnahme wie
beim Select oben ("cursor:pointer ist bewusste Mitnahme"), kein
Kontrast-Thema. */
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .dd-select {
box-sizing: border-box;
width: 100%;
min-height: 48px;
padding: 4px 40px 4px 4px;
background-color: #fff;
border: 1px solid var(--wk-field-line);
border-radius: var(--wk-radius-sm);
overflow: hidden;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
/* .dd-selected ist ein — ohne eigene Farbe übernimmt es die Link-Farbe
des Themes (gemessener Ist-Zustand: blauer Text statt --wk-ink).
text-decoration:none nimmt eine eventuelle Theme-Unterstreichung von
Links mit. Farbe zusätzlich explizit auf .dd-selected-text wiederholt statt
sich allein auf Vererbung zu verlassen: sobald irgendein späteres
Stylesheet (z. B. theme.1.css) eine eigene label{color:...}-Regel mitbringt,
würde die auf dem greifen und die geerbte Farbe des Elternlinks
verdrängen — genau der Grund, aus dem auch label.form-control-label weiter
oben in diesem Abschnitt eine eigene color-Deklaration bekommt statt sich
auf Vererbung zu verlassen. */
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .dd-selected {
color: var(--wk-ink);
text-decoration: none;
}
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .dd-selected-text {
color: var(--wk-ink);
}
/* Pfeil: exakt dieselbe Chevron-Data-URI wie beim normalen Select oben
(Zeile ~2973, %233a424c = --wk-ink-2 als Literal, siehe dortiger Kommentar
dazu) — hier auf dem bereits im DOM vorhandenen
platziert statt als neues
Pseudo-Element, weil dieses Element bereits von ddslick verwaltet wird
(Layer-Reihenfolge über .dd-select-Kindern) und bei Klick auf die Klasse
dd-pointer-up wechselt (siehe Regel darunter). border:0 löscht das
bisherige gefüllte Dreieck (im Ist-Zustand gemessen: "kleines gefülltes
Dreieck") unabhängig von der genauen Bau-Technik — border:0 wirkt sowohl
gegen die klassische CSS-Border-Dreieck-Technik (0×0-Box + farbige
Rand-Kanten) als auch, falls stattdessen ein Hintergrundbild verwendet
wurde, gegen dessen Sichtbarkeit, sobald wir background-image im
selben Selektor überschreiben. width/height/position werden komplett neu
gesetzt statt nur ergänzt, weil eine Border-Dreieck-Box reguär 0×0 groß
ist und sonst für unser eigenes Hintergrundbild kein Platz böte.
position:absolute ist hier zulässig — .dd-pointer ist kein PPOM-Wrapper-
Element im Sinne von Verbot (a) im Abschnittskopf (das sind ausschließlich
.ppom-wrapper/.ppom-field-wrapper/.form-row/.ppom-col), sondern ein
Kind-Element des ddslick-Widgets. Voraussetzung ist ein Positionierungs-
kontext auf .dd-select — der ist bereits gegeben, weil der Pfeil im
Ist-Zustand schon sichtbar rechts in der Box sitzt, wir erzeugen diesen
Kontext hier also nicht neu, sondern verlassen uns auf den bestehenden. */
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .dd-pointer {
position: absolute;
top: 50%;
right: 14px;
width: 12px;
height: 8px;
margin: 0;
border: 0;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233a424c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 8px;
transform: translateY(-50%);
transition: transform .15s ease;
}
/* Geöffneter Zustand: laut Aufgabenstellung wechselt ddslick per JS
"vermutlich" auf die Klasse dd-pointer-up — im kopierten Live-DOM ist nur
der geschlossene Zustand (dd-pointer-down) belegt, der Klassenname im
offenen Zustand also nicht verifiziert. Best-Effort-Drehung um 180°, dabei
bewusst erneut translateY(-50%) MIT der Rotation kombiniert (nicht nur
rotate(180deg) allein): beide Regeln setzen dieselbe Eigenschaft
"transform" auf demselben Element, und da diese Regel im Stylesheet nach
der Basisregel steht, würde ein alleiniges "rotate(180deg)" die
Basis-Positionierung (translateY(-50%)) vollständig ersetzen statt sie zu
ergänzen. Sollte der tatsächliche Klassenname abweichen, bleibt der Pfeil
im geöffneten Zustand lediglich unrotiert stehen (rein optische
Abweichung) — das Öffnen/Schließen der Liste selbst hängt an keiner
Regel dieses Abschnitts (siehe .dd-options unten, die display/visibility
von .dd-options/.dd-container/.dd-select bleiben unangetastet) und
funktioniert davon unabhängig weiter. */
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .dd-pointer-up {
transform: translateY(-50%) rotate(180deg);
}
/* Aufgeklappte Liste: weiße Fläche + derselbe Rahmen/Radius wie die übrigen
Felder. Bewusst KEINE display/position/visibility-Deklaration auf
.dd-options, .dd-container oder .dd-select — ddslick blendet .dd-options
selbst per Inline-Style ein/aus (im Live-DOM: style="overflow: auto;" als
Beleg, dass das Widget dieses Element aktiv per JS/Inline-Style steuert);
diese Regel hier ist rein optisch (Hintergrund/Rahmen/Radius) und rührt
an der Sichtbarkeitssteuerung nichts an. */
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .dd-options {
background-color: #fff;
border: 1px solid var(--wk-field-line);
border-radius: var(--wk-radius-sm);
}
/* Zeilen: text-decoration:none ergänzt das a.dd-option{display:block} aus
ppom-imageselect.css (dort nicht gesetzt — ohne unsere Regel würde die
Theme-Linkunterstreichung auf jeder Option durchschlagen). --wk-surface
als Hover-Fläche (dezent, bleibt von reinem Weiß unterscheidbar, siehe
Token-Tabelle), --wk-accent-soft für die aktuell ausgewählte Option
(.dd-option-selected) — hebt sie sichtbar von den unselektierten Zeilen
ab, ohne wie ein momentaner Hover auszusehen; dieselbe Farbkombination
(Hover=--wk-surface, aktiv=--wk-accent-soft) ist im übrigen Theme bereits
für Auswahlzustände etabliert. Farbe auf .dd-option-text zusätzlich
explizit wiederholt aus demselben Vererbungs-Vorbehalt wie bei
.dd-selected-text oben. */
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .dd-options .dd-option {
padding: 8px 14px;
color: var(--wk-ink);
text-decoration: none;
transition: background-color .15s ease;
}
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .dd-options .dd-option-text {
color: var(--wk-ink);
}
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .dd-options .dd-option:hover {
background-color: var(--wk-surface);
}
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .dd-options .dd-option-selected {
background-color: var(--wk-accent-soft);
}
/* Preis-Zusatz: --wk-cta statt der ererbten Optionstextfarbe, damit er sich
vom Optionstext abhebt, aber weiterhin AA-Kontrast (≥4,5:1) hält —
gemessen: 5,7:1 gegen #fff (geschlossener Zustand / Listenzeile im
Ruhezustand), 5,3:1 gegen --wk-surface (Hover-Fläche), 5,11:1 gegen
--wk-accent-soft (ausgewählte Zeile). font-weight:600 setzt ihn zusätzlich
optisch vom umgebenden Fließtext ab (600 statt der Textarea-üblichen 400,
aber unter dem 700 der Labels). */
.woocommerce div.product .ppom-wrapper .form-group.ppom-imageselect-design .ppom-option-label-price {
color: var(--wk-cta);
font-weight: 600;
}
/* ===========================================================================
PPOM — Feldtyp "switcher" (Ja/Nein-Segmentcontrol)
---------------------------------------------------------------------------
switcher.css des ppom-pro-Addons wird erst beim Feld-Rendering
nachgeladen und landet damit NACH dieser Datei (Ladereihenfolge live
verifiziert) — gleiche Spezifität reicht hier also nicht, siehe
Aufgabenstellung. Alle Selektoren unten nutzen deshalb konsequent densel-
ben Anker wie der restliche PPOM-Abschnitt (".woocommerce div.product
.ppom-wrapper .ppom-switcher-wrapper ..."), macht (0,5,1) für die beiden
Container-Regeln (.ppom-switcher-option-group / .ppom-option-marker) bzw.
(0,6,2) für die Label-/Preis-Regeln — das schlägt switcher.css' bloße
Klassen-Selektoren (z. B. ".ppom-option-marker{...}" = (0,1,0)) sicher.
Trotzdem braucht dieser Unterabschnitt kein einziges !important: switcher.css
setzt auf .ppom-switcher-option-group nur display/float/width/position/
background-color/border-radius/overflow/z-index, auf .ppom-option-marker
nur position/z-index/left/background-color/transition/border-radius/
bottom/top, und auf .ppom-label-indicator nur margin/padding-left
(!important)/font-weight/font-size/cursor — keine dieser Eigenschaften
wird unten erneut gesetzt (wir ERGÄNZEN border/box-shadow/min-height/
color/font-weight, wir ÜBERSCHREIBEN nichts Bestehendes). Ohne
Eigenschafts-Überschneidung entscheidet keine Ladereihenfolge und keine
Spezifität darüber, ob unsere Deklaration ankommt — sie kommt so oder so
an. Die höhere Spezifität dient hier ausschließlich der Absicherung gegen
noch unbekannte, später ladende Regeln aus theme.1.css (z. B. eine
generische label{color:...}- oder div{border:...}-Regel).
Die per Feldkonfiguration erzeugten Inline-!important-Regeln
(". .ppom-switcher-option-group{background-color:#e3e8ec!important}"
und ". .ppom-option-marker{background-color:#ffffff!important}",
für alle sechs Switcher-Felder bereits gesetzt) werden hier nicht
angefasst — background-color kommt in keiner Regel dieses Unterabschnitts
vor.
.ppom-indicator (das eigentliche, unsichtbare Radio-Input) bleibt
unangetastet — weder Selektor noch Eigenschaft dieses Unterabschnitts
bezieht sich darauf, visibility:hidden aus switcher.css bleibt also exakt
wie es ist. */
/* Die Pille bekommt einen Rahmen, den die Plugin-Konfiguration nicht setzen
kann (dort nur Hintergrund-/Marker-Farbe verfügbar), und eine Mindesthöhe
angelehnt an die 48px der übrigen Felder. box-sizing:border-box ist
defensive Mitnahme wie bei den input/select-Regeln oben (Bootstrap 4 setzt
es zwar bereits global über sein Reboot, siehe Kommentar bei den
Text-Inputs weiter oben, aber die eigene Deklaration macht die Regel von
dieser Annahme unabhängig) — ohne sie würde der neue 1px-Rahmen die Box
im ungünstigsten Fall 2px über die volle Breite hinauswachsen lassen.
Kein width/left/transform hier (das bleibt tabu, siehe .ppom-option-marker
unten) — .ppom-switcher-option-group ist die Pille selbst, nicht der
Marker, width:100% kommt bereits unverändert aus switcher.css. */
.woocommerce div.product .ppom-wrapper .ppom-switcher-wrapper .ppom-switcher-option-group {
box-sizing: border-box;
min-height: 48px;
border: 1px solid var(--wk-field-line);
}
/* Marker: weiß auf #e3e8ec ist mit 1,13:1 praktisch unsichtbar (siehe
Aufgabenstellung). Ein 1px-Rahmen in --wk-field-line macht den
ausgewählten Zustand als eigene Fläche erkennbar (gemessen: 3,03:1 Rahmen
gegen die #e3e8ec-Pille — über den 3:1 aus WCAG 1.4.11 für UI-Komponenten-
Kontraste). box-shadow nutzt das bereits vorhandene --wk-shadow-Token
(siehe Root-Variablen oben) statt eines neu erfundenen Werts — hebt den
weißen Marker zusätzlich sanft von der Pille ab (typisches Muster bei
Segmented Controls: der aktive Abschnitt wirkt "obenauf"). Ausdrücklich
KEIN width/transform/left hier: der Marker hat im Ausgangszustand
Breite 0 (noch keine Auswahl getroffen) und wird von ppom-pro-JS über
data-css-transform beim Klick auf width/left animiert — jede eigene
Deklaration dieser drei Eigenschaften hätte diese Animation gebrochen. */
.woocommerce div.product .ppom-wrapper .ppom-switcher-wrapper .ppom-option-marker {
border: 1px solid var(--wk-field-line);
box-shadow: var(--wk-shadow);
}
/* Labeltext in --wk-ink statt einer möglichen späteren Theme-Vorgabe
(theme.1.css lädt zuletzt und könnte z. B. über eine generische
label{color:...}-Regel hereinregieren — unsere (0,6,2)-Kette schlägt das
sicher). font-weight/font-size/cursor bleiben unangetastet, die kommen
bereits passend aus switcher.css (.ppom-label-indicator). */
.woocommerce div.product .ppom-wrapper .ppom-switcher-wrapper label.ppom-label-indicator {
color: var(--wk-ink);
}
/* Preis-Zusatz: dieselbe Farbwahl wie beim imageselect-Preis oben
(--wk-cta), damit "[+34,99€]"-Zusätze über beide Feldtypen hinweg
einheitlich wirken. Kontrast gemessen: 5,7:1 gegen #fff (Marker-Fläche
im ausgewählten Zustand), 4,62:1 gegen #e3e8ec (Pillen-Fläche im
unselektierten Zustand) — beide über den geforderten 4,5:1. */
.woocommerce div.product .ppom-wrapper .ppom-switcher-wrapper .ppom-option-label-price {
color: var(--wk-cta);
font-weight: 600;
}
/* ===========================================================================
PPOM — Feldtyp "file" (Datei-Upload, plupload/moxie)
---------------------------------------------------------------------------
Gemessener Ist-Zustand: .ppom-file-container (grauer Kasten, #ccc,
padding:25px aus ppom-style.css, Spezifität (0,1,0)) und der Auswahl-Knopf
(Bootstrap-Blau rgb(229,118,42), Rahmen 1px rgb(229,118,42), radius 4px,
Höhe 38px, weißer Text) aus ppom-bootstrap.css' ".ppom-wrapper
.btn-primary" (Spezifität (0,2,0), Hover (0,3,0), Fokus (0,3,0) — alle
drei laden VOR dieser Datei). Die übrigen Feldtypen oben (Text, Textarea,
Select, imageselect, switcher) sind bereits angeglichen, dieser
Unterabschnitt schließt den Upload-Typ als letzten an.
KRITISCHE RANDBEDINGUNG — Klickbereich (plupload/moxie): über dem Knopf
liegt ein per JS pixelgenau positioniertes, unsichtbares
-Knopf verschiebt
den sichtbaren Knopf gegenüber diesem unsichtbaren Eingabefeld — ein
Klick würde dann ins Leere gehen bzw. keinen Dateidialog mehr öffnen.
Deshalb ausnahmslos verboten in diesem Unterabschnitt:
- padding auf .ppom-file-container (bleibt bei ppom-style.css' 25px),
- height/width/display/margin/position auf dem -Knopf,
- jede eigene Regel für .moxie-shim oder input[type="file"] darin.
Einzige sanktionierte Geometrieänderung: ein 1px-Rahmen auf
.ppom-file-container (vorher: gar kein Rahmen, 0px) — verschiebt den
Inhalt (und damit den Knopf) um 1px nach innen, der 38px hohe Shim
überlappt den Knopf danach weiterhin vollständig. border-radius/
background-color/color sind rein optisch und ändern keine Box-Geometrie.
.ppom-file-container ist selbst KEIN PPOM-Wrapper-Element im Sinne der
vier verbotenen Subjekte (.ppom-wrapper/.ppom-field-wrapper/.form-row/
.ppom-col, siehe Verbot (a) im Abschnittskopf oben) — es ist der
feldtyp-spezifische Innencontainer des Upload-Widgets und darf daher,
wie schon .dd-select/.ppom-switcher-option-group in den Unterabschnitten
oben, selbst Subjekt sein. Ein zusätzlicher .form-group-Vorfahre (wie bei
den Basis-Feldregeln oben) ist hier verzichtbar: .ppom-file-container,
.ppom-dragdrop-text und .ppom-field-notice sind PPOM-eigene Klassen ohne
Bootstrap-Mehrfachnutzung durch Fremdpakete (anders als .form-control/
.form-group/.form-row, siehe Konvention (b) im Abschnittskopf) — der
.ppom-wrapper-Anker allein reicht hier bereits als Abgrenzung.
Der englische Hinweistext "Accepted formats: JPG,PDF,PNG. Max size:
10MB" bleibt bewusst unangetastet — das ist Plugin-Ausgabe (PHP/i18n),
keine CSS-Aufgabe.
Kontrast gemessen (gegen die neue Dropzone-Fläche --wk-surface #F2F3F3):
--wk-ink-2 9,46:1, --wk-muted 5,57:1 (>= 4,5:1, Fließtext-Anforderung
erfüllt), gestrichelter Rahmen --wk-field-line 3,47:1 (>= 3:1 aus WCAG
1.4.11 für UI-Komponenten-Kontraste). Knopf: weißer Text auf --wk-cta
5,7:1, auf --wk-cta-hover 6,93:1. */
/* Dropzone-Fläche: helle Fläche statt #ccc, 1px GESTRICHELTER Rahmen (statt
des durchgezogenen Rahmens der übrigen Felder) markiert bewusst die
Sonderrolle als Dropzone — dieselbe Konvention wie bei Datei-Upload-
Bereichen üblich, hebt sich von den durchgezogenen Feldrändern ab. Kein
box-sizing:border-box nötig: der Container hat kein explizites width,
wächst also mit width:auto ohnehin exakt auf die verfügbare Breite — ein
neuer Rahmen verschiebt dabei nur den Inhalt nach innen (siehe
Randbedingung oben), nicht die Außenmaße der Box. padding bleibt
unangetastet (siehe Randbedingung oben). */
.woocommerce div.product .ppom-wrapper .ppom-file-container {
background-color: var(--wk-surface);
border: 1px dashed var(--wk-field-line);
border-radius: var(--wk-radius-sm);
}
/* Knopf: nur background-color/color/border-color/border-radius, bewusst
kein border-Shorthand (der gemessene Ist-Zustand hat bereits einen
1px-Rahmen — ein Shorthand hier ginge das Risiko einer ungewollten
Breitenänderung ein, siehe Randbedingung oben) und keins der oben
verbotenen Layout-Properties. (0,5,2)
[.woocommerce + .product + .ppom-wrapper + .ppom-file-container +
.btn-primary, Elemente div/a] schlägt ppom-bootstrap.css'
".ppom-wrapper .btn-primary" (0,2,0) unabhängig von der Ladereihenfolge
klar. */
.woocommerce div.product .ppom-wrapper .ppom-file-container a.btn-primary {
background-color: var(--wk-cta);
color: #fff;
border-color: var(--wk-cta);
border-radius: var(--wk-radius-sm);
}
/* Hover — :not(:focus) aus demselben Grund wie bei den übrigen Feldern
(siehe "Hover vs. Fokus" im Abschnittskopf oben): ohne dieses :not(:focus)
hätte die Hover-Regel dank der zusätzlichen Pseudoklasse automatisch mehr
Spezifität als die Fokus-Regel und würde den Fokus-Ring verdrängen, wenn
ein Maus-Klick Hover UND Fokus gleichzeitig setzt. :not(:disabled) bleibt
hier bewusst weg: :disabled gilt laut Spezifikation nur für "listed"
formularassoziierte Elemente — ein ist keins davon, die Pseudoklasse
würde auf diesem Element also ohnehin nie matchen. */
.woocommerce div.product .ppom-wrapper .ppom-file-container a.btn-primary:hover:not(:focus) {
background-color: var(--wk-cta-hover);
border-color: var(--wk-cta-hover);
}
/* Fokus: ersetzt ppom-bootstrap.css' ".ppom-wrapper .btn-primary:focus"
(box-shadow 0 0 0 .2rem rgba(38,143,255,.5), Spezifität (0,3,0)) durch
denselben Marken-Halo wie bei den übrigen Feldern oben (rgb(229,118,42)
= --wk-cta als Literal, CSS-Variablen lassen sich nicht in rgba()
auflösen). Kein nacktes outline:none: der transparente 2px-Outline
bleibt als Träger stehen, damit der Windows High-Contrast-Mode ihn
trotzdem zeichnet — identisches Muster wie bei Input/Select/Textarea
oben. */
.woocommerce div.product .ppom-wrapper .ppom-file-container a.btn-primary:focus,
.woocommerce div.product .ppom-wrapper .ppom-file-container a.btn-primary:focus-visible {
border-color: var(--wk-cta);
box-shadow: 0 0 0 3px rgba(229,118,42,.25);
outline: 2px solid transparent;
outline-offset: 2px;
}
/* "Foto reinziehen": display:block/font-style:italic kommen unverändert
aus ppom-style.css (0,1,0) — wir ergänzen nur die Farbe, keine
Kollision. */
.woocommerce div.product .ppom-wrapper .ppom-file-container .ppom-dragdrop-text {
color: var(--wk-ink-2);
}
/* Hinweistext (Format/Größe, bewusst nicht übersetzt — siehe Abschnittskopf
oben): display:block/font-size:14px kommen unverändert aus
ppom-style.css (0,1,1) — wir ergänzen nur die Farbe. --wk-muted liefert
5,57:1 gegen die neue --wk-surface-Fläche, über den 4,5:1 aus SC 1.4.3
für Fließtext. */
.woocommerce div.product .ppom-wrapper .ppom-file-container span.ppom-field-notice {
color: var(--wk-muted);
}
/* ==========================================================================
AP24 Keyfacts (Kurzbeschreibung aus der PE-Pipeline, content/render.py)
Markup:
…
+0,8 kW
Leistung bei 9.000 U/min …
…
Icons als CSS-Mask (Lucide-Pfade), Farbe über background-color.
========================================================================== */
.woocommerce-product-details__short-description .ap24-teaser {
margin: 0 0 12px;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
color: var(--wk-ink);
}
:is(.woocommerce-product-details__short-description, .ap24-keyfacts) ul.ap24-usp {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
margin: 0 0 10px;
padding: 0;
list-style: none;
}
.ap24-usp .ap24-usp__item {
position: relative;
display: flex;
flex-direction: column;
gap: 1px;
margin: 0;
padding: 7px 10px 7px 36px;
justify-content: center;
background: var(--wk-surface);
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius-sm);
}
.ap24-usp .ap24-usp__item::after {
content: "";
position: absolute;
left: 11px;
top: 50%;
width: 16px;
height: 16px;
margin-top: -8px;
background-color: var(--wk-accent);
-webkit-mask: var(--ap24-icon) center / contain no-repeat;
mask: var(--ap24-icon) center / contain no-repeat;
}
.ap24-usp--leistung {
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E");
}
.ap24-usp--drehmoment {
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
}
.ap24-usp--gewicht {
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cpath d='M6.5 8a2 2 0 0 0-1.905 1.46L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.925-2.54L19.4 9.5A2 2 0 0 0 17.48 8Z'/%3E%3C/svg%3E");
}
.ap24-usp--einbau {
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}
.ap24-usp .ap24-usp__wert {
font-family: "Barlow Condensed", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.15;
letter-spacing: .01em;
color: var(--wk-ink);
}
.ap24-usp .ap24-usp__label {
font-size: 11.5px;
font-weight: 500;
line-height: 1.3;
color: var(--wk-muted);
}
/* Container unter den Zahlungs-Icons (product-page.js verschiebt die Kacheln dorthin) */
.ap24-keyfacts {
margin-top: 16px;
}
.ap24-keyfacts > :last-child {
margin-bottom: 0;
}
body.wk-pp-init .ap24-keyfacts {
opacity: 0;
animation: wkPPReveal 0s linear 2.5s forwards;
}
/* Zulassungs-Hinweis */
:is(.woocommerce-product-details__short-description, .ap24-keyfacts) p.ap24-badge {
display: flex;
align-items: flex-start;
gap: 6px;
margin: 10px 0 14px;
padding: 0;
font-size: 12.5px;
font-weight: 500;
line-height: 1.4;
color: var(--wk-muted);
}
:is(.woocommerce-product-details__short-description, .ap24-keyfacts) p.ap24-badge::before {
content: "";
flex: 0 0 14px;
height: 14px;
margin-top: 2px;
background-color: var(--ap24-badge-icon, currentColor);
-webkit-mask: var(--ap24-icon) center / contain no-repeat;
mask: var(--ap24-icon) center / contain no-repeat;
}
:is(.woocommerce-product-details__short-description, .ap24-keyfacts) p.ap24-badge--race {
--ap24-badge-icon: var(--wk-accent);
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
:is(.woocommerce-product-details__short-description, .ap24-keyfacts) p.ap24-badge--street {
--ap24-badge-icon: var(--wk-green);
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
@media (max-width: 340px) {
:is(.woocommerce-product-details__short-description, .ap24-keyfacts) ul.ap24-usp {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
AP24 Downloads (aus dem Pipeline-Block "Downloads" der Beschreibung,
umgebaut von product-page.js → ap24Downloads)
========================================================================== */
.ap24-downloads {
margin: 28px 0;
scroll-margin-top: 120px;
}
.ap24-downloads .ap24-downloads__title {
margin: 0 0 12px;
font-family: "Barlow Condensed", sans-serif;
font-size: 20px;
font-weight: 700;
font-style: italic;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--wk-ink);
}
.ap24-downloads__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
}
.ap24-downloads a.ap24-dl {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--wk-line);
border-radius: var(--wk-radius-sm);
color: var(--wk-ink);
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ap24-downloads a.ap24-dl:hover,
.ap24-downloads a.ap24-dl:focus-visible {
border-color: var(--wk-accent);
box-shadow: var(--wk-shadow);
transform: translateY(-1px);
color: var(--wk-ink);
text-decoration: none;
}
.ap24-dl__icon {
flex: 0 0 40px;
height: 40px;
border-radius: 10px;
background: var(--wk-accent-soft);
position: relative;
}
.ap24-dl__icon::after,
.ap24-dl__arrow,
.ap24-dl-jump__icon {
background-color: var(--wk-accent);
-webkit-mask: var(--ap24-icon) center / contain no-repeat;
mask: var(--ap24-icon) center / contain no-repeat;
}
.ap24-dl__icon::after {
content: "";
position: absolute;
inset: 10px;
}
.ap24-dl__icon--doc,
.ap24-dl-jump__icon--doc {
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}
.ap24-dl-jump__icon--doc {
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
.ap24-dl__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.ap24-dl__label {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.ap24-dl__meta {
font-size: 12px;
color: var(--wk-muted);
}
.ap24-dl__arrow {
flex: 0 0 18px;
height: 18px;
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
/* Sprungzeile in der Buy-Box */
a.ap24-dl-jump {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 14px;
font-size: 12.5px;
font-weight: 600;
color: var(--wk-ink-2);
text-decoration: none;
}
a.ap24-dl-jump:hover,
a.ap24-dl-jump:focus-visible {
color: var(--wk-accent);
text-decoration: underline;
}
.ap24-dl-jump__icon {
flex: 0 0 14px;
height: 14px;
--ap24-icon-unused: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
/* Sprungzeilen-Container (Downloads + Sound) */
.ap24-dl-jumps {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin: 2px 0 14px;
}
.ap24-dl-jumps a.ap24-dl-jump {
margin: 0;
}
/* --- Sound / Hoerproben ------------------------------------------------- */
.ap24-dl__icon--play,
.ap24-dl-jump__icon--play {
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5.14v13.72a1 1 0 0 0 1.5.86l11.04-6.86a1 1 0 0 0 0-1.72L9.5 4.28A1 1 0 0 0 8 5.14Z'/%3E%3C/svg%3E");
}
.ap24-dl-jump__icon--play {
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
}
.ap24-downloads a.ap24-snd {
position: relative;
overflow: hidden;
cursor: pointer;
}
.ap24-snd .ap24-dl__icon {
background: var(--wk-accent);
border-radius: 50%;
}
.ap24-snd .ap24-dl__icon::after {
inset: 12px 11px 12px 13px;
background-color: #fff;
}
.ap24-snd.is-playing .ap24-dl__icon::after {
inset: 12px;
--ap24-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E");
}
.ap24-downloads a.ap24-snd.is-playing {
border-color: var(--wk-accent);
}
/* Fortschrittsleiste am unteren Kartenrand */
.ap24-downloads a.ap24-snd::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: var(--ap24-progress, 0%);
background: var(--wk-accent);
transition: width .25s linear;
}
/* Equalizer-Balken rechts (statisch, animiert beim Abspielen) */
.ap24-snd__wave {
flex: 0 0 20px;
height: 16px;
background:
linear-gradient(var(--wk-accent), var(--wk-accent)) 0 100% / 4px 40% no-repeat,
linear-gradient(var(--wk-accent), var(--wk-accent)) 8px 100% / 4px 80% no-repeat,
linear-gradient(var(--wk-accent), var(--wk-accent)) 16px 100% / 4px 60% no-repeat;
opacity: .45;
}
.ap24-snd.is-playing .ap24-snd__wave {
opacity: 1;
animation: ap24Eq .9s ease-in-out infinite alternate;
}
@keyframes ap24Eq {
0% { background-size: 4px 40%, 4px 80%, 4px 60%; }
50% { background-size: 4px 90%, 4px 35%, 4px 75%; }
100% { background-size: 4px 55%, 4px 95%, 4px 30%; }
}
@media (prefers-reduced-motion: reduce) {
.ap24-snd.is-playing .ap24-snd__wave { animation: none; }
.ap24-downloads a.ap24-snd::after { transition: none; }
}