/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 19:26 Expected identifier but found whitespace
Line 20:47 Unexpected "("
Line 25:1 Expected identifier but found "%"
Line 29:0 Unexpected "<"
Line 33:8 Unexpected "{"
Line 33:17 Expected ":"
Line 33:24 Unexpected "{"
Line 73:8 Unexpected "{"
... and 57 more hidden warnings

**/
{% comment %}
  Pack Price Tiles
  ------------------------------------------------------------
  Variant metafields used:
    custom.supply        → Single line text  (e.g. "30-Day Supply")
    custom.badge         → Single line text  (e.g. "Best Seller", "Best Value")
    custom.tablet_count  → Integer           (e.g. 30)

  Badge colour: text containing "value" → yellow, anything else → burgundy.
{% endcomment %}



<style>
  /* ============================================================
     1. Tokens
     ============================================================ */
  #ppt-{{ section.id }} {
    /* Colours */
    --c-ink:        #0B0842;
    --c-red:        #EA3E3E;
    --c-blue:       #4F46E5;
    --c-grey:       #9CA3AF;
    --c-line:       #E7E7EC;
    --c-soft:       #F5F5F5;
    --c-active:     #EFEFFC;
    --c-burg-dark:  #4E0A18;
    --c-burg:       #B3124B;
    --c-yellow:     #FFC20E;
    --c-white:      #FFFFFF;

    /* Fonts */
    --f-body:    "Founders Grotesk", sans-serif;
    --f-display: "ABC Diatype Expanded Unlicensed Trial", sans-serif;

    /* Sizes – mobile */
    --fs-title:  15px;
    --fs-name:   14px;
    --fs-supply: 12px;
    --fs-price:  18px;
    --fs-save:   14px;
    --fs-per:    13px;
    --fs-badge:  10px;

    /* Spacing – mobile */
    --gap-grid:  8px;
    --pad-body:  30px 4px 26px;
    --pad-per:   14px 4px;
    --pad-badge: 4px 10px;
    --radius:    12px;

    margin: 16px 0;
  }

  /* ============================================================
     2. Layout
     ============================================================ */
  #ppt-{{ section.id }} .ppt__title {
    margin:0px;
    color: var(--c-ink);
    font-family: var(--f-body);
    font-size: var(--fs-title);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  #ppt-{{ section.id }} .ppt__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-grid);
    align-items: stretch;
    padding-top: 16px; /* room for badges */
  }

  /* ============================================================
     3. Card
     ============================================================ */
  #ppt-{{ section.id }} .ppt__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    color: var(--c-ink);
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .2s, border-color .2s, box-shadow .2s;
  }

  #ppt-{{ section.id }} .ppt__card:hover {
    box-shadow: 0 6px 18px rgba(11, 8, 66, .08);
  }

  #ppt-{{ section.id }} .ppt__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--pad-body);
  }

  /* ============================================================
     4. Typography
     ============================================================ */
  #ppt-{{ section.id }} .ppt__name,
  #ppt-{{ section.id }} .ppt__supply,
  #ppt-{{ section.id }} .ppt__off,
  #ppt-{{ section.id }} .ppt__mrp,
  #ppt-{{ section.id }} .ppt__per {
    font-family: var(--f-body);
    font-style: normal;
    line-height: normal;
  }

  #ppt-{{ section.id }} .ppt__name {
    color: var(--c-ink);
    font-size: var(--fs-name);
    font-weight: 500;
  }

  #ppt-{{ section.id }} .ppt__supply {
    margin-top: 8px;
    color: var(--c-ink);
    font-size: var(--fs-supply);
    font-weight: 400;
  }

  #ppt-{{ section.id }} .ppt__price {
    margin-top: 12px;
    color: var(--c-red);
    font-family: var(--f-display);
    font-size: var(--fs-price);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  #ppt-{{ section.id }} .ppt__save {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 2px 6px;
    margin-top: 8px;
  }

  #ppt-{{ section.id }} .ppt__off {
    color: var(--c-blue);
    font-size: var(--fs-save);
    font-weight: 400;
  }

  #ppt-{{ section.id }} .ppt__mrp {
    color: var(--c-grey);
    font-size: var(--fs-save);
    font-weight: 400;
    text-decoration-line: line-through;
  }

  #ppt-{{ section.id }} .ppt__per {
    display: block;
    padding: var(--pad-per);
    background: var(--c-soft);
    border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
    color: var(--c-ink);
    font-size: var(--fs-per);
    font-weight: 500;
  }

  /* ============================================================
     5. Badge
     ============================================================ */
  #ppt-{{ section.id }} .ppt__badge {
    position: absolute;
    bottom: 95%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--pad-badge);
    border-radius:4px;
    font-family: var(--f-body);
    font-size: var(--fs-badge);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #ppt-{{ section.id }} .ppt__badge--burg   { background: var(--c-burg);   color: var(--c-white); }
  #ppt-{{ section.id }} .ppt__badge--yellow { background: var(--c-yellow); color: var(--c-ink); }

  /* ============================================================
     6. States
     ============================================================ */
  #ppt-{{ section.id }} .ppt__card.is-active {
    background: var(--c-active);
    border-color: var(--c-ink);
  }

  #ppt-{{ section.id }} .ppt__card.is-active .ppt__per {
    background: linear-gradient(90deg, var(--c-burg-dark), var(--c-burg));
    color: var(--c-white);
  }

  #ppt-{{ section.id }} .ppt__card.is-soldout {
    opacity: .5;
    cursor: not-allowed;
  }

  /* ============================================================
     7. Desktop – only token overrides
     ============================================================ */
  @media screen and (min-width: 750px) {
    #ppt-{{ section.id }} {
      --fs-title:  18px;
      --fs-name:   20px;
      --fs-supply: 16px;
      --fs-price:  28px;
      --fs-save:   18px;
      --fs-per:    18px;
      --fs-badge:  14px;

      --gap-grid:  16px;
      --pad-body:  44px 10px 40px;
      --pad-per:   22px 8px;
      --pad-badge: 6px 18px;
    }

    #ppt-{{ section.id }} .ppt__title  { margin-bottom: 28px; }
    #ppt-{{ section.id }} .ppt__supply { margin-top: 12px; }
    #ppt-{{ section.id }} .ppt__price  { margin-top: 16px; }
    #ppt-{{ section.id }} .ppt__save   { margin-top: 14px; gap: 4px 10px; }
  }

  /* ============================================================
     8. Optional – hide theme's default picker (keeps working)
     ============================================================ */
  /*
  variant-selects, variant-radios, variant-picker {
    position: absolute !important; height: 0; overflow: hidden;
    opacity: 0; pointer-events: none;
  }
  */
</style>

<script>
  (function () {
    'use strict';

    var root = document.getElementById('ppt-{{ section.id }}');
    if (!root) return;

    var OPTION_NAMES = {{ product.options | json }};
    var cards = root.querySelectorAll('.ppt__card');

    /* --- UI ------------------------------------------------ */
    function setActive(variantId) {
      cards.forEach(function (card) {
        var isActive = card.dataset.variantId == variantId;
        card.classList.toggle('is-active', isActive);
        card.setAttribute('aria-pressed', isActive);
      });
    }

    /* --- Sync with theme's native picker ------------------- */
    function selectRadio(name, value) {
      var radios = document.querySelectorAll('input[type="radio"]');
      for (var i = 0; i < radios.length; i++) {
        var r = radios[i];
        if (r.closest('.ppt')) continue;
        if (r.value === value && (r.name || '').indexOf(name) !== -1) {
          if (!r.checked) r.click();
          return true;
        }
      }
      return false;
    }

    function selectDropdown(name, value) {
      var selects = document.querySelectorAll('select');
      for (var i = 0; i < selects.length; i++) {
        var s = selects[i];
        if ((s.name || '').indexOf(name) !== -1) {
          s.value = value;
          s.dispatchEvent(new Event('change', { bubbles: true }));
          return true;
        }
      }
      return false;
    }

    function selectOption(name, value) {
      return selectRadio(name, value) || selectDropdown(name, value);
    }

    /* Fallback when no native picker is found */
    function setVariantDirectly(variantId) {
      document
        .querySelectorAll('form[action*="/cart/add"] [name="id"]')
        .forEach(function (input) { input.value = variantId; });

      var url = new URL(window.location.href);
      url.searchParams.set('variant', variantId);
      history.replaceState({}, '', url);
    }

    /* --- Events -------------------------------------------- */
    function onCardClick(card) {
      if (card.disabled) return;

      var options = JSON.parse(card.dataset.options);
      var synced = options.every(function (value, i) {
        return selectOption(OPTION_NAMES[i], value);
      });

      if (!synced) setVariantDirectly(card.dataset.variantId);
      setActive(card.dataset.variantId);
    }

    function onNativeChange(e) {
      if (root.contains(e.target)) return;
      setTimeout(function () {
        var idInput = document.querySelector('form[action*="/cart/add"] [name="id"]');
        if (idInput && idInput.value) setActive(idInput.value);
      }, 400);
    }

    /* --- Init ---------------------------------------------- */
    cards.forEach(function (card) {
      card.addEventListener('click', function () { onCardClick(card); });
    });
    document.addEventListener('change', onNativeChange);
  })();
</script>