.mobile-main-menu-container {
  width: 100% !important;
  transition: transform .35s ease-in-out !important;
}
.mobile-main-menu-container-open .site-wrapper::before {
  display: none !important;
}
.mobile-main-menu-container-open header {
  position: relative;
  z-index: 50001 !important;
}
.mobile-main-menu-wrapper .j-menu > li > a {
  font-size: 130% !important;
  padding: 12px 10px !important;
}
/* ── Mobile menu drill-down (subcategory panels) ─────────────────────────
   Arrows on every row; rows with subcategories open a panel in the same
   sidebar format (built by JS below from the hidden .collapse markup). */
.mobile-main-menu-wrapper .j-menu > li.menu-item > a {
  position: relative;
  padding-right: 42px !important;
}
/* hide Journal3's stock accordion "+" toggle — replaced by our arrow */
.mobile-main-menu-wrapper .open-menu { display: none !important; }
.mobile-main-menu-wrapper .mm-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #9a9a9a;
  border-right: 2px solid #9a9a9a;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
/* Промоции — first item, red */
.mobile-main-menu-wrapper li.mobile-promo-item > a {
  color: #de202a !important;
  font-weight: 700 !important;
  border: 2px solid #de202a !important;
  background: #fff5f5 !important;
}
.mobile-main-menu-wrapper li.mobile-promo-item > a .mm-arrow { border-color: #de202a; }
/* Panel rows inherit the root list's exact look: the skin styles the visible
   menu through its #main-menu-2 id (font-size 14px links-text, 9px 8px padding,
   grey bars, hover), so the JS moves that id onto whichever panel is open.
   Only the text wrap is relaxed — root names never need to wrap, long
   subcategory names do. */
.mobile-main-menu-wrapper .mm-panel .links-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding-right: 28px; /* keep wrapped text clear of the chevron */
}
/* Subcategory panel header bar: back on the left, "Виж всички" on the right */
.mobile-main-menu-wrapper .mm-subhead {
  display: flex !important;
  align-items: stretch;
  background: #fff !important;
  border-bottom: 2px solid #eee;
}
.mobile-main-menu-wrapper .mm-subhead > a {
  background: #fff !important;
  border-bottom: 2px solid #eee !important;
}
.mobile-main-menu-wrapper .mm-subhead .mm-back {
  flex: 1 1 auto;
  width: auto !important;      /* skin gives .j-menu > li > a width:100% — undo */
  min-width: 0;
  font-weight: 700;
  font-size: 14px !important;  /* same size as the rows, not the 130% menu scale */
  justify-content: flex-start !important;
  text-align: left !important;
  color: #333 !important;      /* the id-scoped :hover rule flips color to white */
  padding-right: 10px !important;
  position: static !important;
}
/* category name: one line, underlined — a heading, not a category row */
.mobile-main-menu-wrapper .mm-subhead .mm-back .mm-back-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mobile-main-menu-wrapper .mm-subhead .mm-viewall {
  flex: 0 0 auto;
  width: auto !important;
  color: #1a73e8 !important;
  text-decoration: underline !important;
  font-weight: 400;
  font-size: 14px !important;
  display: flex;
  align-items: center;
}
.mobile-main-menu-wrapper .mm-subhead .mm-arrow-left {
  position: static;
  display: inline-block;
  transform: rotate(-135deg);
  margin-right: 12px;
  margin-left: 2px;
  vertical-align: middle;
}
.search-bar-sticky {
  position: fixed !important;
  left: 0;
  width: 100%;
  /* Opaque fill so nothing scrolling underneath can tint the search row grey. */
  z-index: 1003 !important;
  background: #f8f8f8 !important;
}
/* Logo bar pinned on scroll (same position:fixed mechanism as the search,
   because position:sticky on <header> is unreliable here). */
.mobile-bar-fixed {
  position: fixed !important;
  left: 0;
  width: 100%;
  z-index: 1004 !important;
}
/* Neutralize Journal3's own (incomplete) mobile-sticky leftovers that fight
   the JS above: it never actually fixes the bar, but on scroll it still
   (a) adds body padding-top = bar height — double-counts with our placeholder
       and pushes the page content down (phantom gap), and
   (b) drops a big drop-shadow on the bar that bleeds onto the search row. */
.mobile-header-active body { padding-top: 0 !important; }
.mobile-header-active .mobile-bar-sticky { box-shadow: none !important; }