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

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

/* === Карточка трека: рамка outline вместо border === */
.qt-woocommerce-singletrack-loop__item {
  /* удаляем старый border */
  border: none !important;
  /* рисуем outline (зелёная рамка) поверх всего содержимого */
  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-эффект на карточку трека */
.qt-woocommerce-singletrack-loop__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(48, 209, 88, 0.3);
}

/* === Стили обложки трека === */
#qtBody .qt-woocommerce-singletrack-loop ul.qt-playlist li img {
  padding: 1px 1px 1px 1px;    /* настраивайте под свой вкус */
  border-radius: 2px;          /* скругление углов у обложки */
  transition: transform 0.3s ease; /* плавное увеличение при hover */
}

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

/* ——— Десктоп/планшет: шире 375px ——— */
@media (min-width: 376px) {
  .post-type-archive-product .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 {
    display: block;
    margin-right: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .post-type-archive-product .qt-woocommerce-singletrack-loop__item .qt-addtocart {
    position: absolute !important;
    bottom: 9px !important;
    right: 20px !important;
    margin: 0 !important;
  }
}

/* ——— Мобильный портрет: до 375px включительно ——— */
@media (max-width: 375px) {
  .post-type-archive-product .qt-woocommerce-singletrack-loop__item {
    padding-right: 20px !important;
  }

  .post-type-archive-product .qt-woocommerce-singletrack-loop__item .qt-art.qt-item-metas {
    margin-right: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: inherit !important;
  }

  .post-type-archive-product .qt-woocommerce-singletrack-loop__item .qt-addtocart {
    position: static !important;
    display: block !important;
    margin-top: 12px !important;
  }
}

/* === Фон “Open Track” кнопки === */
.qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Hover-эффект: чуть более выраженный чёрный фон */
.qt-woocommerce-singletrack-loop ul.qt-playlist li .qt-addtocart a:hover {
  background: rgb(0,128,0) !important;
}
/* конец body.post-type-archive-product */
/* Фиксируем кнопку “Open Track” справа */

/* === SHOP END=== */