/**
 * 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 #3498DB, CTA #1f6aa8, WCAG AA on #fff.
 *
 * @package WK_YOOtheme_Child
 * @version 2.3.0
 */

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
    --wk-accent:        #3498DB;
    --wk-cta:           #1f6aa8;   /* WCAG AA with #fff */
    --wk-cta-hover:     #1a5d93;
    --wk-accent-soft:   #eaf4fb;
    --wk-ink:           #15181c;
    --wk-ink-2:         #3a424c;
    --wk-muted:         #5b6470;
    --wk-surface:       #f4f7f9;
    --wk-line:          #e3e8ec;
    --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); /* #3498DB — 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):
     <div class="woocommerce-product-details__short-description">
       <p>✓ <strong>verschiedene Farben</strong><br>
          ✓ <strong>passend auf Brembo-Anlagen</strong><br>
          ✓ <strong>reduziert Armpump</strong></p>
     </div>

   Strategy: hide the literal "✓" via font-size 0 on the parent,
   and inject a real SVG checkmark via ::before on each <br>-delimited chunk.
   HOWEVER: <br> does not create block-level elements, so we cannot reliably
   target individual lines with ::before. Instead we:
   1. Keep the literal ✓ visible but style it green + bold.
   2. Style the entire block as a clean USP strip.
   ========================================================================== */

.woocommerce-product-details__short-description {
    margin-bottom: 20px;
}

/* The <p> 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%,
        #f4f7f9 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%,
        #f4f7f9 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); /* #3498DB */
}

/* 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); /* #3498DB — 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 <select> 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(31,106,168,.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(31,106,168,.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;
    }
}