.product-wrapper-card {
  max-width: 1200px;
  margin: 10px auto;
  padding: 1px;
  background: #ffffff;
  border-radius: 32px;
  transition: box-shadow 0.3s ease;
}


.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px 5px; /* Вертикальный = 40px, Горизонтальный = 32px (увеличено) */
  padding: 2px;
}

.product-card {
  background: #f4f4f4;
  border-radius: 20px;
  padding: 14px;
  width: 200px;
  min-height: 340px; /* Фиксированная минимальная высота */
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 10px;
}

.product-card h3,
.product-name {
  font-size: 16px;
  font-weight: 700;
  margin: 10px 0 4px;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #434343;
  /* Фиксируем высоту под 2 строки */
  min-height: 44px; /* 16px (font-size) * 1.3 (line-height) * 2 строки ≈ 44px */
  word-wrap: break-word; /* Перенос слов при переполнении */
  overflow-wrap: break-word; /* Альтернативное свойство для переноса */
  white-space: normal; /* Разрешает перенос строк */
  display: -webkit-box; /* Для ограничения количества строк */
  -webkit-line-clamp: 2; /* Максимум 2 строки */
  -webkit-box-orient: vertical; /* Вертикальное направление */
  overflow: hidden; /* Скрывает текст, выходящий за пределы */
  line-height: 1.3; /* Улучшает читаемость при переносе */
}

.product-weight {
  font-size: 15px;
  color: #999;
  font-weight: 400;
}

.product-card p {
  font-size: 19.2px;
  color: #c7c7c7;
  margin-bottom: 14.4px;
}

.product-card .price,
.final-price {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 19.2px;
}

.old-price {
  font-size: 15px;
  color: #aaa;
  text-decoration: line-through;
}

.price-cart-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto; /* Прижимаем к низу карточки */
}

.product-card .action-wrapper {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 4px;
}

@media (max-width: 480px) {
  .product-card {
    width: 40%; /* было 48% — теперь карточка уже */
    padding: 5px; /* чуть меньше паддинг для компактности */
    min-height: 280px; /* можно тоже чуть сократить, если нужно */
  }

  .product-card img {
    height: 140px;
    border-radius: 12px;
    margin-bottom: 8px;
  }

  .product-card h3,
  .product-name {
    font-size: 13.5px;
    min-height: 36px;
  }

  .product-weight {
    font-size: 12.5px;
  }

  .product-card p {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .product-card .price,
  .final-price {
    font-size: 15px;
    margin-bottom: 10px;
  }
  .cart-controls button {
  width: 12px;
  height: 12px;
}
}



/* -------------------------
   Рисуем плюс через ::before и ::after
   ------------------------- */

/* Сильный селектор чтобы точно переопределить старые правила */
.product-card .action-wrapper button.add-to-cart {
  /* базовая форма круга */
  position: relative;            /* нужно для абсолютных псевдоэлементов */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  box-sizing: border-box;
  border: none;
  border-radius: 50%;
  background-image: linear-gradient(to right, #f6911d, #d47713);
  cursor: pointer;
  color: transparent;            /* скрываем текст, если он есть; плюс мы рисуем псевдоэлементом */
  overflow: visible;             /* нужно, если хотим тонкие тени */
  margin-right: 10px;
}

/* Горизонтальная и вертикальная полоски — образуют плюс.
   Центрируем их с помощью left/top 50% + transform */
.product-card .action-wrapper button.add-to-cart::before,
.product-card .action-wrapper button.add-to-cart::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #f3f3f3;           /* цвет знака (можно подогнать) */
  transform: translate(-50%, -50%);
  border-radius: 1px;
  pointer-events: none;          /* чтобы клик попадал на кнопку */
}

/* Вертикальная ножка плюса */
.product-card .action-wrapper button.add-to-cart::before {
  width: 2px;                    /* толщина палки — подбирай 1..2 */
  height: 54%;                   /* длина — доля от высоты кнопки */
}

/* Горизонтальная ножка плюса */
.product-card .action-wrapper button.add-to-cart::after {
  height: 2px;
  width: 54%;
}

/* Активное состояние (маленькая анимация без сдвига текста) */
.product-card .action-wrapper button.add-to-cart:active {
  transform: scale(0.97);
}

/* Если нужно более тонкий/толстый плюс на разных экранах */
@media (max-width: 480px) {
  .product-card .action-wrapper button.add-to-cart {
    width: 24px !important;
    height: 24px !important;
  }
  .product-card .action-wrapper button.add-to-cart::before { height: 52%; width: 2px; }
  .product-card .action-wrapper button.add-to-cart::after  { width: 52%; height: 2px; }
}

/* -------------------------
   Уменьшаем кнопки increase/decrease и центрируем знак
   ------------------------- */

.cart-controls button {
  background: transparent;
  border: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;   /* уменьшили */
  line-height: 1;
  padding: 0;
  margin: 0 4px;
  cursor: pointer;
  color: inherit;
}

/* модификация если у вас где-то есть старые правила font-size:35px !important; */
/* @important - добавляй только при необходимости, если старое правило не переопределяется */
.cart-controls button { font-size: 12px !important; }

/* Центрируем цифру количества между кнопками */
.cart-controls .quantity {
  min-width: 18px;
  text-align: center;
  display: inline-block;
  line-height: 18px;
  font-size: 13px;
}

/* Мобильные корректировки */
@media (max-width: 480px) {
  .cart-controls button { width: 16px; height: 16px; font-size: 11px; }
  .cart-controls .quantity { min-width: 16px; line-height: 16px; font-size: 12px; }
}

/* Цвета для кнопок increase / decrease — более специфичные селекторы */
.product-card .action-wrapper .cart-controls > button.increase {
  color: #19bd04;          /* зелёный */
  -webkit-text-fill-color: #19bd04; /* для надёжности в некоторых браузерах */
  font-weight: 600;
}

/* Красный для минуса */
.product-card .action-wrapper .cart-controls > button.decrease {
  color: #c21212;          /* красный */
  -webkit-text-fill-color: #c21212;
  font-weight: 600;
}

/* Состояния hover/focus — слегка подчёркиваем интерактивность */
.product-card .action-wrapper .cart-controls > button.increase:hover,
.product-card .action-wrapper .cart-controls > button.increase:focus {
  filter: brightness(0.98);
  outline: none;
}

.product-card .action-wrapper .cart-controls > button.decrease:hover,
.product-card .action-wrapper .cart-controls > button.decrease:focus {
  filter: brightness(0.98);
  outline: none;
}