/* =========================================================
   ONECOM Premium Navigation v1.8.1
   Safe visual layer for UniShop 2
   - native desktop geometry preserved
   - native mobile collapse preserved
   - promo only in mobile Search
   - no blur/backdrop-filter/heavy continuous effects
   ========================================================= */
:root{
  --ocn-bg:#08090c;
  --ocn-bg-2:#0d0f13;
  --ocn-panel:#101218;
  --ocn-line:rgba(255,255,255,.065);
  --ocn-line-strong:rgba(255,255,255,.11);
  --ocn-text:#f4f5f7;
  --ocn-muted:rgba(244,245,247,.66);
  --ocn-red:#ef2338;
  --ocn-red-soft:rgba(239,35,56,.105);
}

/* Images: desktop keeps native UniShop category imagery; mobile hides it for speed. */

/* Shared typography/colors only. Do not override positioning/height geometry. */
.menu-wrapper,
.menu-wrapper.new{background:var(--ocn-bg) !important;border-color:var(--ocn-line-strong) !important}
.menu1,
.menu2{background:var(--ocn-bg) !important}
.menu__header{background:var(--ocn-bg) !important;color:var(--ocn-text) !important;border-bottom:1px solid var(--ocn-line) !important}
.menu__header-title{color:#fff !important;font-weight:700 !important}
.menu__header-icon{color:rgba(255,255,255,.82) !important}
.menu__level-1-li{background:transparent !important;border-color:var(--ocn-line) !important}
.menu__level-1-a{color:rgba(255,255,255,.90) !important;background:transparent !important;font-weight:650 !important;text-decoration:none !important}
.menu__level-1-icon{color:rgba(255,255,255,.64) !important}
.menu__level-1-li.open>.menu__level-1-a,
.menu__level-1-li:hover>.menu__level-1-a{background:var(--ocn-red-soft) !important;color:#fff !important}
.menu__level-1-li.open>.menu__level-1-icon,
.menu__level-1-li:hover>.menu__level-1-icon{color:#fff !important}
.menu__level-2{background:var(--ocn-panel) !important;color:var(--ocn-text) !important}
.menu__level-2-a{color:rgba(255,255,255,.91) !important;background:transparent !important}
.menu__level-3-a{color:var(--ocn-muted) !important}
.menu__level-2-a:hover,.menu__level-3-a:hover{color:#fff !important}
.menu__chevron{color:rgba(255,255,255,.54) !important}

/* =========================================================
   DESKTOP — preserve UniShop layout/width/height, visual polish only
   ========================================================= */
@media (min-width:992px){
  /* Desktop: restore native category images/thumbnails from UniShop. */
  .menu__level-1-img,
  .menu__level-2-img,
  .menu__level-2-img-link,
  .menu__banner,
  .menu__banner img{
    display:initial !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  img.menu__level-1-img,
  img.menu__level-2-img,
  .menu__banner img{display:block !important;width:auto;height:auto}
  .menu-wrapper,
  .menu-wrapper.new{
    border:1px solid rgba(255,255,255,.08) !important;
    border-top-color:rgba(239,35,56,.20) !important;
    box-shadow:0 16px 38px rgba(0,0,0,.34) !important;
  }
  .menu1.new{
    background:#0a0b0f !important;
    box-shadow:0 18px 42px rgba(0,0,0,.38) !important;
  }
  .menu1.new .menu__collapse{
    background:#0b0c10 !important;
    scrollbar-color:#2e3037 transparent;
  }
  .menu1.new .menu__level-1-li{
    border-top:1px solid rgba(255,255,255,.045) !important;
  }
  .menu1.new .menu__level-1-a{
    min-height:46px !important;
    padding-left:15px !important;
    padding-right:34px !important;
    font-size:14px !important;
  }
  .menu1.new .menu__level-1-li.open>.menu__level-1-a{
    background:linear-gradient(90deg,rgba(239,35,56,.13),rgba(239,35,56,.035)) !important;
    box-shadow:inset 2px 0 0 var(--ocn-red) !important;
  }
  .menu1.new .menu__level-2{
    background:#0f1116 !important;
    box-shadow:inset 1px 0 0 rgba(255,255,255,.045) !important;
    scrollbar-color:#30323a transparent;
  }
  .menu1.new .menu__level-2::-webkit-scrollbar{width:5px !important}
  .menu1.new .menu__level-2::-webkit-scrollbar-thumb{background:#30323a !important;border-radius:10px !important}
  .menu1.new .menu__level-2-ul{padding-left:12px !important;padding-right:12px !important}
  .menu1.new .menu__level-2-a.has-children{
    margin-top:14px !important;
    margin-bottom:8px !important;
    color:#fff !important;
    font-weight:700 !important;
  }
  .menu1.new .menu__level-3-li + li{margin-top:7px !important}
  .menu1.new .menu__level-3-a{font-size:14px !important;line-height:1.35 !important;text-decoration:none !important}

  /* Never show ONECOM promo in desktop catalog. */
  .onecom-menu-promo,
  #onecom-search-promo-layer{display:none !important}
}

/* =========================================================
   MOBILE / TABLET CATALOG — native accordion, whole row click handled by JS
   ========================================================= */
@media (max-width:991px){
  /* Mobile/tablet: hide category imagery and banners to keep the drawer light. */
  .menu__level-1-img,
  .menu__level-2-img,
  .menu__level-2-img-link,
  .menu__banner,
  .menu__banner img{display:none !important}
  .menu__level-2-ul.has-image{padding-left:10px !important}
  .menu__level-2-ul.has-image > div{min-height:0 !important;margin:0 !important;padding:0 !important}
  .menu-wrapper{
    background:var(--ocn-bg) !important;
    border:0 !important;
    box-shadow:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }
  .menu__header{height:54px !important;padding:0 16px !important}
  .menu__header-title{font-size:18px !important}
  .menu__collapse{background:var(--ocn-bg) !important;font-size:14px !important}
  .menu__level-1-a,
  .menu__level-2-a,
  .menu__level-3-a{min-height:48px !important;line-height:1.25 !important;border-color:var(--ocn-line) !important}
  .menu__level-1-a{padding:0 48px 0 16px !important;cursor:pointer !important}
  .menu__level-1-icon{margin-right:12px !important;min-width:18px !important;font-size:15px !important;text-align:center !important}
  .menu__level-1-li.open>.menu__level-1-a{background:rgba(239,35,56,.085) !important;box-shadow:inset 2px 0 0 var(--ocn-red) !important}
  .menu__level-2{background:#0d0f13 !important}
  .menu__level-2-a{padding:0 48px 0 28px !important;border-top:1px solid rgba(255,255,255,.045) !important}
  .menu__level-3{background:#111319 !important}
  .menu__level-3-a{padding:0 42px !important}
  .menu__chevron{top:9px !important;right:10px !important;width:30px !important;height:30px !important;line-height:30px !important;background:transparent !important;border-radius:8px !important}

  /* No advertising in the Catalog drawer. */
  .menu-wrapper .onecom-menu-promo,
  .menu-wrapper .onecom-search-promo,
  .menu-wrapper .onecom-search-promo__banner{display:none !important}

  /* Bottom navigation: Catalog / Search / Cart / Wishlist / Account */
  body #fly-menu.fly-menu{background:#111216 !important;border:0 !important;border-top:1px solid var(--ocn-line-strong) !important;box-shadow:0 -7px 20px rgba(0,0,0,.24) !important}
  body #fly-menu .container{width:100% !important;padding:0 10px !important}
  body #fly-menu .row{height:66px !important;padding:0 !important;align-items:center !important}
  body #fly-menu .fly-menu__block{min-width:0 !important;height:66px !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important}
  body #fly-menu .fly-menu__caption{display:none !important}
  body #fly-menu .fly-menu__icon{width:30px !important;height:30px !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:27px !important;line-height:30px !important;color:rgba(255,255,255,.68) !important;transition:color .14s ease,transform .14s ease !important}
  body #fly-menu .fly-menu__block:after{content:"";position:absolute;left:50%;bottom:5px;width:18px;height:2px;margin-left:-9px;border-radius:2px;background:transparent}
  body #fly-menu .fly-menu__block.show .fly-menu__icon,
  body #fly-menu .fly-menu__block:active .fly-menu__icon{color:#ff2b42 !important;transform:translateY(-1px)}
  body #fly-menu .fly-menu__block.show:after{background:#ff2b42 !important}
  body #fly-menu .fly-menu__total{top:9px !important;left:calc(50% + 8px) !important}
  body #fly-menu .fly-menu__menu-m{order:1}
  body #fly-menu .fly-menu__search-m{order:2}
  body #fly-menu .fly-menu__cart{order:3}
  body #fly-menu .fly-menu__wishlist{order:4}
  body #fly-menu .fly-menu__account{order:5}
  body #fly-menu .fly-menu__home{order:0}
  body #fly-menu .fly-menu__compare{display:none !important}
  body #fly-menu .fly-menu__account-dropdown{display:none !important}

  /* Native mobile Search — same site remains visible underneath. */
  body #fly-menu .fly-menu__search-m .header-search{
    display:none;
    position:fixed !important;
    z-index:1088 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:auto !important;
    margin:0 !important;
    padding:10px 14px 12px !important;
    background:rgba(8,9,12,.97) !important;
    border:0 !important;
    border-bottom:1px solid rgba(239,35,56,.20) !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  body #fly-menu .fly-menu__search-m.show .header-search{display:block !important}
  body #fly-menu .fly-menu__search-m.show .header-search__input,
  body #fly-menu .fly-menu__search-m.show .header-search__category-btn,
  body #fly-menu .fly-menu__search-m.show input.form-control{
    height:44px !important;
    border-radius:12px !important;
    background:#15171d !important;
    border:1px solid var(--ocn-red) !important;
    color:#fff !important;
    box-shadow:0 0 0 1px rgba(239,35,56,.06) inset,0 0 14px rgba(239,35,56,.20) !important;
  }

  /* Advertising exists ONLY while Search is open. */
  .onecom-search-promo{
    --ocn-promo-width:420px;
    --ocn-promo-height:auto;
    position:fixed;
    z-index:1087;
    top:74px;
    left:50%;
    width:min(var(--ocn-promo-width),calc(100vw - 28px));
    max-width:calc(100vw - 28px);
    display:none;
    transform:translateX(-50%);
    padding:0;
    pointer-events:none;
  }
  .onecom-search-promo.is-visible{display:block}
  .onecom-search-promo.is-input-active{display:none !important}
  .onecom-search-promo__banner{
    display:block;
    width:100%;
    height:var(--ocn-promo-height);
    max-height:52vh;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:#0d0f13;
    box-shadow:0 12px 30px rgba(0,0,0,.32);
    pointer-events:auto;
    text-decoration:none !important;
  }
  .onecom-search-promo__banner img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .onecom-search-promo__button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:42px;
    margin:9px 0 0;
    padding:9px 16px;
    border:1px solid rgba(239,35,56,.44);
    border-radius:11px;
    background:#e51f35;
    color:#fff !important;
    font-size:14px;
    font-weight:700;
    line-height:1.2;
    text-decoration:none !important;
    box-shadow:none;
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent;
  }
  .onecom-search-promo__button:active{background:#f3263d}
}

@media (max-width:480px){
  .onecom-search-promo{top:72px;width:min(var(--ocn-promo-width),calc(100vw - 20px));max-width:calc(100vw - 20px)}
  .onecom-search-promo__banner{border-radius:12px}
  .onecom-search-promo__button{min-height:40px;border-radius:10px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .menu__level-1-a,
  body #fly-menu .fly-menu__icon{transition:none !important;animation:none !important}
}