.desktop header {
  z-index: 100 !important;
}
/* Journal3 renders the page-title decoration line twice (h1::after + span::after).
   The h1 copy is already hidden in the compiled asset CSS; hide the span twin too —
   it leaks through as a stray red 100px dash between the title and the product image */
html:not(.popup) h1.page-title > span::after {
  display: none !important;
}
/* Home product carousel (desktop): the swiper box was shorter than the card
   content, so overflow:hidden cut the bottom (price at the cut edge, rounded
   corners + shadow lost), and the module skin painted cards/slides grey over
   the modern white-card design. Phone has its own fix — desktop gate only. */
html.route-common-home.desktop-header-active .tab-container .swiper-container {
  padding: 8px 0 28px; /* headroom for hover lift + room for the card shadow */
}
html.route-common-home.desktop-header-active .tab-container .swiper-slide,
html.route-common-home.desktop-header-active .tab-container .product-layout .product-thumb {
  min-height: 300px;
}
html.route-common-home.desktop-header-active .tab-container .swiper-slide,
html.route-common-home.desktop-header-active .tab-container .product-layout {
  background: transparent !important; /* grey slide bg peeked behind rounded corners */
}
html.route-common-home.desktop-header-active .tab-container .product-layout .product-thumb {
  background: #fff !important;
}
/* HENDI "4-7 ДЕНА" lead-time badge: always green, on every surface
   (all product card types + the product page image) */
.product-label.hendi-leadtime-label {
  background-color: transparent !important;
}
.product-label.hendi-leadtime-label b {
  background-color: rgba(80, 173, 85, 1) !important;
  color: #ffffff !important;
}
.desktop-header-active .header-compact .header-cart-group {
  position: relative;
  z-index: 3;
}
/* Global back-link: replaces breadcrumbs on all pages */
.page-back-link {
  padding: 4px 0 0;
  margin: 0;
}
.page-back-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
}
.page-back-link a:hover {
  color: #e74c3c;
}
/* Hide the original breadcrumb once replaced */
ul.breadcrumb.back-link-replaced,
ul.breadcrumb.back-link-replaced li,
ul.breadcrumb.back-link-replaced li a,
ul.breadcrumb.back-link-replaced li::before {
  display: none !important;
}
/* Keep product page's own back-link CSS working */
.breadcrumb-mobile-back { display: none; }
.breadcrumb-mobile-back .breadcrumb-mobile-back-link {
  display: block;
  width: 100%;
}
/* Search wrapper fixes: flatten the legacy Journal3 dropdown search and keep the live bar aligned */
.desktop-header-active .header-classic .mid-bar {
  align-items: center;
}
.desktop-header-active .header-classic .mid-bar .desktop-search-wrapper.full-search.default-search-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-basis: 100%;
  order: 3 !important;
  height: auto !important;
  min-height: 40px;
  position: relative;
}
.desktop-header-active .header-classic .full-search #search {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: min(430px, 100%) !important;
  max-width: 100%;
  margin-left: auto;
}
.desktop-search-wrapper #search,
.custom-search-unified {
  width: 100%;
  max-width: 100%;
}
.desktop-search-wrapper #search.dropdown > .search-trigger {
  display: none !important;
}
.desktop-search-wrapper #search.dropdown > .dropdown-menu,
.desktop-search-wrapper #search.dropdown > .dropdown-menu.j-dropdown {
  position: static !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  outline: none !important;
  overflow: visible !important;
}
.desktop-search-wrapper #search .j-dropdown::before,
.desktop-search-wrapper #search .j-dropdown::after,
.desktop-search-wrapper #search .dropdown-menu::before,
.desktop-search-wrapper #search .dropdown-menu::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
}
.desktop-search-wrapper .search-categories .dropdown-menu {
  pointer-events: none !important;
}
.desktop-search-wrapper .search-categories .dropdown-menu:not(.open):not(.show) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.desktop-search-wrapper .header-search {
  position: relative;
  display: flex !important;
  align-items: center;
  width: 100%;
  min-width: 0;
  overflow: visible !important;
  z-index: 99 !important;
}
.desktop-search-wrapper .twitter-typeahead {
  display: block !important;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
}
.desktop-search-wrapper .search-input,
.desktop-search-wrapper .tt-input {
  width: 100% !important;
  min-width: 0 !important;
}
.desktop-search-wrapper .tt-hint {
  display: none !important;
}
.desktop-search-wrapper .header-search .search-button {
  flex: 0 0 40px;
}
/* ── Category mega-bar (#main-menu-2) — even category grid ─────────────────
   Lock every top-level category cell to an equal width so they wrap into even
   rows that line up in columns, instead of letting the last row's cells
   stretch wider (which broke the alignment after 2 categories were removed).
   14 categories ÷ 7 per row = two even rows of 7.
   If you add/remove categories later, change BOTH "7"s below to a number that
   divides the new total into equal rows  (16→8, 12→6, 10→5, 14→7).            */
.desktop-header-active #main-menu-2 > .j-menu {
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
.desktop-header-active #main-menu-2 > .j-menu > li.main-menu-item {
  /* basis a hair under 1/7 guarantees 7 fit per row (shrink:0 blocks an 8th);
     grow + the 1/7 cap then sizes each cell to exactly one-seventh of the row */
  flex: 1 0 14% !important;
  max-width: calc(100% / 7) !important;
}
/* White separators between the gray cells. The vertical lines are 3px so they
   match the thicker horizontal gap that the two wrapped rows leave between them
   (the menu is height:100% / align-content:stretch, which spreads space between
   the rows). The skin sets a cell border-WIDTH but no style/color, so it was
   invisible — we give it one.
   nth-child(7n+1) = first cell of each row (no line on the row's left edge);
   nth-child(n+8)  = the 2nd row (gets a line along its top).
   Keep the "7"s in sync with the per-row count above if you change it.         */
.desktop-header-active #main-menu-2 > .j-menu > li.main-menu-item > a {
  border-left: 3px solid #ffffff !important;
}
.desktop-header-active #main-menu-2 > .j-menu > li.main-menu-item:nth-child(7n+1) > a {
  border-left: 0 !important;
}
.desktop-header-active #main-menu-2 > .j-menu > li.main-menu-item:nth-child(n+8) > a {
  border-top: 1px solid #ffffff !important;
}
/* ── Full-width dropdown: always open below BOTH rows ────────────────────────
   Every .j-dropdown is top:100% of the header, i.e. below the 2nd row. Journal3's
   admin Custom CSS pulls the 1st-row dropdowns up one row (margin-top:-45px, per
   item id — with a typo that skipped item 5). That looked tidy but the panel then
   landed exactly ON the 2nd row and covered it: while a 1st-row category was open
   the 2nd row was invisible and unclickable, so reaching it meant dragging the
   pointer right off the panel and waiting for it to close.
   Neutralise the pull-up for every item so the panel always opens under the whole
   bar and both rows stay visible and hoverable. The JS below then guards the
   pointer's trip DOWN across the other row into an open panel. */
.desktop-header-active #main-menu-2 > .j-menu > li.main-menu-item > .j-dropdown {
  margin-top: 0 !important;
}
/* ── Dropdown category titles: one font, bold on hover ────────────────────────
   Journal3's admin Custom CSS swaps a.catalog-title to 'Akrobat-SemiBold' on
   .module-item:hover — a different typeface than the title's normal font
   ('Ubuntu', set by `body a`), so hovering visibly changed the font ("glitch").
   Pin the title to 'Ubuntu' in EVERY state (the #main-menu-2 id outranks both
   the admin hover rule and `body a`), so the only thing hover changes is the
   weight → bold.                                                                */
.desktop-header-active #main-menu-2 .module-catalog a.catalog-title {
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 400 !important;   /* regular by default … */
}
.desktop-header-active #main-menu-2 .module-item:hover a.catalog-title {
  font-weight: 700 !important;   /* … bold on hover (same font) */
}
/* ── Dropdown redesign (July 2026) ────────────────────────────────────────────
   Was: gray 1px-bordered tiles (6/row via margin math), module-body locked to
   max-height:550px + overflow-y:scroll → the 3rd tile row got chopped in half
   and a permanent scrollbar gutter showed. Now: clean white cards on the gray
   dropdown, gap-based grid, and a viewport-aware height so rows are never cut
   at a fixed pixel line — the rare too-tall dropdown scrolls (thin scrollbar),
   everything else shows in full. Thumb resolution is fixed server-side
   (journal3/catalog.php serves 2x thumbs to the mega menu), CSS here only
   ever scales images DOWN.                                                     */
.desktop-header-active #main-menu-2 .module.module-catalog .module-body {
  padding: 20px 22px !important;
  max-height: calc(100vh - 285px) !important;   /* panel now starts one row (45px) lower */
  overflow-y: auto !important;
  gap: 12px !important;
  scrollbar-width: thin;                    /* Firefox */
  scrollbar-color: #c9c9c9 transparent;
}
.desktop-header-active #main-menu-2 .module.module-catalog .module-body::-webkit-scrollbar {
  width: 8px;
}
.desktop-header-active #main-menu-2 .module.module-catalog .module-body::-webkit-scrollbar-thumb {
  background: #c9c9c9;
  border-radius: 4px;
}
.desktop-header-active #main-menu-2 .module-catalog .module-item:not(.swiper-slide) {
  /* 6 cards per row; 5 gaps x 12px = 60px */
  width: calc((100% - 60px) / 6) !important;
  margin: 0 !important;
  padding: 12px 10px 10px !important;
  border: 0 !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07) !important;
  transition: box-shadow 0.15s ease-out, transform 0.15s ease-out !important;
}
.desktop-header-active #main-menu-2 .module-catalog .module-item:not(.swiper-slide):hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.13) !important;
  transform: translateY(-2px) !important;
}
/* image: fill the card, never upscale past its natural size, stay centered */
.desktop-header-active #main-menu-2 .module-catalog .item-content .catalog-image {
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
}
.desktop-header-active #main-menu-2 .module-catalog .catalog-image img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  align-self: center !important;
}
.desktop-header-active #main-menu-2 .module-catalog a.catalog-title {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f1f1 !important;  /* subtle divider instead of boxed borders */
  color: #333333 !important;
}
.desktop-header-active #main-menu-2 .module-item:hover a.catalog-title {
  color: #de202a !important;                 /* brand red on hover */
}
.mobile-header-active .mobile-1 .mobile-bar-group {
  display: flex !important;
  align-items: stretch !important;
}
.mobile-header-active .mobile-1 .menu-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  /* Match header exactly: drop Journal3's gray overlay box so the trigger
     sits flat on the #f8f8f8 bar, like the bare phone/cart icons. */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.mobile-header-active .mobile-1 .menu-trigger-label {
  /* Icon-only hamburger (matches the approved look) so the language flag can
     sit cleanly beside it without the cramped label colliding. */
  display: none !important;
}
/* Left cluster: hamburger + language flag, anchored to the bar's left edge.
   .menu-trigger keeps working — its click is delegated on document. */
/* Positioning context for the left cluster. No !important so Journal3's sticky
   JS can still set position:fixed on this bar when scrolling. */
.mobile-header-active .mobile-1 .mobile-bar { position: relative; }
.mobile-header-active .mobile-1 .mobile-left-group {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  z-index: 6 !important;
}
.mobile-header-active .mobile-1 .mobile-left-group .menu-trigger {
  position: static !important;   /* flow inside the cluster instead of absolute */
  width: 44px !important;
  height: 100% !important;
  justify-content: center !important;
  background: transparent !important;
}
.mobile-header-active .mobile-1 .mobile-lang-toggle {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}
.mobile-header-active .mobile-1 .mobile-lang-toggle .mobile-lang-toggle-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 0 6px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.mobile-header-active .mobile-1 .mobile-lang-toggle img {
  display: block !important;
  width: 22px !important;
  height: auto !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18) !important;
}
/* Cart as a compact button: [red panel: flipped white cart icon] [white box: count].
   Verified against the live page via headless-Chrome/CDP at a 390px viewport. */
.mobile-header-active .mobile-1 .mobile-bar-group {
  margin-right: 8px !important;        /* Journal3 sets -30px (fine for a tiny icon);
                                          our wider button would overflow off-screen */
}
.mobile-header-active .mobile-cart-wrapper {
  padding: 0 0 0 4px !important;
}
.mobile-header-active .mobile-cart-wrapper #cart {
  display: flex !important;
  align-items: center !important;      /* vertically center the button in the bar */
  height: 100% !important;
  position: relative !important;
}
.mobile-header-active .mobile-cart-wrapper .cart-heading {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  height: 36px !important;
  padding: 0 !important;
  background: #de202a !important;       /* theme red */
  border-radius: 8px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
/* #cart in the selector beats Journal3's `#cart i` (ID) so the icon goes white.
   Red half is a fixed 38px so it matches the count half (equal split). */
.mobile-header-active .mobile-cart-wrapper #cart .cart-heading .fa-shopping-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 34px !important;           /* red half a touch narrower than white */
  width: 34px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 16px !important;           /* smaller so it has room in the half */
  line-height: 1 !important;
  /* flip lives on ::before, so this translate is intuitive — nudge to dead-center
     (icomoon cart is wide & sits high; measured its ink to land it centered) */
  transform: translate(3px, -9px) !important;
}
.mobile-header-active .mobile-cart-wrapper #cart .cart-heading .fa-shopping-cart::before {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  display: block !important;
  line-height: 1 !important;
  transform: scaleX(-1) !important;     /* flip so the cart faces the right way */
}
.mobile-header-active .mobile-cart-wrapper .cart-heading .cart-label {
  display: none !important;             /* hide the "Количка" text */
}
.mobile-header-active .mobile-cart-wrapper .cart-heading #cart-items.count-badge {
  position: static !important;          /* Journal3 floats it as an absolute badge */
  top: auto !important; left: auto !important; right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 30px !important;           /* extended to fill where red was cut; grows for multi-digit */
  width: auto !important;
  height: 100% !important;
  padding: 0 2px !important;
  margin: 0 !important;
  background: #fff !important;
  color: #222 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-radius: 0 8px 8px 0 !important;  /* round own right corners so the outline follows */
  /* bold red outline INSIDE the white half (inset = doesn't grow the box outward),
     same red as the left half */
  box-shadow: inset 0 0 0 1.5px #de202a !important;
  transform: none !important;           /* cancel Journal3's translateX overlay */
}
/* Show the count even at 0, like the reference */
.mobile-header-active .mobile-cart-wrapper .cart-heading #cart-items.count-badge.count-zero {
  display: inline-flex !important;
}
/* ── Desktop header cart: same red pill + white count as the mobile one above ── */
html:not(.mobile-header-active) #cart .cart-heading {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  height: 36px !important;
  padding: 0 !important;
  background: #de202a !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
html:not(.mobile-header-active) #cart .cart-heading .fa-shopping-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 27px !important;
  line-height: 1 !important;
  transform: translate(7px, 9px) !important;  /* center the glyph's ink in the red half */
}
html:not(.mobile-header-active) #cart .cart-heading .fa-shopping-cart::before {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  display: block !important;
  line-height: 1 !important;
  transform: scaleX(-1) !important;   /* flip so the cart faces the right way, like mobile */
}
html:not(.mobile-header-active) #cart .cart-heading .cart-label {
  display: none !important;           /* icon + count only, like the phone pill */
}
html:not(.mobile-header-active) #cart .cart-heading #cart-items.count-badge {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 32px !important;
  width: auto !important;
  height: 100% !important;
  padding: 0 2px !important;
  margin: 0 !important;
  background: #fff !important;
  color: #222 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: inset 0 0 0 1.5px #de202a !important;
  transform: none !important;
}
html:not(.mobile-header-active) #cart .cart-heading #cart-items.count-badge.count-zero {
  display: inline-flex !important;    /* show the count even at 0 */
}
/* Desktop top-right row: Вход + language flags + cart pill on one line
   (the language block is MOVED here from .top-bar by the script below) */
html:not(.mobile-header-active) .classic-cart-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding-top: 14px !important;
  margin-right: -18px !important;   /* pill's right edge flush with the category bar cells */
}
/* Align the header's far-left/far-right edges with the category-bar cells below
   (cells sit 2px inside the 1280 container box; header content had 20-40px insets) */
html:not(.mobile-header-active) .desktop-logo-wrapper #logo {
  margin-left: -39px !important;    /* logo img left edge = first category cell edge */
}
html:not(.mobile-header-active) .main-menu-3 {
  padding-left: 0 !important;
}
html:not(.mobile-header-active) .main-menu-3 > .j-menu > .menu-item:first-child > a {
  padding-left: 2px !important;     /* "За нас" text starts at the cell edge */
}
html:not(.mobile-header-active) .desktop-search-wrapper .dropdown {
  transform: translateX(58px) !important;  /* search bar right edge = last cell edge */
  z-index: 20 !important;
}
/* the translateX creates a new stacking context that dropped the search below the
   full-width menu wrapper, making it unclickable — lift the whole search wrapper.
   The wrapper spans the entire nav row though, so it must be click-transparent
   itself (only the actual search box takes pointer events) or it eats the nav
   links' clicks. */
html:not(.mobile-header-active) .desktop-search-wrapper {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
html:not(.mobile-header-active) .desktop-search-wrapper .dropdown {
  pointer-events: auto !important;
}
/* the pill hugs the top of its 44px dropdown wrapper — drop it 4px so its
   center lines up with Вход and the flag */
html:not(.mobile-header-active) .desktop-cart-wrapper {
  transform: translateY(4px) !important;
}
html:not(.mobile-header-active) .classic-cart-wrapper .top-menu.secondary-menu a {
  font-size: 17px !important;
}
html:not(.mobile-header-active) .classic-cart-wrapper .top-menu.secondary-menu a::before,
html:not(.mobile-header-active) .classic-cart-wrapper .top-menu.secondary-menu i {
  font-size: 19px !important;
}
/* Language = two-flag switcher (active language full-color + red underline,
   the other dimmed and clickable) — the stock Journal3 language widget in the
   top bar is hidden, the switcher form is injected by the script below */
html:not(.mobile-header-active) .top-bar .language-currency {
  display: none !important;
}
html:not(.mobile-header-active) .classic-cart-wrapper .desktop-lang-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}
html:not(.mobile-header-active) .classic-cart-wrapper .desktop-lang-toggle .desktop-lang-flag {
  background: none !important;
  border: 0 !important;
  padding: 2px !important;
  display: flex !important;
  align-items: center !important;
  line-height: 0 !important;
}
html:not(.mobile-header-active) .classic-cart-wrapper .desktop-lang-toggle img {
  width: 26px !important;
  height: auto !important;
  display: block !important;
  border-radius: 2px !important;
}
html:not(.mobile-header-active) .classic-cart-wrapper .desktop-lang-toggle .is-active {
  border-bottom: 2px solid #de202a !important;
  padding-bottom: 3px !important;
}
html:not(.mobile-header-active) .classic-cart-wrapper .desktop-lang-toggle .is-inactive {
  cursor: pointer !important;
  opacity: .38;
  filter: grayscale(60%);
  transition: opacity .15s, filter .15s;
  padding-bottom: 5px !important;
}
html:not(.mobile-header-active) .classic-cart-wrapper .desktop-lang-toggle .is-inactive:hover {
  opacity: 1;
  filter: none;
}
/* Home full-bleed sections rendered on a FIXED 2390px design stage scaled by a
   constant 0.53389 (→ 1276px, the container width). Static CSS px throughout:
   identical composition at any browser zoom, and the hero's space (234px) is
   reserved from first paint so late Master Slider init can't shift the page.
   The fitHomeSections script re-applies the same values (kept for the
   content-dependent margin-bottom of rows 4/5). */
@media (min-width: 1300px) {
  html:not(.mobile-header-active) .grid-row-top-1 {
    height: 311px !important;
    overflow: hidden !important;
  }
  /* hero: 1800px stage (taller 43% crop — verified all 4 slides stay clean) */
  html:not(.mobile-header-active) .grid-row-top-1 .module-master_slider {
    width: 1800px !important;
    max-width: none !important;
    margin-left: calc(50% - 900px) !important;
    margin-right: 0 !important;
    transform: scale(0.70889);
    transform-origin: top center;
    margin-bottom: -128px;   /* 439px design height → 311px visual */
  }
  /* top-5 (Проектиране/Сервиз) left the design stage 2026-07-13 — it's normal
     white cards now (styled in home.twig), so it renders at natural size */
  html:not(.mobile-header-active) .grid-row-top-4 {
    width: 2390px !important;
    max-width: none !important;
    margin-left: calc(50% - 1195px) !important;
    margin-right: 0 !important;
    transform: scale(0.53389);
    transform-origin: top center;
  }
}
.mobile-header-active .mobile-1 .mobile-bar-group .mobile-phone-wrapper,
.mobile-header-active .mobile-1 .mobile-bar-group .mobile-cart-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 4px !important;
}
.mobile-header-active .mobile-1 .mobile-phone-wrapper .mobile-phone-link {
  display: flex !important;
  align-items: center !important;
}
.mobile-header-active .mobile-1 .mobile-phone-wrapper .fa-phone {
  color: #e74c3c !important;
  font-size: 32px !important;            /* match the cart button so it's proportionate */
  line-height: 1 !important;
  transform: translate(-2px, 2px) !important;  /* nudge phone left + down */
}
/* nudge the phone a bit left of the cart (gap between them) */
.mobile-header-active .mobile-1 .mobile-bar-group .mobile-phone-wrapper {
  margin-right: 7px !important;
  padding: 0 !important;
}
/* HOME hero, phone + tablet: the skin pulls the hero column up/down by -160px
   (.grid-col-top-1-1) — a crop trick for the old square (800x800) slider. The
   3:2 fullwidth slider shows the whole image, so no crop: start below the
   header like normal content. Desktop keeps the margins (part of its own
   fixed-stage crop math). */
html.mobile-header-active .grid-row-top-1 .grid-col-top-1-1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Master Slider pins its wrapper to the pre-init stacked-content height (~439px)
   while the actual 3:2 view is width*2/3 — the difference showed as dead space
   under the hero. All slides share the 600x400 stage, so content height is
   constant and auto is always right. Desktop keeps its fixed-stage math. */
html.mobile-header-active .grid-row-top-1 .master-slider {
  height: auto !important;
}
/* Tighten the space between the hero and the carousel tabs: the layout gives
   the carousel column a 30px top margin (sized for the old tall hero). */
html.mobile-header-active .grid-row-top-2 .grid-col-top-2-1 {
  margin-top: 8px !important;
}
/* HOME page only, phone only: the Swiper product carousel gives each slide a
   fixed height (~208px) from the card's height:100% circular dependency, and
   .product-thumb{overflow:hidden} clips the red price at the bottom. Force a
   min-height floor on the whole product-grid chain so the price shows. Scoped
   to home + mobile + the tabbed product carousel so nothing else is affected. */
html.route-common-home.mobile-header-active .tab-container .swiper-container,
html.route-common-home.mobile-header-active .tab-container .product-grid,
html.route-common-home.mobile-header-active .tab-container .product-grid .swiper-slide,
html.route-common-home.mobile-header-active .tab-container .product-grid .product-thumb {
  /* 222 = tallest card content (promo: image 116 + 2-line name + stacked
     old/new price = 208) + caption padding/border — 250 left dead space */
  min-height: 222px !important;
}
/* PRODUCT page only, phone only: same Swiper card clipping in the
   "КЛИЕНТИТЕ СЪЩО КУПИХА" (also-bought) row (.grid-row-bottom-1) — the red price
   is cut off. Same min-height fix, scoped to that section so nothing else changes.
   (these cards are wider/taller than the home carousel, so a slightly larger floor) */
html.route-product-product.mobile-header-active .grid-row-bottom-1 .swiper-container,
html.route-product-product.mobile-header-active .grid-row-bottom-1 .product-grid,
html.route-product-product.mobile-header-active .grid-row-bottom-1 .product-grid .swiper-slide,
html.route-product-product.mobile-header-active .grid-row-bottom-1 .product-grid .product-thumb {
  min-height: 255px !important;
}
/* scroll-to-top button removed site-wide (markup deleted from footer.twig,
   2026-07-13) — this hide stays as a belt-and-suspenders for cached pages */
.scroll-top {
  display: none !important;
}
/* floating side "bonus buttons" (Начало / 360° / Каталог / Новини) — the
   Journal3 Links Menu module 302, fixed to the screen edge on every page.
   Not wanted (2026-07-13) — hidden here because the module itself can only
   be unassigned from the (broken) Journal3 admin. */
.links-menu-302 {
  display: none !important;
}
@media (max-width: 767px) {
  .touchevents.popup-open,
  .touchevents.popup-open body { overflow: auto !important; }
  .popup-wrapper { align-items: flex-end !important; }
  .popup-wrapper .popup-bg {
    display: block !important; position: fixed; inset: 0;
    background: rgba(0,0,0,0.25) !important; z-index: -1;
  }
  .popup-wrapper .popup-container {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    pointer-events: auto;
  }
  .popup-wrapper .popup-body { padding: 16px 16px 12px !important; }
  .popup-wrapper .popup-inner-body { display: flex; flex-direction: column; gap: 10px; }
  .popup-wrapper .popup-header { display: none !important; }
  .popup-wrapper .popup-content {
    font-size: 12px !important; line-height: 1.4 !important; color: #555 !important;
    max-height: 3em !important; overflow: hidden !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    margin: 0 !important; padding: 0 !important;
  }
  .popup-wrapper .popup-content * { font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; padding: 0 !important; }
  .popup-wrapper .popup-footer { margin: 0 !important; padding: 0 !important; }
  .popup-wrapper .popup-buttons { display: flex; gap: 8px; }
  .popup-wrapper .popup-buttons .btn-popup-1 {
    flex: 1; display: block !important; padding: 14px 20px !important;
    font-size: 16px !important; font-weight: 700 !important; text-align: center !important;
    border-radius: 10px !important; min-height: 48px !important;
  }
  .popup-wrapper .popup-buttons .btn-popup-2 { display: none !important; }
  .popup-wrapper .popup-dont-show { font-size: 11px !important; text-align: center; }
  .popup-wrapper .popup-close {
    display: flex !important;
    align-items: center; justify-content: center;
    position: absolute !important; top: 8px; right: 8px; z-index: 10;
    width: 32px; height: 32px; padding: 0 !important;
    border: none !important; border-radius: 50%;
    background: rgba(255,255,255,0.9) !important; color: #333 !important;
    font-size: 0; line-height: 1; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  }
  .popup-wrapper .popup-close::before {
    content: "\00d7"; font-size: 22px; color: #333;
  }
  .popup-wrapper .popup-container { position: relative; }
  /* Mobile always-on search bar — own row below nav icons, part of sticky header */
  .mobile-header-active .mobile-1 .mobile-header-sticky,
  .mobile-header-active .mobile-1 .mobile-header-sticky.mobile-bar-sticky,
  .mobile-header-active .mobile-1 {
    height: auto !important;
  }
  .mobile-header-active .mobile-1 .mobile-header-sticky.mobile-bar-sticky {
    z-index: 1002 !important;
  }
  .mobile-header-active .mobile-1 .mobile-search-bar {
    height: 52px !important;
    max-height: 52px !important;
    min-height: 52px !important;
    padding: 4px 12px 8px !important;
    background: var(--mobile-header-bg, #f8f8f8) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .mobile-header-active .mobile-1 .mobile-search-bar .mobile-search-wrapper {
    height: 40px !important;
    max-height: 40px !important;
    overflow: visible !important;
  }
  /* Flatten the dropdown — always visible, no trigger icon */
  .mobile-header-active .mobile-search-bar #search {
    width: 100% !important;
    height: 40px !important;
    position: relative !important;
  }
  .mobile-header-active .mobile-search-bar #search.dropdown > .search-trigger {
    display: none !important;
  }
  .mobile-header-active .mobile-search-bar #search.dropdown > .dropdown-menu {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .mobile-header-active .mobile-search-bar #search.dropdown > .dropdown-menu::before {
    display: none !important;
  }
  .mobile-header-active .mobile-search-bar .header-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 40px !important;
    /* Match header exactly: same off-white as the bar, defined only by a
       subtle border instead of a contrasting fill. */
    background: #f8f8f8 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .mobile-header-active .mobile-search-bar .search-categories {
    display: none !important;
  }
  .mobile-header-active .mobile-search-bar .twitter-typeahead {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 40px !important;
    min-width: 0 !important;
    position: relative !important;
  }
  .mobile-header-active .mobile-search-bar .search-input,
  .mobile-header-active .mobile-search-bar .tt-input {
    width: 100% !important;
    height: 40px !important;
    font-size: 15px !important;
    line-height: 40px !important;
    padding: 0 40px 0 12px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
    position: relative !important;
  }
  .mobile-header-active .mobile-search-bar .search-input::placeholder,
  .mobile-header-active .mobile-search-bar .tt-input::placeholder {
    color: #888 !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }
  .mobile-header-active .mobile-search-bar .tt-hint {
    display: none !important;
  }
  .mobile-header-active .mobile-search-bar .header-search .search-button {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }
  .mobile-header-active .mobile-search-bar .header-search .search-button::before {
    content: "\f002" !important;
    font-family: "icomoon" !important;
    font-size: 18px !important;
    color: #e74c3c !important;
    line-height: 1 !important;
  }
  .mobile-header-active .mobile-search-bar .header-search .search-button::after {
    content: none !important;
    display: none !important;
  }
  /* Typeahead results — full-width below the bar */
  .mobile-header-active .mobile-search-bar .tt-menu {
    position: absolute !important;
    top: 100% !important;
    left: -12px !important;
    width: 100vw !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    z-index: 1060 !important;
    border-radius: 0 0 12px 12px !important;
    margin-top: 0 !important;
  }
  .mobile-header-active .mobile-search-bar .tt-menu:empty,
  .mobile-header-active .mobile-search-bar .tt-menu:not(.tt-open) {
    display: none !important;
  }
  .mobile-header-active .mobile-search-bar .tt-dataset {
    display: block !important;
    width: 100% !important;
  }
  .mobile-header-active .site-wrapper > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
    margin-bottom: 0 !important;
  }
  .breadcrumb li + li::before { padding: 0 3px !important; }
  .product-filter { padding: 4px 0 !important; margin: 0 !important; }
  .product-filter .filter-row { margin: 0 !important; padding: 0 !important; }
  #content { padding-top: 0 !important; }
  .main-products { margin-top: 0 !important; padding-top: 0 !important; }
}