/* account-gallery: галерея фото личного кабинета (dec-add / dec-edit).
   Использует компоненты галереи страницы питомника из product.css
   (.product-stage-gallery / .product-hero-shot / .product-thumb / .product-lightbox-*).
   Разметку рендерит assets/js/account-gallery.js из скрытого #js-file-list.
   Подключать после account.css на страницах ЛК с загрузкой фото. */

/* box-sizing как на .product-page (в product.css он scoped на страницу питомника) */
.account-gallery,
.account-gallery *,
.account-gallery *::before,
.account-gallery *::after {
  box-sizing: border-box;
}

/* главное фото и колонка миниатюр — компактнее, чем на странице питомника */
.account-gallery .product-hero-shot {
  min-height: clamp(300px, 42vw, 440px);
}

/* фото не добавлены: вместо плейсхолдер-фото — пунктирная рамка с плюсом
   и надписью (тот же приём, что у .empty-specialization в форме питомника) */
.account-gallery .product-gallery-main:has(.product-hero-shot.is-empty) {
  grid-column: 1 / -1; /* hero завёрнут в .product-gallery-main — тянем обёртку */
}

.account-gallery .product-hero-shot.is-empty {
  position: relative;
  min-height: 180px;
  grid-column: 1 / -1; /* на всю ширину галереи, включая колонку миниатюр */
  border: 1px dashed #e8d9c9;
  border-radius: 12px;
  background: #fffdfb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* спрятать служебные элементы пустой галереи */
.account-gallery .product-hero-shot.is-empty .product-gallery-image,
.account-gallery .product-hero-shot.is-empty .product-gallery-shade,
.account-gallery .product-hero-shot.is-empty .product-gallery-counter,
.account-gallery .product-hero-shot.is-empty .product-gallery-caption,
.account-gallery .product-hero-shot.is-empty .product-gallery-progress {
  display: none;
}

.account-gallery .product-hero-shot.is-empty::before {
  content: "";
  width: 34px;
  height: 34px;
  opacity: 0.6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a15a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.account-gallery .product-hero-shot.is-empty::after {
  content: "Пока не добавлено ни одного фото";
  color: #8a7a6e;
  font-size: 14px;
}

.account-gallery .product-thumbs {
  max-height: clamp(300px, 42vw, 440px);
  grid-auto-rows: min-content;
}

/* в узкой колонке ЛК миниатюры — горизонтальной лентой под фото */
@media (max-width: 991px) {
  .account-gallery {
    grid-template-columns: 1fr;
  }

  .account-gallery .product-thumbs {
    display: flex;
    max-height: none;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .account-gallery .product-thumb {
    flex: 0 0 auto;
    width: 104px;
  }
}

/* крестик удаления поверх миниатюры */
.product-thumb-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(22, 33, 58, 0.62);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: background .18s ease, opacity .18s ease, transform .18s ease;
}

.account-gallery .product-thumb:hover .product-thumb-remove,
.account-gallery .product-thumb.is-active .product-thumb-remove,
.product-thumb-remove:focus-visible {
  opacity: 1;
}

.product-thumb-remove:hover {
  background: #e03e2f;
  transform: scale(1.08);
}

.product-thumb-remove svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* на тач-устройствах крестик всегда виден (нет hover) */
@media (hover: none) {
  .product-thumb-remove {
    opacity: 1;
  }
}

/* подпись-подсказка под галереей */
.account-gallery-hint {
  margin-top: 10px;
  color: #8a7d70;
  font-size: 13px;
}