/* SarafanPRO — главная по макету Figma.
   Все правила ограничены `body .fg`, чтобы стили не протекали на остальной сайт
   и чтобы тема сайта не переопределяла вёрстку макета. */

:root{
  --blue:#0066B2;
  --blue-dark:#00538f;
  --navy:#2E437B;
  --navy-deep:#0B2F7A;
  --muted:#5B6D9C;
  --text:#5B6D9C;
  --line:#DDDDDD;
  --soft:#F1F5FA;
  --teal:#0066B2;
  --wrap:1180px;
}
body .fg, body .fg *{box-sizing:border-box}
body .fg, body .fg{margin:0;padding:0}
body .fg{
  font-family:Rubik,system-ui,-apple-system,Arial,sans-serif;
  color:var(--text); background:#fff; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body .fg img{max-width:100%;display:block}
body .fg a{text-decoration:none;color:inherit}
body .fg ul{list-style:none;margin:0;padding:0}
body .fg button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
body .fg .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
body .fg .sec-title{font-size:38px;font-weight:400;color:var(--blue);margin:0 0 26px}
body .fg .sec-title--c{text-align:center}
/* Sticky lives on the header element. The inner .hdr is only as tall as
   itself, so sticking that box does nothing: the whole bar scrolls away. */
body .fg.site-header{position:sticky;top:0;z-index:200;background:#fff}
body .fg .hdr{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:1}
body .fg .hdr__in{
  max-width:1440px;margin:0 auto;padding:12px 32px;
  display:flex;align-items:center;gap:20px;
}
body .fg .hdr__logo img{height:48px;width:196px}
body .fg .hdr__nav{display:flex;align-items:center;gap:20px;margin-left:12px}
body .fg .hdr__nav a{color:var(--blue);font-size:16px;padding:6px 0;white-space:nowrap}
body .fg .hdr__nav a:hover{color:var(--blue)}
/* Desktop wide: контейнер шапки центрирован (1440 в 1920 = 240 margin с каждой
   стороны), фигма ожидает x=240 без дополнительного внутреннего паддинга. */
@media (min-width:1441px){
  body .fg .hdr__in{padding-left:0;padding-right:0}
}
body .fg .hdr__nav a.has-sub::after{
  content:"";display:inline-block;margin-left:7px;vertical-align:2px;
  width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg)
}
body .fg .hdr__right{display:flex;align-items:center;gap:12px;margin-left:auto}
body .fg .hdr__icon{color:var(--blue);display:flex;padding:6px}
body .fg .hdr__icon:hover{color:var(--blue)}
body .fg .hdr__lang{display:flex;align-items:center;gap:6px;color:var(--blue)}
body .fg .hdr__lang .flag{
  width:20px;height:14px;border-radius:2px;display:block;
  background:linear-gradient(#fff 0 33%, #0039A6 33% 66%, #D52B1E 66% 100%);
  border:1px solid #dfe6f1;
}
body .fg .btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:10px 20px;border-radius:8px;font-size:16px;line-height:1;
}
body .fg .btn--ghost{border:1px solid var(--blue);color:var(--blue);background:#fff}
body .fg .btn--ghost:hover{background:var(--blue);color:#fff}
body .fg .btn--primary{background:linear-gradient(90deg,var(--navy),var(--blue));color:#fff}
body .fg .btn--primary:hover{background:var(--blue)}

/* Шапка desktop (node 746:32976 / Figma WEB): пара CTA одинаковой высоты —
   compact «Войти▾» + «Присоединиться», solid #0066B2 + soft shadow.
   Было: primary 245×56/fs20 vs ghost 120×30 — вертикальный рассинхрон y=14 vs y=27.
   Скоуп .hdr__right, чтобы не задеть .btn--primary на карточках/формах. */
body .fg .hdr__right .btn--primary{background:#0066B2;border:0}
@media (min-width:861px){
  body .fg .hdr__right{align-items:center;gap:12px}
  body .fg .hdr__right .btn--primary,
  body .fg .hdr__right .btn--ghost{
    height:40px;
    box-sizing:border-box;
    border-radius:8px;
    font-size:16px;
    font-weight:400;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  body .fg .hdr__right .btn--primary{
    background:#0066B2;
    color:#fff;
    border:0;
    padding:0 20px;
    width:auto;
    min-width:160px;
    box-shadow:0 4px 14px rgba(0,102,178,.25);
  }
  body .fg .hdr__right .btn--ghost{
    background:#fff;
    color:var(--blue);
    border:1px solid var(--blue);
    padding:0 16px;
    width:auto;
    min-width:0;
  }
  /* Figma «Войти» — dropdown chevron (как у .has-sub) */
  body .fg .hdr__right .btn--ghost::after{
    content:"";
    display:inline-block;
    width:6px;height:6px;
    margin-left:4px;
    border-right:1.6px solid currentColor;
    border-bottom:1.6px solid currentColor;
    transform:rotate(45deg);
    flex:0 0 auto;
    position:relative;
    top:-1px;
  }
}
/* Убраны фикс. 245/120px — Figma WEB compact pair, width:auto.
   min-width:160px только у primary (см. выше). */

/* Hover/active для кнопок хедера (Войти / Присоединиться).
   Primary: solid darken only (без градиента 180°). */
body .fg .hdr__right .btn--ghost:hover{
  background:var(--blue);color:#fff;border-color:var(--blue);
}
body .fg .hdr__right .btn--ghost:active{
  background:#00507F;color:#fff;border-color:#00507F;
}
body .fg .hdr__right .btn--primary:hover{
  background:#00538F;
  box-shadow:0 4px 14px rgba(0,102,178,.32);
}
body .fg .hdr__right .btn--primary:active{
  background:#003B5F;
  box-shadow:0 2px 8px rgba(0,102,178,.2);
}

body .fg .hero{background:#fff;padding-top:8px}
body .fg .hero__in{position:relative}
body .fg .hero__img{width:100%;height:auto}
body .fg .hero__text{position:absolute;top:12px;right:20px;width:468px;max-width:44%}
body .fg .hero__title{font-size:64px;line-height:1.185;font-weight:400;color:var(--blue);margin:0 0 8px}
body .fg .hero__sub{font-size:25px;line-height:1.185;color:var(--muted);margin:0;max-width:430px}
body .fg .partners{background:#F1F3F5;padding:14px 0}
body .fg .partners .wrap{max-width:none;padding:0 20px}
body .fg .partners img{width:100%;display:block}
body .fg .partners__list{display:flex;align-items:center;justify-content:center;gap:40px;margin:0;padding:8px 0;list-style:none;flex-wrap:nowrap}
body .fg .partners__item{flex:0 0 auto;margin:0;padding:0}
body .fg .partners__link{display:block;line-height:0}
body .fg .partners__item img,
body .fg .partners__link img{width:auto;height:10px;max-width:40px;object-fit:contain;display:block}
/* overflow:visible — autocomplete .sp-suggest and filter row extend past the
   find block bottom; overflow:hidden clipped them under popular chips (696:19776).
   Clip only the illustration if needed. */
body .fg .find{padding:44px 0 10px;position:relative;overflow:visible;scroll-margin-top:100px}
body .fg .find__in{display:flex;align-items:flex-start;gap:20px;position:relative}
/* Figma Search body / Title column = 980px; base was 900 and ill 330 squeezed bar to ~790 @1440. */
body .fg .find__main{flex:1 1 auto;min-width:0;max-width:980px}
/* Узел `Title and seurch` (729:29080): заголовок «Я хочу найти» лежит в колонке
   980px, как и сама панель поиска. Было 1010 — заголовок выступал за панель на 30px. */
body .fg .find__title{font-size:38px;font-weight:400;color:var(--blue);margin:0 0 59px;max-width:980px}
body .fg .find__ill{width:330px;flex:0 0 330px;align-self:flex-start;margin-top:0;overflow:hidden;border-radius:0}
body .fg .srch{
  display:flex;align-items:center;gap:0;
  /* Узел `Search body` (729:29080): 980x84, radius 6,
     заливка ГРАДИЕНТ #FFFFFF → #F1F3F5, обводка #FFFFFF 1px.
     Было: плоский белый фон и серая рамка #DDDDDD — рамки такого цвета в узле нет. */
  border:1px solid #FFFFFF;border-radius:6px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F3F5 100%);
  box-shadow:0 5px 20px rgba(193,200,218,.4);
  padding:13px 12px;max-width:980px;
  /* stacking context so .sp-suggest (z≥100) and filterbox sit above .find__pop */
  position:relative;z-index:5;
}
body .fg .srch__field{flex:1 1 auto;min-width:0;padding-right:4px;position:relative;z-index:2}
body .fg .srch__input{
  width:100%;height:38px;border:0;border-bottom:1px solid var(--blue);outline:none;
  font-size:20px;color:var(--blue);background:transparent;padding:0 26px 4px 4px;border-radius:0;
}
body .fg .srch__input::placeholder{color:#96A1BD;font-size:20px}
/* type="search" в Chrome/Safari рисует свой нативный крестик очистки —
   он дублировался с нашим кастомным (виден был как «✕ ×» в макете
   должен быть только один). Прячем нативный, оставляем только .srch__clear. */
body .fg .srch__input::-webkit-search-cancel-button,
body .fg .srch__input::-webkit-search-decoration,
body .fg .ai-panel__input::-webkit-search-cancel-button,
body .fg .ai-panel__input::-webkit-search-decoration{
  -webkit-appearance:none;appearance:none;display:none;
}
/* Крестик очистки поля — в макете виден на состоянии с заполненным полем
   («Косметолог в Ришоне», узел 696:19945). Хит-зона 44x44 для тапа,
   визуально мельче — центр по высоте инпута. Живёт только пока есть текст. */
body .fg .srch__clear{
  display:none;position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;align-items:center;justify-content:center;
  color:var(--muted);font-size:20px;line-height:1;border:0;background:none;cursor:pointer;
}
body .fg .srch__field.has-value .srch__clear{display:flex}
body .fg .srch__clear:hover{color:var(--blue)}
body .fg .srch__btn{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* Узел `Button web` внутри `Input and button`: 142x56, radius 6,
     заливка ГРАДИЕНТ #2E437B → #0066B2, обводка #FFFFFF 1.3, текст 20/400.
     Было: плоская заливка #0066B2 без обводки. */
  width:142px;height:56px;border-radius:6px;font-size:20px;
  background:linear-gradient(180deg,#2E437B 0%,#0066B2 100%);
  border:1.3px solid #FFFFFF;color:#fff;
}
body .fg .srch__btn:hover{background:linear-gradient(180deg,#24365F 0%,#00538F 100%)}
body .fg .srch__filter{
  flex:0 0 auto;width:40px;height:56px;margin-left:8px;
  display:flex;align-items:center;justify-content:center;color:var(--blue);
  /* Узел `Button search filter web`: 40x56, radius 4, заливка ГРАДИЕНТ #FFFFFF → …, обводка #FFFFFF 1 */
  border-radius:4px;border:1px solid #FFFFFF;
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F3F5 100%);
}
body .fg .srch__ai{
  max-width:980px;display:flex;flex-direction:column;align-items:flex-end;
  gap:6px;margin-top:24px;
}
body .fg .ai{
  display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--blue);
  /* Узел `Button AI search web` (696:21180): ≈91×26, radius 9999, заливка #FFFFFF,
     обводка тела #FF6C1D 1px, подпись 14/500 #0066B2. */
  border:1px solid #FF6C1D;
  border-radius:9999px;min-width:91px;padding:0 14px;height:26px;font-size:14px;line-height:1;font-weight:500;
  position:relative;box-sizing:border-box;white-space:nowrap;
}
/* Визуально пилюля 26px высотой (по узлу), но тап-таргет должен быть ≥44px.
   Расширяем хит-зону невидимым ::before, не трогая размер самой пилюли. */
body .fg .ai::before{content:"";position:absolute;inset:-9px}
/* AI-панель (узел 693:19669): 980px, radius 6, заливка #FFFFFF, padding 16,
   gap 16 по вертикали. Скрыта, пока пилюля «AI поиск» не включена — .is-on
   ставит JS по aria-pressed. Свой инпут уходит тем же GET /search/. */
body .fg .ai-panel{
  display:none;flex-direction:column;gap:16px;
  width:100%;max-width:980px;background:#fff;border-radius:6px;padding:16px;
  margin-top:16px;box-shadow:0 5px 20px rgba(193,200,218,.4);
}
body .fg .ai-panel.is-on{display:flex}
body .fg .ai-panel__head{display:flex;flex-direction:column;gap:8px}
body .fg .ai-panel__title{font-size:28px;font-weight:400;color:#FF6C1D;margin:0}
body .fg .ai-panel__desc{font-size:18px;font-weight:400;color:var(--muted);margin:0;line-height:1.4}
body .fg .ai-panel__form{display:flex;align-items:center;gap:16px}
body .fg .ai-panel__field{flex:1 1 auto;min-width:0}
body .fg .ai-panel__input{
  width:100%;height:38px;border:0;border-bottom:1px solid var(--blue);outline:none;
  font-size:20px;color:var(--blue);background:transparent;padding:0 4px 4px;border-radius:2px;
}
body .fg .ai-panel__input::placeholder{color:#96A1BD;font-size:20px}
body .fg .ai-panel__btn{
  /* Mirror .srch__btn: inline-flex + magnifying-glass (Figma AI panel «Найти») */
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:142px;height:56px;border-radius:6px;font-size:20px;
  background:linear-gradient(180deg,#2E437B 0%,#0066B2 100%);
  border:1.3px solid #FFFFFF;color:#fff;
}
body .fg .ai-panel__btn::before{
  content:"";display:inline-block;width:18px;height:18px;flex:0 0 18px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M16.5 16.5L21 21' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
body .fg .ai-panel__btn:hover{background:linear-gradient(180deg,#24365F 0%,#00538F 100%)}
@media (max-width:600px){
  body .fg .ai-panel__form{flex-wrap:wrap}
  body .fg .ai-panel__field{flex:1 1 100%}
  body .fg .ai-panel__btn{flex:1 1 auto;justify-content:center}
  body .fg .ai-panel__title{font-size:22px}
  body .fg .ai-panel__desc{font-size:15px}
}
body .fg .find__pop{margin-top:32px;max-width:980px}
body .fg .find__poplabel{color:var(--blue);font-size:18px;margin-bottom:12px}
body .fg .chips{display:flex;flex-wrap:wrap;gap:10px 16px}
body .fg .chips a{
  display:inline-flex;align-items:center;height:34px;padding:0 16px;border:0;border-radius:6px;
  color:var(--muted);font-size:16px;background:#fff;
  box-shadow:0 5px 20px rgba(193,200,218,.4);
}
body .fg .chips a:hover{color:var(--blue);box-shadow:0 5px 20px rgba(0,102,178,.35)}
/* Блок поиска (find/-я хочу найти): на широком 1920 поле ввода по Figma
   шире (546->754px), контейнер этого блока расширяется точечно, не трогая
   общий --wrap:1180px остальных секций. Блок размещён ПОСЛЕ базовых правил
   .find/.srch, чтобы выигрывать каскад при равной специфичности (иначе
   более поздние body .fg .srch{max-width:980px} и .srch__ai{max-width:980px}
   всегда перебивают медиа-запрос независимо от порядка объявления медиа). */
@media (min-width:1441px){
  body .fg .find .wrap{max-width:1452px}
  /* Все элементы колонки поиска в макете имеют ОДНУ ширину 980:
     `Title and seurch` 980x384, `Search body` 980x84, `Популярные запросы` 980x117,
     AI-панель 979x187. Здесь часть из них была расширена до 1010, а `.srch`
     оставлен на 980 — из-за этого панель AI и список запросов выступали
     за правый край поля поиска на 30px. Сводим к 980. */
  body .fg .find__main{max-width:980px}
  body .fg .srch{max-width:980px}
  body .fg .find__pop{max-width:980px}
  body .fg .srch__ai{max-width:980px}
  body .fg .ai-panel{max-width:980px}
}
body .fg .trust{
  margin-top:40px;padding:64px 0 72px;color:#fff;
  background:linear-gradient(180deg,rgba(4,26,66,.94),rgba(8,40,96,.94)), url('/_html/images/figma2/trustbg.jpg') center/cover no-repeat;
}
body .fg .trust__title{font-size:38px;font-weight:400;text-align:center;margin:0 0 22px}
body .fg .trust__lead{
  max-width:800px;margin:0 auto 54px;text-align:center;
  font-size:18px;line-height:1.7;color:rgba(255,255,255,.88);
}
body .fg .trust__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px}
body .fg .trust__col{text-align:center}
body .fg .trust__ic{
  width:112px;height:112px;margin:0 auto 26px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;
}
body .fg .trust__col h3{font-size:24px;font-weight:400;margin:0 0 14px}
body .fg .trust__col p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.85);margin:0;text-align:left}
body .fg .nums{padding:70px 0 40px;background:#fff}
body .fg .nums__grid{display:grid;gap:40px 26px;text-align:center}
body .fg .nums__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
body .fg .nums__grid--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:830px;margin:44px auto 0}
body .fg .num__v{font-size:64px;font-weight:300;color:var(--blue);line-height:1.05}
body .fg .num__t{font-size:20px;color:var(--blue);margin:8px 0 10px;line-height:1.3}
body .fg .num__d{font-size:16px;color:var(--muted);line-height:1.5}
body .fg .promo{padding:26px 0 60px}
body .fg .promo__in{
  background:linear-gradient(90deg,var(--navy-deep),#123C94);
  border-radius:14px;padding:22px 30px;text-align:center;
}
body .fg .promo__in span{color:#fff;font-size:32px;font-weight:700}
body .fg .cat{padding:0 0 60px}
body .fg .cat__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
body .fg .ct{
  display:flex;align-items:center;gap:18px;
  background:#F5F6F8;border:0;border-radius:6px;overflow:hidden;
  min-height:150px;transition:box-shadow .15s ease,transform .15s ease;
}
body .fg .ct:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,42,95,.12)}
body .fg .ct img{width:180px;height:150px;object-fit:cover;flex:0 0 180px}
body .fg .ct span{color:var(--blue);font-size:20px;line-height:1.3;padding-right:16px}
body .fg .cat__wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
/* Business-wide cards (Figma 748:38622 «Card Catalog 1 Business» 380×150):
   full-bleed photo + title ON the image (not a grey card with label above).
   Title strip ~40px top, Rubik 20/#0066B2, centered.
   Важно: additional_102024.css задаёт `img{height:auto !important}` глобально —
   без !important и absolute-fill картинка схлопывается по intrinsic-высоте
   (~108px при 366px ширины) или в 0 до lazy-load, и title визуально
   оказывается «снаружи» фото (белый фон карточки + текст над дырой). */
body .fg .cw{
  position:relative;display:block;
  height:150px;border-radius:10px;overflow:hidden;
  background:none;padding:0;
  box-shadow:0 5px 20px rgba(193,200,218,.45);
  transition:box-shadow .15s ease,transform .15s ease;
}
body .fg .cw:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,42,95,.12)}
body .fg .cw img{
  position:absolute;inset:0;
  width:100% !important;height:100% !important;max-height:none !important;
  object-fit:cover;display:block;border-radius:10px;
}
/* Figma: soft white glow / «засветление» at TOP of card (title sits in it) */
body .fg .cw::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:58%;
  z-index:1;
  pointer-events:none;
  border-radius:10px 10px 0 0;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.72) 28%,
    rgba(255,255,255,.28) 62%,
    rgba(255,255,255,0) 100%
  );
}
body .fg .cw span{
  position:absolute;left:0;right:0;top:0;z-index:2;
  box-sizing:border-box;height:48px;padding:12px 14px 0;
  display:flex;align-items:flex-start;justify-content:center;
  color:#0066B2;font-size:20px;font-weight:400;line-height:24px;
  text-align:center;pointer-events:none;
  text-shadow:none;
}
body .fg .meet{padding:44px 0 60px;background:#F1F3F5}
body .fg .meet__tabs{display:flex;justify-content:center;gap:0;margin:0 0 34px}
body .fg .meet__tab{
  width:350px;max-width:50%;padding:8px 10px 12px;background:none;border:0;
  color:var(--blue);font-size:20px;position:relative;
}
body .fg .meet__tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(0,102,178,.3)}
body .fg .meet__tab.is-active::after{background:var(--blue);height:3px}
body .fg .meet__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
body .fg .pc{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px 20px;
}
body .fg .pc__top{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:24px}
body .fg .pc__badge{background:var(--teal);color:#fff;font-size:11px;font-weight:500;border-radius:999px;padding:5px 10px}
body .fg .pc__fav{color:var(--muted);font-size:14px}
body .fg .pc__ph{
  width:186px;height:186px;margin:12px auto 14px;padding:6px;border-radius:50%;
  background:linear-gradient(140deg,#7FB3FF,#C3B7FF 50%,#F3A7DD);
}
body .fg .pc__ph--plain{background:none;padding:0;width:174px;height:174px}
body .fg .pc__ph img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:5px solid #fff}
body .fg .pc__ph--plain img{border:0}
body .fg .pc__name{color:var(--blue);font-size:25px;font-weight:400;margin:0 0 8px}
body .fg .pc__job{color:var(--muted);font-size:16px;line-height:1.4;margin:0 0 12px}
body .fg .pc__geo{
  width:100%;padding:9px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--blue);font-size:16px;
}
body .fg .pc__meta{display:flex;justify-content:space-between;width:100%;padding:10px 4px 12px;color:var(--muted);font-size:16px}
body .fg .pc__txt{
  color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 16px;text-align:left;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
body .fg .pc__btn{
  margin-top:auto;width:100%;padding:11px 14px;border-radius:8px;
  background:var(--blue);color:#fff;font-size:16px;
}
body .fg .pc__btn:hover{background:var(--blue-dark)}
body .fg .pc__btn--ghost{background:#fff;border:1px solid var(--blue);color:var(--blue)}
body .fg .pc__btn--ghost:hover{background:var(--blue);color:#fff}
/* Guide base — full 1:1 tokens live in gw1-tail.css (Figma 729:30141) */
body .fg .guide{padding:0 0 60px}
body .fg .guide__box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:600px;min-height:600px;border-radius:6px;
  background:linear-gradient(180deg,#000f37 0%,#0066b2 100%);
  background-size:cover;background-position:center;
  text-align:center;padding:40px 24px;position:relative;overflow:hidden;
  box-sizing:border-box;
}
body .fg .guide__box::before{content:none;display:none}
body .fg .guide__t{position:relative;z-index:1;color:#fff;font-size:38px;line-height:45px;margin-bottom:8px}
body .fg .guide__s{position:relative;z-index:1;color:#fff;font-size:25px;line-height:30px}
body .fg .guide__play{
  position:relative;z-index:1;margin-top:28px;
  width:90px;height:90px;border-radius:50%;background:#fff;color:#000f37;
  display:flex;align-items:center;justify-content:center;
}
body .fg .guide__box:hover .guide__play{background:#fff}
body .fg .blog{padding:0 0 70px}
body .fg .blog__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
/* Карточка статьи на главной (Figma «Блог»):
   - рамка 1px + radius 14 на всей карточке;
   - фото полностью в рамочке (одинаковый crop), не «вылезает» и не
     разъезжается по intrinsic aspect ratio — additional_102024.css
     задаёт `img{height:auto !important}`, поэтому height/width картинки
     только через !important + absolute-fill в .bc__media;
   - line-иконки календаря/часов (не emoji). */
/* Figma blog Card (729:32786): 380×630, r=6, pad=16 all sides, gap=16,
   Image 348×348 r=6. Full-bleed media made only the 1st PNG look “framed”
   (white margins baked into asset) while 2–3 went edge-to-edge. */
body .fg .bc{
  display:flex;flex-direction:column;gap:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px;
  box-sizing:border-box;
  overflow:hidden;min-width:0;
  box-shadow:0 5px 20px rgba(193,200,218,.35);
}
body .fg .bc__media{
  position:relative;display:block;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:6px;
  overflow:hidden;
  background:var(--soft);
  flex:0 0 auto;
}
body .fg .bc__img{
  position:absolute;inset:0;
  width:100% !important;height:100% !important;max-height:none !important;
  object-fit:cover;object-position:center;display:block;
  border-radius:6px;
}
body .fg .bc__body{
  display:flex;flex-direction:column;flex:1 1 auto;
  /* card already has pad 16 — no extra side pad that unequalizes media vs text */
  padding:0;min-width:0;
}
body .fg .bc__row{display:flex;align-items:center;gap:10px;padding-top:14px;min-width:0}
body .fg .bc__ln{flex:1 1 auto;height:1px;background:var(--line);display:block;min-width:8px}
body .fg .bc__row--sm{padding-top:8px;color:var(--muted);font-size:14px;line-height:1.4}
body .fg .bc__cat{
  border:1px solid var(--line);color:var(--blue);border-radius:6px;
  padding:3px 12px;font-size:14px;line-height:1.4;white-space:nowrap;flex:0 0 auto;
}
body .fg .bc__date,
body .fg .bc__read{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);font-size:14px;line-height:1.4;white-space:nowrap;flex:0 0 auto;
}
body .fg .bc__read-label{color:var(--muted);font-size:14px;white-space:nowrap;flex:0 0 auto}
body .fg .bc__ico{flex:0 0 auto;display:block;color:var(--muted)}
body .fg .bc__title{
  color:var(--blue);font-size:20px;font-weight:400;margin:14px 0 8px;line-height:1.3;
  font-family:Rubik,system-ui,-apple-system,Arial,sans-serif;
}
body .fg .bc__title a{color:var(--blue)}
body .fg .bc__title a:hover{text-decoration:underline}
body .fg .bc__txt{
  color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-family:Rubik,system-ui,-apple-system,Arial,sans-serif;
}
body .fg .bc__more{
  margin:auto 0 0 auto;align-self:flex-end;
  padding:7px 20px;border-radius:6px;border:1px solid var(--blue);
  color:var(--blue);font-size:16px;background:#fff;line-height:1.3;
  font-family:Rubik,system-ui,-apple-system,Arial,sans-serif;
}
body .fg .bc__more:hover{background:var(--blue);color:#fff}
body .fg .ftr{background:linear-gradient(180deg,#000E37 0%,#0065B1 100%);color:#fff}
/* Figma WEB footer: brand ~260, mid specialists wider, platform ~220.
   Padding tighter than legacy 56/44 so total height tracks ~592 scaled. */
body .fg .ftr__in{display:grid;grid-template-columns:260px minmax(0,1fr) 220px;gap:20px 24px;padding-top:48px;padding-bottom:36px}
/* Beat global additional_102024 `img{height:auto!important}` + gw1-tail mb:14.
   Figma mark ~40px tall; natural SVG is ~55×230 without the override. */
body .fg .ftr__logo,
body .fg img.ftr__logo{
  height:40px!important;
  width:auto!important;
  max-height:40px!important;
  margin-bottom:22px!important;
}
body .fg .ftr__slogan{font-size:25px;line-height:1.25;margin-bottom:14px}
body .fg .ftr__desc{font-size:16px;color:rgba(255,255,255,.8);line-height:1.5;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #80AFD4}
body .fg .ftr__phone{display:inline-flex;align-items:center;gap:9px;font-size:20px;color:#fff;margin-bottom:20px}
body .fg .ftr__soc{display:flex;gap:14px}
body .fg .ftr__soc a{width:34px;height:34px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center;color:#0066B2}
body .fg .ftr__soc a:hover{background:#0066B2;color:#fff}
body .fg .ftr__title{display:block;font-size:24px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid #80AFD4}
body .fg .ftr__col--spec .ftr__title{max-width:100%}
body .fg .ftr__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
/* Figma Spec: itemSpacing 8 + pad 6 → roomier than old mb:10/lh1.3 */
body .fg .ftr__two a, body .fg .ftr__list a{color:#fff;font-size:16px;line-height:22px;display:inline-block;padding:6px 0}
body .fg .ftr__two li, body .fg .ftr__list li{margin-bottom:8px}
body .fg .ftr__two a:hover, body .fg .ftr__list a:hover{color:#fff}
/* Platform big links (Услуги/Блог/Афиша/Акции) — Figma air after list */
body .fg .ftr__big{margin-top:32px}
body .fg .ftr__big li{margin-bottom:16px}
body .fg .ftr__big a{font-size:24px;color:#fff}
/* Hide phantom platform/catalog items on the <li> so no empty row height
   (gw1-tail still hides <a>; :has is more robust). */
body .fg .ftr__list li:has(a[href="/contacts/"]),
body .fg .ftr__list li:has(a[href="/add/"]),
body .fg .ftr__list li.ftr__extra-hide,
body .fg .ftr__two li:has(a[href="/specialists/"]),
body .fg .ftr__two li:has(a[href="/map/"]){display:none}
body .fg .ftr__bottom{border-top:1px solid rgba(255,255,255,.18)}
/* Figma bottom bar: copyright left, legal links space-between, single line.
   Equal 4-col grid forced wrap of «© 2026, SarafanPRO. Все права защищены.» */
body .fg .ftr__bottom-in{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-top:18px;
  padding-bottom:18px;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.75);
}
body .fg .ftr__bottom-in > *{min-width:0;flex:0 1 auto}
body .fg .ftr__bottom-in > span{white-space:nowrap;flex:0 1 auto}
body .fg .ftr__bottom-in a{color:rgba(255,255,255,.75);white-space:nowrap}
body .fg .ftr__bottom-in a:hover{color:#fff}
body .fg .ftr__bottom-in a:last-child{text-align:right}
@media (max-width:1100px){
body .fg .hero__title{font-size:44px}
body .fg .hero__sub{font-size:18px}
body .fg .find__ill{display:none}
body .fg .trust__cols{gap:34px}
body .fg .cat__wide, body .fg .meet__grid, body .fg .blog__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body .fg .nums__grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
body .fg .ftr__in{grid-template-columns:1fr 1fr}
body .fg .ftr__brand{grid-column:1/-1}

}
@media (max-width:860px){
body .fg .hdr__nav{display:none}
body .fg .hero__text{position:static;width:auto;max-width:none;text-align:center;padding:16px 0 6px}
body .fg .hero__title{font-size:30px}
body .fg .hero__sub{font-size:16px}
body .fg .partners{overflow-x:auto}
body .fg .partners img{min-width:700px}
body .fg .partners__list img,
body .fg .partners__item img{min-width:0}
body .fg .find__title, body .fg .sec-title, body .fg .trust__title{font-size:24px}
body .fg .srch{flex-wrap:wrap}
body .fg .srch__input{flex:1 1 100%;font-size:16px}
body .fg .srch__btn{flex:1 1 auto;justify-content:center;font-size:16px}
body .fg .find__row{flex-direction:column;align-items:flex-start}
body .fg .trust__cols, body .fg .nums__grid--4, body .fg .nums__grid--3, body .fg .cat__grid, body .fg .cat__wide, body .fg .meet__grid, body .fg .blog__grid{grid-template-columns:minmax(0,1fr)}
body .fg .num__v{font-size:44px}
body .fg .promo__in span{font-size:20px}
body .fg .meet__tabs{flex-direction:column}
body .fg .guide__t{font-size:24px}
body .fg .guide__s{font-size:16px}
body .fg .ftr__in{grid-template-columns:1fr}
body .fg .ftr__two{grid-template-columns:1fr}
body .fg .ftr__bottom-in{flex-direction:column;align-items:flex-start;gap:10px}
body .fg .ftr__bottom-in > span{white-space:normal}

}
body .fg .hdr__burger{display:none;flex-direction:column;gap:4px;padding:8px 4px}
body .fg .hdr__burger span{display:block;width:22px;height:2px;background:var(--blue);border-radius:2px}
body .fg .hdr__mobnav{display:none;flex-direction:column;border-top:1px solid var(--line);background:#fff}
body .fg .hdr__mobnav a{padding:13px 20px;color:var(--blue);border-bottom:1px solid var(--line);font-size:16px}
body .fg .hdr__mobnav a.mob-join{background:linear-gradient(90deg,var(--navy),var(--blue));color:#fff;text-align:center;border:0}
body .fg .hdr.is-open .hdr__mobnav{display:flex}
@media (max-width:860px){
body .fg .hdr__in{gap:10px;padding:10px 14px;flex-wrap:nowrap}
body .fg .hdr__burger{display:flex;order:-1}
body .fg .hdr__logo{flex:0 0 auto}
body .fg .hdr__logo img{height:30px}
body .fg .hdr__right{gap:8px;flex:0 0 auto}
body .fg .hdr__right .btn--primary{display:none}
body .fg .btn--ghost{padding:8px 12px;font-size:14px}
body .fg .hdr__lang{display:none}

}
@media (max-width:400px){
body .fg .hdr__icon{display:none}

}

/* ---------- Шапка сайта на разметке макета ----------
   Подменю в главном меню: в макете пункты «Каталог» и «Платформа» со стрелкой,
   раскрываются по наведению. На тач-устройствах меню открывается бургером. */
body .fg-header{background:#fff;border:0;box-shadow:none;padding:0}
body .fg .hdr__item{position:relative;display:inline-flex;align-items:center}
body .fg .hdr__sub{
  display:none;position:absolute;top:100%;left:-14px;min-width:250px;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 14px 34px rgba(16,42,95,.14);padding:8px 0;z-index:60;
}
body .fg .hdr__item:hover .hdr__sub{display:flex;flex-direction:column}
body .fg .hdr__sub--acc{left:auto;right:0;min-width:200px}
body .fg .hdr__sub a{padding:9px 18px;font-size:15px;color:var(--blue);white-space:nowrap}
body .fg .hdr__sub a:hover{background:var(--soft);color:var(--blue)}
body .fg .hdr__logo .hidden_img_alt{position:absolute;left:-9999px}
body .fg .hdr__right .btn{text-decoration:none}
/* Figma 1050:91421 / 783:36428: join glyph is filled user+plus 24×24 (node 555:8855),
   not a 16px stroke person with the plus overlapping the shoulder. */
body .fg .hdr__right .btn--primary svg,
body .fg .hdr__right .hdr__join-ico{
  width:24px;height:24px;flex:0 0 24px;margin:0;display:block;overflow:visible;
}
/* Поисковый оверлей темы открывается по :target — иконка в шапке его переключает. */
body .fg .hdr__icon{align-items:center;justify-content:center}

/* Логотип: тема сайта задаёт свои размеры картинкам в шапке, поэтому здесь
   размер фиксируется жёстко — иначе SVG растягивается до 260×89.
   Desktop Figma 1440 density: 196×48 (было 225×55 — CTAs жались к краю). */
body .fg-header .hdr__logo img{height:48px !important;width:196px !important;max-width:none !important;min-width:0 !important}
@media (max-width:860px){body .fg-header .hdr__logo img{height:30px !important;width:123px !important}}
/* Карта остаётся плавающей (её нет в шапке макета). Иконка доступности
   переехала в .hdr__right — её больше не позиционируем отдельно. */
body .header_link_map{top:80px !important}
@media (max-width:600px){
  body .header_link_map{
    position:fixed !important;
    top:auto !important;
    bottom:16px !important;
    right:auto !important;
    left:16px !important;
  }
}

/* ==========================================================================
   Дополнения 2026-07-28: выпадашки шапки, язык, фильтр поиска, AI-режим.
   Все селекторы под `body .fg`, чтобы не задевать легаси-тему.
   ========================================================================== */

/* Выпадашки открываются по ховеру (десктоп) и по классу is-open (тач/клик). */
body .fg .hdr__item.is-open .hdr__sub{display:flex;flex-direction:column}
body .fg .hdr__item > .has-sub::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .15s ease}
body .fg .hdr__item:hover > .has-sub::after,
body .fg .hdr__item.is-open > .has-sub::after{transform:rotate(-135deg) translateY(-2px)}
body .fg .hdr__sub a{transition:background .12s ease,color .12s ease}
body .fg .hdr__sub a:hover{background:var(--soft);color:var(--blue)}
/* Каталог: левый верх панели = левый низ кнопки, gap 16px (макет / Андрей). */
body .fg .hdr__nav > .hdr__item:has(.hdr__sub--catalog){position:relative}
/* Каталог в шапке: мегаменю 3 колонки + аккордеон + широкие карточки (макет). */
body .fg .hdr__sub--catalog{
  min-width:auto;left:0;right:auto;
  transform:none;
  top:calc(100% + 16px);
  width:min(1180px,calc(100vw - 32px));
  padding:20px 24px 16px;
  display:none;
  flex-direction:column;
  gap:16px;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(16,42,95,.12);
}
body .fg .hdr__item:hover .hdr__sub--catalog,
body .fg .hdr__item.is-open .hdr__sub--catalog{
  display:flex;
}
body .fg .hdr__sub--catalog::before{
  content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
}
body .fg .hdr__catgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px 24px;
}
body .fg .hdr__catitem{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:0;min-width:0;
  width:100%;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 4px;
}
body .fg .hdr__cat-chev{
  flex:0 0 22px;width:22px;height:40px;margin:0;padding:0;border:0;background:transparent;
  cursor:pointer;position:relative;color:var(--blue);
}
/* Leaf catalog item (no children): keep name aligned with items that have a chevron. */
body .fg .hdr__catitem:not(:has(.hdr__cat-chev)){
  padding-left:22px;
}
body .fg .hdr__cat-chev::before{
  content:"";position:absolute;left:6px;top:16px;width:7px;height:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);
}
body .fg .hdr__catitem.is-open .hdr__cat-chev::before{transform:rotate(-135deg);top:18px}
body .fg .hdr__cat{
  display:inline-flex;align-items:center;gap:10px;
  flex:1 1 0;min-width:0;
  padding:6px 8px;border-radius:8px;white-space:normal;
  color:var(--blue);font-size:15px;line-height:1.25;
}
body .fg .hdr__sub--catalog a{white-space:normal}
body .fg .hdr__cat:hover{background:var(--soft);color:var(--blue);text-decoration:none}
body .fg .hdr__catitem.is-open{background:#F4F8FC;border-radius:12px;padding:4px 4px 8px}
body .fg .hdr__cat-ico{flex:0 0 auto;display:inline-flex}
body .fg .hdr__cat-ico img{width:40px;height:40px;border-radius:6px;object-fit:cover;display:block}
body .fg .hdr__cat-name{flex:1 1 auto;min-width:0}
body .fg .hdr__catkids{display:none;flex:1 0 100%;padding:4px 8px 4px 32px;flex-direction:column}
body .fg .hdr__catitem.is-open .hdr__catkids{display:flex}
body .fg .hdr__catkids a{padding:6px 8px;font-size:14px;color:var(--blue);white-space:normal;border-radius:6px}
body .fg .hdr__catwide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body .fg .hdr__wide{
  display:flex;align-items:center;gap:10px;padding:0;border-radius:8px;
  color:var(--blue);font-size:15px;line-height:1.25;text-decoration:none;
}
body .fg .hdr__wide img{width:148px;height:56px;object-fit:cover;border-radius:8px;flex:0 0 auto}
body .fg .hdr__wide span{min-width:0}
body .fg .hdr__wide:hover{background:transparent;color:var(--blue)}
@media (max-width:980px){
  body .fg .hdr__catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .fg .hdr__catwide{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Переключатель языка */
body .fg .hdr__langwrap{margin:0 4px}
body .fg .hdr__lang{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:6px 8px;border-radius:6px;color:var(--blue)}
body .fg .hdr__lang:hover{background:var(--soft)}
body .fg .hdr__sub--lang{min-width:190px;left:auto;right:-8px}
body .fg .hdr__sub--lang .lang-opt{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:15px;color:var(--blue)}
body .fg .hdr__sub--lang .lang-opt.is-active{color:var(--blue);font-weight:500;background:var(--soft)}
body .fg .hdr__sub--lang .lang-opt.is-off{color:#96A1BD;cursor:not-allowed}
body .fg .hdr__sub--lang .lang-opt em{margin-left:auto;font-style:normal;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;color:#96A1BD;border:1px solid var(--line);border-radius:20px;padding:1px 7px}
body .fg .hdr__sub--lang .flag{width:20px;height:14px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(180deg,#fff 33%,#0039A6 33% 66%,#D52B1E 66%)}
body .fg .hdr__sub--lang .flag--il{background:linear-gradient(180deg,#fff 20%,#0038B8 20% 32%,#fff 32% 68%,#0038B8 68% 80%,#fff 80%)}
body .fg .hdr__sub--lang .flag--en{background:linear-gradient(135deg,#012169 40%,#fff 40% 60%,#C8102E 60%)}

/* Фильтр в блоке «Я хочу найти» — Figma 696:19776: chip row under bar
   (не 290px popover справа). wrap static → box позиционируется от .srch. */
body .fg .srch__filterwrap{position:static;display:flex}
body .fg .srch__filterbox{
  display:none;position:absolute;top:calc(100% + 12px);left:0;right:auto;
  width:100%;max-width:980px;box-sizing:border-box;
  /* chip strip: transparent shell, no heavy popover chrome */
  background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:0;z-index:50;text-align:left;
  flex-wrap:wrap;align-items:center;gap:12px;
}
body .fg .srch__filterwrap.is-open .srch__filterbox{display:flex}
/* Reserve space so chip row does not cover .find__pop / AI pill peek */
body .fg .srch:has(.srch__filterwrap.is-open){margin-bottom:56px}
body .fg .srch__filter{transition:background .12s ease,color .12s ease;position:relative}
body .fg .srch__filterwrap.is-open .srch__filter,
body .fg .srch__filter:hover{background:var(--soft)}
/* Visually hide «Раздел» label — chip select is self-explanatory (Figma) */
body .fg .srch__flabel{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Category control as chip-like pill */
body .fg .srch__select{
  width:auto;min-width:148px;max-width:220px;height:34px;
  border:1px solid #E3E8EF;border-radius:9999px;padding:0 28px 0 14px;
  font-size:14px;color:var(--blue);background:#fff;
  margin:0;box-shadow:0 5px 20px rgba(193,200,218,.35);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  cursor:pointer;
}
/* Галка «искать в описании» убрана из чип-ряда: в макете 696:19776 после
   кнопки фильтра остаётся один раскрывающийся чип раздела, не два. Поиск
   по описанию остаётся в AI-режиме (description=true). */
body .fg .srch__check{display:none!important}
/* Long SEO option labels: ellipsis on closed select; hint off in chip strip */
body .fg .srch__fhint{display:none}
/* Visual «Сбросить» (Figma right under AI) — decorative; full reset needs markup/JS */
body .fg .srch__filterbox::after{
  content:"Сбросить";margin-left:auto;font-size:14px;font-weight:400;
  color:var(--blue);line-height:34px;white-space:nowrap;cursor:default;opacity:.85;
}

/* Кнопка AI-поиска. Отдельного AI-бэкенда нет — режим раскрывает AI-панель
   (.ai-panel выше) со своим полем, которое так же уходит GET-ом в обычный
   поиск с description=true. */
/* `font:inherit` здесь сбрасывал кегль обратно к 16px и гасил размер, заданный
   в `.ai` по узлу (14/500). Ставим явно, а не наследуем. */
body .fg .srch__ai .ai{
  cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
body .fg .srch__ai .ai:hover:not([aria-pressed="true"]){border-color:#E05F16;color:var(--blue)}
/* Включённое состояние по узлу `Button AI search web` (696:21180 / варианты
   696:19945 и т.д.): заливка и обводка #FF6C1D, текст белый. Раньше красилось
   в синий (var(--blue)) — такого состояния в макете нет вовсе, пилюля там
   оранжевая. */
body .fg .srch__ai .ai[aria-pressed="true"]{background:#FF6C1D;color:#fff;border-color:#FF6C1D}
body .fg .srch__ai .ai[aria-pressed="true"]:hover{background:#E05F16;border-color:#E05F16}

/* Чипсы популярных запросов — ховер как в макете */
body .fg .chips a{transition:border-color .12s ease,color .12s ease,box-shadow .12s ease}
body .fg .chips a:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 4px 12px rgba(0,102,178,.12)}

/* Подвал: ссылки-категории и соцкнопки */
body .fg .ftr__soc a{transition:background .15s ease,color .15s ease}
body .fg .ftr a{transition:color .12s ease}
/* hint hidden in chip-row filter strip (see .srch__fhint{display:none} above) */
body .fg .srch__fhint{font-size:12px;color:var(--muted);line-height:1.4;margin-top:4px;display:none}

/* ==========================================================================
   Карточка специалиста на главной («Знакомьтесь!») — макет 699:20746.
   Скоуп body.common-home, чтобы не задеть карточки каталога.
   Селекторы без .fg: блок «Знакомьтесь» лежит вне обёртки макета,
   на нём оставлена родная разметка ради данных и заголовков.
   ========================================================================== */
body.common-home .meet_block .offers_list .sp-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid #E3E8EF;border-radius:12px;
  padding:14px 16px 16px;overflow:visible;
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
body.common-home .meet_block .offers_list .sp-card:hover{
  transform:translateY(-3px);box-shadow:0 16px 34px rgba(16,42,95,.13);border-color:#CBD7E8}

/* Верхняя строка: бейдж PRO слева, избранное справа */
body.common-home .meet_block .sp-card__top{
  display:flex;align-items:center;justify-content:space-between;min-height:24px;margin-bottom:6px}
body.common-home .meet_block .sp-badge{
  display:inline-flex;align-items:center;gap:6px;background:#23B47E;color:#fff;
  font-size:12px;line-height:1;padding:5px 10px;border-radius:20px;white-space:nowrap}
body.common-home .meet_block .sp-badge i{width:6px;height:6px;border-radius:50%;background:#fff;display:block}
body.common-home .meet_block .sp-fav{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;padding:0;cursor:pointer;color:#96A1BD;font-size:13px}
body.common-home .meet_block .sp-fav .heart{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}
body.common-home .meet_block .sp-fav:hover,
body.common-home .meet_block .sp-fav.active{color:#E2536B}
body.common-home .meet_block .sp-fav:hover .heart,
body.common-home .meet_block .sp-fav.active .heart{fill:#E2536B;stroke:#E2536B}

/* Круглое фото в кольце. Кольцо цветное только у оплаченных анкет — как в макете. */
body.common-home .meet_block .sp-card .img{
  position:static;display:flex;justify-content:center;margin:2px 0 14px;padding:0;background:none}
body.common-home .meet_block .sp-card .img img{
  width:150px !important;height:150px !important;border-radius:50% !important;
  object-fit:cover !important;display:block;background:#F1F5FA;
  box-shadow:0 0 0 3px #fff,0 0 0 5px #E3E8EF}
body.common-home .meet_block .sp-card--pro .img img{
  box-shadow:0 0 0 3px #fff,0 0 0 5px #7FB2E5}

body.common-home .meet_block .sp-card .texts{display:flex;flex-direction:column;flex:1 1 auto;text-align:center}
/* Name size/weight: gw1-cards.css (Figma 25/400). Do not fight with 19/500 here. */
body.common-home .meet_block .sp-card .name{margin-bottom:12px}
body.common-home .meet_block .sp-card .name,
body.common-home .meet_block .sp-card .name a{color:#0066B2}
body.common-home .meet_block .sp-card .name a:hover{text-decoration:underline}

/* Локация — отдельной строкой с пином, отбита линиями сверху и снизу */
body.common-home .meet_block .sp-card .location{
  display:flex;align-items:center;justify-content:center;gap:6px;
  border-top:1px solid #E9EEF5;border-bottom:1px solid #E9EEF5;
  padding:9px 0;margin:0 0 10px;font-size:14px;color:#5B6D9C;float:none;width:auto}
body.common-home .meet_block .sp-card .location a{color:#5B6D9C}
body.common-home .meet_block .sp-card .location a:hover{color:#0066B2}
body.common-home .meet_block .sp-card .sp-pin{flex:0 0 auto;color:#96A1BD}

/* Отзывы слева, звёзды справа */
body.common-home .meet_block .sp-card .reviews_stat{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 12px;padding:0;border:0;position:static}
body.common-home .meet_block .sp-card .reviews_stat > a{
  display:inline-flex;align-items:center;gap:6px;color:#96A1BD;font-size:13px}
body.common-home .meet_block .sp-card .reviews_stat > a:hover{color:#0066B2}

body.common-home .meet_block .sp-card .text{
  font-size:14px;line-height:1.5;color:#5B6D9C;text-align:left;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:14px}

body.common-home .meet_block .sp-card .discount{
  order:2;margin:0 0 12px;font-size:13px;line-height:1.35;color:#5B6D9C;
  background:#EEF6EF;border-radius:8px;padding:8px 10px;text-align:center}

/* Контакты и главная кнопка прижаты к низу карточки */
body.common-home .meet_block .sp-card .contacts_wrap{
  order:3;margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.common-home .meet_block .sp-card .contacts_wrap .btn{
  flex:1 1 100%;order:2;display:flex;align-items:center;justify-content:center;gap:8px;
  background:#0066B2;color:#fff;border:1px solid #0066B2;border-radius:8px;
  padding:11px 14px;font-size:15px;text-align:center}
body.common-home .meet_block .sp-card .contacts_wrap .btn:hover{background:#00538F;border-color:#00538F}
body.common-home .meet_block .sp-card .contacts_wrap .icon{order:1}

@media (max-width:600px){
  body.common-home .meet_block .sp-card .img img{width:120px !important;height:120px !important}
  body.common-home .meet_block .sp-card .name{font-size:17px}
}

/* Порядок блоков карточки. Легаси-тема раскладывает флексом с собственными
   order (img:10, texts:100, location:20, reviews_stat:30), поэтому порядок
   макета задаём здесь явно, иначе скидка и контакты уезжают наверх. */
body.common-home .meet_block .offers_list .sp-card > .sp-card__top{order:1}
body.common-home .meet_block .offers_list .sp-card > .img{order:2}
body.common-home .meet_block .offers_list .sp-card > .texts{order:3}
body.common-home .meet_block .offers_list .sp-card > .discount{order:4}
body.common-home .meet_block .offers_list .sp-card > .contacts_wrap{order:5}
body.common-home .meet_block .offers_list .sp-card .texts > .name{order:1}
body.common-home .meet_block .offers_list .sp-card .texts > .location{order:2}
body.common-home .meet_block .offers_list .sp-card .texts > .reviews_stat{order:3}
body.common-home .meet_block .offers_list .sp-card .texts > .text{order:4}
body.common-home .meet_block .offers_list .sp-card .texts > .job_listing-location{order:5}

/* ==========================================================================
   Каталог: hero категории и порядок блоков карточки — макет 763:29533.
   ========================================================================== */

/* Hero: градиент из макета вместо плоской заливки */
body[class*="product-category"] .cat_hero{
  background:linear-gradient(180deg,#000E37 0%,#0065B1 100%) !important;
  padding-bottom:34px}

/* Полный H1 раздела (meta_h1) — крупно, как в макете. */
body[class*="product-category"] .cat_hero__name{display:none}
body[class*="product-category"] .cat_hero h1.home-widget-title{
  text-transform:none !important;color:#fff;font-size:38px;line-height:1.2;
  font-weight:400;text-align:center;margin:6px auto 22px;max-width:1000px}

/* Чипсы подкатегорий: в макете с заглавной и с обводкой */
body[class*="product-category"] .cat_hero .like_tabs_links li a{
  text-transform:none}
body[class*="product-category"] .cat_hero .like_tabs_links li a::first-letter{
  text-transform:uppercase}

/* Поиск в hero */
body[class*="product-category"] .cat_hero__srch{
  display:flex;align-items:center;gap:10px;max-width:720px;margin:26px auto 0;
  background:#fff;border-radius:10px;padding:8px}
body[class*="product-category"] .cat_hero__field{flex:1 1 auto;min-width:0}
body[class*="product-category"] .cat_hero__field input{
  width:100%;height:44px;border:0;border-bottom:1px solid #CBD7E8;background:none;
  padding:0 8px;font-size:16px;color:#5B6D9C;outline:none}
body[class*="product-category"] .cat_hero__field input::placeholder{color:#96A1BD}
body[class*="product-category"] .cat_hero__btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:#0066B2;color:#fff;border-radius:8px;padding:0 22px;height:44px;font-size:16px}
body[class*="product-category"] .cat_hero__btn:hover{background:#00538F}

@media (max-width:600px){
  body[class*="product-category"] .cat_hero h1.home-widget-title{font-size:26px}
  body[class*="product-category"] .cat_hero__srch{flex-wrap:wrap}
  body[class*="product-category"] .cat_hero__btn{width:100%;justify-content:center}
}

/* Порядок блоков карточки каталога — как в макете и как на главной.
   Тема задаёт свои order (img:10, texts:100, location:20, reviews:30, contacts:50),
   из-за чего имя специалиста оказывалось ниже локации и отзывов. */
body[class*="product-category"] .offers_list .item_inner > .card-badge{order:1}
body[class*="product-category"] .offers_list .item_inner > .img{order:2}
body[class*="product-category"] .offers_list .item_inner > .texts{order:3}
body[class*="product-category"] .offers_list .item_inner > .location{order:4}
body[class*="product-category"] .offers_list .item_inner > .reviews_stat{order:5}
body[class*="product-category"] .offers_list .item_inner > .discount{order:6}
body[class*="product-category"] .offers_list .item_inner > .contacts_wrap{order:7}

/* Корень каталога: поиск в hero — кнопка «Найти» справа, как в макете.
   Тема рисует .search-submit как пустой квадрат с фоновой иконкой поверх поля,
   поэтому размеры и фон переопределяются жёстко. */
/* Search body Figma 980×84 r=6 fill #FFF→#F1F3F5 stroke #FFF pad L8 R16 T16 B12;
   CTA 142×56 gradient #2E437B→#0066B2 font 20/400; input 20/400 #96A1BD */
body.product-category-all .cat_hero-form{
  display:flex;align-items:center;gap:10px;
  max-width:980px !important;width:100%;height:84px;box-sizing:border-box;
  margin:22px auto 0;
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F3F5 100%);
  border:1px solid #FFFFFF;border-radius:6px;
  padding:16px 16px 12px 8px;box-shadow:0 5px 20px rgba(193,200,218,.25)}
body.product-category-all .cat_hero-form label{flex:1 1 auto;min-width:0;margin:0}
body.product-category-all .cat_hero-form .search-field{
  width:100% !important;height:56px !important;border:0 !important;
  border-bottom:0 !important;background:none !important;
  padding:0 8px !important;font-size:20px !important;font-weight:400;
  color:#2E437B;box-shadow:none !important}
body.product-category-all .cat_hero-form .search-field::placeholder{
  color:#96A1BD;font-size:20px;font-weight:400;opacity:1}
body.product-category-all .cat_hero-form .cat_hero-submit{
  position:static !important;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:142px !important;height:56px !important;border:1.3px solid #FFFFFF !important;cursor:pointer;
  background:linear-gradient(180deg,#2E437B 0%,#0066B2 100%) !important;
  color:#fff !important;border-radius:6px;
  padding:0 16px !important;font-size:20px !important;font-weight:400;text-indent:0 !important}
body.product-category-all .cat_hero-form .cat_hero-submit:hover{
  background:linear-gradient(180deg,#243562 0%,#00507F 100%) !important}

@media (max-width:600px){
  body.product-category-all .cat_hero-form{flex-wrap:wrap}
  body.product-category-all .cat_hero-form .cat_hero-submit{width:100% !important;justify-content:center}
}
/* Тема дорисовывает кнопке поиска иконку и подпись через псевдоэлементы —
   из-за этого получалось «🔍 🔍 Найти Найти». Гасим их. */
body.product-category-all .cat_hero-form .cat_hero-submit::before,
body.product-category-all .cat_hero-form .cat_hero-submit::after{content:none !important;display:none !important}

/* ==========================================================================
   Выдача поиска. Использует ту же карточку .sp-card, что каталог и главная.
   ========================================================================== */
body.product-search .cat_hero{background:linear-gradient(180deg,#000E37 0%,#0065B1 100%) !important;padding-bottom:30px}
body.product-search .cat_hero__name{color:#fff;font-size:34px;line-height:1.2;text-align:center;margin:6px 0 8px}
body.product-search .cat_hero h1.home-widget-title{
  text-transform:none !important;color:rgba(255,255,255,.9);font-size:19px;font-weight:400;
  text-align:center;margin:0 auto 20px}
body.product-search .cat_hero__srch{
  display:flex;align-items:center;gap:10px;max-width:720px;margin:0 auto;
  background:#fff;border-radius:10px;padding:8px}
body.product-search .cat_hero__field{flex:1 1 auto;min-width:0}
body.product-search .cat_hero__field input{
  width:100%;height:44px;border:0;border-bottom:1px solid #CBD7E8;background:none;
  padding:0 8px;font-size:16px;color:#5B6D9C;outline:none}
body.product-search .cat_hero__btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:#0066B2;color:#fff;border-radius:8px;padding:0 22px;height:44px;font-size:16px}
body.product-search .cat_hero__btn:hover{background:#00538F}
body.product-search .search_descr{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:14px auto 0;color:rgba(255,255,255,.85);font-size:14px;cursor:pointer}
body.product-search .search_descr input{width:16px;height:16px;accent-color:#fff;margin:0}

body.product-search .search_meta{color:#5B6D9C;font-size:14px;margin:26px 0 16px}
body.product-search .offers_list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;
  width:calc(100% + 30px);margin:0 -15px}
body.product-search .offers_list .item{display:flex}
body.product-search .offers_list .sp-card{
  display:flex;flex-direction:column;width:100%;
  background:#fff;border:1px solid #E3E8EF;border-radius:12px;padding:14px 16px 16px;
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
body.product-search .offers_list .sp-card:hover{
  transform:translateY(-3px);box-shadow:0 16px 34px rgba(16,42,95,.13);border-color:#CBD7E8}
body.product-search .sp-card__top{display:flex;align-items:center;justify-content:space-between;min-height:24px;margin-bottom:6px}
body.product-search .sp-badge{
  display:inline-flex;align-items:center;gap:6px;background:#23B47E;color:#fff;
  font-size:12px;line-height:1;padding:5px 10px;border-radius:20px}
body.product-search .sp-badge i{width:6px;height:6px;border-radius:50%;background:#fff;display:block}
body.product-search .sp-fav{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  padding:0;cursor:pointer;color:#96A1BD;font-size:13px}
body.product-search .sp-fav .heart{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}
body.product-search .sp-fav:hover,
body.product-search .sp-fav.active{color:#E2536B}
body.product-search .sp-fav:hover .heart,
body.product-search .sp-fav.active .heart{fill:#E2536B;stroke:#E2536B}
body.product-search .sp-card .img{display:flex;justify-content:center;margin:2px 0 14px}
body.product-search .sp-card .img img{
  width:150px;height:150px;border-radius:50%;object-fit:cover;background:#F1F5FA;
  box-shadow:0 0 0 3px #fff,0 0 0 5px #E3E8EF}
body.product-search .sp-card--pro .img img{box-shadow:0 0 0 3px #fff,0 0 0 5px #7FB2E5}
body.product-search .sp-card .texts{display:flex;flex-direction:column;flex:1 1 auto;text-align:center}
body.product-search .sp-card .name{font-size:19px;line-height:1.3;margin-bottom:10px}
body.product-search .sp-card .name a{color:#0066B2}
body.product-search .sp-card .name a:hover{text-decoration:underline}
body.product-search .sp-card .location{
  display:flex;align-items:center;justify-content:center;gap:6px;
  border-top:1px solid #E9EEF5;border-bottom:1px solid #E9EEF5;
  padding:9px 0;margin:0 0 10px;font-size:14px;color:#5B6D9C}
body.product-search .sp-card .sp-pin{flex:0 0 auto;color:#96A1BD}
body.product-search .sp-card .reviews_stat{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
body.product-search .sp-card .sp-reviews{display:inline-flex;align-items:center;gap:6px;color:#96A1BD;font-size:13px}
body.product-search .sp-card .text{
  font-size:14px;line-height:1.5;color:#5B6D9C;text-align:left;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px}
body.product-search .sp-card .discount{
  margin:0 0 12px;font-size:13px;line-height:1.35;color:#5B6D9C;
  background:#EEF6EF;border-radius:8px;padding:8px 10px;text-align:center}
body.product-search .sp-card .contacts_wrap{margin-top:auto}
body.product-search .sp-card .contacts_wrap .btn{
  display:flex;align-items:center;justify-content:center;
  background:#0066B2;color:#fff;border:1px solid #0066B2;border-radius:8px;
  padding:11px 14px;font-size:15px}
body.product-search .sp-card .contacts_wrap .btn:hover{background:#00538F;border-color:#00538F}

body.product-search .search_pagination{margin:30px 0 50px;display:flex;justify-content:center}
body.product-search .search_empty{max-width:640px;margin:60px auto 80px;text-align:center;color:#5B6D9C}
body.product-search .search_empty-title{font-size:26px;color:#5B6D9C;margin-bottom:12px}
body.product-search .search_empty p{line-height:1.6;margin-bottom:22px}
body.product-search .search_empty-btn{display:inline-flex;text-decoration:none}

@media (max-width:980px){body.product-search .offers_list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  body.product-search .offers_list{grid-template-columns:1fr}
  body.product-search .cat_hero__name{font-size:24px}
  body.product-search .cat_hero__srch{flex-wrap:wrap}
  body.product-search .cat_hero__btn{width:100%;justify-content:center}
}
/* Порядок блоков карточки в выдаче: тема задаёт свои order (img:10, texts:100,
   discount:40, contacts:50), поэтому кнопка и скидка уезжали выше имени. */
body.product-search .offers_list .sp-card > .sp-card__top{order:1}
body.product-search .offers_list .sp-card > .img{order:2}
body.product-search .offers_list .sp-card > .texts{order:3}
body.product-search .offers_list .sp-card > .discount{order:4}
body.product-search .offers_list .sp-card > .contacts_wrap{order:5}
body.product-search .sp-card .texts > .name{order:1}
body.product-search .sp-card .texts > .location{order:2}
body.product-search .sp-card .texts > .reviews_stat{order:3}
body.product-search .sp-card .texts > .text{order:4}

/* ==========================================================================
   Списки блога / афиши / акций / единства — макет «Блог WEB» 852:44652.
   Общий шаблон newsblog/category.tpl, поэтому скоуп по body.newsblog-category.
   ========================================================================== */
body.newsblog-category .page-cover{
  background-color:#0B2F7A;background-blend-mode:multiply;padding-bottom:34px}
body.newsblog-category .page-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,14,55,.92) 0%,rgba(0,101,177,.88) 100%);z-index:0}
body.newsblog-category .page-cover > *{position:relative;z-index:1}
body.newsblog-category .page-cover__lead{
  max-width:820px;margin:14px auto 0;text-align:center;
  color:rgba(255,255,255,.85);font-size:16px;line-height:1.55}
body.newsblog-category .page-cover__lead p{margin:0 0 8px}
body.newsblog-category .page-cover__lead a{color:#fff;text-decoration:underline}

/* Разделы блога — пилюли вместо хэштегов */
body.newsblog-category .newsblog_specials_categories{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px 0 26px}
body.newsblog-category .newsblog_specials_categories a{
  display:inline-flex;align-items:center;padding:8px 18px;border-radius:20px;
  border:1px solid #DCE4F0;background:#fff;color:#5B6D9C;font-size:15px;line-height:1.2;
  text-transform:none;text-decoration:none;transition:border-color .12s ease,color .12s ease,box-shadow .12s ease}
body.newsblog-category .newsblog_specials_categories a:hover{
  border-color:#0066B2;color:#0066B2;box-shadow:0 4px 12px rgba(0,102,178,.12)}
body.newsblog-category .newsblog_specials_categories a.is-active{
  border-color:#0066B2;color:#0066B2;background:#F1F5FA}

/* Мета-строка карточки: дата слева, время чтения справа, разделены линией */
body.newsblog-category .blog-items .item_meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:13px;color:#96A1BD;margin:0 0 10px}
body.newsblog-category .blog-items .item_meta::before{
  content:"";flex:1 1 auto;order:1;height:1px;background:#E9EEF5}
body.newsblog-category .blog-items .item_date{order:0}
body.newsblog-category .blog-items .item_read{order:2;display:inline-flex;align-items:center;gap:5px}
/* Названия рубрик в базе часть капсом (БИЗНЕС, ЛЮДИ, МЕСТА), часть уже
   нормальным регистром (Еда в Израиле, Про жизнь). Раньше тут был
   text-transform:lowercase + ::first-letter:uppercase, но это ломало
   проперные имена внутри строки ('Еда в Израиле' -> 'Еда в израиле').
   Фикс перенесён в источник: catalog/controller/newsblog/category.php
   нормализует только полностью капсовые названия. Здесь больше ничего
   не трогаем. */

/* Фокус на иконках и кнопках шапки: тема рисует пунктирную рамку браузера
   по умолчанию — заменяем на аккуратное кольцо в цвете макета.
   Убирать фокус совсем нельзя: он нужен для клавиатурной навигации. */
body .fg-header .hdr__icon:focus,
body .fg-header .hdr__lang:focus,
body .fg-header .hdr__burger:focus,
body .fg-header .btn:focus{outline:none}
body .fg-header .hdr__icon:focus-visible,
body .fg-header .hdr__lang:focus-visible,
body .fg-header .hdr__burger:focus-visible,
body .fg-header .btn:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
body .fg-header .hdr__icon{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:8px;color:var(--blue)}
body .fg-header .hdr__icon:hover{background:var(--soft);color:var(--blue)}

/* Подвал на мобильной — аккордеон. На десктопе правила не применяются. */
@media (max-width:760px){
  body .fg .ftr__col .ftr__title{
    display:flex;align-items:center;justify-content:space-between;cursor:pointer;
    margin-bottom:0;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.25)}
  body .fg .ftr__col .ftr__title::after{
    content:"";width:9px;height:9px;flex:0 0 auto;margin-left:12px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-3px);transition:transform .18s ease}
  body .fg .ftr__col.is-open .ftr__title::after{transform:rotate(-135deg) translateY(-1px)}
  body .fg .ftr__col .ftr__two,
  body .fg .ftr__col .ftr__list,
  body .fg .ftr__col .ftr__big{display:none}
  body .fg .ftr__col.is-open .ftr__two{display:grid;padding-top:14px}
  body .fg .ftr__col.is-open .ftr__list,
  body .fg .ftr__col.is-open .ftr__big{display:block;padding-top:14px}
  body .fg .ftr__in{gap:0}
  body .fg .ftr__brand{margin-bottom:22px}
}

/* Первая статья широкой карточкой + плитка подписки — макет «Блог WEB». */
body.newsblog-category .blog_lead{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;margin:0 0 24px;align-items:stretch}
body.newsblog-category .blog_lead-item{
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;
  background:#fff;border:1px solid var(--line,#E3E8EF);border-radius:12px;padding:14px}
body.newsblog-category .blog_lead-img{display:block;border-radius:8px;overflow:hidden}
body.newsblog-category .blog_lead-img img{width:100%;height:100%;object-fit:cover;display:block}
body.newsblog-category .blog_lead-body{display:flex;flex-direction:column;padding:4px 4px 4px 0}
body.newsblog-category .blog_lead-body .name{font-size:22px;line-height:1.3;margin:0 0 10px}
body.newsblog-category .blog_lead-body .name a{color:#0066B2}
body.newsblog-category .blog_lead-body .text{
  font-size:15px;line-height:1.55;color:#5B6D9C;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px}
body.newsblog-category .blog_lead-body .button_white{margin-top:auto;align-self:stretch;text-align:center}

body.newsblog-category .blog_promo{
  display:flex;flex-direction:column;justify-content:center;border-radius:12px;padding:28px 26px;
  background:linear-gradient(135deg,#0B3A8F 0%,#0066B2 55%,#7B4DD6 100%);color:#fff}
body.newsblog-category .blog_promo-title{font-size:26px;line-height:1.25;margin-bottom:14px}
body.newsblog-category .blog_promo-text{font-size:14px;line-height:1.55;color:rgba(255,255,255,.88);margin-bottom:22px}
body.newsblog-category .blog_promo-btn{
  align-self:flex-start;display:inline-flex;align-items:center;
  border:1px solid rgba(255,255,255,.8);border-radius:8px;padding:11px 20px;
  color:#fff;font-size:15px;text-decoration:none;transition:background .15s ease,color .15s ease}
body.newsblog-category .blog_promo-btn:hover{background:#fff;color:#0B3A8F}

@media (max-width:980px){
  body.newsblog-category .blog_lead{grid-template-columns:1fr}
}
@media (max-width:640px){
  body.newsblog-category .blog_lead-item{grid-template-columns:1fr}
  body.newsblog-category .blog_lead-img img{height:auto !important;aspect-ratio:1 / 1;object-fit:contain;object-position:center;background:#eef3f9}
}

/* ---------- Оверлей поиска в шапке ----------
   Дефект 1 (функциональный): по клику на лупу оверлей открывался (класс `active`,
   opacity 0→1), но оставался НЕВИДИМ. `.search-overlay` из `style2.min.css` —
   `position:absolute; z-index:10`, а шапка — `position:fixed; z-index:1021`,
   та же точка и та же высота 85px. Оверлей целиком уезжал ПОД шапку.
   Дефект 2 (визуальный): фон был #2854A1 — цвет старой темы, в палитре макета его нет.

   Отдельного экрана «раскрытый поиск» дизайнер не рисовал: в узле 746:32976 его пометка —
   «Кнопка поиска относится только к поиску на сайте», а сам поиск нарисован блоком на
   главной. Поэтому берём язык оттуда, а не выдумываем свой:
     `Search body` (729:29080) — 980x84, radius 6, заливка ГРАДИЕНТ #FFFFFF → #F1F3F5,
                                 обводка #FFFFFF 1px
     `Input and button`        — строка 956x56
     подсказки (768:29190)     — белая панель radius 8, обводка #96A1BD 1px,
                                 пункт 26px, текст 16/400 #5B6D9C, наведённый фон #0066B2
*/
/* ВАЖНО: закрытый оверлей НЕ должен перехватывать клики.
   style2: display:flex; opacity:0; z-index:-1, но pointer-events:auto —
   при регрессии z-index невидимый слой крадёт hit-test. Гасим pe/visibility. */
body .fg .search-overlay,
.search-overlay {
	background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F5 100%);
	border-bottom: 1px solid #DDDDDD;
	display: flex;
	align-items: center;
	pointer-events: none;
	visibility: hidden;
}

body .fg .search-overlay.is-open,
body .fg .search-overlay.active,
.search-overlay.is-open,
.search-overlay.active {
	z-index: 1030;
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
}

.search-overlay .search-form {
	background: #FFFFFF;
	border: 1px solid #FFFFFF;
	border-radius: 6px;
	box-shadow: 0 5px 20px rgba(193, 200, 218, .4);
	/* высота шапки 85px: 56 (строка ввода) + 12*2 (поля) + 2 (рамка) = 82 */
	padding: 12px;
	align-items: center;
	gap: 12px;
}

.search-overlay .search-field {
	height: 56px;
	border: 0;
	border-radius: 6px;
	font-size: 16px;
	color: #000F38;
	background: transparent;
	padding: 0 8px;
}

.search-overlay .search-field::placeholder {
	color: #96A1BD;
}

/* Кнопка отправки — тот же градиент, что у «Присоединиться» (748:38682). */
/* Специфичность: `body .fg button{background:none}` в этом же файле весит (0,2,1)
   и гасил мой (0,2,0) — фон сбрасывался, оставалась плоская заливка из
   `figma-redesign.css`. Поднимаем до (0,3,1). */
/* Тема держит `.search-submit` в `position:absolute` и прижимает влево —
   кнопка наезжала на поле ввода. Во флекс-строке она должна стоять последней. */
.search-overlay .search-form label {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	margin: 0;
}

body .fg .search-overlay .search-submit,
.search-overlay .search-submit {
	position: static;
	order: 2;
	flex: 0 0 auto;
	/* у кнопки есть подпись «Найти» через `::after` (figma-redesign.css:766),
	   поэтому ширина по содержимому, а не фиксированные 56px — иначе текст
	   вылезал за пределы плашки */
	width: auto;
	min-width: 56px;
	min-height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 500;
	border-radius: 6px;
	/* ЧЕТВЁРТЫЙ механизм проигрыша: `figma-redesign.css:763` объявляет
	   `.search-form .search-submit{background:var(--fg-blue) !important}`.
	   `!important` бьёт и порядок файлов, и специфичность — перекрыть можно
	   только встречным `!important`. */
	background: linear-gradient(180deg, #2E437B 0%, #0066B2 100%) !important;
	border: 1.3px solid #FFFFFF;
	color: #FFFFFF;
	height: 56px;
	padding: 0 22px;
}

body .fg .search-overlay .search-submit:hover,
.search-overlay .search-submit:hover {
	background: linear-gradient(180deg, #24365F 0%, #00538F 100%) !important;
}

.search-overlay .search-overlay-toggle {
	color: #0066B2;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Крестик закрытия (`a.ion-close.search-overlay-toggle`, 44x44, position:absolute)
   стоял внутри формы и ложился прямо на кнопку «Найти» (кнопка 1161-1282,
   крестик 1233) — на кнопке был виден посторонний ×.
   Уводим крестик за правый край формы и освобождаем под него место. */
.search-overlay .container {
	position: relative;
	padding-right: 64px;
}

.search-overlay .ion-close.search-overlay-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #5B6D9C;
	font-size: 20px;
	z-index: 2;
}

.search-overlay .ion-close.search-overlay-toggle:hover {
	color: #0066B2;
}

/* ==========================================================================
   Home desktop 1440 — catalog tiles + find rhythm (node 729:26763)
   gw3-tiles.css loads later and sets img 200px + word-break:break-word,
   which starves the title column (~105px) and splits Russian mid-word.
   body.common-home specificity beats body .fg even when this file is earlier.
   Desktop only (min-width:768) so mobile ≤480 / gw2-mob stay intact.
   ========================================================================== */
@media (min-width:768px){
  /* Image/text balance: ~half photo dissolve + title column ≥120px */
  body.common-home .fg .ct__link{gap:0}
  body.common-home .fg .ct__link img{
    flex:0 0 155px;
    width:155px !important;
    max-width:170px;
    height:150px !important;
  }
  body.common-home .fg .ct__link::after{width:155px}
  body.common-home .fg .ct__link span{
    flex:1 1 45%;
    min-width:120px;
    font-size:17px;
    line-height:1.25;
    padding:0 8px 0 6px;
    /* Override gw3-tiles break-word mid-syllable leak to desktop */
    word-break:normal;
    overflow-wrap:break-word;
    hyphens:manual;
  }
}

/* Blog covers: soft placeholder while lazy src resolves */
body.common-home .fg .blog .bc__img,
body.common-home .fg .blog img{
  min-height:160px;
  background:#F1F5FA;
  object-fit:contain;
}

/* Find «Я хочу найти»: Figma ~24px under title (sec-title rhythm), live was 59px */
body.common-home .fg .find .sec-title,
body.common-home .fg .find h2,
body.common-home .fg .find__title{margin:0 0 24px}

/* AI chip: Figma 696:21180 ≈91×26 — force intrinsic pill width vs later gw shrink */
body.common-home .fg .find .ai,
body.common-home .fg .srch__ai .ai,
body.common-home .fg .ai{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:91px;
  max-width:none;
  flex:0 0 auto;
  height:26px;
  padding:0 14px;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  overflow:visible;
  box-sizing:border-box;
}

/* @1440: ill 330 + gap squeezes search column to ~790; hide ill until ≥1600 so bar hits 980 */
@media (max-width:1599px){
  body .fg .find__ill{display:none}
  body .fg .find__main,
  body .fg .srch,
  body .fg .find__pop,
  body .fg .srch__ai,
  body .fg .ai-panel{max-width:980px}
}
@media (min-width:1600px){
  body .fg .find__ill{width:280px;flex:0 0 280px}
}

/* Location chip overflow (find filters / city control when present) */
body.common-home .fg .find [class*=city],
body.common-home .fg .find .location{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

/* meet_block: full-bleed gray is owned by gw1-cards.css (100vw breakout).
   Do NOT re-constrain width to 1180 here — that left white side gutters. */

/* Footer copyright: left col 280px wraps mid-phrase — denser type + cap width */
body .fg .ftr__brand,
body .fg .ftr__copy{
  font-size:13px;
  line-height:1.35;
  max-width:260px;
}
@media (min-width:861px){
  body .fg .ftr__in{
    grid-template-columns:minmax(300px,1.1fr) minmax(0,2fr) minmax(220px,0.9fr);
  }
}

/* Cookie vs footer: keep card bottom-right, below sticky chrome, max 320 */
body #cookie_popup{
  z-index:1000;
  bottom:16px;
  right:16px;
  max-width:320px;
}

/* Hero H1: letter-spacing/white-space only — missing space before «в» needs CMS/template */
body.common-home .fg .hero__title{
  letter-spacing:normal;
  white-space:normal;
}

/* Sale bar — Figma 1071:114408 / 1078:97983: 1180×84, text 36/700 */
body.common-home .fg .sale-bar{
  min-height:84px;
  border-radius:2px;
}
body.common-home .fg .sale-bar__text{
  display:flex;
  align-items:center;
  font-size:36px;
  line-height:42.66px;
  font-weight:700;
  letter-spacing:0;
}
body.common-home .fg .sale-bar__logo img,
body.common-home .fg .sale-bar__logo svg{
  width:160px;
  height:38px;
}