/* ============================================================
   Кнопки копирования на карточке товара — 2026-07-27

   1) иконка «копировать название» справа от <h1>
   2) «копировать ссылку» вместо блока «поделиться»

   Имя файла с версией: на проде CSS раздаётся через CDN с
   ignore_query_string, поэтому ?v= кеш не инвалидирует, а имя — да.
   См. память css-deploy-filename-versioning.
   ============================================================ */

/* --- Обёртка заголовка: h1 + иконка в одну строку ---------- */
/* Иконка живёт РЯДОМ с h1, а не внутри: класс js-popup-title
   Aspro читает для плавающей шапки при скролле, и вложенная
   кнопка утекла бы в клон заголовка. */
.dp-title-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
/* h1 не растягиваем — иначе иконка улетает к правому краю колонки,
   а она должна стоять вплотную к названию */
.dp-title-row > h1{
  flex:0 1 auto;
  min-width:0;
}

/* --- Сама кнопка-иконка ------------------------------------ */
/* Обе кнопки — «название» и «ссылка» — одна сущность с одинаковым
   поведением: габариты, цвет, hover, фокус и подсказка общие. */
.dp-copy-btn{
  position:relative;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#8d8a93;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.dp-copy-btn svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Иконка «ссылка» приходит из общего спрайта, где у путей задан
   stroke-width: 2 при viewBox 20 — рядом с нарисованной от руки
   иконкой копирования она смотрелась бы заметно жирнее.
   CSS перебивает presentation attribute, в том числе внутри <use>. */
.dp-copy-btn [href*="item_icons"],
.dp-copy-btn svg use{
  stroke-width:1.4;
}
@media (hover:hover){
  .dp-copy-btn:hover{
    background:#f3ebf6;
    color:#620a84;
  }
}
.dp-copy-btn:focus-visible{
  outline:2px solid #620a84;
  outline-offset:2px;
}

/* Лёгкий подъём, чтобы кнопки оптически совпали с первой строкой
   крупного h1 */
.dp-title-row .dp-copy-btn{
  margin-top:2px;
}

/* --- Подтверждение --------------------------------------- */
.dp-copy-btn--done{
  color:#2e7d32;
}
.dp-copy-btn--fail{
  color:#c0392b;
}

.dp-copy-btn::after{
  content:attr(aria-label);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  padding:4px 9px;
  border-radius:6px;
  background:#20151f;
  color:#fff;
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:5;
}
.dp-copy-btn--done::after,
.dp-copy-btn--fail::after{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* Подсказка «Скопировать название / ссылку» при наведении и с клавиатуры.
   Только на устройствах с настоящим hover — на тач-экранах :hover
   «залипает» после тапа, там подсказка живёт только через --done. */
@media (hover:hover){
  .dp-copy-btn:hover::after{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
}
.dp-copy-btn:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

@media (max-width:767px){
  .dp-title-row{ gap:6px; }
  .dp-copy-btn{ width:30px; height:30px; }
  .dp-copy-btn svg{ width:17px; height:17px; }
}