/**
 * elitkras-variations.css
 *   1. Ровный grid из 5 карточек-вариаций на странице коллекции.
 *   2. Кастомный quantity-виджет (−, input, +) для add-to-cart форм D11.
 *   3. Перебивка унаследованных D7-правил, которые мешают раскладке.
 */

/* ===== 1. Grid вариаций ====================================== */
.view-ec-products .view-content {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px 25px;
}

.view-ec-products .product_list_item {
  float: none;
  width: 20%;
  padding: 0 12px;
  box-sizing: border-box;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}

.view-ec-products .product_list_item .views-row,
.view-ec-products .product_list_item .views-row-1 {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.view-ec-products .product_list_item a.product_img2 {
  display: block;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.view-ec-products .product_list_item a.product_img2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.view-ec-products .product_list_item .area {
  min-height: 48px;
  margin-top: 8px;
}

.view-ec-products .product_list_item .views-field-commerce-price {
  margin-top: auto;
  font-family: 'Museo Cyrl 900', sans-serif;
  font-size: 15px;
  padding-bottom: 8px;
}

.view-ec-products .product_list_item .views-field-add-to-cart-form form {
  display: flex;
  flex-direction: column;     /* quantity сверху, "В корзину" снизу */
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
}

/* ===== 2. Quantity-виджет ==================================== */
/* Перебиваем D7-правила style.css (width:70px, float:left, height:52px и т.п.). */
.form-item-quantity-0-value,
.product_descr .commerce-add-to-cart .form-item-quantity-0-value {
  display: inline-flex !important;
  align-items: stretch;
  align-self: flex-start;     /* группа −[1]+ не растягивается */
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
  vertical-align: middle;
  font-size: 0;            /* убираем inline-gap между inline-flex детьми */
  line-height: 1;
}

.form-item-quantity-0-value > label {
  display: none !important;
}

.form-item-quantity-0-value input.form-number,
.product_descr .commerce-add-to-cart .form-item-quantity-0-value input.form-number {
  box-sizing: border-box;
  width: 48px;
  height: 36px !important;     /* перебивает height:52px из .product_descr правил */
  margin: 0 !important;
  padding: 0;
  border: 1px solid #cfd8dc;
  border-radius: 0;
  background: #fff;
  font-size: 15px;
  line-height: 34px;            /* 36 − 2*1 border */
  text-align: center;
  vertical-align: middle;
  -moz-appearance: textfield;
}
.form-item-quantity-0-value input.form-number::-webkit-outer-spin-button,
.form-item-quantity-0-value input.form-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.form-item-quantity-0-value input.form-number:focus {
  outline: none;
  border-color: #233444;
}

.elitkras-qty-btn {
  box-sizing: border-box;
  width: 32px;
  height: 36px;
  padding: 0;
  border: 1px solid #cfd8dc;
  background: #f6f7f9;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 34px;            /* 36 − 2*1 border */
  text-align: center;
  color: #233444;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.elitkras-qty-btn:hover  { background: #e7f0f4; }
.elitkras-qty-btn:active { background: #cfd8dc; }

.elitkras-qty-btn-decrease { border-right: 0; }
.elitkras-qty-btn-increase { border-left: 0; }

/* ===== 3. Кнопка "В корзину" в строке вариаций =============== */
/* Геометрия и цвет заданы родными правилами в style.css:
   .form-submit {height:52px; width:195px; bg:#00a9d1; color:#fff; Museo Cyrl 900 16px}
   .views-field-add-to-cart-form .form-submit {height:44px; line-height:44px}
   Перебиваем ТОЛЬКО ширину — 195px не помещаются в карточку 20%, растягиваем по контейнеру. */
.view-ec-products .views-field-add-to-cart-form input.form-submit {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: block;
}

/* ===== Адаптив (вариации) =================================== */
@media (max-width: 1024px) {
  .view-ec-products .product_list_item { width: 33.333%; }
}
@media (max-width: 700px) {
  .view-ec-products .product_list_item { width: 50%; }
}
@media (max-width: 480px) {
  .view-ec-products .product_list_item { width: 100%; }
}

/* ===== Списки новостей / акций ================================
   Текст teaser'а уходит за пределы карточки на узких экранах
   (на мобильном style.css ставит height:auto, и блок растёт).
   Обрезаем заголовок до 2 строк, body до 3-х через line-clamp,
   а на мобильном возвращаем фиксированную высоту, чтобы ряд был ровным. */

/* Список новостей */
.news_list .news_item .news_title,
.news_list .news_item .o_hidden .news_title {
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.news_list .news_item .o_hidden p,
.news_list .news_item .field-item p,
.news_list .news_item .field-item {
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 3;
          line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  margin: 0;
}

/* Список акций (popup внутри .sh_item) */
.shares_list .sh_item .share_popup p,
.shares_list .sh_item .share_popup .field-item p,
.shares_list .sh_item .share_popup .field-item {
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 4;
          line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* На мобильном (где исходный media.css ставил .news_item{height:auto})
   возвращаем фиксированную высоту, чтобы карточки выровнялись. */
@media (max-width: 520px) {
  .news_list .news_item {
    height: 200px !important;
    display: flex;
    align-items: stretch;
  }
  .news_list .news_item .news_image {
    flex: 0 0 auto;
    width: 130px !important;
    height: 100%;
    overflow: hidden;
  }
  .news_list .news_item .news_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none !important;
  }
  .news_list .news_item .o_hidden {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
  }
  .news_list .news_item .news_title {
    font-size: 15px;
    padding-bottom: 0;
  }
  .news_list .news_item p,
  .news_list .news_item .field-item {
    -webkit-line-clamp: 4;
            line-clamp: 4;
    font-size: 13px;
    line-height: 1.35;
    padding-bottom: 0 !important;
  }

  .shares_list .sh_item {
    height: 280px !important;     /* было 352px desktop / auto на мобиле */
  }
  .shares_list .sh_item .share_popup {
    top: 150px;
    padding: 14px 16px 0;
  }
  .shares_list .sh_item .share_popup p {
    -webkit-line-clamp: 3;
            line-clamp: 3;
    font-size: 13px;
    line-height: 1.35;
    padding-bottom: 0;
  }
}