/** Shopify CDN: Minification failed

Line 8:19 Unexpected "-->"
Line 69:0 Unexpected "<"
Line 85:70 Comments in CSS use "/* ... */" instead of "//"

**/
<!-- countdown.css -->
<style>
#countdown-wrapper {
  background-color: #dadce0;
  color: #1e1e1e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  padding: 10px;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#countdown-header {
  padding: 1px;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}

#countdown-header2 {
  padding: 1px;
  font-size: 12px;
  text-align: center;
}

#countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 10px;
  text-align: center;
}

#countdown > div {
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}

#countdown > div > span {
  font-size: 25px;
  font-weight: bold;
  background-image: radial-gradient(circle at 50% -20.71%, #a3a7ff 0, #7a8ffc 25%, #3c78f2 50%, #0063e8 75%, #0051de 100%);
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 5px #0051de; }
  50% { transform: scale(1.05); box-shadow: 0 0 15px #7a8ffc; }
  100% { transform: scale(1); box-shadow: 0 0 5px #0051de; }
}
</style>

<!-- HTML Countdown -->
<div id="countdown-wrapper">
  <div id="countdown-header">¡Oferta por tiempo limitado!</div>
  <div id="countdown-header2">No pierdas esta oportunidad única</div>
  <div id="countdown">
    <div><span id="days">00</span>Días</div>
    <div><span id="hours">00</span>Horas</div>
    <div><span id="minutes">00</span>Min</div>
    <div><span id="seconds">00</span>Seg</div>
  </div>
</div>

<!-- JS Countdown -->
<script>
  const countdownDate = new Date().getTime() + (24 * 60 * 60 * 1000); // 24 horas desde ahora

  const countdown = setInterval(function () {
    const now = new Date().getTime();
    const distance = countdownDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("days").innerHTML = String(days).padStart(2, '0');
    document.getElementById("hours").innerHTML = String(hours).padStart(2, '0');
    document.getElementById("minutes").innerHTML = String(minutes).padStart(2, '0');
    document.getElementById("seconds").innerHTML = String(seconds).padStart(2, '0');

    if (distance < 0) {
      clearInterval(countdown);
      document.getElementById("countdown-wrapper").innerHTML = "<div id='countdown-header'>¡La oferta ha terminado!</div>";
    }
  }, 1000);
</script>