/** Shopify CDN: Minification failed

Line 692:0 Unexpected "}"

**/
/* assets/social.css — mobile-first */

.c-social{
  padding:16px 12px 24px;
  margin-top: 0px;
}
.c-social__wrap{
  max-width:920px; /* больше, чтобы плитки были крупнее */
  margin:0 auto;
}

.c-social__title{
  margin:0;
  text-align:center;
  font-size:18px;
  font-weight:800;
}

/* cards */
.c-social__card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  margin-bottom:12px;
}

/* profile header */
.c-social__meHead{
  display:flex;
  align-items:center;
  gap:12px;
}
.c-social__meAvatar{
  width:64px;height:64px; /* чуть больше */
  border-radius:50%;
  overflow:hidden;
  background:rgba(0,0,0,.06);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.c-social__meAvatar img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.c-social__meInitials{
  font-size:16px;
  opacity:.85;
}
.c-social__meMeta{ min-width:0; }
.c-social__meName{ font-weight:900; font-size:15px; line-height:1.2; }
.c-social__meId{ font-size:12px; opacity:.7; margin-top:2px; }

/* composer */
.c-social__composer{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  margin-bottom:12px;
}

.c-social__textarea{
  width:100%;
  min-height:96px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:10px 12px;
  resize:vertical;
  outline:none;
  font-size:14px;
  line-height:1.35;
}

.c-social__row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  flex-wrap:wrap;
margin-bottom: 10px;}

.c-social__fileInput{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.c-social__fileBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:999px;
  padding:9px 12px;
  font-weight:800;
  cursor:pointer;
  user-select:none;
}

.c-social__fileName{
  font-size:12px;
  opacity:.7;
  display: none;
}

.c-social__btn{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}

.c-social__btnPrimary{
  background: linear-gradient(135deg, #5b4bff, #7a3cff);
  color:#fff;
  box-shadow:0 10px 22px rgba(91,75,255,.25);
}

.c-social__btnPrimary:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

.c-social__hint{
  margin-top:8px;
  font-size:12px;
  opacity:.9;
}
.c-social__hint[data-kind="err"]{ color:#c91a1a; opacity:1; }
.c-social__hint[data-kind="ok"]{ color:#0a7a2f; opacity:1; }

/* FEED post (Instagram-like cards) */
.c-social__post{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  margin-bottom:12px;
}

.c-social__postHead{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.c-social__avatar{
  width:40px;height:40px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
  background:rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.c-social__avatarImg{ width:100%; height:100%; object-fit:cover; display:block; }
.c-social__avatarInit{ font-size:13px; opacity:.85; }

.c-social__meta{ min-width:0; }
.c-social__nameLink{
  text-decoration:none;
  color:inherit;
  display:inline-block;
}
.c-social__name{ font-weight:900; font-size:14px; line-height:1.2; }
.c-social__time{ font-size:11px; opacity:.7; margin-top:2px; }

.c-social__text{
  font-size:14px;
  line-height:1.35;
  margin-top:6px;
  white-space:pre-wrap;
  word-break:break-word;
}

.c-social__media{
  margin:10px 0 2px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.c-social__mediaImg{
  width:100%;
  border-radius:14px;
  display:block;
  cursor:pointer; /* кликабельно */
}

.c-social__actions{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
}


.c-social__likeBtn[data-like="1"]{
  border-color: rgba(122,60,255,.55);
}
.c-social__likeIcon{ font-size:14px; line-height:1; }
.c-social__likeCount{ font-weight:900; }

.c-social__commentCount{
  font-size:12px;
  opacity:.75;
}

/* PROFILE grid (Instagram tiles) */
.c-social__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
  margin-top:12px;
}

.c-social__tile{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.06);
  aspect-ratio: 1 / 1;
  cursor:pointer;
}

.c-social__tileImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.c-social__tileDel{
  position:absolute;
  top:8px; right:8px;
  width:36px;height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  line-height:1;
}
.c-social__tileDel:disabled{ opacity:.5; cursor:not-allowed; }

/* load more */
.c-social__more{
  width:100%;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:14px;
  padding:12px 12px;
  cursor:pointer;
  font-weight:900;
  margin-top:14px;
}

/* FAB (+) — СЛЕВА */

/* composer modal (feed) */
.c-social__modalBack{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  z-index:60;
}
.c-social__modalBack[data-open="1"]{ display:block; }

.c-social__modal{
  position:fixed;
  left:0; right:0;
  bottom: 5px;
  background:#fff;
  border-radius:18px 18px 0 0;
  padding:12px;
  box-shadow:0 -18px 60px rgba(0,0,0,.18);
  transform:translateY(110%);
  transition:transform .22s ease;
  z-index:10000;
}
.c-social__modal[data-open="1"]{ transform:translateY(0); }

.c-social__modalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.c-social__modalTitle{
  font-weight:900;
  font-size:14px;
}
.c-social__modalClose{
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  font-weight:900;
}

/* VIEWER (полноэкранный просмотр поста/ленты) */
.c-social__viewerBack{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  z-index:80;
}
.c-social__viewerBack[data-open="1"]{ display:block; }

.c-social__viewer{
  position:fixed;
  inset:0;
  background:#fff;
  display:none;
  z-index:9999;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.c-social__viewer[data-open="1"]{ display:block; }
.c-social__previews{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-start;
  margin-left:12px;
}
.c-social__preview{
  position:relative;
  width:46px;
  height:46px;
  border-radius:10px;
  overflow:hidden;              /* оставляем, чтобы картинка была ровная */
  background:rgba(0,0,0,.06);
}

.c-social__previewImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.c-social__previewDel{
  position:absolute;
  top:4px;                      /* !!! было -6px (из-за этого обрезалось) */
  right:4px;                    /* !!! было -6px */
  width:22px;
  height:22px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background:rgba(255,255,255,.95);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  font-size:14px;
  line-height:22px;
  z-index:5;                    /* чтобы точно было выше картинки */
}
.c-social__viewerTop{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
      z-index: 10;
}
.c-social__viewerTitle{
  font-weight:900;
  font-size:14px;
}
.c-social__viewerClose{
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  font-weight:900;
}

.c-social__viewerBody{
  padding:12px;
  max-width:920px;
  margin:0 auto;
}
/* === Profile header (Instagram-like) === */
.c-social__profileCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  margin-bottom:12px;
}

.c-social__profileTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.c-social__profileLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.c-social__avatar{
  width:54px;
  height:54px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
  background:rgba(0,0,0,.06);
}
.c-social__avatarImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.c-social__profileMeta{ min-width:0; }
.c-social__meName{
  font-weight:900;
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
background-color: #ffffffad;
    padding: 3px 0px 2px 8px;
    border-radius: 10px;}
.c-social__meId{
  font-size:12px;
  opacity:.72;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.c-social__stats{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
}
.c-social__stat{
  text-align:center;
  min-width:64px;
}
.c-social__statNum{
  font-weight:950;
  font-size:15px;
  line-height:1.1;
}
.c-social__statLbl{
  font-size:11px;
  opacity:.72;
  margin-top:2px;
}

.c-social__bio{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  opacity:.92;
  white-space:pre-wrap;
  word-break:break-word;
}

.c-social__editRow{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
}

.c-social__editBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}
/* Backdrops must NOT block clicks when closed */
.c-social__modalBack[data-open="0"],
.c-social__viewerBack[data-open="0"]{
  display:none !important;
  pointer-events:none !important;
}

.c-social__modal[data-open="0"],
.c-social__viewer[data-open="0"]{
  display:none !important;
  pointer-events:none !important;
}
/* Profile header layout tighter on desktop */
.c-social__profileTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.c-social__profileLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.c-social__stats{
  display:flex;
  gap:16px;
  justify-content:flex-start;
}

.c-social__stat{
  min-width:auto;
  text-align:center;
}

/* nav links */
.c-social__nav{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:8px 0 8px;
  font-weight:600;
  text-decoration:none;
}

.c-social__topbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;     /* ключ: симметрия */
  grid-template-areas: "left title right";
  align-items:center;
  gap:8px;
  margin:7px 11px 9px;
}

/* placements
.c-social__topbar .c-social__fab--top{ grid-area:left;  justify-self:start; } */
.c-social__topbar .c-social__title{    grid-area:title; justify-self:center; margin:0; }
.c-social__topbar .c-social__nav{      grid-area:right; justify-self:end; }

/* чтобы длинный текст справа не ломал сетку */
.c-social__topbar .c-social__nav{
     max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
   
}


.c-social__nav{
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.c-social__nav:hover{ text-decoration:underline; }
.c-social__nav{
  justify-self:end;
}
/* stats ближе к имени, без растяжки */
.c-social__stats{
  display:flex;
  justify-content:flex-start;
  gap:22px;
  margin-top:10px;
}
.c-social__fab--top{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.04);
  color:rgba(0,0,0,.85);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.c-social__fab--top:hover{
  background:rgba(0,0,0,.06);
}
.c-social__fab--top:active{
  transform:scale(.98);
}

/* аватар картинкой */
.c-social__avatarImg{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

/* чтобы клики по имени работали (не перекрывались слоями) */
.c-social__postHead{ position:relative; z-index:3; }
.c-social__nameLink{ position:relative; z-index:4; display:inline-block; }
.c-social__avatar{ position:relative; z-index:4; }
.c-social__media{ position:relative; z-index:1; }

@media (min-width: 990px){
  .c-social__avatar{ width:72px; height:72px; }
  .c-social__meName{ font-size:16px; }
  .c-social__statNum{ font-size:16px; }
  .c-social__stat{ min-width:78px; }
}

/* desktop bonus */
@media (min-width: 990px){
  .c-social{
    padding:26px 16px 32px;
    margin-top: 0 !important;
  }
}

  .c-social__title{ font-size:22px; }
  .c-social__fab{ left:18px; bottom: 79px; }
  .c-social__wrap{ max-width:1100px; } /* ещё шире */
  .c-social__grid{
    grid-template-columns: repeat(5, 1fr);
    gap:10px;
  }

  .c-social__modal{
    left:50%;
    transform:translate(-50%, 110%);
    width:520px;
    border-radius:18px;
    bottom:22px;
  }
  .c-social__modal[data-open="1"]{ transform:translate(-50%, 0); }

  .c-social__viewerBody{
    max-width:900px;
  }
}

/* чтобы блоки не прыгали по высоте */
[data-social-me]{ min-height: 180px; }
[data-social-feed]{ min-height: 420px; }




/* --- Skeleton --- */
.c-social__skel{
  background: rgba(0,0,0,.06);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.c-social__skel::after{
  content:"";
  position:absolute; inset:0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: skel 1.2s infinite;
}
@keyframes skel { to { transform: translateX(60%); } }

.c-social__skelProfile{ height: 180px; }
.c-social__skelGrid{ height: 420px; margin-top: 12px; }




.c-social__modal{
 
  max-height: calc(100vh - 24px);
  overflow: auto;
  border-radius: 18px;
}



/* LIKE button — SVG heart */
.c-social__likeBtn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:999px;
  padding:8px 11px;
  cursor:pointer;
  font-weight:800;

  /* default: NOT liked */
  color:#5b4bff; /* синий */
}

.c-social__likeBtn[data-like="1"]{
  color:#ff2d55; /* красный */
  border-color: rgba(255,45,85,.45);
}

.c-social__likeIco{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.c-social__likeIco svg{
  width:18px;
  height:18px;
  display:block;
}

/* toggle filled/outline by data-like */
.c-social__likeBtn[data-like="0"] .c-social__likeIco--on{ display:none; }
.c-social__likeBtn[data-like="1"] .c-social__likeIco--off{ display:none; }




/* пост не должен быть шире “инстаграмного” размера */
.c-social_post,
.c-social__post {
  max-width: 560px;
  margin: 0 auto 4px;
}

/* изображение не должно быть “гигантом” по высоте */
.c-social_mediaImg,
.c-social__mediaImg {
  width: 100%;
  max-height: 560px;
  object-fit: contain;   /* без обрезки */
  background: #000;      /* красиво, когда contain */
  display: block;
  border-radius: 14px;
}

@media (max-width: 768px) {
  .c-social_mediaImg,
  .c-social__mediaImg {
    max-height: 70vh;
  }
}



/* FEED carousel (swipe left-right like Instagram) */
.c-social__carousel{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  position:relative;
  touch-action: pan-y;
}
.c-social__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.c-social__track::-webkit-scrollbar{ display:none; }

.c-social__slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  position:relative;
}
.c-social__mediaImg{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  touch-action: pan-x pan-y;
}

/* Zoom overlay (pull down to close) */
.c-social__zoomBack{
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:9998;
}
.c-social__zoomWrap{
  position:fixed; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:999999;
}
.c-social__zoomWrap[data-open="1"],
.c-social__zoomBack[data-open="1"]{
  opacity:1;
  pointer-events:auto;
}
.c-social__zoomImg{
  max-width:100vw;
  max-height:100vh;
  width:auto;
  height:auto;
  object-fit:contain;
  will-change:transform;
  transform:translate3d(0,0,0);
  user-select:none;
  -webkit-user-drag:none;
  touch-action:none;
}
.c-social__carousel{position:relative; overflow:hidden; border-radius:14px;}
.c-social__track{display:flex; width:100%; transition:transform .25s ease; will-change:transform;}
.c-social__slide{flex:0 0 100%; width:100%;}
.c-social__mediaImg{display:block; width:100%; height:auto;}

.c-social__carBtn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px;
  border:0; background:rgba(0,0,0,.35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:3;
}
.c-social__carBtn--prev{left:10px;}
.c-social__carBtn--next{right:10px;}

.c-social__carCount{
  position:absolute; right:10px; top:10px;
  background:rgba(0,0,0,.35); color:#fff;
  padding:4px 8px; border-radius:999px;
  font-size:12px; z-index:3;
}

.c-social__carDots{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:6px; z-index:3;
}
.c-social__dot{
  width:6px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.45);
}
.c-social__dot[data-on="1"]{background:#fff;}



/* Bigger composer thumbs + no X */
.c-social__preview{
  width: 88px;
 height: 88px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.c-social__previewImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.c-social__previewDel{ display:none !important; }

/* Dots button inside viewer post header */
.c-social__postHead{
  position: relative;
}
.c-social__dotsBtn{
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  opacity: .9;
}
.c-social__dotsBtn:hover{ opacity: 1; }

/* Action sheet + toast */
.c-social__sheetBack{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.c-social__sheetWrap{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999999;
  transform: translate3d(0, 110%, 0);
  transition: transform .18s ease;
  padding: 10px 12px 14px;
}
.c-social__sheet{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.c-social__sheetBtn{
  width: 100%;
  padding: 14px 14px;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: #fff;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
}
.c-social__sheetBtn--danger{ color: #c62828; }
.c-social__sheetBtn--muted{ opacity: .75; border-bottom: 0; }

.c-social__sheetBack[data-open="1"]{ opacity: 1; pointer-events: auto; }
.c-social__sheetWrap[data-open="1"]{ transform: translate3d(0, 0, 0); }

.c-social__toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.82);
  color: #fff;
  z-index: 999999;
  font-size: 14px;
  max-width: 90vw;
  text-align: center;
}





/* PROFILE GRID BIGGER */
.c-social__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr)); /* было 3 — станет крупнее */
  gap:10px;
}

@media (min-width: 900px){
  .c-social__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)); /* на десктопе можно 3 */
    gap:12px;
  }
}

.c-social__tile{
  width:100%;
  aspect-ratio:1 / 1;      /* квадрат */
  border:0;
  padding:0;
  background:transparent;
  border-radius:16px;
  overflow:hidden;
}

.c-social__tileImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* FEED MEDIA BIGGER */
.c-social__media .c-social__carousel{
  border-radius:18px;
  overflow:hidden;
}

.c-social__mediaImg{
  width:100%;
  aspect-ratio:4 / 5;  /* сделает фото визуально выше */
  object-fit:cover;
  display:block;
}

/* =========================
   FIX: ZOOM close button
   ========================= */
.c-social__zoomWrap{ position:fixed; inset:0; }
.c-social__zoomClose{
  position:absolute;
  top:65px;
  right:12px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:32px;
  line-height:44px;
  cursor:pointer;
  z-index:10002;
}

/* =========================
   MOBILE: FEED media full width (как Instagram)
   ========================= */
@media (max-width: 768px){
  /* убираем боковые отступы страницы, чтобы картинка была от края до края */
  .c-social{ padding-left:0 !important; padding-right:0 !important; }
  .c-social__wrap{ padding-left:0 !important; padding-right:0 !important; }

  /* карточка поста тоже не должна сужать контент */
  .c-social__post{
    max-width:100% !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }

  /* растягиваем блок медиа на всю ширину, компенсируя padding поста */
  .c-social__media{
    margin-left:-12px !important;
    margin-right:-12px !important;
  }

  /* без скруглений у фото/карусели */
  .c-social__media .c-social__carousel{ border-radius:0 !important; }
  .c-social__mediaImg{ border-radius:0 !important; }
}

/* =========================
   PROFILE GRID: без расстояний, без скруглений, чуть вытянутые
   ========================= */
.c-social__grid{
  gap: 1px !important;
}
.c-social__tile{
  border-radius:0 !important;
  overflow:hidden;
  /* чуть вытянуто (не квадрат) */
  aspect-ratio: 4 / 6 !important;
}
.c-social__tileImg{
  border-radius:0 !important;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* на мобилке — 3 в ряд (как инстаграмная сетка, но вытянутая) */
@media (max-width: 768px){
  .c-social__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
/* ===== SKELETONS (feed) ===== */
.c-social__skeletons{display:flex;flex-direction:column;gap:14px}
.c-social__skPost{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.c-social__skHead{display:flex;align-items:center;gap:10px;padding:12px 12px}
.c-social__skAvatar{width:40px;height:40px;border-radius:999px}
.c-social__skMeta{flex:1;min-width:0}
.c-social__skDots{width:28px;height:28px;border-radius:10px}
.c-social__skMedia{width:100%;aspect-ratio:1/1}
.c-social__skText{padding:10px 12px 4px;display:flex;flex-direction:column;gap:8px}
.c-social__skLine{height:10px;border-radius:999px;width:100%}
.c-social__skLine--name{height:12px;width:42%}
.c-social__skLine--time{height:10px;width:28%}
.c-social__skLine--short{width:55%}
.c-social__skActions{display:flex;gap:10px;align-items:center;padding:10px 12px 14px}
.c-social__skPill{height:28px;width:74px;border-radius:999px}
.c-social__skPill--wide{width:140px}

.c-social__skAvatar,
.c-social__skDots,
.c-social__skMedia,
.c-social__skLine,
.c-social__skPill{
  background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.11), rgba(0,0,0,.06));
  background-size:240% 100%;
  animation:cSocialShimmer 1.2s linear infinite;
}

@keyframes cSocialShimmer{
  0%{background-position:0% 0%}
  100%{background-position:240% 0%}
}

/* ===== Dots button placement ===== */
.c-social__postHead{position:relative}
.c-social__dotsBtn{
  margin-left:auto;
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  padding:6px 8px;
  border-radius:12px;
  opacity:.85;
}
.c-social__dotsBtn:active{transform:scale(.98)}



/* === Social skeletons (HTML-first) === */

[data-social-feed][data-social-loading="1"] {
  min-height: 240px; /* чтобы не прыгало */
}

.c-social__skeletons { display: grid; gap: 14px; }

.c-social__skPost{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.c-social__skHead{
  display:flex; align-items:center; gap: 10px;
  margin-bottom: 10px;
}

.c-social__skAvatar{
  width: 40px; height: 40px; border-radius: 999px;
}

.c-social__skMeta{ flex: 1; display:grid; gap: 8px; }
.c-social__skDots{ width: 26px; height: 10px; border-radius: 999px; }

.c-social__skMedia{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  margin: 10px 0;
}

.c-social__skText{ display:grid; gap: 8px; margin-top: 4px; }
.c-social__skLine{ height: 12px; border-radius: 999px; width: 100%; }
.c-social__skLine--name{ width: 42%; height: 12px; }
.c-social__skLine--time{ width: 28%; height: 10px; opacity: .85; }
.c-social__skLine--short{ width: 70%; }

.c-social__skActions{
  display:flex; gap: 10px;
  margin-top: 12px;
}

.c-social__skPill{
  height: 30px;
  width: 84px;
  border-radius: 999px;
}

.c-social__skPill--wide{ width: 140px; }

/* shimmer */
.c-social__skAvatar,
.c-social__skDots,
.c-social__skMedia,
.c-social__skLine,
.c-social__skPill{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.10) 35%,
    rgba(0,0,0,.06) 70%
  );
  background-size: 220% 100%;
  animation: cSocialShimmer 1.1s linear infinite;
}

@keyframes cSocialShimmer{
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* когда загрузилось — скелетон скрываем (на всякий) */
[data-social-feed][data-social-loading="0"] [data-skeletons="1"]{ display:none; }






/* =========================
   FIX: Skeleton width = feed post width (560)
   ========================= */

/* контейнер скелетонов — центрируем */
.c-social__skeletons{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;          /* центрируем карточки */
}

/* сама карточка скелетона — как пост */
.c-social__skPost{
  width:100%;
  max-width:560px;             /* ✅ как .c-social__post */
  margin:0 auto;
}

/* медиа внутри скелетона — тоже не шире */
.c-social__skMedia{
  width:100%;
  max-width:560px;
}

/* ===== MOBILE: как Instagram — от края до края ===== */
@media (max-width: 768px){
  .c-social__skeletons{
    align-items:stretch;       /* на мобилке не центр, а растягиваем */
  }
  .c-social__skPost{
    max-width:100% !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }
  .c-social__skMedia{
    max-width:100% !important;
    border-radius:0 !important;
  }
}






/* =========================
   FIX: Action Sheet smaller on desktop
   ========================= */
.c-social__sheetWrap{
  display:flex;
  justify-content:center;   /* центрируем панель */
}

.c-social__sheet{
  width: min(420px, 96vw);  /* ✅ реальная ширина панели */
  max-width: 420px;
  border-radius: 18px;
}

/* чуть компактнее кнопки (по желанию) */
.c-social__sheetBtn{
  padding: 12px 14px;
  font-size: 15px;
}

/* на больших экранах можно ещё меньше */
@media (min-width: 990px){
  .c-social__sheet{
    width: 360px;
    max-width: 360px;
  }
}





/* === Profile cover === */
.c-social__profileCard{ overflow:hidden; }
.c-social__cover{
  height:200px;
  background: #f2f2f2;
  background-size: cover;
  background-position: center;
  position: relative;
}
.c-social__cover::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,0));
  pointer-events:none;
}
.c-social__coverBtn{
  position:absolute;
  right:10px; bottom:10px;
  z-index:2;
  border:0;
  border-radius:12px;
  padding:10px 12px;
  background: rgba(255,255,255,.92);
  cursor:pointer;
  font-weight:600;
}
.c-social__profileTop{
  margin-top:-46px; /* аватар залезает на баннер */
  padding:0 14px;
}
.c-social__avatar{
  border:4px solid #fff;
  background:#fff;
}
.c-social__coverBtn--icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  padding:0;
}



.c-social__coverBtn{
  overflow:hidden;
  white-space:nowrap;
}
.c-social__btnPctOnly{
  font-size:10px;
  line-height:1;
  margin-left:6px;
}
.c-social__profileCard{
  overflow:hidden;
  position: relative;          /* ✅ создаём нормальный контекст */
}

.c-social__cover{
  position: relative;
  z-index: 1;                  /* ✅ баннер ниже */
}

.c-social__cover::after{
  z-index: 0;                  /* ✅ затемнение НЕ поверх всего */
}

.c-social__coverBtn{
  z-index: 6;                  /* ✅ кнопка над баннером */
}
.c-social__coverBtn{
  top:10px;
  bottom:auto;
  z-index:6;
}

.c-social__profileTop{
  margin-top:-46px;
  padding:0 14px;
  position: relative;
  z-index: 3;                  /* ✅ имя/аватар всегда поверх баннера */
}
/* === SOCIAL: Follow/Unfollow button styling === */
/* вставь в assets/social.css (в самый низ) */

.c-social__followRow{
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}

.c-social__followBtn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: #7247ee;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .08s ease, opacity .15s ease, background-color .15s ease, border-color .15s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.c-social__followBtn:hover{
  transform: translateY(-1px);
  opacity: .96;
}

.c-social__followBtn:active{
  transform: translateY(0);
  opacity: .92;
}

/* состояние "подписан" */
.c-social__followBtn[data-following="1"]{
  background: #fff;
  color: #111;
  border-color: rgba(0,0,0,.18);
  box-shadow: none;
}

/* disabled */
.c-social__followBtn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* мобилка */
@media (max-width: 768px){
  .c-social__followBtn{
    width: auto;
    padding: 11px 14px;
    border-radius: 14px;
  }
}
/* ====== FOLLOWS PAGE (Instagram-like) ====== */

.c-social__tabs{
  display:flex;
  gap:10px;
  padding:10px 12px;
  margin:6px 0 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.c-social__tab{
  flex:1;
  border:0;
  background:transparent;
  padding:10px 10px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  color:rgba(0,0,0,.7);
}

.c-social__tab[data-on="1"]{
  background:rgba(0,0,0,.06);
  color:rgba(0,0,0,.92);
}

.c-social__list{
  padding:6px 10px 16px;
}

.c-social__urow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 8px;
  border-radius:14px;
}

.c-social__urow:hover{
  background:rgba(0,0,0,.035);
}

.c-social__uleft{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  min-width:0;
  flex:1;
}

.c-social__uava{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  background:rgba(0,0,0,.06);
  flex:0 0 44px;
}

.c-social__utxt{
  min-width:0;
}

.c-social__uname{
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.c-social__uid{
  font-size:12px;
  opacity:.65;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* кнопка подписки */
.c-social__ufollow{
  border:0;
  border-radius:10px;
  padding:9px 14px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .08s ease, opacity .2s ease, background .2s ease;

    color: #7247ee;
}

.c-social__ufollow:active{
  transform:scale(.98);
}

.c-social__ufollow[disabled]{
  opacity:.6;
  cursor:default;
}

/* Follow */
.c-social__ufollow[data-following="0"]{
  background: #7247ee;
  color: #fff;
}

/* Following */
.c-social__ufollow[data-following="1"]{
  background:rgba(0,0,0,.08);
  color:rgba(0,0,0,.85);
}

/* чтобы stats-ссылки выглядели как раньше */
.c-social__statLink{
  text-decoration:none;
  color:inherit;
}
.c-social__statLink:hover{
  background:rgba(0,0,0,.03);
  border-radius:12px;
}





.c-social__cmtBack{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:.18s ease;
  z-index:9998;
}
.c-social__cmtWrap{
  position:fixed; left:0; right:0; bottom:0;
  transform:translateY(100%);
  transition:.22s ease;
  z-index:10078;
  padding:12px 12px env(safe-area-inset-bottom);
}
.c-social__cmtBack[data-open="1"]{ opacity:1; pointer-events:auto; }
.c-social__cmtWrap[data-open="1"]{ transform:translateY(0); }

.c-social__cmt{
  background:#111; color:#fff;
  border-radius:18px 18px 0 0;
  max-height:min(78vh, 780px);
  display:flex; flex-direction:column;
  box-shadow:0 -18px 40px rgba(0,0,0,.35);
}
.c-social__cmtHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.c-social__cmtTitle{ font-weight:700; }
.c-social__cmtClose{ background:none; border:0; color:#fff; font-size:26px; line-height:1; cursor:pointer; }

.c-social__cmtList{ padding:10px 12px; overflow:auto; }
.c-social__cmtEmpty{ padding:24px 10px; opacity:.85; text-align:center; }
.c-social__cmtEmptyTitle{ font-size:18px; font-weight:700; margin-bottom:6px; }

.c-social__cmtItem{ display:flex; gap:10px; padding:10px 0; }
.c-social__cmtItem--reply{ padding-left:34px; opacity:.95; }
.c-social__cmtAv img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.c-social__cmtLine{ display:flex; gap:10px; align-items:baseline; }
.c-social__cmtName{ font-weight:700; }
.c-social__cmtTime{ font-size:12px; opacity:.65; }
.c-social__cmtText{ margin-top:4px; line-height:1.25; }
.c-social__cmtActions{ margin-top:6px; display:flex; gap:12px; }
.c-social__cmtActions button{
  background:none; border:0; color:#cfcfcf; padding:0;
  font-size:13px; cursor:pointer;
}
.c-social__cmtReplies{ margin-top:6px; }

.c-social__cmtReplyBar{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.c-social__cmtReplyTxt{ font-size:13px; opacity:.9; }
.c-social__cmtReplyCancel{ background:none; border:0; color:#fff; opacity:.8; }

.c-social__cmtComposer{ padding:10px 12px; }
.c-social__cmtEmojiRow{ display:flex; gap:8px; overflow:auto; padding-bottom:8px; }
.c-social__cmtEmojiRow button{ background:rgba(255,255,255,.08); border:0; color:#fff; border-radius:10px; padding:6px 10px; }
.c-social__cmtInputRow{ display:flex; gap:10px; align-items:flex-end; }
.c-social__cmtInput{
  flex:1; resize:none;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:10px 12px;
}
.c-social__cmtSend{
  border:0; border-radius:14px;
  padding:10px 14px;
  background:#7c5cff; color:#fff;
  cursor:pointer;
}
.c-social__cmtLoginHint{ margin-top:8px; opacity:.8; font-size:13px; }

.c-social__commentBtn{
  background:none; border:0; color:inherit;
  cursor:pointer; padding:0;
  opacity:.9;
}
.c-social__commentBtn:hover{ opacity:1; }


.c-social__commentBtn{
  display:flex;
  align-items:center;
  gap:5px;

  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
  line-height:1;
}

.c-social__commentIco{
  display:flex;
  align-items:center;
  justify-content:center;
}
/* если хочешь скрывать 0 полностью */
.c-social__commentNum.is-zero { display: none; }

/* если хочешь, наоборот, показывать 0 серым — используй это вместо display:none */
/* .c-social__commentNum.is-zero { opacity: .45; } */

.c-social__commentIco svg{
  width:20px;
  height:20px;
  display:block;
}

.c-social__commentNum{
  font-size:13px;
  opacity:.9;
}



/* Комменты: иконка + цифра СПРАВА, как у лайков */
.c-social__commentBtn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0;              /* если надо как у лайков */
  background:transparent; /* если надо как у лайков */
}

/* Иконка */
.c-social__commentIco{ display:inline-flex; }

/* Важно против обрезки */
.c-social__commentIco svg{
  width:22px;
  height:22px;
  display:block;
  overflow:visible;
}

/* Цифра рядом (НЕ поверх) */
.c-social__commentNum{
  position:static !important;
  display:inline-block !important;
  line-height:1;
  font-size:14px;
}

/* Ноль не показываем */
.c-social__commentNum.is-zero{ display:none !important; }
.c-social__commentBtn{
  display:flex;
  align-items:center;
  gap:5px;

  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
  line-height:1;
}

.c-social__commentIco{
  display:flex;
  align-items:center;
  justify-content:center;
}



.c-social__commentNum{
  opacity: .9;
    font-weight: 900;
    font-size: 1em;
}
.c-social__commentBtn{ color: #5b4bff; }





/* =========================
   COMMENTS SHEET: size tuning
   ========================= */

/* База (mobile-first): во всю ширину, но не слишком высокая */
.c-social__cmt{
  max-height: min(70vh, 640px) !important; /* было 78vh/780px — слишком много */
}

/* Если хочешь ещё ниже на мобиле — можно 66vh */
@media (max-width: 768px){
  .c-social__cmt{
    max-height: 66vh !important;
    border-radius: 18px 18px 0 0 !important;
  }

  /* чтобы реально было “от края до края” */
  .c-social__cmtWrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Desktop: делаем узкую “карточку”, чуть приподнимаем */
@media (min-width: 990px){
  .c-social__cmtWrap{
    bottom: 14px !important;              /* приподняли от низа */
    padding: 14px 14px 14px !important;   /* чуть воздуха */
  }

  .c-social__cmt{
    width: min(720px, 92vw) !important;   /* узкая, но не крошечная */
    margin: 0 auto !important;
    border-radius: 18px !important;       /* как карточка */
    max-height: calc(100vh - 180px) !important; /* чтобы не лезла в потолок */
  }
}



/* Скрыто: показываем только N строк */
.c-social__txtClamp{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: var(--lines, 3);
  overflow:hidden;
}

/* Открыто: показываем всё */
.c-social__txtClamp.is-open{
  display:block;
  -webkit-line-clamp: unset;
  overflow:visible;
}

/* Кнопка */
.c-social__txtMore{
      margin-top: -7px;
    background: #c7c7c71c;
    border: 0;
    padding: 2px 4px 2px 4px;
    cursor: pointer;
    opacity: .85;
    color: #ffffff;
    border-radius: 4px;
}
.c-social__txtMore:hover{ opacity:1; }




/* общая кнопка */
.c-social__txtMore{
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* ✅ кнопка для поста (белый фон) */
.c-social__txtMore--post{
  color: #111;
}

/* ✅ кнопка для комментария (чёрный фон) */
.c-social__txtMore--cmt{
  color: #fff;
  opacity: .9;
}
.c-social__txtMore--cmt:hover{
  opacity: 1;
}





/* Комментарии: аватар фикс, текст переносится */
.c-social__cmtItem{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.c-social__cmtAv{
  flex:0 0 34px;      /* фикс ширина */
  width:34px;
  height:34px;
}

.c-social__cmtAv img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

.c-social__cmtBody{
  flex:1 1 auto;
  min-width:0;        /* КРИТИЧНО для flex, чтобы переносы работали */
}

.c-social__cmtText{
  overflow-wrap:anywhere; /* ломает даже “ииииииииии” */
  word-break:break-word;
}
.c-social__txtClamp{
  display: -webkit-box;
  -webkit-line-clamp: var(--lines, 3);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-social__txtClamp.is-open{
  -webkit-line-clamp: unset;
  display: block;
}
.c-social__text a.c-social__link,
.c-social__cmtText a.c-social__link{
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;color: #423fff;
}

.c-social__text a.c-social__link:hover,
.c-social__cmtText a.c-social__link:hover{
  opacity: .85;
}


/* === SOCIAL APP: floating Telegram-like bottom bar === */

.c-social__tabHaze{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 62px;
  pointer-events: none;
  z-index: 9998;

  /* дымка вверх */
  background: linear-gradient(
    to top,
    rgba(8,10,14,0.25),
    rgba(8,10,14,0.10),
    rgba(8,10,14,0.00)
  );

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.c-social__tabbar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 9999;

  width: min(460px, calc(100vw - 26px));
  padding: 10px 10px;

  display: grid;
 
  gap: 8px;

  border-radius: 22px;

  background: linear-gradient(
    to top,
    rgba(255,255,255,0.62),
    rgba(255,255,255,0.42)
  );

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    0 14px 45px rgba(0,0,0,.20),
    0 1px 0 rgba(255,255,255,.22) inset;
}

.c-social__tab{
  border: 0;
  background: transparent;
  text-decoration: none;
  color: rgba(0,0,0,.82);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 3px;
  height: 44px;

  border-radius: 16px;
  cursor: pointer;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.c-social__tabIco{
  font-size: 25px;
  line-height: 1;
}

.c-social__tabLbl{
  font-size: 11px;
  line-height: 1;
  opacity: .85;
}

.c-social__tab.is-active{
  background: rgba(255,255,255,.40);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
}



.c-social__tab--shop .c-social__tabLbl{
  letter-spacing: .6px;
}

.c-social__tab[data-social-disabled="1"]{
  opacity: .55;
}

/* чтобы контент не прятался под таббаром */
.c-social__wrap{
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.c-social__tabIco svg{
  width: 25px;
  height: 25px;
  display: block;
fill: currentColor;}

.c-social__tab.is-disabled{
  opacity: .55;          /* выглядит “не активно” */
}
.c-social__tabIco--avatar{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.c-social__tabIco--avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.c-social__tabIco--avatar .c-social__tabAvatarFallback{
  display: inline-block;
  font-size: 16px;
  line-height: 1;
}

/* когда аватар есть — показываем картинку */
[data-tab-avatar][data-has-avatar="1"] img{ display:block; }
[data-tab-avatar][data-has-avatar="1"] .c-social__tabAvatarFallback{ display:none; }

/* активный таб как в Instagram: лёгкая обводка */
.c-social__tab.is-active .c-social__tabIco--avatar{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}
/* =========================
   TABBAR: uniform sizing + smaller "groove"
   ========================= */

/* чуть компактнее сама панель */
.c-social__tabbar{
  width: min(420px, calc(100vw - 22px)) !important;
  padding: 8px 8px !important;
  gap: 6px !important;
  grid-template-columns: 1fr 1fr 1.05fr 1fr 1fr !important; /* центр меньше "жирный" */
  border-radius: 20px !important;
}

/* одинаковая высота/центрирование */
.c-social__tab{
  height: 42px !important;
  border-radius: 14px !important;
  position: relative;
  overflow: hidden;             /* чтобы "пилюля" была аккуратная */
  opacity: 1;                   /* не даём родителям ломать вид */
}

/* ✅ "канавка" теперь у ВСЕХ табов (и у disabled тоже) */
.c-social__tab::before{
  content:"";
  position:absolute;
  inset: 4px;                   /* <-- это и есть “канавка” (меньше = тоньше) */
  border-radius: 12px;
  background: rgba(255,255,255,.20);
  box-shadow: 0 1px 0 rgba(255,255,255,.20) inset;
  pointer-events:none;
}

/* активный — сильнее, но не толстый */
.c-social__tab.is-active::before{
  background: rgba(255,255,255,.38);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 6px 16px rgba(0,0,0,.08);
}

/* disabled — тоже в "канавке", просто тише */
.c-social__tab.is-disabled,
.c-social__tab[data-social-disabled="1"]{
  opacity: .62;
}
.c-social__tabSvg{
  width: 26px;
  height: 26px;
}


/* clamp: работает и для постов/комментов и для био */
.c-social__txtClamp{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 3);
  overflow: hidden;
}
.c-social__txtClamp.is-open{
  -webkit-line-clamp: unset;
}

/* простая “стрелка” */
.c-social__chev{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:6px 8px;
}
.c-social__chevIco::before{
  content:"▾";
  display:inline-block;
  transition: transform .18s ease;
}
[data-bio-box][data-open="1"] .c-social__chevIco::before,
[data-links-box][data-open="1"] .c-social__chevIco::before{
  transform: rotate(180deg);
}

/* блоки */
.c-social__section{ margin-top: 10px; }
.c-social__sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.c-social__sectionTitle{
  font-weight:600;
  font-size:14px;
  opacity:.9;
}
.c-social__bioText{ font-size:14px; line-height:1.35; }

/* links */
.c-social__links{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.c-social__linkItem{
  display:flex; align-items:center; gap:8px;color: #2012ff;
  text-decoration:none;
}
.c-social__linkTxt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }



/* все вкладки — обычные (серые) */
.c-social__tabbar .c-social__tab{
  color: rgba(0,0,0,.45) !important;
}

/* SVG иконки должны слушаться currentColor */
.c-social__tabbar .c-social__tab svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* активная вкладка — другим цветом */
.c-social__tabbar .c-social__tab.is-active{
  color: #5b4bff !important; /* поставь твой фирменный */
}

/* для аватарки (там картинка, ей цвет не применится) — выделяем обводкой */
.c-social__tabbar .c-social__tab.is-active .c-social__tabIco--avatar{
  box-shadow: 0 0 0 2px #5b4bff !important;
  border-radius: 999px;
}






/* =========================
   TABBAR — UNIFORM (fix)
   ========================= */

.c-social__tabbar{
  grid-template-columns: repeat(5, 1fr) !important; /* все одинаковые */
  gap: 8px !important;
  padding: 2px 2px !important;
  border-radius: 16px !important;
}

/* все кнопки одинаковые */
.c-social__tab{
  height: 44px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* одинаковая “выпуклость/канавка” у всех */
.c-social__tab::before{
  content:"" !important;
  position:absolute !important;
  inset: 4px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.20) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.20) inset !important;
  pointer-events:none !important;
}

/* активная — сильнее, но одинаковая форма */
.c-social__tab.is-active::before{
  background: rgba(255,255,255,.38) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 6px 16px rgba(0,0,0,.08) !important;
}

/* иконка всегда центр и одинаковый размер */
.c-social__tabIco{
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;  /* для ⚙ */
  line-height: 1 !important;
}

/* ВСЕ svg/img внутри — 26x26 (перебивает width/height="25 12" и т.п.) */
.c-social__tabIco svg,
.c-social__tabIco img{
  width: 26px !important;
  height: 26px !important;
  display: block !important;
}

/* Shop больше НЕ особенный */
.c-social__tab--shop{
  height: 44px !important;
  border-radius: 16px !important;
  background: transparent !important;
  font-weight: 400 !important;
}

/* аватар в табе тоже фикс */
.c-social__tabIco--avatar{
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
}



/* 1) базово — телефон */


main#MainContent,
main#main-content,
#MainContent,
#main-content{
  padding-top: 0 !important;
  margin-top: calc(var(--social-top-shift) * -1) !important;
}

/* 2) чуть больше телефон (большие мобилки) */
@media (min-width: 280px) and (max-width: 749px){
  :root{ --social-top-shift: 0px; }
}

/* 3) планшет (до 934 — ок) */
@media (min-width: 750px) and (max-width: 934px){
  :root{ --social-top-shift: 25px; }
}

/* ✅ проблемный стык: 935 — 989 */
@media (min-width: 935px) and (max-width: 989px){
  :root{ --social-top-shift: 70px; } /* пример — подгони */
}

/* 4) десктоп */
@media (min-width: 990px) and (max-width: 1199px){
  :root{ --social-top-shift:70px; }
}

/* 5) очень широкий */
@media (min-width: 1200px){
  :root{ --social-top-shift: 70px; }
}
.c-social{ padding:14px 12px 28px; }
@media (min-width: 768px){
  .c-social{ padding:24px 16px 40px; }
}
.c-social, .c-social *{ box-sizing:border-box; }
.c-social__modalBack,
.c-social__viewerBack{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:9999;
  display:none;
}


/* когда открыто */
.c-social__modalBack[data-open="1"],
.c-social__viewerBack[data-open="1"]{ display:block; }
.c-social__modal[data-open="1"],
.c-social__viewer[data-open="1"]{ display:block; }

/* внутри: прокрутка тела */
.c-social__modal .c-social__composer,
.c-social__viewerBody{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  max-height:calc(100vh - 125px);
}

/* safe-area (если есть) */
@supports (padding: env(safe-area-inset-bottom)){
  .c-social__modal,
  .c-social__viewer{
    bottom:calc(81px + env(safe-area-inset-bottom));
  }
}
/* Кнопка как в профиле, но в topbar */
.c-social__fab--top{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* На всякий случай — нормальная раскладка topbar */
.c-social__topbar{display:flex;align-items:center;gap:10px;}
.c-social__title{flex:1 1 auto;}
.c-social__nav--bell{
  padding: 8px;
  line-height: 0;
}

.c-social__bellIco{
  width: 22px;
  height: 22px;
  display: block;
  color: currentColor; /* будет брать цвет кнопки */
}



/* === Under construction card (reusable) === */
.msgwrap{max-width:980px;margin:0 auto;padding:44px 16px;}
.msgcard{background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:22px 16px;box-shadow:0 10px 30px rgba(0,0,0,.06);}
.msghead{display:flex;gap:12px;align-items:center;margin-bottom:8px;}
.msgdot{width:12px;height:12px;border-radius:999px;background:#7c3aed;box-shadow:0 0 0 6px rgba(124,58,237,.12);flex:0 0 auto;}
.msgh1{margin:0;font-size:22px;line-height:1.2;}
.msgp{margin:10px 0 0;opacity:.88;font-size:14px;line-height:1.6;}
.msgnote{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.18);font-size:13px;line-height:1.5;}
.msgbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.msgbtn{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:12px;text-decoration:none;border:1px solid rgba(0,0,0,.10);background:#fff;transition:transform .12s ease, box-shadow .12s ease, background .12s ease;font-size:14px;line-height:1;min-height:44px;}
.msgbtn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.08);}
.msgbtn--primary{background:#111827;color:#fff;border-color:#111827;}
.msgbtn--primary:hover{background:#0b1220;}
@media (max-width:480px){
  .msgwrap{padding:28px 12px;}
  .msgcard{padding:18px 14px;border-radius:16px;}
  .msgh1{font-size:20px;}
  .msgbtn{width:100%;}
}
@media (min-width:900px){
  .msgwrap{padding:60px 24px;}
  .msgcard{padding:28px 22px;}
  .msgh1{font-size:28px;}
}



/* =========================
   FIX: force open states for modal/viewer
   ========================= */

/* backdrops */
.c-social__viewerBack[data-open="1"],
.c-social__modalBack[data-open="1"]{
  display:block !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* panels */
.c-social__viewer[data-open="1"],
.c-social__modal[data-open="1"]{
  display:block !important;
  pointer-events:auto !important;
}





/* FIX: no horizontal shift on mobile */
@media (max-width: 768px){
  .c-social__viewer{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;   /* <-- ключ */
    transform: none !important;
  }



  /* если уехала именно модалка-композер */
  .c-social__modal{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(110%) !important;  /* только вниз/вверх */
    border-radius: 18px 18px 0 0 !important;
  }
  .c-social__modal[data-open="1"]{
    transform: translateY(0) !important;
  }
}
.c-social__modal,
.c-social__viewer{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:min(560px, 94vw);
  max-height:calc(93vh - 6px);
  bottom:12px;
  border-radius:18px;
  background:#fff;
  z-index:10078;
  display:none;
  overflow:hidden;
}



/* Bell = same button as FAB, but with svg sizing */
.c-social__fab--bell{
  padding: 0; /* чтобы было 1:1 как плюсик */
}

/* подгони иконку, чтобы по центру сидела красиво */
.c-social__fab--bell .c-social__bellIco{
  width: 22px;
  height: 22px;
  display: block;
}



.c-social__followRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.c-social__dmBtn{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  cursor:pointer;
}
.c-social__dmBtn:disabled{opacity:.6;cursor:default;}





/* Messages badge on tabbar */
.c-social__tabIco{ position:relative; }

.c-social__tabBadge{
  position:absolute;
  top:-6px;
  right:-8px;
  min-width:18px;
  height:18px;
  padding:0 5px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1;

  background:#ef4444;   /* красный */
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  pointer-events:none;
}






.c-social__linkInput {
  width: 100%;
  border: 1px solid #ddd;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
  margin-bottom: 10px;
}

.c-social__linkInput:focus {
  background: #fff;
  border-color: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}







/* Контейнер для кнопки-плитки должен быть относительным */
.c-social__tile {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1; /* Квадратная плитка */
}

/* Обертка для иконки видео */
.c-social__videoBadge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;    /* Центровка по вертикали */
  justify-content: center; /* Центровка по горизонтали */
  background: rgba(0, 0, 0, 0.2); /* Легкое затемнение, чтобы иконку было видно на светлом фоне */
  pointer-events: none; /* Чтобы клик проходил сквозь иконку на кнопку */
}

/* Сама иконка Play */
.c-social__tilePlay {
  font-size: 24px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.2);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  backdrop-filter: blur(2px); /* Эффект матового стекла */
  border: 1px solid rgba(255, 255, 255, 0.4);
}







/* assets/social.css */

/* 1. ОБЩИЙ КАРКАС (Без размеров!) */
.c-social__extVideo {
  position: relative;
  width: 100%;
  height: 0; 
  overflow: hidden;
  background: #000;
  border-radius: 12px;
  margin-top: 10px;
  /* ВАЖНО: Здесь мы НЕ задаем padding-bottom, чтобы не было "общего" размера */
}

/* 2. ТОЛЬКО ДЛЯ ОБЫЧНЫХ (Горизонтальные 16:9) */
.c-social__extVideo--wide {
  padding-bottom: 122.25% !important; /* Стандартная высота ютуба */
}

/* 3. ТОЛЬКО ДЛЯ SHORTS (Вертикальные) */
.c-social__extVideo--tall {
  /* 125% - это формат 4:5 (чуть выше квадрата). 
     Если хочешь длиннее (как в телефоне), ставь 177.77% */
  padding-bottom: 125% !important; 
}

/* 4. ОГРАНИЧЕНИЕ ДЛЯ КОМПЬЮТЕРА (Только для Shorts) */
@media (min-width: 768px) {
  .c-social__extVideo--tall {
    width: 320px; /* Узкая ширина */
    padding-bottom: 560px !important; /* Фиксированная высота */
  }
}

/* Растягиваем видео внутри любого блока */
.c-social__extVideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}








/* assets/social.css */

.c-social__topbar {
  /* Железобетонная фиксация на весь экран */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 56px !important;
  z-index: 9999 !important; /* Самый верхний слой */
  transition: transform 0.3s ease;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);

  /* СЕТКА: Кнопка (48px) - Пусто - Заголовок (auto) - Пусто - Кнопка (48px) */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* Раскидываем по краям */
  
  padding: 0 25px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.c-social__topbar.is-hidden {
  transform: translateY(-101%); /* Сдвигаем шапку вверх на её высоту */
}

.c-social__fab.c-social__fab--top:not(.c-social__fab--bell) {
  order: 1 !important; /* Первый слева */
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  margin: 0 !important;
}

/* ЗАГОЛОВОК (ЦЕНТР) */
.c-social__title {
  order: 2 !important; /* Второй (по центру) */
  flex-grow: 1 !important; /* Занимает всё свободное место */
  text-align: center !important;
  margin: 0 !important;
  white-space: nowrap;
  
  /* Хак для идеального центрирования, если кнопки разной ширины */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* ЗВОНОЧЕК (СПРАВА) */
.c-social__fab--bell {
  order: 3 !important; /* Третий (справа) */
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  margin: 0 !important;
}























/* === AI MODAL (slide-in) === */
.ai-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.ai-modal.is-open{
  pointer-events: auto;
}

.ai-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .22s ease;
}

.ai-modal.is-open .ai-modal__overlay{
  opacity: 1;
}

.ai-modal__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 92vw);
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.08);
  transform: translateX(110%);
  transition: transform .26s ease;
  display: flex;
  flex-direction: column;
}

.ai-modal.is-open .ai-modal__panel{
  transform: translateX(0);
}

.ai-modal__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.ai-modal__title{
  font-weight: 700;
}

.ai-modal__x{
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

.ai-modal__body{
  padding: 14px;
  overflow: auto;
  flex: 1;
}

.ai-modal__pick{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px dashed rgba(0,0,0,.25);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
}

.ai-modal__pick input{
  display: none;
}

.ai-modal__status{
  margin-top: 10px;
  font-size: 13px;
  opacity: .8;
}

.ai-modal__results{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.ai-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 10px 10px;
}

.ai-card__title{
  font-weight: 700;
  margin-bottom: 6px;
}

.ai-card__desc{
  font-size: 13px;
  opacity: .85;
  margin-bottom: 10px;
}

.ai-card__add{
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
}

/* Мобилка: выезд снизу */
@media (max-width: 768px){
  .ai-modal__panel{
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    height: min(78vh, 640px);
    width: 100%;
    border-left: 0;
    border-top: 1px solid rgba(0,0,0,.08);
    transform: translateY(110%);
  }
  .ai-modal.is-open .ai-modal__panel{
    transform: translateY(0);
  }
}

/* caption "Name: text" */
.c-social__caption { line-height: 1.35; }
.c-social__capName { font-weight: 600; }
.c-social__capSep  { opacity: .9; }
.c-social__capNameLink { cursor: pointer; }




/* немного “уплотним” пост, чтобы влезла полка товаров */
.c-social__post 
{ padding-bottom: 8px; }
.c-social__text {
   margin-bottom: 2px; }

/* PRODUCTS STRIP */
.c-social__prods{
  margin: 8px 0 4px;
  position: relative;
}

.c-social__prodsHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.c-social__prodsLbl{
  font-size: 12px;
  opacity: .75;
}

/* ТРЕК */
.c-social__prodsTrack{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.c-social__prodsTrack::-webkit-scrollbar{ height: 6px; }
.c-social__prodsTrack::-webkit-scrollbar-thumb{ border-radius: 10px; }

/* карточка товара — маленькая, квадратная */
.c-social__prod{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 92px;              /* 4 влезает обычно */
  text-decoration: none;
  color: inherit;
}
@media (max-width: 420px){
  .c-social__prod{ width: 84px; } /* на очень узких */
}

.c-social__prodImg{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
}
.c-social__prodImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.c-social__prodPh{
  display: block;
  width: 100%;
  height: 100%;
}

.c-social__prodTitle{
  margin-top: -1px;
  font-size: 11px;
  line-height: 1.15;
  max-height: 2.3em;        /* 2 строки */
  overflow: hidden;
}

.c-social__prodPrices{
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.c-social__prodPrice{ font-size: 11px; font-weight: 600; }
.c-social__prodCompare{ font-size: 10px; opacity: .6; text-decoration: line-through; }

/* точки (квадратики/пипки) */
.c-social__prodsDots{
  display: flex;
  gap: 6px;
  align-items: center;
}
.c-social__prodsDots .c-social__dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  display: inline-block;
}
.c-social__prodsDots .c-social__dot[data-on="1"]{
  background: rgba(0,0,0,.75);
}

/* стрелки */
.c-social__prodsBtn{
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-social__prodsBtn--prev{ left: -6px; }
.c-social__prodsBtn--next{ right: -6px; }







.c-social__ppGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:10px;
}

@media (max-width: 768px){
  .c-social__ppGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.c-social__ppItem{
  display:block;
  text-decoration:none;
  color:inherit;
}

.c-social__ppImgWrap{
  border-radius:12px;
  overflow:hidden;
  background:#f3f4f6;
}

.c-social__ppImg{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

.c-social__ppTitle{
  margin-top:6px;
  font-size:12px;
  line-height:1.2;
  max-height:2.4em;
  overflow:hidden;
}

.c-social__ppPrice{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  opacity:.75;
}





.c-social__prods{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding: 2px 0 2px;
    margin-top: 4px;
}

.c-social__prod{
  flex:0 0 115px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  background:#fff;
}

.c-social__prodImg{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:12px 12px 0 0;
  display:block;
}

.c-social__prodImg.is-empty{
  display:block;
  background:rgba(0,0,0,.06);
}

.c-social__prodMeta{
  display:block;
  padding:5px;
}

.c-social__prodTitle{
      display: block;
    font-size: 10px;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
    color: rgb(52, 52, 52);
}

.c-social__prodPrice{
  display:block;
  margin-top:0px;
  font-weight:600;
  font-size:10px;
  text-align: center;
}


.c-social__prodsWrap{
  position:relative;
  margin-top:8px;
}

.c-social__prodsNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  z-index:3;
  display:none; /* по умолчанию скрыто (мобилка) */
}

.c-social__prodsNav.is-prev{ left:6px; }
.c-social__prodsNav.is-next{ right:6px; }

/* показываем стрелки только на десктопе */
@media (min-width: 769px){
  .c-social__prodsNav{ display:block; }
  .c-social__prods{ padding:0 2px; } /* чтобы карточки не уходили под стрелки */
}
/* HARD hide scrollbar for product strip (desktop + all) */
.c-social .c-social__prods{
  overflow-x: auto !important;
  overflow-y: hidden !important;

  scrollbar-width: none !important;     /* Firefox */
  -ms-overflow-style: none !important;  /* old Edge */
}

.c-social .c-social__prods::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;                /* Chrome/Safari */
}

.c-social .c-social__prods::-webkit-scrollbar-track{
  background: transparent !important;
  border: none !important;
}

.c-social .c-social__prods::-webkit-scrollbar-thumb{
  background: transparent !important;
  border: none !important;
}
.c-social .c-social__prodsWrap{
  overflow: hidden !important;
}





.c-social__preview{
  position:relative;
  display:inline-block;
}

.c-social__previewRemove{
  position:absolute;
  bottom: 0px;
  right:6px;
  width:28px;
  height:28px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}

.c-social__previewOpen{
  cursor:pointer;
}
.c-social__zoomBack,
.c-social__zoomWrap{
  position: fixed !important;
  inset: 0 !important;
}


/* Viewer: раздвигаем имя и кнопку Follow (на всякий случай покрываем postHead и posthead) */
.c-social__viewer[data-open="1"] header.c-social__postHead,
.c-social__viewer[data-open="1"] header.c-social__posthead{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.c-social__viewer[data-open="1"] header.c-social__postHead .c-social__meta,
.c-social__viewer[data-open="1"] header.c-social__posthead .c-social__meta{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* кнопку уводим вправо + даём воздух от имени */
.c-social__viewer[data-open="1"] header.c-social__postHead .c-social__ufollow--feed,
.c-social__viewer[data-open="1"] header.c-social__posthead .c-social__ufollow--feed{
  margin-left: auto !important;
  margin-right: 10px !important;
}

/* троеточия чуть отделим */
.c-social__viewer[data-open="1"] header.c-social__postHead .c-social__dotsBtn,
.c-social__viewer[data-open="1"] header.c-social__posthead .c-social__dotsBtn{
  margin-left: 6px !important;
}





/* VIDEO BUTTON */
.c-social__fileBtn--video{
  background: linear-gradient(135deg,#111,#2b2b2b);
  color:#fff;
  border-radius:14px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: .18s ease;
 
}
.c-social__fileBtn--video:hover{ transform: translateY(-1px); opacity:.96; }

/* FULLSCREEN UPLOAD OVERLAY */
.c-social__uploadOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
}
.c-social__uploadOverlay[data-open="1"]{ display:flex; }

.c-social__uploadBox{
  width: min(560px, 92vw);
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 18px;
  color:#fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.40);
}
.c-social__uploadTitle{
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
}
.c-social__uploadProgress{
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.c-social__uploadBar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg,#6d5efc,#a594ff);
  transition: width .15s linear;
}
.c-social__uploadMeta{
  display:flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
  opacity:.9;
}





/* compact media buttons: Image / Video */
.c-social__fileBtn--media{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;      /* меньше */
  font-size:12px;        /* меньше */
  line-height:1;
}

.c-social__fileIco{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:block;
}

.c-social__fileTxt{
  display:inline-block;
  transform: translateY(0.5px); /* лёгкое выравнивание по базовой линии */
}











/* composer: two icon buttons in one row (safe) */
.c-social__mediaBtns{
  display:flex;
  align-items:center;
  gap:10px;
}

.c-social__mediaBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.04);
  cursor:pointer;
}

.c-social__mediaBtn:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.26);
}

.c-social__mediaBtn .c-social__fileIco{
  width:18px;
  height:18px;
  display:block;
}





/* === Upload UI (bottom night toast) === */
.c-social__vOverlay{
  display: none;                 /* скрыто, пока data-open="0" */
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 24px));
  z-index: 99999;
  pointer-events: none;          /* не мешает кликам по модалке */
}

.c-social__vOverlay[data-open="1"]{
  display: block;
  animation: cSocialUploadIn .18s ease-out both;
}

@keyframes cSocialUploadIn{
  from{ transform: translateX(-50%) translateY(10px); opacity: 0; }
  to  { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* карточка (если у тебя есть .c-social__vCard) */
.c-social__vOverlay .c-social__vCard{
  pointer-events: auto;          /* только кнопка Cancel кликабельна */
  background: rgba(10,12,20,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 12px 12px 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

/* если .vCard нет — делаем “карточкой” сам overlay */
.c-social__vOverlay:not(:has(.c-social__vCard)){
  pointer-events: auto;
  background: rgba(10,12,20,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 12px 12px 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.c-social__vOverlay [data-social-video-status]{
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
}

.c-social__vOverlay .c-social__vTrack{
  height: 10px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow: hidden;
}

.c-social__vOverlay [data-social-video-bar]{
  height: 10px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(130,84,255,1), rgba(76,205,255,1));
  transition: width .12s linear;
}

.c-social__vOverlay .c-social__vMeta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.c-social__vOverlay [data-social-video-pct]{
  color: rgba(255,255,255,.80);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Cancel */
.c-social__vOverlay [data-social-video-cancel]{
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  border-radius: 12px;
  padding: 7px 10px;
  cursor: pointer;
}

.c-social__vOverlay [data-social-video-cancel]:hover{
  background: rgba(255,255,255,.10);
}

/* Если JS ставит data-mode="images" — можно скрыть Cancel на фото */
.c-social__vOverlay[data-mode="images"] [data-social-video-cancel]{
  display: none;
}





/* скрытый текст (чтобы не было "Выбрать фото/видео") */
.c-social__sr{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* две иконки рядом */
.c-social__mediaBtns{display:flex;align-items:center;gap:10px;}
.c-social__mediaBtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(0,0,0,.04);
  cursor:pointer;
}
.c-social__mediaBtn:hover{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.26);}
.c-social__mediaBtn .c-social__fileIco{width:18px;height:18px;display:block;}

/* ночная плашка загрузки снизу */
.c-social__vOverlay{
  display:none;
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(520px, calc(100vw - 24px));
  z-index:99999;
  pointer-events:none;
}
.c-social__vOverlay[data-open="1"]{display:block;animation:cSocialUploadIn .18s ease-out both;}
@keyframes cSocialUploadIn{from{transform:translateX(-50%) translateY(10px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

.c-social__vOverlay .c-social__vCard{
  pointer-events:auto;
  background:rgba(10,12,20,.92);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:12px 12px 10px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
}
.c-social__vTitle{color:rgba(255,255,255,.92);font-weight:600;font-size:13px;margin-bottom:10px;}
.c-social__vTrack{height:10px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden;}
.c-social__vBar{height:10px;width:0%;border-radius:999px;background:linear-gradient(90deg, rgba(130,84,255,1), rgba(76,205,255,1));transition:width .12s linear;}
.c-social__vMeta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;}
.c-social__vPct{color:rgba(255,255,255,.80);font-size:12px;font-variant-numeric:tabular-nums;}
.c-social__vCancel{border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.06);color:rgba(255,255,255,.90);border-radius:12px;padding:7px 10px;cursor:pointer;}
.c-social__vCancel:hover{background:rgba(255,255,255,.10);}
.c-social__vOverlay[data-mode="images"] .c-social__vCancel{display:none;}




/* composer reorder UI */
.c-social__preview { position: relative; }
.c-social__previewHandle{
  position:absolute; left:8px; top:8px;
  font-size:16px; line-height:1;
  opacity:.7; cursor:grab; user-select:none;
}
.c-social__previewHandle:active{ cursor:grabbing; }

.c-social__previewMove{
  position:absolute; top:6px;
  width:26px; height:26px;
  border-radius:8px;
  border:0;
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
}
.c-social__previewMove--up{ right:38px; }
.c-social__previewMove--down{ right:6px; }



/* assets/social-notif-badge.css */
.c-social__fab--bell{ position:relative; }

.c-social__bellDot{
  position:absolute;
  top:10px;
  right:10px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ff3b30;
  box-shadow:0 0 0 2px rgba(11,11,13,1);
  display:none;
}

.c-social__bellDot.is-on{ display:block; }