/** Shopify CDN: Minification failed

Line 12:0 Unexpected "<"
Line 77:0 Unexpected "<"
Line 79:1 Expected identifier but found "%"
Line 80:0 Unexpected "{"
Line 81:2 Expected identifier but found "\"name\""
Line 91:0 Unexpected "{"
Line 91:1 Expected identifier but found "%"

**/
<section class="hotspot-banner-wrapper">
  <div class="hotspot-banner">
    <img src="/cdn/shop/files/30b53ded409081ea46e56a10788f4b4c.jpg?v=1746135942" alt="Ambiente com produtos">

    <!-- Botão flutuante 1 -->
    <a href="/products/cadeira-rubi" class="hotspot" style="top: 68%; left: 17%;" title="Ver cadeira">
      <span>+</span>
    </a>

    <!-- Botão flutuante 2 -->
    <a href="/products/mesa-branca" class="hotspot" style="top: 50%; left: 53%;" title="Ver mesa">
      <span>+</span>
    </a>
  </div>
</section>

<style>
.hotspot-banner-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}
.hotspot-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hotspot-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
  max-height: 600px;
}
.hotspot {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid black;
  color: black;
  text-align: center;
  line-height: 26px;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  animation: pulse 2s infinite;
  z-index: 2;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.3); }
  70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@media (max-width: 749px) {
  .hotspot-banner img {
    max-height: 400px;
  }
}
</style>

{% schema %}
{
  "name": "Banner com Botões",
  "tag": "section",
  "class": "hotspot-banner-wrapper",
  "settings": [],
  "presets": [
    {
      "name": "Banner com Botões"
    }
  ]
}
{% endschema %}