/* pk_catnav.css — меню категорий слева (pk-cn1). Цвета — из переменных темы (premium.css),
   поэтому панель сама становится тёмной, светлой или в оттенке премиум-темы. */

:root{
  --pkcn-acc: var(--accent-solid, #C2410C);
  --pkcn-acc-txt: #FB923C;                     /* подпись «ты здесь» на тёмной теме */
  --pkcn-chip: rgba(255,255,255,.08);          /* кнопки «Закрыть», «Все категории» */
  --pkcn-chip-h: rgba(255,255,255,.13);
  --pkcn-tile: var(--surface-2, #16161A);
  --pkcn-panel: var(--surface-1, #111113);
  --pkcn-line: var(--border, #26262B);
  --pkcn-txt: var(--text, #E5E7EB);
  --pkcn-mut: var(--muted, #9CA3AF);
}
html[data-theme="light"]{
  --pkcn-acc-txt: var(--accent-solid, #C2410C);
  --pkcn-chip: #EEF0F4;
  --pkcn-chip-h: #E3E6EC;
}

/* ───────── кнопка «Категории» в шапке ───────── */
.pkcn-btn{ display:flex; align-items:center; gap:8px; flex-shrink:0; height:44px; padding:0 14px 0 12px;
  border:none; border-radius:12px; background:var(--pkcn-acc); color:#fff; cursor:pointer;
  font:inherit; font-weight:800; font-size:.92rem; line-height:1; white-space:nowrap;
  box-shadow:0 2px 8px rgba(194,65,12,.28); -webkit-tap-highlight-color:transparent;
  transition:filter .15s ease, transform .15s ease; }
.pkcn-btn:hover{ filter:brightness(1.08); }
.pkcn-btn:active{ transform:scale(.97); }
.pkcn-btn:focus-visible{ outline:3px solid rgba(251,146,60,.6); outline-offset:2px; }
.pkcn-ic{ display:grid; grid-template-columns:7px 7px; gap:3px; flex-shrink:0; }
.pkcn-ic b{ display:block; width:7px; height:7px; border-radius:2px; background:#fff; }
.pkcn-br{ display:none; }

/* Компьютер: поиск может сужаться, чтобы шапка не вылезала за край */
@media (min-width:769px){
  .pkcn-btn ~ .search-form{ min-width:0; }
  .pkcn-btn ~ .search-form input{ min-width:0; width:0; }
}
/* Компьютер: шапка и так плотная — кнопка квадратом со значком, подсказка «Категории» при наведении */
@media (min-width:769px){
  .pkcn-btn{ width:44px; padding:0; justify-content:center; }
  .pkcn-btn .pkcn-tx{ display:none; }
}
/* ───────── шапка на телефоне (решение владельца 30.09.2026) ─────────
   1-я строка: «Категории» слева · ПроКупи по центру · ☰ справа.
   2-я строка: поиск на всю ширину. «Вся Россия» — выезжает под поиском, когда в него нажали,
   и лежит в ☰ вместе с «Скачать приложение». */
@media (max-width:768px){
  header .header-inner{ row-gap:0 !important; column-gap:8px !important; padding:6px 8px 0 !important; }
  .pkcn-br{ display:none !important; }
  .pkcn-btn{ order:0; height:40px; margin:0; padding:0 12px 0 11px; gap:8px; font-size:.9rem; border-radius:11px; }
  .pkcn-btn ~ .logo{ order:1; flex:1 1 auto; justify-content:center; min-width:0; margin:0 !important; }
  .pkcn-btn ~ .logo > span{ font-size:1.4rem !important; font-weight:900 !important; letter-spacing:-.4px; }
  .pkcn-btn ~ .logo img{ height:34px !important; }
  .pkcn-btn ~ .nav-right{ order:2; margin-left:0 !important; }
  html body header .nav-right a.app-dl-btn{ display:none !important; }
  .pkcn-btn ~ .search-form{ order:3; flex:0 0 100% !important; width:100% !important; max-width:none !important;
    min-width:0 !important; margin:8px 0 8px !important; }
  .pkcn-btn ~ .search-form input{ min-width:0; height:40px !important; font-size:16px !important; }
  .pkcn-btn ~ .search-form button{ height:40px !important; }

  /* «Где искать: Вся Россия» — это тот же выбор города (pk_city.js), только под поиском */
  header .pk-city{ display:none !important; order:4; flex:0 0 100%; margin:0 0 8px; }
  header.pkcn-srch .pk-city{ display:block !important; }
  header.pkcn-srch .pk-city-btn{ width:100%; max-width:none !important; height:44px; padding:0 12px; gap:8px;
    justify-content:flex-start; border-radius:12px !important; background:var(--surface-2) !important;
    border:1px solid var(--border) !important; color:var(--text) !important; font-size:.92rem; }
  header.pkcn-srch .pk-city-txt{ display:flex; align-items:baseline; gap:6px; min-width:0; }
  header.pkcn-srch .pk-city-txt::before{ content:"Где искать:"; font-weight:700; white-space:nowrap; }
  header.pkcn-srch .pk-city-name{ color:var(--pkcn-acc-txt); font-weight:800; }
  header.pkcn-srch .pk-city-reg{ display:none; }
  header.pkcn-srch .pk-city-btn::after{ content:"Изменить ›"; margin-left:auto; padding-left:8px; color:var(--pkcn-acc-txt);
    font-weight:800; white-space:nowrap; }
  header.pkcn-srch .pk-city-pop{ left:0 !important; right:0 !important; width:auto !important; max-width:none !important; }
}
@media (max-width:359px){
  .pkcn-btn{ padding:0 9px; font-size:.82rem; }
  .pkcn-btn ~ .logo > span{ font-size:1.2rem !important; }
}
/* пункты «Вся Россия» и «Скачать приложение» в ☰ — только на телефоне (на компьютере они и так в шапке) */

/* ───────── панель ───────── */
.pkcn{ position:fixed; inset:0; z-index:100001;   /* выше нижней панели (99999) */ visibility:hidden; pointer-events:none; }
.pkcn.open{ visibility:visible; pointer-events:auto; }
.pkcn-ov{ position:absolute; inset:0; background:rgba(0,0,0,.18); opacity:0; transition:opacity .25s ease; }   /* pk-cn7: страницу справа видно */
.pkcn.open .pkcn-ov{ opacity:1; }
.pkcn-pn{ position:absolute; top:0; left:0; bottom:0; width:max(210px, 54vw); max-width:340px; display:flex; flex-direction:column;   /* pk-cn7: полэкрана */
  background:var(--pkcn-panel); color:var(--pkcn-txt); box-shadow:10px 0 34px rgba(0,0,0,.28);
  transform:translateX(-102%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  overflow:hidden; outline:none; }
.pkcn.pkcn-now .pkcn-pn, .pkcn.pkcn-now .pkcn-ov{ transition:none; }   /* pk-cn7: после перехода панель уже открыта, без выезда */
.pkcn.open .pkcn-pn{ transform:none; }
.pkcn.drag .pkcn-pn, .pkcn.drag .pkcn-ov{ transition:none; }
html.pkcn-lock, html.pkcn-lock body{ overflow:hidden !important; }

.pkcn-hd{ display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:10px; flex-shrink:0;
  border-bottom:1px solid var(--pkcn-line); }
.pkcn-hd > b{ flex:1; font-size:1.2rem; font-weight:900; letter-spacing:-.2px; }
.pkcn-hd button{ display:flex; align-items:center; justify-content:center; gap:6px; height:42px; padding:0 13px;
  border:none; border-radius:12px; background:var(--pkcn-chip); color:var(--pkcn-txt); cursor:pointer;
  font:inherit; font-size:.9rem; font-weight:800; -webkit-tap-highlight-color:transparent; }
.pkcn-hd button:hover{ background:var(--pkcn-chip-h); }
.pkcn-hd .pkcn-back{ justify-content:flex-start; height:46px; font-size:1rem; padding:0 12px; }
/* pk-cn7: «Скрыть меню» — большая тёмная кнопка во всю ширину панели */
.pkcn-hd .pkcn-hide{ height:48px; width:100%; border-radius:11px; background:#ECEEF1; color:#16181C; font-size:1rem; font-weight:800; }
html[data-theme="light"] .pkcn-hd .pkcn-hide{ background:#1F2937; color:#FFFFFF; }
.pkcn-hd .pkcn-hide:hover{ filter:brightness(1.08); background:#ECEEF1; }
html[data-theme="light"] .pkcn-hd .pkcn-hide:hover{ background:#1F2937; }
.pkcn-back span{ font-size:1.5rem; line-height:1; margin-top:-3px; }

.pkcn-sc{ flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:8px 8px 20px; }
.pkcn-sc.fwd{ animation:pkcnFwd .24s ease; }
.pkcn-sc.bck{ animation:pkcnBck .24s ease; }
@keyframes pkcnFwd{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }
@keyframes pkcnBck{ from{ opacity:0; transform:translateX(-26px); } to{ opacity:1; transform:none; } }

.pkcn-t2{ display:flex; align-items:center; gap:8px; padding:2px 2px 8px; font-size:1.05rem; font-weight:900; line-height:1.2; }
.pkcn-t2 img{ width:32px; height:32px; object-fit:contain; flex-shrink:0; }
.pkcn-go{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 12px;
  margin:0 0 8px; border-radius:12px; background:var(--pkcn-acc); color:#fff !important; text-decoration:none !important;
  font-weight:800; font-size:.92rem; box-shadow:0 2px 8px rgba(194,65,12,.25); }
.pkcn-go span{ font-size:1.4rem; line-height:1; }
.pkcn-go.on{ box-shadow:0 0 0 3px var(--pkcn-panel), 0 0 0 5px var(--pkcn-acc); }
.pkcn-gt{ display:flex; align-items:baseline; justify-content:space-between; margin:16px 4px 8px; }
.pkcn-gt b{ font-size:1.02rem; font-weight:900; }
.pkcn-gt a{ font-size:.88rem; font-weight:800; color:var(--pkcn-acc-txt) !important; text-decoration:none !important; padding:6px 0 6px 10px; }

/* pk-cn7: вместо крупных плиток — строки с картинкой (панель на полэкрана) */
.pkcn-grid{ display:flex; flex-direction:column; gap:0; }
.pkcn-tl{ position:relative; display:flex; flex-direction:row; align-items:center; gap:10px; min-height:44px;
  padding:4px 6px; border-radius:8px; border-bottom:1px solid var(--pkcn-line);
  color:var(--pkcn-txt) !important; text-decoration:none !important; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .15s ease; }
.pkcn-tl:hover{ background:var(--pkcn-chip); }
.pkcn-tl:active{ background:var(--pkcn-chip-h); }
.pkcn-tl img{ width:30px; height:30px; object-fit:contain; flex-shrink:0; pointer-events:none; }
.pkcn-tl b{ flex:1; min-width:0; font-size:.92rem; line-height:1.2; font-weight:650; }
.pkcn-tl.more::after{ content:"›"; font-size:1.1rem; font-weight:800; color:var(--pkcn-mut); line-height:1; }
.pkcn-tl.on{ background:var(--accent-soft, rgba(194,65,12,.12)); }
.pkcn-tl.on b{ color:var(--pkcn-acc-txt); font-weight:800; }
.pkcn-tl.on i{ display:none; }

.pkcn-wait{ padding:40px 10px; text-align:center; color:var(--pkcn-mut); font-weight:700; }
.pkcn-wait button{ margin-top:12px; height:42px; padding:0 18px; border:none; border-radius:12px;
  background:var(--pkcn-acc); color:#fff; font:inherit; font-weight:800; cursor:pointer; }

/* развилка раздела: Купить / Снять надолго / Посуточно · Ищу работу / Ищу сотрудника */
.pkcn-fk{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 8px; }
.pkcn-fb{ min-height:38px; padding:4px 6px; border:none; border-radius:11px; background:var(--pkcn-chip); color:var(--pkcn-txt);
  font:inherit; font-weight:800; font-size:.8rem; line-height:1.15; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pkcn-fb:hover{ background:var(--pkcn-chip-h); }
.pkcn-fb.on{ background:var(--pkcn-txt); color:var(--pkcn-panel); }
.pkcn-map{ display:flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; margin:0 0 8px; border-radius:11px;
  background:var(--pkcn-chip); color:var(--pkcn-txt) !important; text-decoration:none !important; font-size:.88rem; }
.pkcn-map b{ flex:1; font-weight:800; }
.pkcn-map span{ font-size:1.4rem; line-height:1; color:var(--pkcn-mut); }
.pkcn-map svg{ flex-shrink:0; color:var(--pkcn-acc-txt); }
.pkcn-map:hover{ background:var(--pkcn-chip-h); }

/* ───────── всплывашка на странице объявления (только компьютер) ───────── */
.pkcn-tip{ position:fixed; left:24px; bottom:24px; z-index:100000; width:400px; max-width:calc(100vw - 48px);
  background:var(--surface-2, #fff); color:var(--text, #1F2430); border:2px solid var(--pkcn-acc); border-radius:16px;
  padding:16px 16px 14px; box-shadow:0 14px 40px rgba(0,0,0,.25); animation:pkcnTip .35s ease; }
@keyframes pkcnTip{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.pkcn-tip h4{ margin:0 40px 6px 0; font-size:1.02rem; font-weight:900; line-height:1.25; }
.pkcn-tip p{ margin:0; font-size:.9rem; line-height:1.4; color:var(--muted, #5B6472); }
.pkcn-tip p b{ color:#E53935; }
.pkcn-tip-x{ position:absolute; top:10px; right:10px; width:32px; height:32px; border:none; border-radius:50%;
  background:var(--pkcn-chip); color:var(--text, #1F2430); font-size:1rem; font-weight:900; cursor:pointer; }
.pkcn-tip-b{ display:flex; gap:8px; margin-top:12px; }
.pkcn-tip-b button{ flex:1; height:42px; border:none; border-radius:11px; font:inherit; font-weight:800; font-size:.9rem; cursor:pointer; }
.pkcn-tip-fav{ background:var(--pkcn-acc); color:#fff; }
.pkcn-tip-tab{ background:var(--pkcn-chip); color:var(--text, #1F2430); }
.pkcn-tip-b button:hover{ filter:brightness(1.06); }
.pkcn-tip small{ display:block; margin-top:10px; font-size:.78rem; color:var(--text-faint, #9AA1AC); }
.pkcn-tip small button{ border:none; background:none; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer; }

/* ───────── pk-cn2: компьютер — категории всегда слева на главной ─────────
   Строками (значок · подпись · ›), как в админке. Уже 1100 px места нет — остаётся кнопка «Категории». */
.pkcn-dock{ display:none; }
@media (min-width:1100px){
  .page-wrap:has(.pkcn-dock){ max-width:1500px; }
  body:has(.pkcn-dock) header .header-inner{ max-width:1500px; }
  .content-with-sidebar:has(> .pkcn-dock){ grid-template-columns:250px minmax(0,1fr) 220px; }
  .pkcn-dock{ display:block; position:sticky; top:72px; max-height:calc(100vh - 84px); overflow-y:auto; overscroll-behavior:contain;
    background:var(--pkcn-panel); color:var(--pkcn-txt); border:1px solid var(--pkcn-line); border-radius:16px; padding:10px 8px 12px;
    box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.05); }
  .pkcn-dock::-webkit-scrollbar{ width:6px; } .pkcn-dock::-webkit-scrollbar-thumb{ background:var(--pkcn-line); border-radius:3px; }
}
@media (min-width:1100px) and (max-width:1399px){
  .content-with-sidebar:has(> .pkcn-dock) #listings-container.listings-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}
.pkcn-dk-in.fwd{ animation:pkcnFwd .2s ease; } .pkcn-dk-in.bck{ animation:pkcnBck .2s ease; }
.pkcn-dk-h{ padding:4px 8px 8px; font-size:1.08rem; font-weight:900; }
.pkcn-dk-l{ display:flex; flex-direction:column; }
.pkcn-dr{ display:flex; align-items:center; gap:10px; min-height:44px; padding:5px 8px; border-radius:10px;
  border-bottom:1px solid var(--pkcn-line); color:var(--pkcn-txt) !important; text-decoration:none !important;
  font-weight:650; font-size:.92rem; line-height:1.2; }
.pkcn-dr:last-child{ border-bottom:none; }
.pkcn-dr img{ width:32px; height:32px; object-fit:contain; flex-shrink:0; }
.pkcn-dr span{ flex:1; min-width:0; }
.pkcn-dr s{ text-decoration:none; color:var(--pkcn-mut); font-size:1.15rem; font-weight:800; }
.pkcn-dr:hover{ background:var(--pkcn-chip); }
.pkcn-dr.on{ background:var(--accent-soft, rgba(194,65,12,.12)); box-shadow:inset 3px 0 0 var(--pkcn-acc); color:var(--pkcn-acc-txt) !important; font-weight:800; }
.pkcn-dk-back{ display:flex; align-items:center; gap:6px; width:100%; height:42px; margin:0 0 8px; padding:0 12px; border:none; border-radius:11px;
  background:var(--pkcn-chip); color:var(--pkcn-txt); font:inherit; font-size:.95rem; font-weight:800; cursor:pointer; }
.pkcn-dk-back span{ font-size:1.35rem; line-height:1; margin-top:-2px; }
.pkcn-dk-back:hover{ background:var(--pkcn-chip-h); }
.pkcn-dock .pkcn-t2{ font-size:1.05rem; padding:2px 4px 8px; } .pkcn-dock .pkcn-t2 img{ width:34px; height:34px; }
.pkcn-dock .pkcn-fb{ min-height:38px; font-size:.82rem; }
.pkcn-dock .pkcn-go{ min-height:44px; font-size:.9rem; padding:0 12px; margin-bottom:8px; }
.pkcn-dock .pkcn-map{ min-height:42px; font-size:.88rem; padding:0 12px; margin:0 0 8px; }
.pkcn-dock .pkcn-gt{ margin:12px 6px 4px; }

/* Компьютер и планшет: панель пошире, 4 плитки в ряд */
@media (min-width:700px){
  .pkcn-pn{ width:452px; max-width:92vw; }
  .pkcn-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  .pkcn-pn, .pkcn-ov{ transition:none; }
  .pkcn-sc.fwd, .pkcn-sc.bck{ animation:none; }
}

/* ───────── pk-cn4: «‹ Все категории» — заметная кнопка: синяя рамка, синие буквы (понятно и детям, и бабушкам) ───────── */
:root{ --pkcn-blue:#8AB4FF; --pkcn-blue-bg:transparent; }            /* тёмная тема */
html[data-theme="light"]{ --pkcn-blue:#1D4ED8; --pkcn-blue-bg:#FFFFFF; }
.pkcn-hd .pkcn-back, .pkcn-dk-back{ height:48px !important; gap:9px !important; border:2px solid var(--pkcn-blue) !important;
  background:var(--pkcn-blue-bg) !important; color:var(--pkcn-blue) !important; font-weight:800 !important; font-size:1rem !important;
  border-radius:11px !important; box-sizing:border-box; text-decoration:none; }
.pkcn-hd .pkcn-back:hover, .pkcn-dk-back:hover{ background:rgba(29,78,216,.08) !important; }
.pkcn-hd .pkcn-back:focus-visible, .pkcn-dk-back:focus-visible{ outline:3px solid rgba(29,78,216,.35); outline-offset:2px; }
.pkcn-bic{ display:grid; grid-template-columns:7px 7px; gap:3px; flex-shrink:0; }
.pkcn-bic b{ display:block; width:7px; height:7px; border-radius:2px; background:currentColor; }

/* pk-cn6: «Категории» на компьютере — колонка слева на миг подсвечивается синей рамкой */
@keyframes pkcnFlash{ 0%{ box-shadow:0 0 0 3px var(--pkcn-blue); } 100%{ box-shadow:0 0 0 3px transparent; } }
.pkcn-dock.pkcn-flash{ animation:pkcnFlash 1.2s ease-out 1; }

/* pk-cn7: меню ☰ на телефоне — тоже на полэкрана */
@media (max-width:768px){
  html body .aa-drawer-ov .aa-drawer{ width:max(210px, 56vw) !important; max-width:340px !important; }
}
/* pk-cn7: «‹ Все категории» в узкой панели — в одну строку */
.pkcn-hd .pkcn-back{ padding:0 10px !important; gap:7px !important; font-size:.95rem !important; white-space:nowrap; justify-content:flex-start !important; }
/* pk-cn7: пустой раздел — одна строка текста, без серых коробок */
.pk-empty{ grid-column:1/-1; margin:6px 0 16px; padding:0; font-size:1rem; line-height:1.5; color:var(--muted, #64748b);
  background:none; border:0; box-shadow:none; text-align:left; }
/* pk-cn7: меню ☰ в полэкрана — кнопка «Подать» и «Где искать» без ломаных строк */
@media (max-width:768px){
  html body .aa-drawer a.pkm-post{ margin:4px 10px 10px !important; font-size:.92rem !important; white-space:nowrap; }
  html body .aa-drawer .pkm-city .aa-gi-l{ display:block !important; }
  html body .aa-drawer .aa-gi{ padding:.75rem .7rem !important; gap:.6rem !important; }
}