/* ═══════════════ ЕДИНАЯ ШАПКА — стили для _header.html ═══════════════
   Подключается на страницах БЕЗ site.css (service/page/legal/reviews_all),
   чтобы общая шапка выглядела как на главной.
   about и главная берут стили шапки из site.css (там же).
   ТОЛЬКО шапка + переменные; без body/zoom/.hero/.section — чтобы не ломать
   собственные стили этих страниц.
   Лого 77px → высота шапки ~88px, как на главной (там body zoom:.8 от 96px). */
:root{
  --line:rgba(203,174,120,.2);
  --gold:#cbae78; --gold-2:#e8d2a0; --gold-deep:#9a7c45;
  --text:#ece3d2; --muted:#a6987e; --head:#f7f0e0;
}

/* кнопки шапки */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:0;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  cursor:pointer;border:1px solid transparent;transition:.25s;font-family:'Montserrat',sans-serif;
  text-decoration:none;white-space:nowrap}
.btn--ghost{border-color:rgba(203,174,120,.55);color:#ece3d2;background:transparent}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}

/* фиксированная шапка: прозрачная поверх фото, фон при скролле */
header{position:fixed;top:0;left:0;right:0;width:100%;z-index:50;background:transparent;
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
header.scrolled{background:rgba(11,11,11,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.4)}
header .nav{display:flex;align-items:center;justify-content:space-between;
  max-width:1480px;margin:0 auto;padding:6px 40px;min-height:auto;gap:24px}
header .brand{display:inline-flex;align-items:center;text-decoration:none}
header .brand img{height:77px;width:auto;display:block}
header .menu{display:flex;gap:30px;font-size:15px;color:#d9cdb6;flex:1;justify-content:center;
  font-family:'Montserrat',sans-serif;list-style:none}
header .menu a{color:#d9cdb6;text-decoration:none;transition:color .2s;white-space:nowrap}
header .menu a:hover{color:var(--gold)}

/* мега-меню «Каталог» */
.has-mega{position:static;display:inline-flex;align-items:center}
.mega-trigger{position:relative;display:inline-flex;align-items:center;gap:7px;color:#d9cdb6;
  text-decoration:none;font-size:15px;cursor:pointer;
  background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;
  background-position:left 100%;background-size:0% 1.5px;transition:background-size .4s ease,color .25s}
.mega-trigger::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .25s,border-color .25s}
.has-mega.open .mega-trigger{color:var(--gold);background-size:100% 1.5px}
.has-mega.open .mega-trigger::after{transform:rotate(-135deg);margin-top:2px}
.mega{position:absolute;left:0;right:0;top:100%;z-index:40;background:rgba(11,11,11,.96);
  border-top:1px solid rgba(203,174,120,.2);opacity:0;visibility:hidden;pointer-events:none;
  clip-path:inset(0 0 100% 0);transform-origin:top;
  transition:clip-path .5s cubic-bezier(.22,.61,.36,1),opacity .35s ease,visibility .5s}
.mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:60px}
.has-mega.open .mega{opacity:1;visibility:visible;clip-path:inset(0 0 0 0);pointer-events:auto}
.mega-backdrop{position:fixed;inset:0;z-index:38;background:rgba(0,0,0,.66);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility .4s}
.has-mega.open .mega-backdrop{opacity:1;visibility:visible}
.cat-mega-in{display:flex;gap:0;max-width:1480px;width:100%;align-items:stretch;margin:0 auto}
.cat-cols{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 46px;padding:42px 52px;align-content:start}
.cat-col{display:flex;flex-direction:column;gap:24px;border-top:1px solid var(--gold);padding-top:22px}
.cat-item{display:flex;flex-direction:column;gap:5px;text-decoration:none;align-items:flex-start}
.ci-h{font-family:'Montserrat',sans-serif;font-weight:600;font-size:17px;letter-spacing:.01em;
  color:#f3eee4;display:flex;align-items:center;width:100%;justify-content:space-between;transition:color .2s}
.ci-arr{color:var(--gold);font-size:15px;opacity:.5;transition:transform .2s,opacity .2s}
.ci-s{font-size:12.5px;color:#a99f8d;line-height:1.5;max-width:280px}
.cat-item:hover .ci-h{color:var(--gold)}
.cat-item:hover .ci-arr{transform:translateX(4px);opacity:1}
.cat-promo{flex:0 0 320px;background-size:cover;background-position:center;
  padding:46px 38px;display:flex;flex-direction:column;justify-content:center;color:#fff}
.cp-kicker{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:11px;margin-bottom:14px}
.cp-title{font-family:'Playfair Display',serif;font-weight:500;font-size:32px;line-height:1.05;color:#fff;margin-bottom:20px;white-space:nowrap}
.cp-text{font-size:14px;line-height:1.6;color:#d6cab2;margin-bottom:28px;max-width:240px}
.cp-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:transparent;border:1px solid var(--gold);color:var(--gold);
  padding:14px 26px;font-family:'Montserrat',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .25s,color .25s}
.cp-btn .arrow{transition:transform .2s;width:26px;height:12px;flex:none}
.cp-btn:hover{background:var(--gold);color:#161009}
.cp-btn:hover .arrow{transform:translateX(4px)}

.nav-right{display:flex;align-items:center;gap:22px}
.nav-phone{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--head);
  letter-spacing:.02em;white-space:nowrap;text-decoration:none}
.nav-phone .np-ic{width:16px;height:16px;object-fit:contain;flex:none}
.nav-phone:hover{color:var(--gold)}

/* бургер (скрыт на десктопе) */
.burger{display:none;flex:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:9px;background:none;border:0;cursor:pointer}
.burger span{display:block;width:100%;height:2px;background:var(--head);transition:transform .3s ease,opacity .3s ease}
.menu-phone{display:none}

@media(max-width:1000px){
  header .brand img{height:60px}
  header .nav{gap:12px}
  .nav-right{display:none}
  .burger{display:flex}
  header{position:relative}
  header .menu{position:absolute;top:100%;left:0;right:0;z-index:30;display:none;
    flex-direction:column;justify-content:flex-start;gap:0;
    background:rgba(11,11,11,.97);backdrop-filter:blur(6px);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 28px 16px}
  header.menu-open .menu{display:flex}
  header .menu a{padding:14px 2px;font-size:15px;color:#e7dcc4;border-bottom:1px solid rgba(203,174,120,.12)}
  header .menu a:last-child{border-bottom:0}
  .has-mega{display:block;width:100%}
  .mega-trigger{display:block;width:100%}
  .mega-trigger::after{display:none}
  .mega{display:none}
  .menu-phone{display:block;color:var(--gold);font-weight:600;letter-spacing:.02em;text-decoration:none;padding:14px 2px}
  header.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.menu-open .burger span:nth-child(2){opacity:0}
  header.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}