/* Плашка «Товар добавлен» (макет владельца 31.10). Цвета и размеры - токены specialty_v2.
   Телефон и планшет (до 1279 px, где есть нижнее меню): по центру над нижним меню, полосой покупки PDP и плашкой cookie (--sp-cookie-top), с учётом safe-area.
   Компьютер: sp.core ставит .sp-ctoast--anchored и left/top (у блока кнопки), стрелка - var(--sp-ctoast-arrow). */
.sp-ctoast-live {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
}

.sp-ctoast {
    box-sizing: border-box;
    position: fixed;
    right: auto;
    bottom: calc(var(--sp-cookie-top, calc(var(--sp-bn-h, 0px) + var(--sp-bar-h, 0px))) + var(--space-3) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    column-gap: var(--space-3);
    align-items: start;
    width: min(calc(100vw - var(--space-8)), 360px);
    padding: var(--space-3);
    font: var(--font-caption);
    color: var(--text-black);
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--elevation-menu);
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--motion-fast, 160ms) ease;
}

.sp-ctoast--noimg {
    grid-template-columns: minmax(0, 1fr) 20px;
}

.sp-ctoast.is-hiding {
    opacity: 0;
    pointer-events: none;
}

.sp-ctoast--anchored {
    right: auto;
    bottom: auto;
    width: 300px;
    transform: none;
}

.sp-ctoast__thumb {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    background: var(--bg-light-grey);
    border-radius: var(--radius-xs);
}

.sp-ctoast__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sp-ctoast__body {
    display: block;
    min-width: 0;
}

.sp-ctoast__title {
    display: block;
    font-weight: 600;
    color: var(--color-main);
}

.sp-ctoast__name {
    font-weight: 600;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-ctoast__link {
    display: inline-block;
    margin-top: var(--space-1);
    font-weight: 600;
    color: var(--color-main);
    text-decoration: underline;
}

.sp-ctoast__link:hover {
    color: var(--color-main-hover);
}

.sp-ctoast__link:focus-visible,
.sp-ctoast__x:focus-visible {
    outline: 2px solid var(--stroke-focused);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.sp-ctoast__x {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    font: 400 18px/20px var(--font-base);
    color: var(--text-dark-grey);
    background: none;
    border: 0;
    cursor: pointer;
}

.sp-ctoast__x::before {
    content: "";
    position: absolute;
    inset: -12px; /* зона касания 44x44 при виде 20x20 */
}

.sp-ctoast__x:hover {
    color: var(--text-black);
}

/* стрелка к кнопке: над плашкой стрелка вниз, при переносе под кнопку - вверх; у края экрана без стрелки */
.sp-ctoast--anchored::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: var(--sp-ctoast-arrow, 50%);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--bg-white);
    transform: rotate(45deg);
}

.sp-ctoast--anchored.sp-ctoast--below::after {
    top: -6px;
    bottom: auto;
}

.sp-ctoast--anchored.sp-ctoast--noarrow::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sp-ctoast {
        transition: none;
    }
}