/* ============================================================
   SSM Popups — оверлей-модал в стилистике сайта.
   Держим язык темы: карточка (радиус 8px, бордер var(--line), мягкая
   зелёная тень), сериф-заголовок, текст var(--ink2), кнопка .ss-btn--accent,
   закрытие — как у лайтбокса. Токены темы с фолбэками.
   z-index: куки 90 < лайтбокс 120 < ПОПАП 130 < моб-меню 100001.
   ============================================================ */
.ss-popup {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 26, 20, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
}
.ss-popup.is-shown { display: flex; }
.ss-popup.is-open { opacity: 1; }

.ss-popup__box {
  position: relative;
  width: 100%;
  /* Flex-элемент с min-width:auto не сжимается ниже натуральной ширины картинки внутри
     и вылезает за край узкого экрана. Явный 0 возвращает управление width/max-width. */
  min-width: 0;
  max-width: 440px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: var(--bg, #e6e2d6);
  color: var(--ink, #28352c);
  border: 1px solid var(--line, rgba(40, 53, 44, .15));
  border-radius: 8px;
  box-shadow: 0 30px 70px rgba(17, 26, 20, .3);
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity .4s ease, transform .4s ease;
}
.ss-popup.is-open .ss-popup__box { opacity: 1; transform: none; }

/* Закрытие — пилюля с бордером, как .ss-lb__close */
.ss-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--ink, #28352c);
  background: rgba(236, 233, 222, .82);
  border: 1px solid var(--line, rgba(40, 53, 44, .15));
  border-radius: 100px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.ss-popup__close:hover {
  background: var(--accent, #e0701a);
  color: #fff;
  border-color: var(--accent, #e0701a);
}

.ss-popup__media { margin: 0; }
.ss-popup__media img { width: 100%; height: auto; display: block; border-radius: 8px 8px 0 0; }

/* Попап без текстового блока — весь контент на картинке. Узкая колонка 440px сделала бы
   надписи на баннере нечитаемыми, поэтому карточка шире, а скругление идёт по всем углам. */
.ss-popup__box--media-only { max-width: 720px; }
.ss-popup__media--only img { border-radius: 8px; }

.ss-popup__body { padding: clamp(30px, 4vw, 42px) clamp(24px, 4vw, 38px); text-align: center; }
.ss-popup__body--no-title { padding-top: clamp(34px, 4.5vw, 46px); }

/* Заголовок — сериф, как заголовки карточек (.ss-news-title / .ss-tier__name) */
.ss-popup__title {
  font-family: var(--serif, Georgia, serif);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 33px);
  line-height: 1.14;
  color: var(--green, #26332a);
  margin: 0 0 16px;
}
/* Тонкий акцент под заголовком — в духе акцент-деталей сайта */
.ss-popup__title::after {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--accent, #e0701a);
}

.ss-popup__text {
  font-family: var(--serif, Georgia, serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink2, #525a4b);
}
.ss-popup__text p { margin: 0 0 .85em; }
.ss-popup__text :last-child { margin-bottom: 0; }
.ss-popup__text a {
  color: var(--accent, #e0701a);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ss-popup__cta { margin-top: 26px; }

@media (max-width: 560px) {
  .ss-popup { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-popup,
  .ss-popup__box { transition: none; }
}

/* Не перекрывать fullscreen моб-меню (z-index 100001). */
body.ss-menu-open .ss-popup { display: none !important; }