/* =========================
   TOKENS
   ========================= */
:root{
  --charcoal:#0F0E0D; --panel:#121110;
  --sand:#F5EDE1; --amber:#FFB21A; --rust:#B85C38;
  --text:#F8F5F2; --text2:#C9C3BA; --line:#262321;
  --container:min(1200px,92vw);

  /* LOGO — 1.5x от прежнего */
  --logoW: 200px;      /* ширина колонки логотипа */
  --logoH: 63px;       /* высота логотипа */

  /* Header layout */
  --hdrH: 44px;        /* верхняя строка (меню/переключатели) */
  --searchH: 42px;     /* нижняя строка (поиск/телефон) */
  --menuRowH: 44px;    /* высота «таба» меню и переключателей */
  --menuFS: 12.5px;    /* размер шрифта пунктов меню */
}

/* =========================
   BASE + GLOBAL BG (закат + экскаватор)
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--charcoal);color:var(--text)}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif; position:relative}
.container{width:var(--container); margin:0 auto}

/* Закатный фон + лёгкая сетка */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(900px 520px at 92% -10%, rgba(248,185,85,.35), transparent 60%),
    radial-gradient(1100px 640px at 70% 30%, rgba(255,122,0,.20), transparent 70%),
    linear-gradient(180deg,#161412 0%,#0f0e0d 65%);
  background-size:18px 18px, auto, auto, auto;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
}
/* Экскаватор на фоне (заходит под хедер) */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url('/img/3m.png') right center/cover no-repeat;
  opacity:.28; filter:contrast(1.08) brightness(1.18) saturate(1.05) drop-shadow(0 2px 0 rgba(0,0,0,.12));
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 90vh,transparent 130vh);
          mask-image:linear-gradient(to bottom,#000 0,#000 90vh,transparent 130vh);
}

/* =========================
   COMMON ELEMENTS
   ========================= */
.pill, .phone-field{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 12px; border-radius:12px; height:var(--searchH);
  background:rgba(20,18,16,.25);
  border:1px solid rgba(255,255,255,.12);
  color:#e7e0d6; text-decoration:none; white-space:nowrap;
}

/* =========================
   HEADER — 4 колонки / 2 строки
   ========================= */
.hdr{position:sticky; top:0; z-index:1000; background:transparent}
.hdr__inner{
  width:var(--container); margin:0 auto;
  display:grid;
  grid-template-columns: var(--logoW) 1fr auto auto;   /* Лого | Меню | Переключатели | E-COM */
  grid-template-rows: var(--hdrH) var(--searchH);      /* Верхняя/Нижняя строки */
  column-gap:16px; row-gap:8px;
  align-items:center;
  padding:10px 8px 8px;
}

/* расплющиваем обёртку верхнего уровня */
.hdr__top{ display:contents; }

/* —— Области сетки —— */
.brand{ grid-column:1; grid-row:1 / span 2; align-self:stretch; display:flex; align-items:center; padding:0 6px }
.nav1{  grid-column:2; grid-row:1; min-width:0; align-self:center }
.hdr__bottom{ grid-column:2; grid-row:2; }              /* поиск под меню */

/* Правая группа → дети — прямые грид-айтемы 3 и 4 колонок */
.act2{ display:contents; }
.act2__stack{
  grid-column:3; grid-row:1 / span 2; align-self:stretch;
  display:grid; grid-template-rows: var(--hdrH) var(--searchH); gap:8px;
}

/* ===== E-COMMERCE: полная подложка на две строки ===== */
.seg--cta{
  grid-column:4; grid-row:1 / span 2; align-self:stretch;
  display:flex; height:auto !important;               /* переопред. .seg {height} */
  border:1px solid rgba(255,178,26,.55) !important;
  background:rgba(20,18,16,.25) !important;
  border-radius:12px;
}
.seg--cta .seg__btn{
  flex:1 1 auto; height:100% !important; white-space:nowrap;
  display:flex; align-items:center; justify-content:center;
  padding:0 18px; border-radius:12px; font-weight:800; color:#e7e0d6; text-decoration:none;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
  border:0; background:transparent;
}
.seg--cta .seg__btn:hover{ background:rgba(255,178,26,.14); box-shadow:0 8px 22px rgba(255,178,26,.18) }
.seg--cta .seg__btn:active{ transform:translateY(1px) }

/* —— Логотип «закатный» через mask; img — фолбэк —— */
.brand__plate{position:relative; height:var(--logoH); width:100%}
.brand__plate img{height:100%; width:auto; max-width:none; display:block; transition:opacity .2s}
.brand__plate::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--amber),var(--rust));
  -webkit-mask:url('/img/gts_logo_white_transparent.webp') no-repeat left center/contain;
          mask:url('/img/gts_logo_white_transparent.webp') no-repeat left center/contain;
}
@supports (-webkit-mask-image: url("")) or (mask-image: url("")){
  .brand__plate img{opacity:0}
}
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .brand__plate::before{display:none}
}

/* ===== Сегменты (общий стиль) ===== */
.seg{
  display:flex; gap:2px; padding:2px;
  height:var(--menuRowH);                         /* стандартная высота сегментов */
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; background:rgba(20,18,16,.25); backdrop-filter:blur(6px);
}
.seg button{
  display:inline-flex; align-items:center; justify-content:center;
  height:100%; padding:0 8px; border:none; border-radius:10px;
  color:#e7e0d6; background:transparent; font-weight:700; cursor:pointer;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  font-size:var(--menuFS);
}
.seg button:hover{ background:rgba(255,178,26,.12) }
.seg button.is-active{ background:rgba(255,178,26,.18); box-shadow:0 0 0 1px rgba(255,178,26,.28) inset }

/* ===== Меню как сегменты (в одну строку) ===== */
.navseg{
  display:flex; align-items:center; justify-content:center;
  height:var(--menuRowH); white-space:nowrap; flex-wrap:nowrap; overflow:hidden;
  gap:2px; padding:2px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; background:rgba(20,18,16,.25); backdrop-filter:blur(6px);
}
.navseg__btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:100%; padding:0 8px; border:none; border-radius:10px;
  color:#e7e0d6; background:transparent; text-decoration:none;
  font-weight:700; font-size:var(--menuFS); letter-spacing:.1px;
  cursor:pointer; transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.navseg__btn:hover{ background:rgba(255,178,26,.12) }
.navseg__btn:active{ transform:translateY(1px) }

/* ===== Выпадающее меню ===== */
.navseg__item {
  position: relative;
}

.navseg__item--has-dropdown {
  position: relative;
}

.navseg__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 220px;
  background: rgba(20, 18, 16, 0.95);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.navseg__item--has-dropdown:hover .navseg__dropdown,
.navseg__item--has-dropdown .navseg__dropdown:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Защита от скрытия нашего выпадающего меню */
.navseg__item--has-dropdown .navseg__dropdown {
  display: block !important;
}

/* Дополнительная защита для меню "about" */
.navseg__item--has-dropdown[data-key="about"] .navseg__dropdown,
.navseg__dropdown[data-menu-key="about"] {
  display: block !important;
  visibility: visible !important;
  opacity: 0 !important; /* Начальное состояние - скрыто, но видимо для hover */
  pointer-events: none !important;
}

.navseg__item--has-dropdown[data-key="about"]:hover .navseg__dropdown,
.navseg__item--has-dropdown[data-key="about"] .navseg__dropdown:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.navseg__dropdown-link {
  display: block;
  padding: 10px 14px;
  color: #e7e0d6;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--menuFS);
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease;
}

.navseg__dropdown-link:hover {
  background: rgba(255, 178, 26, 0.12);
  color: var(--sand);
}

/* Блокируем выпадающие меню для пункта "ОРИГИНАЛЬНЫЕ З/Ч" */
.navseg__btn[data-key="genuine"] ~ *,
.navseg__btn[href*="genuine"] ~ *,
.navseg:has(.navseg__btn[data-key="genuine"]) > *:not(.navseg__btn[data-key="genuine"]),
.navseg:has(.navseg__btn[href*="genuine"]) > *:not(.navseg__btn[href*="genuine"]) {
  display: none !important;
}

/* Скрываем все выпадающие меню рядом с пунктом "genuine" */
.navseg__btn[data-key="genuine"] + .dropdown,
.navseg__btn[data-key="genuine"] + .submenu,
.navseg__btn[data-key="genuine"] + .menu-dropdown,
.navseg__btn[data-key="genuine"] + [class*="dropdown"],
.navseg__btn[data-key="genuine"] + [class*="submenu"],
.navseg__btn[href*="genuine"] + .dropdown,
.navseg__btn[href*="genuine"] + .submenu,
.navseg__btn[href*="genuine"] + .menu-dropdown,
.navseg__btn[href*="genuine"] + [class*="dropdown"],
.navseg__btn[href*="genuine"] + [class*="submenu"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Универсальное правило: скрываем все выпадающие меню, содержащие категории запчастей */
.navseg .dropdown:has(a[href*="categories"]),
.navseg .submenu:has(a[href*="categories"]),
.navseg .menu-dropdown:has(a[href*="categories"]),
.navseg [class*="dropdown"]:has(a[href*="categories"]),
.navseg [class*="submenu"]:has(a[href*="categories"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Скрываем выпадающие меню при наведении на элементы с текстом "ОРИГИНАЛЬНЫЕ" */
.navseg__btn:hover + .dropdown:has(a[href*="categories"]),
.navseg__btn:hover + .submenu:has(a[href*="categories"]),
.navseg__btn:hover + [class*="dropdown"]:has(a[href*="categories"]),
.navseg__btn:hover + [class*="submenu"]:has(a[href*="categories"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Переключатели/телефон (3-й столбец) */
.act2__row{ display:flex; gap:8px; align-items:center; height:var(--hdrH) }  /* верх: сегменты */
.phone-field{ height:var(--searchH) }                                       /* низ: телефон */

/* ===== Поисковая строка (второй ряд, под меню) ===== */
.hdr__bottom{ display:block }
.searchline{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  width:100%; height:var(--searchH);
  border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(20,18,16,.25); backdrop-filter:blur(6px)
}
.searchline input{
  width:100%; height:100%; padding:0 12px; border:0; outline:0; background:transparent;
  color:#e7e0d6; font:600 14px/1.2 Inter,system-ui,sans-serif
}
.searchline input::placeholder{color:#c9c3ba}
.searchline__btn{height:100%; padding:0 12px; border:0; background:transparent; color:#e7e0d6; cursor:pointer}
.searchline:focus-within{ border-color:rgba(255,178,26,.5) }

/* ===== Бургер/дровер (мобайл) ===== */
.burger{display:none; width:36px; height:28px; background:none; border:none; position:relative; cursor:pointer; margin-left:6px;
  grid-column:4; grid-row:1; justify-self:end}
.burger span{position:absolute; left:0; right:0; height:2px; background:#f1eadf; transition:.25s}
.burger span:nth-child(1){top:6px}
.burger span:nth-child(2){top:13px}
.burger span:nth-child(3){top:20px}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{position:fixed; inset:0; z-index:1200; display:grid; grid-template-columns:1fr; pointer-events:none; opacity:0; transition:opacity .2s}
.drawer[data-open]{pointer-events:auto; opacity:1}
.drawer__overlay{grid-column:1/-1; background:rgba(0,0,0,.45)}
.drawer__panel{
  position:fixed; right:0; top:0; height:100%; width:min(440px,86vw);
  background:rgba(20,18,16,.72); backdrop-filter: blur(16px) saturate(140%);
  border-left:1px solid rgba(255,255,255,.12);
  transform:translateX(100%); transition:transform .25s ease;
}
.drawer[data-open] .drawer__panel{transform:none}
.drawer__header{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid rgba(255,255,255,.08)}
.drawer__close{background:transparent; border:none; color:#e7e0d6; font-size:18px; cursor:pointer}
.drawer__body{padding:16px; display:grid; gap:12px}
.drawer__link{color:#fff; text-decoration:none; font-weight:700; padding:10px 6px}
.drawer__group{display:grid; gap:4px}
.drawer__link--parent{font-weight:800; color:var(--sand)}
.drawer__link--child{padding-left:20px; font-weight:600; font-size:0.9em; color:#cfc7bb}
.drawer__link--child:hover{color:#fff}
.drawer__footer{display:grid; gap:10px; padding:16px; border-top:1px solid rgba(255,255,255,.08)}
.seg--wide{justify-content:space-between}
.btn--full{justify-content:center}

/* =========================
   HERO / INDEX (пример)
   ========================= */
.hero{position:relative; min-height:72vh}
.hero__inner{width:var(--container); margin:0 auto; padding:76px 0 64px; position:relative; z-index:1}
.hero__title{font-family:"Space Grotesk",Inter,sans-serif; font-weight:800; font-size:clamp(40px,6vw,72px); line-height:1.06; letter-spacing:-.01em; margin:0 0 18px; color:var(--sand)}
.hero__subtitle{margin:0 0 26px; color:var(--text2); max-width:880px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.chips{display:flex; gap:12px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:14px; background:#171411; color:#d4cabe; border:1px solid #2b2723}
.benefits{display:flex; flex-wrap:wrap; gap:18px; color:var(--text2); margin:16px 0 0; padding:0; list-style:none}

.brands .container{display:flex; flex-wrap:wrap; gap:10px; padding:10px 0 46px}
.badge{padding:10px 14px; border-radius:12px; background:#181512; border:1px solid var(--line); color:#bfb8ad; font-family:ui-monospace,Menlo,Consolas,monospace}

.steps .container{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:28px 0 46px}
.step{background:#151311; border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; align-items:center; gap:16px}
.step__num{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; background:linear-gradient(140deg,var(--rust),var(--amber)); color:#241f17}

/* =========================
   FOOTER
   ========================= */
.footer{background:#0f0e0d; color:var(--text); border-top:1px solid var(--line); padding:40px 0 20px}
.footer .grid{display:grid; grid-template-areas:"menu" "contacts" "details" "copyright"; gap:30px; width:var(--container); margin:0 auto; padding:0 8px}
.footer-menu{grid-area:menu; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:30px}
.footer-menu h4{font-size:1rem; margin:0 0 12px; text-transform:uppercase; color:var(--sand); font-weight:600; padding-bottom:6px; border-bottom:1px solid var(--line)}
.footer-menu ul{list-style:none; margin:0; padding:0}
.footer-menu li{margin-bottom:10px}
.footer-menu a{color:#cfc7bb; text-decoration:none}
.footer-menu a:hover{color:#fff}
.footer-contacts{grid-area:contacts}
.footer-title{font-size:1.2rem; font-weight:700; margin:0 0 8px; text-transform:uppercase; color:var(--sand)}
.footer-languages{font-size:.9rem; color:#cfc7bb; margin:0 0 8px}
.footer-email{color:#fff; text-decoration:none}
.footer-email:hover{color:#ddd}
.footer-details{grid-area:details; display:flex; flex-direction:column; gap:20px; font-size:.9rem; color:#a7a19a}
.office-title{font-weight:600; color:#d7d0c6; font-size:.95rem}
.footer-copy{grid-area:copyright; font-size:.85rem; color:#a7a19a; text-align:center; border-top:1px solid var(--line); padding-top:18px; margin:0}

/* =========================
   ADAPTIVE
   ========================= */
@media (min-width:1440px){
  .navseg{ max-width: 1100px; margin: 0 auto; }
}
@media (max-width:1100px){
  .nav1{display:none}                 /* меню уезжает в drawer */
  .hdr__inner{
    grid-template-columns: var(--logoW) 1fr auto;      /* Лого | стек | бургер */
    grid-template-rows: var(--hdrH);                   /* нижнюю строку (поиск/тел.) скрываем */
  }
  .hdr__bottom{display:none}
  .seg--cta{display:none}             /* большая E-COM — в drawer */
  .burger{display:block}

  /* компактный логотип на мобиле */
  :root{ --logoW: 200px; --logoH: 40px; }
  
  /* Выпадающее меню не используется на мобиле - всё в drawer */
  .navseg__dropdown {
    display: none !important;
  }
}
@media (max-width:980px){
  body::after{
    background-position:center bottom; opacity:.22;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 75vh,transparent 100vh);
            mask-image:linear-gradient(to bottom,#000 0,#000 75vh,transparent 100vh);
  }
}
@media (min-width:768px){
  .footer .grid{
    grid-template-areas:"menu menu" "contacts details" "copyright copyright";
    grid-template-columns:1fr 1fr; gap:40px
  }
  .footer-menu{grid-template-columns:repeat(4,1fr)}
  .footer-details{flex-direction:row; gap:40px; justify-content:space-between}
}

.footer-menu ul{list-style:none; margin:0; padding:0}
.footer-menu li{margin-bottom:10px}
.footer-menu a{color:#cfc7bb; text-decoration:none}
.footer-menu a:hover{color:#fff}
.footer-contacts{grid-area:contacts}
.footer-title{font-size:1.2rem; font-weight:700; margin:0 0 8px; text-transform:uppercase; color:var(--sand)}
.footer-languages{font-size:.9rem; color:#cfc7bb; margin:0 0 8px}
.footer-email{color:#fff; text-decoration:none}
.footer-email:hover{color:#ddd}
.footer-details{grid-area:details; display:flex; flex-direction:column; gap:20px; font-size:.9rem; color:#a7a19a}
.office-title{font-weight:600; color:#d7d0c6; font-size:.95rem}
.footer-copy{grid-area:copyright; font-size:.85rem; color:#a7a19a; text-align:center; border-top:1px solid var(--line); padding-top:18px; margin:0}

/* =========================
   ADAPTIVE
   ========================= */
@media (min-width:1440px){
  .navseg{ max-width: 1100px; margin: 0 auto; }
}
@media (max-width:1100px){
  .nav1{display:none}                 /* меню уезжает в drawer */
  .hdr__inner{
    grid-template-columns: var(--logoW) 1fr auto;      /* Лого | стек | бургер */
    grid-template-rows: var(--hdrH);                   /* нижнюю строку (поиск/тел.) скрываем */
  }
  .hdr__bottom{display:none}
  .seg--cta{display:none}             /* большая E-COM — в drawer */
  .burger{display:block}

  /* компактный логотип на мобиле */
  :root{ --logoW: 200px; --logoH: 40px; }
  
  /* Выпадающее меню не используется на мобиле - всё в drawer */
  .navseg__dropdown {
    display: none !important;
  }
}
@media (max-width:980px){
  body::after{
    background-position:center bottom; opacity:.22;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 75vh,transparent 100vh);
            mask-image:linear-gradient(to bottom,#000 0,#000 75vh,transparent 100vh);
  }
}
@media (min-width:768px){
  .footer .grid{
    grid-template-areas:"menu menu" "contacts details" "copyright copyright";
    grid-template-columns:1fr 1fr; gap:40px
  }
  .footer-menu{grid-template-columns:repeat(4,1fr)}
  .footer-details{flex-direction:row; gap:40px; justify-content:space-between}
}