/* Общие стили фона подложки */ .t-popup.t-popup_show { background: rgba(0,0,0,.25) !important; } /* Делаем контейнер попапа выезжающей правой панелью / .t-popup.t-popup_show .t-popup__container { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important; height: 100vh !important; max-height: 100vh !important; width: 560px !important; / ваша ширина панели */ max-width: 95vw !important; transform: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: -20px 0 50px rgba(0,0,0,.25) !important; overflow-y: auto !important; background: #fff !important; animation: t-drawer-in .28s ease-out; } /* Анимация появления */ @keyframes t-drawer-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Кнопка закрытия — в правом верхнем углу панели */ .t-popup.t-popup_show .t-popup__close { right: 16px !important; top: 16px !important; } /* Сетка контента внутри карточки товара — в один столбец (если нужно) */ .t-popup.t-popup_show .t-store__prod-grid { display: block !important; } /* На мобильных — оставить фуллскрин, чтобы не ломать UX */ @media (max-width: 980px) { .t-popup.t-popup_show .t-popup__container { width: 100vw !important; box-shadow: none !important; } }
Календарь мероприятий