.elementor-222 .elementor-element.elementor-element-6f498609{--display:flex;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.products-heading-show .related-products > h2, .elementor-widget-woocommerce-products.products-heading-show .upsells > h2, .elementor-widget-woocommerce-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product{text-align:center;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products  ul.products{grid-column-gap:0px;grid-row-gap:40px;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#000000;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#000000;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:"Inter", Sans-serif;font-size:14px;font-weight:normal;text-transform:uppercase;font-style:normal;line-height:1px;letter-spacing:4.7px;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .star-rating{color:#02010100;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .star-rating::before{color:#02010100;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .price{color:#000000;font-family:"Rubik", Sans-serif;font-size:15px;font-weight:300;letter-spacing:0.9px;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .price ins{color:#000000;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .price ins .amount{color:#000000;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .price del{color:#000000;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .price del .amount{color:#000000;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product .button{color:#02010100;}.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products ul.products li.product span.onsale{display:block;}body.elementor-page-222:not(.elementor-motion-effects-element-type-background), body.elementor-page-222 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(min-width:768px){.elementor-222 .elementor-element.elementor-element-6f498609{--content-width:1134px;}}@media(max-width:1024px){.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-222 .elementor-element.elementor-element-2ce1af44.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for woocommerce-products, class: .elementor-element-2ce1af44 */<script>
document.addEventListener("DOMContentLoaded", function () {
  const variationMap = {
    352: { P: 353, M: 354, G: 355, GG: 356 },
    345: { P: 346, M: 347 },
    339: { P: 340, M: 341 },
    333: { P: 334, M: 335, G: 336, GG: 337 },
    325: { P: 326, M: 327, G: 328, GG: 329 },
  };

  const produtos = document.querySelectorAll(".woocommerce ul.products li.product");

  produtos.forEach((produto, index) => {
    const idProduto =
      produto.getAttribute("data-product-id") ||
      produto.getAttribute("data-product_id") ||
      produto.dataset.productId ||
      produto.dataset.product_id ||
      produto.id?.replace(/\D/g, "");

    if (!idProduto || !variationMap[idProduto]) return;

    const map = variationMap[idProduto];
    const id = "tamanhos-" + index;

    let tamanhosHTML = "";
    if (map.P) tamanhosHTML += `<span data-variation="${map.P}">P</span>`;
    if (map.M) tamanhosHTML += `<span data-variation="${map.M}">M</span>`;
    if (map.G) tamanhosHTML += `<span data-variation="${map.G}">G</span>`;
    if (map.GG) tamanhosHTML += `<span data-variation="${map.GG}">GG</span>`;

    const bloco = document.createElement("div");
    bloco.className = "produto-bygaz";
    bloco.innerHTML = `
      <div class="toggle-btn" data-target="${id}">+</div>
      <div class="tamanhos" id="${id}">
        ${tamanhosHTML}
      </div>
    `;

    produto.appendChild(bloco);
  });

  document.body.addEventListener("click", function (e) {
    const t = e.target.closest(".toggle-btn");
    if (t) {
      const targetId = t.getAttribute("data-target");
      const tamanhos = document.getElementById(targetId);
      if (!tamanhos) return;

      const ativo = tamanhos.classList.contains("ativo");
      document.querySelectorAll(".tamanhos.ativo").forEach(el => el.classList.remove("ativo"));
      document.querySelectorAll(".toggle-btn").forEach(btn => (btn.textContent = "+"));

      if (!ativo) {
        tamanhos.classList.add("ativo");
        t.textContent = "-";
      }
      return;
    }

    const span = e.target.closest(".produto-bygaz .tamanhos span");
    if (span) {
      const variationId = span.getAttribute("data-variation");
      if (!variationId) return;
      adicionarAoCarrinho(variationId);
    }
  });
});

function adicionarAoCarrinho(variationId) {
  window.location.href = `https://bybygaz.com.br/?page_id=8&add-to-cart=${variationId}`;
}
</script>

<style>
.produto-bygaz {
  margin-top: 10px;
  text-align: center;
}

.produto-bygaz .toggle-btn {
  cursor: pointer;
  background: transparent;
  color: #000;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  border: none;
  display: inline-block;
  margin-bottom: 5px;
  transition: color 0.3s;
}

.produto-bygaz .toggle-btn:hover {
  color: #333;
}

.produto-bygaz .tamanhos {
  display: flex;
  justify-content: center;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: all 0.4s ease;
}

.produto-bygaz .tamanhos.ativo {
  max-height: 50px;
  opacity: 1;
  margin-top: 5px;
}

.produto-bygaz .tamanhos span {
  margin: 0 8px;
  cursor: pointer;
  padding: 5px 8px;
  font-weight: bold;
  background: transparent;
  color: #000;
  transition: color 0.3s;
}

.produto-bygaz .tamanhos span:hover {
  color: #333;
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-11dac83e */<script>
document.addEventListener("DOMContentLoaded", function () {
  const produtos = document.querySelectorAll(".woocommerce ul.products li.product");

  produtos.forEach((produto, index) => {
    const id = "tamanhos-" + index;

    const bloco = document.createElement("div");
    bloco.className = "produto-bygaz";
    bloco.innerHTML = `
      <div class="toggle-btn" onclick="toggleTamanhos('${id}', this)">+</div>
      <div class="tamanhos" id="${id}" style="display: none;">
        <span onclick="adicionarAoCarrinho(23)">P</span>
        <span onclick="adicionarAoCarrinho(24)">M</span>
        <span onclick="adicionarAoCarrinho(25)">G</span>
        <span onclick="adicionarAoCarrinho(26)">GG</span>
      </div>
    `;

    produto.appendChild(bloco);
  });
});

function toggleTamanhos(id, el) {
  const tamanhos = document.getElementById(id);
  const isVisible = tamanhos.style.display === 'flex';
  tamanhos.style.display = isVisible ? 'none' : 'flex';
  tamanhos.style.justifyContent = 'center';

  // troca símbolo de + para -
  el.textContent = isVisible ? '+' : '-';
}

function adicionarAoCarrinho(variationId) {
  window.location.href = `https://bybygaz.com.br/?page_id=8&add-to-cart=${variationId}`;
}
</script>

<style>
.produto-bygaz {
  margin-top: 10px;
  text-align: center; /* centraliza tudo dentro do bloco */
}

.produto-bygaz .toggle-btn {
  cursor: pointer;
  background: transparent; /* fundo transparente */
  color: white; /* cor do + */
  font-size: 24px;
  line-height: 1;
  padding: 0;
  border: none;
  display: inline-block;
  transition: 0.3s;
}

.produto-bygaz .tamanhos {
  display: flex;
  justify-content: center; /* centraliza os tamanhos */
  gap: 15px; /* espaço entre tamanhos */
  margin-top: 5px;
}

.produto-bygaz .tamanhos span {
  cursor: pointer;
  font-weight: bold; /* deixa em negrito */
  color: white;
  font-size: 16px;
  border: none; /* sem borda */
  padding: 0; /* sem caixa */
  transition: 0.3s;
}

.produto-bygaz .tamanhos span:hover {
  color: #aaa; /* muda cor no hover (pode trocar) */
}
</style>/* End custom CSS */
/* Start custom CSS *//* Container */
.produto-bygaz {
  margin-top: 10px;
  text-align: center;
}

/* Botão "+" estilo válvula */
.produto-bygaz .toggle-btn {
  cursor: pointer;
  background: none; /* remove o retângulo preto */
  border: none;
  font-size: 28px;
  font-weight: bold;
  color: #000;
  display: inline-block;
  transition: transform 0.4s ease, color 0.3s;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

.produto-bygaz .toggle-btn:hover {
  color: #333;
}

.produto-bygaz .toggle-btn.ativo {
  transform: rotate(135deg); /* gira como válvula */
  color: #000;
}

/* Tamanhos ocultos inicialmente */
.produto-bygaz .tamanhos {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* Quando ativo */
.produto-bygaz .tamanhos.ativo {
  opacity: 1;
  max-height: 50px;
  margin-top: 8px;
}

/* Botões de tamanho */
.produto-bygaz .tamanhos span {
  cursor: pointer;
  font-weight: bold;
  color: #000;
  background: transparent;
  border: none;
  transition: color 0.3s;
}

.produto-bygaz .tamanhos span:hover {
  color: #333;
}

/* Remove o link invisível padrão do WooCommerce na listagem */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}/* End custom CSS */