/* =============================================================
   Upsell selectie op Single Product pagina
   Alleen van toepassing binnen .upsells_listing
   ============================================================= */

.upsells_listing {
    padding: 30px;
    background-color: var( --e-global-color-secondary );
    border: 1px solid var( --e-global-color-secondary );
    border-radius: 10px;
    margin-bottom: 20px !important;
    width: 500px;
}

.upsells_listing::before {
    content: 'Maak het compleet met...';
    display: block;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 15px;
}

.upsells_listing .jet-listing-grid__item:not(:last-child) {
    margin-bottom: 10px;
}

/* Maak elk upsell item klikbaar en geef het een transitie */
.upsells_listing .jet-listing-grid__item {
    cursor: pointer;
    padding: 10px 10px !important;
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    user-select: none;
}

/* Hover-staat */
.upsells_listing .jet-listing-grid__item:hover {
    border-color: var(--e-global-color-accent) !important;
}

/* Geselecteerde staat */
.upsells_listing .jet-listing-grid__item.is-checked {
    border-color: var(--e-global-color-accent) !important;
}

/* Vinkje rechtsboven op alle upsell items */
.upsells_listing .jet-listing-grid__item::after {
    content: '';
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #dcdcdc;
    background: #ffffff;
    z-index: 1;
}

/* Vinkje op geselecteerde items */
.upsells_listing .jet-listing-grid__item.is-checked::after {
    content: '\f00c';
    font-family: "Font Awesome 6 Pro";
    background: var(--e-global-color-accent);
    border-color: var(--e-global-color-accent);
    color: #ffffff;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
}

/* Algemeen */
.upsells_listing {

}

.upsells_listing .upsells_listing_afbeelding {

}

.upsells_listing .upsells_listing_naam {

}

.upsells_listing .upsells_listing_naam .jet-listing-dynamic-field__content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 35ch;
}

.upsells_listing .upsells_listing_prijs .amount {
    font-weight: 300;
}

.upsells_listing .upsells_listing_prijs del {
    font-size: 0.8em;
    color: #CCCCCC;
    display: none !important;
}

.upsells_listing .upsells_listing_prijs del .amount {
    font-weight: 300;
}

.upsells_listing .upsells_listing_prijs ins {
    text-decoration: none;
}

@media only screen and (max-width: 600px) {
    .upsells_listing {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .upsells_listing {
        padding: 20px;
    }
}