body,html{background:radial-gradient(ellipse 70% 50% at 15% 0%,rgba(232,123,0,0.55) 0%,rgba(232,123,0,0.15) 35%,transparent 65%),linear-gradient(180deg,#1a1208 0%,#0c0805 25%,#050302 55%,#000000 100%)!important;min-height:100vh}
:root{--otc-cat-radius:20px;--otc-cat-radius-sm:14px;--otc-cat-ease:cubic-bezier(0.32,0.72,0,1);--otc-cat-dur:350ms}

.otc-cat-overlay{position:fixed;inset:0;z-index:999;color:#fff;display:flex;flex-direction:column;overflow:hidden;font-family:-apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-0.022em;background:radial-gradient(ellipse 85% 60% at 12% -5%,rgba(232,123,0,0.65) 0%,rgba(180,90,0,0.35) 20%,rgba(80,40,0,0.18) 40%,transparent 60%),linear-gradient(180deg,#1a0f06 0%,#0e0904 18%,#060402 35%,#000000 60%,#000000 100%)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation:otcCatFadeIn var(--otc-cat-dur) var(--otc-cat-ease)}

@keyframes otcCatFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.otc-cat-header{position:sticky;top:0;z-index:10;background:rgba(10,10,10,0.45);backdrop-filter:saturate(180%) blur(30px);border-bottom:0.5px solid rgba(255,255,255,0.08);padding:max(18px,env(safe-area-inset-top)) 16px 14px;flex-shrink:0}
.otc-cat-header-row{display:flex;align-items:flex-start;gap:10px}
.otc-cat-hdr-text{flex:1;min-width:0}
.otc-cat-back-ctx{display:inline-flex;align-items:center;gap:4px;padding:5px 11px 5px 5px;border-radius:999px;background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.85);font-size:12px;font-weight:500;cursor:pointer;letter-spacing:-0.1px;margin:0 0 8px;backdrop-filter:blur(20px)}
.otc-cat-back-ctx svg{flex-shrink:0}
.otc-cat-title{font-size:22px;font-weight:600;letter-spacing:-0.4px;line-height:1.18;color:#fff}
.otc-cat-sub{font-size:12px;color:rgba(255,255,255,0.55);margin-top:4px;letter-spacing:-0.1px;display:flex;align-items:center;gap:6px}
.otc-cat-sub-all{display:inline-flex;align-items:center;gap:3px;color:#e87b00;font-weight:500;font-variant-numeric:tabular-nums;border:none;background:none;cursor:pointer;font-family:inherit;font-size:inherit;padding:0}

.otc-cat-close{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.12);backdrop-filter:blur(20px);border:0.5px solid rgba(255,255,255,0.08);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;margin-top:0;padding:0}

.otc-cat-scroll{flex:1 1 0%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:14px 12px 28px}

/* MOB — 2 col grid */
.otc-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;grid-auto-rows:auto}

.otc-cat-tile{background:transparent;border:none;border-radius:0;padding:8px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;box-shadow:none;cursor:pointer;font-family:inherit;text-align:center;transition:transform 150ms var(--otc-cat-ease)}
.otc-cat-tile:active{transform:scale(0.96)}
.otc-cat-tile-icon{width:80px;height:80px;background:#ffffff;border:none;box-shadow:0 3px 12px rgba(0,0,0,0.22);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;transition:box-shadow 180ms,transform 180ms}
.otc-cat-tile-icon img{width:68px;height:68px;display:block;object-fit:contain;border-radius:0}
.otc-cat-tile-name{font-size:13px;font-weight:500;color:#ffffff;line-height:1.2;letter-spacing:-0.2px;text-align:center;min-height:32px;display:flex;align-items:flex-start;justify-content:center}
.otc-cat-tile-count{font-size:12px;font-weight:600;color:#e87b00;background:transparent;padding:0;font-variant-numeric:tabular-nums;letter-spacing:-0.1px;margin-top:0}
.otc-cat-tile-has-kids{display:none}

.otc-cat-skel-tile{background:rgba(255,255,255,0.06);border-radius:var(--otc-cat-radius);min-height:200px;animation:otcSkelPulse 1.4s ease-in-out infinite}
@keyframes otcSkelPulse{0%,100%{opacity:0.4}50%{opacity:0.7}}

/* DESKTOP — drawer-from-top + sidebar + content */
@media (min-width: 1024px){
  /* DEV3 OVERLAYS-GLASS: полноэкранная подложка ВЫШЕ шапки (шапки не видно) + fade/scale.
     Внутренний дизайн категорий не тронут — тёмную immersive-поверхность переносим на панель. */
  .otc-cat-overlay{position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:2000;border-radius:0;
    background:rgba(0,0,0,.45)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)!important;
    display:block;overflow-y:auto;animation:otcCatBackdropIn 260ms var(--otc-cat-ease)}
  .otc-cat-overlay>div{position:relative;max-width:1120px;margin:76px auto 48px;border-radius:24px;overflow:hidden;
    box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05);
    background:radial-gradient(ellipse 85% 60% at 12% -5%,rgba(232,123,0,0.55) 0%,rgba(180,90,0,0.30) 20%,rgba(80,40,0,0.15) 40%,transparent 60%),linear-gradient(180deg,#1a0f06 0%,#0e0904 18%,#060402 35%,#000000 60%,#000000 100%);
    animation:otcCatPanelIn 280ms var(--otc-cat-ease)}
  @keyframes otcCatBackdropIn{from{opacity:0}to{opacity:1}}
  @keyframes otcCatPanelIn{from{opacity:0;transform:scale(.985) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
  .otc-cat-overlay-dt{display:grid;grid-template-columns:280px 1fr;height:74vh;overflow:hidden;border-radius:24px}
  .otc-cat-side{padding:14px 10px;border-right:0.5px solid rgba(255,255,255,0.06);overflow-y:auto}
  .otc-cat-side-item{padding:14px 12px;display:flex;align-items:center;gap:14px;color:rgba(255,255,255,0.85);border-radius:14px;position:relative;margin-bottom:6px;border:0.5px solid transparent;cursor:pointer;font-family:inherit;background:none;width:100%;text-align:left}
  .otc-cat-side-item:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.10);color:#fff;backdrop-filter:blur(20px)}
  .otc-cat-side-item.is-active{background:linear-gradient(90deg,rgba(232,123,0,0.18) 0%,rgba(232,123,0,0.04) 100%);border-color:rgba(232,123,0,0.30);color:#fff;box-shadow:0 0 30px rgba(232,123,0,0.15);backdrop-filter:blur(20px)}
  .otc-cat-side-item.is-active::before{content:"";position:absolute;left:-6px;top:18px;bottom:18px;width:3px;background:linear-gradient(180deg,#ffba5c,#e87b00);border-radius:0 3px 3px 0;box-shadow:0 0 8px rgba(232,123,0,0.6)}
  .otc-cat-side-icon{width:60px;height:60px;background:linear-gradient(135deg,rgba(232,123,0,0.22) 0%,rgba(232,123,0,0.06) 100%);border:1px solid rgba(232,123,0,0.28);border-radius:14px;display:flex;align-items:center;justify-content:center;color:rgba(232,123,0,0.75);flex-shrink:0}

  .otc-cat-side-item.is-active .otc-cat-side-icon{color:#ff9933;border-color:rgba(232,123,0,0.45);background:linear-gradient(135deg,rgba(232,123,0,0.35) 0%,rgba(232,123,0,0.10) 100%)}
  .otc-cat-side-icon img{width:60px;height:60px;border-radius:14px;object-fit:contain}
  .otc-cat-side-text{flex:1;min-width:0}
  .otc-cat-side-name{font-size:14px;font-weight:500;line-height:1.22;letter-spacing:-0.22px;color:#fff;word-break:normal;overflow-wrap:break-word}
  .otc-cat-side-count{font-size:11px;color:rgba(255,255,255,0.5);font-variant-numeric:tabular-nums;margin-top:4px;letter-spacing:-0.1px}
  .otc-cat-side-item.is-active .otc-cat-side-count{color:#ff9933}
  .otc-cat-side-arrow{color:rgba(255,255,255,0.3);flex-shrink:0;line-height:0}
  .otc-cat-side-item.is-active .otc-cat-side-arrow{color:#ff9933}
  .otc-cat-side-all{padding:14px 12px 4px;border-top:0.5px solid rgba(255,255,255,0.08);margin-top:8px}
  .otc-cat-side-all a{color:#ff9933;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:4px;letter-spacing:-0.15px;cursor:pointer}

  .otc-cat-content{padding:22px 24px;overflow-y:auto;position:relative}
  .otc-cat-content-hdr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
  .otc-cat-content-title{font-size:20px;font-weight:600;color:#fff;letter-spacing:-0.4px}
  .otc-cat-content-all{display:inline-flex;align-items:center;gap:4px;color:#ff9933;font-size:13px;font-weight:500;letter-spacing:-0.15px;cursor:pointer}
  .otc-cat-grid{grid-template-columns:repeat(7,1fr);gap:8px 4px}
  .otc-cat-tile{background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;padding:6px 4px 8px!important;min-height:0!important;gap:6px!important;align-items:center!important}
  .otc-cat-tile-icon{width:72px!important;height:72px!important;background:#ffffff!important;border:none!important;box-shadow:0 3px 12px rgba(0,0,0,0.22)!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;transition:box-shadow 180ms,transform 180ms!important}
  .otc-cat-tile-icon img{width:60px!important;height:60px!important;border-radius:0!important;object-fit:contain!important}
  .otc-cat-tile-name{color:#ffffff!important;font-size:12px!important;line-height:1.2!important;letter-spacing:-0.1px!important;text-align:center!important;min-height:28px!important;display:flex!important;align-items:flex-start!important;justify-content:center!important}
  .otc-cat-tile-count{color:#e87b00!important;background:transparent!important;padding:0!important;font-size:11px!important;font-weight:600!important;margin:0!important}
  .otc-cat-tile:hover{background:transparent!important;transform:translateY(-2px)!important}
  .otc-cat-tile:hover .otc-cat-tile-icon{box-shadow:0 6px 20px rgba(232,123,0,0.35)!important;transform:scale(1.04)}
  .otc-cat-tile-has-kids{display:none!important}

  .otc-cat-back-dt{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.7);font-size:13px;font-weight:500;background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.1);border-radius:999px;padding:5px 12px 5px 8px;cursor:pointer;font-family:inherit;letter-spacing:-0.1px;margin-right:auto}
  .otc-cat-back-dt:hover{background:rgba(255,255,255,0.14)}
  .otc-cat-content-hdr-v8{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap;padding-right:64px;position:relative}
  .otc-cat-back-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 8px;border-radius:10px;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.10);color:rgba(255,255,255,0.85);font-size:12px;font-weight:500;cursor:pointer;letter-spacing:-0.1px;backdrop-filter:blur(20px);font-family:inherit;transition:background 150ms,color 150ms}
  .otc-cat-back-btn:hover{background:rgba(255,255,255,0.09);color:#fff}
  .otc-cat-breadcrumb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .otc-cat-bc-path{font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:-0.05px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
  .otc-cat-bc-path svg{width:9px;height:9px;color:rgba(255,255,255,0.25)}
  .otc-cat-bc-title{font-size:20px;font-weight:600;color:#fff;letter-spacing:-0.4px;line-height:1.18}
  .otc-cat-bc-count{font-size:13px;font-weight:500;color:rgba(255,255,255,0.55);margin-left:8px;font-variant-numeric:tabular-nums}
  .otc-cat-all-pill{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:10px;background:linear-gradient(90deg,rgba(232,123,0,0.20),rgba(232,123,0,0.08));border:0.5px solid rgba(232,123,0,0.35);color:#ff9933;font-size:13px;font-weight:600;letter-spacing:-0.15px;font-variant-numeric:tabular-nums;cursor:pointer;flex-shrink:0;text-decoration:none;transition:background 150ms}
  .otc-cat-all-pill:hover{background:linear-gradient(90deg,rgba(232,123,0,0.28),rgba(232,123,0,0.12))}
  .otc-cat-breadcrumb{flex:1;min-width:0}
    /* Hide mob header on desktop */
  .otc-cat-overlay > .otc-cat-header{display:none}
}



/* 3.1 Stagger fade-in */
.otc-cat-tile{opacity:1}
@keyframes otcGridFadeIn{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.otc-cat-grid{animation:otcGridFadeIn 280ms cubic-bezier(0.32,0.72,0,1) both}

/* 3.2 Close-анимация */
.otc-cat-overlay.is-closing{animation:otcCatFadeOut 280ms cubic-bezier(0.32,0.72,0,1) forwards}
@keyframes otcCatFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}
@media (min-width:1024px){
  .otc-cat-overlay.is-closing{animation:otcCatSlideUp 280ms cubic-bezier(0.32,0.72,0,1) forwards}
  @keyframes otcCatSlideUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}
}


@media (max-width:1023px){
  /* Страховка: is-fullwidth скрыт на моб — заменён на otc-cat-head-all-link */
  .otc-cat-all-pill.is-fullwidth{display:none!important}
  /* Оранжевая ссылка «N товаров ›» в строке meta */
  .otc-cat-head-meta{font-size:13px;color:rgba(255,255,255,0.55);margin-top:4px;letter-spacing:-0.01em;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
  .otc-cat-head-meta-sep{color:rgba(255,255,255,0.30)}
  .otc-cat-head-all-link{color:#e87b00;font-weight:600;text-decoration:none;padding:4px 2px;transition:opacity 150ms}
  .otc-cat-head-all-link:active{opacity:0.7}
}


@media (prefers-reduced-motion: reduce){
  .otc-cat-overlay,.otc-cat-tile,.otc-cat-grid{animation:none!important;transition:none!important;opacity:1!important}
}


/* ===================================================================
   V2-FIX: CSS под реальные V6 DOM-классы + VT slide root
   =================================================================== */

/* Header wrapper */
.otc-cat-header{position:relative;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.08);background:rgba(20,20,22,0.65);backdrop-filter:blur(20px)}
.otc-cat-header-row{display:flex;align-items:flex-start;gap:12px}

/* Back button (V6: .otc-cat-back-ctx, новый: .otc-cat-back) */
.otc-cat-back,.otc-cat-back-ctx{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;background:transparent;border:none;padding:6px 0;color:rgba(255,255,255,0.85);font-size:14px;font-weight:500;cursor:pointer;letter-spacing:-0.01em;font-family:inherit}
.otc-cat-back:hover,.otc-cat-back-ctx:hover{color:#fff}

/* Title + sub text */
.otc-cat-hdr-text{flex:1;min-width:0}
.otc-cat-title{font-size:22px;font-weight:700;color:#fff;letter-spacing:-0.022em;line-height:1.15;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif}
.otc-cat-sub{margin-top:4px;font-size:13px;color:rgba(255,255,255,0.55);letter-spacing:-0.01em;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.otc-cat-sub-sep,.otc-cat-head-meta-sep{color:rgba(255,255,255,0.30)}

/* Orange all-link (.otc-cat-all = новый, .otc-cat-head-all-link = старый V1) */
.otc-cat-all,.otc-cat-head-all-link{color:#e87b00;font-weight:600;text-decoration:none;padding:4px 2px;transition:opacity 150ms}
.otc-cat-all:hover,.otc-cat-all:active,.otc-cat-head-all-link:active{opacity:0.75}

/* Close button V2 */
.otc-cat-close{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,0.10);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 150ms;font-family:inherit}
.otc-cat-close:hover{background:rgba(255,255,255,0.18)}

/* Lenis body lock */
body.otc-cat-open,body.otc-cat-overlay-open{overflow:hidden}

/* === Десктоп: padding-right зарезервирован под × === */
@media (min-width:1024px){
  .otc-cat-header{padding:14px 64px 14px 20px}
  .otc-cat-close{position:absolute;top:16px;right:16px}
}

/* === View Transitions root slide (Safari 18.2+, Chrome 111+) === */
::view-transition-old(root),::view-transition-new(root){animation-duration:320ms;animation-timing-function:cubic-bezier(0.32,0.72,0,1);animation-fill-mode:both}
::view-transition-old(root){animation-name:otcSlideOutLeft}
::view-transition-new(root){animation-name:otcSlideInRight}
html.is-drill-back ::view-transition-old(root){animation-name:otcSlideOutRight}
html.is-drill-back ::view-transition-new(root){animation-name:otcSlideInLeft}

@keyframes otcSlideOutRight{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(100%,0,0);opacity:0}}
@keyframes otcSlideInLeft{from{transform:translate3d(-24%,0,0);opacity:0}to{transform:translate3d(0,0,0);opacity:1}}

/* === V4 panels transparent on dark overlay === */
.otc-cat-grid,.otc-cat-scroll,.otc-cat-side,.otc-cat-content{background:transparent!important}
.otc-cat-ske{background:rgba(255,255,255,0.04)!important}
@keyframes otcSkelPulse{0%,100%{opacity:0.6}50%{opacity:0.85}}

@keyframes otcSlideOutLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-24%);opacity:0}}
@keyframes otcSlideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* === V8 iOS Safari scroll-fix === */
.otc-cat-overlay{height:100dvh;height:-webkit-fill-available}
.otc-cat-scroll{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:scroll-position}
body.otc-cat-overlay-open{position:fixed;width:100%}

/* === V11 chevron + sections === */
.otc-cat-tile[data-has-kids] .otc-cat-tile-count::after{content:" ›";font-weight:600;margin-left:2px}
.otc-cat-tile-sections{font-size:10px;color:rgba(255,255,255,0.45);font-weight:500;letter-spacing:-0.05px;margin-top:2px;font-variant-numeric:tabular-nums}
@media (min-width:1024px){
  .otc-cat-tile-sections{font-size:10px;color:rgba(255,255,255,0.5)}
}

/* === V12 выравнивание цифр по нижнему краю === */
.otc-cat-tile{justify-content:flex-start!important}
.otc-cat-tile-name{flex:1 0 auto!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;text-align:center!important}
.otc-cat-tile-count{margin-top:auto!important}
.otc-cat-tile-sections{flex-shrink:0!important}
@media (max-width:1023px){.otc-cat-tile{min-height:180px!important}}
@media (min-width:1024px){.otc-cat-tile{min-height:140px!important}}

/* V13 — выравнивание цифр по нижнему краю на десктоп (бьёт V10 margin:0!important) */
@media (min-width:1024px){
  .otc-cat-tile{min-height:140px!important;justify-content:flex-start!important}
  .otc-cat-tile-name{flex:1 0 auto!important;min-height:32px!important}
  .otc-cat-tile-count{margin-top:auto!important}
  .otc-cat-tile-sections{flex-shrink:0!important;margin-top:2px!important}
}

/* V13 — то же для моб (страховка) */
@media (max-width:1023px){
  .otc-cat-tile{min-height:180px!important;justify-content:flex-start!important}
  .otc-cat-tile-name{flex:1 0 auto!important;min-height:36px!important}
  .otc-cat-tile-count{margin-top:auto!important}
  .otc-cat-tile-sections{flex-shrink:0!important;margin-top:2px!important}
}

/* V14 — равная высота тайлов в одном ряду через grid-auto-rows */
.otc-cat-grid{grid-auto-rows:1fr!important}

/* V14 — десктоп: min-height 200px + flex для прижатия count */
@media (min-width:1024px){
  .otc-cat-tile{min-height:200px!important;height:100%!important;justify-content:flex-start!important;display:flex!important;flex-direction:column!important}
  .otc-cat-tile-name{flex:1 0 auto!important;min-height:48px!important;align-items:flex-start!important}
  .otc-cat-tile-count{margin-top:auto!important}
  .otc-cat-tile-sections{flex-shrink:0!important;margin-top:2px!important}
}

/* V14 — моб: min-height 200px */
@media (max-width:1023px){
  .otc-cat-tile{min-height:200px!important;height:100%!important;justify-content:flex-start!important}
  .otc-cat-tile-name{flex:1 0 auto!important;min-height:52px!important}
  .otc-cat-tile-count{margin-top:auto!important}
  .otc-cat-tile-sections{flex-shrink:0!important;margin-top:2px!important}
}

/* V16 — цифра count на абсолютной позиции внизу тайла, sections под ней */
.otc-cat-tile{position:relative!important;padding-bottom:54px!important}
.otc-cat-tile-name{margin-bottom:0!important}
.otc-cat-tile-count{position:absolute!important;left:0!important;right:0!important;bottom:32px!important;text-align:center!important;margin:0!important;padding:0!important}
.otc-cat-tile-sections{position:absolute!important;left:0!important;right:0!important;bottom:12px!important;text-align:center!important;margin:0!important;padding:0!important}
@media (min-width:1024px){.otc-cat-tile{padding-bottom:54px!important;padding-top:8px!important}}
@media (max-width:1023px){.otc-cat-tile{padding-bottom:54px!important}}

/* V19 — Apple-scroll header в overlay (моб только) */
@media (max-width:1023px){
  .otc-cat-header{transform:translateY(0);transition:transform 280ms cubic-bezier(.22,1,.36,1);will-change:transform}
  .otc-cat-header.is-hidden{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){
  .otc-cat-header,.otc-cat-header.is-hidden{transition:none!important;transform:none!important}
}