/* =========================
   HEADER (Lab-Review)
   ========================= */

/* ==== HARD RESET TOP GAP (WP block styles / theme layout) ==== */
:root{
  --wp--style--root--padding-top: 0px !important;
  --wp--style--root--padding-right: 0px !important;
  --wp--style--root--padding-bottom: 0px !important;
  --wp--style--root--padding-left: 0px !important;
}

html, body{ margin:0 !important; padding:0 !important; }
body{ padding-top:0 !important; }
.wp-site-blocks{ padding-top:0 !important; margin-top:0 !important; }
#page, .site, .site-content, .wp-site-blocks > *{ margin-top:0 !important; }
.lr-header{ margin-top:0 !important; }
.lr-header__ticker{ margin-top:0 !important; padding-top:0 !important; position:relative; top:0; }

.lr-header{ position: relative; z-index: 1000; }
.lr-header a{ text-decoration:none; color:inherit; }

/* =========================
   ICONS COLOR (clean, no thickening)
   ========================= */
.lr-iconbtn,
.lr-ms{
  color: var(--lr-primary);
}

.lr-iconbtn svg,
.lr-ms svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* Перебиваем зашитые fill="#000" в SVG */
.lr-iconbtn svg [fill]:not([fill="none"]),
.lr-ms svg [fill]:not([fill="none"]){
  fill: currentColor !important;
}

/* Если иконка stroke-тип — красим stroke, но не добавляем его всем */
.lr-iconbtn svg [stroke],
.lr-ms svg [stroke]{
  stroke: currentColor !important;
}

/* ===== Ticker ===== */
.lr-header__ticker{ background:#525252; color:#fff; overflow:hidden; }
.lr-ticker{ width:100%; }
.lr-ticker__track{
  display:flex;
  width:max-content;
  gap:40px;
  padding:8px 0;
  animation: lrTicker 18s linear infinite;
}
.lr-ticker__item{ white-space:nowrap; opacity:.95; font-size:13px; }
@keyframes lrTicker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ===== Mid row ===== */
.lr-header__mid{ background:#fff; border-bottom:1px solid rgba(0,0,0,.08); }
.lr-header__mid-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:14px 0;
}

/* LEFT */
.lr-hleft{ display:flex; align-items:center; gap:14px; min-width:0; }
.lr-phone{ display:flex; flex-direction:column; gap:2px; line-height:1.1; }
.lr-phone__number{ font-weight:700; font-size:14px; }
.lr-phone__hours{ font-size:12px; opacity:.7; }

/* Messengers */
.lr-mswrap{ display:flex; align-items:center; gap:10px; margin-left:2px; }
.lr-ms{
  width:36px;height:36px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}
.lr-ms svg{ width:18px;height:18px;display:block; }

/* Burger */
.lr-burger{
  width:44px;height:44px;border-radius:12px;border:0;background:transparent;
  display:inline-flex;flex-direction:column;justify-content:center;gap:7px;
  cursor:pointer;
}
.lr-burger span{
  height:2px;width:28px;background:#111;display:block;border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}
.lr-burger.is-active span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.lr-burger.is-active span:nth-child(2){ opacity:0; }
.lr-burger.is-active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* CENTER: logo + sticky categories (one-line) */
.lr-hcenter{ display:flex; justify-content:center; align-items:center; min-width:0; gap:18px; }
.lr-logo{
  font-weight:900;
  letter-spacing:.2px;
  font-size:22px;
  color: var(--lr-primary);
}

/* Категории в mid (только sticky) */
.lr-cats--inmid{ display:none; }

/* RIGHT icons */
.lr-hright{ display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.lr-iconbtn{
  width:40px;height:40px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  position:relative;
}
.lr-iconbtn svg{ width:18px;height:18px;display:block; }

/* cart badge */
.lr-badge{
  position:absolute;top:-6px;right:-6px;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#111;color:#fff;font-size:11px;line-height:1;
}

/* ===== Categories row (обычный режим) ===== */
.lr-header__cats{ background:#fff; border-bottom:1px solid rgba(0,0,0,.08); }
.lr-cats{ display:flex; justify-content:center; gap:38px; overflow-x:auto; }
.lr-cats--row{ padding:16px 0; }
.lr-cats__link{ white-space:nowrap; opacity:.9; }
.lr-cats__link:hover{ opacity:1; }
.lr-cats__empty{ opacity:.6; }

/* ===== Search panel ===== */
.lr-searchpanel{ position:fixed; inset:0; display:none; z-index:1100; }
.lr-searchpanel.is-open{ display:block; }
.lr-searchpanel__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.lr-searchpanel__box{
  position:absolute; top:80px; left:50%; transform:translateX(-50%);
  width:min(720px,92vw);
  background:#fff; border-radius:18px; padding:14px;
}
.lr-searchpanel__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lr-searchpanel__title{ font-weight:800; }
.lr-searchpanel__close{
  width:40px;height:40px;border-radius:12px;border:1px solid rgba(0,0,0,.14);
  background:#fff;cursor:pointer;font-size:20px;
}
.lr-searchpanel__content form{ display:flex; gap:10px; margin-top:10px; }
.lr-searchpanel__content input[type="search"]{
  flex:1;height:44px;border-radius:12px;border:1px solid rgba(0,0,0,.14);
  padding:0 12px;
}
.lr-searchpanel__content button,
.lr-searchpanel__content input[type="submit"]{
  height:44px;border-radius:12px;border:1px solid rgba(0,0,0,.14);
  background:#fff;padding:0 14px;cursor:pointer;
}

/* ===== Sticky behaviour ===== */
.lr-header.is-sticky{
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* тикер скрываем в sticky */
body.lr-sticky .lr-header__ticker{ display:none; }

/* В sticky скрываем 3-й ряд целиком */
body.lr-sticky .lr-header__cats{ display:none; }

/* Mid превращаем в единую строку */
body.lr-sticky .lr-header__mid-inner{
  grid-template-columns: auto 1fr auto;
  padding:10px 0;
  gap:14px;
}



body.lr-sticky .lr-phone,
body.lr-sticky .lr-mswrap{ display:none !important; }

body.lr-menu-open{ overflow:hidden; }

/* =========================
   HEADER RESPONSIVE RULES
   ========================= */

/* <= 750px: убираем телефон + режим работы */
@media (max-width: 750px) {
  .lr-phone { display: none !important; }
}

/* <= 670px: убираем 3-ю строку (навигацию) */
@media (max-width: 670px) {
  .lr-header__cats { display: none !important; }
}

/* <= 450px: убираем WhatsApp/Telegram в ХЕДЕРЕ (в бургер-меню останутся!) */
@media (max-width: 450px) {
  .lr-mswrap { display: none !important; }
}



/* =========================================================
   ICONS — hover (как у тебя уже сделано)
   ========================================================= */

.lr-ms{
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.lr-ms:hover,
.lr-ms:focus-visible{
  background: var(--lr-primary);
  border-color: var(--lr-primary);
  color:#fff !important;
  transform: translateY(-1px);
}
.lr-ms:active{ transform: translateY(0); }
.lr-ms:focus-visible{
  outline: 2px solid rgba(129,129,129,.35);
  outline-offset: 2px;
}

.lr-iconbtn{
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  color: var(--lr-primary) !important;
}
.lr-iconbtn:hover,
.lr-iconbtn:focus-visible{
  background: var(--lr-primary);
  border-color: var(--lr-primary);
  color:#fff !important;
  transform: translateY(-1px);
}
.lr-iconbtn:active{ transform: translateY(0); }
.lr-iconbtn:focus-visible{
  outline: 2px solid rgba(129,129,129,.35);
  outline-offset: 2px;
}

/* FIX: phone weight + color */
.lr-phone__number{
  font-weight: 400 !important;
  color: var(--lr-primary) !important;
  opacity: .92;
}

/* =========================================================
   FULLSCREEN MENU — ЧИСТАЯ ВЕРСИЯ (без дублей)
   - ниже шапки
   - белый фон
   - 2 колонки меню, тонкий серый, без подчёркиваний
   - мессенджеры + рейтинг снизу
   - картинка с кольцами (как у донора)
   ========================================================= */

.lr-menu{
  position:fixed;
  left:0; right:0; bottom:0;
  top: var(--lr-menu-top, 180px); /* большой дефолт, чтобы точно не залезло на шапку */
  display:none;
  z-index: 1500;                 /* выше контента, ниже/рядом с поиском */
}

.lr-menu.is-open{ display:block; }

.lr-menu__backdrop{
  position:absolute;
  inset:0;
  background:#fff; /* сплошной */
}

.lr-menu__panel{
  position:absolute;
  inset:0;
  background:#fff;
  overflow-y:auto; /* если контент не влазит — скроллим меню, а не страницу */
}

.lr-menu__inner{
  height:100%;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 64px;
  align-items:start;
  padding-top: 56px;
  padding-bottom: 56px;
}

/* меню слева */
.lr-menu__nav{
  min-width:0;
}

/* список меню: 2 колонки */
.lr-menu__list{
  list-style:none;
  margin:0;
  padding:0;

  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 18px; /* ЧУТЬ БОЛЬШЕ ОТСТУП (было 8px) */

  font-size: 32px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
  font-weight: 300;
}

.lr-menu__list li{
  position: relative;
}

/* ТОЧКИ МЕЖДУ ПАРНЫМИ ПУНКТАМИ */
.lr-menu__list > li:nth-child(odd):not(:nth-child(7)):not(:nth-child(8))::after {
  content: "·";
  position: absolute;
  right: -28px; /* Позиция точки между колонками */
  top: 50%;
  transform: translateY(-50%);
  color: var(--lr-primary); /* СЕРЫЙ ЦВЕТ ИЗ ТОКЕНОВ */
  font-size: 32px;
  font-weight: 300;
  opacity: 0.5;
  pointer-events: none;
}

/* ДЛИННЫЕ ПУНКТЫ ВО ВСЮ ШИРИНУ */
.lr-menu__list > li:nth-child(7),  /* КОРПОРАТИВНЫМ КЛИЕНТАМ */
.lr-menu__list > li:nth-child(8) { /* ПРОГРАММА ЛОЯЛЬНОСТИ */
  grid-column: 1 / -1;
}

/* Убираем точки после длинных пунктов */
.lr-menu__list > li:nth-child(7)::after,
.lr-menu__list > li:nth-child(8)::after {
  display: none;
}

.lr-menu__list a{
  display:inline-block;
  padding: 6px 0; /* ЧУТЬ БОЛЬШЕ ПАДДИНГА */
  text-decoration:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  color:inherit !important;
  font-weight:300;
  line-height: 1.2;
  transition: opacity 0.2s ease;
}

.lr-menu__list a:hover,
.lr-menu__list a:focus-visible{
  opacity:.75;
  text-decoration:none !important;
}

/* Для мобильной версии */
@media (max-width: 980px){
  .lr-menu__list{
    grid-template-columns: 1fr;
    font-size: 26px;
    row-gap: 12px;
  }
  
  /* На мобильных убираем точки */
  .lr-menu__list > li:nth-child(odd)::after {
    display: none;
  }
  
  .lr-menu__list > li:nth-child(7),
  .lr-menu__list > li:nth-child(8){
    grid-column: auto;
  }
}

/* ========== АДАПТИВ ========== */

/* Планшеты и небольшие десктопы */
@media (max-width: 1200px){
  .lr-menu__list{
    column-gap: 40px;
    font-size: 28px;
  }
  
  .lr-menu__list > li:nth-child(odd):not(:nth-child(7)):not(:nth-child(8))::after {
    right: -20px;
    font-size: 28px;
  }
}

/* Мобильная версия */
@media (max-width: 980px){
  .lr-menu__inner{
    grid-template-columns: 1fr;
    padding-top: 44px;
    gap: 28px;
  }
  
  .lr-menu__side{ 
    display:none; 
  }
  
  .lr-menu__list{
    grid-template-columns: 1fr; /* Одна колонка */
    font-size: 26px;
    row-gap: 12px;
    column-gap: 0;
  }
  
  /* На мобильных все пункты в одну колонку */
  .lr-menu__list > li:nth-child(7),
  .lr-menu__list > li:nth-child(8){
    grid-column: auto;
  }
  
  /* Убираем точки на мобильных */
  .lr-menu__list > li:nth-child(odd)::after {
    display: none;
  }
  
  .lr-menu__list a{
    padding: 8px 0;
  }
}

/* Маленькие телефоны */
@media (max-width: 480px){
  .lr-menu__list{
    font-size: 22px;
    row-gap: 10px;
  }
  
  .lr-menu__list a{
    padding: 6px 0;
  }
}

/* ЗАПРЕТ СКРОЛЛА ПРИ ОТКРЫТОМ МЕНЮ */
body.lr-menu-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Для мобильных устройств */
@media (max-width: 980px) {
  body.lr-menu-open {
    overflow: hidden !important;
    position: fixed;
    -webkit-overflow-scrolling: none; /* Отключает инерционный скролл на iOS */
    touch-action: none; /* Запрещает касания-скролл */
  }
  
  /* Самому меню можно скроллиться, если контент не влазит */
  .lr-menu.is-open .lr-menu__panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Плавный скролл внутри меню на iOS */
  }
}

/* низ: мессенджеры + рейтинг */
.lr-menu__bottom{
  margin-top: 26px;
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

.lr-menu__socials{
  display:flex;
  align-items:center;
  gap:10px;
}

/* гарант: не прячем мессенджеры в бургер-меню */
.lr-menu__socials .lr-ms{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

.lr-menu__rating iframe,
.lr-menu__rating img{
  display:block;
  width:150px;
  height:50px;
  border:0;
}

/* правая колонка */
.lr-menu__side{
  display:flex;
  justify-content:flex-end;
  padding-top: 18px; /* чуть ниже, чтобы не спорило с меню */
}

/* ОБЁРТКА колец (кольца не должны резаться overflow:hidden) */
.lr-menu__imagewrap{
  position:relative;
  width:520px;
  height:520px;
}

/* внешнее кольцо */
.lr-menu__imagewrap::before{
  content:"";
  position:absolute;
  inset:-44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  pointer-events:none;
}

/* внутреннее кольцо */
.lr-menu__imagewrap::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  pointer-events:none;
}

.lr-menu__image{
  width:520px;height:520px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.lr-menu__image img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* адаптив */
@media (max-width: 1200px){
  .lr-menu__inner{
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 46px;
  }
  .lr-menu__imagewrap,
  .lr-menu__image{
    width:440px;height:440px;
  }
}

@media (max-width: 980px){
  .lr-menu__inner{
    grid-template-columns: 1fr;
    padding-top: 44px;
    gap: 28px;
  }
  .lr-menu__side{ display:none; }
  .lr-menu__list{
    grid-template-columns: 1fr;
    font-size: 26px;
    row-gap: 18px;
    column-gap: 0;
  }
  .lr-menu__list > li:nth-child(5),
  .lr-menu__list > li:nth-child(6),
  .lr-menu__list > li:nth-child(10){
    grid-column:auto;
  }
}

/* мелкие мобильные фиксы */
@media (max-width: 670px){
  html, body{
    max-width: 100%;
    overflow-x: clip;
  }
  @supports not (overflow: clip){
    html, body{ overflow-x: hidden; }
  }
}


:root {
  --header-height: 70px; /* Установите реальную высоту шапки на мобильных */
}

@media (max-width: 980px) {
  .lr-menu {
    top: var(--header-height) !important; /* Меню начинается сразу под шапкой */
  }
  
  .lr-menu__panel {
    padding-top: 0; /* Убираем лишний паддинг */
    height: calc(100vh - var(--header-height)); /* Высота меню = высота экрана минус шапка */
  }
  
  .lr-header {
    position: sticky;
    top: 0;
    z-index: 1600;
    background: #fff;
  }
}

/* ИСПРАВЛЕНИЕ ЦВЕТОВ ИКОНОК И ЛОГОТИПА */

/* 1. Логотип - серый */
.lr-logo {
  color: var(--lr-primary) !important; /* Принудительно серый */
}

/* 2. Иконки мессенджеров в хедере - серые */
.lr-mswrap .lr-ms {
  color: var(--lr-primary) !important; /* Серый цвет для иконок */
  border-color: rgba(129, 129, 129, 0.2); /* Серая обводка */
}

/* 3. Иконки мессенджеров в бургер-меню - тоже серые */
.lr-menu__socials .lr-ms {
  color: var(--lr-primary) !important;
  border-color: rgba(129, 129, 129, 0.2);
}

/* 4. Иконки поиска, профиля, корзины - серые */
.lr-iconbtn {
  color: var(--lr-primary) !important;
  border-color: rgba(129, 129, 129, 0.2);
}

/* 5. Бургер-иконка (три полоски) - серая */
.lr-burger span {
  background: var(--lr-primary) !important; /* Серые полоски */
}

/* 6. Телефон - серый */
.lr-phone__number {
  color: var(--lr-primary) !important;
}

/* 7. Ховеры (оставляем правильные) */
.lr-ms:hover,
.lr-iconbtn:hover {
  background: var(--lr-primary) !important;
  border-color: var(--lr-primary) !important;
  color: #ffffff !important; /* Белая иконка при ховере */
}

.lr-ms:hover svg,
.lr-iconbtn:hover svg {
  color: #ffffff !important; /* Белый цвет иконки при ховере */
}

/* 8. Для всех SVG внутри иконок - наследовать цвет */
.lr-ms svg,
.lr-iconbtn svg {
  color: inherit; /* Наследует цвет от родителя */
}

/* 9. Перебиваем возможные fill в SVG */
.lr-ms svg [fill]:not([fill="none"]),
.lr-iconbtn svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

.lr-ms svg [stroke],
.lr-iconbtn svg [stroke] {
  stroke: currentColor !important;
}

@media (min-width: 981px){
  .lr-header{
    position: sticky;
    top: 0;
  }
}

/* =========================
   HEADER — sacrifice cascade
   <=490: hide logo
   <=450: hide messengers
   <=400: hide search
   ========================= */

/* страховка от налезаний */
.lr-header__mid-inner,
.lr-hleft,
.lr-hcenter,
.lr-hright{ min-width: 0; }

@media (max-width: 490px){
  .lr-hcenter{
    display: flex !important;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }

  .lr-logo{
    display: block;
    max-width: 120px;
    text-align: center;
    white-space: normal;
    line-height: 1.05;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: 18px;
  }

  .lr-header__mid-inner{
    grid-template-columns: auto minmax(80px, 120px) auto !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    align-items: center;
  }

  .lr-hleft{
    gap: 10px !important;
    min-width: 0;
  }

  .lr-hright{
    gap: 10px !important;
    justify-content: flex-end !important;
    min-width: 0;
  }
}

/* <= 450px: убираем мессенджеры в хедере */
@media (max-width: 450px){
  .lr-mswrap{ display:none !important; }

  .lr-header__mid-inner{
    gap: 10px !important;
    padding: 10px 0 !important;
  }
}

/* <= 400px: убираем поиск (оставляем профиль + корзина) */
@media (max-width: 400px){
  /* если у кнопки поиска есть класс/ID — добавь сюда тоже */
  .lr-iconbtn[data-action="search"],
  .lr-iconbtn--search{
    display:none !important;
  }

  /* ФОЛБЭК: если у тебя search — первый .lr-iconbtn в правом блоке */
  .lr-hright .lr-iconbtn:first-child{
    display:none !important;
  }
}

@media (min-width: 981px){
  .lr-header{
    position: sticky !important;
    top: 0;
    z-index: 1000;
  }
}


/* логотип всегда виден и ведет на главную */
.lr-hcenter{
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.lr-logo{
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(15px, 2.2vw, 22px);
  line-height: 1;
  color: var(--lr-primary);
}

/* не прячем логотип в sticky */
body.lr-sticky .lr-logo{
  display: block !important;
}

/* sticky: просто уменьшаем */
body.lr-sticky .lr-logo{
  font-size: clamp(14px, 1.6vw, 18px);
}

/* базовая сетка должна позволять центру ужиматься */
.lr-header__mid-inner{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.lr-hleft,
.lr-hcenter,
.lr-hright{
  min-width: 0;
}

/* мобильная адаптация */
@media (max-width: 750px){
  .lr-header__mid-inner{
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  .lr-logo{
    font-size: clamp(14px, 4vw, 18px);
    text-align: center;
  }

  .lr-hleft{
    gap: 10px !important;
  }

  .lr-hright{
    gap: 10px !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 450px){
  .lr-logo{
    font-size: clamp(13px, 4.2vw, 16px);
  }
}

@media (max-width: 400px){
  .lr-logo{
    font-size: clamp(12px, 4.4vw, 15px);
  }
}