/* Vloershop Core — "Toegevoegd aan winkelwagen"-popup. Thema-onafhankelijk,
   scoped .vs-addpopup. Huisstijl: blauw #324696, CTA-groen #62b959,
   kaartranden #e9ecf4 met radius 12 zoals de rest van de shop. */

.vs-addpopup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100060 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(20, 24, 45, .55) !important;
    opacity: 0 !important;
    transition: opacity .25s ease !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}
.vs-addpopup.is-open { opacity: 1 !important; }

body.vs-addpopup-open { overflow: hidden !important; }

.vs-addpopup__box {
    position: relative !important;
    width: min(600px, 100%) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    /* Zonder expliciete x-as telt overflow-y:auto ook als overflow-x:auto, en
       dan schuift de popup op iOS opzij zodra iets 1px te breed is. */
    overflow-x: hidden !important;
    background: #fff !important;
    border-radius: 16px !important;
    /* Geen padding-bottom: de sticky strook onderin brengt zijn eigen
       padding mee en moet strak op de onderrand van de box aansluiten. */
    padding: 20px 22px 0 !important;
    box-shadow: 0 24px 60px rgba(20, 24, 45, .35) !important;
    transform: translateY(12px) scale(.98) !important;
    transition: transform .25s ease !important;
}
.vs-addpopup.is-open .vs-addpopup__box { transform: none !important; }

/* Kop: groen vinkje + titel + sluitkruis. */
.vs-addpopup__kop {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding-right: 34px !important;
}
.vs-addpopup__check {
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #62b959 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}
.vs-addpopup__titel {
    margin: 0 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #324696 !important;
    line-height: 1.25 !important;
}
.vs-addpopup__close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    border: none !important;
    background: transparent !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: #a2a3a6 !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-width: 0 !important;
}
.vs-addpopup__close:hover { color: #324696 !important; }

/* Bevestigingskaart van het toegevoegde artikel. */
.vs-addpopup__bevestiging {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px !important;
    border: 1px solid #e9ecf4 !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
    margin: 0 0 14px !important;
}
.vs-addpopup__media {
    flex: 0 0 auto !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #e9ecf4 !important;
}
.vs-addpopup__media img,
.vs-addpopup__thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.vs-addpopup__body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.vs-addpopup__naam {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #1f2430 !important;
    line-height: 1.35 !important;
}
.vs-addpopup__spec,
.vs-addpopup__aantal {
    font-size: 12.5px !important;
    color: #5f6570 !important;
    line-height: 1.4 !important;
}
.vs-addpopup__prijs {
    flex: 0 0 auto !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1f2430 !important;
    white-space: nowrap !important;
}
.vs-addpopup__prijs--gratis { color: #16a34a !important; }

/* De groene rekenregel: "Voor 2 plinten heb je nodig: 1 tube …". */
.vs-addpopup__advies {
    margin: 0 0 8px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.vs-addpopup__kopje {
    margin: 16px 0 8px !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #324696 !important;
}

.vs-addpopup__kaarten {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Accessoirekaart. */
.vs-addpopup__kaart {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    padding: 10px 12px !important;
    border: 1px solid #e9ecf4 !important;
    border-radius: 12px !important;
    background: #fff !important;
    margin: 0 !important;
}
.vs-addpopup__kaart-media {
    flex: 0 0 auto !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #eef1f7 !important;
    background: #fff !important;
}
.vs-addpopup__kaart-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.vs-addpopup__kaart-body {
    flex: 1 1 200px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.vs-addpopup__kaart-naam {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1f2430 !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
}
.vs-addpopup__kaart-naam:hover { color: #324696 !important; text-decoration: underline !important; }
.vs-addpopup__kaart-reden {
    font-size: 12px !important;
    color: #5f6570 !important;
    line-height: 1.4 !important;
}
.vs-addpopup__kaart-prijs {
    font-size: 12.5px !important;
    color: #1f2430 !important;
    line-height: 1.4 !important;
}
.vs-addpopup__kaart-prijs del { color: #9aa0ab !important; margin-right: 4px !important; }
.vs-addpopup__kaart-prijs strong { font-weight: 800 !important; }
.vs-addpopup__kaart-eenheid { color: #6b7280 !important; font-weight: 400 !important; }
/* Wat één pak, rol of lat kost — onder de eenheidsprijs, nooit ervoor. */
.vs-addpopup__kaart-pak { display: block !important; font-size: 11px !important; line-height: 1.35 !important; color: #8a90a2 !important; }

/* De "ligt al in je wagen"-chip deelt de klasse met het cart-advies, maar
   install-advice.css laadt alleen op de winkelwagenpagina; hier dus zelf. */
.vs-addpopup .vs-instadv__incart {
    display: inline-block !important;
    margin-top: 4px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    align-self: flex-start !important;
}

/* Actie: variantkeuze + stepper + toevoegknop. */
.vs-addpopup__kaart-actie {
    flex: 0 1 auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
}
.vs-addpopup__variant,
select.vs-addpopup__variant {
    max-width: min(180px, 100%) !important;
    font-size: 12.5px !important;
    padding: 6px 8px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #1f2430 !important;
}
.vs-addpopup__stepper {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.vs-addpopup__stepper button {
    width: 30px !important;
    height: 34px !important;
    border: none !important;
    background: #f4f6fb !important;
    color: #324696 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-width: 0 !important;
    line-height: 1 !important;
}
.vs-addpopup__stepper button:hover { background: #e9edf7 !important; }
.vs-addpopup__qty,
input.vs-addpopup__qty {
    width: 44px !important;
    min-width: 0 !important;
    height: 34px !important;
    border: none !important;
    border-left: 1px solid #e9ecf4 !important;
    border-right: 1px solid #e9ecf4 !important;
    text-align: center !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1f2430 !important;
    background: #fff !important;
    padding: 0 2px !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.vs-addpopup__qty::-webkit-outer-spin-button,
.vs-addpopup__qty::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

.vs-addpopup__add,
button.vs-addpopup__add {
    border: none !important;
    border-radius: 8px !important;
    background: #62b959 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 9px 14px !important;
    cursor: pointer !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    transition: background .15s ease !important;
}
.vs-addpopup__add:hover { background: #55a54c !important; }
.vs-addpopup__add.is-loading { opacity: .6 !important; cursor: wait !important; }
.vs-addpopup__add:disabled { opacity: .6 !important; }

.vs-addpopup__kies {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    color: #324696 !important;
    background: #fff !important;
    font-size: 18px !important;
    text-decoration: none !important;
}

/* De vaste strook onderin: pakketkorting-balk + hoofdknop blijven in beeld
   terwijl de accessoires erachter scrollen. position: sticky binnen de
   scrollende box; als laatste kind houdt hij zijn eigen plek in de flow,
   dus de laatste kaart kan er altijd volledig bovenuit scrollen. De
   negatieve marges laten de strook tot de boxranden doorlopen. */
.vs-addpopup__sticky {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    margin: 14px -22px 0 !important;
    padding: 10px 22px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1px solid #e9ecf4 !important;
    box-shadow: 0 -10px 24px rgba(20, 24, 45, .07) !important;
    border-radius: 0 0 16px 16px !important;
}

/* Pakketkorting-balk compact in de strook. */
.vs-addpopup__sticky .vs-pakketbar { margin: 0 0 10px !important; }

/* Hoofdknop Bekijk winkelwagen (CTA-groen, volle breedte) met "of verder
   winkelen" als rustige tekstlink eronder. */
.vs-addpopup__acties {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important;
}
.vs-addpopup__naar-wagen,
a.vs-addpopup__naar-wagen {
    display: block !important;
    border: none !important;
    border-radius: 10px !important;
    background: #62b959 !important;
    color: #fff !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    padding: 13px 16px !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    transition: background .15s ease !important;
}
.vs-addpopup__naar-wagen:hover { background: #55a54c !important; color: #fff !important; }
.vs-addpopup__verder,
button.vs-addpopup__verder {
    align-self: center !important;
    border: none !important;
    background: transparent !important;
    color: #324696 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    padding: 7px 10px 2px !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
}
.vs-addpopup__verder:hover { color: #1f2c66 !important; }

/* Mobiel: vrijwel schermvullend, één kolom, geen vaste breedtes die de rij
   uit de popup duwen (de eerdere modal-les). */
@media (max-width: 480px) {
    .vs-addpopup { padding: 10px !important; align-items: flex-end !important; }
    .vs-addpopup__box {
        width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 14px !important;
        padding: 16px 14px 0 !important;
    }
    .vs-addpopup__titel { font-size: 17px !important; }
    /* Strook compact houden: samen met de knop ruim onder een derde van
       het scherm. De marges volgen de smallere box-padding. */
    .vs-addpopup__sticky {
        margin: 12px -14px 0 !important;
        padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0 0 14px 14px !important;
    }
    .vs-addpopup__sticky .vs-pakketbar { margin-bottom: 8px !important; }
    .vs-addpopup__naar-wagen,
    a.vs-addpopup__naar-wagen { padding: 12px 14px !important; }
    .vs-addpopup__kaart-actie {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-end !important;
    }
    .vs-addpopup__variant,
    select.vs-addpopup__variant { flex: 1 1 100% !important; max-width: 100% !important; }
    .vs-addpopup__prijs { font-size: 14px !important; }
}