/** Shopify CDN: Minification failed

Line 430:0 Unexpected "("
Line 442:4 Comments in CSS use "/* ... */" instead of "//"
Line 445:4 Comments in CSS use "/* ... */" instead of "//"
Line 476:4 Comments in CSS use "/* ... */" instead of "//"
Line 481:4 Comments in CSS use "/* ... */" instead of "//"
Line 484:53 Comments in CSS use "/* ... */" instead of "//"
Line 492:8 Comments in CSS use "/* ... */" instead of "//"
Line 493:8 Comments in CSS use "/* ... */" instead of "//"
Line 494:8 Comments in CSS use "/* ... */" instead of "//"
Line 498:10 Comments in CSS use "/* ... */" instead of "//"
... and 6 more hidden warnings

**/
/* === Swatch & option buttons (theme-wide) === */
.option-buttons{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}

/* Base option buttons (non-swatch) */
.option-btn,.option-swatch{
  display:inline-flex;align-items:center;justify-content:center;
  margin:6px 8px 0 0;border:1.5px solid #cfcfcf;background:#fff;
  padding:.55rem .9rem;border-radius:4px;cursor:pointer;font-weight:700;
  min-width:98px
}
.option-btn.is-active,.option-swatch.is-active{box-shadow:0 0 0 2px #111 inset}

/* --- FIX: true circular, fully-filled color swatches (wrapper OR dot OR <img>) --- */
.option-btn.is-swatch,
.option-swatch{
  min-width:0 !important;
  width:40px !important;
  height:40px !important;
  padding:0 !important;
  border-radius:50% !important;
  /* IMPORTANT: allow wrapper background to show if theme sets it */
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  flex:0 0 40px !important;
  overflow:hidden;
  box-sizing:border-box;
  margin:0 !important;
}

.option-btn.is-swatch .swatch-dot,
.option-swatch .swatch-dot{
  display:block !important;
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

.option-btn.is-swatch img,
.option-swatch img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
}

/* Selection ring on the OUTER circle */
.option-btn.is-swatch.is-selected,
.option-swatch.is-selected{ box-shadow:0 0 0 4px #111 !important; }

/* Don’t stack inner rings/dark insets on swatches */
.option-btn.is-swatch.is-selected .swatch-dot,
.option-swatch.is-selected .swatch-dot{ box-shadow:none !important; }
.option-btn.is-swatch.is-active,
.option-swatch.is-active{ box-shadow:none !important; }

/* Keyboard focus */
.option-btn.is-swatch:focus-visible,
.option-swatch:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* Screen-reader utility */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* === v2: product page tweaks for .po-color-row structure === */
.po-color-row{display:flex;flex-wrap:wrap}
.po-color-row .po-left,.po-color-row .po-left *{white-space:nowrap}
.po-color-row .po-left{flex-basis:100%;width:100%;display:block}

/* === v3: override template's one-line color row (.opt-row--color) === */
.opt-row--color{flex-wrap:wrap !important}
.opt-row--color .or-left{
  display:block !important;width:100% !important;min-width:0;
  white-space:nowrap !important; /* keep "COLOR: <name>" together */
}
.opt-row--color .or-left *{white-space:nowrap !important}
.opt-row--color .or-right{
  display:block !important;width:100% !important;margin-left:0 !important;text-align:left !important;
}

/* === Color swatch container rules (works across sections) === */
:root{ --swatch-gap: 12px; } /* adjust to taste */
.option-buttons[data-option-name="color"],
.option-buttons[data-option-name="Color"],
.option-buttons[data-select-name="color"],
.option-buttons[data-select-name="Color"],
.or-right > .option-buttons,
.po-right > .option-buttons{
  display:flex !important; width:100% !important; text-align:left !important;
  flex-wrap:wrap !important; gap:var(--swatch-gap) var(--swatch-gap) !important;
  margin-top:0 !important; /* remove extra line space under COLOR label */
}

/* Selected color name not bold (covers both label variants) */
.js-color-name{font-weight:400}
.option-label .js-color-name,.po-left .js-color-name{font-weight:400 !important}

/* === v4/v5: spacing polish & unification === */
/* Remove the red-X spaces under SIZE and COLOR */
.opt-hdr{
  display:flex !important; align-items:baseline !important; justify-content:space-between !important;
  flex-wrap:nowrap !important; gap:.5rem;
  margin:0 !important; padding:0 !important;      /* no extra space around header */
}
.opt-hdr a{ margin-left:auto !important; white-space:nowrap !important; } /* keep Size Guide same line */
.opt-hdr + .opt-row{ margin-top:0 !important; }   /* buttons snug under SIZE */

/* COLOR label on first line; zero gap before swatches */
.opt-row:not(.opt-row--color) + .opt-row--color{ margin-top:0 !important; }
.opt-row--color .or-right{ margin-top:0 !important; }
.opt-row--color{ margin-bottom:.75rem !important; } /* small space before divider/QTY; set to 0 if desired */

/* Support BOTH structures and keep them wrapping consistently */
.po-row.po-color-row{ flex-wrap:wrap !important }
.po-row.po-color-row .po-left{
  display:block !important;width:100% !important;min-width:0;white-space:nowrap !important;
}
.po-row.po-color-row .po-right{
  display:block !important;width:100% !important;margin-left:0 !important;text-align:left !important;margin-top:0 !important;
}

/* Fallback if flex gap isn’t supported (rare) */
@supports not (gap: 1rem) {
  .option-buttons[data-option-name*="color" i] .option-swatch + .option-swatch,
  .option-buttons[data-select-name*="color" i] .option-swatch + .option-swatch,
  .option-buttons[data-option-name*="color" i] .option-btn.is-swatch + .option-btn.is-swatch,
  .option-buttons[data-select-name*="color" i] .option-btn.is-swatch + .option-btn.is-swatch{
    margin-left:var(--swatch-gap) !important;
  }
}

/* Bring SIZE buttons a little closer to the header */
.opt-hdr + .opt-row .option-buttons{ margin-top:0 !important; }            /* kill container top margin */
.opt-hdr + .opt-row .option-btn,
.opt-hdr + .opt-row .option-swatch{ margin-top:2px !important; }           /* was 6px; set to 0 for no gap */

/* Fill the entire swatch circle for BOTH background- and image-based swatches */

/* Ensure the dot spans the full circle (already true for most, kept here for safety) */
.option-btn.is-swatch .swatch-dot,
.option-swatch .swatch-dot{
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  display:block !important;
}

/* If a swatch uses an <img>, make it fill the circle too */
.option-btn.is-swatch img,
.option-swatch img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
  display:block !important;
}

/* Optional: give very-light/white swatches a subtle outline when not selected */
.option-swatch:not(.is-selected) .swatch-dot[style*="#fff" i],
.option-swatch:not(.is-selected) .swatch-dot[style*="white" i]{
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset !important;
}

/* === Force swatch color to fill the circle edge-to-edge === */
.option-btn.is-swatch,
.option-swatch{
  position: relative !important;
  border: 0 !important;                 /* remove the grey ring */
  /* keep padding:0 from earlier block */
}

/* Make the color "dot" physically fill the circle */
.option-btn.is-swatch .swatch-dot,
.option-swatch .swatch-dot{
  position: absolute !important;
  inset: 0 !important;                  /* top/right/bottom/left: 0 */
  width: auto !important;               /* override 100% + border-box quirks */
  height: auto !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* If a swatch uses an <img>, make that fill the circle too */
.option-btn.is-swatch img,
.option-swatch img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* === Force swatch color to fill the circle edge-to-edge === */
.option-btn.is-swatch,
.option-swatch{
  position: relative !important;
  border: 0 !important;                 /* remove the grey ring */
  /* keep padding:0 from earlier block */
}

/* Make the color "dot" physically fill the circle */
.option-btn.is-swatch .swatch-dot,
.option-swatch .swatch-dot{
  position: absolute !important;
  inset: 0 !important;                  /* top/right/bottom/left: 0 */
  width: auto !important;               /* override 100% + border-box quirks */
  height: auto !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* If a swatch uses an <img>, make that fill the circle too */
.option-btn.is-swatch img,
.option-swatch img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Keep your selection ring and keyboard focus visible on the wrapper */
.option-btn.is-swatch.is-selected,
.option-swatch.is-selected{ box-shadow: 0 0 0 4px #111 !important; }

.option-btn.is-swatch:focus-visible,
.option-swatch:focus-visible{ outline: 2px solid #111; outline-offset: 2px; }

/* === Hard hide of the title line in ALL size-chart popups === */
/* 1) Common modal containers whose id/class includes "size" */
[id*="size" i] .modal__header,
[class*="size" i] .modal__header,
[id*="size" i] .modal__title,
[class*="size" i] .modal__title,
[id*="size" i] .product-popup-modal__heading,
[class*="size" i] .product-popup-modal__heading{
  display:none !important;
}

/* 2) Fallback: first H1/H2/H3 at the top of any dialog whose id/class hints "size" */
[id*="size" i][role="dialog"] :is(h1,h2,h3):first-child,
[class*="size" i][role="dialog"] :is(h1,h2,h3):first-child,
[id*="size" i] .modal__content > :is(h1,h2,h3):first-child,
[class*="size" i] .modal__content > :is(h1,h2,h3):first-child,
[id*="size" i] .fancybox__content > :is(h1,h2,h3):first-child,
[class*="size" i] .fancybox__content > :is(h1,h2,h3):first-child{
  display:none !important;
}

/* 3) Extra coverage for popular stacks (Fancybox/Magnific/Theme modals) */
.fancybox__content[id*="size" i] :is(h1,h2,h3):first-child,
.mfp-content[id*="size" i] :is(h1,h2,h3):first-child{
  display:none !important;
}

/* 4) Remove the blank space where the title was */
[id*="size" i] .modal__content,
[class*="size" i] .modal__content,
[id*="size" i] .fancybox__content,
[class*="size" i] .fancybox__content{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* PRODUCT PAGES: hide the first heading in ANY popup/modal (size guide included) */
body[class*="product"] :is([role="dialog"], .modal, .mfp-content, .fancybox__content,
                           [class*="modal" i], [id*="modal" i], [class*="popup" i], [id*="popup" i])
  :is(h1,h2,h3):first-of-type{
  display: none !important;
}

/* Also hide common title elements if they exist */
body[class*="product"] :is([role="dialog"], .modal, .mfp-content, .fancybox__content,
                           [class*="modal" i], [id*="modal" i])
  :is(.modal__title, .product-popup-modal__heading){
  display: none !important;
}

/* Remove the empty space at the top of the modal content */
body[class*="product"] :is(.modal__content, .fancybox__content, .mfp-content){
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Thinner selected ring (half the width): 2px instead of 4px */
.option-btn.is-swatch.is-selected,
.option-swatch.is-selected{
  box-shadow: 0 0 0 2px #111 !important;
}
/* === Tighten vertical space between COLOR text and swatches === */

/* Core template variant (.opt-row--color) */
.opt-row--color{ row-gap:0 !important; }
.opt-row--color .or-left{ margin-bottom:0 !important; }
.opt-row--color .or-left :is(.option-label,label,strong,span){
  margin:0 !important; padding:0 !important; line-height:1.1 !important;
}
.opt-row--color .or-right{ margin-top:0 !important; }
.option-buttons[data-option-name*="color" i],
.option-buttons[data-select-name*="color" i]{ margin-top:0 !important; }

/* EComposer/PO variant (.po-color-row) */
.po-row.po-color-row{ row-gap:0 !important; }
.po-row.po-color-row .po-left{ margin-bottom:0 !important; }
.po-row.po-color-row .po-right{ margin-top:0 !important; }

/* Kill stray breaks some themes inject between label and swatches */
.opt-row--color br,
.po-row.po-color-row br{ display:none !important; }

/* Optional: if you still see a hairline gap, nudge swatches up 2px */
/* .opt-row--color .or-right, .po-row.po-color-row .po-right{ margin-top:-2px !important; } */

/* === Add a little breathing room between COLOR text and the swatches === */
:root { --color-swatch-top-gap: 0.4rem; } /* tweak: try 0.2–0.4rem */

.opt-row--color .or-right,
.po-row.po-color-row .po-right,
.option-buttons[data-option-name*="color" i],
.option-buttons[data-select-name*="color" i]{
  margin-top: var(--color-swatch-top-gap) !important;
}

/* Increase space between SIZE buttons and the next COLOR label line */
.opt-row:not(.opt-row--color) + .opt-row--color{
  margin-top: 1.5rem !important;   /* tweak to taste: .4rem–1rem */
}

/* If your theme sometimes uses the .po-color-row variant */
.opt-row + .po-row.po-color-row{
  margin-top: 1.5rem !important;   /* same gap as above */
}

/* === Reduce vertical gap between QTY and Add to Cart === */

/* Dawn & most Shopify 2.0 themes */
.product-form__input--quantity{ margin-bottom: .5rem !important; } /* tighten under QTY */
.product-form__buttons{ margin-top: 0 !important; }                /* pull ATC up */

/* Fallbacks for other themes */
.product-form :is(.quantity, .quantity-wrapper, .product-quantity, .qty-selector, .opt-row--qty){
  margin-bottom: .5rem !important;
}
.product-form :is(.form-actions, .add-to-cart, .product-form__submit, button[type="submit"]){
  margin-top: 0 !important;
}

/* (If you still see a spacer in between, neutralize it) */
.product-form :is(.spacer, [class*="spacer" i]){ height:.5rem !important; margin:0 !important; }

/* Line + spacing between Add to Cart and Title */
.product-form__buttons{
  border-bottom:1px solid #e5e5e5;
  padding-bottom:.75rem;      /* space above the line */
  margin-bottom:1rem !important; /* space below the line (before title) */
}

/* fallbacks for other themes */
.product-form :is(.form-actions, .add-to-cart){
  border-bottom:1px solid #e5e5e5;
  padding-bottom:.75rem;
  margin-bottom:1rem !important;
}

/* === Bigger gap (about a full line) below Add to Cart === */
:root{ --atc-title-gap: 2rem; }  /* ~32px; try 1.75rem if you want slightly less */

.product-form__buttons{
  margin-bottom: var(--atc-title-gap) !important;
  /* keep these if you still want the divider line */
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: .75rem;
}

/* fallbacks for other themes/markup */
.product-form :is(.form-actions, .add-to-cart, .product-form__submit){
  margin-bottom: var(--atc-title-gap) !important;
}

/* === Force a full-line gap below the Add to Cart bar on product pages === */
:root { --atc-gap: 1.75rem; }  /* adjust: 1.5–2.25rem to taste */

body[class*="product"] .product-form__buttons::after,
body[class*="product"] .product-form :is(.form-actions, .add-to-cart)::after,
body[class*="product"] .product-form :is(.product-form__submit, button[type="submit"])::after{
  content: "";
  display: block;
  height: var(--atc-gap);   /* this is the space you see under the bar */
}

/* Make sure the title doesn't eat the space with a negative/extra top margin */
body[class*="product"] :is(.product__title, .product-single__title, .product-title, .pd-name, h1.product__title){
  margin-top: 0 !important;
}
/* ============================================================
   SOLD-OUT AVAILABILITY for .option-buttons / .option-btn
   Uses ProductJson-<product.id> JSON block on the page.
   Adds class: is-sold-out  (matches your CSS)
   Also sets: disabled + aria-disabled="true"
   ============================================================ */
(function () {
  function normalize(str) {
    return String(str || '').trim().toLowerCase();
  }

  function closestProductRoot(el) {
    return el.closest('[data-section-type*="product"], [data-product-id], .product, main') || document;
  }

  function getProductJson(el) {
    const root = closestProductRoot(el);

    // Prefer ProductJson near this product/form
    let jsonEl = root.querySelector('script[type="application/json"][id^="ProductJson-"]');

    // Fallback to any ProductJson on the page
    if (!jsonEl) jsonEl = document.querySelector('script[type="application/json"][id^="ProductJson-"]');

    if (!jsonEl) return null;

    try {
      return JSON.parse(jsonEl.textContent);
    } catch (e) {
      console.warn('Could not parse ProductJson', e);
      return null;
    }
  }

  function getSelections(form) {
    const selections = {};
    form.querySelectorAll('.option-buttons[data-for][data-option-name]').forEach(wrap => {
      const optName = wrap.getAttribute('data-option-name');
      const sel = document.querySelector(wrap.getAttribute('data-for'));
      if (optName && sel) {
        selections[normalize(optName)] = sel.value;
      }
    });
    return selections;
  }

  function updateSoldOutStates(form) {
    const product = getProductJson(form);
    if (!product || !Array.isArray(product.variants)) return;

    const variants = product.variants;

    // ProductJson shows options like ["size","Color"] — normalize to ["size","color"]
    const optionNames = (product.options || []).map(normalize);

    const selections = getSelections(form);

    // For each option group (size/color), compute which values are possible given other selections
    form.querySelectorAll('.option-buttons[data-for][data-option-name]').forEach(wrap => {
      const optName = normalize(wrap.getAttribute('data-option-name'));
      const optIndex = optionNames.indexOf(optName); // 0 => option1, 1 => option2, ...

      if (optIndex === -1) return;

      wrap.querySelectorAll('button.option-btn[data-value]').forEach(btn => {
        const value = btn.getAttribute('data-value');
        if (!value) return;

        // A value is "possible" if there exists ANY AVAILABLE variant that:
        // - matches all OTHER selected options
        // - and has this option value for the current option group
        const possible = variants.some(v => {
          if (!v || v.available !== true) return false;

          // must match all other selections (if selected)
          for (let i = 0; i < optionNames.length; i++) {
            if (i === optIndex) continue;
            const otherName = optionNames[i];
            const selectedVal = selections[otherName];
            if (selectedVal && v['option' + (i + 1)] !== selectedVal) return false;
          }

          // must match this candidate value
          return v['option' + (optIndex + 1)] === value;
        });

        // Apply sold-out UI + disable
        const soldOut = !possible;
        btn.classList.toggle('is-sold-out', soldOut);
        btn.disabled = soldOut;
        btn.setAttribute('aria-disabled', soldOut ? 'true' : 'false');
        btn.tabIndex = soldOut ? -1 : 0;
      });
    });
  }

  function init() {
    // Most Shopify product pages have one cart/add form.
    document.querySelectorAll('form[action*="/cart/add"]').forEach(form => {
      // run once on load
      updateSoldOutStates(form);

      // run whenever the hidden selects change (your button script dispatches 'change')
      form.addEventListener('change', () => updateSoldOutStates(form));

      // run after option button clicks (in case change fires async)
      form.addEventListener('click', () => setTimeout(() => updateSoldOutStates(form), 0));
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();