/* Vloershop Core — compleet pakket (bundle). Thema-onafhankelijk, scoped .vs-bundle. */

.vs-bundle {
    margin: 18px 0 0 !important;
    border: 2px solid #e6e8ef !important;
    border-radius: 14px !important;
    background: #fff !important;
    font-family: 'Lato', system-ui, sans-serif !important;
    overflow: hidden !important;
}

.vs-bundle[open] {
    border-color: var(--vs-color-primary, #1a1f3d) !important;
    box-shadow: 0 8px 28px rgba(26, 31, 61, .08) !important;
}

.vs-bundle__summary {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #1a1f3d !important;
    list-style: none !important;
    background: linear-gradient(0deg, #fafbff, #fff) !important;
}

.vs-bundle__summary::-webkit-details-marker { display: none !important; }

.vs-bundle__summary-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important; height: 24px !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    background: var(--vs-color-primary, #1a1f3d) !important;
    color: #fff !important;
    font-size: 18px !important; line-height: 1 !important;
    transition: transform .2s ease !important;
}

.vs-bundle[open] .vs-bundle__summary-icon { transform: rotate(45deg) !important; }

.vs-bundle__body {
    padding: 4px 18px 18px !important;
    border-top: 1px solid #eef0f5 !important;
}

.vs-bundle__row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    padding: 13px 0 !important;
    border-bottom: 1px dashed #eceff5 !important;
}
.vs-bundle__row:last-of-type { border-bottom: none !important; }

.vs-bundle__row--floor { background: transparent !important; }

.vs-bundle__check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    flex: 1 1 200px !important;
    min-width: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.vs-bundle__toggle {
    flex: 0 0 auto !important;
    width: 20px !important; height: 20px !important;
    margin: 2px 0 0 !important;
    accent-color: #1a8a3a !important;
    cursor: pointer !important;
}

.vs-bundle__main {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.vs-bundle__role {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #8a90a6 !important;
}

.vs-bundle__name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2733 !important;
    line-height: 1.3 !important;
}

.vs-bundle__hint {
    font-size: 12px !important;
    color: #5a6172 !important;
}

.vs-bundle__swap,
.vs-bundle__input {
    flex: 0 0 auto !important;
    height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid #d8dbe6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    color: #1f2733 !important;
}
.vs-bundle__input { width: 116px !important; }
.vs-bundle__swap { max-width: 180px !important; }

.vs-bundle__sub {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a8a3a !important;
    min-width: 70px !important;
    text-align: right !important;
}

.vs-bundle__row--floor .vs-bundle__sub { color: #1f2733 !important; }

.vs-bundle__row:not(.is-active):not(.vs-bundle__row--floor) .vs-bundle__name,
.vs-bundle__row:not(.is-active):not(.vs-bundle__row--floor) .vs-bundle__swap,
.vs-bundle__row:not(.is-active):not(.vs-bundle__row--floor) .vs-bundle__input {
    opacity: .6 !important;
}

/* Footer */
.vs-bundle__footer {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 14px !important;
    padding-top: 16px !important;
    border-top: 2px solid #eef0f5 !important;
}

.vs-bundle__totals {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
}

.vs-bundle__total-label {
    font-size: 12px !important;
    color: #5a6172 !important;
}

.vs-bundle__total {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a1f3d !important;
    line-height: 1.1 !important;
}

.vs-bundle__saved {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #1a8a3a !important;
}

.vs-bundle__add {
    flex: 0 0 auto !important;
    min-height: 48px !important;
    padding: 0 26px !important;
    border: none !important;
    border-radius: 10px !important;
    background: var(--vs-color-primary, #1a1f3d) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: filter .15s ease, transform .15s ease !important;
}
.vs-bundle__add:hover:not(:disabled) { filter: brightness(1.12) !important; transform: translateY(-1px) !important; }
.vs-bundle__add:disabled { opacity: .5 !important; cursor: not-allowed !important; }
.vs-bundle__add.is-loading { opacity: .7 !important; cursor: progress !important; }
.vs-bundle__add.vs-added { background: #1a8a3a !important; }

@media (max-width: 520px) {
    .vs-bundle__sub { margin-left: 0 !important; min-width: 0 !important; text-align: left !important; }
    .vs-bundle__add { width: 100% !important; }
}

/* Subtiele productthumbnails in de pakketrijen. */
.vs-bundle__thumb {
    width: 38px !important;
    height: 38px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #e6e9ef !important;
    background: #fff !important;
    flex: 0 0 auto !important;
    margin-right: 4px;
}
.vs-bundle__thumb--floor {
    width: 44px !important;
    height: 44px !important;
}