/* ============================================================
   ВЫЕЗЖАЮЩЕЕ МЕНЮ КАТЕГОРИЙ — ЗАДАЁТСЯ ТОЛЬКО ЗДЕСЬ.

   Это панель, которая выезжает слева по кнопке «Категории». Сюда входит
   сама панель и её открытое состояние .on, шапка с заголовком и крестиком,
   список категорий, ссылки с наведением и нажатием, значки внутри панели,
   вид на телефоне, тёмная тема и поведение при отключённых анимациях.

   Сюда НЕ входит и входить не должно:
     • кнопка «Категории» (.cats-burger) — она в category-navigation.css;
     • общая вуаль #veil / .drawer-veil — её делят корзина и избранное;
     • обычная корзина .drawer и её шапка .drawer-head;
     • общие .x, .cat-svg, .cat-ico-img — они оформляют весь сайт;
     • открытие, закрытие и управление фокусом — это JavaScript
       (storefront.v3.js, функции openCatsMenu и closeCatsMenu).

   Сведено 2026-08-11 из шести файлов: storefront.v3.css, design-lab.v1.css,
   design-lab-flagship.v2.css, design-lab-review-fixes.v4.2.css,
   mobile-layout.v2.css, dark-theme.v1.css. Было 35 правил, стало 20:
   пять правил не выигрывали нигде и отпали сами.

   ВАЖНО про порядок двух свойств — менять местами нельзя.
   1) В .cats-drawer border-left идёт ДО border-color. border-color задаёт
      цвет всем четырём сторонам; стоя выше, он бы не перебил левую границу,
      и её цвет сменился бы с --fl-line на --dl-line.
   2) В .cats-drawer-body a border-bottom идёт ДО border. border —
      сокращённое и переписывает все стороны; стоя ниже, оно и должно
      победить, как побеждало в каскаде.
   Расчёт css-who-wins этого не видит: сокращённые и полные свойства он
   считает разными. Проверено вручную, сторожится тестом.

   Правишь меню категорий — правь здесь. Новый слой поверх не заводи.
   Что где выигрывает: npm run who-wins .cats-drawer
   ============================================================ */
.cats-drawer{background:#f6f9fd;border-left:1px solid var(--dl-line);border-color:var(--fl-line);border-radius:0 24px 24px 0;border-right:1px solid rgba(255,255,255,.7);box-shadow:24px 0 80px rgba(7,26,49,.24);display:flex;flex-direction:column;height:100dvh;left:0;max-width:none;position:fixed;top:0;transform:translateX(-105%);transition:transform 320ms cubic-bezier(.16,1,.3,1);width:min(92vw,420px);z-index:81}
.cats-drawer.on{left:0;transform:translateX(0)}
@media(max-width:680px){
  .cats-drawer{max-width:100%;width:100%}
}
.cats-drawer-head{align-items:center;backdrop-filter:blur(16px);background:rgba(246,249,253,.92);border-bottom:1px solid var(--sky2);border-color:#dce5ef;display:flex;justify-content:space-between;min-height:82px;padding:16px 18px 14px 22px}
.cats-drawer-head h3{color:var(--ink);font-family:'Unbounded',sans-serif;font-size:18px;letter-spacing:-.04em}
.cats-drawer-head .x{background:#fff;border:1px solid #dbe4ee;border-radius:14px;color:#52667e;height:44px;width:44px}
html[data-theme="dark"] .cats-drawer-head{background:var(--card-bg) !important;border-color:var(--dl-line, #26394e)}
html[data-theme="dark"] .cats-drawer-head h3{color:var(--ink)}
html[data-theme="dark"] .cats-drawer-head .x{background:var(--sky) !important;border-color:var(--dl-line, #26394e);color:var(--ink)}
.cats-drawer-body{align-content:start;display:grid;flex:1;gap:7px;overflow-y:auto;padding:12px 12px 24px;scrollbar-color:rgba(23,105,224,.25) transparent;scrollbar-width:thin}
.cats-drawer-body a{align-items:center;background:#fff;border-bottom:1px solid var(--sky2);border:1px solid #e0e7ef;border-radius:14px;box-shadow:0 5px 16px rgba(7,26,49,.035);color:#1c3049;cursor:pointer;display:flex;font-size:14px;font-weight:700;gap:11px;line-height:1.3;min-height:56px;padding:11px 42px 11px 14px;position:relative;transition:background .15s}
.cats-drawer-body a:hover{background:#eef5ff;border-color:rgba(23,105,224,.32);color:#0f4fae;transform:translateX(2px)}
.cats-drawer-body a:active{background:#eef5ff;border-color:rgba(23,105,224,.32);color:#0f4fae;transform:translateX(2px)}
.cats-drawer-body .cat-ico-img{border-radius:8px;height:26px;vertical-align:middle;width:26px}
.cats-drawer-body .cat-svg{height:24px;margin-right:4px;vertical-align:-6px;width:24px}
.cats-drawer-body a::after{color:#90a0b2;content:"›";font-size:22px;font-weight:500;position:absolute;right:15px;top:50%;transform:translateY(-52%)}
.cats-drawer-body a:first-child{background:linear-gradient(135deg,#071a31,#123b6e);border-color:#123b6e;box-shadow:0 12px 28px rgba(7,26,49,.16);color:#fff;min-height:68px}
.cats-drawer-body a:first-child::after{color:rgba(255,255,255,.7)}
.cats-drawer-body a:first-child:hover{background:linear-gradient(135deg,#0b2747,#1769e0);color:#fff}
.cats-drawer-body a:first-child:active{background:linear-gradient(135deg,#0b2747,#1769e0);color:#fff}
html[data-theme="dark"] .cats-drawer-body a{background:var(--card-bg) !important;border-color:var(--dl-line, #26394e) !important;color:var(--ink) !important}
@media (prefers-reduced-motion:reduce){
  .cats-drawer { transition-duration:.01ms; }
}