:root{--bg:#fff;--fg:#0b0b0b;--muted:#6b7280;--line:#eee;--brand:#111;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Roboto,system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--fg);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
/* Header */
.site-header{border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:20 padding:14px 0;}
.header-inner{display:flex;align-items:center;gap:16px;height:66px}
.logo img{display:block}
.nav{display:flex;gap:18px;margin-left:auto}
.nav a{padding:6px 0;opacity:.9}
.nav a:hover{opacity:1}
.social{display:inline-flex;gap:12px;align-items:center;margin-left:16px}
.social a{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;transition:.15s transform,.15s opacity}
.social a:hover{transform:translateY(-1px);opacity:.85}
/* Hero */
.hero{padding:54px 0 24px}
h1{font-family:Montserrat,Roboto,Arial,sans-serif;font-weight:800;font-size:40px;line-height:1.1;margin:0 0 10px}
.lead{font-size:18px;color:var(--muted);max-width:720px}
.cta-row{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;font-weight:600}
.btn-dark{background:#000;color:#fff}
.btn-outline{border:1px solid #000}
/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 10px}
.card{border:1px solid var(--line);border-radius:14px;padding:16px;transition:.15s transform}
.card:hover{transform:translateY(-2px)}
.card h3{font-family:Montserrat;font-size:18px;margin:6px 0 8px}
.card p{color:var(--muted);margin:0}
/* Content */
.section{padding:44px 0;border-top:1px solid var(--line)}
.section h2{font-family:Montserrat;font-weight:800;margin:0 0 10px}
.section p{color:var(--muted);max-width:760px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.gallery a{border:1px solid var(--line);border-radius:10px;overflow:hidden}
/* Social section inside page */
.social-section{text-align:center;padding:36px 0 8px;border-top:1px dashed var(--line)}
.social-section h2{font-family:Montserrat;margin:0 0 6px}
.social-section p{color:var(--muted);margin:0 0 16px}
.social--section{display:flex;gap:12px;justify-content:center}
.btn-wa{background:#25D366;color:#fff}
.btn-ig{background:#000;color:#fff}
/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:30px}
.footer-inner{display:grid;grid-template-columns:2fr 1.2fr 1.2fr;gap:18px;padding:20px 0}
.footer-col .muted{color:var(--muted);margin:6px 0 10px}
.footer-col a{display:block;margin:4px 0}
.footer-bottom{border-top:1px solid var(--line);padding:10px 0;color:var(--muted);font-size:14px}
/* Responsive */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .header-inner{height:60px}
  .nav{display:none}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  h1{font-size:30px}
}


/* === unified tweaks (17.08.2025) === */
.header-inner{display:flex;align-items:center;gap:24px}
.header-inner .logo{flex:0 0 auto}
.header-inner .nav{flex:1 1 auto;display:flex;justify-content:center;gap:32px}
.header-inner .social{flex:0 0 auto;display:flex;gap:12px}
.nav a{line-height:1.2}
.badge--muted{background:#eee;color:#111;border-radius:8px;padding:6px 10px;font-weight:600}
.social img{width:24px;height:24px;max-width:none;vertical-align:middle}
.site-footer .footer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid #eee}
.footer-left,.footer-right{display:flex;align-items:center;gap:12px}
.footer-logo{height:28px;opacity:.6}
.footer-center small{color:#666}
.card--muted{background:#eee;border-color:#eee}


html,body{height:100%}
body{min-height:100%;display:flex;flex-direction:column}
.site-main{flex:1 0 auto}
.site-footer{flex-shrink:0}


.nav a{font-size:14px;line-height:1.2}

.site-header{padding:18px 0}

.cta-row{display:flex;justify-content:center}

.cards--short{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.cards--short .card{background:#eee;border-color:#eee;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center}
/* Хедер: по центру и ровно */
.site-header{padding:18px 0}
.header-inner{display:flex;align-items:center;gap:24px}
.header-inner .logo{flex:0 0 auto}
.header-inner .nav{flex:1 1 auto;display:flex;justify-content:center;gap:32px;white-space:nowrap}
.header-inner .social{flex:0 0 auto;display:flex;gap:12px}

/* Лого не прыгает по базовой линии */
.site-header .logo img{display:block;height:28px;width:auto}

/* Кегль меню (как просил) */
.nav a{font-size:11px;line-height:1.2;display:inline-flex;align-items:center}
/* Хедер — стабильная сетка, +30% логотипы, 13px меню */
.site-header{padding:18px 0}
.header-inner{display:flex;align-items:center;gap:24px}
.header-inner .logo{flex:0 0 160px;display:flex;align-items:center}   /* фикс-ширина, чтобы центр не прыгал */
.header-inner .logo img{display:block;height:36px;width:auto}         /* было 28px → +30% ~ 36px */
.header-inner .nav{flex:1 1 auto;display:flex;justify-content:center;gap:32px;white-space:nowrap}
.header-inner .social{flex:0 0 72px;display:flex;gap:12px;justify-content:flex-end} /* фикс-ширина справа */

.nav a{font-size:13px;line-height:1.2;display:inline-flex;align-items:center;padding:6px 10px;border-radius:8px}
.nav a.active{background:#eee;color:#111}  /* светло-серая плашка для активной страницы */

.social img{width:24px;height:24px;max-width:none;vertical-align:middle}

/* Хедер стабильный: центр не прыгает */
.site-header{padding:18px 0}
.header-inner{display:flex;align-items:center;gap:24px}
.header-inner .logo{flex:0 0 160px;display:flex;align-items:center}
.header-inner .logo img{display:block;height:36px;width:auto}   /* лого +30% */
.header-inner .nav{flex:1 1 auto;display:flex;justify-content:center;gap:32px;white-space:nowrap}
.header-inner .social{flex:0 0 72px;display:flex;gap:12px;justify-content:flex-end}

/* Кегль меню 13px и подсветка активного пункта */
.nav a{font-size:13px;line-height:1.2;display:inline-flex;align-items:center;padding:6px 10px;border-radius:8px}
.nav a.active{background:#eee;color:#111}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Хедер: стабильная сетка, логотип +30%, меню 13px, центр НЕ прыгает */
.site-header{padding:18px 0}
.header-inner{display:flex;align-items:center;gap:24px}
.header-inner .logo{flex:0 0 160px;display:flex;align-items:center}
.header-inner .logo img{display:block;height:36px;width:auto}
.header-inner .nav{flex:1 1 0;display:flex;justify-content:center;gap:32px;white-space:nowrap}
.header-inner .social{flex:0 0 72px;display:flex;gap:12px;justify-content:flex-end}
.nav a{font-size:13px;line-height:1.2;display:inline-flex;align-items:center;padding:6px 10px;border-radius:8px}
.nav a.active{background:#eee;color:#111}

/* HERO слева: Montserrat + Roboto, как на главной */
.hero h1{font-family:'Montserrat',sans-serif;font-weight:800;line-height:1.1;
         font-size:clamp(32px,5vw,56px);margin:4px 0 12px}
.hero .lead{font-family:'Roboto',sans-serif;font-weight:400;font-size:18px;color:#555;
            max-width:760px;margin:0 0 14px}
.btn.btn-dark{display:inline-block;padding:10px 16px;border-radius:10px;background:#111;color:#fff;text-decoration:none}

/* Плитки на внутренних: три серых квадрата без подписей */
.cards--short{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards--short .card{background:#eee;border-color:#eee;aspect-ratio:1/1;border-radius:16px;display:block}

/* Соц-иконки и футер внизу */
.social img{width:24px;height:24px;max-width:none;vertical-align:middle}
html,body{height:100%}
body{min-height:100%;display:flex;flex-direction:column}
.site-main{flex:1 0 auto}
.site-footer{flex-shrink:0}
.footer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid #eee}
.footer-left,.footer-right{display:flex;align-items:center;gap:12px}
.footer-logo{height:28px;opacity:.6}
.footer-center small{color:#666}

/* Бейдж для «ПОДАРКИ-2026» */
.badge--muted{background:#eee;color:#111;border-radius:8px;padding:6px 10px;font-weight:600}
/* === HEADER: вернуть «сетку», чтобы ничего не уезжало === */
.site-header{padding:20px 0}
.header-inner{
  display:grid;
  grid-template-columns: 180px 1fr 88px; /* лого | центр | соц-иконки */
  align-items:center;
  gap:16px;
}
.header-inner .logo img{
  display:block;
  height:44px;           /* логотип больше (+~20% от 36px) */
  width:auto;
}
.header-inner .nav{
  display:flex;
  justify-content:center;
  gap:24px;              /* меньше, чтобы всё влезало */
  white-space:nowrap;
}
.nav a{
  font-size:13px;        /* кегль меню 13 */
  line-height:1.2;
  padding:4px 8px;       /* компактнее плашки */
  border-radius:8px;
  display:inline-flex;
  align-items:center;
}
.nav a.active{background:#eee;color:#111}

/* Соц-иконки в шапке — фиксированный размер */
.social img{width:24px;height:24px;max-width:none;vertical-align:middle}

/* === FOOTER: иконки не растягивать, размер стабильный === */
.site-footer .footer-right img{width:24px;height:24px;max-width:none}
.site-footer .footer-left img{height:28px;max-width:none;opacity:.6}

/* Контейнер на всех страницах (возврат к «нашей» сетке) */
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Плитки — как были: три серых квадрата без подписей (внутренние страницы) */
.cards--short{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards--short .card{background:#eee;border-color:#eee;aspect-ratio:1/1;border-radius:16px;display:block}

/* Футер всегда внизу */
html,body{height:100%}
body{min-height:100%;display:flex;flex-direction:column}
.site-main{flex:1 0 auto}
.site-footer{flex-shrink:0}
/* === Контейнер и горизонтальный скролл */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
html,body{overflow-x:hidden}

/* === Шапка: стабильная сетка, ничего не «убегает» */
.site-header{padding:20px 0}
.header-inner{
  display:grid;
  grid-template-columns: 200px 1fr 88px; /* лого | меню | соц-иконки */
  align-items:center;
  gap:16px;
}
.header-inner .logo img{display:block;height:44px;width:auto} /* логотип крупнее */
.header-inner .nav{display:flex;justify-content:center;gap:18px;white-space:nowrap}
.nav a{font-size:13px;line-height:1.2;padding:4px 8px;border-radius:8px;display:inline-flex;align-items:center}
.nav a.active{background:#eee;color:#111}
.social img{width:24px;height:24px;max-width:none;vertical-align:middle}

/* === Плитки: три серых квадрата без подписей на внутренних */
.cards--short{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cards--short .card{background:#eee;border-color:#eee;aspect-ratio:1/1;border-radius:16px;display:block}

/* === Футер: фикс размеры логотипов и иконок */
.site-footer .footer-left img{height:28px;max-width:none;opacity:.6}
.site-footer .footer-right img{width:24px;height:24px;max-width:none}

/* === HERO слева: заголовок + дескриптор + кнопка */
.hero h1{font-family:'Montserrat',sans-serif;font-weight:800;line-height:1.1;font-size:clamp(32px,5vw,56px);margin:4px 0 12px}
.hero .lead{font-family:'Roboto',sans-serif;font-weight:400;font-size:18px;color:#555;margin:0 0 14px;max-width:760px}
.btn.btn-dark{display:inline-block;padding:10px 16px;border-radius:10px;background:#111;color:#fff;text-decoration:none}

/* === Адаптив */
/* ноутбуки */
@media (max-width: 1200px){
  .header-inner{grid-template-columns: 170px 1fr 72px}
  .header-inner .logo img{height:40px}
  .header-inner .nav{gap:14px}
}
/* планшеты */
@media (max-width: 900px){
  .header-inner{
    grid-template-columns: 1fr 64px;      /* лого | соц-иконки */
    grid-template-rows: auto auto;        /* меню отдельной строкой */
  }
  .header-inner .logo{grid-column:1/2}
  .header-inner .social{grid-column:2/3;justify-content:flex-end}
  .header-inner .nav{
    grid-column:1/3;
    justify-content:space-between;
    gap:12px;
    padding-top:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .nav a{font-size:12.5px;padding:4px 6px}
  .cards--short{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hero .lead{font-size:16px}
}
/* телефоны */
@media (max-width: 520px){
  .container{padding:0 14px}
  .header-inner .logo img{height:34px}
  .nav a{font-size:12px}
  .cards--short{grid-template-columns:1fr;gap:14px}
  .btn.btn-dark{width:100%;text-align:center}
}
/* ——— HEADER: максимальная «ужимка» ——— */
.container{max-width:1200px;margin:0 auto;padding:0 16px} /* меньше боковых полей */

.header-inner{
  display:grid;
  grid-template-columns: 180px 1fr 64px; /* лого | меню | соц-иконки (уже) */
  align-items:center;
  gap:12px;
}
.header-inner .nav{
  display:flex;
  justify-content:center;
  gap:10px;                 /* МЕНЬШЕ ПРОМЕЖУТКИ МЕЖДУ РУБРИКАМИ */
  white-space:nowrap;
}
.nav a{
  font-size:13px;           /* как просил */
  line-height:1.2;
  padding:2px 6px;          /* компактные «плашки» */
  border-radius:8px;
  display:inline-flex;align-items:center;
}
.nav a.active{background:#eee;color:#111;padding:2px 6px}
.badge--muted{padding:4px 6px} /* бейдж ПОДАРКИ-2026 тоже уже */

/* ноутбуки */
@media (max-width:1200px){
  .header-inner{grid-template-columns:160px 1fr 60px}
  .header-inner .nav{gap:8px}
  .nav a{padding:2px 5px}
}
/* планшеты */
@media (max-width:900px){
  .header-inner{grid-template-columns:1fr 60px;grid-template-rows:auto auto}
  .header-inner .nav{grid-column:1/3;justify-content:space-between;gap:6px;padding-top:6px;overflow-x:auto}
  .nav a{padding:2px 5px}
}
/* NAV: 2 строки, идеальное центрирование */
.header-inner{
  display:grid;
  grid-template-columns:180px 1fr 64px; /* лого | меню | соц-иконки */
  align-items:center;
  gap:12px;
}

.header-inner .nav{
  display:flex;
  flex-wrap:wrap;              /* разрешаем перенос на 2 строки */
  justify-content:center;      /* центруем КАЖДУЮ строку */
  align-content:center;        /* центруем блок из двух строк */
  gap:8px 14px;                /* вертикальный/горизонтальный отступы между пунктами */
  white-space:normal;          /* снимаем nowrap */
  max-width:900px;             /* целенаправленно «ломаем» в 2 строки на десктопе */
  margin:0 auto;               /* сам блок по центру в средней колонке */
  padding:2px 0;
}

.nav a{
  font-size:14px;              /* +1 кегль */
  line-height:1.2;
  padding:3px 8px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
}

/* Адаптив остаётся как был; при <900px меню уходит на отдельную строку */
/* активная рубрика в хэдере — серая плашка */
.nav a{
  font-size:14px; line-height:1.2;
  padding:3px 8px; border-radius:8px;
  display:inline-flex; align-items:center; text-align:center;
  white-space:normal;
}
.nav a.active{background:#eee; color:#111}

/* чтобы «ПОДАРКИ-2026» всегда была серой */
.badge--muted{background:#eee; color:#111; border-radius:8px; padding:4px 8px; font-weight:600}
/* H1 компактнее, но больше H2 */
.h1--compact{font-size:clamp(28px,4.2vw,48px);line-height:1.1}
/* на всякий случай базовый H2 (для ориентира) */
h2{font-size:clamp(22px,3vw,32px);line-height:1.2}
.hero h1{font-size:clamp(28px,4.2vw,48px);line-height:1.1}
.br-md{display:none}
@media (min-width: 900px){ .br-md{display:block} }
/* ==== MOBILE FIX (≤ 640px) ==== */
@media (max-width:640px){
  .container{padding:0 14px}
  .site-header{
    position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eee;
  }
  .header-inner{
    display:grid;
    grid-template-columns: 1fr 56px;   /* лого | соц-иконки */
    grid-template-rows: auto auto;     /* меню отдельной строкой */
    align-items:center;gap:8px;
  }
  .header-inner .logo img{height:32px;width:auto;display:block}
  .header-inner .social{justify-content:flex-end}
  .header-inner .nav{
    grid-column:1/3;                   /* меню на второй строке, на всю ширину */
    display:flex;flex-wrap:wrap;justify-content:space-between;
    column-gap:10px;row-gap:4px;margin-top:2px;
  }
  .nav a{font-size:12px;padding:2px 6px;line-height:1.2}
  .nav a .line{display:block;text-align:center} /* названия в две строки остаются */

  /* hero компактнее + отступ от шапки */
  .hero{padding-top:8px}
  .hero h1{font-size:clamp(22px,7vw,30px);line-height:1.1}
  .hero .lead{font-size:15px}
  .btn.btn-dark{width:100%;text-align:center}
}

/* планшеты 641–900px — тоже меню вторым рядом, но крупнее */
@media (min-width:641px) and (max-width:900px){
  .header-inner{
    grid-template-columns: 1fr 64px;grid-template-rows:auto auto;gap:10px;
  }
  .header-inner .nav{
    grid-column:1/3;justify-content:space-between;column-gap:12px;row-gap:6px;
  }
  .nav a{font-size:13px;padding:3px 7px}
}
/* Двухстрочные подписи в хэдере (как было) */
.nav.nav--twolines a{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; line-height:1.2;
}
.nav.nav--twolines a .line{display:block}

/* <<< НОВОЕ >>> */
/* По умолчанию (десктоп) бургер скрыт — чтобы не ломать шапку */
.menu-toggle{display:none}

/* Мобильная шапка (<=640px) */
@media (max-width:640px){
  .site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eee}

  /* небольшой внутренний отступ контейнера, чтобы логотип не прилипал */
  .container{padding:0 16px}

  /* сетка шапки: логотип | кнопка | иконки справа */
  .header-inner{
    display:grid;
    grid-template-columns:auto auto 1fr;
    align-items:center; gap:10px; padding:8px 0;
  }

  /* показываем кнопку только на мобайле */
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    padding:6px 10px; border-radius:12px; border:1px solid #ddd; background:#fff;
    font-size:14px; line-height:1; cursor:pointer;
  }

  /* десктоп-меню прячем на мобайле */
  .header-inner .nav{display:none}

  /* иконки вправо */
  .social{display:flex; gap:10px; justify-content:flex-end; margin-left:auto}
  .social img{width:24px;height:24px;max-width:none}

  /* выпадающее мобильное меню */
  .mobile-nav{
    position:fixed; left:16px; right:16px; top:60px;
    background:#fff; border:1px solid #eee; border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.06); padding:6px 0; z-index:1001;
  }
  .mobile-nav a{display:block; padding:14px 16px; text-align:center; font-size:18px; line-height:1.2}
  .mobile-nav a.active{background:#f5f5f5; border-radius:10px}

  /* компактнее hero и равномерные отступы */
  .hero{padding-top:10px}
  .hero h1{font-size:clamp(24px,7vw,30px); line-height:1.1}
  .hero .lead{font-size:15px}
  .btn.btn-dark{width:100%; text-align:center}
}
/* фикс-футер */
.site-footer{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 900; background:#fff; border-top:1px solid #eee;
}
/* чтобы контент не уезжал под футер */
body{padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));}
.site-footer .footer-bar{min-height:64px;}

/* iOS safe-area */
@supports(padding: max(0px)){
  .site-footer .footer-bar{padding-bottom: max(16px, env(safe-area-inset-bottom));}
}
/* === MOBILE header tidy: logo отступ, иконки вправо ===================== */
@media (max-width:640px){
  .header-inner{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:10px 0;
  }
  .header-inner .logo{ padding-left:8px; }           /* можно 10–12px */
  .header-inner .logo img{ display:block; height:28px; width:auto; }

  .menu-toggle{ justify-self:start; }

  .social{
    margin-left:0;
    justify-self:end;              /* прижать к правому краю */
    display:flex; gap:12px;
  }
  .social a{ width:26px; height:26px; display:inline-flex; }
  .social img{ width:100%; height:100%; object-fit:contain; background:transparent; filter:none; }
}
/* === MOBILE ONLY: tidy header & footer spacing ================================= */
@media (max-width:640px){

  /* HEADER: один ряд, логотип слева, справа "Меню" + иконки */
  .header-inner{
    display:flex;                /* переопределяем grid -> flex на мобиле */
    align-items:center;
    gap:12px;
    padding:10px 0;
  }
  .header-inner .logo{ padding-left:10px; }         /* отлепить от края */
  .header-inner .logo img{ display:block; height:28px; width:auto; }

  /* спрятанное десктоп-меню и пр. не трогаем; моб-меню кнопка уходит вправо */
  .menu-toggle{
    margin-left:auto;            /* толкаем кнопку "Меню" вправо */
  }

  /* иконки — прямо за кнопкой "Меню", прижаты к правому краю */
  .social{
    display:flex;
    gap:12px;
    margin-right:10px;           /* отступ от правого края экрана */
  }
  .social a{
    display:inline-flex;
    width:26px; height:26px;
  }
  .social img{
    width:100%; height:100%;
    object-fit:contain;
    background:transparent;      /* убираем "чёрное пятно" у WhatsApp */
    filter:none;
  }

  /* FOOTER: логотипы слева отлепить, иконки — от правого края */
  .footer-bar{
    padding-top:12px; padding-bottom:12px; /* безопасная вертикаль */
  }
  .footer-left{ padding-left:12px; }
  .footer-right{
    padding-right:12px;
    display:flex; gap:12px; align-items:center;
  }
  .footer-right img{ width:24px; height:24px; display:block; }
}
/* ===== Mobile header fix: logo слева, Меню + соц-иконки справа ===== */
@media (max-width: 640px) {

  /* контейнер шапки — в одну строку */
  .header-inner{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
  }

  /* нав на мобилке скрыт (как и было) */
  .header-inner .nav{ display:none; }

  /* логотип делает «прокладку» и уводит всё остальное вправо */
  .header-inner .logo{ margin-right:auto; }

  /* кнопка Меню + иконки — компактно справа */
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
    line-height:1;
  }

  .social{
    display:flex;
    gap:12px;         /* расстояние между иконками */
    margin-left:8px;  /* небольшой отступ от кнопки Меню */
  }

  .social a{
    display:inline-flex;
    width:28px;
    height:28px;
  }
  .social img{
    width:28px;
    height:28px;
    display:block;
  }

  /* внутренние отступы контейнера (моб) — чтобы логотип не лип к краям */
  .container{ padding-left:16px; padding-right:16px; }
}
/* =========================================================
   MOBILE FIXES (≤640px): header right-align + footer overlap
   ========================================================= */
@media (max-width:640px){

  /* --- HEADER: жёстко перебиваем старую grid-верстку --- */
  .header-inner{
    display:flex !important;            /* вместо grid */
    grid-template:none !important;
    align-items:center;
    flex-wrap:nowrap;                   /* чтобы иконки не падали на новую строку */
    gap:10px;
  }
  .header-inner .nav{ display:none !important; }

  .header-inner .logo{
    margin-right:auto !important;       /* логотип слева, всё остальное вправо */
    flex:0 0 auto;
  }

  /* кнопка "Меню" компактнее, не даём переноситься */
  .header-inner > .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:6px 12px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
    line-height:1;
    flex:0 0 auto;
  }

  /* соц-иконки справа, в одну линию */
  .social--header{
    display:flex !important;
    gap:12px;
    margin-left:8px;
    flex:0 0 auto;
  }
  .social--header a{
    display:inline-flex;
    width:28px;
    height:28px;
  }
  .social--header img{
    width:28px; height:28px; display:block;
  }

  /* чуть шире боковые поля, чтобы логотип не лип */
  .container{ padding-left:16px; padding-right:16px; }

  /* --- FOOTER: добавляем "подпорку" под фикс-футер --- */
  :root{ --footer-mobile-h: 72px; }     /* подгони, если у тебя футер выше/ниже */

  .site-footer .footer-bar{
    min-height:var(--footer-mobile-h);
  }

  /* добавляем место снизу, чтобы контент не прятался под футер */
  body, .site-main{
    padding-bottom: calc(var(--footer-mobile-h) + env(safe-area-inset-bottom)) !important;
  }
}