/* ===== Base: scroll lock ===== */
html.mod-scroll-locked{
  overflow:hidden;
  padding-right:var(--mod-scrollbar-w,0px);
}

/* ===== Tunables ===== */
:root{
  --mods-ease: cubic-bezier(.2,.8,.2,1);
  --mods-menu-dur: 220ms;
  --mods-submenu-dur: 180ms;
  --mods-header-h: 80px;       /* JS will update */
  --mods-header-dur: 380ms;    /* <-- ВОТ ЭТО меняешь для скорости хедера */

  /* NEW: цвет/прозрачность подложки под пункты меню (как у чипов) */
  --mods-menubar-rgb: 30,46,40;  /* <-- RGB как у виджет-чилпов */
  --mods-menubar-a: .50;         /* <-- дефолт (подгони под чипы) */
  --mods-menubar-a-hover: .95;   /* <-- hover/focus */
}

/* ===== FIXED HEADER ===== */
.uc-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;

  will-change: transform;
  transition: transform var(--mods-header-dur) var(--mods-ease);
}

/* чтобы контент не прятался под фиксированным хедером */
#allrecords{
  padding-top: var(--mods-header-h, 80px) !important;
}

/* ===== Burger overlay (no display:none) ===== */
.t-rec.uc-menu{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:
    opacity var(--mods-menu-dur) var(--mods-ease),
    visibility 0s linear var(--mods-menu-dur);
  will-change: opacity;

  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}
.t-rec.uc-menu.is-open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition:
    opacity var(--mods-menu-dur) var(--mods-ease),
    visibility 0s linear 0s;
}

/* ===== Submenu overlay container covers whole screen below header ===== */
html.mod-submenu-overlay .t-rec.uc-submenu{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--mods-header-h, 80px) !important;
  bottom: 0 !important;
  z-index: 9998 !important;
  background: transparent !important;
}

/* hide submenu wrapper by default */
.t-rec.uc-submenu{
  visibility: hidden !important;
  pointer-events: none !important;
}
.t-rec.uc-submenu.is-open{
  visibility: visible !important;
  pointer-events: auto !important;
}

/* animate only inner panel */
.t-rec.uc-submenu .submenu-panel{
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--mods-submenu-dur) var(--mods-ease),
    transform var(--mods-submenu-dur) var(--mods-ease);
  will-change: opacity, transform;
}
.t-rec.uc-submenu.is-open .submenu-panel{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Active states placeholders ===== */
.page.is-active{}
.page .page-elem.is-active{}
a.is-active{}

/* ===== Header hide/show target ===== */
.header-shell{
  will-change: transform;
  transition: transform var(--mods-header-dur) var(--mods-ease);
}
.header-shell.is-hidden{
  transform: translateY(-110%);
  pointer-events: none;
}

/* fallback: если JS прячет .uc-header */
.uc-header.is-hidden{
  transform: translateY(-110%);
  pointer-events: none;
}

/* ===== Transparent header hard-override for Tilda ZeroBlock layers ===== */
.uc-header,
.uc-header .t396__artboard,
.uc-header .t396__filter,
.uc-header .t396__carrier{
  background: transparent !important;
  background-color: transparent !important;
}
.uc-header .t396__carrier{
  background-image: none !important;
}

/* ===== MENU BAR BG (THE SHAPE BEHIND "О нас / Каталог / ...") =====
   1) На шейп подложки в ZeroBlock повесь CSS class: menu-bar-bg
   2) ВАЖНО: красим только .tn-atom (у него правильная геометрия/скругления),
      чтобы не появлялся “стремный прямоугольник”.
*/
.menu-bar-bg{
  background: transparent !important;
  opacity: 1 !important;
}
.menu-bar-bg .tn-atom{
  opacity: 1 !important;
  background-color: rgba(var(--mods-menubar-rgb), var(--mods-menubar-a)) !important;
  transition: background-color var(--mods-header-dur) var(--mods-ease) !important;

  /* страховка от квадратных артефактов */
  border-radius: 9999px !important;
  overflow: hidden !important;
}

/* Hover / focus */
.menu-bar-bg:hover .tn-atom,
.uc-header:hover .menu-bar-bg .tn-atom,
.header-shell:hover .menu-bar-bg .tn-atom,
.uc-header:focus-within .menu-bar-bg .tn-atom{
  background-color: rgba(var(--mods-menubar-rgb), var(--mods-menubar-a-hover)) !important;
}

/* ===== Reduced motion =====
   Важно: НЕ отключаю анимацию хедера, иначе снова будет “мгновенно”.
*/
@media (prefers-reduced-motion: reduce){
  .t-rec.uc-menu,
  .t-rec.uc-submenu .submenu-panel{
    transition:none !important;
    transform:none !important;
  }
}
/* ===== Burger menu: allow scroll when content is taller than viewport ===== */
.t-rec.uc-menu{
  overflow-y: hidden !important; /* по умолчанию не скроллим (когда закрыто) */
}

.t-rec.uc-menu.is-open{
  overflow-y: auto !important;                 /* скролл внутри меню */
  -webkit-overflow-scrolling: touch;           /* плавный скролл на iOS */
  overscroll-behavior: contain;                /* чтобы не “проталкивало” страницу */
  padding-bottom: 24px;                        /* чтобы нижние пункты не прилипали */
}