/* =========================
   CARD PAGE (product/request)
   ========================= */
/* ------- Gallery (desktop, ≥992px) ------- */
.top_product_card{
  position: relative;               /* якорь для сердечка */
  max-width: 980px;
  margin: 0 auto 18px;
}

.top_product_card .photos{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ровно 2 колонки на десктопе */
  gap: 24px;
  align-items: start;
  justify-items: center;
}

.top_product_card .photos > div{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  width: 100%;
  aspect-ratio: 1 / 1;              /* квадрат на десктопе */
  max-width: 600px;                  /* чтобы не расползалось на очень широких экранах */
}

.top_product_card .photos > div img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* заполняем квадрат без искажений */
  border-radius: 6px;
}

/* ------- Heart (внизу справа секции фото) ------- */
#like_img.like_img{
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 26px; height: 26px;
  z-index: 5;
  cursor: pointer;
  transition: transform .12s ease;
  filter: drop-shadow(0 0 .8px rgba(0,0,0,.35));
}
#like_img.like_img:hover{ transform: scale(1.06); }

/* ------- Message form (Написать продавцу) ------- */
.card_message_container{
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.card_message_container div{
  font-weight: 500;
  margin-bottom: 5px;
}
.card_message_container textarea{
  padding: 10px;
  resize: none;
  width: 600px;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
}
.card_message_container textarea:focus{
  border-color: #1c9675;
}
.card_message_container button{
  background: #1c9675;
  color: #fff;
  border-radius: 5px;
  border: none;
  padding: 10px 24px;
  font-size: 16px;
  cursor: pointer;
  transition: all .25s ease;
}
.card_message_container button:hover{
  background: #178463;
  transform: scale(1.03);
}

/* =========================
   MOBILE (<= 991px) — swipe галерея
   ========================= */
@media (max-width: 991px){

  .top_product_card{
    max-width: 720px;
    margin: 0 auto 12px;
    position: relative;
  }

  /* Горизонтальная лента со свайпом и привязкой к слайду */
  .top_product_card .photos{
    display: flex;
    gap: 12px;
    overflow-x: auto;                /* свайп/скролл по горизонтали */
    scroll-snap-type: x mandatory;   /* прилипание к кадру */
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
  }

  /* Слайд — квадрат почти на всю ширину */
  .top_product_card .photos > div{
    flex: 0 0 auto;
    width: 86vw;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    scroll-snap-align: center;
    position: relative;
  }

  .top_product_card .photos > div img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }

  /* скрыть полоску прокрутки где возможно */
  .top_product_card .photos::-webkit-scrollbar{ display:none; }
  .top_product_card .photos{ scrollbar-width: none; }

  /* сердечко — компактнее */
  #like_img.like_img{
    bottom: 8px; right: 10px;
    width: 24px; height: 24px;
  }

  /* форма сообщения — адаптив */
  .card_message_container textarea{
    width: 90vw; height: 180px;
  }
  .card_message_container button{
    display:block; margin:10px auto 0;
    transform:none;
  }
}

/* =========================
   Общие мелочи/совместимость
   ========================= */
.like_img{ cursor: pointer; }
.like_img{ transform: none !important; } /* гасим старые инлайны */

.product-contact{margin:16px 0;}
.product-contact a {margin-left:10px;}
.product-contact__hint{opacity:.6;margin:8px 0;}
.msg-btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;cursor:pointer;}
.msg-btn--primary{background:#2a965a;color:#fff;}
.msg-btn--primary:hover{opacity:.9;}

/* TRUSTMARK badge (green/red only) */
.trustmark-badge-wrap{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:16px;
}
.trustmark-badge{
  width:14px;
  height:14px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 14px;
  margin-top:3px;
}
.trustmark-badge--ok{ background:#2eaf4a; }
.trustmark-badge--bad{ background:#e23b3b; }