/*
 * Zijpaneel en melding na "In winkelwagen" (Starteenwinkel). Volgt de kleuren van het
 * FilamentCraft-thema (--fc-color-*), met eigen standaardwaarden als die ontbreken.
 * Desktop: van rechts. Mobiel (tot 640px): van onderen, bijna schermvullend.
 */
.sew-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html.sew-sidecart-open { overflow: hidden; }

.sew-sidecart {
    --sew-bg: var(--fc-color-surface, var(--fc-color-background, #fff));
    --sew-fg: var(--fc-color-on-surface, var(--fc-color-on-background, #1a1a1a));
    --sew-accent: var(--fc-color-primary, #1a1a1a);
    --sew-on-accent: var(--fc-color-on-primary, #fff);
    --sew-line: color-mix(in srgb, var(--sew-fg) 12%, transparent);
    --sew-ok: #15803d;
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    inline-size: min(28rem, 100vw);
    max-inline-size: 100vw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    background: var(--sew-bg);
    color: var(--sew-fg);
    box-shadow: -12px 0 40px rgb(0 0 0 / .18);
    font: inherit;
    overflow: hidden;
}
.sew-sidecart:not([open]) { display: none; }
.sew-sidecart[open] { display: flex; flex-direction: column; animation: sew-slide-in .28s cubic-bezier(.2, .8, .2, 1); }
.sew-sidecart::backdrop { background: rgb(0 0 0 / .4); animation: sew-fade-in .2s ease; }

.sew-sidecart__panel { display: flex; flex-direction: column; block-size: 100%; min-block-size: 0; }
.sew-sidecart__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-block-end: 1px solid var(--sew-line); }
.sew-sidecart__title { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.sew-sidecart__title:focus { outline: none; }
.sew-sidecart__title:focus-visible { outline: 2px solid var(--sew-accent); outline-offset: 4px; border-radius: 4px; }
.sew-sidecart__check { inline-size: 1.6rem; block-size: 1.6rem; flex: none; fill: var(--sew-ok); stroke: #fff; }
.sew-sidecart__close { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.sew-sidecart__close:hover { background: var(--sew-line); }
.sew-sidecart__close svg { inline-size: 1.25rem; block-size: 1.25rem; }

.sew-sidecart__body { flex: 1; min-block-size: 0; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sew-sidecart__problem { margin: 0; padding: .7rem .9rem; border-radius: .5rem; background: #fef2f2; color: #991b1b; font-size: .9rem; }

.sew-sidecart__title sup { font-size: .6em; font-weight: 600; margin-inline-start: .15rem; opacity: .7; }
.sew-sidecart__added { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; font-weight: 600; color: var(--sew-ok); }
.sew-sidecart__added .sew-sidecart__check { inline-size: 1.25rem; block-size: 1.25rem; }
.sew-sidecart__empty { margin: 1rem 0; opacity: .7; text-align: center; }

/* Regels: foto, naam, plus/min en verwijderen, prijs */
.sew-sidecart__lines { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.sew-sidecart__line { display: grid; grid-template-columns: 5rem 1fr auto; gap: .9rem; align-items: start; }
.sew-sidecart__thumb { display: flex; align-items: center; justify-content: center; inline-size: 5rem; aspect-ratio: 4 / 5; border-radius: .6rem; overflow: hidden; background: color-mix(in srgb, var(--sew-fg) 6%, transparent); font-weight: 600; color: inherit; text-decoration: none; }
.sew-sidecart__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sew-sidecart__info { display: flex; flex-direction: column; min-inline-size: 0; }
.sew-sidecart__name { display: block; font-weight: 600; line-height: 1.35; color: inherit; text-decoration: none; }
a.sew-sidecart__name:hover { text-decoration: underline; }
.sew-sidecart__muted { display: block; font-size: .875rem; opacity: .7; margin-block-start: .15rem; }
.sew-sidecart__controls { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-start: .65rem; }
.sew-sidecart__controls form { margin: 0; }
.sew-qty { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--sew-fg) 22%, transparent); border-radius: 999px; }
.sew-qty__btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.sew-qty__btn:hover { background: var(--sew-line); }
.sew-qty__btn svg { inline-size: 1rem; block-size: 1rem; }
.sew-qty__value { min-inline-size: 1.5rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.sew-sidecart__remove { border: 0; padding: .25rem 0; background: none; color: inherit; font: inherit; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; opacity: .75; cursor: pointer; }
.sew-sidecart__remove:hover { opacity: 1; }
.sew-sidecart__price { display: flex; flex-direction: column; align-items: flex-end; margin: 0; font-weight: 600; white-space: nowrap; }
.sew-sidecart__price.is-sale { color: #b91c1c; }
.sew-sidecart__price s { font-weight: 400; font-size: .85rem; color: var(--sew-fg); opacity: .6; }
.sew-sidecart form.is-busy { opacity: .55; pointer-events: none; }

.sew-sidecart__shipping { padding: .8rem .9rem; border-radius: .6rem; background: color-mix(in srgb, var(--sew-ok) 9%, transparent); font-size: .9rem; }
.sew-sidecart__shipping p { margin: 0 0 .55rem; }
.sew-sidecart__bar { block-size: .45rem; border-radius: 999px; background: color-mix(in srgb, var(--sew-fg) 12%, transparent); overflow: hidden; }
.sew-sidecart__bar span { display: block; block-size: 100%; border-radius: inherit; background: var(--sew-ok); transition: inline-size .4s ease; }

/* Het duwtje voor een automatische actie (ontwerp 10, A8), het cadeau en de kortingsregels */
.sew-sidecart__promo { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .7rem .9rem; border-radius: .6rem; background: color-mix(in srgb, var(--sew-accent) 12%, transparent); font-size: .9rem; }
.sew-sidecart__promo svg { flex: none; inline-size: 1.2rem; block-size: 1.2rem; color: var(--sew-accent); }
.sew-sidecart__gift { align-self: start; padding: .1rem .5rem; border-radius: 999px; background: var(--sew-accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.sew-sidecart__discount { display: flex; justify-content: space-between; gap: 1rem; margin-block-end: .35rem; font-size: .9rem; }

/* Past hierbij: een schuifrij met kaarten en snel toevoegen */
.sew-sidecart__suggestions { margin-inline: -1.25rem; padding: 1.1rem 1.25rem; background: color-mix(in srgb, var(--sew-fg) 5%, transparent); }
.sew-sidecart__suggestions-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: .75rem; }
.sew-sidecart__suggestions h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.sew-sidecart__arrows { display: flex; gap: .25rem; }
.sew-sidecart__arrows button { display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.sew-sidecart__arrows button:hover { background: var(--sew-line); }
.sew-sidecart__arrows svg { inline-size: 1.1rem; block-size: 1.1rem; }
.sew-sidecart__suggestions ul { display: flex; gap: .75rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sew-sidecart__suggestions ul::-webkit-scrollbar { display: none; }
.sew-sidecart__card { flex: 0 0 86%; scroll-snap-align: start; display: grid; grid-template-columns: 4.25rem 1fr auto; gap: .8rem; align-items: center; padding: .55rem; border-radius: .75rem; background: var(--sew-bg); }
.sew-sidecart__card .sew-sidecart__thumb { inline-size: 4.25rem; aspect-ratio: 1; }
.sew-sidecart__card-info { min-inline-size: 0; }
.sew-sidecart__card .sew-sidecart__name { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sew-sidecart__card form { margin: 0; }
.sew-sidecart__add { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.6rem; block-size: 2.6rem; border: 0; border-radius: 999px; background: var(--sew-fg); color: var(--sew-bg); cursor: pointer; }
.sew-sidecart__add:hover { filter: brightness(1.2); }
.sew-sidecart__add svg { inline-size: 1.15rem; block-size: 1.15rem; }

/* Onderin, donker: subtotaal en de twee knoppen */
.sew-sidecart__foot { padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom)); background: var(--sew-fg); color: var(--sew-bg); }
.sew-sidecart__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sew-sidecart__total strong { font-size: 1.6rem; line-height: 1.1; }
.sew-sidecart__note { margin: .35rem 0 .9rem; font-size: .8rem; opacity: .75; }
.sew-sidecart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sew-sidecart__btn { display: flex; align-items: center; justify-content: center; min-block-size: 3rem; padding: .7rem 1rem; border-radius: 999px; font: inherit; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; }
.sew-sidecart__btn--primary { background: var(--sew-bg); color: var(--sew-fg); border: 1px solid var(--sew-bg); }
.sew-sidecart__btn--primary:hover { filter: brightness(.94); }
.sew-sidecart__btn--secondary { background: transparent; color: inherit; border: 1px solid color-mix(in srgb, var(--sew-bg) 70%, transparent); }
.sew-sidecart__btn--secondary:hover { background: color-mix(in srgb, var(--sew-bg) 12%, transparent); }
.sew-sidecart__btn:focus-visible, .sew-sidecart__close:focus-visible, .sew-sidecart a:focus-visible, .sew-sidecart button:focus-visible { outline: 2px solid var(--sew-accent); outline-offset: 2px; }
.sew-sidecart__foot .sew-sidecart__btn:focus-visible { outline-color: var(--sew-bg); }

.sew-cart-toast { position: fixed; z-index: 60; inset-inline: 1rem; inset-block-end: 1rem; margin-inline: auto; max-inline-size: 28rem; display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; justify-content: center; padding: .85rem 1.1rem; border-radius: .6rem; background: #14532d; color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .2); font-size: .95rem; animation: sew-fade-in .2s ease; }
.sew-cart-toast[hidden] { display: none; }
.sew-cart-toast a { color: inherit; font-weight: 600; text-decoration: underline; }

form.is-busy [aria-busy="true"] { opacity: .7; cursor: progress; }

@keyframes sew-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sew-slide-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sew-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 640px) {
    .sew-sidecart__btn { padding-inline: .6rem; font-size: .9rem; white-space: nowrap; }
    .sew-sidecart { inset: auto 0 0 0; inline-size: 100vw; block-size: auto; max-block-size: 92dvh; border-radius: 1rem 1rem 0 0; box-shadow: 0 -12px 40px rgb(0 0 0 / .18); }
    .sew-sidecart[open] { animation-name: sew-slide-up; }
}

@media (prefers-reduced-motion: reduce) {
    .sew-sidecart[open], .sew-sidecart::backdrop, .sew-cart-toast { animation: none; }
}