/* ТестЭлектро — меню «Продукция». Стили.
   Все селекторы начинаются с .tm-menu, поэтому не пересекаются со стилями сайта.
   Шрифт: PT Sans (подключается в <head>, см. README). Ширину меняйте в max-width. */

.tm-menu{
  --tm-navy:#21345e;
  --tm-ink:#eef2fa;
  --tm-ink-dim:#b3c1dc;
  --tm-bus:#c9d6ef;    /* шина и контакты в покое */
  --tm-dead:#4a6498;   /* ветка без «напряжения» */
  --tm-live:#ecc98f;   /* ветка под «напряжением» */
  --tm-lamp-a:#f1d54e;
  --tm-lamp-b:#5cc283;
  --tm-lamp-c:#ea6a62;
  --tm-swing:cubic-bezier(.3,1.35,.5,1);
  width:100%;max-width:330px;padding:18px 16px 20px 14px;
  background:var(--tm-navy);color:var(--tm-ink);border-radius:6px;
  font:400 14px/1.3 "PT Sans","Segoe UI",Arial,sans-serif;
}
.tm-menu,.tm-menu *{box-sizing:border-box}
.tm-menu ul{list-style:none;margin:0;padding:0}
.tm-menu li{margin:0;padding:0}
.tm-menu a{text-decoration:none}

.tm-menu .tm-title{margin:0 0 16px 6px;font-size:18px;line-height:1.3;font-weight:700;letter-spacing:.01em}

/* ——— шина и заземление ——— */
.tm-menu .tm-body{position:relative;padding-bottom:20px}
.tm-menu .tm-body::before{content:"";position:absolute;left:7px;top:-4px;bottom:19px;width:3px;border-radius:2px;background:var(--tm-bus)}
.tm-menu .tm-gnd{position:absolute;left:-1px;bottom:0;width:18px;height:16px;color:var(--tm-bus)}

/* ——— раздел ——— */
.tm-menu .tm-cell{position:relative;--tm-c:var(--tm-dead)}
.tm-menu .tm-cell.is-live{--tm-c:var(--tm-live)}

.tm-menu .tm-row{position:relative;display:grid;grid-template-columns:30px 30px 1fr 22px;min-height:36px}
.tm-menu .tm-cell--leaf > .tm-row{grid-template-columns:30px 30px 1fr}
.tm-menu .tm-row.is-toggle{cursor:pointer}

/* ——— стрелка справа: явный признак, что раздел раскрывается ——— */
.tm-menu .tm-chev{align-self:start;width:22px;height:36px;position:relative;color:var(--tm-ink-dim);transition:color .2s}
.tm-menu .tm-chev::before{
  content:"";position:absolute;left:6px;top:12px;width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .35s ease,top .35s ease;
}
.tm-menu .tm-cell.is-open > .tm-row .tm-chev::before{transform:rotate(-135deg);top:16px}
.tm-menu .tm-row.is-toggle:hover .tm-chev{color:var(--tm-live)}
.tm-menu .tm-row.is-toggle:hover .tm-switch::after{border-color:var(--tm-live)}
.tm-menu .tm-cell:not(.is-live) > .tm-row.is-toggle:hover .tm-blade{transform:rotate(-18deg)}
.tm-menu .tm-tap{align-self:start;margin:17px 0 0 8px;width:25px;height:2px;background:var(--tm-bus)}
.tm-menu .tm-cell.is-open > .tm-row::after{ /* ответвление вниз от разъединителя */
  content:"";position:absolute;left:58px;top:18px;bottom:0;width:2px;
  background:var(--tm-c);transition:background-color .35s ease .1s;
}

/* ——— разъединитель ——— */
.tm-menu .tm-switch{position:relative;width:30px;height:30px;margin:3px 0 0;padding:0;border:0;background:none;border-radius:4px;cursor:pointer;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.tm-menu .tm-switch::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--tm-bus)}
.tm-menu .tm-switch::after{
  content:"";position:absolute;left:24px;top:10px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;
  border:2px solid var(--tm-dead);background:var(--tm-navy);
  transition:background-color .3s ease .2s,border-color .3s ease .2s;
}
.tm-menu .tm-blade{
  position:absolute;left:3px;top:14px;width:24px;height:2px;border-radius:1px;background:var(--tm-bus);
  transform-origin:0 50%;transform:rotate(-30deg);
  transition:transform .45s var(--tm-swing),background-color .3s ease .15s;
}
.tm-menu .tm-cell.is-live .tm-blade{transform:none;background:var(--tm-live)}
.tm-menu .tm-cell.is-live .tm-switch::after{background:var(--tm-live);border-color:var(--tm-live)}
.tm-menu .tm-cell.is-current-section.is-live .tm-switch::after{box-shadow:0 0 0 3px rgba(236,201,143,.22),0 0 10px rgba(236,201,143,.7)}

/* раздел без подпунктов: линия кончается точкой */
.tm-menu .tm-end{position:relative;height:36px}
.tm-menu .tm-end::before{content:"";position:absolute;left:0;top:17px;width:30px;height:2px;background:var(--tm-bus)}
.tm-menu .tm-end::after{content:"";position:absolute;left:26px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--tm-live)}

/* ——— название раздела ——— */
.tm-menu .tm-link{display:block;padding:9px 0 9px 11px;color:var(--tm-ink-dim);font-size:14px;line-height:18px;font-weight:700;transition:color .2s}
.tm-menu .tm-link:hover{color:var(--tm-live)}
.tm-menu .tm-cell.is-current-section > .tm-row > .tm-link{color:#fff}

/* ——— подпункты ——— */
.tm-menu .tm-feed{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease,visibility 0s}
.tm-menu.is-ready .tm-cell:not(.is-open) > .tm-feed{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .4s ease,visibility 0s .4s}
.tm-menu .tm-feed > ul{min-height:0;overflow:hidden;margin-left:58px}
.tm-menu .tm-cell.is-open > .tm-feed > ul{padding-bottom:10px}

.tm-menu .tm-feed li{position:relative;padding-left:26px}
.tm-menu .tm-feed li::before{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--tm-c);transition:background-color .35s ease}
.tm-menu .tm-feed li:last-child::before{height:19px}
.tm-menu .tm-feed li::after{content:"";position:absolute;left:2px;top:17px;width:13px;height:2px;background:var(--tm-c);transition:background-color .35s ease}
.tm-menu .tm-feed li.tm-opt::after{background:none;height:0;border-top:2px dashed var(--tm-c);transition:border-color .35s ease} /* опция — пунктиром */

.tm-menu .tm-sub{display:block;padding:8px 8px 8px 0;color:var(--tm-ink);font-size:14px;line-height:19px;opacity:.5;transition:opacity .35s ease,color .2s}
.tm-menu .tm-sub::before{ /* узел на линии */
  content:"";position:absolute;left:15px;top:14px;width:7px;height:7px;border-radius:50%;
  background:var(--tm-c);transition:background-color .35s ease,box-shadow .5s ease;
}
.tm-menu .tm-sub:hover{color:var(--tm-live)}
.tm-menu .tm-opt-tag{margin-left:6px;font-size:13px;font-style:italic;color:var(--tm-live);opacity:.85}

/* при замыкании подпункты «включаются» сверху вниз */
.tm-menu .is-live .tm-sub{opacity:1;transition-delay:calc(var(--i,0) * 80ms + 160ms),0s}
.tm-menu .is-live .tm-feed li::before,
.tm-menu .is-live .tm-feed li::after,
.tm-menu .is-live .tm-sub::before{transition-delay:calc(var(--i,0) * 80ms + 160ms)}

/* ——— текущая страница: яркий узел и три лампы фаз ——— */
.tm-menu .is-current > .tm-sub{font-weight:700;color:#fff}
.tm-menu .is-current > .tm-sub::before{left:14px;top:13px;width:9px;height:9px}
.tm-menu .is-live .is-current > .tm-sub::before{box-shadow:0 0 0 3px rgba(236,201,143,.22),0 0 10px rgba(236,201,143,.7)}

.tm-menu .tm-lamps{display:inline-flex;gap:4px;margin-left:9px;vertical-align:1px}
.tm-menu .tm-lamps i{display:block;width:7px;height:7px;border-radius:50%;background:var(--l);opacity:.2;transition:opacity .5s ease,box-shadow .5s ease}
.tm-menu .tm-lamps i:nth-child(1){--l:var(--tm-lamp-a);--n:1}
.tm-menu .tm-lamps i:nth-child(2){--l:var(--tm-lamp-b);--n:2}
.tm-menu .tm-lamps i:nth-child(3){--l:var(--tm-lamp-c);--n:3}
.tm-menu .is-live .tm-lamps i{opacity:1;box-shadow:0 0 7px 1px var(--l);transition-delay:calc(var(--tm-ld,.84s) + var(--n) * .16s)}
.tm-menu .tm-lamps.is-off i{opacity:.2;box-shadow:none} /* лампы только что вставлены — сейчас загорятся */

/* ——— доступность и служебное ——— */
.tm-menu .tm-link:focus-visible,
.tm-menu .tm-sub:focus-visible,
.tm-menu .tm-switch:focus-visible{outline:2px solid var(--tm-live);outline-offset:2px}

.tm-menu.is-init,.tm-menu.is-init *,.tm-menu.is-init *::before,.tm-menu.is-init *::after{transition:none !important}
@media (prefers-reduced-motion:reduce){
  .tm-menu *,.tm-menu *::before,.tm-menu *::after{transition:none !important}
}
/* ===== Раскладка страницы каталога: узкая колонка меню, широкий контент ===== */
@media (min-width: 992px) {
  .container.main__wrapper{
    --tm-side: 330px;     /* ширина меню */
    --tm-gap: 48px;       /* отступ между меню и контентом */
    column-gap: var(--tm-gap);
    grid-template-columns: var(--tm-side) minmax(0, 1fr);
  }
  .container.main__wrapper > .main__sidebar{
    flex: 0 0 var(--tm-side);
    width: var(--tm-side);
    min-width: 0;
    max-width: var(--tm-side);
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .container.main__wrapper > .main__sidebar > .tm-menu{ max-width: none; }
  .container.main__wrapper > :not(.main__sidebar){
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    margin-left: 0;
  }
}