/* ==========================================================================
   1. СТИЛИ ДЛЯ ВИТРИНЫ (СПИСОК ТОВАРОВ / КАТЕГОРИЯ)
   ========================================================================== */

/* --- Сетка и обертка колонок --- */
.j2store-products-row .col-sm-4 {
  display: flex;
  margin-bottom: 30px; 
}

/* --- Оформление карточки товара --- */
.j2store-products-row .j2store-single-product {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* --- Изображения товаров в списке --- */
.j2store-products-row .j2store-product-images img {
  width: 100% !important; /* Перебиваем жесткие размеры из HTML */
  aspect-ratio: 4 / 3;    /* Одинаковые пропорции для всех превью */
  object-fit: contain;    /* Вписываем картинку без обрезки */
  display: block;
  margin: 0 auto 15px;    
  background-color: #f8f9fa; 
  border-radius: 4px;
}

.j2store-products-row .j2store-thumbnail-image {
  text-align: center;
}

/* --- Заголовок товара --- */
.j2store-products-row .product-title {
  margin: 0 0 15px 0;
  font-size: 16px;
  line-height: 1.4;
  
  /* Обрезка длинных названий для ровной сетки */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 67px; 
}

.j2store-products-row .product-title a {
  color: #333333;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: color 0.2s ease-in-out;
}

.j2store-products-row .product-title a:hover,
.j2store-products-row .product-title a:focus {
  color: #0d6efd;
  text-decoration: none;
}

/* --- Цена и Корзина --- */
/* Прижимаем блок к нижнему краю карточки */
.j2store-products-row .product-price-container {
  margin-top: auto; 
  padding-top: 15px;
}

.j2store-products-row .j2store-add-to-cart {
  margin-top: 15px;
}


/* ==========================================================================
   2. СТИЛИ ДЛЯ ДЕТАЛЬНОЙ СТРАНИЦЫ ТОВАРОВ
   ========================================================================== */

/* --- Главная картинка товара --- */
.j2store-mainimage,
.j2store-mainimage .nozoom,
.j2store-mainimage a.j2store-lightbox,
.j2store-mainimage a[data-fancybox] {
  display: block;
  width: 100%;
}

.j2store-mainimage img.j2store-product-main-image {
  width: 100% !important;  
  max-width: 100%;         
  height: auto !important; 
  border-radius: 8px;      
  border: 1px solid #e0e0e0; 
  background-color: #f8f9fa; 
  object-fit: contain;
}

/* --- Галерея миниатюр (Дополнительные картинки) --- */
/* Делаем умную сетку для превьюшек */
.j2store-product-additional-images ul.additional-image-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); 
  gap: 10px; 
  padding: 0 !important;
  margin: 15px 0 0 0 !important; 
  list-style: none !important; 
}

.j2store-product-additional-images ul.additional-image-list li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Делаем миниатюры ровными квадратами */
.j2store-product-additional-images ul.additional-image-list img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1; 
  object-fit: cover; /* Обрезает края, чтобы заполнить квадрат без искажений */
  border: 1px solid #e0e0e0; 
  border-radius: 6px; 
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Эффект при наведении на миниатюру */
.j2store-product-additional-images ul.additional-image-list img:hover {
  border-color: #0d6efd; 
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.2); 
  opacity: 0.85; 
}