/* Общие шапка и подвал — по кадрам Figma «top menu desktop» (33:296),
   «top menu desktop (black theme)» (33:413) и «footer 1» (56:192).

   Файл подключается на всех страницах: до этого у главной и у каталога
   были свои разные подвалы, а фирменного — с телефоном, почтой
   и соцсетями — не было ни на одной. */

/* ---------- соцсети ---------- */

.ve-socials{
  display:flex;
  align-items:center;
  gap:8px;

  /* Иконки из макета — сплошной круг с вырезанным знаком, поэтому цвет
     выреза равен подложке под иконкой. У ВКонтакте и Instagram знак
     нарисован этим же цветом: их в макете не было, дорисовывали сами. */
  --ve-social-knockout: var(--vech-brown);
}

[data-theme='dark'] .ve-socials{
  --ve-social-knockout: var(--vech-black);
}

.ve-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--vech-antique);
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}

.ve-social:hover{
  transform:translateY(-1px);
  opacity:.85;
}

.ve-social svg{
  display:block;
  width:100%;
  height:auto;
}

/* В подвале иконки идут кружками 32, в шапке — 20 в рамке 40×40 */
.ve-socials--footer .ve-social{ width:32px; }

.ve-socials--header .ve-social{
  width:40px;
  height:40px;
  border:1px solid color-mix(in srgb, var(--vech-antique) 45%, transparent);
  border-radius:11px;
}

.ve-socials--header .ve-social svg{ width:20px; }

.ve-socials--header{ gap:5px; }

/* ---------- подвал ---------- */

/* Числа сняты с собранной страницы макета (кадр 2010:773, полоса
   подвала начинается на y=1926):
     слоган      x=50  отступ сверху 75, Cinzel 33
     иконки      x=50  отступ 193, пять штук по 32 с шагом 40
     контакты    x=50  отступ 236, Montserrat 500 14
     колонки     x=764 и x=1087, отступ 157, Montserrat 400 18, шаг 26
     разделитель x=1054, высота 118
     линия       x=50  отступ 327, ширина 1340
     реквизиты   отступ 377, по центру, Montserrat 400 14           */

.ve-footer{
  padding:75px 0 28px;
  background:var(--vech-brown);
  color:var(--vech-antique);
}

.ve-footer__inner,
.ve-footer__legal{
  max-width:1440px;
  margin:0 auto;
  padding-left:clamp(16px, 3.47vw, 50px);
  padding-right:clamp(16px, 3.47vw, 50px);
}

.ve-footer__inner{
  display:grid;
  grid-template-columns:minmax(0, 1fr) max-content max-content;
  align-items:start;
}

/* --- левая часть --- */

.ve-footer__slogan{
  position:relative;
  margin:0;
  padding-left:32px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(22px, 2.3vw, 33px);
  line-height:1.05;
  letter-spacing:var(--display-tracking);
  color:var(--vech-antique);
}

.ve-footer__candle{
  position:absolute;
  left:0;
  top:0;
  width:19px;
  color:var(--vech-antique);
}

.ve-footer__candle svg{
  display:block;
  width:100%;
  height:auto;
}

/* Иконки идут на 118 ниже верха слогана */
.ve-footer__brand .ve-socials{ margin-top:49px; }

.ve-footer__contacts{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:11px;
}

.ve-footer__phone,
.ve-footer__mail{
  color:var(--vech-antique);
  font-size:14px;
  font-weight:500;
  line-height:1.15;
  text-decoration:none;
  width:fit-content;
}

.ve-footer__phone:hover,
.ve-footer__mail:hover{ text-decoration:underline; }

/* --- колонки ссылок --- */

.ve-footer__links{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:82px;
  font-size:clamp(15px, 1.25vw, 18px);
  line-height:1;
}

.ve-footer__links a{
  color:var(--vech-antique);
  text-decoration:none;
  opacity:.94;
}

.ve-footer__links a:hover{ opacity:1; text-decoration:underline; }

.ve-footer__links--company{
  margin-left:32px;
  padding-left:33px;
  border-left:1px solid color-mix(in srgb, var(--vech-antique) 35%, transparent);
}

/* --- реквизиты --- */

.ve-footer__legal{
  margin-top:50px;
  padding-top:34px;
  border-top:1px solid color-mix(in srgb, var(--vech-antique) 35%, transparent);
  font-size:14px;
  line-height:1.4;
  text-align:center;
  color:var(--vech-antique);
}

@media (max-width: 1080px){
  .ve-footer__inner{
    grid-template-columns:minmax(0, 1fr) max-content;
    gap:28px;
  }

  .ve-footer__brand{ grid-column:1 / -1; }
  .ve-footer__links{ margin-top:0; }
}

@media (max-width: 700px){
  .ve-footer{ padding-top:36px; }

  .ve-footer__inner{
    grid-template-columns:minmax(0, 1fr);
    gap:22px;
  }

  .ve-footer__slogan{ font-size:22px; }
  .ve-footer__brand .ve-socials{ margin-top:22px; }

  .ve-footer__links--company{
    margin-left:0;
    padding-left:0;
    border-left:0;
  }

  .ve-footer__legal{
    margin-top:28px;
    padding-top:20px;
    text-align:left;
  }
}

/* ---------- шапка ---------- */

/* Числа из кадра 2010:773: полоса 83, логотип 173×38 на x=50,
   меню 18, иконки 40×40 со скруглением 6, «Рассчитать» 128×40,
   переключатель 40×40 без подписи. Подпись была раньше и вылезала
   за кнопку — в этой версии макета её нет. */

.ve-hdr{
  /* Обычный поток, а не sticky: на body стоит overflow-x:hidden, из-за
     него body становится своим контейнером прокрутки и sticky ломается —
     шапка уезжала вверх вместе со страницей. В макете это и так просто
     полоса сверху, поверх содержимого она нигде не висит. */
  position:relative;
  z-index:60;
  background:var(--vech-brown);
  color:var(--vech-antique);
}

.ve-hdr__row{
  display:grid;
  grid-template-columns:auto auto auto 1fr;
  align-items:center;
  gap:clamp(14px, 1.8vw, 34px);
  max-width:1440px;
  margin:0 auto;
  min-height:83px;
  padding:0 clamp(16px, 3.47vw, 50px);
}

.ve-hdr .ve-hdr__brand{
  display:block;
  width:173px;
  max-width:40vw;
  color:var(--vech-antique);
}

.ve-hdr__brand svg{
  display:block;
  width:100%;
  height:auto;
}

.ve-hdr__nav{
  display:flex;
  align-items:center;
  gap:clamp(12px, 1.6vw, 30px);
}

.ve-hdr .ve-hdr__link{
  color:var(--vech-antique);
  font-size:clamp(15px, 1.25vw, 18px);
  line-height:1.2;
  text-decoration:none !important;
  white-space:nowrap;
  opacity:.94;
  transition:opacity .2s var(--ease);
}

.ve-hdr .ve-hdr__link:hover{ opacity:1; }

.ve-hdr__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-left:auto;
}

/* Через .ve-hdr, чтобы перебить общее правило обёртки .vc-wrap a
   с color:inherit — из-за него надпись на кнопке красилась в цвет
   шапки и сливалась с её светлой заливкой. */
.ve-hdr .ve-hdr__calc{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:128px;
  height:40px;
  padding:0 18px;
  border-radius:6px;
  background:var(--vech-antique);
  color:var(--vech-brown);
  font-weight:700;
  font-size:12px;
  letter-spacing:-0.02em;
  text-decoration:none !important;
  white-space:nowrap;
  transition:transform .2s var(--ease);
}

.ve-hdr .ve-hdr__calc:hover{ transform:translateY(-1px); }

.ve-hdr__theme{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  padding:0;
  border:1px solid color-mix(in srgb, var(--vech-antique) 55%, transparent);
  border-radius:6px;
  background:transparent;
  color:var(--vech-antique);
  cursor:pointer;
  transition:background .2s var(--ease);
}

.ve-hdr__theme:hover{ background:color-mix(in srgb, var(--vech-antique) 12%, transparent); }

.ve-hdr__theme svg{
  width:18px;
  height:18px;
}

/* --- бургер и шторка --- */

.ve-hdr__burger,
.ve-hdr__backdrop,
.ve-hdr__menu-head{ display:none; }

.ve-hdr__menu{ display:contents; }

@media (max-width: 1180px){
  /* Иконки соцсетей в шапке узкого экрана не помещаются, а в шторке
     они дублировали бы подвал — поэтому просто прячем. */
  .ve-hdr .ve-socials--header{ display:none; }
}

@media (max-width: 1024px){
  .ve-hdr__row{
    grid-template-columns:auto 1fr;
    min-height:70px;
  }

  .ve-hdr__burger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    margin-left:auto;
    padding:0 10px;
    border:0;
    background:transparent;
    cursor:pointer;
  }

  .ve-hdr__burger span{
    display:block;
    height:2px;
    border-radius:2px;
    background:var(--vech-antique);
  }

  .ve-hdr__backdrop{
    position:fixed;
    inset:0;
    z-index:70;
    background:rgba(0,0,0,.45);
  }

  .ve-hdr__backdrop[hidden]{ display:none; }

  .ve-hdr__menu{
    position:fixed;
    top:0;
    right:0;
    z-index:80;
    display:flex;
    flex-direction:column;
    gap:26px;
    width:min(262px, 84vw);
    height:100%;
    padding:18px 22px 28px;
    background:var(--vech-brown);
    transform:translateX(100%);
    transition:transform .28s var(--ease);
    overflow-y:auto;
  }

  .ve-hdr__menu.is-open{ transform:translateX(0); }

  .ve-hdr__menu-head{
    display:flex;
    justify-content:flex-end;
  }

  .ve-hdr__close{
    position:relative;
    width:34px;
    height:34px;
    border:0;
    background:transparent;
    cursor:pointer;
  }

  .ve-hdr__close span{
    position:absolute;
    left:6px;
    right:6px;
    top:50%;
    height:2px;
    background:var(--vech-antique);
  }

  .ve-hdr__close span:first-child{ transform:rotate(45deg); }
  .ve-hdr__close span:last-child{ transform:rotate(-45deg); }

  .ve-hdr__nav{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  .ve-hdr .ve-hdr__link{ font-size:17px; }

  .ve-hdr .ve-socials--header{
    display:flex;
    gap:10px;
  }

  .ve-hdr__actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin:auto 0 0;
  }

  .ve-hdr .ve-hdr__calc{ width:100%; height:46px; font-size:14px; }
  .ve-hdr__theme{ width:100%; flex:0 0 46px; height:46px; }
}