/* ROLLSKRAN · официальные иконки мессенджеров: ч/б по умолчанию, фирменный цвет на ховере.
   Места: шапка (.rk-h-top), подвал (.rkfs-social), карточки товаров (.sfp-messenger-icons,
   .sfp-rk-dir-social). 2026-11-09 */

/* --- базовый значок: маска + текущий цвет --- */
.rk-ic{
  display:inline-block;width:20px;height:20px;flex:0 0 20px;
  background:currentColor;
  -webkit-mask:var(--rk-m) center/contain no-repeat;
  mask:var(--rk-m) center/contain no-repeat;
  transition:background-color .18s ease, background .18s ease;
}

/* --- фирменные цвета на ховере --- */
a:hover .rk-ic--whatsapp, a:focus-visible .rk-ic--whatsapp{background:#25D366!important;}
a:hover .rk-ic--telegram, a:focus-visible .rk-ic--telegram{background:#26A5E4!important;}
a:hover .rk-ic--max, a:focus-visible .rk-ic--max{background:linear-gradient(135deg,#00EAFF 0%,#2C6BFF 52%,#8B3DFF 100%)!important;}
a:hover .rk-ic--dzen, a:focus-visible .rk-ic--dzen{background:#000!important;}
a:hover .rk-ic--rutube, a:focus-visible .rk-ic--rutube{background:#ED143B!important;}

/* --- ПОДВАЛ: иконки одного размера, порядок задаёт JS --- */
body.rk-live .rkfs-social{gap:8px!important;}
body.rk-live .rkfs-social__link{
  width:40px!important;height:40px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #dfe3e6!important;border-radius:10px!important;background:#fff!important;color:#14191c!important;
  transition:border-color .18s, background .18s!important;
}
body.rk-live .rkfs-social__link:hover,
body.rk-live .rkfs-social__link:focus-visible{
  background:#fff!important;border-color:#c9d1d6!important;color:#14191c!important;
}
body.rk-live .rkfs-social__link svg{display:none!important;}
body.rk-live .rkfs-social__link .rk-ic{width:20px!important;height:20px!important;}

/* --- ШАПКА: три основных мессенджера рядом с телефоном --- */
#rk-screwfast .rk-h-social{display:flex!important;align-items:center!important;gap:8px!important;}
@media (min-width:1241px){
  #rk-screwfast .rk-h-top{grid-template-columns:1fr auto auto auto auto!important;}
}
#rk-screwfast .rk-h-social .rk-soc-link{
  width:38px!important;height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #e1e5e8!important;border-radius:10px!important;background:#fff!important;color:#14191c!important;text-decoration:none!important;
  transition:border-color .18s,background .18s!important;
}
#rk-screwfast .rk-h-social .rk-soc-link:hover{border-color:#c9d1d6!important;background:#fff!important;}
#rk-screwfast .rk-h-social .rk-ic{width:18px!important;height:18px!important;flex:0 0 18px!important;}

/* --- КАРТОЧКИ ТОВАРОВ / НАПРАВЛЕНИЙ: родные кнопки сайта, новая иконка --- */
.sfp-messenger-icons,.sfp-rk-dir-social,body.rk-live .rk-product-messengers .rk-social,body.rk-live .messenger-links{
  display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;
}
.sfp-messenger-icons .rk-ic,.sfp-rk-dir-social .rk-ic,
body.rk-live .rk-product-messengers .rk-social .rk-ic,body.rk-live .messenger-links .rk-ic{
  width:26px!important;height:26px!important;flex:0 0 26px!important;
}
.sfp-messenger-icons svg,.sfp-rk-dir-social svg,
body.rk-live .rk-product-messengers .rk-social svg,body.rk-live .messenger-links svg{display:none!important;}

/* --- адаптив: в шапке оставляем иконки на широких экранах --- */
@media (max-width:1240px){
  #rk-screwfast .rk-h-social,body .rk-h-social{display:none!important;}
}
@media (max-width:600px){
  body.rk-live .rkfs-social__link{width:40px!important;height:40px!important;}
  .sfp-messenger-icons .rk-soc-link,.sfp-rk-dir-social .rk-soc-link{width:40px!important;height:40px!important;}
}

/* --- СТАРАЯ ШАПКА (страницы about/tali/404): те же ч/б иконки --- */
.rk-top .rk-social,.rk-top-contacts .rk-social{display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;}
.rk-top .rk-social a,.rk-top-contacts .rk-social a{
  width:30px!important;height:30px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #e1e5e8!important;border-radius:8px!important;background:#fff!important;color:#14191c!important;text-decoration:none!important;
  transition:border-color .18s,background .18s!important;
}
.rk-top .rk-social a:hover,.rk-top-contacts .rk-social a:hover{border-color:#c9d1d6!important;background:#fff!important;}
.rk-top .rk-social svg,.rk-top-contacts .rk-social svg{display:none!important;}
.rk-top .rk-social .rk-ic,.rk-top-contacts .rk-social .rk-ic{width:17px!important;height:17px!important;flex:0 0 17px!important;}
