Countdown Timer

{%- comment -%}
  modblo. Countdown Timer Block
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
  Set the deadline ISO string in the data-deadline attribute.
  Auto-hides when the deadline passes (or shows your "ended" message).
{%- endcomment -%}

<style>
  .modblo-cd { background:#0b0b0c; color:#fff; padding:clamp(32px,5vw,56px) 0; }   /* EDIT colors */
  .modblo-cd__inner { max-width:720px; margin:0 auto; padding:0 24px; text-align:center; }
  .modblo-cd__eyebrow {
    text-transform:uppercase; letter-spacing:.18em; font-size:11px;
    font-weight:700; opacity:.6; margin:0 0 10px;
  }
  .modblo-cd__h { font-size:clamp(20px,2.5vw,28px); letter-spacing:-.02em; margin:0 0 24px; }

  .modblo-cd__grid { display:flex; gap:14px; justify-content:center; }
  .modblo-cd__cell {
    background:rgba(255,255,255,.06);                                         /* EDIT cell bg */
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    padding:16px 22px; min-width:78px;
  }
  .modblo-cd__num {
    display:block; font-size:clamp(28px,4vw,40px); font-weight:700;
    letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums;
    color:#a78bfa;                                                            /* EDIT number color */
  }
  .modblo-cd__lbl {
    display:block; font-size:10px; text-transform:uppercase;
    letter-spacing:.14em; font-weight:600; opacity:.55; margin-top:8px;
  }

  .modblo-cd__ended { display:none; font-size:14px; opacity:.7; }
  .modblo-cd.is-ended .modblo-cd__grid { display:none; }
  .modblo-cd.is-ended .modblo-cd__ended { display:block; }

  @media (max-width: 540px) {
    .modblo-cd__grid { gap:8px; }
    .modblo-cd__cell { padding:14px 14px; min-width:64px; }
  }
</style>

<section class="modblo-cd" data-modblo-cd data-deadline="2026-12-25T00:00:00">  {%- comment -%} EDIT deadline (ISO) {%- endcomment -%}
  <div class="modblo-cd__inner">
    <p class="modblo-cd__eyebrow">Limited time</p>                              {%- comment -%} EDIT eyebrow {%- endcomment -%}
    <h2 class="modblo-cd__h">Holiday sale ends in</h2>                          {%- comment -%} EDIT heading {%- endcomment -%}

    <div class="modblo-cd__grid">
      <div class="modblo-cd__cell"><span class="modblo-cd__num" data-modblo-cd-d>00</span><span class="modblo-cd__lbl">Days</span></div>
      <div class="modblo-cd__cell"><span class="modblo-cd__num" data-modblo-cd-h>00</span><span class="modblo-cd__lbl">Hours</span></div>
      <div class="modblo-cd__cell"><span class="modblo-cd__num" data-modblo-cd-m>00</span><span class="modblo-cd__lbl">Minutes</span></div>
      <div class="modblo-cd__cell"><span class="modblo-cd__num" data-modblo-cd-s>00</span><span class="modblo-cd__lbl">Seconds</span></div>
    </div>

    <p class="modblo-cd__ended">Sale has ended. Thanks to everyone who shopped.</p>   {%- comment -%} EDIT ended message {%- endcomment -%}
  </div>
</section>

<script>
  (function () {
    document.querySelectorAll('[data-modblo-cd]').forEach(function (root) {
      var deadline = new Date(root.dataset.deadline).getTime();
      if (isNaN(deadline)) return;

      var dEl = root.querySelector('[data-modblo-cd-d]');
      var hEl = root.querySelector('[data-modblo-cd-h]');
      var mEl = root.querySelector('[data-modblo-cd-m]');
      var sEl = root.querySelector('[data-modblo-cd-s]');

      function pad(n) { return String(n).padStart(2, '0'); }

      function tick() {
        var diff = deadline - Date.now();
        if (diff <= 0) {
          root.classList.add('is-ended');
          clearInterval(timer);
          return;
        }
        var d = Math.floor(diff / 86400000);
        var h = Math.floor((diff % 86400000) / 3600000);
        var m = Math.floor((diff % 3600000) / 60000);
        var s = Math.floor((diff % 60000) / 1000);
        dEl.textContent = pad(d);
        hEl.textContent = pad(h);
        mEl.textContent = pad(m);
        sEl.textContent = pad(s);
      }

      tick();
      var timer = setInterval(tick, 1000);
    });
  })();
</script>