/* Kloosterbeleving Meer Verkoop — winkelwagen & productpagina */

/* ---- Gratis-verzending-voortgangsbalk ---- */
.kb-mv-freeship {
        margin: 0 0 1.25em;
        padding: 0.9em 1.1em;
        border: 1px solid #e6dcc7;
        border-radius: 10px;
        background: #fbf7ee;
}

.kb-mv-fs-msg {
        margin: 0 0 0.55em;
        font-size: 0.98em;
        line-height: 1.4;
        color: #4a3f2a;
}

.kb-mv-fs-done {
        color: #1f7a3d;
}

.kb-mv-fs-check {
        display: inline-block;
        margin-right: 0.25em;
        font-weight: 700;
        color: #1f7a3d;
}

.kb-mv-fs-track {
        width: 100%;
        height: 10px;
        border-radius: 999px;
        background: #ece3d1;
        overflow: hidden;
}

.kb-mv-fs-fill {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient( 90deg, #c79a3a, #b07a16 );
        transition: width 0.4s ease;
}

.kb-mv-fs-fill-done {
        background: linear-gradient( 90deg, #2f9c53, #1f7a3d );
}

/* ---- Cross-sell ("Maak het compleet") in de winkelwagen ---- */
.kb-mv-crosssell {
        margin: 1.5em 0 0;
        padding: 1.1em 1.1em 1.25em;
        border: 1px solid #e6dcc7;
        border-radius: 10px;
        background: #fbf7ee;
}

.kb-mv-cs-title {
        margin: 0 0 0.85em;
        font-size: 1.15em;
        color: #4a3f2a;
}

.kb-mv-cs-grid {
        display: grid;
        grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
        gap: 1em;
        margin: 0;
        padding: 0;
        list-style: none;
}

.kb-mv-cs-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 0;
        padding: 0.75em;
        background: #fff;
        border: 1px solid #ece3d1;
        border-radius: 8px;
}

.kb-mv-cs-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: inherit;
}

.kb-mv-cs-link img,
.kb-mv-fbt-link img {
        width: 100%;
        max-width: 120px;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 0.5em;
}

.kb-mv-cs-name,
.kb-mv-fbt-name {
        display: block;
        font-size: 0.9em;
        line-height: 1.3;
        margin-bottom: 0.4em;
}

.kb-mv-cs-price,
.kb-mv-fbt-price {
        display: block;
        font-weight: 700;
        color: #4a3f2a;
        margin-bottom: 0.6em;
}

/* Compacte "In winkelwagen"-knop: overschrijf de generieke thema-`.button`
 * (display:flex; width:fit-content; padding:12px 25px; border-radius:20px) zodat
 * de knop netjes in de kaart past i.p.v. een overdreven grote ovaal te worden. */
.kb-mv-cs-btn,
.kb-mv-fbt-btn {
        margin-top: auto;
        width: 100%;
        box-sizing: border-box;
        padding: 0.6em 0.8em !important;
        font-size: 0.78em !important;
        line-height: 1.25 !important;
        letter-spacing: 0.4px !important;
        border-radius: 8px !important;
        box-shadow: none !important;
}

.kb-mv-cs-btn:hover,
.kb-mv-fbt-btn:hover {
        transform: translateY( -2px ) !important;
        box-shadow: 0 4px 12px -6px rgba( 0, 0, 0, 0.3 ) !important;
}

/* Laad-/bevestigingsstatus bij 1-klik toevoegen (winkelwagen + productpagina). */
.kb-mv-cs-btn.kb-mv-cs-loading,
.kb-mv-fbt-btn.kb-mv-cs-loading {
        opacity: 0.75 !important;
        cursor: progress !important;
        transform: none !important;
}

.kb-mv-cs-btn.kb-mv-cs-added,
.kb-mv-fbt-btn.kb-mv-cs-added {
        background: #1f7a3d !important;
        border-color: #1f7a3d !important;
        color: #fff !important;
        cursor: default !important;
        transform: none !important;
}

.kb-mv-cs-btn.kb-mv-cs-added:hover,
.kb-mv-fbt-btn.kb-mv-cs-added:hover {
        transform: none !important;
        box-shadow: none !important;
}

/* ---- "Vaak samen gekocht" op de productpagina ---- */
.kb-mv-fbt {
        clear: both;
        margin: 2.5em 0 1em;
}

.kb-mv-fbt-title {
        margin: 0 0 1em;
        font-size: 1.4em;
        color: #4a3f2a;
}

.kb-mv-fbt-grid {
        display: grid;
        grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
        gap: 1.25em;
        margin: 0;
        padding: 0;
        list-style: none;
}

.kb-mv-fbt-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 0;
        padding: 0;
}

.kb-mv-fbt-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: inherit;
}