/* Меню «Сервисы» Trely — кнопка справа в шапке и панель со всеми продуктами.

   Образец утверждён руководителем 28.09.2026: стенд trely.io/dev.menu.
   Устройство: слева в шапке текстовый логотип «Trely / Раздел», справа —
   кнопка «Все сервисы» рядом с «Профилем». По нажатию открывается белая
   панель, прижатая к правому краю: слева вкладки продуктов, справа плашки
   разделов этого продукта.

   Классы начинаются с sm- (services menu). Прежний набор svc-* и lgroup-*
   относился к старому меню-выпадашке у логотипа и здесь не используется.

   Цвета берутся из токенов страницы, а если их нет — из запасных значений
   рядом с каждой переменной. Имена токенов на сайтах разные (--tr-gold
   на trely.io и --gold на Shipping), а значения одинаковые, поэтому
   запасное значение подходит обоим. */

/* ─────────── ЛОГОТИП СЛЕВА ───────────
   «Trely Go», «Trely Shipping» — одной надписью, слово продукта нашим
   золотым. Косой черты между ними нет: убрана по решению руководителя
   28.09.2026. Размер и начертание берутся у .logo самой страницы —
   он везде свой, а золотым красится только второе слово. */
.lgroup{display:inline-flex;align-items:baseline;gap:.28em;min-height:44px}
.logo-sub{color:var(--tr-gold,#C6A064);text-decoration:none;
  font-size:inherit;font-weight:inherit;letter-spacing:inherit;transition:opacity .15s}
/* 28 px — размер логотипа в шапке на всех шести сайтах, сверено 28.09.2026.
   Задаём здесь, потому что слово продукта стоит отдельной ссылкой рядом
   с .logo и унаследовать её размер не может. */
.lgroup .logo-sub{font-size:28px;font-weight:600;letter-spacing:-0.02em}
.logo-sub:hover{opacity:.7}
.logo-sub:focus-visible{outline:2px solid var(--tr-gold,#C6A064);outline-offset:3px;
  border-radius:var(--r-sm,8px)}
/* Косая черта стояла между словами до 28.09.2026. Правило оставлено, чтобы
   страница, собранная до правки, не показывала её до своей пересборки. */
.logo-sep{display:none !important}
/* Подстраховка: у прежнего меню кнопка-решётка и галочка стояли внутри
   группы логотипа. Если на какой-то странице разметку забыли убрать,
   пусть лучше её не будет видно, чем рядом с логотипом останется
   вторая, уже нерабочая кнопка. */
.lgroup-dots,.lgroup-chev{display:none !important}

/* ─────────── КНОПКА «ВСЕ СЕРВИСЫ» ───────────
   Стоит в правой части шапки, слева от «Профиля»: тот же рост и покрой,
   значок — те же точки, что были у прежней кнопки. На узком экране
   подпись прячется, остаются точки. */
.sm-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--tr-divider,#E5E2DC);border-radius:var(--r-pill,999px);
  background:var(--tr-white,#FFFFFF);color:var(--tr-ink,#0F1014);
  font:500 15px/1 var(--ff,'Inter Tight',-apple-system,system-ui,sans-serif);
  cursor:pointer;transition:border-color .15s,color .15s}
.sm-btn svg{width:18px;height:18px;flex:0 0 18px;color:var(--tr-gold,#C6A064)}
.sm-btn:hover{border-color:var(--tr-gold,#C6A064);color:var(--tr-gold,#C6A064)}
.sm-btn:focus-visible{outline:2px solid var(--tr-gold,#C6A064);outline-offset:3px}
.sm-btn[aria-expanded="true"]{border-color:var(--tr-gold,#C6A064);color:var(--tr-gold,#C6A064)}
@media(max-width:760px){.sm-btn span{display:none}.sm-btn{padding:0 12px}}

/* ─────────── ПАНЕЛЬ ───────────
   Прижата к правому краю содержимого страницы, а не к центру окна:
   кнопка справа — меню тоже справа. 1320 px — ширина контейнера наших
   сайтов, 64 px — его внутренний отступ. */
.sm-scrim{position:fixed;inset:0;z-index:1000;background:transparent}
.sm-scrim[hidden]{display:none}
.sm-panel{position:fixed;right:max(24px,calc((100vw - 1320px)/2 + 64px));top:76px;z-index:1001;
  width:min(1080px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow:hidden;
  background:var(--tr-white,#FFFFFF);border-radius:var(--r-xl,32px);
  box-shadow:var(--sh-medium,0 8px 32px rgba(39,60,63,.10))}
.sm-panel[hidden]{display:none}
/* Наш завиток на фоне панели — тот же, что на рекламных плашках; тон
   и прозрачность подобраны под картинку первого экрана trely.io. */
.sm-panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("art/menu-vector.webp") right 0 bottom 0/88% auto no-repeat}
.sm-inner{position:relative;z-index:1;display:grid;grid-template-columns:260px 1fr;
  min-height:420px;max-height:calc(100vh - 110px)}

/* вкладки продуктов слева */
.sm-tabs{display:flex;flex-direction:column;gap:4px;padding:28px 16px 28px 24px;
  border-right:1px solid var(--tr-divider,#E5E2DC)}
.sm-tab{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  text-align:left;border:0;background:transparent;cursor:pointer;padding:14px 16px;
  border-radius:var(--r-md,16px);
  font:500 17px/1.2 var(--ff,'Inter Tight',-apple-system,system-ui,sans-serif);
  color:var(--tr-gray-60,#6B6F71);transition:background .15s,color .15s}
.sm-tab:hover{background:var(--tr-cream,#F7F6F4);color:var(--tr-ink,#0F1014)}
.sm-tab[aria-selected="true"]{background:var(--tr-cream,#F7F6F4);color:var(--tr-ink,#0F1014);
  font-weight:600}
/* Рамки вокруг вкладки нет: при открытии мышью она выглядела ошибкой.
   Тем, кто пришёл с клавиатуры, вкладка подсвечивается песочной плашкой. */
.sm-tab:focus{outline:none}
.sm-tab:focus-visible{outline:none;background:var(--tr-tag,#EDE4D1);color:var(--tr-ink,#0F1014)}
.sm-tab-arrow{width:8px;height:8px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);opacity:0;transition:opacity .15s}
.sm-tab[aria-selected="true"] .sm-tab-arrow{opacity:.5}

/* разделы продукта справа */
.sm-panes{overflow-y:auto;padding:28px 32px 32px}
.sm-pane[hidden]{display:none}
.sm-pane-head{margin:6px 0 20px 4px}
.sm-pane-name{font:500 22px/1.2 var(--ff,'Inter Tight',-apple-system,system-ui,sans-serif);
  color:var(--tr-ink,#0F1014);letter-spacing:-.01em}
.sm-pane-desc{font:400 14px/1.4 var(--ff,'Inter Tight',-apple-system,system-ui,sans-serif);
  color:var(--tr-gray-60,#6B6F71);margin-top:4px}
.sm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sm-card{position:relative;display:flex;flex-direction:column;gap:6px;min-height:96px;
  padding:18px 56px 18px 18px;border-radius:var(--r-md,16px);
  background:var(--tr-white,#FFFFFF);box-shadow:0 2px 10px rgba(39,60,63,.05);
  text-decoration:none;color:var(--tr-ink,#0F1014);transition:box-shadow .15s,transform .15s}
.sm-card:hover{box-shadow:var(--sh-medium,0 8px 32px rgba(39,60,63,.10));transform:translateY(-1px)}
.sm-card:focus-visible{outline:2px solid var(--tr-gold,#C6A064);outline-offset:2px}
.sm-card-title{font:500 16px/1.3 var(--ff,'Inter Tight',-apple-system,system-ui,sans-serif)}
.sm-card-hint{font:400 13px/1.4 var(--ff,'Inter Tight',-apple-system,system-ui,sans-serif);
  color:var(--tr-gray-60,#6B6F71)}
/* Стрелка золотая всегда, а не только при наведении: решение
   руководителя — кнопки на плашках должны быть видны сразу. */
.sm-card-arrow{position:absolute;right:14px;bottom:14px;width:32px;height:32px;border-radius:50%;
  background:var(--tr-gold,#C6A064) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M7 7h10v10'/></svg>") center/13px no-repeat;
  transition:background-color .2s,transform .2s}
.sm-card:hover .sm-card-arrow{background-color:var(--tr-gold-hover,#B8915A);
  transform:translate(2px,-2px)}

/* ─────────── УЗКИЕ ЭКРАНЫ ─────────── */
@media (max-width:1000px){.sm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .sm-panel{top:68px;right:8px;width:calc(100vw - 16px);border-radius:var(--r-lg,24px)}
  .sm-inner{grid-template-columns:1fr}
  .sm-tabs{border-right:0;border-bottom:1px solid var(--tr-divider,#E5E2DC);padding:12px;
    flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none}
  .sm-tab{white-space:nowrap;width:auto;padding:10px 14px;font-size:15px}
  .sm-tab-arrow{display:none}
  .sm-panes{padding:16px}
  .sm-pane-head{margin:2px 0 14px 2px}
  .sm-pane-name{font-size:18px}
  .sm-pane-desc{font-size:14px}
  .sm-grid{grid-template-columns:1fr;gap:8px}
  .sm-card{min-height:0;padding:14px 52px 14px 14px}
}
@media (max-width:600px){
  .lgroup .logo-sub{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .sm-card,.sm-card-arrow,.sm-tab,.sm-btn{transition:none}
  .sm-card:hover{transform:none}
  .sm-card:hover .sm-card-arrow{transform:none}
}