/**
 * Mito Cart Type Guard - modal blokady mieszanego koszyka
 *
 * Pokazywany gdy klient probuje polaczyc usluge online z produktem fizycznym.
 * Oferuje akcje „Wyczysc koszyk i dodaj X".
 *
 * Faza 3: natywny <dialog> + showModal() (focus trap, inert tla, ::backdrop za darmo).
 *   Centered na desktop, bottom-sheet na mobile. Animacje fade jako baseline, slide/scale
 *   tylko przy prefers-reduced-motion: no-preference.
 * Faza 4 (visual polish): warstwa tokenow `--mito-cart-*`, firmowe niebieskie ACSS
 *   (`--primary` + warianty trans/light), wagi fontow spojne ze strona (500 naglowki/CTA,
 *   400 body, letter-spacing normal - Montserrat), zbalansowane przyciski (CTA + „Anuluj"
 *   pod nim, bez bordera), warstwowy cien karty, focus-visible.
 *   ZERO zmian w strukturze DOM, klasach, copy, JS, i18n i a11y mechanice Fazy 3.
 */

/* ---------------------------------------------------------------------------
 * Warstwa tokenow lokalnych - jedno zrodlo skali, koloru i rytmu.
 * Akcent = firmowy niebieski ACSS `--primary` (#0ba1bf) i jego warianty (trans/light).
 * CTA bialy tekst na `--primary` - spojnie z natywnym przyciskiem „Dodaj do koszyka".
 * ------------------------------------------------------------------------- */

.mito-cart-modal {
    --mito-cart-accent: var(--primary, #0ba1bf);
    --mito-cart-accent-hover: var(--primary-hover, #0dbbde);
    --mito-cart-accent-dark: var(--primary-dark, #076678);
    --mito-cart-accent-soft: var(--primary-trans-10, rgba(11, 161, 191, 0.1));
    --mito-cart-accent-ring: var(--primary-trans-20, rgba(11, 161, 191, 0.2));
    --mito-cart-on-accent: #ffffff;

    --mito-cart-ink: #1d2327;
    --mito-cart-ink-soft: #5b626a;
    --mito-cart-surface: #ffffff;
    --mito-cart-hairline: rgba(20, 24, 28, 0.09);

    --mito-cart-radius: 16px;
    /* Przyciski pill - spojnie z firmowymi CTA strony („Kupuje i place"). */
    --mito-cart-radius-btn: 999px;

    /* Rytm odstepow - skala 4px (0.5rem = 8, 0.75 = 12, 1 = 16, 1.5 = 24, 2 = 32) */
    --mito-cart-gap: 0.625rem;

    margin: auto; /* wysrodkowanie w top-layer */
    padding: 0;
    border: 0;
    max-width: 416px;
    width: calc(100% - 2rem);
    background: transparent;
    color: var(--mito-cart-ink);
    overflow: visible;
}

.mito-cart-modal:not([open]) {
    display: none;
}

.mito-cart-modal::backdrop {
    background: radial-gradient(
        130% 130% at 50% 0%,
        rgba(24, 28, 33, 0.5) 0%,
        rgba(16, 19, 23, 0.66) 100%
    );
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.mito-cart-modal__box {
    position: relative;
    background: var(--mito-cart-surface);
    border-radius: var(--mito-cart-radius);
    padding: 2.25rem 2rem 1.75rem;
    border: 1px solid var(--mito-cart-hairline);
    /* Warstwowa glebia: hairline kontakt + miekki ambient + gleboki rzut */
    box-shadow:
        0 1px 1px rgba(20, 24, 28, 0.04),
        0 10px 20px -10px rgba(20, 24, 28, 0.18),
        0 28px 56px -20px rgba(16, 19, 23, 0.3);
    text-align: center;
}

/* Drag handle - widoczny tylko w trybie bottom-sheet (mobile) */
.mito-cart-modal__handle {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Naglowek: medalion ikony zamiany + tytul + komunikat
 * ------------------------------------------------------------------------- */

.mito-cart-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.125rem;
    border-radius: 50%;
    /* Miekki niebieski krazek z subtelnym pionowym swiatlem + wewnetrzny rant + halo */
    background: linear-gradient(
        165deg,
        var(--primary-light-trans-10, rgba(183, 239, 251, 0.45)),
        var(--mito-cart-accent-soft)
    );
    color: var(--mito-cart-accent);
    box-shadow:
        inset 0 0 0 1px var(--mito-cart-accent-ring),
        0 0 0 6px var(--mito-cart-accent-soft);
}

.mito-cart-modal__icon svg {
    width: 1.625rem;
    height: 1.625rem;
}

.mito-cart-modal__title {
    margin: 0 0 0.5rem;
    font-size: 1.3125rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--mito-cart-ink);
    text-wrap: balance;
}

.mito-cart-modal__msg {
    margin: 0 auto 1.375rem;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 400;
    color: var(--mito-cart-ink-soft);
    text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * Karty wyboru „co zamowic najpierw" - radiogroup (ukryte <input type=radio> +
 * etykieta-karta). Domyslnie obie wyszarzone; zaznaczona = pelny kolor + akcent;
 * niezaznaczona na hover zyskuje odrobine koloru.
 * ------------------------------------------------------------------------- */

.mito-cart-modal__choices {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0 0 1.375rem;
    text-align: left;
}

.mito-cart-modal__choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid var(--mito-cart-hairline);
    border-radius: 12px;
    background: var(--mito-cart-surface);
    cursor: pointer;
    opacity: 0.62; /* domyslnie wyszarzone */
    transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mito-cart-modal__choice:hover {
    opacity: 0.9;
    border-color: var(--mito-cart-accent-ring);
}

.mito-cart-modal__choice.is-selected {
    opacity: 1;
    border-color: var(--mito-cart-accent);
    background: var(--mito-cart-accent-soft);
    box-shadow: 0 1px 6px -2px var(--mito-cart-accent-ring);
}

/* Radio wizualnie ukryty, ale fokusowalny (label wokol = klik w karte) */
.mito-cart-modal__choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* Focus z klawiatury → ring na calej karcie */
.mito-cart-modal__choice:has(.mito-cart-modal__choice-input:focus-visible) {
    outline: 2px solid var(--mito-cart-accent-dark);
    outline-offset: 2px;
}

/* Miniatura / „talia" produktow */
.mito-cart-modal__choice-media {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(0.55);
    transition: filter 0.15s ease;
}

.mito-cart-modal__choice:hover .mito-cart-modal__choice-media {
    filter: grayscale(0.2);
}

.mito-cart-modal__choice.is-selected .mito-cart-modal__choice-media {
    filter: none;
}

.mito-cart-modal__choice-media.is-empty {
    border-radius: 9px;
    background: #f0f0f1;
}

.mito-cart-modal__thumb {
    width: 3rem;
    height: 3rem;
    border-radius: 9px;
    object-fit: cover;
    background: #f0f0f1;
    display: block;
}

/* Talia: miniatury jedna za druga, lekki peek; przednia (i=0) na wierzchu */
.mito-cart-modal__deck {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
}

.mito-cart-modal__deck .mito-cart-modal__thumb {
    position: absolute;
    top: calc(var(--i, 0) * 4px);
    left: calc(var(--i, 0) * 4px);
    width: 2.625rem;
    height: 2.625rem;
    z-index: calc(10 - var(--i, 0));
    box-shadow: 0 0 0 2px var(--mito-cart-surface);
}

.mito-cart-modal__choice-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mito-cart-modal__choice-name {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mito-cart-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mito-cart-modal__choice-sub {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--mito-cart-ink-soft);
}

/* Znacznik wyboru - pusty pierscien, po zaznaczeniu wypelniony akcentem + check */
.mito-cart-modal__choice-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    border: 2px solid #d2d5d9;
    color: transparent;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mito-cart-modal__choice-check svg {
    width: 0.8125rem;
    height: 0.8125rem;
}

.mito-cart-modal__choice.is-selected .mito-cart-modal__choice-check {
    border-color: var(--mito-cart-accent);
    background: var(--mito-cart-accent);
    color: var(--mito-cart-on-accent);
}

.mito-cart-modal__error {
    margin: 0 0 1.25rem;
    padding: 0.7rem 0.85rem 0.7rem 0.95rem;
    border-radius: 10px;
    border-left: 3px solid #c0392b;
    background: #fdf1f0;
    color: #8a2018;
    font-size: 0.9375rem;
    line-height: 1.45;
    text-align: left;
}

.mito-cart-modal__error[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Przycisk zamkniecia (X)
 * ------------------------------------------------------------------------- */

.mito-cart-modal__x {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    background: transparent;
    color: #9aa0a6;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}

.mito-cart-modal__x svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

.mito-cart-modal__x:hover {
    background: #f1f2f3;
    color: var(--mito-cart-ink);
}

/* ---------------------------------------------------------------------------
 * Akcje - pionowy stos na kazdym ekranie: CTA na gorze, „Anuluj" pod nim.
 * DOM order = Anuluj, Potwierdz; column-reverse stawia Potwierdz wyzej.
 * ------------------------------------------------------------------------- */

.mito-cart-modal__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--mito-cart-gap);
}

/* Wspolne fundamenty obu przyciskow - rowna wysokosc i geometria */
.mito-cart-modal__confirm,
.mito-cart-modal__cancel {
    min-height: 48px;
    border-radius: var(--mito-cart-radius-btn);
    font-family: inherit;
    cursor: pointer;
    transition:
        transform 0.12s ease,
        box-shadow 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}

/* CTA primary - firmowy niebieski z bialym tuszem (jak natywny add-to-cart) */
.mito-cart-modal .mito-cart-modal__confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    border: 0;
    background: var(--mito-cart-accent);
    color: var(--mito-cart-on-accent);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
    box-shadow: 0 2px 8px -2px var(--mito-cart-accent-ring);
}

.mito-cart-modal .mito-cart-modal__confirm:not(:disabled):hover {
    background: var(--mito-cart-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -3px var(--mito-cart-accent-ring);
}

.mito-cart-modal .mito-cart-modal__confirm:not(:disabled):active {
    transform: translateY(0);
    background: var(--mito-cart-accent-dark);
}

/* CTA nieaktywny dopoki klient nie wybierze karty */
.mito-cart-modal .mito-cart-modal__confirm:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.mito-cart-modal__confirm.is-loading {
    opacity: 0.9;
    cursor: progress;
    transform: none;
}

/* Akcja drugorzedna - pod CTA, bez bordera, czytelna ale wyciszona */
.mito-cart-modal .mito-cart-modal__cancel {
    padding: 0.65rem 1.3rem;
    border: 0;
    background: transparent;
    color: var(--mito-cart-ink-soft);
    font-size: 0.9375rem;
    font-weight: 500;
}

.mito-cart-modal .mito-cart-modal__cancel:hover {
    background: var(--mito-cart-accent-soft);
    color: var(--mito-cart-accent-dark);
}

/* ---------------------------------------------------------------------------
 * Focus-visible - czytelny ring dla a11y (NIE usuwamy outline bez zamiennika).
 * Niebieski ring + miekka aureola, czytelne na bialej karcie i na akcencie.
 * ------------------------------------------------------------------------- */

.mito-cart-modal__confirm:focus-visible,
.mito-cart-modal__cancel:focus-visible,
.mito-cart-modal__x:focus-visible {
    outline: 2px solid var(--mito-cart-accent-dark);
    outline-offset: 2px;
}

.mito-cart-modal__confirm:focus-visible {
    box-shadow: 0 0 0 4px var(--mito-cart-accent-ring);
}

/* ---------------------------------------------------------------------------
 * Spinner (stan ladowania) - na niebieskim CTA z bialym tuszem spinner tez bialy
 * ------------------------------------------------------------------------- */

.mito-cart-modal__spinner {
    display: none;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    flex: 0 0 auto;
}

.mito-cart-modal__confirm.is-loading .mito-cart-modal__spinner {
    display: inline-block;
    animation: mito-cart-spin 0.6s linear infinite;
}

@keyframes mito-cart-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * Animacje - baseline = sam fade (wejscie i wyjscie), takze przy reduced-motion.
 * ------------------------------------------------------------------------- */

.mito-cart-modal[open] {
    animation: mito-cart-modal-in 0.2s ease-out;
}

.mito-cart-modal[open]::backdrop {
    animation: mito-cart-backdrop-in 0.2s ease-out;
}

.mito-cart-modal.is-closing {
    animation: mito-cart-modal-out 0.2s ease-in forwards;
}

.mito-cart-modal.is-closing::backdrop {
    animation: mito-cart-backdrop-out 0.2s ease-in forwards;
}

@keyframes mito-cart-modal-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mito-cart-modal-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes mito-cart-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mito-cart-backdrop-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Slide/scale TYLKO gdy uzytkownik nie prosil o ograniczenie ruchu */
@media (prefers-reduced-motion: no-preference) {
    .mito-cart-modal[open] {
        animation: mito-cart-modal-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mito-cart-modal.is-closing {
        animation: mito-cart-modal-out 0.2s ease-in forwards;
    }

    @keyframes mito-cart-modal-in {
        from { opacity: 0; transform: translateY(10px) scale(0.97); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes mito-cart-modal-out {
        from { opacity: 1; transform: none; }
        to   { opacity: 0; transform: translateY(8px) scale(0.98); }
    }
}

/* ---------------------------------------------------------------------------
 * Mobile (<= 600px): bottom-sheet - przyklejony do dolu, slide-up
 * ------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .mito-cart-modal {
        margin: auto auto 0; /* przyklej do dolu, wysrodkuj w poziomie */
        width: 100%;
        max-width: none;
    }

    .mito-cart-modal__box {
        border-radius: 20px 20px 0 0;
        border-bottom: 0;
        padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    .mito-cart-modal__handle {
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        margin: 0 auto 1.25rem;
        border-radius: 999px;
        background: #d7d9db;
    }

    /* Slide-up od dolu zamiast scale - tylko przy dozwolonym ruchu */
    @media (prefers-reduced-motion: no-preference) {
        @keyframes mito-cart-modal-in {
            from { opacity: 0; transform: translateY(100%); }
            to   { opacity: 1; transform: none; }
        }

        @keyframes mito-cart-modal-out {
            from { opacity: 1; transform: none; }
            to   { opacity: 0; transform: translateY(100%); }
        }
    }
}

/* ===========================================================================
 * Faza 6 - toast „Dokoncz drugie zamowienie" (strona podziekowania).
 *
 * NIEBLOKUJACY snackbar w lewym dolnym rogu (NIE modal/showModal) - klient wlasnie
 * zaplacil, nie zaslaniamy potwierdzenia zamowienia. Domyslnie poza ekranem; JS
 * dodaje .is-visible po krotkiej zwloce. Reuzywa tokeny `--mito-cart-*` oraz klasy
 * `.mito-cart-modal__deck` / `.mito-cart-modal__thumb` dla spojnosci z dialogiem.
 * ========================================================================= */

.mito-cart-toast {
    /* Te same tokeny co dialog - akcent firmowy niebieski ACSS + warianty. */
    --mito-cart-accent: var(--primary, #0ba1bf);
    --mito-cart-accent-hover: var(--primary-hover, #0dbbde);
    --mito-cart-accent-dark: var(--primary-dark, #076678);
    --mito-cart-accent-soft: var(--primary-trans-10, rgba(11, 161, 191, 0.1));
    --mito-cart-accent-ring: var(--primary-trans-20, rgba(11, 161, 191, 0.2));
    --mito-cart-on-accent: #ffffff;
    --mito-cart-ink: #1d2327;
    --mito-cart-ink-soft: #5b626a;
    --mito-cart-surface: #ffffff;
    --mito-cart-hairline: rgba(20, 24, 28, 0.09);

    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 9999;
    width: 360px;
    max-width: calc(100vw - 2.5rem);
    color: var(--mito-cart-ink);

    /* Stan spoczynkowy: poza ekranem (wsuniety w lewo + lekko w dol), nieklikalny. */
    opacity: 0;
    transform: translateY(12px) translateX(-12px);
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mito-cart-toast.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.mito-cart-toast.is-leaving {
    opacity: 0;
    transform: translateY(12px) translateX(-12px);
    pointer-events: none;
}

.mito-cart-toast__box {
    position: relative;
    background: var(--mito-cart-surface);
    border: 1px solid var(--mito-cart-hairline);
    border-radius: var(--mito-cart-radius, 16px);
    padding: 1.15rem 1.2rem 1.1rem;
    box-shadow:
        0 1px 1px rgba(20, 24, 28, 0.04),
        0 10px 20px -10px rgba(20, 24, 28, 0.18),
        0 24px 48px -20px rgba(16, 19, 23, 0.3);
}

.mito-cart-toast__x {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    background: transparent;
    color: #9aa0a6;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}

.mito-cart-toast__x svg {
    width: 0.95rem;
    height: 0.95rem;
}

.mito-cart-toast__x:hover {
    background: #f1f2f3;
    color: var(--mito-cart-ink);
}

.mito-cart-toast__title {
    margin: 0 1.75rem 0.3rem 0;
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--mito-cart-ink);
}

.mito-cart-toast__text {
    margin: 0 0 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--mito-cart-ink-soft);
    text-wrap: pretty;
}

/* Podglad odlozonego produktu: miniatura/„talia" + nazwa (+ licznik przy >1). */
.mito-cart-toast__product {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.6rem;
    margin: 0 0 0.95rem;
    border: 1px solid var(--mito-cart-hairline);
    border-radius: 12px;
    background: var(--mito-cart-accent-soft);
}

.mito-cart-toast__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mito-cart-toast__media .mito-cart-modal__thumb {
    width: 2.75rem;
    height: 2.75rem;
}

.mito-cart-toast__media .mito-cart-modal__deck {
    width: 3rem;
    height: 2.75rem;
}

.mito-cart-toast__media .mito-cart-modal__deck .mito-cart-modal__thumb {
    width: 2.25rem;
    height: 2.25rem;
}

.mito-cart-toast__product-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mito-cart-toast__name {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mito-cart-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mito-cart-toast__more {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--mito-cart-ink-soft);
}

.mito-cart-toast__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mito-cart-toast__cta {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.6rem 1.1rem;
    border-radius: var(--mito-cart-radius-btn, 10px);
    background: var(--mito-cart-accent);
    color: var(--mito-cart-on-accent);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 8px -2px var(--mito-cart-accent-ring);
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.mito-cart-toast__cta:hover {
    color: var(--mito-cart-on-accent);
    background: var(--mito-cart-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -3px var(--mito-cart-accent-ring);
}

.mito-cart-toast__cta:active {
    transform: translateY(0);
    background: var(--mito-cart-accent-dark);
}

.mito-cart-toast__cta:focus-visible,
.mito-cart-toast__x:focus-visible {
    outline: 2px solid var(--mito-cart-accent-dark);
    outline-offset: 2px;
}

/* Respekt dla ograniczonego ruchu - bez przesuwania, sam fade. */
@media (prefers-reduced-motion: reduce) {
    .mito-cart-toast {
        transform: none;
        transition: opacity 0.2s ease;
    }

    .mito-cart-toast.is-leaving {
        transform: none;
    }
}

/* Mobile: pelna szerokosc u dolu, ponad ewentualnymi paskami. */
@media (max-width: 600px) {
    .mito-cart-toast {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
        max-width: none;
    }
}