<style>
  /* === KEYFRAMES для бегущей строки (вынесены наверх, работают в Safari) === */
  @keyframes ticker-left  { from{ transform: translate3d(0,0,0); }   to{ transform: translate3d(-50%,0,0); } }
  @keyframes ticker-right { from{ transform: translate3d(-50%,0,0);} to{ transform: translate3d(0,0,0); } }
  @-webkit-keyframes ticker-left  { from{ -webkit-transform: translate3d(0,0,0); }   to{ -webkit-transform: translate3d(-50%,0,0); } }
  @-webkit-keyframes ticker-right { from{ -webkit-transform: translate3d(-50%,0,0);} to{ -webkit-transform: translate3d(0,0,0); } }

  :root { --gold: #d4af37; }

  @keyframes goldGlow {
    0% { box-shadow: 0 0 0 2px rgba(212,175,55,.18) inset, 0 0 10px rgba(212,175,55,.25), 0 0 0 rgba(212,175,55,0); }
    100%{ box-shadow: 0 0 0 2px rgba(212,175,55,.28) inset, 0 0 22px rgba(212,175,55,.55), 0 0 48px rgba(212,175,55,.35); }
  }

  .catalog-layout{ display:grid; grid-template-columns: 280px 1fr; gap:16px; }
  @media (max-width: 900px){ .catalog-layout{ grid-template-columns: 1fr; } }

  .sidebar{ position: relative; }
  .sidebar .filters{ display:grid; gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; }
  .filters .select, .filters .input, .filters .btn{ width:100%; }
  .filters .chk{ display:flex; align-items:center; gap:18px; }
  .filters .row-inline{ display:flex; gap:8px; }
  .filters .row-inline .btn{ flex:1; }

  .role-block{ border:1px solid var(--gold); border-radius:8px; padding:10px; margin-bottom:8px; }
  .role-block label{ color:var(--gold); }

  .sticky-col { }
  @media (min-width: 901px){
    .sticky-col{ position: sticky; top: 12px; }
  }

  .latest-block{ margin-top:12px; }
  .latest-block .lb-head{ font-weight:800; margin:10px 0 6px; }
  .latest-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; }
  .latest-grid .latest-item{
    display:block;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color .2s ease;
  }
  .latest-grid img{
    width:100%; height:auto; display:block;
    aspect-ratio: 1 / 1; object-fit: cover;
    transition: transform .22s ease;
  }
  .latest-grid .latest-item:hover { outline-color: #2ecc71; }
  .latest-grid .latest-item:hover img{ transform: scale(1.04); }

  .grid.grid-catalog{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:26px; align-items:stretch; }
  @media (max-width:1200px){ .grid.grid-catalog{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width:820px){ .grid.grid-catalog{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width:820px){
    .grid.grid-catalog{ gap: 9px; grid-template-columns: repeat(2, 1fr); }
  }

  .card.posrel.vip-outline{ border: 3px solid var(--gold) !important; border-radius: 12px; }
  .card.posrel{ position:relative; }
  .vip-outline{ border-color: var(--gold); }

  .prem-outline{
    border-width: 6px;
    border-color: var(--gold);
    box-shadow: none !important;
    animation: none !important;
  }

  @keyframes goldGlowBig{
    0%{ box-shadow: 0 0 0 2px rgba(212,175,55,.25) inset, 0 0 24px rgba(212,175,55,.45), 0 0 60px rgba(212,175,55,.35), 0 0 0 rgba(212,175,55,0); }
    100%{ box-shadow: 0 0 0 2px rgba(212,175,55,.45) inset, 0 0 48px rgba(212,175,55,.75), 0 0 120px rgba(212,175,55,.60), 0 0 180px rgba(212,175,55,.40); }
  }

  .removed-outline{ border:2px solid #e74c3c; }
  .removed-badge{
    position:absolute; top:8px; right:8px;
    background:rgba(0,0,0,.8); color:#ffd9d9; border:1px solid #e74c3c;
    font-weight:800; font-size:12px; padding:4px 8px; border-radius:8px; z-index:6;
  }

  .badge-stack{
    position:absolute; top:6px; left:6px;
    display:flex; flex-direction:column; align-items:flex-start;
    gap:6px; z-index:5; pointer-events:none;
  }
  .badge-stack .corner-badge{ position: static !important; }

  .corner-badge{
    display:inline-flex; align-items:center; gap:6px;
    height:26px; padding:0 8px; border-radius:10px;
    font-size:13px; font-weight:790; line-height:1;
  }

.vip-badge{  border:1px solid #fff; background:var(--gold); color:#000; }

.premium-badge{
  position: relative;
  overflow: visible; /* корона может выходить */
  border: 2.5px solid rgba(255,232,160,.60);
  color:#0b0b0b;
  letter-spacing: .9px;
  text-transform: uppercase;

  background: linear-gradient(90deg,
    #b78c1b 0%,
    #d4af37 28%,
    #ffe7a3 50%,
    #d4af37 72%,
    #b78c1b 100%);
  background-size: 440% 200%;

  box-shadow:
    0 0 0 2px rgba(212,175,55,.18) inset,
    0 10px 24px rgba(212,175,55,.22);

  animation: premBadgeShimmer 2.4s ease-in-out infinite;
}







/* “сверкание” рамки без колхоза */
.premium-badge::after{
  content:"";
  position:absolute;
  inset: -6px;          /* рамка стала чуть больше */
  border-radius: inherit;
  padding: 3.5px;       /* рамка толще/выразительнее */

  background: linear-gradient(120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,235,190,.55) 45%,
    rgba(255,255,255,.85) 50%,
    rgba(255,235,190,.55) 55%,
    rgba(255,255,255,0) 65%
  );
  background-size: 220% 100%;
  animation: premBorderShine 2.8s ease-in-out infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events:none;
  opacity: .78;
  mix-blend-mode: screen;
  z-index: 1;
}


/* движение блика по рамке */
@keyframes premBorderShine{
  0%{ background-position: 0% 0; opacity:.55; }
  50%{ background-position: 100% 0; opacity:.95; }
  100%{ background-position: 0% 0; opacity:.55; }
}

/* уважение к reduced motion */
@media (prefers-reduced-motion: reduce){
  .premium-badge::after{ animation:none; opacity:.35; }
}

/* содержимое бейджа поверх рамки */
.premium-badge > *{
  position: relative;
  z-index: 2;
}


@keyframes premBadgeShimmer{
  0%{ background-position: 0% 0; filter:saturate(105%); }
  50%{ background-position: 100% 0; filter:saturate(130%); }
  100%{ background-position: 0% 0; filter:saturate(105%); }
}

/* корона “дороже”: чуть больше, с мягким свечением */
.premium-badge .crown{
  display:inline-block;
  font-size: 24px;
  transform: translateY(-10px); /* корона вылезает наружу */
  margin-right: 2px;
  filter: drop-shadow(0 2px 8px rgba(212,175,55,.55));
  z-index: 3;
}


  .std-badge{
    border: 1px solid #999;
    background: #ddd;
    color: #000;
  }

  .corner-badge .crown{ font-size:21px; transform:translateY(-1px); }
  .corner-badge .star{ font-size:15px; transform:translateY(0px); }

  .med-badge{ border:0.1px solid var(--gold); background: #1E90FF; color:#000; }
  .corner-badge .plus{ font-size:19px; color:#2ecc71; }
  
  
    .admin-rec-badge{
    border: none;
    background: transparent;
    padding: 0;
    height: auto;
  }

.spin-star{
  display:inline-block;
  font-size: 29px;
  color: var(--gold);
  text-shadow:
    0 0 4px rgba(212,175,55,.7),
    0 0 10px rgba(212,175,55,.9),
    0 0 18px rgba(212,175,55,.8);
  animation: spinStar 2s linear infinite;
  transform-origin: 50% 50%;
}

/* одна анимация: и вращение, и лёгкий пульс */
@keyframes spinStar{
  0%{
    transform: rotate(0deg) scale(0.9);
    text-shadow:
      0 0 4px rgba(212,175,55,.5),
      0 0 10px rgba(212,175,55,.7),
      0 0 18px rgba(212,175,55,.6);
  }
  50%{
    transform: rotate(180deg) scale(1.05);
    text-shadow:
      0 0 6px rgba(212,175,55,1),
      0 0 14px rgba(212,175,55,1),
      0 0 26px rgba(212,175,55,1);
  }
  100%{
    transform: rotate(360deg) scale(0.9);
    text-shadow:
      0 0 4px rgba(212,175,55,.5),
      0 0 10px rgba(212,175,55,.7),
      0 0 18px rgba(212,175,55,.6);
  }
}


  @media (max-width: 820px){
    .spin-star{
      font-size: 27px;
    }
  }


   /* общий контейнер для нижних бейджей на фото */
  .bottom-badges{
    position:absolute;
    left:8px;
    bottom:8px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    z-index:10;
  }

  /* сами бейджи уже не абсолютные — контейнер держит их у низа */
  .verified-tag{
    position:static;
    display:inline-flex; align-items:center; gap:6px;
    height:23px; padding:0 10px; border-radius:10px; font-size:12px; font-weight:800;
    background: rgba(0,0,0,.75); border:2px solid #2ecc71; color:#e9ffe9;
  }
  .verified-tag .check{ color:#2ecc71; font-size:17px; }

  .admin-rec-tag{
    position:static;
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:23px;
    padding:0 10px;
    border-radius:10px;
    font-size:10.5px;
    font-weight:800;
    background: rgba(0,0,0,.85);
    border:3px solid var(--gold);
    color:#fff;
  }


  
  

  /* === Слайдер карточки: переход на fade === */
  .photo-wrap{
    position:relative; overflow:hidden; aspect-ratio: 3 / 4;
    border-top-left-radius:12px; border-top-right-radius:12px;
    background:#000;
  }
  .photo-wrap .slider-track{
    position:relative; width:100%; height:100%;
  }
  .photo-wrap .slider-slide{
    position:absolute; inset:0;
    opacity:0; transition: opacity .45s ease;
  }
  .photo-wrap .slider-slide.is-active{ opacity:1; z-index:2; }
  .photo-wrap .slider-slide img{
    width:100%; height:100%; object-fit:cover; display:block;
    border-top-left-radius:12px; border-top-right-radius:12px;
  }

  .grid-catalog .card img{
    width:100%; height:95%; display:block; aspect-ratio:3/4; object-fit:cover;
    border-top-left-radius:12px; border-top-right-radius:12px;
  }

  .photo-wrap .slider-slide video,
  .photo-wrap .slider-slide iframe{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
  }
  .photo-wrap .slider-slide iframe{ pointer-events:none; }

  .s-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:25px; height:25px; border-radius:50%;
    border:1px solid rgba(255,255,255,.4);
    background:rgba(0,0,0,.35); color:#fff; cursor:pointer; z-index:6;
    display:flex; align-items:center; justify-content:center; font-size:18px;
  }
  .s-arrow.left{ left:8px; } .s-arrow.right{ right:8px; }
  @media (hover:none){ .s-arrow{ display:none; } }

.phone-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:6px auto 0;
  padding:6px 10px;
  border-radius:8px;
  font-weight:760;
  letter-spacing:.6px;
  text-align:center;
}

  .phone-pill.vip{ border:2px solid var(--gold); color:var(--gold); }
  .phone-pill.std{ border:1px solid #fff; color:#fff; }

  .phone-btn{ display:inline-block; margin:-8px auto 0; padding:5px 6px; border-radius:8px; font-weight:760; letter-spacing:.6px; text-align:center; cursor:pointer; border:1px solid var(--line); background:transparent; user-select:none; }
  .phone-btn.vip{ border-color:var(--gold); color:var(--gold); }
  .phone-btn.std{ border-color:#fff; color:#fff; }
  .phone-btn.loading{ opacity:.7; pointer-events:none; }

  .phone-btn .wa-ico{
    margin-left:-1px;
    margin-right:2px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:40%;
    background:#25D366;        /* фирменный зелёный WhatsApp */
    color:#fff;
    font-size:21px;
    font-weight:800;
  }


  .phone-btn{ display:inline-block; margin:-8px auto 0; padding:5px 6px; border-radius:8px; font-weight:500; letter-spacing:.6px; text-align:center; cursor:pointer; border:1px solid var(--line); background:transparent; user-select:none; }
  .phone-btn.vip{ border-color:var(--gold); color:var(--gold); }
  .phone-btn.std{ border-color:#fff; color:#fff; }
  .phone-btn.loading{ opacity:.7; pointer-events:none; }

  .fav-btn{position:absolute;top:8px;right:8px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.6);color:#fff;padding:4px 8px;cursor:pointer;z-index:6}
  .fav-btn.active{background:#ffcc00;color:#000;border-color:#ffcc00}

  .pagination{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
  .pagination a{ padding:6px 10px; border:1px solid var(--line); border-radius:8px; text-decoration:none; }
  .pagination a.active{ background:var(--line); }

  .filters-toggle{ display:none; }
  @media (max-width: 900px){
    .filters-toggle{ display:inline-flex; margin:8px 0 12px; }
    .sidebar .filters{ display:none; }
    .sidebar .filters.is-open{ display:grid; }
  }
  @media (min-width: 901px){ .filters-toggle{ display:none; } }

  @media (max-width: 820px){
    .grid-catalog .card .b strong{ font-size: 15px; line-height: 1.15; }
    .grid-catalog .corner-badge{ height: 20px; padding: 0 6px; border-radius: 8px; font-size: 11px; }
    .grid-catalog .corner-badge .crown{ font-size: 24px; transform: translateY(-1px); }
    .grid-catalog .corner-badge .star{ font-size: 14px; transform: translateY(0); }
    .grid-catalog .corner-badge .plus{ font-size: 15px; }
  }
  @media (max-width: 820px){
    .grid-catalog .card .b .muted{ font-size: 13px; line-height: 1.25; }
  }
  @media (max-width: 820px){
    .grid-catalog .card .b > div:nth-of-type(3){ display: none; }
  }
  @media (max-width: 820px){
    .grid-catalog .card .b .row{
      display: flex; flex-direction: column; align-items: flex-start;
      justify-content: flex-start !important; gap: 4px;
    }
    .grid-catalog .card .b .row .pill{ align-self: flex-start; margin: 0; }
  }
  @media (max-width: 820px){
    .grid-catalog .card .phone-btn{ font-size: 13.5px; padding: 4px 6px; border-radius: 8px; line-height: 1.15; }
    .grid-catalog .card .b{ padding-top: 0px; }
    .grid-catalog .card .b .muted{ margin-top: 4px !important; }
  }
   @media (max-width: 820px){
    .grid-catalog .bottom-badges{
      left: 6px;
      bottom: 6px;
      gap: 5px;
    }
    .grid-catalog .verified-tag{
      height: 19.5px;
      padding: 0 8px;
      border-radius: 8px;
      font-size: 10px;
      gap: 4px;
      border-width: 1.5px;
    }
    .grid-catalog .verified-tag .check{ font-size: 14px; }
  }

  @media (max-width: 820px){
    .grid-catalog .card .b > div:last-child{ margin-top: 4px !important; }
    .grid-catalog .card div:has(> .phone-btn){ margin-top: 0px !important; }
  }

  /* === Floating Chat (mobile only) с анимацией === */
@media (max-width: 900px){
  .chat-fab,
  .forum-fab{
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 9998;

    padding: 9px 19px;
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(0,0,0,.38);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .3px;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    border: 4px solid var(--gold);
    will-change: box-shadow;
  }

  /* нижняя — Интим-чат */
  .chat-fab{
    bottom: calc(18px + env(safe-area-inset-bottom));
    background: #2ecc71;
    color: #000;
  }

  /* верхняя — Форум */
  .forum-fab{
    bottom: calc(18px + env(safe-area-inset-bottom) + 56px); /* можно подправить отступ */
    background: #001a4d; /* тёмно-синий фон для форума */
    color: #fff;
  }


  .chat-fab::after,
  .forum-fab::after{
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    pointer-events: none;
    animation: fabGoldPulse 1.9s ease-in-out infinite alternate;
  }

  @media (hover:hover){
    .chat-fab:hover,
    .forum-fab:hover{ filter: saturate(115%); }
  }

  .chat-fab .ico,
  .forum-fab .ico{
    font-size: 23px;
  }
}


  @media (prefers-reduced-motion: reduce){
    .chat-fab::after{ animation: none !important; }
  }

  .chat-overlay{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    opacity: 0;
    background: #0b0b0b;
    transition: opacity .28s ease;
  }
  .chat-overlay.open{ display: flex; flex-direction: column; }
  .chat-overlay.open[data-state="open"]{ opacity: 1; }
  .chat-overlay.open[data-state="closing"]{ opacity: 0; }

  .chat-overlay__sheet{
    display: flex; flex-direction: column; width: 100%;
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  .chat-overlay.open[data-state="open"] .chat-overlay__sheet{ transform: translateY(0%); }
  .chat-overlay.open[data-state="closing"] .chat-overlay__sheet{ transform: translateY(100%); }

  .chat-overlay__bar{
    --bar-h: 52px;
    height: var(--bar-h);
    padding: 0 8px calc(env(safe-area-inset-top));
    background: #111;
    border-bottom: 1px solid #2a2a2a;
    display: flex; align-items: center; justify-content: space-between;
  }
  .chat-overlay__title{ color:#fff; font-weight:800; font-size:16px; padding-left: 4px; }
  .chat-overlay__close{
    border:none; background:transparent; color:#fff; font-size:26px; line-height:1;
    width: 42px; height: 42px; border-radius: 10px; cursor:pointer;
  }
  .chat-overlay__close:active{ transform: scale(.98); }

  .chat-overlay iframe{
    width: 100%;
    height: calc(100dvh - 52px);
    border: 0;
    background: #000;
  }
@media (min-width: 901px){
  .chat-fab,
  .forum-fab{ display:none !important; }
}


  /* === Десктопная бегущая строка под меню === */
  .desktop-ticker{
    display: block;            /* всегда показываем на десктопе */
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
    color: #fff;
    margin: 12px;
    --desk-speed: 18s; /* скорость (меньше = быстрее) */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  @media (max-width: 900px){
    .desktop-ticker{ display: none; }   /* скрываем на мобилке */
  }
  .desktop-ticker__track{
    display: inline-flex;
    gap: 14px;
    align-items: center;
    white-space: nowrap;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 16px;
    will-change: transform;
    animation: ticker-left var(--desk-speed) linear infinite;
    -webkit-animation: ticker-left var(--desk-speed) linear infinite;
  }
  .desktop-ticker__track .sep{ opacity:.6; }

  /* === Мобильная БЕГУЩАЯ СТРОКА (2 ряда) === */
  .mobile-only { display: none; }
  @media (max-width: 900px){
    .mobile-only { display: block; }
    .mobile-ticker{
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      margin: 8px 12px 10px;
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 95%, transparent 100%);
              mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 95%, transparent 100%);
      --row1-speed: 12s;
      --row2-speed: 14s;
    }
    .ticker-row{
      overflow: hidden;
      padding: 8px 0;
      line-height: 1;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .ticker-row:last-child{ border-bottom: 0; }
    .ticker-track{
      display: inline-flex;
      gap: 12px;
      align-items: center;
      white-space: nowrap;
      padding-left: 12px;
      font-weight: 700;
      font-size: 16px;
      will-change: transform;
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
    }
    .ticker-track .sep{ opacity: .6; }
    .ticker-track.row1{
      animation: ticker-left var(--row1-speed) linear infinite;
      -webkit-animation: ticker-left var(--row1-speed) linear infinite;
    }
    .ticker-track.row2{
      animation: ticker-right var(--row2-speed) linear infinite;
      -webkit-animation: ticker-right var(--row2-speed) linear infinite;
    }
      .mobile-ticker .ticker-track{
    animation: ticker-left var(--row1-speed) linear infinite;
    -webkit-animation: ticker-left var(--row1-speed) linear infinite;
  }



    .wrap > h2{
      font-size:18px;
      line-height:1.2;
      margin-top:6px;
      margin-bottom:10px;
    }
    /* @media (prefers-reduced-motion: reduce){
      .ticker-track{ animation: none !important; -webkit-animation: none !important; }
    } */
  }

  /* === FIX: гарантируем видимость FAB на мобиле === */
@media (max-width: 900px){
  #chatFab,
  #forumFab{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99998 !important;
  }
  #chatOverlay{ z-index: 99999 !important; }
}


  /* === Индикаторы непрочитанных === */
  .chat-blink{ animation: chatBlink .9s ease-in-out infinite alternate; }
  @keyframes chatBlink{
    0%{ filter: saturate(100%); transform: translateZ(0) scale(1); }
    100%{ filter: saturate(185%); transform: translateZ(0) scale(1.03); }
  }
  .chat-ind-badge{
    position:absolute; top:-6px; right:-6px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background:#ff3b63; color:#fff;
    font-size: 12px; font-weight: 800; line-height: 18px;
    display: none; align-items:center; justify-content:center;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
  }
  .chat-menu-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:16px; height:16px; padding:0 5px; margin-left:6px;
    border-radius:999px; background:#ff3b63; color:#fff;
    font-size:11px; line-height:16px; font-weight:800;
  }

  /* Подняли бейдж поверх активного кадра и отключили клики по нему */
  .photo-wrap .slider-slide{ z-index:1; }
  .photo-wrap .slider-slide.is-active{ z-index:2; }
  .photo-wrap .verified-tag{
    z-index: 10;
    pointer-events: none;
  }

  /* VIP шрифты */
  .vip-badge{ font-size: 13px; }
  @media (max-width: 820px){
    .grid-catalog .vip-badge{ font-size: 12px; }
  }
  /* Мобилка: уменьшить зазор между кнопкой "Показать фильтры" и карточками */
@media (max-width: 900px){
  /* меньше отступ у кнопки */
  .filters-toggle{
    margin: 6px 0 6px !important; /* было 8px 0 12px */
  }

  /* уменьшить вертикальный gap между колонками sidebar/main,
     на мобиле он становится межстрочным */
  .catalog-layout{
    gap: 1px !important;          /* было 16px */
    row-gap:1px !important;      /* на всякий случай явно */
  }

  /* страхуемся от возможных внешних отступов */
  .sidebar, .sticky-col{ margin: 0 !important; }
  .catalog-layout > main{ margin-top: 0 !important; }
}

/* Уменьшаем отступ над десктопной бегущей строкой */
@media (min-width: 901px){
  .desktop-ticker{
    margin-top: 0px;   /* было 10px — поставь 0–6px как нравится */
  }
}
/* Уменьшаем отступ над мобильной бегущей строкой */
@media (max-width: 900px){
  .mobile-ticker{
    margin-top: -3px;          /* было 8px — поставь 0–6px как нужно */
    margin-bottom: 5px;
  }
}
/* === Десктопный док для ЛС (бейдж непрочитанных) === */
@media (min-width: 901px){
  .dm-dock{
    position: fixed; right: 16px; bottom: 18px; z-index: 9998;
  }
  .dm-dock__btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:12px; text-decoration:none;
    background:#111; color:#fff; border:1px solid var(--line);
    font-weight:800; letter-spacing:.2px;
    box-shadow:0 10px 26px rgba(0,0,0,.35);
  }
  .dm-dock__btn:hover{ filter:saturate(115%); }
  .dm-dock__btn .ico{ font-size:18px; }
  .dm-dock__badge{
    display:none; min-width:18px; height:18px; padding:0 6px;
    border-radius:999px; background:#ff3b63; color:#fff;
    font-size:12px; line-height:18px; font-weight:800;
  }
}
@media (max-width: 900px){
  .dm-dock{ display:none !important; }
}


/* Кнопка "Мои сообщения" — золото, размер как у "Показать фильтры" */
/* Кнопка "Мои сообщения" — золото, размер как у "Показать фильтры" */
#dmMobileBtn{
  display:inline-flex;
  align-items:center;
  justify-content: center; /* центрируем содержимое */
  gap:8px;                       /* отступ между иконкой и текстом */
  padding:8px 12px;              /* те же отступы, что и у .filters-toggle */
  border-radius:8px;
  background: var(--gold);
  color:#000;
  border: 1px solid var(--gold);
  font-weight: 800;
  font-size: 14px; /* добавляем явный размер шрифта как у filters-toggle */
  line-height: 1.2; /* добавляем высоту строки */
  text-decoration: none; /* убираем подчеркивание ссылки */
  min-height: 40px; /* задаем минимальную высоту как у filters-toggle */
  box-sizing: border-box; /* учитываем padding в общей высоте */
}

/* Делаем иконку и текст выровненными по вертикали */
#dmMobileBtn .ico{
  display:inline-flex;
  line-height:0;
  align-items: center;
}

/* Бейдж непрочитанных вмещается рядом с текстом */
#dmMobileBtn .chat-menu-badge{
  margin-left:6px;
}

/* Убедимся, что кнопка фильтров имеет такие же параметры */
.filters-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  min-height: 40px;
  box-sizing: border-box;
}
#dmMobileBtn:hover{ filter: saturate(115%); }

/* Иконка конверта внутри кнопки */
#dmMobileBtn .ico{
  display:inline-flex;
  line-height:0;
}

/* Бейдж непрочитанных вмещается рядом с текстом */
#dmMobileBtn .chat-menu-badge{
  margin-left:6px;
}

/* Общие стили для обеих кнопок в мобильной версии */
@media (max-width: 900px){
  .filters-toggle,
  #dmMobileBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    gap: 8px !important;
  }
  
  /* Специфичные стили для кнопки "Мои сообщения" */
  #dmMobileBtn {
    background: var(--gold) !important;
    color: #000 !important;
    border: 1px solid var(--gold) !important;
    margin-left: 8px !important;
  }
  
  /* Специфичные стили для кнопки "Показать фильтры" */
  .filters-toggle {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid var(--line) !important;
  }
}
  
  /* Жесткое выравнивание кнопок в мобильной версии */
@media (max-width: 900px){
  .sidebar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .filters-toggle,
  #dmMobileBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    gap: 12px !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }
  
  #dmMobileBtn {
    background: var(--gold) !important;
    color: #000 !important;
    border: 1px solid var(--gold) !important;
  }
  
  .filters-toggle {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid var(--line) !important;
  }
  
  /* Убираем все возможные отступы */
  .sidebar > * {
    margin: 0 !important;
    padding: 0 !important;
  }
}



  /* обе кнопки: "Показать фильтры" и "Мои сообщения" */
  .filters-toggle,
  #dmMobileBtn{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    /* одинаковая типографика */
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .2px;

    /* одинаковая высота/отступы */
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 12px !important;
    margin: 0 0 8px 0 !important; /* второй кнопке убираем левый отступ */

    /* центрируем контент на всю ширину */
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* на всякий случай гасим прежний margin-left у "Мои сообщения" */
  #dmMobileBtn{
    margin-left: 0 !important;
  }
}

/* === Кнопки в ОДНУ строку (мобайл) === */
@media (max-width: 900px){
  .sidebar{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .sidebar .filters-toggle,
  .sidebar #dmMobileBtn{
    flex: 1 1 0 !important;     /* делим строку 50/50 */
    width: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;   /* перебиваем inline-style у #dmMobileBtn */
    box-sizing: border-box !important;

    /* единая типографика */
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    /* единая высота/отступы */
    min-height: 44px !important;
    height: 44px !important;
    padding: 10px 12px !important;

    /* выравнивание содержимого */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;

    white-space: nowrap !important; /* чтобы текст не переносился */
  }
}


/* БО́ЛЬШЕ отступа после бегущей строки */
@media (min-width: 901px){
  .desktop-ticker{ margin-bottom: 18px !important; } /* было меньше */
}
@media (max-width: 900px){
  .mobile-ticker{ margin-bottom: 14px !important; }  /* было меньше */
}


/* Когда фильтры раскрыты — они занимают СВОЮ строку и всю ширину */
@media (max-width: 900px){
  .sidebar .filters.is-open{
    display: grid !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  /* Позволяем перенос только когда открыты фильтры (кнопки остаются в одной линии) */
  .sidebar:has(.filters.is-open){
    flex-wrap: wrap !important;
  }
}

/* Прилипание панели кнопок (только мобайл) — ближе к краям экрана */
@media (max-width: 900px){
  .sidebar{
    position: sticky;
    top: 0;                          /* прилипание к верхушке экрана */
    z-index: 1000;
    /* ужали паддинги по бокам до безопасного минимума с учётом вырезов */
    padding: 8px max(6px, env(safe-area-inset-left)) 8px max(6px, env(safe-area-inset-right)) !important;
    margin: 0 !important;
    background: rgba(15,15,15,.85);  /* подложка под кнопками */
    backdrop-filter: blur(6px);
  }
  /* Когда фильтры раскрыты — убираем sticky, чтобы не мешать прокрутке формы */
  .sidebar.sidebar--unsticky{
    position: static !important;
    backdrop-filter: none !important;
    background: transparent !important;
  }

  /* Кнопки: 50/50 и максимально в край, уменьшаем внутренние отступы */
  .sidebar .filters-toggle,
  .sidebar #dmMobileBtn{
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    min-height: 44px !important;
    height: 44px !important;
    /* было 10px 12px — делаем компактнее по горизонтали */
    padding: 10px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  /* Чуть плотнее основной контент под панелью на мобилке, без влияния на тикеры */
  .catalog-layout{
    /* уже есть твои уменьшенные gap’ы — просто поджимаем поля контейнера */
    padding-left: max(6px, env(safe-area-inset-left)) !important;
    padding-right: max(6px, env(safe-area-inset-right)) !important;
  }
  .grid.grid-catalog{
    /* убираем лишние внутренние поля, чтобы карточки подходили ближе к краям */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .wrap{
    /* общий безопасный край страницы на мобилке */
    padding-left: max(6px, env(safe-area-inset-left)) !important;
    padding-right: max(6px, env(safe-area-inset-right)) !important;
  }
  /* быстрые категории (не тикер) — тоже ближе к краям */
  .mobile-quick-cats{
    padding-left: max(6px, env(safe-area-inset-left)) !important;
    padding-right: max(6px, env(safe-area-inset-right)) !important;
  }
}


/* === ФИНАЛЬНЫЙ ФИКС: 2 кнопки в ОДНУ строку на мобиле === */
@media (max-width: 900px){
  /* Родитель — флекс-строка с переносом только для формы */
  .sidebar{
    display: flex !important;
    flex-wrap: wrap !important;      /* позволяем фильтрам уйти на новую строку */
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* Обе кнопки: ровно по 50% в первой строке */
  .sidebar > .filters-toggle,
  .sidebar > #dmMobileBtn{
    flex: 1 1 calc(50% - 4px) !important; /* две кнопки в ряд */
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;        /* не переносить текст */
    justify-content: center !important;
    align-items: center !important;
  }
  /* перебиваем инлайн margin-left у "Мои сообщения" */
  #dmMobileBtn{ margin-left: 0 !important; }

  /* Форма фильтров — занимает всю следующую строку */
  .sidebar .filters{
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }
}

/* 1) Увеличить отступ сверху у прилипающих кнопок (мобайл) */
@media (max-width: 900px){
  .sidebar{
    position: -webkit-sticky;
    position: sticky;
    top: calc(env(safe-area-inset-top) + 10px) !important; /* было 0 — добавили зазор */
    z-index: 10 !important; /* понижаем слой, чтобы меню шло поверх */
  }
}

/* 2) Когда открыто мобильное меню — кнопки НЕ перекрывают его */
@media (max-width: 900px){
  /* самые частые состояния «меню открыто» — подстраховываемся сразу по нескольким классам */
  body:has(.mobile-menu.open) .sidebar,
  body:has(.menu.open) .sidebar,
  body:has(.nav.open) .sidebar,
  body:has(.offcanvas.show) .sidebar,
  body:has([data-menu-state="open"]) .sidebar,
  html:has(.mobile-menu.open) .sidebar{
    position: static !important;      /* отключаем sticky, пусть меню перекрывает */
    z-index: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }
}


/* 1) Бейдж "Проверенное фото" больше НЕ перекрывает панель кнопок */
@media (max-width: 900px){
  .sidebar{
    z-index: 1200 !important; /* выше любых карточек/бейджей */
  }
}
/* (не меняем внешний вид бейджа, просто панель становится выше) */


/* 2) Счётчик ЛС поверх кнопки, не двигает иконку/текст */
#dmMobileBtn{
  position: relative !important;  /* якорь для абсолютного бейджа */
}
#dmMobileBtn .chat-menu-badge{
  position: absolute !important;
  top: -4px;                      /* можно подправить на вкус */
  right: -8px;
  margin: 0 !important;
  transform: translate(0, 0);
  pointer-events: none;           /* клики проходят сквозь бейдж */
  z-index: 2;                     /* поверх содержимого кнопки */
  display: none;                  /* JS уже управляет показом */
  min-width: 18px;
  height: 18px;
  line-height: 18px;
}


/* Панель с кнопками чуть ниже статуса и ниже меню по z-index */
@media (max-width: 900px){
  .sidebar{
    position: -webkit-sticky;
    position: sticky;
    top: calc(env(safe-area-inset-top) + 12px) !important; /* чуть больше отступ сверху */
    z-index: 100; /* панель ниже заголовка/меню */
  }

  /* Когда меню открыто — панель превращаем в обычный поток, убрать перекрытие */
  html.menu-open .sidebar{
    position: static !important;
    z-index: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }
}

/* На всякий случай: поднять само меню выше всего */
.site-header, .header, .mobile-menu, .main-menu, .nav, #mainMenu, #mobileMenu{
  position: relative;
  z-index: 2000;
}

/* === FINAL OVERRIDES: mobile menu above buttons === */
@media (max-width: 900px){
  /* базовое липкое поведение и отступ сверху */
  .sidebar{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(env(safe-area-inset-top) + 14px) !important; /* чуть больше зазор */
    z-index: 90 !important;                                 /* ниже шапки/меню */
    background: rgba(15,15,15,.85);
    backdrop-filter: blur(6px);
  }
  /* когда меню открыто — панель уходит в поток и точно не перекрывает меню */
  html.menu-open .sidebar{
    position: static !important;
    z-index: 1 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }
}

/* само меню поверх всего */
.site-header, .header, .mobile-menu, .main-menu, .nav, #mainMenu, #mobileMenu, .offcanvas, .drawer{
  position: relative !important;
  z-index: 3000 !important;
}

/* Мобайл: бейдж на кнопке "Мои сообщения" */
#dmMobileBtn .chat-menu-badge{
  min-width: 24px !important;
  height: 24px !important;
  line-height: 24px !important; /* чтобы цифры были по центру */
  font-size: 13px !important;    /* крупнее шрифт */
  top: -6px !important;          /* чуть опустили, чтобы не прилипал к краю */
  right: -10px !important;       /* подвинул вправо */
  border-radius: 999px !important;/* гарантированный круг */
  padding: 0 6px !important;     /* место под "99+" */
}

/* FINAL: компактные кнопки на мобайле */
@media (max-width: 900px){
  /* внешний отступ сверху/снизу у обеих кнопок */
  .sidebar > .filters-toggle,
  .sidebar > #dmMobileBtn{
    margin: -5px 0 !important;          /* было 8px 0 / местами 0 0 8px — делаем ниже */
    padding: 0px 10px !important;       /* уменьшили внутренние отступы (высота) */
    min-height: 36px !important;        /* было 40–44px */
    height: 40px !important;            /* чтобы точно схлопнуть */
  }
}

/* FINAL: на десктопе не показываем "Показать фильтры" */
@media (min-width: 901px){
  .filters-toggle{ display: none !important; }
}

/* === Выравнивание иконки в док-кнопке (десктоп) === */
@media (min-width: 901px){
  .dm-dock__btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* базовые размеры уже есть — оставим твои паддинги/радиусы/тени */
  }
  .dm-dock__btn .ico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;        /* убираем «ведьм» по базовой линии */
  }
  .dm-dock__btn .ico svg{
    display: block;        /* без лишних «хвостов» вокруг */
    width: 18px;
    height: 18px;
    transform: translateY(1px); /* микро-подправка по вертикали */
  }
}

/* === Золотой перелив для кнопки === */
.gold-shimmer{
  /* градиент «золото» с бликом посередине */
  background: linear-gradient(90deg,
    #b78c1b 0%,
    #d4af37 28%,
    #f1d97a 50%,
    #d4af37 72%,
    #b78c1b 100%);
  background-size: 220% 100%;
  color: #000 !important;
  border: 1px solid #d4af37 !important;
  box-shadow:
    0 0 0 2px rgba(212,175,55,.18) inset,
    0 8px 22px rgba(212,175,55,.28);
  animation: goldShimmer 2.8s ease-in-out infinite;
}
.gold-shimmer:hover{
  filter: saturate(115%);
}

@keyframes goldShimmer{
  0%   { background-position:   0% 0; }
  50%  { background-position: 100% 0; }
  100% { background-position:   0% 0; }
}

/* ДЕСKTOP: выравниваем кнопку и иконку конверта */
@media (min-width: 901px){
  #dmMobileBtn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;          /* перебиваем возможные 100% */
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--gold);
    text-decoration: none;
  }
  #dmMobileBtn .ico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;                  /* чистая базовая линия */
  }
  #dmMobileBtn .ico svg{
    display: block;
    width: 18px;
    height: 18px;
    transform: translateY(1px);      /* микро-выравнивание по оптике */
  }
}

/* Золотой «перелив» (активен и на десктопе, и на мобилке, при желании можно ограничить @media) */
.gold-shimmer{
  background: linear-gradient(90deg,
    #b78c1b 0%,
    #d4af37 28%,
    #f1d97a 50%,
    #d4af37 72%,
    #b78c1b 100%);
  background-size: 220% 100%;
  color: #000 !important;
  border: 1px solid #d4af37 !important;
  box-shadow:
    0 0 0 2px rgba(212,175,55,.18) inset,
    0 8px 22px rgba(212,175,55,.28);
  animation: goldShimmer 2.8s ease-in-out infinite;
}
.gold-shimmer:hover{ filter: saturate(115%); }

@keyframes goldShimmer{
  0%   { background-position:   0% 0; }
  50%  { background-position: 100% 0; }
  100% { background-position:   0% 0; }
}

/* Десктоп: "Мои сообщения" = полная ширина колонки фильтров + выравнивание иконки */
@media (min-width: 901px){
  /* правило выше могло прятать всё с классом .filters-toggle — принудительно показываем */
  #dmMobileBtn{
    display: inline-flex !important;
    width: 100% !important;         /* во всю ширину сайдбара */
    box-sizing: border-box !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    min-height: 44px;
    padding: 10px 14px;
    margin: 0 0 8px 0;              /* аккуратный отступ над формой */
    border-radius: 10px;
    text-decoration: none;
  }
  #dmMobileBtn .ico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  #dmMobileBtn .ico svg{
    display: block;
    width: 18px; height: 18px;
    transform: translateY(1px);     /* микро-центрирование по оптике */
  }
}

/* Золотой перелив (если ещё не добавлял класс — добавь gold-shimmer к #dmMobileBtn) */
.gold-shimmer{
  background: linear-gradient(90deg,
    #b78c1b 0%,
    #d4af37 28%,
    #f1d97a 50%,
    #d4af37 72%,
    #b78c1b 100%);
  background-size: 220% 100%;
  color: #000 !important;
  border: 1px solid #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212,175,55,.18) inset, 0 8px 22px rgba(212,175,55,.28);
  animation: goldShimmer 2.8s ease-in-out infinite;
}
.gold-shimmer:hover{ filter: saturate(115%); }
@keyframes goldShimmer{
  0%{background-position:0% 0} 50%{background-position:100% 0} 100%{background-position:0% 0}
}

.btn.active{
  background: var(--line);
  border-color: var(--line);
}


/* Быстрые ссылки категорий (Только мобилка) */
@media (max-width: 900px){
  .mobile-quick-cats{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 12px 10px; /* под мобильной бегушкой */
    margin-top: 2px;
  }
  .mobile-quick-cats a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
    background: #111;
    color: #fff;
    border: 1px solid var(--line);
  }
  .mobile-quick-cats a.active{
    border-color: var(--gold);
    background: rgba(212,175,55,.12);
    box-shadow: 0 0 0 1px var(--gold) inset;
    color: #fff;
  }
}


/* === MOBILE ANTI-OVERFLOW HARDENING — вставить в самый конец === */

/* Единый бокс-модель и запрет горизонтального скролла */
html { box-sizing: border-box; }
*,*::before,*::after { box-sizing: inherit; min-width: 0; }
html,body { width:100%; overflow-x: clip; }

/* Медиа никогда не шире контейнера */
img, video, canvas, svg, iframe { max-width:100%; height:auto; display:block; }

/* Длинные строки не рвут разметку */
h1,h2,h3,h4,h5,h6, p, .btn, .pill, .phone-btn, .phone-pill,
strong, span, a {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.btn, .pill, .phone-btn, .phone-pill { max-width: 100%; white-space: nowrap; text-overflow: ellipsis; }

/* Лого в шапке: поджать по ширине и высоте */
.site-header .logo, .header .logo { display:flex; align-items:center; max-width:100%; }
.site-header .logo img,
.site-header .logo svg,
.header .logo img,
.header .logo svg {
  max-width: 88vw;                /* не шире вьюпорта */
  height: clamp(28px, 6vh, 44px); /* адаптивная высота */
  object-fit: contain;
}

/* Бегущие строки: гарантированная «маска» и отсутствие горизонтального скролла */
.desktop-ticker, .mobile-ticker { overflow: hidden; contain: content; }
.desktop-ticker__track, .ticker-track { padding-right: 12px; will-change: transform; }

/* Сайдбар на мобилке: строго в границах экрана */
@media (max-width: 900px){
  .sidebar{
    left:0; right:0; width:100%;
    overflow: visible;            /* чтобы не обрезались тени, но без горизонт.скролла */
  }
  .sidebar .filters{ width:100%; max-width:100%; }
  /* Две главные кнопки — никогда не шире строки с учётом gap */
  .sidebar > .filters-toggle,
  .sidebar > #dmMobileBtn{
    flex:1 1 calc(50% - 4px) !important; /* учёт gap: 8px => по 4px каждой */
    max-width: calc(50% - 4px) !important;
  }
}

/* Карточки и сетка: не позволяем деткам распираться */
.grid.grid-catalog { overflow: visible; }
.card.posrel { min-width: 0; }

/* Медиа внутри слайдов — строго в контейнере */
.photo-wrap .slider-slide iframe,
.photo-wrap .slider-slide video,
.photo-wrap .slider-slide img { max-width:100%; width:100%; }

/* Подстраховка для «липкой» панели: не перекрывать и не вылезать */
@media (max-width: 900px){
  .sidebar{
    /* если где-то будет установлен padding, он не даст лишних пикселей ширины */
    box-sizing: border-box;
  }
}

/* Частая причина уезда — элементы с фиксированной шириной внутри flex */
.row, .sidebar, .site-header, .header, nav, .wrap { min-width: 0; }

/* Если где-то есть элементы с display:inline (svg, img), не позволяем добавлять лишние «хвосты» */
svg { display:block; }

/* Безопасные поля для устройств с вырезами */
@supports (padding: max(0px)) {
  body { padding-left: max(0px, env(safe-area-inset-left));
         padding-right: max(0px, env(safe-area-inset-right)); }
}

/* Мобильный размер заголовков (H1/H2) */
@media (max-width: 900px){
  .page-head h1{
    font-size: 17px !important;   /* было 22px */
    line-height: 1.25;
  }

  .seo-text h2{
    font-size: 15px !important;   /* было 18px */
    line-height: 1.3;
  }
}


.wa-ico{
  margin-right:6px;
  margin-left:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#25D366; /* зелёный WhatsApp */
}

/* Выравниваем размер шрифта для "Показать номер" и "Написать в Telegram" */
.phone-btn,
.phone-pill{
  font-size: 15px;
  line-height: 1.2;
}

@media (max-width: 820px){
  .grid-catalog .card .phone-pill{
    font-size: 13.5px;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1.15;
  }
}


.wa-ico svg{
  width:12px;
  height:12px;
  display:block;
  fill:#fff;
}

.tg-ico{
  margin-right:6px;
  margin-left:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#28A8E9; /* фирменный голубой Telegram */
}

.tg-ico svg{
  width:12px;
  height:12px;
  display:block;
  fill:#fff;
}


/* Десктоп: крупнее текст "Админ рекомендует" */
@media (min-width: 901px){
  .admin-rec-tag{
    font-size: 12px;
    height: 26px;
    padding: 0 12px;
  }
}

/* Мобилка: делаем бейдж "Сайт рекомендует" выше */
@media (max-width: 820px){
  .grid-catalog .admin-rec-tag{
    height: 29px;      /* было 23px — область стала выше */
    padding: 2px 12px; /* чуть больше внутренний отступ по вертикали */
  }
}

/* Перенос строки в ссылке про значки:
   - на мобилке: 2 строки (br виден)
   - на десктопе: 1 строка (br скрыт) */
.icons-legend-br {
  /* по умолчанию виден -> брейк на мобилке */
}

@media (min-width: 901px){
  .icons-legend-br {
    display: none; /* на десктопе перенос убираем */
  }
}


@media (min-width: 901px){
  .icons-legend-link{
    font-size: 17px !important; /* было 13px, стало чуть крупнее для десктопа */
  }
}



/* Кнопка "Форум" без подчёркивания */
#forumFab,
#forumFab:link,
#forumFab:visited,
#forumFab:hover,
#forumFab:active,
#forumFab span {
  text-decoration: none !important;
}

/* === Snowfall overlay === */
#snowCanvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* чтобы клики проходили сквозь снег */
  z-index: 2500;        /* выше карточек, но ниже меню у тебя 3000 */
  opacity: 4;
}
@media (prefers-reduced-motion: reduce){
  #snowCanvas{ display:none !important; }
}








</style>