/* 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: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--vs-color-primary, #4056b4) !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, #4056b4) !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: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

.vs-sidecart__backdrop {
    position: absolute !important;
    inset: 0 !important;
    /* Donkerder waas: de lade moet duidelijk vooraan staan en de pagina
       eronder mag niet om aandacht concurreren. */
    background: rgba(12, 14, 32, 0.62) !important;
}

.vs-sidecart__panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    /* Breder dan de oude 420 px: in de lade staan naast de regels ook de
       kruisverkoop en het installatie-advies, en die werden op 420 px zo smal
       dat productnamen over drie regels braken. Op mobiel blijft er bewust een
       randje pagina zichtbaar, zodat zichtbaar is dat het een overlay is. */
    width: min(520px, 92vw) !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 #eef0f8 !important;
}

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

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

/* Let op overflow-x: met alleen overflow-y:auto rekent CSS de x-as ook als
   auto, en dan maakt élke pixel te brede inhoud de lade horizontaal scrollbaar
   (op iOS voelbaar als opzij schuiven). Expliciet hidden houdt de lade vast. */
.vs-sidecart__content { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; }

/* Gratis-verzending-progressie */
.vs-sidecart__progress { padding: 14px 20px !important; background: #fff !important; border-bottom: 1px solid #eef0f8 !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: #22c55e; }
.vs-sidecart__progress-msg strong { color: #22c55e !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; }

/* Bezorgmethode van deze wagen (DHL-pakket of locatielevering) */
.vs-sidecart__methode { margin: 0 !important; padding: 9px 20px !important; background: #fff !important; border-bottom: 1px solid #eef0f8 !important; font-size: 12.5px !important; font-weight: 600 !important; color: #324696 !important; display: flex !important; align-items: center !important; gap: 7px !important; line-height: 1.3 !important; }
.vs-sidecart__methode::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; 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%3Cpath d='M21 16V8l-9-5-9 5v8l9 5 9-5Z'/%3E%3Cpath d='M3.3 7.9 12 12.8l8.7-4.9M12 22.1V12.8'/%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%3Cpath d='M21 16V8l-9-5-9 5v8l9 5 9-5Z'/%3E%3Cpath d='M3.3 7.9 12 12.8l8.7-4.9M12 22.1V12.8'/%3E%3C/svg%3E"); }

/* 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: #f0f2f5 !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: #324696 !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: #2c3a30 !important; }
.vs-sidecart__line-unit del { color: #a2a3a6 !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; }
/* Wat er per pak/rol/lat wordt afgerekend, onder de eenheidsprijs. */
.vs-sidecart__line-pack { display: block !important; font-size: 11.5px !important; line-height: 1.4 !important; color: #8a90a2 !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 #d1d5db !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: #ece8de !important; }
.vs-sidecart__qty-val { min-width: 34px !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; }
/* Proefstaal: vast aantal, geen plus- en minknop. */
.vs-sidecart__qty--vast { min-height: 34px !important; padding: 0 14px !important; background: #f9fafb !important; font-size: 12.5px !important; font-weight: 600 !important; color: #5a6072 !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: #324696 !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 #eef0f8 !important; background: #fafbfe !important; }
.vs-sidecart__xs-title { margin: 0 0 10px !important; font-size: 14px !important; font-weight: 700 !important; color: #324696 !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: #f0f2f5 !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: #2a3065 !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: #324696 !important; }
.vs-sidecart__xs-price del { color: #a2a3a6 !important; font-weight: 400 !important; margin-right: 4px !important; }
.vs-sidecart__xs-price ins { text-decoration: none !important; }
.vs-sidecart__xs-unit { color: #8a90a2 !important; font-weight: 400 !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; }

/* Variantkeuze naast de plusknop bij een variabel artikel in de suggesties:
   zonder keuzelijst stuurde de plusknop het ouder-ID mee en weigerde
   WooCommerce de regel zonder zichtbare terugkoppeling. */
.vs-sidecart .vs-variantkeuze {
    flex: 0 1 auto !important;
    max-width: 130px !important;
    min-width: 0 !important;
    padding: 5px 8px !important;
    border: 1px solid #d9dceb !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 12px !important;
    color: #2a3065 !important;
}

/* Een proefstaal kost niets: groen "Gratis" in plaats van € 0,00. */
.vs-sidecart__line-unit--gratis { color: #166534 !important; font-weight: 600 !important; }
.vs-sidecart__line-price--gratis { color: #166534 !important; }

/* Te veel varianten voor een lijstje: de pijl brengt de klant naar de
   productpagina om daar te kiezen. */
.vs-sidecart .vs-button.vs-sidecart__xs-kies {
    font-size: 24px !important;
    text-decoration: none !important;
    padding-bottom: 3px !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 #eef0f8 !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: #324696 !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: #62b959 !important; color: #fff !important; }
.vs-sidecart .vs-button--primary:hover { background: #55a54c !important; }
.vs-sidecart .vs-button--ghost { background: #fff !important; color: var(--vs-color-primary, #4056b4) !important; border-color: #d1d5db !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: #22c55e !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; }