Embed

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>


<style>
  /* === Início dos Estilos CSS Atualizados para ZOOM POP-OUT === */

  :root {
    --cor-principal: #007bff; /* <<< Substitua pela cor principal */
    --cor-principal-hover: #0056b3; /* <<< Substitua por um tom mais escuro */
  }

  .produto-carousel-container {
    /* Container GERAL - Controla largura máxima e centralização */
    max-width: 700px; /* Aumenta um pouco para dar espaço extra para setas externas */
    margin: 30px auto;
    position: relative; /* Referência para posicionamento absoluto das setas */
    padding: 0 20px; /* Padding lateral mínimo geral */
    box-sizing: border-box;
  }

  .swiper-container-wrapper {
      /* Novo wrapper para o swiper, controla a largura do carrossel VISÍVEL */
      max-width: 550px; /* Largura do carrossel em si (MENOR que o container GERAL) */
      margin: 0 auto; /* Centraliza o carrossel dentro do container geral */
      position: relative; /* Referência para paginação */
      /* === REMOVER overflow: hidden daqui === */
      /* overflow: hidden; */ /* Permitir que o slide com hover 'vaze' se necessário */
  }

  .swiper-slide {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    min-height: 500px; /* Altura base desktop - AJUSTE */
    height: auto;
    box-sizing: border-box;
    overflow: hidden; /* Slide ainda corta conteúdo interno GERALMENTE */
    /* === Z-INDEX e POSITION para slide hover === */
    position: relative; /* Necessário para z-index funcionar */
    z-index: 1; /* Z-index base */
    transition: z-index 0s 0.35s; /* Atrasar reset do z-index */
  }

  /* === Efeito Hover no Slide Inteiro === */
  .swiper-slide:hover {
      z-index: 50 !important; /* TRAZ O SLIDE INTEIRO PARA CIMA, IMPORTANTE! */
      overflow: visible; /* Permite que a imagem 'vaze' do slide */
      transition: z-index 0s 0s; /* Aplica z-index imediatamente */
  }

  .product-image-wrapper {
    width: 100%;
    height: 240px; /* Altura imagem desktop - AJUSTE */
    /* === REMOVER overflow: hidden daqui para permitir pop-out === */
    /* overflow: hidden; */
    position: relative; /* Mantém como referência para a imagem */
    background-color: #f8f8f8;
    flex-shrink: 0;
    z-index: 5; /* Garante que a área da imagem fique acima do product-info base */
  }

  .product-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* === Z-INDEX e POSITION para imagem hover === */
    position: relative; /* Para z-index funcionar */
    z-index: 1; /* Z-index base da imagem */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), /* Transição suave p/ zoom */
                box-shadow 0.35s ease, /* Transição p/ sombra */
                z-index 0s ease; /* Z-index muda instantaneamente */
    border-radius: 8px 8px 0 0; /* Arredonda cantos superiores */
  }

  /* === Efeito de Zoom Pop-Out na Imagem === */
  .product-image-wrapper:hover img {
    transform: scale(1.2); /* Fator de Zoom - pode ajustar */
    z-index: 60;           /* Imagem fica ACIMA de TUDO no slide hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35); /* Sombra para dar profundidade */
    /* Mantém bordas superiores arredondadas, remove inferiores se houver */
    border-radius: 8px; /* Arredonda todos os cantos quando em zoom */
  }

  .product-info {
    padding: 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
    /* Garante que fique abaixo da imagem base */
    position: relative;
    z-index: 2;
  }

  /* Restante do CSS para title, description, price, button permanece igual */
  .product-title {
    font-size: 1.05rem; font-weight: 600; color: #333; line-height: 1.35;
    margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
    min-height: 2.7em;
  }
  .product-description {
    font-size: 0.88rem; color: #666; line-height: 1.4; margin-bottom: 15px;
    flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
  }
  .product-price {
    font-size: 1.25rem; font-weight: bold; color: #222; margin-bottom: 15px;
    margin-top: auto; padding-top: 10px; text-align: left;
  }
  .buy-button {
    display: block; width: 100%; background-color: var(--cor-principal);
    color: white; padding: 10px 15px; margin-top: 10px; border-radius: 5px;
    text-decoration: none; font-weight: bold; font-size: 0.95rem;
    text-align: center; transition: background-color 0.3s ease; border: none;
    cursor: pointer; flex-shrink: 0;
  }
  .buy-button:hover { background-color: var(--cor-principal-hover); color: white; }


  /* === NAVEGAÇÃO (SETAS) === */
  .swiper-button-prev,
  .swiper-button-next {
    position: absolute; top: 40%; transform: translateY(-50%); z-index: 70; /* Acima dos slides com hover */
    color: var(--cor-principal); background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%; width: 42px; height: 42px; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
   .swiper-button-prev:hover, .swiper-button-next:hover {
      background-color: var(--cor-principal); color: white; box-shadow: 0 3px 8px rgba(0,0,0,0.25);
   }
  .swiper-button-prev { left: 0px; }
  .swiper-button-next { right: 0px; }
  .swiper-button-next::after, .swiper-button-prev::after { font-size: 18px; font-weight: bold; line-height: 1; }

  /* === PAGINAÇÃO === */
  .swiper-pagination {
    position: relative; bottom: auto; margin-top: 25px; text-align: center;
    z-index: 5; /* Abaixo das setas e slides com hover */
  }
  .swiper-pagination-bullet { background: #ccc; opacity: 0.8; width: 10px; height: 10px; margin: 0 5px !important; }
  .swiper-pagination-bullet-active { background-color: var(--cor-principal); opacity: 1; }
  .swiper-button-disabled { opacity: 0.3; cursor: not-allowed; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }


  /* === AJUSTES PARA MOBILE (max-width: 767px) === */
  @media (max-width: 767px) {
    .produto-carousel-container { max-width: 100%; padding: 0 10px; }
    .swiper-container-wrapper { max-width: calc(100% - 70px); /* Ajuste para setas mobile */ }

    .swiper-slide {
       min-height: 380px; /* Altura Reduzida Mobile - AJUSTE */
    }
    /* Hover no mobile pode ser desativado ou mantido */
    /* .swiper-slide:hover { z-index: 1; overflow: hidden; } */ /* Desativar pop-out no mobile? */

    .product-image-wrapper {
       height: 160px; /* Altura imagem mobile - AJUSTE */
    }

    /* Efeito Zoom Mobile (pode reduzir ou remover) */
    .product-image-wrapper:hover img {
        transform: scale(1.1); /* Zoom menor no mobile? */
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }
    /* .product-image-wrapper:hover img { transform: none; box-shadow: none; } */ /* Desativar zoom no mobile? */


     .product-info { padding: 10px; }
     .product-title { font-size: 0.95rem; min-height: 2.6em; -webkit-line-clamp: 2; }
     .product-description { font-size: 0.8rem; -webkit-line-clamp: 2; line-height: 1.35; }
     .product-price { font-size: 1.1rem; margin-bottom: 10px; }
     .buy-button { padding: 8px 10px; font-size: 0.85rem; }

     .swiper-button-next, .swiper-button-prev { width: 36px; height: 36px; top: 35%; }
     .swiper-button-next::after, .swiper-button-prev::after { font-size: 16px; }
     .swiper-button-prev { left: 0px; }
     .swiper-button-next { right: 0px; }
     .swiper-pagination { margin-top: 20px; }
     .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 4px !important;}
  } /* Fim @media mobile */

  /* === Fim dos Estilos CSS === */
</style>


<div class="produto-carousel-container">

  
  <div class="swiper-container-wrapper">
      <div class="swiper product-swiper">
        <div class="swiper-wrapper">

          
          <div class="swiper-slide">
            <div class="product-image-wrapper">
               
               <img src="https://i.pinimg.com/736x/eb/d4/6e/ebd46e654edc03e311f3d60f7de94a54.jpg" alt="Nome Produto 1">
            </div>
            <div class="product-info">
                
                <div class="product-title">Nome do Seu Produto 1 Aqui</div>
                 
                <div class="product-description">Descrição do produto 1. Lembre-se da limitação de linhas.</div>
                
                <div class="product-price">R$ 199,99</div>
                 
                <a href="https://wa.me/5511978713748?text=Ol%C3%A1!%20Tenho%20interesse%20no%20Nome%20do%20Seu%20Produto%201%20Aqui" target="_blank" class="buy-button">Comprar via WhatsApp</a>
            </div>
          </div>

          
          <div class="swiper-slide">
            <div class="product-image-wrapper">
                
               <img src="https://i.pinimg.com/736x/eb/d4/6e/ebd46e654edc03e311f3d60f7de94a54.jpg" alt="Nome Produto 2">
            </div>
             <div class="product-info">
                 
                <div class="product-title">Nome Incrível do Produto 2</div>
                 
                <div class="product-description">Descrição curta para o produto 2.</div>
                 
                <div class="product-price">R$ 89,00</div>
                 
                 <a href="https://wa.me/5511978713748?text=Ol%C3%A1!%20Tenho%20interesse%20no%20Nome%20Incr%C3%ADvel%20do%20Produto%202" target="_blank" class="buy-button">Comprar via WhatsApp</a>
            </div>
          </div>

           
          <div class="swiper-slide">
             <div class="product-image-wrapper">
                 
               <img src="https://i.pinimg.com/736x/eb/d4/6e/ebd46e654edc03e311f3d60f7de94a54.jpg" alt="Nome Produto 3">
            </div>
             <div class="product-info">
                 
                <div class="product-title">Produto 3 Edição Especial</div>
                 
                <div class="product-description">Mais detalhes sobre este produto especial.</div>
                
                <div class="product-price">R$ 125,50</div>
                 
                 <a href="https://wa.me/5511978713748?text=Ol%C3%A1!%20Tenho%20interesse%20no%20Produto%203%20Edi%C3%A7%C3%A3o%20Especial" target="_blank" class="buy-button">Comprar via WhatsApp</a>
            </div>
          </div>

          

        </div>

         
        <div class="swiper-pagination"></div>

      </div>
  </div>

  
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>



<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>


<script>
  const swiper = new Swiper('.product-swiper', { // Inicializa no container do swiper
    slidesPerView: 1,
    spaceBetween: 15,
    loop: true,
    autoHeight: true, // Mantém ajuste automático de altura

    // Aponta para os botões que estão FORA do '.product-swiper' mas DENTRO do '.produto-carousel-container'
    navigation: {
      nextEl: '.produto-carousel-container .swiper-button-next', // Seletor mais específico
      prevEl: '.produto-carousel-container .swiper-button-prev', // Seletor mais específico
    },
    pagination: {
      el: '.swiper-pagination', // Paginação permanece dentro do swiper
      clickable: true,
    },
    watchOverflow: true,
    observer: true,
    observeParents: true,
  });
</script>

MNOD CADEADOS

MNOD CADEADOS. Negócio focado na Importação e VENDA de CADEADOS. Vendemos CADEADOS para todos os segmentos, com uma grande variedade de modelos. O site deve ser uma vitrine dos nossos CADEADOS e um canal para GERAÇÃO DE VENDAS.