<turbo-stream action="append" target="modals"><template><div id="modal_fad9886e-81e1-496c-a1e4-0df1f6842555">
  <!-- Модалка продукта -->
  <div class="fixed inset-0 flex items-end justify-center md:items-center md:p-4 animate-fade-in"
       style="z-index: 50;"
       data-testid="product-modal"
    id="product-modal-frame-0"
    data-frame-stack-level="0"
    data-stack-level="0">
    <!-- overlay -->
    <a href="/units/548aaf02-5a4c-450b-a5fc-336be1fdeda1/products/fad9886e-81e1-496c-a1e4-0df1f6842555/modal/close" class="absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300" data-turbo-stream="true" data-testid="modal-overlay"></a>
    <!-- Контейнер модалки - выезжает снизу на мобильных, центр на десктопе -->
    <div class="bg-white rounded-t-2xl md:rounded-lg w-full md:max-w-4xl max-h-[90vh] overflow-hidden transform transition-transform duration-300 ease-out animate-slide-up"
         data-testid="product-modal-container"
         data-action="click->product-modal#stopPropagation">
      <!-- Заголовок с кнопкой закрытия -->
      <div class="flex items-center justify-between p-6 border-b border-gray-200">
        <h2 class="text-xl font-semibold text-gray-900" data-testid="product-modal-title">
          Торт сникерс
        </h2>
        <a href="/units/548aaf02-5a4c-450b-a5fc-336be1fdeda1/products/fad9886e-81e1-496c-a1e4-0df1f6842555/modal/close" class="text-gray-400 hover:text-gray-600 transition-colors" data-turbo-stream="true" data-turbo-frame="modals" data-testid="modal-close-button">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </a>
      </div>
      <!-- Контент модалки -->
      <div class="overflow-y-auto max-h-[calc(90vh-8rem)]">
        <div class="p-4 space-y-6 max-w-4xl mx-auto">
          <!-- Галерея -->
          <div class="space-y-4" data-controller="gallery" data-testid="product-modal-gallery">
  <!-- Основное изображение с миниатюрами поверх -->
  <div class="relative aspect-square rounded-lg h-[300px] w-full overflow-hidden bg-gray-100">
      <div class="w-full h-full flex items-center justify-center text-gray-400">
        <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
        </svg>
      </div>
  </div>
</div>

          <!-- Выбор размера (если несколько) -->
          <!-- Основная информация -->
          <div class="flex items-center justify-between mb-4" id="product-price-info">
            <div class="flex items-center gap-3">
              <div class="text-2xl font-bold text-primary" data-testid="product-modal-total-price">
                550 ₽
              </div>
            </div>
              <div class="text-gray-500">
                150.0 г
              </div>
          </div>
          
            <div>
              <h2 class="text-lg font-semibold text-gray-900 mb-3">Описание</h2>
              <p class="text-gray-700 leading-relaxed"><p>Торт</p></p>
            </div>
          <div>
  <h2 class="text-lg font-semibold text-gray-900 mb-4">Отзывы</h2>
  <!-- Список отзывов -->
    <div class="text-center py-8 text-gray-500">
      <p>Пока нет отзывов об этом товаре</p>
    </div>
  <!-- Форма отзыва или приглашение войти -->
    <div class="border-t pt-6">
      <p class="text-gray-500 text-center">
        <a class="text-blue-600 hover:text-blue-800 font-medium" href="/session/new">Войдите в аккаунт</a>
        , чтобы оставить отзыв
      </p>
    </div>
</div>

        </div>
      </div>
        <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
          <div class="max-w-4xl mx-auto">
            <div data-testid="product-modal-add-to-cart-sticky">
  <form class="button_to" method="post" action="/units/548aaf02-5a4c-450b-a5fc-336be1fdeda1/products/fad9886e-81e1-496c-a1e4-0df1f6842555/modal/add_product"><button class="w-full btn btn-primary flex items-center justify-center space-x-2" data-turbo-submits-with="Добавляем..." data-testid="add-to-cart-button" type="submit">Добавить в корзину • 550 ₽</button><input type="hidden" name="authenticity_token" value="DSBJdrVhv--HynrNHQAlPHmtu4y41nWQl9xewLI3Dk8GP1x0CV23hNheGP7kJChmUJTcTLNPqdwooztzOHlwTA" autocomplete="off" /><input type="hidden" name="business_account_id" value="548aaf02-5a4c-450b-a5fc-336be1fdeda1" autocomplete="off" /><input type="hidden" name="product_id" value="fad9886e-81e1-496c-a1e4-0df1f6842555" autocomplete="off" /><input type="hidden" name="product_size_id" value="41664382-8c4b-4f8a-8c81-977a730f22bd" autocomplete="off" /></form>
</div>

          </div>
        </div>
    </div>
    <style>
      @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes slide-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
      }

      .animate-fade-in {
        animation: fade-in 300ms ease-out;
      }

      .animate-slide-up {
        animation: slide-up 300ms ease-out;
      }

      @media (min-width: 768px) {
        @keyframes slide-up-md {
          from { transform: translateY(20px); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }

        .animate-slide-up {
          animation: slide-up-md 300ms ease-out;
        }
      }

      /* Стили для стекинговых модалок */
      .stacked-modal-container {
        position: relative;
      }

      #stacked-modals-container .stacked-modal-container:nth-child(n+2) {
        position: relative;
      }

      #stacked-modals-container .stacked-modal-container:nth-child(n+2) [data-testid="product-modal-content"] {
        background-color: rgba(0, 0, 0, 0.7);
      }
    </style>
  </div>
</div>
</template></turbo-stream>