/* Vloershop Core — side cart (off-canvas winkelwagen). Thema-onafhankelijk. */
.vs-sidecart *,
.vs-sidecart-trigger * { box-sizing: border-box; }

/* Drijvende trigger (rechtsonder) */
.vs-sidecart-trigger {
    position: fixed !important;
    right: 18px !important;
    bottom: 18px !important;
    z-index: 99990 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    font-family: 'Lato', system-ui, sans-serif !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--vs-color-primary, #2a3065) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25) !important;
    cursor: pointer !important;
}

.vs-sidecart-trigger__icon { display: inline-flex !important; }

.vs-sidecart-trigger__count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--vs-color-primary, #2a3065) !important;
    background: #fff !important;
    border-radius: 999px !important;
}

/* Overlay + paneel */
.vs-sidecart[hidden] { display: none !important; }

.vs-sidecart {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99996 !important;
    font-family: 'Lato', system-ui, sans-serif !important;
}

.vs-sidecart__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 18, 40, 0.45) !important;
}

.vs-sidecart__panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: min(420px, 94vw) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18) !important;
}

/* Subtiele update-status zonder de hele lade te laten flitsen */
.vs-sidecart__line.is-updating .vs-sidecart__qty { opacity: .5 !important; }
.vs-sidecart__line.is-removing { opacity: .4 !important; }
.vs-sidecart__line { transition: opacity .15s ease !important; }

.vs-sidecart__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid #eceef4 !important;
}

.vs-sidecart__title { margin: 0 !important; font-size: 19px !important; font-weight: 700 !important; color: #1a1f3d !important; }

.vs-sidecart__close {
    background: none !important; border: none !important;
    font-size: 28px !important; line-height: 1 !important; color: #6a7080 !important; cursor: pointer !important;
}

.vs-sidecart__content { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow-y: auto !important; }

/* Gratis-verzending-progressie */
.vs-sidecart__progress { padding: 14px 20px !important; background: #fff !important; border-bottom: 1px solid #eceef4 !important; }
.vs-sidecart__progress-msg { font-size: 13px !important; color: #3a4150 !important; margin-bottom: 9px !important; display: flex !important; align-items: center !important; gap: 7px !important; line-height: 1.3 !important; }
.vs-sidecart__progress-msg::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='14' height='10' rx='1'/%3E%3Cpath d='M15 9h4l3 3v4h-7'/%3E%3Ccircle cx='6' cy='18' r='1.6'/%3E%3Ccircle cx='17.5' cy='18' r='1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='14' height='10' rx='1'/%3E%3Cpath d='M15 9h4l3 3v4h-7'/%3E%3Ccircle cx='6' cy='18' r='1.6'/%3E%3Ccircle cx='17.5' cy='18' r='1.6'/%3E%3C/svg%3E"); color: #1a8a3a; }
.vs-sidecart__progress-msg strong { color: #1a8a3a !important; }
.vs-sidecart__progress-bar { height: 8px !important; border-radius: 999px !important; background: #e8eaf1 !important; overflow: hidden !important; }
.vs-sidecart__progress-bar > span { display: block !important; height: 100% !important; min-width: 8px !important; background: linear-gradient(90deg, #18a23f, #29c257) !important; border-radius: 999px !important; transition: width .45s cubic-bezier(.22,.61,.36,1) !important; }
.vs-sidecart__progress--done .vs-sidecart__progress-msg::before { color: #18a23f; }

/* Regels */
.vs-sidecart__lines { flex: 0 0 auto !important; list-style: none !important; margin: 0 !important; padding: 14px 16px 4px !important; background: #f7f8fc !important; }
/* Regel = overzichtelijke kaart (vloerenmarkt-stijl) */
.vs-sidecart__line { position: relative !important; display: block !important; padding: 14px !important; margin-bottom: 12px !important; border: 1px solid #e9ebf2 !important; border-radius: 12px !important; background: #fff !important; }
.vs-sidecart__line-top { display: flex !important; align-items: flex-start !important; gap: 12px !important; }
.vs-sidecart__line-media { flex: 0 0 auto !important; }
.vs-sidecart__thumb { width: 64px !important; height: 64px !important; object-fit: cover !important; border-radius: 8px !important; background: #eceff6 !important; display: block !important; }
.vs-sidecart__line-body { flex: 1 1 auto !important; min-width: 0 !important; padding-right: 22px !important; }
.vs-sidecart__line-name { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: #1a1f3d !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
.vs-sidecart__line-spec { display: block !important; font-size: 12px !important; color: #5a6072 !important; margin-bottom: 2px !important; }
.vs-sidecart__line-unit { display: block !important; font-size: 13px !important; color: #2a3145 !important; }
.vs-sidecart__line-unit del { color: #aab0bf !important; font-weight: 400 !important; margin-right: 5px !important; }
.vs-sidecart__line-unit ins { text-decoration: none !important; font-weight: 700 !important; }
.vs-sidecart__line-unit-suffix { color: #8a90a2 !important; font-weight: 400 !important; }

.vs-sidecart__line-controls { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid #f0f1f6 !important; }
.vs-sidecart__qty { display: inline-flex !important; align-items: center !important; border: 1px solid #d8dbe6 !important; border-radius: 8px !important; overflow: hidden !important; }
.vs-sidecart__qty-btn { width: 34px !important; height: 34px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background: #f4f5f9 !important; color: #333 !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; }
.vs-sidecart__qty-btn:hover { background: #e9ecf4 !important; }
.vs-sidecart__qty-val { min-width: 34px !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; }
.vs-sidecart__line-totals { text-align: right !important; }
.vs-sidecart__line-meta { display: block !important; font-size: 11.5px !important; color: #8a90a2 !important; margin-bottom: 1px !important; }
.vs-sidecart__line-price { font-size: 15px !important; font-weight: 800 !important; color: #1a1f3d !important; white-space: nowrap !important; }
.vs-sidecart__remove { position: absolute !important; top: 12px !important; right: 12px !important; width: 26px !important; height: 26px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #b3b8c6 !important; background: none !important; border: none !important; cursor: pointer !important; padding: 0 !important; }
.vs-sidecart__remove:hover { color: #d12a2a !important; }

/* Cross-sell */
.vs-sidecart__xs { padding: 14px 20px !important; border-top: 1px solid #eceef4 !important; background: #fafbfe !important; }
.vs-sidecart__xs-title { margin: 0 0 10px !important; font-size: 14px !important; font-weight: 700 !important; color: #1a1f3d !important; }
.vs-sidecart__xs-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.vs-sidecart__xs-item { display: flex !important; align-items: center !important; gap: 10px !important; }
.vs-sidecart__xs-thumb { width: 44px !important; height: 44px !important; object-fit: cover !important; border-radius: 6px !important; background: #eceff6 !important; display: block !important; }
.vs-sidecart__xs-info { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 1px !important; }
.vs-sidecart__xs-name { font-size: 13px !important; color: #1f2733 !important; line-height: 1.25 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.vs-sidecart__xs-price { font-size: 12.5px !important; font-weight: 600 !important; color: #1a1f3d !important; }
.vs-sidecart__xs-price del { color: #aab0bf !important; font-weight: 400 !important; margin-right: 4px !important; }
.vs-sidecart__xs-price ins { text-decoration: none !important; }
.vs-sidecart .vs-button.vs-sidecart__xs-add {
    flex: 0 0 auto !important;
    width: 36px !important; height: 36px !important; padding: 0 !important;
    border-radius: 50% !important; font-size: 22px !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    margin-top: 0 !important;
}
.vs-sidecart__xs-add.is-loading { opacity: .6 !important; pointer-events: none !important; }

/* Footer */
.vs-sidecart__footer { flex: 0 0 auto !important; position: sticky !important; bottom: 0 !important; margin-top: auto !important; padding: 16px 20px 20px !important; border-top: 1px solid #eceef4 !important; background: #fff !important; }
.vs-sidecart__subtotal { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 16px !important; margin-bottom: 12px !important; }
.vs-sidecart__subtotal strong { font-size: 18px !important; color: #1a1f3d !important; }

.vs-sidecart .vs-button {
    display: block !important; width: 100% !important; text-align: center !important;
    padding: 13px 16px !important; border-radius: 10px !important; font-weight: 700 !important;
    text-decoration: none !important; border: 1px solid transparent !important; cursor: pointer !important;
    font-family: inherit !important; font-size: 15px !important; line-height: 1.2 !important;
}
.vs-sidecart .vs-button--primary { background: var(--vs-color-primary, #2a3065) !important; color: #fff !important; }
.vs-sidecart .vs-button--ghost { background: #fff !important; color: var(--vs-color-primary, #2a3065) !important; border-color: #d8dbe6 !important; margin-top: 8px !important; }

.vs-sidecart__trust { list-style: none !important; margin: 14px 0 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 6px 14px !important; justify-content: center !important; }
.vs-sidecart__trust li { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 12px !important; color: #555c70 !important; }
.vs-sidecart__trust-check { width: 14px !important; height: 14px !important; border-radius: 50% !important; background: #1a8a3a !important; position: relative !important; flex: 0 0 auto !important; }
.vs-sidecart__trust-check::after { content: ""; position: absolute; left: 37%; top: 18%; width: .22em; height: .45em; border: solid #fff; border-width: 0 .14em .14em 0; transform: rotate(45deg); }

/* Lege staat */
.vs-sidecart__empty { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; padding: 40px 20px !important; min-height: 50vh !important; }
.vs-sidecart__empty-title { font-size: 16px !important; color: #555c70 !important; margin: 0 !important; }
.vs-sidecart__empty .vs-button { display: inline-block !important; width: auto !important; padding: 11px 22px !important; }

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

/* Knop-feedback bij toevoegen (PDP add-to-cart) */
.vs-calculator__add.vs-added,
.single_add_to_cart_button.vs-added {
    background: #18a23f !important;
    border-color: #18a23f !important;
    color: #fff !important;
    transition: background .2s ease !important;
}
.vs-calculator__add.is-loading,
.single_add_to_cart_button.is-loading { opacity: .75 !important; cursor: progress !important; }