/* =========================================
   ОСНОВНАЯ СЕТКА КАРТОЧКИ ТОВАРА
========================================= */
.product-chocolate__main-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

/* ЛЕВАЯ КОЛОНКА (Фото) */
.product-chocolate__image-wrapper {
  background: linear-gradient(135deg, #1d4021 0%, #6c4b4a 100%);
  border-radius: 20px;
  padding: 60px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-chocolate__image-wrapper img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* ПРАВАЯ КОЛОНКА (Инфо) */
.product-chocolate__title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.1;
  letter-spacing: -1px;
}

.product-chocolate__description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
  color: #333;
}

.product-chocolate__meta {
  display: flex;
  gap: 30px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.status-in-stock { color: #2D5A27; }
.delivery-estimation { color: #666; }

/* =========================================
   ЦЕНЫ (ОБЫЧНАЯ И СО СКИДКОЙ)
========================================= */
.product-chocolate__prices {
  display: flex;
  align-items: center; /* Выравниваем по центру по вертикали */
  gap: 15px;          /* Отступ между старой и новой ценой */
  margin-bottom: 25px;
}

/* Старая цена (зачеркнутая) */
.price-old {
  font-size: 1.3rem;
  color: #999;
  text-decoration: line-through; /* Вот это свойство зачеркивает текст */
  font-weight: 500;
}

/* Новая/актуальная цена */
.price-current {
  font-size: 2.2rem;
  font-weight: 800;
  color: #E11A27; /* Фирменный красный цвет бренда */
  transition: opacity 0.15s ease-in-out;
}

/* Убираем лишние отступы внутри полей Drupal, если они есть */
.product-chocolate__prices div .field {
  margin: 0; 
}

/* =========================================
   ДИНАМИЧЕСКАЯ ИТОГОВАЯ ЦЕНА
========================================= */
.dynamic-total-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fffafa; /* Легкий оттенок красного для акцента */
  border: 1px solid #E11A27;
  border-radius: 4px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem; /* Отступ от кнопки Add to cart */
  transition: all 0.2s ease;
}

.dynamic-total-price .total-label {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
}

.dynamic-total-price .total-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: #E11A27;
  letter-spacing: -0.5px;
}

/* =========================================
   ФОРМА ВЫБОРА (1 шт, 3 шт)
========================================= */
.product-chocolate__purchase-zone {
  margin-bottom: 40px;
}

/* Скрываем стандартные радио-кнопки (кружочки) */
.product-chocolate__purchase-zone input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.product-chocolate__purchase-zone .form-radios {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

/* Стилизуем текст варианта как карточку */
.product-chocolate__purchase-zone .form-type-radio label {
  display: block;
  padding: 18px 20px;
  border: 2px solid #E4E5E6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.product-chocolate__purchase-zone .form-type-radio label:hover {
  border-color: #bbb;
}

/* Стиль АКТИВНОЙ (выбранной) карточки */
.product-chocolate__purchase-zone input[type="radio"]:checked + label {
  border-color: #E11A27; /* Красная рамка */
  background-color: #fffafa; /* Легкий красноватый фон */
  color: #E11A27;
  box-shadow: 0 4px 15px rgba(225, 26, 39, 0.1); /* Легкая тень */
}

/* Кнопка "Добавить в корзину" (Submit) */
.product-chocolate__purchase-zone form .form-submit {
  width: 100%;
  background-color: #E4E5E6; /* Светло-серый, как на макете */
  color: #000;
  border: 1px solid #ccc;
  padding: 1.5rem;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.product-chocolate__purchase-zone form .form-submit:hover {
  background-color: #d0d0d0;
}

/* =========================================
   БЛОКИ: ИНГРЕДИЕНТЫ И ДОСТАВКА
========================================= */
.section-title {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 30px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E4E5E6;
}

.ingredients-content,
.product-chocolate__delivery p {
  color: #555;
  line-height: 1.6;
}

/* =========================================
   НИЖНИЕ ПЛАШКИ (Без сои, Без консервантов)
========================================= */
.product-chocolate__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.feature-item {
  background-color: #E4E5E6;
  height: 160px;
  display: flex;
  padding: 30px;
  align-items: flex-start;
  font-size: 1.2rem;
  font-weight: 600;
  border: 1px solid #ccc;
}

/* =========================================
   АДАПТИВ (Для телефонов)
========================================= */
@media (max-width: 900px) {
  .product-chocolate__main-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .product-chocolate__features {
    grid-template-columns: 1fr;
  }
}


/* Контейнер кнопок */
.quantity-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0;
}

/* Кнопки пресетов */
button.qty-preset {
  background: #fff;
  border: 1px solid #E4E5E6;
  padding: 15px 5px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button.qty-preset.active {
  border-color: #E11A27;
  color: #E11A27;
  background-color: #fffafa;
}

.qty-preset small {
  display: block;
  background: #2D5A27;
  color: #fff;
  padding: 2px 5px;
  font-size: 0.65rem;
  border-radius: 2px;
  margin-top: 5px;
}

/* Кнопка "Or enter custom amount" */
.quantity-custom-toggle {
  margin-top: 10px;
}

button.js-show-custom-qty {
  background: none;
  border: none;
  color: #666;
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 0;
  cursor: pointer;
}

/* СКРЫТИЕ ПОЛЯ ВВОДА */
.custom-quantity-input-hidden {
  display: none !important;
}

/* Поле ввода (когда оно показано) */
.form-item-quantity-0-value input {
  margin-top: 10px;
  width: 80px;
  height: 40px;
  text-align: center;
  border: 2px solid #000;
}

/* ПЛАНЫ (Радио-карточки) */
.field--name-purchased-entity {
  margin-top: 20px;
}

.field--name-purchased-entity .form-radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field--name-purchased-entity .form-type-radio input {
  position: absolute;
  opacity: 0;
}

.field--name-purchased-entity .form-type-radio label {
  display: block;
  padding: 20px;
  border: 2px solid #E4E5E6;
  border-radius: 4px;
  font-weight: 800;
  cursor: pointer;
}

.field--name-purchased-entity input:checked + label {
  border-color: #E11A27;
  background-color: #fffafa;
}

/* =========================================
   КАРТОЧКА ТОВАРА В КАТАЛОГЕ (PRODUCT CARD)
========================================= */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: transparent; /* Фон берется от body (бежевый) */
  transition: transform 0.3s ease;
}

.product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--text-color, #000000);
}

/* --- Изображение --- */
.product-card__image-wrapper {
  position: relative;
  width: 100%;
  /* Соотношение сторон для фото (по макету оно вытянуто по вертикали) */
  aspect-ratio: 3 / 4; 
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Стилизуем саму картинку внутри Drupal field */
.product-card__image-wrapper img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /* Добавляем тень самой шоколадке, как на твоем макете */
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15));
  transition: transform 0.4s ease;
}

.product-card__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--grey-bg, #E4E5E6);
}

/* --- Инфо часть --- */
.product-card__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.product-card__title {
  font-family: var(--font-main);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.5px;
}

/* --- Мета (Вес и Цена) --- */
.product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto; /* Прижимает цену вниз, если названия разной длины */
}

.product-card__weight {
  font-size: 1.1rem;
  color: #333;
  font-weight: 400;
}

/* Цена (справа, жирная, крупная) */
.product-card__price {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Убираем лишние отступы от Drupal оберток цены */
.product-card__price div,
.product-card__price .field {
  margin: 0;
  padding: 0;
}

/* --- HOVER ЭФФЕКТЫ --- */
.product-card:hover .product-card__image-wrapper img {
  /* При наведении шоколадка чуть "взлетает" и тень становится больше */
  transform: translateY(-8px) scale(1.02);
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.2));
}

.product-card:hover .product-card__title {
  color: var(--brand-red, #E11A27);
}

/* Слегка уменьшаем отступ под обычной ценой, так как под ней теперь будет Тотал */
.product-chocolate__prices {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px; /* Вернули нормальный отступ до формы на случай 1 шт. */
}

.price-current {
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
}

/* =========================================
   ДИНАМИЧЕСКАЯ ИТОГОВАЯ ЦЕНА (Сразу под обычной)
========================================= */
.dynamic-total-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  
  /* Подтягиваем блок наверх, чтобы он красиво встал между ценой и формой */
  margin-top: -15px; 
  margin-bottom: 30px; 
  padding-bottom: 20px;
  border-bottom: 2px solid #E4E5E6; 
}

.dynamic-total-price .total-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
}

.dynamic-total-price .total-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: #E11A27;
  letter-spacing: -1px;
}