/* Единые шапка, плашка «для специалистов» и подвал (tools/chrome.py) — самодостаточно, классы stm-*.
   Подключается на всех страницах, в т. ч. со своим оформлением (протетика, документы): нужен только tokens.css. */
.stm-skip{position:absolute;left:8px;top:-60px;z-index:100;padding:10px 14px;background:var(--ink);color:#fff;font:600 14px/1.2 var(--f);border-radius:var(--r2);text-decoration:none}
.stm-skip:focus{top:8px}
.stm-top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--rule-2);font:400 15px/1.4 var(--f);color:var(--ink)}
.stm-wrap{max-width:1360px;margin:0 auto;padding:0 var(--s8);box-sizing:border-box}
.stm-top .stm-wrap{height:var(--head-h);position:relative;display:flex;align-items:center;gap:var(--s6)}
.stm-lock{display:flex;align-items:center;gap:var(--s3);flex:none}
.stm-lock a{display:flex;align-items:center;gap:var(--s3);text-decoration:none}
.stm-lock img{display:block}
.stm-lock .city{min-height:var(--tap);display:flex;align-items:center;font:600 13px/1.15 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.stm-lock .home:hover .city{color:var(--ink)}
.stm-lock .sep{width:1px;height:28px;background:var(--rule)}
.stm-lock .xg{width:104px;height:auto}
.stm-nav{display:flex;gap:var(--s1);margin-left:auto}
.stm-nav a{position:relative;display:flex;align-items:center;min-height:var(--tap);padding:0 var(--s3);color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;border-radius:var(--r1);transition:color var(--d-1) var(--ez)}
/* текущий раздел и наведение: риска 2 px под словом, как отметка на шкале */
.stm-nav a::after{content:'';position:absolute;left:var(--s3);right:var(--s3);bottom:6px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-2) var(--ez)}
.stm-nav a:hover{color:var(--ink)}
.stm-nav a:hover::after{transform:scaleX(.35);background:var(--ink-3)}
.stm-nav a[aria-current]{color:var(--ink);font-weight:600}
.stm-nav a[aria-current]::after{transform:none;background:var(--ink)}
.stm-tel{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;border-radius:var(--r2);transition:background-color var(--d-1) var(--ez)}
.stm-tel img{width:18px;height:18px;display:block}
.stm-cab,.stm-cartbtn{position:relative;display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s4);border:1px solid var(--rule-ctl);border-radius:var(--r2);background:var(--card);color:var(--ink);font:600 15px/1 var(--f);text-decoration:none;cursor:pointer;flex:none;transition:border-color var(--d-1) var(--ez),box-shadow var(--d-1) var(--ez)}
.stm-cab:hover,.stm-cartbtn:hover,.stm-menu summary:hover,.stm-tel:hover{border-color:var(--ink);box-shadow:var(--shadow-1)}
.stm-cab[hidden]{display:none}
.stm-cab .s{display:none}
.stm-cartbtn .n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--rule-2);color:var(--ink);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.stm-cartbtn.has .n{background:var(--xg);color:var(--xg-on)}
.stm-cartbtn.pulse .n{animation:pulse 420ms var(--ez)}
@keyframes pulse{40%{transform:scale(1.28)}}
/* меню разделов (< 1100 px): <details> — работает и без JS; закрытие снаружи/Escape — js/shell.js */
.stm-menu{display:none;position:static;flex:none}
.stm-menu summary{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-width:var(--tap);min-height:var(--tap);padding:0 var(--s3);border:1px solid var(--rule-ctl);border-radius:var(--r2);background:var(--card);font:600 15px/1 var(--f);color:var(--ink);cursor:pointer;list-style:none;transition:border-color var(--d-1) var(--ez),box-shadow var(--d-1) var(--ez)}
.stm-menu summary::-webkit-details-marker{display:none}
.stm-menu .bars{position:relative;width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;transition:border-color var(--d-1) var(--ez)}
.stm-menu .bars::before,.stm-menu .bars::after{content:'';position:absolute;left:0;right:0;top:3px;height:2px;background:currentColor;transition:transform var(--d-2) var(--ez)}
.stm-menu[open] .bars{border-color:transparent}
.stm-menu[open] .bars::before{transform:rotate(45deg)}
.stm-menu[open] .bars::after{transform:rotate(-45deg)}
.stm-menu[open] summary{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.stm-menu-p{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;padding:var(--s2) var(--s8) var(--s4);background:var(--card);border-bottom:1px solid var(--rule);box-shadow:0 18px 32px -16px rgba(30,40,50,.28);animation:menuIn var(--d-2) var(--ez)}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}}
.stm-menu-p a{position:relative;display:flex;align-items:center;min-height:52px;padding:0 var(--s4);border-bottom:1px solid var(--rule-2);color:var(--ink);text-decoration:none;font-size:17px;font-weight:500}
.stm-menu-p a:hover{background:var(--paper)}
.stm-menu-p a[aria-current]{font-weight:700}
.stm-menu-p a[aria-current]::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--mag)}
.stm-menu-p a.tel{margin-top:var(--s2);border-bottom:0;color:var(--xg-text);font-size:15px;font-weight:600}
@media (max-width:1359px){
  .stm-top .stm-wrap{gap:var(--s4)}
  .stm-nav a{padding:0 var(--s2)}.stm-nav a::after{left:var(--s2);right:var(--s2)}
  .stm-tel span{display:none}.stm-tel{width:var(--tap);justify-content:center;border:1px solid var(--rule-ctl);border-radius:var(--r2)}
}
@media (max-width:1099px){
  .stm-top{position:sticky}
  .stm-nav{display:none}.stm-tel{margin-left:auto}
  .stm-menu{display:block}
}
@media (max-width:719px){
  .stm-wrap{padding:0 var(--s4)}
  .stm-top .stm-wrap{gap:var(--s2)}
  .stm-lock .xg{width:88px}.stm-lock .city{font-size:11px;letter-spacing:.03em;white-space:normal;max-width:6.5em}
  .stm-cab,.stm-cartbtn{padding:0 var(--s3)}.stm-cartbtn .t{display:none}.stm-cab .f{display:none}.stm-cab .s{display:inline}
  .stm-menu summary{padding:0}.stm-menu .l{display:none}
  /* «Заказы» видны — звонок уходит в меню, чтобы ряд поместился в 360 px */
  .stm-top:has(.stm-cab:not([hidden])) .stm-tel{display:none}
  .stm-top:has(.stm-cab:not([hidden])) .stm-cab{margin-left:auto}
  .stm-menu-p{padding:var(--s1) var(--s4) var(--s3)}
}
/* вкладки разделов под шапкой (< 1100 px): «Подбор · Каталог · …» видны сразу, без меню (замечание Петра 11.10, №4); не липкие */
.stm-tabs{display:none}
@media (max-width:1099px){
  .stm-tabs{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;padding:0 var(--s8);background:var(--card);border-bottom:1px solid var(--rule-2);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .stm-tabs::-webkit-scrollbar{display:none}
  .stm-tabs a{position:relative;flex:none;display:flex;align-items:center;min-height:44px;padding:0 var(--s3);color:var(--ink-2);text-decoration:none;font:500 14px/1 var(--f)}
  .stm-tabs a[aria-current]{color:var(--ink);font-weight:700}
  .stm-tabs a[aria-current]::after{content:'';position:absolute;left:var(--s3);right:var(--s3);bottom:0;height:2px;background:var(--mag)}
}
@media (max-width:719px){.stm-tabs{padding:0 var(--s2)}}
/* плашка «для специалистов» (юр-рамка ч.8 ст.24: информационный режим) */
.stm-spec{border-bottom:1px solid var(--rule-2);background:var(--card)}
.stm-spec p{max-width:1360px;margin:0 auto;padding:6px var(--s8);font:400 var(--t-xs)/1.4 var(--f);color:var(--ink-2);box-sizing:border-box}
@media (max-width:719px){.stm-spec p{padding:6px var(--s4)}.stm-spec .m-hide{display:none}}
/* подвал */
.stm-foot{margin-top:var(--s16);border-top:1px solid var(--rule);background:var(--card);color:var(--ink-2);font:400 13px/1.55 var(--f)}
.stm-foot .stm-wrap{padding-top:var(--s8);padding-bottom:var(--s12);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4) var(--s6)}
.stm-foot p{margin:0}
.stm-foot .med{grid-column:1/-1;color:var(--ink);font-weight:600;font-size:14px;padding-bottom:var(--s4);border-bottom:1px solid var(--rule-2)}
.stm-foot .c6{grid-column:span 6}.stm-foot .c12{grid-column:1/-1}
.stm-foot .lk{padding-top:var(--s2)}
@media (max-width:899px){.stm-foot .c6{grid-column:1/-1}}
.stm-foot a{color:var(--ink-2)}
.stm-foot a:hover{color:var(--ink)}
.stm-top :focus-visible,.stm-foot :focus-visible{outline:2px solid var(--ink);outline-offset:2px}