/* ============================================================
   15. SIDEBAR CART (productpagina — sticky in grid layout)
   ============================================================ */
.page-layout {
    display: grid;
    grid-template-columns: 1fr minmax(0, 960px) 1fr;
    max-width: 1440px;
    overflow-x: clip;
    margin: 0 auto;
    position: relative;
}
/* Lege linkerkolom */
.page-layout::before {
    content: '';
}
.page-main { min-width: 0; }

.page-sidebar.cart-sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
    width: 280px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 12px 0 0 20px;
    margin-bottom: 40px;
}

.cart-sidebar-inner { }

.page-sidebar .shipping-msg {
    font-size: 11px;
}

@media (max-width: 1440px) {
    .page-layout {
        grid-template-columns: 1fr minmax(0, 960px) 1fr;
    }
    .page-sidebar.cart-sidebar { display: none; }
}

/* 16-23. Checkout: verhuisd naar static/webshop/css/pages/_checkout.css (COMMIT_10a PLAN_FRONTEND_GODFILES) */

/* 24+25. Status pages + confirmation: verhuisd naar static/webshop/css/pages/_status.css (COMMIT_10b PLAN_FRONTEND_GODFILES) */

/* Melding als een dagwissel iets uit het mandje haalt (mandje-gekort.js). Bouwt op
   .date-rechoose; zijbalk vanaf 1441 px, daaronder vast boven de mandbalk. */
/* Dubbele klasse: _checkout.css (met .date-rechoose) laadt na dit bestand. */
.date-rechoose.mandje-gekort {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    text-align: left;
    color: var(--color-text);
    margin: 0 0 10px;
}
.mandje-gekort-zin { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.45; }
.mandje-gekort-knoppen { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.mandje-gekort-terug {
    flex: 1;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    background: var(--color-background-light);
    color: var(--color-accent);
    font: 600 13px/1.25 var(--font-ui);
    cursor: pointer;
}
.mandje-gekort-sluit {
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: none;
    color: var(--color-text-light);
    font-size: 20px;
    cursor: pointer;
}
.date-rechoose.mandje-gekort--zijbalk { margin: 0 0 12px; }
/* Vast boven de pagina: dekkend, met dezelfde zachte tint erover. */
.date-rechoose.mandje-gekort--balk {
    background: linear-gradient(var(--color-accent-light-bg), var(--color-accent-light-bg)),
        var(--color-background-light);
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    box-shadow: 0 4px 16px var(--shadow-color);
}
@media (max-width: 1440px) { .date-rechoose.mandje-gekort--zijbalk { display: none; } }
@media (min-width: 1441px) { .date-rechoose.mandje-gekort--balk { display: none; } }

/* Voordeur (voordeur.js): kop boven het dagpaneel als "In mandje" eerst de dag vraagt. */
.voordeur-vraag { margin: 0 0 14px; }
.voordeur-kop { margin: 0; font: 700 17px/1.3 var(--font-heading); color: var(--color-text); }
.voordeur-sub { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--color-text-light); }

/* Kalender (checkout en datumbalk), vol voor dit mandje: het rood van een sluiting (uit .cal-day.closed) met "vol",
   zonder de doorhaal-streep: het woord zegt het al, en op de datumbalk blijft de dag kiesbaar. */
.cal-day.closed.vol::after { content: none; }
/* Datumbalk op de productpagina: een volle dag blijft kiesbaar (het mandje wordt dan gekort, met melding). */
.cal-day.closed.vol.available { cursor: pointer; }
.cal-day.closed.vol.available:hover { background: #f4c4bb; }
.cal-day.closed.vol.selected,
.cal-day.closed.vol.selected:hover { background: var(--color-accent); color: var(--color-text-button); font-weight: 700; }