/* OTCHeader desktop styles */

/* ── Reset + base ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* ── Desktop header wrapper ────────────────── */
.dh{position:sticky;top:0;z-index:200;background:#0a0a0a;border-bottom:1px solid #1a1a1a;
  transform:translateY(0);transition:transform 280ms cubic-bezier(.22,1,.36,1);will-change:transform;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.dh.is-hidden{transform:translateY(-100%)}
/* ── ROW 1 ─────────────────────────────────── */
.dh-r1{display:flex;align-items:center;gap:16px;height:60px;padding:0 24px;max-width:1600px;margin:0 auto;width:100%}
.dh-logo{text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.6px;
  white-space:nowrap;cursor:pointer;color:#fff;flex-shrink:0}
.dh-logo span{background:linear-gradient(180deg,#ffba5c 0%,#e87b00 60%);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
/* Search */
.dh-search{flex:1;max-width:560px;position:relative;display:flex;align-items:center}
.dh-search-bar{display:flex;align-items:center;height:44px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:0 6px 0 16px;gap:8px;
  width:100%;transition:background .15s,border-color .15s}
.dh-search-bar:focus-within{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}/*DEV1-UI-ORANGE-AND-FLASH-V1*/
.dh-q{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:14px;
  font-family:inherit;padding:0}
.dh-q::placeholder{color:#9a9aa2}
.dh-cam-btn{width:34px;height:34px;border-radius:17px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);color:#a8a8b0;display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0;transition:background .12s,color .12s}
.dh-cam-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.dh-ai-btn{height:34px;padding:0 12px 0 10px;border-radius:17px;flex-shrink:0;
  background:linear-gradient(180deg,rgba(232,123,0,.22) 0%,rgba(232,123,0,.08) 100%);
  border:1px solid rgba(232,123,0,.42);color:#ffba5c;font-size:12px;font-weight:700;
  letter-spacing:.3px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  box-shadow:0 0 14px rgba(232,123,0,.2);transition:background .12s,border-color .12s;
  transform:perspective(40px) rotateX(8deg);font-family:inherit}
.dh-ai-btn:hover{transform:perspective(40px) rotateX(0deg) translateY(-1px);
  background:linear-gradient(180deg,rgba(232,123,0,.32) 0%,rgba(232,123,0,.14) 100%);
  border-color:rgba(232,123,0,.6);box-shadow:0 4px 0 0 #b35a00,0 0 14px rgba(232,123,0,.3)}
.dh-ai-btn::after{content:'●';margin-left:4px;animation:ai-pulse 1.5s infinite;font-size:8px}
@keyframes ai-pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* Actions right */
.dh-acts{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.dh-lang{background:transparent;border:0;color:rgba(255,255,255,.7);font-size:13px;
  cursor:pointer;padding:6px 8px;border-radius:8px;font-family:inherit;white-space:nowrap}
.dh-lang:hover{background:rgba(255,255,255,.06);color:#fff}
.dh-acts-div{width:1px;height:20px;background:#2a2a2e}
.dh-prof-btn{display:flex;align-items:center;gap:7px;background:transparent;border:0;
  color:rgba(255,255,255,.85);font-size:13px;cursor:pointer;padding:6px 10px;
  border-radius:22px;font-family:inherit;transition:background .1s}
.dh-prof-btn:hover{background:rgba(255,255,255,.06)}
.dh-prof-btn .avatar{width:30px;height:30px;border-radius:15px;background:#e87b00;
  color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dh-icon-btn{width:38px;height:38px;border-radius:19px;background:transparent;border:0;
  color:rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;
  justify-content:center;position:relative;transition:background .1s;flex-shrink:0}
.dh-icon-btn:hover{background:rgba(255,255,255,.06)}
.dh-bdg{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:#e87b00;color:#fff;font-size:9px;font-weight:800;
  display:none;align-items:center;justify-content:center;border:1.5px solid #0a0a0a}
.dh-bdg.on{display:inline-flex}
/* ── ROW 2 ─────────────────────────────────── */
.dh-r2{display:flex;align-items:center;height:40px;padding:0 24px;max-width:1600px;margin:0 auto;
  width:100%;border-top:1px solid rgba(255,255,255,.05);gap:16px}
.dh-cats-trig{display:flex;align-items:center;gap:6px;background:transparent;border:0;
  color:rgba(255,255,255,.85);font-size:13px;font-weight:600;cursor:pointer;padding:6px 10px;
  border-radius:8px;font-family:inherit;white-space:nowrap;flex-shrink:0;
  transition:background .1s,color .1s}
.dh-cats-trig:hover,.dh-cats-trig.is-active{background:rgba(232,123,0,.12);color:#e87b00}
.dh-r2-sep{width:1px;height:16px;background:#2a2a2e;flex-shrink:0}
.dh-cat-pills{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;flex:1}
.dh-cat-pills::-webkit-scrollbar{display:none}
.dh-cat-pill{padding:4px 12px;font-size:12.5px;color:rgba(255,255,255,.55);cursor:pointer;
  white-space:nowrap;background:transparent;border:0;font-family:inherit;
  transition:color .1s;text-decoration:none}
.dh-cat-pill:hover{color:#fff}
.dh-cat-pill:not(:last-child)::after{content:'·';margin-left:12px;opacity:.3}
/* ── Auth modal (desktop: modal-center) + Lang dropdown ─────────────────── */
.auth-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.08);background:#111}
.auth-tab{flex:1;padding:12px;background:transparent;border:0;color:rgba(255,255,255,.5);
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.auth-tab.is-active{color:#fff;border-bottom-color:#e87b00}
.auth-form{padding:16px}
.auth-field{margin-bottom:12px}
.auth-input{width:100%;padding:11px 14px;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-size:14px;
  font-family:inherit;outline:0}
.auth-input:focus{border-color:rgba(232,123,0,.5);background:rgba(255,255,255,.09)}
.auth-select{-webkit-appearance:none;appearance:none}
.auth-submit-btn{width:100%;padding:13px;background:#e87b00;color:#fff;font-size:15px;
  font-weight:700;border:0;border-radius:12px;cursor:pointer;font-family:inherit;margin-top:4px}
.auth-submit-btn:hover{background:#c96e00}
.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed}
.auth-err{color:#ff5c5c;font-size:12px;min-height:16px;margin-bottom:4px}
.auth-sw__oauth{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.auth-sw__oauth-btn{height:48px;border-radius:10px;border:1px solid #d4d4dd;background:#fff;color:#111;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;width:100%;font-family:inherit;transition:background .12s}
.auth-sw__oauth-btn:hover{background:#f5f5f5}
.auth-sw__oauth-btn--apple{background:#000;color:#fff;border-color:#000}
.auth-sw__oauth-btn--apple:hover{background:#111}
.apple-txt{display:none}
body[data-lang="ru"] .apple-txt-ru,body:not([data-lang]) .apple-txt-ru{display:inline}
body[data-lang="cn"] .apple-txt-cn{display:inline}
body[data-lang="en"] .apple-txt-en{display:inline}
body[data-lang="kz"] .apple-txt-kz{display:inline}
body[data-lang="uz"] .apple-txt-uz{display:inline}
.auth-sw__divider{display:flex;align-items:center;gap:10px;color:#888;font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin:4px 0 8px}
.auth-sw__divider::before,.auth-sw__divider::after{content:'';flex:1;height:1px;background:#e3e3e8}
#auth-pane-reg .auth-sw__oauth{gap:6px;margin-bottom:10px}
#auth-pane-reg .auth-sw__oauth-btn{height:40px;font-size:14px}
#auth-pane-reg .auth-sw__divider{margin:1px 0 5px}
/* ── Auth modal card ──────────────────────────────────────────────────── */
.dh-auth-modal__card{position:relative;width:clamp(360px,28vw,440px);max-height:min(86vh,720px);overflow-y:auto;background:#1a1d27;border-radius:16px;padding:0 0 24px;box-shadow:0 24px 64px rgba(0,0,0,.7);transform:scale(.96);opacity:0;transition:transform 220ms cubic-bezier(.2,.8,.2,1),opacity 220ms cubic-bezier(.2,.8,.2,1)}
.dh-modal[data-open] .dh-auth-modal__card{transform:scale(1);opacity:1}
/* DEV-AUTH-GHOST-DESKTOP-V2: закрытая карточка входа НЕ ловит клики поверх грида (десктоп прятал её только opacity:0 -> pointer-events:auto оставался призраком; моб-правило в h-header.css медиа-гейтнуто) */
#h-auth-modal:not([data-open]) .dh-auth-modal__card{ pointer-events:none; }
/* DEV1-WISH-100-CLEANUP-V1: та же защита для фото-модалки (проактивно — .dh-modal__box закрывается тем же opacity-only паттерном) */
.dh-modal:not([data-open]) .dh-modal__box{ pointer-events:none; }
/* DEV1-WISH-100-CLEANUP-V1: пока cookie-баннер показан — резерв места снизу, чтобы он не накрывал нижний ряд карточек (десктоп 68px / моб 72px -> 88 с буфером) */
body:has(#otc-cookie-banner:not(.is-hidden)){ padding-bottom: 88px; }
@media(prefers-reduced-motion:reduce){.dh-auth-modal__card{transition:none}}
.dh-auth-modal__close{position:absolute;top:8px;right:10px;width:40px;height:40px;border-radius:8px;background:transparent;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;color:rgba(255,255,255,.45);padding:10px}
.dh-auth-modal__close:hover{background:rgba(255,255,255,.08);color:#fff}
.dh-auth-modal__title{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.4px;font-family:-apple-system,system-ui;margin:0;padding:20px 20px 0;display:none}
.dh-auth-modal__body{padding:0}
.dh-auth-modal__card .auth-tabs{background:#131620;border-bottom:1px solid rgba(255,255,255,.08);padding-right:56px}
.dh-auth-modal__card .auth-tab{color:rgba(255,255,255,.45);font-size:13px;padding:10px 12px}
.dh-auth-modal__card .auth-tab.is-active{color:#fff}
/* Auth UX 2026 */
.auth-title{font-size:18px;font-weight:600;color:#fff;margin:16px 16px 10px;letter-spacing:-.3px;line-height:1.2}
.auth-sub{font-size:12px;color:rgba(255,255,255,.45);margin:-6px 16px 10px;line-height:1.4}
.auth-footer-text{font-size:10px;color:rgba(255,255,255,.35);text-align:center;margin:10px 0 0;line-height:1.5}
.auth-footer-link{color:rgba(255,255,255,.45);text-decoration:underline}
.auth-footer-link:hover{color:#fff}
.auth-field-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.auth-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.8px}
.auth-forgot{font-size:11px;color:rgba(255,255,255,.45);text-decoration:none}
.auth-forgot:hover{color:#e87b00}
.auth-pw-wrap{position:relative}
.auth-pw-wrap .auth-input{padding-right:42px}
.auth-pw-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:rgba(255,255,255,.4);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;line-height:0}
.auth-pw-eye:hover{color:rgba(255,255,255,.7)}
.auth-strength{display:flex;gap:3px;margin-top:6px}
.auth-strength__bar{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:2px;transition:background .2s}
.auth-strength__bar.s1{background:#ff5c5c}
.auth-strength__bar.s2{background:#ff9500}
.auth-strength__bar.s3{background:#30d158}
.auth-role-label{font-size:12px;color:rgba(255,255,255,.5);margin:0 0 8px;font-weight:500}
.role-cards{display:flex;gap:8px}
.role-card{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;background:#1a1d27;border:1px solid #2a2a2a;border-radius:10px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.role-card.is-active{border:1.5px solid #e87b00;background:rgba(232,123,0,.08)}
.role-card__icon{color:rgba(255,255,255,.4);display:block;margin-bottom:4px;line-height:0}
.role-card.is-active .role-card__icon{color:#e87b00}
.role-card__name{font-size:12px;font-weight:600;color:#aaa;line-height:1.2}
.role-card.is-active .role-card__name{color:#fff}
.role-card__sub{font-size:10px;color:rgba(255,255,255,.3);line-height:1.3}
.role-card.is-active .role-card__sub{color:rgba(232,123,0,.7)}
/* ── Lang dropdown ────────────────────────────────────────────────────── */
.otc-lang-trigger{display:flex;align-items:center;gap:5px;background:transparent;border:0;color:rgba(255,255,255,.7);font-size:13px;cursor:pointer;padding:6px 8px;border-radius:8px;font-family:inherit;white-space:nowrap}
.otc-lang-trigger:hover,.otc-lang-trigger[aria-expanded="true"]{background:rgba(255,255,255,.06);color:#fff}
.otc-lang-trigger .lang-chevron{transition:transform .2s;color:rgba(255,255,255,.4)}
.otc-lang-trigger[aria-expanded="true"] .lang-chevron{transform:rotate(180deg)}
.otc-lang-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:#1a1a1a;border:1px solid #2a2a2e;border-radius:12px;padding:4px;z-index:510;box-shadow:0 8px 32px rgba(0,0,0,.7)}
.otc-lang-menu[data-open],.otc-lang-menu.is-open{display:block}
.otc-lang-opt{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;background:transparent;border:0;color:rgba(255,255,255,.75);font-size:13px;font-family:inherit;cursor:pointer;border-radius:8px;white-space:nowrap;position:relative}
.otc-lang-opt:hover{background:rgba(255,255,255,.06);color:#fff}
.otc-lang-opt.cur{color:#e87b00;font-weight:600}
.otc-lang-opt.cur::before{content:'';position:absolute;left:4px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#e87b00}
.otc-lang-opt__code{font-size:11px;color:rgba(255,255,255,.35);margin-left:8px}
.otc-lang-opt.cur .otc-lang-opt__code{color:#e87b00}
/* Profile menu */
.prof-menu{position:absolute;top:calc(100% + 6px);right:0;width:220px;background:#1a1a1e;
  border:1px solid #2a2a2e;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.4);
  z-index:350;padding:4px 0}
.prof-menu.on{display:block}
.prof-menu-hdr{padding:12px 16px 10px;border-bottom:1px solid #2a2a2e}
.prof-menu-btn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 16px;
  background:transparent;border:0;color:rgba(255,255,255,.75);font-size:13px;cursor:pointer;
  text-align:left;font-family:inherit;text-decoration:none}
.prof-menu-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.prof-menu-btn--out{color:rgba(255,92,92,.8)}
.prof-menu-btn--out:hover{color:#ff5c5c}
/* Toast */
.otc-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#1a1a1e;border:1px solid rgba(255,255,255,.1);color:#fff;padding:10px 20px;
  border-radius:12px;font-size:13px;z-index:9999;pointer-events:none;
  opacity:0;transition:opacity .2s;white-space:nowrap}
.otc-toast.show{opacity:1}
@media(prefers-reduced-motion:reduce){.dh{transition:none}.dh-drawer,.dh-mega,.dh-modal__box,.dh-prof-dd,.dh-backdrop{transition:none}}


  .h,.otc-topbar{position:sticky;top:0;z-index:30;transform:translateY(0);transition:transform 280ms cubic-bezier(0.22,1,0.36,1);will-change:transform;padding-top:max(0px,env(safe-area-inset-top))}
  .h.is-hidden,.otc-topbar.is-hidden{transform:translateY(-100%)}
  @media(prefers-reduced-motion:reduce){.h,.otc-topbar{transition:none!important}}
/* ── DEV3 SEARCH POLISH (h-search-q) — премиум-поиск, без крестика-90х ── */
#h-search-q{appearance:none;-webkit-appearance:none}
#h-search-q::-webkit-search-cancel-button,#h-search-q::-webkit-search-decoration{-webkit-appearance:none;display:none}
.dh-search-bar{transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.dh-search-bar:focus-within{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28);box-shadow:0 0 0 3px rgba(255,255,255,.07)}/*DEV1-UI-ORANGE-AND-FLASH-V1: рамка/свечение поиска -> нейтраль*/
.dh-clear{width:20px;height:20px;border-radius:50%;border:0;flex-shrink:0;cursor:pointer;padding:0;color:#cfcfd6;background:rgba(255,255,255,.1);display:none;align-items:center;justify-content:center;transition:background .12s,color .12s,transform .1s}
.dh-clear:hover{background:rgba(255,255,255,.2);color:#fff}
.dh-clear:active{transform:scale(.88)}
.dh-search-bar.has-text .dh-clear{display:inline-flex}
.dh-slash{flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#8a8a92;font-size:12px;font-weight:600;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.dh-search-bar:focus-within .dh-slash,.dh-search-bar.has-text .dh-slash{display:none}
@media(max-width:760px){.dh-slash{display:none}}

/* ─────────────────────────────────────────────────────────────────────
   DEV2-HEADER-DESKTOP-SIZING (2026-06-04) — крупнее/чётче, мировые стандарты.
   ТОЛЬКО десктоп ≥1024px (моб <1024 НЕ затрагивается). #id-scoped (#h-poc /
   #otc-b2b-ribbon) → выигрывает независимо от порядка загрузки CSS.
   Меняем ТОЛЬКО размеры/типографику/отступы/тап-зоны; цвета/тёмная тема те же.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width:1024px){
  /* 1. Верхняя B2B-плашка ~34px, шрифт крупнее, по центру */
  #otc-b2b-ribbon{height:34px}
  #otc-b2b-ribbon .ts-label{font-size:11px;letter-spacing:1.4px}
  #otc-b2b-ribbon .ts-bar{width:18px}

  /* 2. Главный ряд ~68px + логотип крупнее, вертикальное выравнивание */
  #h-poc .dh-r1{height:68px;gap:18px}
  #h-poc .dh-logo{font-size:26px}

  /* 3. Поиск — главный акцент: поле 46px, шрифт 15px, заметнее/шире */
  #h-poc .dh-search{max-width:600px}
  #h-poc .dh-search-bar{height:46px}
  #h-poc .dh-q{font-size:15px}
  #h-poc .dh-search-bar>svg{width:18px;height:18px}
  #h-poc .dh-cam-btn{width:38px;height:38px;border-radius:19px}
  #h-poc .dh-ai-btn{height:38px}

  /* 4. «Все категории» — ключевой вход: 15px/700, иконка-гамбургер 20px, ~44px */
  #h-poc .dh-r2{height:52px;gap:18px}
  #h-poc .dh-cats-trig{font-size:15px;font-weight:700;padding:12px 16px;gap:9px}
  #h-poc .dh-cats-trig>svg:first-of-type{width:20px;height:20px}

  /* 5. Иконки корзина/избранное/чат/профиль — глиф 22px, тап-таргет 44×44,
        pointer-events на SVG выключены (кликается вся площадь кнопки) */
  #h-poc .dh-icon-btn{width:44px;height:44px;border-radius:22px}
  #h-poc .dh-icon-btn svg{width:26px;height:26px;pointer-events:none}

  /* 6. Язык/валюта/профиль — текст 14px, иконки 18px, тап-таргет ~40-44, выровнять */
  #h-poc .dh-acts{gap:12px}
  #h-poc .otc-lang-trigger{font-size:14px;padding:9px 10px;gap:6px}
  #h-poc .otc-lang-trigger>svg:first-of-type{width:18px;height:18px}
  #h-poc .dh-prof-btn{font-size:14px;padding:8px 10px;gap:8px}
  #h-poc .dh-acts-div{height:24px}
  #h-poc .h-cab-btn{font-size:13px;padding:8px 14px}
}