/*
  TimTaj CSS split file: 02-shop.css
  Source: WordPress Additional CSS, split by page/area.
*/

/*
========================================================
 TimTaj.com — Стили для страниц Shop, Genre archives и Artist
--------------------------------------------------------
— Оформление карточек треков в общем списке
— Outline вместо border (тонкая светлая рамка)
— Фон карточки #161616 (непрозрачный тёмный)
— Фиксированное расположение кнопки “Open Track” справа
— Поддержка адаптивности для мобильных и десктопных устройств
— Актуально для Shop, страниц жанров /track_genre/ и Artist
— Обложки треков, плавные эффекты, hover-анимации
========================================================
*/

/* === Карточка трека: рамка outline вместо border === */
.post-type-archive-product .qt-woocommerce-singletrack-loop__item,
.tax-trackgenre .qt-woocommerce-singletrack-loop__item,
.single-artist .qt-woocommerce-singletrack-loop__item {
  border: none !important;
  outline: 1px solid rgba(255, 255, 255, 0.1) !important;
  outline-offset: -1px;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 5px;
  background: #161616;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover-эффект на карточку трека */
.post-type-archive-product .qt-woocommerce-singletrack-loop__item:hover,
.tax-trackgenre .qt-woocommerce-singletrack-loop__item:hover,
.single-artist .qt-woocommerce-singletrack-loop__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(48, 209, 88, 0.3);
}

/* === Стили обложки трека === */
.post-type-archive-product .qt-woocommerce-singletrack-loop ul.qt-playlist li img,
.tax-trackgenre .qt-woocommerce-singletrack-loop ul.qt-playlist li img,
.single-artist .qt-woocommerce-singletrack-loop ul.qt-playlist li img {
  padding: 1px 1px 1px 1px;
  border-radius: 2px;
  transition: transform 0.3s ease;
}

/* === SHOP / GENRE / ARTIST: фикс кнопки “Open Track” справа === */

/* ——— Desktop: 1201px и шире — оставляем проверенное позиционирование ——— */
@media (min-width: 1201px) {
  .post-type-archive-product .qt-woocommerce-singletrack-loop__item,
  .tax-trackgenre .qt-woocommerce-singletrack-loop__item,
  .single-artist .qt-woocommerce-singletrack-loop__item {
    position: relative !important;
    padding-right: 160px !important;
  }

  .post-type-archive-product .qt-woocommerce-singletrack-loop__item .qt-art.qt-item-metas,
  .tax-trackgenre .qt-woocommerce-singletrack-loop__item .qt-art.qt-item-metas,
  .single-artist .qt-woocommerce-singletrack-loop__item .qt-art.qt-item-metas {
    display: block;
    margin-right: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .post-type-archive-product .qt-woocommerce-singletrack-loop__item .qt-addtocart,
  .tax-trackgenre .qt-woocommerce-singletrack-loop__item .qt-addtocart,
  .single-artist .qt-woocommerce-singletrack-loop__item .qt-addtocart {
    position: absolute !important;
    bottom: 9px !important;
    right: 18px !important;
    margin: 0 !important;
  }
}

/* ——— Tablet / small desktop: 768px–1200px — центрируем кнопку по вертикали ——— */
@media (min-width: 768px) and (max-width: 1200px) {
  .post-type-archive-product .qt-woocommerce-singletrack-loop__item,
  .tax-trackgenre .qt-woocommerce-singletrack-loop__item,
  .single-artist .qt-woocommerce-singletrack-loop__item {
    position: relative !important;
    padding-right: 160px !important;
  }

  .post-type-archive-product .qt-woocommerce-singletrack-loop__item .qt-art.qt-item-metas,
  .tax-trackgenre .qt-woocommerce-singletrack-loop__item .qt-art.qt-item-metas,
  .single-artist .qt-woocommerce-singletrack-loop__item .qt-art.qt-item-metas {
    display: block;
    margin-right: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .post-type-archive-product .qt-woocommerce-singletrack-loop__item .qt-addtocart,
  .tax-trackgenre .qt-woocommerce-singletrack-loop__item .qt-addtocart,
  .single-artist .qt-woocommerce-singletrack-loop__item .qt-addtocart {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
}

/* ——— Mobile: до 767px включительно — центрируем кнопку по вертикали ——— */
@media (max-width: 767px) {
  .post-type-archive-product .qt-woocommerce-singletrack-loop__item,
  .tax-trackgenre .qt-woocommerce-singletrack-loop__item,
  .single-artist .qt-woocommerce-singletrack-loop__item {
    position: relative !important;
    padding-right: 128px !important;
  }

  .post-type-archive-product .qt-woocommerce-singletrack-loop__item .qt-art.qt-item-metas,
  .tax-trackgenre .qt-woocommerce-singletrack-loop__item .qt-art.qt-item-metas,
  .single-artist .qt-woocommerce-singletrack-loop__item .qt-art.qt-item-metas {
    display: block;
    margin-right: 128px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .post-type-archive-product .qt-woocommerce-singletrack-loop__item .qt-addtocart,
  .tax-trackgenre .qt-woocommerce-singletrack-loop__item .qt-addtocart,
  .single-artist .qt-woocommerce-singletrack-loop__item .qt-addtocart {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
}

/* === Open Track: единый внешний вид кнопки на desktop и mobile === */
.post-type-archive-product .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart,
.tax-trackgenre .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart,
.single-artist .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart {
  background: rgba(0, 0, 0, 0.05) !important;
}

.post-type-archive-product .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart a,
.post-type-archive-product .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart .qt-btn,
.tax-trackgenre .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart a,
.tax-trackgenre .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart .qt-btn,
.single-artist .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart a,
.single-artist .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart .qt-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  text-transform: none !important;
  box-sizing: border-box !important;
}

/* Hover-эффект: зелёный фон */
.post-type-archive-product .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart a:hover,
.post-type-archive-product .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart .qt-btn:hover,
.tax-trackgenre .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart a:hover,
.tax-trackgenre .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart .qt-btn:hover,
.single-artist .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart a:hover,
.single-artist .qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart .qt-btn:hover {
  background: rgb(0, 128, 0) !important;
}

/* === SHOP / GENRE / ARTIST: фикс обложки на tablet/mobile до 1200px === */
@media (max-width: 1200px) {
  .post-type-archive-product .qt-woocommerce-singletrack-loop ul.qt-playlist li img,
  .tax-trackgenre .qt-woocommerce-singletrack-loop ul.qt-playlist li img,
  .single-artist .qt-woocommerce-singletrack-loop ul.qt-playlist li img {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    object-fit: cover !important;
  }
}

/* === SHOP: уменьшение верхнего зазора под меню === */
@media (min-width: 1201px) {
  #qtBody.post-type-archive-product #maincontent .qt-main {
    padding-top: 130px;
  }

  #qtBody.post-type-archive-product .qt-pageheader-std > hr.qt-spacer-m:first-child {
    padding-top: 1rem;
  }
}
/* === SHOP END=== */