/**
 * WC Product Recommendations - Solario24 Theme Compatible
 * Version: 3.43.1 - Restored FBT layout from v3.40, mobile shows 2 products
 */

/* ============================================
   FORCE SECTION VISIBILITY - MAXIMUM PRIORITY
   Theme/JS may hide elements - use extreme specificity
   ============================================ */

/* Ultra-specific selectors to override any theme CSS */
html body .wc-rec-section,
html body div.wc-rec-section,
html body section.wc-rec-section,
.woocommerce-page .wc-rec-section,
.single-product .wc-rec-section,
.woocommerce .wc-rec-section,
#content .wc-rec-section,
#main .wc-rec-section,
.site-content .wc-rec-section,
.entry-content .wc-rec-section,
.product .wc-rec-section,
.type-product .wc-rec-section,
[class*="product"] .wc-rec-section,
html:not(.jsload) .wc-rec-section,
.main-extras .wc-rec-section,
body:not(.loading) .wc-rec-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 100px !important;
    overflow: visible !important;
    max-height: none !important;
    transform: none !important;
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    clip: auto !important;
    clip-path: none !important;
}

/* Force carousel wrapper visible with maximum specificity */
html body .wc-rec-carousel-wrapper,
html body div.wc-rec-carousel-wrapper,
.wc-rec-section .wc-rec-carousel-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 50px !important;
    max-height: none !important;
    transform: none !important;
    overflow: visible !important;
}

/* Force carousel and track visible */
html body .wc-rec-carousel,
html body div.wc-rec-carousel,
.wc-rec-section .wc-rec-carousel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 300px !important;
    max-height: none !important;
    transform: none !important;
    overflow: hidden !important;
}

html body .wc-rec-track,
html body div.wc-rec-track,
.wc-rec-carousel .wc-rec-track {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 280px !important;
    max-height: none !important;
}

/* Force slides to show with maximum specificity */
html body .wc-rec-slide,
html body div.wc-rec-slide,
.wc-rec-track .wc-rec-slide {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 250px !important;
    max-height: none !important;
    transform: none !important;
    position: relative !important;
}

/* Force product cards inside slides to be visible */
html body .wc-rec-slide > *,
html body .wc-rec-slide .product,
html body .wc-rec-slide .type-product,
.wc-rec-slide li.product {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 200px !important;
}

/* ============================================
   RESET ALL STYLES IN OUR SECTION
   ============================================ */
.wc-rec-section,
.wc-rec-section * {
    box-sizing: border-box !important;
}

/* ============================================
   SECTION CONTAINER - MORE PADDING
   ============================================ */
.wc-rec-section {
    margin: 40px 0 !important;
    padding: 40px 30px !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #f9f9f9 !important;
    border-radius: 12px !important;
    border: 1px solid #e5e5e5 !important;
}

/* TITLE - CENTERED */
.wc-rec-section > h2 {
    font-size: 1.5em !important;
    font-weight: 600 !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    color: #333 !important;
    text-align: center !important;
}

/* ============================================
   CAROUSEL WRAPPER & NAVIGATION
   ============================================ */
.wc-rec-carousel-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    margin-bottom: 25px !important;
}

.wc-rec-nav {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #ff0000 !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wc-rec-nav:hover {
    background: #6ea832 !important;
}

.wc-rec-nav:disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.wc-rec-nav svg {
    width: 18px !important;
    height: 18px !important;
}

/* ============================================
   CAROUSEL & TRACK
   ============================================ */
.wc-rec-carousel {
    flex: 1 !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

.wc-rec-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    transition: transform 0.4s ease !important;
}

/* ============================================
   SLIDE - 5 ITEMS ON DESKTOP (with proper gap 20px * 4 = 80px)
   ============================================ */
.wc-rec-slide {
    flex: 0 0 calc((100% - 80px) / 5) !important;
    max-width: calc((100% - 80px) / 5) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   PAGINATION DOTS
   ============================================ */
.wc-rec-dots {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wc-rec-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #ccc !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

.wc-rec-dot:hover {
    background: #999 !important;
}

.wc-rec-dot.active {
    background: #ff0000 !important;
}

/* ============================================
   PRODUCT CARD - EQUAL HEIGHT, MORE SPACING
   ============================================ */
.wc-rec-slide > div,
.wc-rec-slide .product,
.wc-rec-slide .type-product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 16px !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    height: 480px !important; /* Fixed height for equal cards */
    min-height: 480px !important;
    max-height: 480px !important;
}

.wc-rec-slide .product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

.wc-rec-slide .product-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

/* ============================================
   THUMBNAIL WRAPPER - FIXED HEIGHT
   ============================================ */
.wc-rec-slide .thumbnail-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
}

.wc-rec-slide .thumbnail-wrapper a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* MAIN PRODUCT IMAGE */
.wc-rec-slide .thumbnail-wrapper img.attachment-woocommerce_thumbnail,
.wc-rec-slide .thumbnail-wrapper img.wp-post-image,
.wc-rec-slide .thumbnail-wrapper img.size-woocommerce_thumbnail {
    width: 100% !important;
    height: 150px !important;
    max-width: 100% !important;
    max-height: 150px !important;
    object-fit: contain !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

/* BADGE IMAGES - VISIBLE, SMALL, TOP LEFT */
.wc-rec-slide .thumbnail-wrapper img:not(.attachment-woocommerce_thumbnail):not(.wp-post-image):not(.size-woocommerce_thumbnail) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 55px !important;
    max-height: 22px !important;
    z-index: 10 !important;
    object-fit: contain !important;
    display: block !important;
}

/* Stack multiple badges vertically */
.wc-rec-slide .thumbnail-wrapper a > img:not(.attachment-woocommerce_thumbnail):not(.wp-post-image):nth-of-type(1) {
    top: 0 !important;
}

.wc-rec-slide .thumbnail-wrapper a > img:not(.attachment-woocommerce_thumbnail):not(.wp-post-image):nth-of-type(2) {
    top: 24px !important;
}

.wc-rec-slide .thumbnail-wrapper a > img:not(.attachment-woocommerce_thumbnail):not(.wp-post-image):nth-of-type(3) {
    top: 48px !important;
}

/* Sale badge - ROUND, TOP LEFT (not right!) */
.wc-rec-slide .onsale {
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    right: auto !important;
    font-size: 9px !important;
    padding: 4px 8px !important;
    z-index: 15 !important;
    border-radius: 50px !important;
    min-width: auto !important;
    min-height: auto !important;
    line-height: 1 !important;
    background: #c00 !important;
    color: #fff !important;
}

/* ============================================
   PRODUCT TITLE - BOLD - FIXED HEIGHT
   ============================================ */
.wc-rec-slide .woocommerce-loop-product__title,
.wc-rec-slide h2.woocommerce-loop-product__title {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    height: 54px !important; /* Fixed, not min */
    min-height: 54px !important;
    max-height: 54px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    color: #333 !important;
    font-weight: 700 !important;
}

/* ============================================
   STAR RATING - GOLD COLOR, SHOW COUNT WITHOUT "RATINGS"
   ============================================ */
.wc-rec-slide .star-rating {
    display: inline-block !important;
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    color: #f5c518 !important;
    overflow: hidden !important;
    position: relative !important;
    width: 5em !important;
    height: 1.1em !important;
}

.wc-rec-slide .star-rating::before {
    color: #f5c518 !important;
}

.wc-rec-slide .star-rating span::before {
    color: #f5c518 !important;
}

/* Rating container - FIXED HEIGHT for consistency */
.wc-rec-slide .woocommerce-product-rating {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    font-size: 0 !important; /* Hide base text */
    height: 16px !important; /* Fixed height, not min-height */
    min-height: 16px !important;
    max-height: 16px !important;
}

/* Allow star-rating to show */
.wc-rec-slide .woocommerce-product-rating .star-rating {
    font-size: 11px !important;
}

/* HIDE the word "Ratings" but show the number - target links with #reviews */
.wc-rec-slide .woocommerce-review-link,
.wc-rec-slide .woocommerce-product-rating > a,
.wc-rec-slide .woocommerce-product-rating a[href*="#reviews"],
.wc-rec-slide a[href*="reviews"],
.wc-rec-slide .review-link {
    display: none !important;
    visibility: hidden !important;
}

/* Hide any text containing "Ratings" or "Rating" */
.wc-rec-slide .rating-count,
.wc-rec-slide .count {
    display: none !important;
}

/* ============================================
   PRICE - WITH SALE PRICE SUPPORT - FIXED HEIGHT
   Order: OLD PRICE (left, smaller) → NEW PRICE (right, bigger)
   ============================================ */
.wc-rec-slide .price {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    font-size: 18px !important;
    margin: 0 0 10px 0 !important;
    font-weight: 700 !important;
    color: #82bb41 !important;
    line-height: 1.3 !important;
    height: 52px !important; /* Fixed height for price area */
    min-height: 52px !important;
    max-height: 52px !important;
    overflow: visible !important; /* Allow del/ins to show */
}

/* Regular price amount in green */
.wc-rec-slide .price .woocommerce-Price-amount,
.wc-rec-slide .price bdi {
    color: #82bb41 !important;
}

/* Old price crossed out for sale items - LEFT side, SMALLER */
.wc-rec-slide .price del,
.wc-rec-slide del,
.wc-rec-slide .price > del,
.wc-rec-slide .regular-price,
.wc-rec-slide .price .amount:first-child:not(:only-child) {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 11px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    margin: 0 !important;
    font-weight: 400 !important;
    position: relative !important;
    z-index: 1 !important;
    order: 1 !important; /* Force old price to be first (left) */
}

.wc-rec-slide .price del span,
.wc-rec-slide .price del .woocommerce-Price-amount,
.wc-rec-slide .price del bdi,
.wc-rec-slide del span,
.wc-rec-slide del .woocommerce-Price-amount,
.wc-rec-slide del bdi,
html body .wc-rec-slide .price del,
html body .wc-rec-slide .price del span,
html body .wc-rec-slide .price del bdi,
.woocommerce .wc-rec-slide .price del,
.woocommerce .wc-rec-slide .price del span {
    color: #999 !important;
    text-decoration: line-through !important;
    display: inline !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

/* Sale price - RIGHT side, new price in red, BIGGER than old price */
.wc-rec-slide .price ins {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-decoration: none !important;
    background: none !important;
    color: #c00 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    order: 2 !important; /* Force new price to be second (right) */
}

.wc-rec-slide .price ins span,
.wc-rec-slide .price ins .woocommerce-Price-amount,
.wc-rec-slide .price ins bdi {
    color: #c00 !important;
    text-decoration: none !important;
    background: none !important;
}

/* ============================================
   HIDE MONTHLY PAYMENT TEXT COMPLETELY
   ============================================ */
.wc-rec-slide .price-suffix,
.wc-rec-slide .woocommerce-price-suffix,
.wc-rec-slide .price small,
.wc-rec-slide .price + span,
.wc-rec-slide .price ~ small,
.wc-rec-slide .price + div,
.wc-rec-slide .price + p,
.wc-rec-slide .price ~ p,
.wc-rec-slide [class*="monthly"],
.wc-rec-slide [class*="monatlich"],
.wc-rec-slide [class*="Monatlich"],
.wc-rec-slide [class*="ratenzahlung"],
.wc-rec-slide [class*="Ratenzahlung"],
.wc-rec-slide .financing-info,
.wc-rec-slide .price-per-month,
.wc-rec-slide span[class*="ab-"],
.wc-rec-slide .monthly-price,
.wc-rec-slide .wc-price-suffix,
.wc-rec-slide .suffix {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide any element after price that contains monthly payment info */
.wc-rec-slide .price ~ *:not(.add_to_cart_button):not(.button):not(.stock):not(.availability) {
    display: none !important;
}

/* ============================================
   ADD TO CART BUTTON - VERY COMPACT
   ============================================ */
.wc-rec-slide .add_to_cart_button,
.wc-rec-slide a.add_to_cart_button {
    font-size: 8px !important;
    padding: 4px 6px !important;
    margin: auto 0 0 0 !important;
    border-radius: 4px !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    background: #ff0000 !important;
    color: #fff !important;
    border: none !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    height: 26px !important; /* Fixed button height - even smaller */
    min-height: 26px !important;
    max-height: 26px !important;
}

.wc-rec-slide .add_to_cart_button:hover {
    background: #6ea832 !important;
}

.wc-rec-slide .add_to_cart_button svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

/* ============================================
   DELIVERY INFO - SHOW COMPACT VERSION
   ============================================ */
/* Hide verbose delivery info */
.wc-rec-slide .delivery-info,
.wc-rec-slide .lieferzeit-wrapper,
.wc-rec-slide .delivery-wrapper,
.wc-rec-slide .shipping-info,
.wc-rec-slide [class*="lieferzeit"],
.wc-rec-slide [class*="Lieferzeit"],
.wc-rec-slide [class*="versand"],
.wc-rec-slide [class*="Versand"] {
    display: none !important;
    visibility: hidden !important;
}

/* Show stock status in compact form - FIXED HEIGHT - FORCE VISIBLE */
.wc-rec-slide .stock,
.wc-rec-slide .in-stock,
.wc-rec-slide .availability,
.wc-rec-slide .stock-status,
.wc-rec-slide p.stock,
.wc-rec-slide span.stock,
.wc-rec-slide .product-availability {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 10px !important;
    color: #82bb41 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    height: 20px !important; /* Fixed height */
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 20px !important;
}

.wc-rec-slide .out-of-stock {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 10px !important;
    color: #c00 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 20px !important;
}

/* ============================================
   RESPONSIVE - 4 ITEMS
   ============================================ */
@media (max-width: 1200px) {
    .wc-rec-slide {
        flex: 0 0 calc((100% - 48px) / 4) !important;
        max-width: calc((100% - 48px) / 4) !important;
    }
}

/* ============================================
   RESPONSIVE - 3 ITEMS
   ============================================ */
@media (max-width: 991px) {
    .wc-rec-slide {
        flex: 0 0 calc((100% - 32px) / 3) !important;
        max-width: calc((100% - 32px) / 3) !important;
    }

    .wc-rec-section {
        padding: 30px 20px !important;
    }

    .wc-rec-section > h2 {
        font-size: 1.3em !important;
    }
}

/* ============================================
   RESPONSIVE - 2 ITEMS
   ============================================ */
@media (max-width: 767px) {
    .wc-rec-slide {
        flex: 0 0 calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
    }

    /* Hide navigation arrows on mobile */
    .wc-rec-nav {
        display: none !important;
    }

    .wc-rec-section > h2 {
        font-size: 1.2em !important;
    }

    .wc-rec-track {
        gap: 12px !important;
    }

    .wc-rec-section {
        padding: 25px 15px !important;
    }
}

/* ============================================
   RESPONSIVE - MOBILE: 2 CARDS (like FBT section)
   ============================================ */
@media (max-width: 575px) {
    .wc-rec-slide {
        /* 2 cards visible, 1 gap of 10px */
        flex: 0 0 calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
    }

    .wc-rec-carousel-wrapper {
        gap: 0 !important;
    }

    /* Hide navigation arrows on mobile */
    .wc-rec-nav {
        display: none !important;
    }

    .wc-rec-section {
        padding: 25px 15px !important;
    }

    .wc-rec-track {
        gap: 10px !important;
    }

    .wc-rec-slide > div,
    .wc-rec-slide .product,
    .wc-rec-slide .type-product {
        min-height: 340px !important;
        padding: 12px !important;
    }
}

/* ============================================
   HIDE ALL UNWANTED TEXT VIA CSS PSEUDO SELECTORS
   ============================================ */
/* Target text that contains "Monatlich" via custom attribute we'll add via JS */
.wc-rec-slide [data-hide-monthly="true"] {
    display: none !important;
}

/* Additional aggressive hiding of any text matching common patterns */
.wc-rec-slide .woocommerce-Price-suffix,
.wc-rec-slide .suffix {
    display: none !important;
}

/* ============================================
   CART PAGE - MORE SPACING ABOVE
   ============================================ */
.woocommerce-cart .wc-rec-section {
    margin-top: 60px !important;
    clear: both !important;
    width: 100% !important;
}

/* Add spacing after cart totals */
.woocommerce-cart .cart-collaterals {
    margin-bottom: 60px !important;
}

.woocommerce-cart .cross-sells {
    margin-bottom: 60px !important;
}

/* Cart page: same slide sizes as default */

/* ============================================
   CHECKOUT PAGE
   ============================================ */
.woocommerce-checkout .wc-rec-section {
    margin: 40px 0 !important;
    clear: both !important;
}

/* ============================================
   HIDE "WARENKORB ANZEIGEN" LINK AFTER ADD-TO-CART
   ============================================ */
/* Hide the orange "View Cart" link that appears after adding to cart */
.added_to_cart,
a.added_to_cart,
.woocommerce a.added_to_cart,
body a.added_to_cart.wc-forward,
.wc-rec-slide a.added_to_cart,
.product a.added_to_cart {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ============================================
   UTILITY STYLES
   ============================================ */
.wc-rec-loading {
    text-align: center !important;
    padding: 40px !important;
    opacity: 0.5 !important;
}

.wc-rec-no-products {
    text-align: center !important;
    padding: 20px !important;
    color: #666 !important;
}

/* Override WooCommerce grid */
.wc-rec-section ul.products,
.wc-rec-section .products {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wc-rec-section ul.products li,
.wc-rec-section .products li {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================

/* ============================================
   CUSTOM PRODUCT CARD TEMPLATE (v3.20.0) - COMPACT LAYOUT
   Matches reference screenshot exactly
   ============================================ */

/* Product wrapper - COMPACT 300px total */
.wc-rec-slide .product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease !important;
}

.wc-rec-slide .product-wrapper:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Thumbnail - 120px */
.wc-rec-slide .thumbnail-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
}

.wc-rec-slide .thumbnail-wrapper img {
    width: 100% !important;
    height: 120px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Sale badge - LEFT, shows "SALE" */
.wc-rec-slide .wc-rec-badge-sale {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    background: #c00 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    z-index: 2 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

/* Content wrapper - mehr padding */
.wc-rec-slide .content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 10px !important;
    flex: 1 !important;
    gap: 4px !important;
}

/* Title - 2-3 lines, 50px */
.wc-rec-slide .content-wrapper .woocommerce-loop-product__title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

/* Rating - 18px */
.wc-rec-slide .content-wrapper .woocommerce-product-rating {
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
}

.wc-rec-slide .content-wrapper .woocommerce-product-rating .star-rating {
    font-size: 11px !important;
    height: 11px !important;
}

.wc-rec-slide .content-wrapper .wc-rec-rating-count {
    font-size: 10px !important;
    color: #666 !important;
}

.wc-rec-slide .content-wrapper .wc-rec-rating-spacer {
    height: 18px !important;
}

/* Price - prominent 50px */
.wc-rec-slide .content-wrapper .product-price-cart {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.wc-rec-slide .content-wrapper .product-price-cart .price {
    display: flex !important;
    flex-direction: column !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    overflow: visible !important;
    gap: 2px !important;
}

/* Old price (del tag) */
.wc-rec-slide .wc-rec-old-price,
.wc-rec-slide .wc-rec-old-price .woocommerce-Price-amount {
    display: block !important;
    font-size: 11px !important;
    color: #999 !important;
    text-decoration: line-through !important;
}

/* Sale price (ins tag) */
.wc-rec-slide .wc-rec-sale-price,
.wc-rec-slide .wc-rec-sale-price .woocommerce-Price-amount {
    display: block !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    color: #00a651 !important;
    font-size: 16px !important;
}

/* Button - 36px, full width, green */
.wc-rec-slide .product-button-wrapper {
    margin: 0 !important;
}

.wc-rec-slide .product-button-wrapper .button,
.wc-rec-slide .product-button-wrapper .add_to_cart_button {
    font-size: 11px !important;
    padding: 8px 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    background: #ff0000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    width: 100% !important;
    transition: background 0.2s ease !important;
}

.wc-rec-slide .product-button-wrapper .button:hover,
.wc-rec-slide .product-button-wrapper .add_to_cart_button:hover {
    background: #6fa435 !important;
}

.wc-rec-slide .product-button-wrapper svg {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
}

/* Stock Status - UNDER button, 20px */
.wc-rec-slide .product-stock-status {
    display: flex !important;
    align-items: center !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
}

.wc-rec-slide .product-stock-status .stock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    color: #00a651 !important;
}

.wc-rec-slide .product-stock-status svg {
    flex-shrink: 0 !important;
}

/* Delivery Info - bottom, 24px, with truck icon */
.wc-rec-slide .product-delivery-info {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin-top: auto !important;
    font-size: 10px !important;
    color: #666 !important;
    padding-top: 6px !important;
    border-top: 1px solid #eee !important;
}

.wc-rec-slide .product-delivery-info svg {
    flex-shrink: 0 !important;
    stroke: #666 !important;
}

.wc-rec-slide .product-delivery-info span {
    line-height: 1.2 !important;
}

/* FORCE delivery info visible - theme might hide it */
html body .wc-rec-slide .product-delivery-info,
.wc-rec-section .wc-rec-slide .product-delivery-info,
.wc-rec-carousel .wc-rec-slide .product-delivery-info {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* FORCE stock status visible */
html body .wc-rec-slide .product-stock-status,
.wc-rec-section .wc-rec-slide .product-stock-status,
.wc-rec-carousel .wc-rec-slide .product-stock-status {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   FREQUENTLY BOUGHT TOGETHER SECTION
   Design: Cards with border, hover effect, like cart popup
   4 products in a row, with Sale badges
   ============================================ */

/* Section container - with border, shadow and rounded corners like other sections */
.wc-rec-fbt-section {
    margin: 25px 0 35px 0 !important;
    padding: 30px 20px !important; /* More padding top/bottom */
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Section heading - BOLD, centered */
html body .wc-rec-fbt-section > h2,
.woocommerce .wc-rec-fbt-section > h2,
.single-product .wc-rec-fbt-section > h2 {
    font-size: 1.4em !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-style: normal !important;
}

/* Carousel container - with touch-action for better swipe */
.wc-rec-fbt-carousel {
    overflow: visible !important;
    width: 100% !important;
    position: relative !important;
    touch-action: pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 12px !important;
}

/* Carousel track - holds all cards - LEFT aligned for slider */
.wc-rec-fbt-track {
    display: flex !important;
    gap: 15px !important;
    transition: transform 0.3s ease !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

/* Individual product card - WITH border and hover effect */
/* For slider: calc width to show exactly 4 cards */
html body .wc-rec-fbt-card,
.woocommerce .wc-rec-fbt-card,
.single-product .wc-rec-fbt-card {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 8px 8px 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    /* Slider: 4 cards visible, accounting for 3 gaps of 15px */
    flex: 0 0 calc((100% - 45px) / 4) !important;
    min-width: calc((100% - 45px) / 4) !important;
    max-width: calc((100% - 45px) / 4) !important;
}

html body .wc-rec-fbt-card:hover,
.woocommerce .wc-rec-fbt-card:hover,
.single-product .wc-rec-fbt-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.12) !important;
    border-color: #82bb41 !important;
    /* No translateY to avoid clipping at top */
}

/* Sale Badge - ROUND, positioned LEFT with spacing */
html body .wc-rec-fbt-badge,
.woocommerce .wc-rec-fbt-badge,
.single-product .wc-rec-fbt-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    background: #c00 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 50px !important;
    z-index: 15 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* Sold Out Badge - Grey background, positioned LEFT */
html body .wc-rec-fbt-badge-soldout,
.woocommerce .wc-rec-fbt-badge-soldout,
.single-product .wc-rec-fbt-badge-soldout {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    background: #666 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 50px !important;
    z-index: 15 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* Image container */
html body .wc-rec-fbt-image,
.woocommerce .wc-rec-fbt-image,
.single-product .wc-rec-fbt-image {
    display: block !important;
    width: 100% !important;
    height: 100px !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    position: relative !important;
}

html body .wc-rec-fbt-image img,
.woocommerce .wc-rec-fbt-image img,
.single-product .wc-rec-fbt-image img {
    max-width: 100% !important;
    max-height: 100px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Product info container */
html body .wc-rec-fbt-info,
.woocommerce .wc-rec-fbt-info,
.single-product .wc-rec-fbt-info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
}

/* Product title - centered, 3 lines on mobile, BOLD */
html body .wc-rec-fbt-title,
.woocommerce .wc-rec-fbt-title,
.single-product .wc-rec-fbt-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #333 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 32px !important;
    max-height: 32px !important;
    text-align: center !important;
    margin-bottom: 4px !important;
}

html body .wc-rec-fbt-title:hover,
.woocommerce .wc-rec-fbt-title:hover {
    color: #82bb41 !important;
}

/* Price - GREEN, larger and BOLD */
html body .wc-rec-fbt-price,
.woocommerce .wc-rec-fbt-price,
.single-product .wc-rec-fbt-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #82bb41 !important;
    margin-bottom: 4px !important;
    text-align: center !important;
}

html body .wc-rec-fbt-price .woocommerce-Price-amount,
.woocommerce .wc-rec-fbt-price .woocommerce-Price-amount,
.single-product .wc-rec-fbt-price .woocommerce-Price-amount {
    color: #82bb41 !important;
}

html body .wc-rec-fbt-price del,
.woocommerce .wc-rec-fbt-price del {
    color: #999 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-right: 8px !important;
    text-decoration: line-through !important;
}

html body .wc-rec-fbt-price del .woocommerce-Price-amount,
.woocommerce .wc-rec-fbt-price del .woocommerce-Price-amount {
    color: #999 !important;
}

html body .wc-rec-fbt-price ins,
.woocommerce .wc-rec-fbt-price ins {
    text-decoration: none !important;
    color: #c00 !important;
    background: none !important;
}

html body .wc-rec-fbt-price ins .woocommerce-Price-amount,
.woocommerce .wc-rec-fbt-price ins .woocommerce-Price-amount {
    color: #c00 !important;
}

/* Add to cart button - WIDER, reduced height */
html body .wc-rec-fbt-btn,
html body a.wc-rec-fbt-btn,
.woocommerce .wc-rec-fbt-btn,
.woocommerce a.wc-rec-fbt-btn,
.single-product .wc-rec-fbt-btn,
.single-product a.wc-rec-fbt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 6px 12px !important;
    background: #ff0000 !important;
    background-color: #82bb41 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    text-decoration: none !important;
    text-align: center !important;
    margin-top: auto !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    white-space: nowrap !important;
}

html body .wc-rec-fbt-btn:hover,
html body a.wc-rec-fbt-btn:hover,
.woocommerce .wc-rec-fbt-btn:hover,
.woocommerce a.wc-rec-fbt-btn:hover {
    background: #6fa435 !important;
    background-color: #6fa435 !important;
    color: #fff !important;
}

html body .wc-rec-fbt-btn.disabled,
.woocommerce .wc-rec-fbt-btn.disabled {
    background: #999 !important;
    background-color: #999 !important;
    cursor: not-allowed !important;
}

html body .wc-rec-fbt-btn svg,
.woocommerce .wc-rec-fbt-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    stroke: #fff !important;
}

/* Responsive - Tablet: 3 products visible in slider */
@media (max-width: 991px) {
    html body .wc-rec-fbt-card,
    .woocommerce .wc-rec-fbt-card {
        /* 3 cards visible, 2 gaps of 12px */
        flex: 0 0 calc((100% - 24px) / 3) !important;
        min-width: calc((100% - 24px) / 3) !important;
        max-width: calc((100% - 24px) / 3) !important;
    }

    .wc-rec-fbt-track {
        gap: 12px !important;
    }
}

/* Responsive - Mobile: 2 products visible in slider */
@media (max-width: 767px) {
    html body .wc-rec-fbt-card,
    .woocommerce .wc-rec-fbt-card {
        /* 2 cards visible, 1 gap of 10px */
        flex: 0 0 calc((100% - 10px) / 2) !important;
        min-width: calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
        padding: 12px !important;
    }

    .wc-rec-fbt-track {
        gap: 10px !important;
    }

    html body .wc-rec-fbt-section,
    .woocommerce .wc-rec-fbt-section {
        padding: 25px 15px !important; /* More padding top/bottom on mobile */
    }

    html body .wc-rec-fbt-section h2,
    .woocommerce .wc-rec-fbt-section h2 {
        font-size: 1.2em !important;
    }

    html body .wc-rec-fbt-image,
    .woocommerce .wc-rec-fbt-image {
        height: 100px !important;
    }

    html body .wc-rec-fbt-image img,
    .woocommerce .wc-rec-fbt-image img {
        max-height: 100px !important;
    }

    html body .wc-rec-fbt-btn,
    .woocommerce .wc-rec-fbt-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .wc-rec-fbt-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
}

/* Responsive - Small mobile */
@media (max-width: 480px) {
    html body .wc-rec-fbt-title,
    .woocommerce .wc-rec-fbt-title {
        font-size: 12px !important;
    }

    html body .wc-rec-fbt-price,
    .woocommerce .wc-rec-fbt-price {
        font-size: 16px !important;
    }

    html body .wc-rec-fbt-btn,
    .woocommerce .wc-rec-fbt-btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

/* FBT Dots navigation - below the slider */
.wc-rec-fbt-dots {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 15px !important;
    padding: 0 !important;
}

.wc-rec-fbt-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #ccc !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

.wc-rec-fbt-dot:hover {
    background: #999 !important;
}

.wc-rec-fbt-dot.active {
    background: #ff0000 !important;
}

/* Force FBT section visible - override theme */
html body .wc-rec-fbt-section,
.woocommerce-page .wc-rec-fbt-section,
.single-product .wc-rec-fbt-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   ADAPTIVE LAYOUT BASED ON PRODUCT COUNT
   Used by A/B testing to show different numbers
   Classes: wc-rec-count-3, wc-rec-count-4, wc-rec-count-5
   ============================================ */

/* 3 Products - Centered, larger cards */
.wc-rec-section.wc-rec-count-3 .wc-rec-slide {
    flex: 0 0 calc((100% - 40px) / 3) !important;
    max-width: calc((100% - 40px) / 3) !important;
}

.wc-rec-section.wc-rec-count-3 .wc-rec-track {
    justify-content: flex-start !important;
}

/* 4 Products */
.wc-rec-section.wc-rec-count-4 .wc-rec-slide {
    flex: 0 0 calc((100% - 60px) / 4) !important;
    max-width: calc((100% - 60px) / 4) !important;
}

.wc-rec-section.wc-rec-count-4 .wc-rec-track {
    justify-content: flex-start !important;
}

/* 5 Products - Default layout */
.wc-rec-section.wc-rec-count-5 .wc-rec-slide {
    flex: 0 0 calc((100% - 80px) / 5) !important;
    max-width: calc((100% - 80px) / 5) !important;
}

/* Hide navigation arrows when all products fit */
.wc-rec-section.wc-rec-count-3 .wc-rec-nav,
.wc-rec-section.wc-rec-count-4 .wc-rec-nav {
    display: none !important;
}

/* Hide dots when all products fit on screen */
.wc-rec-section.wc-rec-count-3 .wc-rec-dots,
.wc-rec-section.wc-rec-count-4 .wc-rec-dots {
    display: none !important;
}

/* Responsive adjustments for count-based layouts */
@media (max-width: 1200px) {
    /* 3 products still fit */
    .wc-rec-section.wc-rec-count-3 .wc-rec-slide {
        flex: 0 0 calc((100% - 40px) / 3) !important;
        max-width: calc((100% - 40px) / 3) !important;
    }

    /* 4 products still fit */
    .wc-rec-section.wc-rec-count-4 .wc-rec-slide {
        flex: 0 0 calc((100% - 60px) / 4) !important;
        max-width: calc((100% - 60px) / 4) !important;
    }
}

@media (max-width: 991px) {
    /* 3 products: same */
    .wc-rec-section.wc-rec-count-3 .wc-rec-slide {
        flex: 0 0 calc((100% - 32px) / 3) !important;
        max-width: calc((100% - 32px) / 3) !important;
    }

    /* 4 products: show 3, need slider */
    .wc-rec-section.wc-rec-count-4 .wc-rec-slide {
        flex: 0 0 calc((100% - 32px) / 3) !important;
        max-width: calc((100% - 32px) / 3) !important;
    }

    .wc-rec-section.wc-rec-count-4 .wc-rec-nav {
        display: flex !important;
    }

    .wc-rec-section.wc-rec-count-4 .wc-rec-dots {
        display: flex !important;
    }
}

@media (max-width: 767px) {
    /* All count variants: 2 visible */
    .wc-rec-section.wc-rec-count-3 .wc-rec-slide,
    .wc-rec-section.wc-rec-count-4 .wc-rec-slide,
    .wc-rec-section.wc-rec-count-5 .wc-rec-slide {
        flex: 0 0 calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
    }

    /* Show dots for navigation on mobile */
    .wc-rec-section.wc-rec-count-3 .wc-rec-dots,
    .wc-rec-section.wc-rec-count-4 .wc-rec-dots {
        display: flex !important;
    }
}

@media (max-width: 575px) {
    /* All count variants: 2 cards visible (like FBT) */
    .wc-rec-section.wc-rec-count-3 .wc-rec-slide,
    .wc-rec-section.wc-rec-count-4 .wc-rec-slide,
    .wc-rec-section.wc-rec-count-5 .wc-rec-slide {
        flex: 0 0 calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
    }
}

/* ============================================
   FBT SECTION - ADAPTIVE LAYOUT
   ============================================ */

/* FBT with 3 products */
.wc-rec-fbt-section.wc-rec-count-3 .wc-rec-fbt-card {
    flex: 0 0 calc((100% - 30px) / 3) !important;
    min-width: calc((100% - 30px) / 3) !important;
    max-width: calc((100% - 30px) / 3) !important;
}

.wc-rec-fbt-section.wc-rec-count-3 .wc-rec-fbt-dots {
    display: none !important;
}

/* FBT with 4 products - default, no changes needed */

/* FBT with 5 products */
.wc-rec-fbt-section.wc-rec-count-5 .wc-rec-fbt-card {
    flex: 0 0 calc((100% - 60px) / 5) !important;
    min-width: calc((100% - 60px) / 5) !important;
    max-width: calc((100% - 60px) / 5) !important;
}

@media (max-width: 991px) {
    .wc-rec-fbt-section.wc-rec-count-3 .wc-rec-fbt-card {
        flex: 0 0 calc((100% - 24px) / 3) !important;
        min-width: calc((100% - 24px) / 3) !important;
        max-width: calc((100% - 24px) / 3) !important;
    }

    .wc-rec-fbt-section.wc-rec-count-5 .wc-rec-fbt-card {
        flex: 0 0 calc((100% - 36px) / 4) !important;
        min-width: calc((100% - 36px) / 4) !important;
        max-width: calc((100% - 36px) / 4) !important;
    }

    .wc-rec-fbt-section.wc-rec-count-5 .wc-rec-fbt-dots {
        display: flex !important;
    }
}

@media (max-width: 767px) {
    .wc-rec-fbt-section.wc-rec-count-3 .wc-rec-fbt-card,
    .wc-rec-fbt-section.wc-rec-count-4 .wc-rec-fbt-card,
    .wc-rec-fbt-section.wc-rec-count-5 .wc-rec-fbt-card {
        flex: 0 0 calc((100% - 10px) / 2) !important;
        min-width: calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
    }

    .wc-rec-fbt-section.wc-rec-count-3 .wc-rec-fbt-dots {
        display: flex !important;
    }
}

/* ============================================
   COMPATIBILITY GROUP - Shared green border around all compatible products
   ============================================ */

/* Compatibility group container - green border wrapping all compatible products */
html body .wc-rec-compat-group,
.woocommerce .wc-rec-compat-group,
.single-product .wc-rec-compat-group {
    border: 2px solid #82bb41 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(145deg, rgba(130, 187, 65, 0.04) 0%, rgba(255,255,255,1) 100%) !important;
    box-shadow: 0 2px 8px rgba(130, 187, 65, 0.12) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

/* Header inside the group - BADGE STYLE - ABSOLUTE POSITIONED */
html body .wc-rec-compat-header,
.wc-rec-fbt-section .wc-rec-compat-group .wc-rec-compat-header,
.woocommerce .wc-rec-compat-header,
.single-product .wc-rec-compat-header {
    position: absolute !important;
    top: -9px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #82bb41 0%, #6fa435 100%) !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    border-bottom: none !important;
    box-shadow: 0 1px 4px rgba(130, 187, 65, 0.25) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    z-index: 100 !important;
    white-space: nowrap !important;
}

html body .wc-rec-compat-header svg,
.woocommerce .wc-rec-compat-header svg {
    width: 10px !important;
    height: 10px !important;
    stroke: #fff !important;
    flex-shrink: 0 !important;
    stroke-width: 3 !important;
}

/* Hover effect for the entire group */
html body .wc-rec-compat-group:hover,
.woocommerce .wc-rec-compat-group:hover {
    box-shadow: 0 3px 12px rgba(130, 187, 65, 0.2) !important;
    border-color: #6fa435 !important;
}

/* Cards container inside the group - horizontal layout */
html body .wc-rec-compat-cards,
.woocommerce .wc-rec-compat-cards,
.single-product .wc-rec-compat-cards {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    width: 100% !important;
}

/* Compatible cards inside the group - SAME SIZE as regular cards */
html body .wc-rec-compat-group .wc-rec-fbt-card,
.woocommerce .wc-rec-compat-group .wc-rec-fbt-card,
.single-product .wc-rec-compat-group .wc-rec-fbt-card {
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    background: transparent !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 8px 0 8px !important;
}

html body .wc-rec-compat-group .wc-rec-fbt-card:hover,
.woocommerce .wc-rec-compat-group .wc-rec-fbt-card:hover {
    box-shadow: none !important;
}

/* Sale badge inside compat-group - move down to avoid overlap with header badge */
html body .wc-rec-compat-group .wc-rec-fbt-badge,
.woocommerce .wc-rec-compat-group .wc-rec-fbt-badge {
    top: 14px !important;
    left: 4px !important;
}

html body .wc-rec-compat-group .wc-rec-fbt-badge-soldout,
.woocommerce .wc-rec-compat-group .wc-rec-fbt-badge-soldout {
    top: 14px !important;
    left: 4px !important;
}

/* Compat cards inherit all styles from regular FBT cards - no overrides needed */

/* Inline bundle button inside the group - PROMINENT STYLE */
html body .wc-rec-compat-btn-inline,
html body button.wc-rec-compat-btn-inline,
.woocommerce .wc-rec-compat-btn-inline,
.single-product .wc-rec-compat-btn-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, #82bb41 0%, #6fa435 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    width: 100% !important;
    margin-top: 6px !important;
    box-shadow: 0 2px 8px rgba(130, 187, 65, 0.35) !important;
    text-transform: none !important;
}

html body .wc-rec-compat-btn-inline:hover,
.woocommerce .wc-rec-compat-btn-inline:hover {
    background: linear-gradient(135deg, #6fa435 0%, #5a8a2a 100%) !important;
    box-shadow: 0 4px 12px rgba(130, 187, 65, 0.45) !important;
    transform: translateY(-1px) !important;
}

html body .wc-rec-compat-btn-inline:disabled,
.woocommerce .wc-rec-compat-btn-inline:disabled {
    background: #999 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .wc-rec-compat-btn-inline svg,
.woocommerce .wc-rec-compat-btn-inline svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #fff !important;
    flex-shrink: 0 !important;
}

/* Group sizing based on number of compatible products */
/* Auto width - fit content */
html body .wc-rec-compat-group.wc-rec-compat-1,
.woocommerce .wc-rec-compat-group.wc-rec-compat-1 {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Auto width - fit content */
html body .wc-rec-compat-group.wc-rec-compat-2,
.woocommerce .wc-rec-compat-group.wc-rec-compat-2 {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Bundle button container - for standalone button below carousel */
html body .wc-rec-compat-bundle,
.woocommerce .wc-rec-compat-bundle,
.single-product .wc-rec-compat-bundle {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 28px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e0e0e0 !important;
}

html body .wc-rec-compat-btn,
html body button.wc-rec-compat-btn,
.woocommerce .wc-rec-compat-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: #ff0000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(130, 187, 65, 0.3) !important;
}

html body .wc-rec-compat-btn:hover,
.woocommerce .wc-rec-compat-btn:hover {
    background: #6fa435 !important;
    box-shadow: 0 4px 12px rgba(130, 187, 65, 0.4) !important;
}

html body .wc-rec-compat-btn:disabled,
.woocommerce .wc-rec-compat-btn:disabled {
    background: #999 !important;
    cursor: not-allowed !important;
}

html body .wc-rec-compat-btn svg,
.woocommerce .wc-rec-compat-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #fff !important;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    html body .wc-rec-compat-group.wc-rec-compat-1,
    .woocommerce .wc-rec-compat-group.wc-rec-compat-1 {
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    html body .wc-rec-compat-group.wc-rec-compat-2,
    .woocommerce .wc-rec-compat-group.wc-rec-compat-2 {
        flex: 0 0 auto !important;
        max-width: none !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    html body .wc-rec-compat-group,
    .woocommerce .wc-rec-compat-group {
        padding: 10px !important;
    }

    html body .wc-rec-compat-cards,
    .woocommerce .wc-rec-compat-cards {
        flex-direction: row !important;
        gap: 8px !important;
    }

    html body .wc-rec-compat-group.wc-rec-compat-1,
    html body .wc-rec-compat-group.wc-rec-compat-2,
    .woocommerce .wc-rec-compat-group.wc-rec-compat-1,
    .woocommerce .wc-rec-compat-group.wc-rec-compat-2 {
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    html body .wc-rec-compat-header,
.wc-rec-fbt-section .wc-rec-compat-group .wc-rec-compat-header,
    .woocommerce .wc-rec-compat-header {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }

    html body .wc-rec-compat-btn-inline,
    .woocommerce .wc-rec-compat-btn-inline {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }

    html body .wc-rec-compat-bundle,
    .woocommerce .wc-rec-compat-bundle {
        margin-top: 15px !important;
        padding-top: 12px !important;
    }

    html body .wc-rec-compat-btn,
    .woocommerce .wc-rec-compat-btn {
        font-size: 12px !important;
        padding: 10px 16px !important;
    }
}

/* ============================================
   BUNDLE ADD-TO-CART SECTION
   "Alle zusammen in den Warenkorb" button
   ============================================ */

/* Bundle section container */
html body .wc-rec-fbt-bundle,
.woocommerce .wc-rec-fbt-bundle,
.single-product .wc-rec-fbt-bundle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 25px !important;
    padding-top: 28px !important;
    border-top: 1px solid #e0e0e0 !important;
    gap: 10px !important;
}

/* Bundle info container - holds count and price */
html body .wc-rec-fbt-bundle-info,
.woocommerce .wc-rec-fbt-bundle-info,
.single-product .wc-rec-fbt-bundle-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

/* Product count text */
html body .wc-rec-fbt-bundle-count,
.woocommerce .wc-rec-fbt-bundle-count,
.single-product .wc-rec-fbt-bundle-count {
    font-size: 14px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

/* Total price text */
html body .wc-rec-fbt-bundle-price,
.woocommerce .wc-rec-fbt-bundle-price,
.single-product .wc-rec-fbt-bundle-price {
    font-size: 18px !important;
    color: #333 !important;
    font-weight: 700 !important;
}

html body .wc-rec-fbt-bundle-price .woocommerce-Price-amount,
.woocommerce .wc-rec-fbt-bundle-price .woocommerce-Price-amount,
.single-product .wc-rec-fbt-bundle-price .woocommerce-Price-amount {
    color: #82bb41 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

/* Bundle add-to-cart button - larger, prominent */
html body .wc-rec-fbt-bundle-btn,
html body a.wc-rec-fbt-bundle-btn,
html body button.wc-rec-fbt-bundle-btn,
.woocommerce .wc-rec-fbt-bundle-btn,
.single-product .wc-rec-fbt-bundle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 14px 35px !important;
    background: #ff0000 !important;
    background-color: #82bb41 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(130, 187, 65, 0.3) !important;
}

html body .wc-rec-fbt-bundle-btn:hover,
html body a.wc-rec-fbt-bundle-btn:hover,
html body button.wc-rec-fbt-bundle-btn:hover,
.woocommerce .wc-rec-fbt-bundle-btn:hover,
.single-product .wc-rec-fbt-bundle-btn:hover {
    background: #6fa435 !important;
    background-color: #6fa435 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(130, 187, 65, 0.4) !important;
    transform: translateY(-1px) !important;
}

html body .wc-rec-fbt-bundle-btn:disabled,
.woocommerce .wc-rec-fbt-bundle-btn:disabled {
    background: #999 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .wc-rec-fbt-bundle-btn svg,
.woocommerce .wc-rec-fbt-bundle-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    stroke: #fff !important;
}

/* Loading spinner for bundle button */
.wc-rec-spinner {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
    border-top-color: #fff !important;
    animation: wc-rec-spin 0.8s linear infinite !important;
}

@keyframes wc-rec-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive - Bundle section */
@media (max-width: 767px) {
    html body .wc-rec-fbt-bundle,
    .woocommerce .wc-rec-fbt-bundle {
        margin-top: 28px !important;
        padding-top: 15px !important;
    }

    html body .wc-rec-fbt-bundle-btn,
    .woocommerce .wc-rec-fbt-bundle-btn {
        padding: 12px 25px !important;
        font-size: 14px !important;
        width: 100% !important;
        max-width: 300px !important;
    }

    html body .wc-rec-fbt-bundle-info,
    .woocommerce .wc-rec-fbt-bundle-info {
        font-size: 14px !important;
    }

    html body .wc-rec-fbt-bundle-price .woocommerce-Price-amount,
    .woocommerce .wc-rec-fbt-bundle-price .woocommerce-Price-amount {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    html body .wc-rec-fbt-bundle-btn,
    .woocommerce .wc-rec-fbt-bundle-btn {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
}



/* ============================================
   FBT FIX - v28
   ============================================ */

/* Bei 3 Produkten: Compat-Group gleiche Breite wie normale Karten */
html body .wc-rec-fbt-section.wc-rec-count-3 .wc-rec-compat-group.wc-rec-compat-1 {
    flex: 0 0 calc((100% - 30px) / 3) !important;
    min-width: calc((100% - 30px) / 3) !important;
    max-width: calc((100% - 30px) / 3) !important;
}

/* Karte in der Compat-Group: volle Breite */
html body .wc-rec-fbt-section .wc-rec-compat-group.wc-rec-compat-1 .wc-rec-fbt-card {
    flex: 1 !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Button: nur 2px Abstand */
html body .wc-rec-fbt-section .wc-rec-fbt-btn,
html body .wc-rec-fbt-section a.wc-rec-fbt-btn {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
}


/* Karten-Padding unten reduzieren */
html body .wc-rec-fbt-section .wc-rec-fbt-card {
    padding-bottom: 8px !important;
}


/* Info-Container: NICHT stretchen */
html body .wc-rec-fbt-section .wc-rec-fbt-info {
    flex: 0 0 auto !important;
}


/* Track: nicht stretchen */
html body .wc-rec-fbt-section .wc-rec-fbt-track {
    align-items: flex-start !important;
}

/* Karte: nicht stretchen */
html body .wc-rec-fbt-section .wc-rec-fbt-card {
    align-self: flex-start !important;
}


/* Button in Compat-Group: leicht nach oben */
html body .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-btn {
    margin-bottom: -4px !important;
}


/* Compat-Group Karte: weniger Padding unten */
html body .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card {
    padding-bottom: 4px !important;
}

/* Compat-Cards Container: kein extra Padding */
html body .wc-rec-fbt-section .wc-rec-compat-cards {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Compat-Group selbst: weniger Padding unten */
html body .wc-rec-fbt-section .wc-rec-compat-group {
    padding-bottom: 4px !important;
}


/* Compat-Group Karte: gleich wie normale */
html body .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card {
    padding-bottom: 8px !important;
}

/* Button in Compat-Group: weiter nach oben */
html body .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-btn,
html body .wc-rec-fbt-section .wc-rec-compat-group a.wc-rec-fbt-btn {
    margin-bottom: -8px !important;
    position: relative !important;
    top: -4px !important;
}


/* Kompatibilität Badge größer */
html body .wc-rec-compat-header,
.wc-rec-fbt-section .wc-rec-compat-group .wc-rec-compat-header,
.woocommerce .wc-rec-compat-header {
    font-size: 11px !important;
    padding: 5px 12px !important;
}


/* Badge nach oben verschieben - mittig zum Rahmen */
html body .wc-rec-compat-header,
.wc-rec-fbt-section .wc-rec-compat-group .wc-rec-compat-header,
.woocommerce .wc-rec-compat-header {
    top: -14px !important;
}


/* Alle Karten: gleichmäßiger Abstand oben und unten */
html body .wc-rec-fbt-section .wc-rec-fbt-card {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

html body .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


/* Mehr Padding oben für Badge-Platz */
html body .wc-rec-fbt-section .wc-rec-fbt-card {
    padding-top: 18px !important;
}

html body .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card {
    padding-top: 18px !important;
}

/* Sale Badge in Compat-Group weiter nach unten */
html body .wc-rec-compat-group .wc-rec-fbt-badge {
    top: 28px !important;
}


/* Sale Badge in Compat-Group - höhere Spezifität */
html body .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-badge,
html body .wc-rec-fbt-section .wc-rec-compat-group span.wc-rec-fbt-badge,
.woocommerce .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-badge {
    top: 28px !important;
    left: 8px !important;
}

/* FORCE DESKTOP ROW LAYOUT - added to fix w3speedster minification issue */
@media (min-width: 768px) {
    html body .wc-rec-compat-cards,
    .woocommerce .wc-rec-compat-cards,
    .single-product .wc-rec-compat-cards,
    body .wc-rec-compat-cards {
        flex-direction: row !important;
        display: flex !important;
        gap: 15px !important;
    }
}

/* ============================================
   MOBILE: Compat-group (moved outside track by JS)
   ============================================ */
@media screen and (max-width: 767px) {
    .wc-rec-fbt-section > .wc-rec-compat-group {
        display: flex !important;
        flex-direction: column !important;
        width: calc(100% - 30px) !important;
        margin: 0 15px 20px 15px !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    
    .wc-rec-fbt-section > .wc-rec-compat-group .wc-rec-compat-header {
        position: relative !important;
        transform: none !important;
        writing-mode: horizontal-tb !important;
        width: 100% !important;
        text-align: center !important;
        border-radius: 6px !important;
        padding: 10px 15px !important;
        margin-bottom: 15px !important;
    }
    
    .wc-rec-fbt-section > .wc-rec-compat-group .wc-rec-compat-cards {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .wc-rec-fbt-section > .wc-rec-compat-group .wc-rec-fbt-card {
        flex: 0 0 calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
    }
}

/* ============================================
   MOBILE: FBT Track als horizontaler Slider
   ============================================ */
@media screen and (max-width: 767px) {
    /* Track horizontal scrollbar */
    .wc-rec-fbt-section .wc-rec-fbt-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        
        
        
        gap: 10px !important;
        padding-bottom: 10px !important;
    }
    
    /* Cards im Track */
    .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card {
        flex: 0 0 45% !important;
        min-width: 45% !important;
        
    }
    
    /* Navigation ausblenden auf Mobile */
    .wc-rec-fbt-section .wc-rec-nav {
        display: none !important;
    }
}

/* ============================================
   MOBILE FIX: Force horizontal layout
   ============================================ */
@media screen and (max-width: 767px) {
    html body .wc-rec-fbt-section .wc-rec-fbt-carousel,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-carousel,
    .single-product .wc-rec-fbt-section .wc-rec-fbt-carousel {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    html body .wc-rec-fbt-section .wc-rec-fbt-track,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-track,
    .single-product .wc-rec-fbt-section .wc-rec-fbt-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 10px !important;
        width: max-content !important;
        min-width: 100% !important;
        transform: none !important;
    }
    
    html body .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card,
    .single-product .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        width: 160px !important;
    }
}

/* ============================================
   FINAL MOBILE FIX - Inline style equivalent
   ============================================ */
@media screen and (max-width: 767px) {
    .wc-rec-fbt-section .wc-rec-fbt-carousel {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .wc-rec-fbt-section .wc-rec-fbt-carousel::-webkit-scrollbar {
        display: none !important;
    }
    .wc-rec-fbt-section .wc-rec-fbt-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        width: max-content !important;
        min-width: 100% !important;
        gap: 12px !important;
        padding: 10px !important;
        transform: none !important;
    }
    .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        width: 160px !important;
    }
    .wc-rec-fbt-section .wc-rec-fbt-nav,
    .wc-rec-fbt-section .wc-rec-fbt-dots {
        display: none !important;
    }
}

/* ============================================
   MOBILE FIX: Compat-group horizontal
   ============================================ */
@media screen and (max-width: 767px) {
    .wc-rec-fbt-section .wc-rec-compat-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        margin-bottom: 15px !important;
    }
    .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-compat-header {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        white-space: nowrap !important;
        padding: 8px !important;
        flex-shrink: 0 !important;
    }
    .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-compat-cards {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }
    .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
}

/* ============================================
   FIX: Compat-group clean layout (all screens)
   ============================================ */

/* Desktop: compat-group inline with other cards, badge on top */
html body .wc-rec-compat-group,
.woocommerce .wc-rec-compat-group {
    display: inline-flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    flex: none !important;
}

html body .wc-rec-compat-header,
.wc-rec-fbt-section .wc-rec-compat-group .wc-rec-compat-header,
.woocommerce .wc-rec-compat-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    width: 100% !important;
    text-align: center !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    font-size: 11px !important;
}

html body .wc-rec-compat-cards,
.woocommerce .wc-rec-compat-cards {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 10px !important;
    width: auto !important;
}

/* Cards inside compat-group - fixed size like regular FBT cards */
html body .wc-rec-compat-group .wc-rec-fbt-card,
.woocommerce .wc-rec-compat-group .wc-rec-fbt-card {
    flex: 0 0 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
}

/* Mobile: same layout, just smaller cards */
@media screen and (max-width: 767px) {
    html body .wc-rec-compat-group .wc-rec-fbt-card,
    .woocommerce .wc-rec-compat-group .wc-rec-fbt-card {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
}

/* ============================================
   CLEAN FIX: Compat-group and FBT cards alignment
   ============================================ */

/* Compat-group: width auto, overflow visible for badge */
html body .wc-rec-compat-group,
html body .wc-rec-compat-group.wc-rec-compat-1,
html body .wc-rec-compat-group.wc-rec-compat-2,
html body .wc-rec-compat-group.wc-rec-compat-3,
.wc-rec-fbt-section .wc-rec-compat-group {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    margin-top: 32px !important;
    padding: 10px !important;
}

/* Badge: horizontal, centered on top */
html body .wc-rec-compat-header,
.wc-rec-fbt-section .wc-rec-compat-header,
.wc-rec-fbt-section .wc-rec-compat-group .wc-rec-compat-header {
    position: absolute !important;
    top: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    padding: 4px 12px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
    z-index: 10 !important;
}

/* Cards container inside compat-group */
html body .wc-rec-compat-cards,
.wc-rec-fbt-section .wc-rec-compat-cards {
    width: auto !important;
    padding: 0 !important;
    gap: 10px !important;
}

/* Cards inside compat-group */
html body .wc-rec-compat-group .wc-rec-fbt-card {
    flex: 0 0 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
}

/* Regular FBT cards: align with compat-group top border */
html body .wc-rec-fbt-track > .wc-rec-fbt-card,
.wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card {
    margin-top: 32px !important;
}

@media screen and (max-width: 767px) {
    html body .wc-rec-compat-group .wc-rec-fbt-card {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
}

/* EXTRA FIX: Push content down inside FBT cards */
html body .wc-rec-fbt-track > .wc-rec-fbt-card > a.wc-rec-fbt-image:first-child,
html body .wc-rec-fbt-track > .wc-rec-fbt-card > .wc-rec-fbt-image:first-child,
.wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card > a.wc-rec-fbt-image:first-child {
    margin-top: 8px !important;
}

}

/* FIX: Reduce spacing above button */
html body .wc-rec-fbt-track > .wc-rec-fbt-card .wc-rec-fbt-price,
.wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card .wc-rec-fbt-price {
    margin-bottom: 4px !important;
}

/* FIX: Add padding below button */
html body .wc-rec-fbt-track > .wc-rec-fbt-card .wc-rec-fbt-btn,
.wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card .wc-rec-fbt-btn {
    margin-bottom: 5px !important;
}

/* FIX: Center button in compat-group cards */
html body .wc-rec-compat-group .wc-rec-fbt-card .wc-rec-fbt-btn,
.wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card .wc-rec-fbt-btn {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* FIX: Reduce spacing between heading and products */
html body .wc-rec-fbt-section h2,
.wc-rec-fbt-section h2 {
    margin-bottom: 10px !important;
}

/* FIX v2: Center button in compat-group cards */
html body .wc-rec-compat-group .wc-rec-fbt-card .wc-rec-fbt-info,
.wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card .wc-rec-fbt-info {
    align-items: center !important;
    text-align: center !important;
}

html body .wc-rec-compat-group .wc-rec-fbt-card a.wc-rec-fbt-btn,
.wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card a.wc-rec-fbt-btn {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
}

/* FIX v2: Reduce spacing between heading and products */
html body .wc-rec-fbt-section > h2,
.woocommerce .wc-rec-fbt-section > h2 {
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
}

html body .wc-rec-fbt-carousel,
.wc-rec-fbt-section .wc-rec-fbt-carousel {
    margin-top: 5px !important;
    padding-top: 0 !important;
}

/* FIX: Center text inside button in compat-group */
html body .wc-rec-compat-group .wc-rec-fbt-card .wc-rec-fbt-btn,
.wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card .wc-rec-fbt-btn,
html body .wc-rec-compat-group .wc-rec-fbt-card a.wc-rec-fbt-btn {
    text-align: center !important;
    justify-content: center !important;
}

/* FIX: Center products on desktop when few items */
@media screen and (min-width: 768px) {
    html body .wc-rec-fbt-track,
    .wc-rec-fbt-section .wc-rec-fbt-track {
        justify-content: center !important;
    }
}

/* FIX: Ensure FBT cards align at top with compat-group */
@media screen and (min-width: 768px) {
    html body .wc-rec-fbt-track,
    .wc-rec-fbt-section .wc-rec-fbt-track {
        align-items: flex-start !important;
    }
    
    /* FBT cards same top alignment as compat-group */
    html body .wc-rec-fbt-track > .wc-rec-fbt-card,
    .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card {
        margin-top: 15px !important;
    }
    
    html body .wc-rec-compat-group,
    .wc-rec-fbt-section .wc-rec-compat-group {
        margin-top: 15px !important;
    }
}

/* FINAL DESKTOP FIX: Align FBT cards with compat-group content */
@media screen and (min-width: 768px) {
    /* Reset compat-group margin and padding */
    html body .wc-rec-fbt-section .wc-rec-compat-group,
    html body .wc-rec-fbt-section .wc-rec-compat-group.wc-rec-compat-1,
    html body .wc-rec-fbt-section .wc-rec-compat-group.wc-rec-compat-2 {
        margin-top: 15px !important;
        padding: 10px !important;
    }
    
    /* FBT cards: margin-top = compat-group margin + padding */
    html body .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card {
        margin-top: 25px !important;
    }
    
    /* Image inside FBT card no extra margin */
    html body .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card > .wc-rec-fbt-image,
    html body .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card > a.wc-rec-fbt-image {
        margin-top: 0 !important;
    }
}







/* FINAL FIX: Desktop - Cards together, filling width */
@media screen and (min-width: 768px) {
    /* Track: items together, growing to fill width */
    html body .wc-rec-fbt-section .wc-rec-fbt-track,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-track,
    .single-product .wc-rec-fbt-section .wc-rec-fbt-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* FBT cards: grow equally to fill space */
    html body .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card,
    .single-product .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card {
        flex: 1 1 0 !important;
        min-width: 150px !important;
        max-width: none !important;
    }

    /* Compat-group: grows proportionally (2x for 2 products) */
    html body .wc-rec-fbt-section .wc-rec-compat-group.wc-rec-compat-1,
    .woocommerce .wc-rec-fbt-section .wc-rec-compat-group.wc-rec-compat-1,
    .single-product .wc-rec-fbt-section .wc-rec-compat-group.wc-rec-compat-1 {
        flex: 1 1 0 !important;
        min-width: 200px !important;
        max-width: none !important;
    }

    html body .wc-rec-fbt-section .wc-rec-compat-group.wc-rec-compat-2,
    .woocommerce .wc-rec-fbt-section .wc-rec-compat-group.wc-rec-compat-2,
    .single-product .wc-rec-fbt-section .wc-rec-compat-group.wc-rec-compat-2 {
        flex: 2 1 0 !important;
        min-width: 350px !important;
        max-width: none !important;
    }

    /* Cards inside compat-group: fill the group evenly */
    html body .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card,
    .woocommerce .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card,
    .single-product .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card {
        flex: 1 1 0 !important;
        min-width: 120px !important;
        max-width: none !important;
    }
}


/* FIX: Align FBT card with compat-group and center button text */
@media screen and (min-width: 768px) {
    /* FBT card: less margin-top to align with compat-group */
    html body .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card,
    .single-product .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card {
        margin-top: 15px !important;
    }
}

/* Button text centered */
html body .wc-rec-fbt-section .wc-rec-fbt-btn,
html body .wc-rec-fbt-section a.wc-rec-fbt-btn,
.woocommerce .wc-rec-fbt-section .wc-rec-fbt-btn,
.single-product .wc-rec-fbt-section .wc-rec-fbt-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
}


/* ============================================
   MOBILE SCROLL FIX - Touch swipe enabled
   ============================================ */
@media screen and (max-width: 767px) {
    /* Carousel wrapper: enables horizontal scroll */
    html body .wc-rec-fbt-section .wc-rec-fbt-carousel,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-carousel,
    .single-product .wc-rec-fbt-section .wc-rec-fbt-carousel {
        overflow-x: scroll !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        touch-action: pan-x !important;
    }

    html body .wc-rec-fbt-section .wc-rec-fbt-carousel::-webkit-scrollbar,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-carousel::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
    }

    /* Track: must be wider than container to enable scroll */
    html body .wc-rec-fbt-section .wc-rec-fbt-track,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-track,
    .single-product .wc-rec-fbt-section .wc-rec-fbt-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: max-content !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 10px !important;
    }

    /* FBT cards: fixed width for consistent scroll */
    html body .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        width: 160px !important;
    }

    /* Compat-group: also fixed width */
    html body .wc-rec-fbt-section .wc-rec-compat-group,
    .woocommerce .wc-rec-fbt-section .wc-rec-compat-group {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
    }

    /* Cards inside compat-group */
    html body .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card,
    .woocommerce .wc-rec-fbt-section .wc-rec-compat-group .wc-rec-fbt-card {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        width: 140px !important;
    }
}


/* ============================================
   FIX: Center dots navigation
   ============================================ */
html body .wc-rec-dots,
html body .wc-rec-fbt-dots,
.woocommerce .wc-rec-dots,
.woocommerce .wc-rec-fbt-dots,
.wc-rec-section .wc-rec-dots,
.wc-rec-fbt-section .wc-rec-fbt-dots {
    justify-content: center !important;
    width: 100% !important;
}

/* ============================================
   MOBILE SCROLL FIX v2 - Force native touch scroll
   ============================================ */
@media screen and (max-width: 767px) {
    /* Section: no overflow hidden */
    html body .wc-rec-fbt-section,
    .woocommerce .wc-rec-fbt-section {
        overflow: visible !important;
    }

    /* Carousel: horizontal scroll container */
    html body .wc-rec-fbt-section .wc-rec-fbt-carousel,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-carousel {
        overflow-x: scroll !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        touch-action: pan-x pan-y !important;
        position: relative !important;
    }

    /* Track: wider than viewport */
    html body .wc-rec-fbt-section .wc-rec-fbt-track,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: max-content !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 10px !important;
        transform: none !important;
        transition: none !important;
    }

    /* Cards fixed width */
    html body .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-track > .wc-rec-fbt-card {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        width: 160px !important;
    }

    /* Compat group */
    html body .wc-rec-fbt-section .wc-rec-compat-group,
    .woocommerce .wc-rec-fbt-section .wc-rec-compat-group {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* Hide nav arrows on mobile */
    html body .wc-rec-fbt-section .wc-rec-fbt-nav,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-nav {
        display: none !important;
    }
}

/* Hide dots on mobile - native scroll doesn't need them */
@media screen and (max-width: 767px) {
    html body .wc-rec-fbt-section .wc-rec-fbt-dots,
    html body .wc-rec-section .wc-rec-dots,
    .woocommerce .wc-rec-fbt-section .wc-rec-fbt-dots,
    .woocommerce .wc-rec-section .wc-rec-dots {
        display: none !important;
    }
}

/* ============================================
   FIX: Hide Slick slider arrows on mobile for cart page
   The theme uses .prev/.next selectors that don't exist,
   causing Slick to show unstyled default arrows (red)
   ============================================ */
@media screen and (max-width: 767px) {
    .cart-slider .slick-arrow,
    .cart-slider .slick-prev,
    .cart-slider .slick-next,
    .cart-slider-cross-sale .slick-arrow,
    .cart-slider-cross-sale .slick-prev,
    .cart-slider-cross-sale .slick-next,
    .woocommerce-cart .slick-arrow,
    .woocommerce-cart .slick-prev,
    .woocommerce-cart .slick-next {
        display: none !important;
    }
}