.kjseries, .kjseries_cat
{
  --active-border: #f60;
  --default-border: #ddd;
}

.kjseries
{
    display: none;
    overflow: auto;
}
.kjseries_cat 
{
    overflow: hidden;
}
.kjseries table td, .kjseries table th
{
    vertical-align: middle!important;
    text-align: center;
    padding: 5px 7px!important;
}

.series-options-modal .price-old,
.kjseries .price-old
{
    font-size: 23px;
    text-decoration: line-through;
}
.series-options-modal .price-new,
.kjseries .price-new
{
    font-size: 17px;
    font-weight: 700;
}
.kjseries .total span,
.kjseries .price_special span
{
    font-size: 16px;
    display: inline-block;
    white-space: nowrap;
    margin: 0 3px;
}
.kjseries .input_qty .input-group
{
    width: 70px;
    margin: 0 auto;
}
.kjseries .tr-summa
{
    font-size: 23px;
    font-weight: 700;
}
.kjseries .img-responsive,
.kjseries_cat .img-responsive
{
    margin: 0 auto;
    display: table;
}
div.kj-item
{
    border: 2px solid var(--default-border);
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}
/* category */
.kjseries_cat_heading
{
    font-size: 17px;
    font-weight: 700;
}
.kjseries_type_images .kj-item, .kjseries .kj-item-ajax, button.kjseries-category-item
{
    float: left;
    margin: 0 10px 10px 0;
}
.kjseries-category-item:hover
{
    cursor: pointer;
}
.kjseries-category-item
{
    border: 2px solid var(--default-border);
    border-radius: 5px;
    padding: 2px 5px;
}
div.kj-item.currentProduct, .kjseries-category-item.selected,
.kj-item-ajax.selected
{
    border-color: var(--active-border);
}
.kit-slider-cat
{
    opacity: 0;
}
.kit-slider-cat .swiper-viewport, .kjseries .swiper-viewport,
.kit-slider-cat .owl-wrapper-outer
{
    border: none;
    box-shadow: none;
    margin: 10px 0;
}
.kjseries .input_qty .input-group input
{
    padding: 5px;
}
.top10
{
    margin-top:10px;
}
.hidden 
{
    display: none;
}
tr.kjseries-category-item.selected
{
    background-color: var(--active-border)!important;
    color: white;
}
.kit-slider-cat .swiper-viewport .swiper-button-next
{
    right: -15px;
}
.kit-slider-cat .swiper-viewport .swiper-button-prev
{
    left: -15px;
}
.kit-slider-cat
{
    overflow: visible;
}
.hpm-button
{
    padding: 4px 7px;
    border-radius: 3px;
    border: 2px solid var(--default-border);
}
.hpm-button.active
{
    border: 2px solid var(--active-border);
}
.series-options-modal .discounts, 
.series-options-modal input[name="quantity"]
{
    display: none!important;
}

.kjseries .input_qty .btn
{
    padding-left: 4px;
    padding-right: 4px;
}
.kj-item.not-available, .kjseries-category-item.not-available
{
    filter: grayscale(0.5);
    opacity: 0.5;
}

.kjseries1 .kjproduct-inner
{
    border: 1px solid #ddd;
    border-radius:  5px;
    padding: 10px 15px;
    position: relative;
    overflow: hidden;
}
.kjseries1 .kj-item .image img
{
    max-width: 100%;
}

.kjseries1 div.kj-item
{
    border: none;
    border-radius: 0;
}

.kjseries1 div.kj-item .name
{
    line-height: 20px;
    font-size: 15px;
    font-weight: 700;
    height: 60px;
    overflow: hidden;
}

.kjseries1 div.kj-item input[name="in_series"]
{
    position: absolute;
    top: 10px;
    left: 10px;
    transform: scale(1.5);
}

.kjseries1 div.kj-item .price_special,
.kjseries1 div.kj-item .total
{
    width: 50%;
    float: left;
}

.kjseries1 div.kj-item .total
{
    font-weight: 700;
}

/* --- Mobile Anpassungen für das KJ-Series Modul (2 Produkte pro Reihe) --- */
@media (max-width: 767px) {
    /* Zwingt die Grid-Elemente auf 50% Breite (2 in einer Reihe) */
    .kjseries1 .row > .kj-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        float: left !important;
    }

    /* Reduziert das innere Padding für mehr Platz auf dem Bildschirm */
    .kjseries1 .kjproduct-inner {
        padding: 10px 5px !important;
    }

    /* --- BILD-FIX: Verhindert die vertikale Streckung! --- */
    .kjseries1 .kj-item .image img,
    .kjseries1 div.kj-item .image img {
        width: 100% !important;     /* Bild nimmt die volle Breite des Blocks ein */
        height: auto !important;    /* WICHTIG: Automatische Höhe bewahrt die Proportionen */
        object-fit: contain;        /* Stellt sicher, dass das Bild nicht verzerrt wird */
        max-height: 180px;          /* Begrenzt die maximale Höhe auf mobilen Geräten */
    }

    /* Passt die Schriftgröße des Produkttitels an */
    .kjseries1 div.kj-item .name {
        font-size: 12px !important;
        line-height: 16px !important;
        height: 48px !important;    /* Platz für maximal 3 Zeilen */
        margin-bottom: 5px !important;
        overflow: hidden;
    }

    /* Preise untereinander anzeigen, damit sie in der Box bleiben */
    .kjseries1 div.kj-item .price_special,
    .kjseries1 div.kj-item .total {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
    
    .kjseries1 div.kj-item .price-new {
        font-size: 14px !important;
    }

    /* Input/Menge für mobile Geräte verkleinern */
    .kjseries .input_qty .input-group {
        width: 100% !important;
        max-width: 80px;
        margin: 5px auto !important;
    }

    /* Position der Checkbox anpassen */
    .kjseries1 div.kj-item input[name="in_series"] {
        top: 5px;
        left: 5px;
        transform: scale(1.3);
        z-index: 2; /* Damit die Checkbox über dem Bild bleibt */
    }
}