D.iK.iJ

Ну давайте попробуем все с нуля собрать на классах:

#menu-amp .menu-item-has-children ul.sub-menu {display: none !important;}
#menu-amp .menu-item-has-children.show > ul.sub-menu {display: block !important;}
#menu-amp .menu-item-has-children {position: relative;background: #fafafa;border-bottom: 1px solid #efefef;}
#menu-amp .menu-item-has-children:after {content: ""; border: 5px solid transparent; border-top: 5px solid #b3b3b3; position: absolute; right: 12px; top: 21px; transition: transform 300ms;}
#menu-amp .menu-item-has-children.show:after {transform: rotate(90deg);}
#menu-amp .menu-item-has-children > a {display: inline-block; width: auto; border-bottom: none;}

И скриптом перебрать все нужные элементы

var elements = document.getElementsByClassName("menu-item-has-children");
var myFunction = function(event) {
event.stopPropagation();
this.classList.toggle("show");
};

for (var i = 0; i < elements.length; i++) {elements[i].addEventListener('click', myFunction, false);}

Не уверен, что все прямо 100% правильно, но через консоль работает.

Он под JQuery. По идее, для работы на сайте должен быть JQuery. Без него... ну только добавлять класс по клику и показывать меню, если класс есть.

document.getElementById('menu-item-2268').addEventListener('click', function() {
  this.classList.toggle('show');
});

и добавить стили

#menu-item-2268.show ul.sub-menu {display: block;} 

Через консоль проверял - работает. Если не будет - добавьте куда-то  ниже меню в коде.

Расстраивает, что автоматом не определяет темную тему... Ну там же всего одна строка. Неужели в Яндексе программисты не осилят сделать все удобно без создания отдельных объявлений?

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

#menu-item-2268 ul.sub-menu {display: none;}

Потом делаем так, чтобы ссылка в пункте родителе не занимала 100% ширины экрана.

#menu-item-2268 > a {display: inline-block; width: auto;}

Ну и скриптом сворачиваем / разворачиваем подпункт меню при клике на область справа.

<script>
$(document).ready(function(){
$("#menu-item-2268").click(function () {

$("#menu-item-2268 ul.sub-menu").slideToggle("fast");

});
});
</script>

Ну и дальше  для этого самого <li  id="menu-item-2268" задаем фон и  border-bottom. Можно добавить галочку " v " чтобы посетители поняли, что это именно меню. Да, код можно написать более универсальный и без ID, но мне лень. ))

Более простой способ - сразу добавить скрипт открытия меню,  пропуская другие пункты. А ссылку раздела сделать некликабельной через

#menu-item-2268 > a {pointer-events: none;}

У всяких складчин обычно есть основной домен с лендингом, на котором же пишут работающее зеркало.

Часто это уже и другая зона. И субдомен, да.

Я бы тогда уж попробовал для  figure поставить  display: inline-block;

А, нет. Ошибся. Он тоже растягивается текстом. Тогда таблицы - самое простое.

Сделал пример как это вижу с 3 блоками для теста: https://dikij.com/test7.php

<script>
$("video").click(function () {
if (this.paused) {
  this.play()
} else {
  this.pause()
}
});
</script>

Я бы оставил на странице только  

<img class="play-button" src="/catalog/play-button.png" alt="">

Можно даже обернуть в ссылку на видео. А уже по клику подменял на 

<video >
       <source src="/catalog/123.mp4" type="video/mp4">
</video>

с автоплеем. Делается через тот же .html() в jquery.  А вот с паузой...

//JS функции для работы с примером:
//запуск воспроизведения видео примера
function playClip(media) {
  media.play();
}

//стоп воспроизведения видео примера
function stopClip(media) {
  media.pause();
}

Отсюда: https://andew.ru/pages/page/html5-audio-video-js-play.php