/* ===== Desktop: open by click only (ps_mainmenu Classic) ===== */
@media (min-width: 768px) {

  /* 1) ЖЁСТКО запрещаем открытие по hover (это правило есть в theme.css) */
  #_desktop_top_menu .top-menu[data-depth="0"] li:hover .sub-menu,
  #_desktop_top_menu .top-menu[data-depth="0"] li:hover .js-sub-menu,
  #_desktop_top_menu .top-menu[data-depth="0"] li:hover .popover.sub-menu {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 2) По умолчанию подменю скрыто */
  #_desktop_top_menu .top-menu[data-depth="0"] .sub-menu,
  #_desktop_top_menu .top-menu[data-depth="0"] .js-sub-menu,
  #_desktop_top_menu .top-menu[data-depth="0"] .popover.sub-menu {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 3) Открываем только когда JS повесил класс is-open на LI */
  #_desktop_top_menu .top-menu[data-depth="0"] > li.is-open .sub-menu,
  #_desktop_top_menu .top-menu[data-depth="0"] > li.is-open .js-sub-menu,
  #_desktop_top_menu .top-menu[data-depth="0"] > li.is-open .popover.sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* Cardcom iframe - responsive */
.cardcom-iframe-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* чтобы не вылезало наружу */
}

/* Сам iframe: занимает высоту экрана (минус шапки/отступы) */
#cardcom_iframe {
  width: 100%;
  display: block;
  border: 0;
  height: 80vh;          /* базово */
  min-height: 650px;     /* чтобы на десктопе не было карликом */
}

/* Мобильный: делаем выше, чтобы поместилась форма и кнопка */
@media (max-width: 768px) {
  #cardcom_iframe {
    height: 92vh;        /* почти весь экран */
    min-height: 700px;   /* у тебя раньше было 700px — оставим как минимум */
  }

  /* убираем лишние отступы темы вокруг контента, чтобы iframe не "резался" */
  .cardcom-pay {
    margin: 0;
    padding: 0;
  }
}