/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'tool-wallpaper-calculator.css'"
Line 17:0 Unexpected "{"
Line 17:1 Unexpected "{"
Line 17:3 Expected identifier but found "'calculator-multi.js'"
Line 561:8 Unexpected "/"
Line 562:1 Expected identifier but found "%"
Line 563:2 Unexpected "{"
Line 563:3 Unexpected "{"
... and 6 more hidden warnings

**/
{{ 'tool-wallpaper-calculator.css' | asset_url | stylesheet_tag }}
{{ 'calculator-multi.js' | asset_url | script_tag }}

/* ========== Open Button ========== */
.twc-trigger-btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.twc-trigger-btn:hover {
  background-color: #222;
}
@media (max-width: 768px) {
  .twc-drawer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    max-width: none !important;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    padding-top: env(safe-area-inset-top, 24px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column; 
  }

  .twc-drawer.open,
  .twc-drawer.slide-in {
    transform: translateY(0);
  }

  .twc-drawer.slide-out {
    transform: translateY(100%);
  }


  /* Optional: ensure drawer content scrolls inside */
  .twc-drawer {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }


  .twc-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10001;
  }
}
.twc-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: rgb(231, 231, 231);
  border: none;
  padding: 14px 24px;
  border-radius: 0px;
  font-size: 16px;
  font-weight: 300;
  color: #000; /* default text color */
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.twc-icon-btn:hover {
  background-color: #d29d00;
  color: #fff; /* make the text white on hover */
}

.twc-icon-btn:hover .twc-icon {
  filter: brightness(0) invert(1); /* make icon white on hover */
}

.twc-icon-btn .twc-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
}

/* ========== Backdrop (no blur) ========== */
.twc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.45);
  transition: opacity 0.3s ease;
}
.twc-backdrop.hidden {
  display: none;
}

/* ========== Drawer ========== */
.twc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000000;
  height: 100%;
  width: 100%;
  max-width: 420px;
  background: #fff;
  padding: 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.25);
}
.twc-drawer.open {
  transform: translateX(0);
}
@media (max-width: 768px) {
  .twc-drawer {
    top: auto;
    bottom: 0;
    max-height: 95%;
    transform: translateY(100%);
  }
  .twc-drawer.open {
    transform: translateY(0);
  }
}

/* ========== Close Button ========== */
.twc-close-btn {
  background: none;
  border: none;
  font-size: 3rem;
  color: #000;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* ========== Header ========== */
.twc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.twc-header h2 {
  margin: 20px;
  font-size: 2.25rem;
  text-align: center;
  padding-top:40px;
}

.twc-subheading {
  text-align: center;
  font-weight: 500;
  font-size: 0.85rem;
  margin: 0;
  color: #222;
}
.twc-subheading::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  margin: 20px auto 0;
}

.twc-estimate-label {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 6px;
  color: #222;
  text-align: center;
}

/* ========== Unit + Roll Row ========== */
.twc-unit-and-roll-row {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
}
@media (max-width: 360px) {
  .twc-unit-and-roll-row {
    flex-direction: column;
    align-items: stretch;
  }
}
/* ========== Unit Toggle (Label Left, Centered Row) ========== */
.twc-unit-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 10px;
  padding-bottom: 10px;
  width: 100%;
  text-align: center;
}

.twc-toggle-label {
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}

.twc-toggle-group {
  display: inline-flex;
  background: rgb(230, 230, 230);
  border: 1px solid #ccc;
  border-radius: 9999px;
  overflow: hidden;
}

.twc-toggle-group input[type="radio"] {
  display: none;
}

.twc-toggle-option {
  height: 25px;
  line-height: 25px;
  padding: 0 26px;
  font-size: 0.75rem;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}

input[type="radio"]:checked + .twc-toggle-option {
  background: #fff;
  color: #000;
  box-shadow: inset 0 0 0 2px rgb(113, 113, 113);
  border-radius: 9999px;
}

/* Roll Size */
.twc-rollsize-dropdown {
  width: 100%;
  height: 30px;
  padding: 0 16px;
  font-size: 1rem;
}

/* ========== Table Rows ========== */
.wall-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: center;
  padding: .0rem 0px;
  border-top: 1px solid #ccc;
  border-bottom: .5px solid #ccc;
  background: #fff;
}
.wall-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 0.85rem;
  color: rgb(99, 99, 99);
}
.wall-meta img {
  width: 30px;
  height: 30px;
}
.wall-input-group {
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.wall-input-group label {
  font-size: 0.7rem;
  color: rgb(151, 151, 151);
  font-weight: 500;
  padding-left: 16px;
  margin: 0;
  padding-top: 5px;
}
.wall-divider {
  border-left: 1px solid #ccc;
  padding-left: 16px;
  padding-right: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Unit inside input */
.wall-input-container {
  position: relative;
}
.wall-input-container input {
  width: 100%;
  padding-right: 25px;
  font-size: 1.5rem;
  text-align: right;
  color: #d29d00;
  font-weight: 500;
  border: 0;
  background: #fff;
  box-shadow: none;
}
.wall-input-container::after {
  content: attr(data-unit);
  position: absolute;
  right: 8px;
  top: 40%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #999;
  pointer-events: none;
}

/* Remove Button */
.remove-wall {
  width: 18px;
  height: 18px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== Add Wall Button ========== */
.twc-add-wall {
  display: inline-block; /* or flex if needed */
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(19, 19, 19);
  background: rgb(238, 238, 238);
  border: none;
  border-radius: 60px;
  cursor: pointer;
}

/* Result */
.twc-result {
  text-align: center;
  margin-top: 24px;
}
.twc-rolls {
  font-size: 5rem;
  font-weight: bold;
  color: #d29d00;
  margin: 0;
}
.twc-disclaimer {
  font-size: 0.75rem;
  color: #666;
  text-align: justify;
  padding: 40px 16px 0;
  line-height: 1.4;
}
.twc-disclaimer strong {
  font-weight: 500;
}

/* ========== Header Layer Fix ========== */
.site-header,
.header,
.header-wrapper,
.announcement-bar {
  z-index: 100 !important;
}
body.drawer-open #shopify-section-sections--17175287529590_header,
body.drawer-open .header__wrapper,
body.drawer-open .js__header__stuck,
body.drawer-open .site-header {
  z-index: 0 !important;
  position: relative !important;
}

body.drawer-open {
  overflow: hidden;
}

/* === Close Button: absolute top-right === */
.twc-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  font-size: 2.5rem;
  color: #000;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  z-index: 10001; /* stays above drawer content */
}

/* ========== Animation  ========== */
/* Backdrop Animation */
.twc-backdrop {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease-in-out;
}
.twc-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Drawer Slide-in/out */
.twc-drawer {
  position: fixed;
  z-index: 1000000;
  background: #fff;
  width: 100%;
  max-width: 420px;
  height: 100%;
  overflow-y: auto;
  /* kill the edge shadow */
  box-shadow: none !important;
  /* we'll control direction with classes, not media queries */
  transform: translateX(100%); /* default off-screen to the right */
  transition: transform .32s ease-in-out;
}

/* --- LOCKED MODES (no jumping while window is resized) --- */
.twc-drawer.mode-right {
  top: 0; right: 0; bottom: 0; left: auto;
  max-height: 100%;
  border-radius: 0;
  transform: translateX(100%);
}
.twc-drawer.mode-right.slide-in { transform: translateX(0); }
.twc-drawer.mode-right.slide-out { transform: translateX(100%); }

.twc-drawer.mode-bottom {
  left: 0; right: 0; bottom: 0; top: auto;
  width: 100%;
  max-width: 100%;
  max-height: 95vh;
  border-radius: 0;
  transform: translateY(100%);
}
.twc-drawer.mode-bottom.slide-in { transform: translateY(0); }
.twc-drawer.mode-bottom.slide-out { transform: translateY(100%); }

/* Prevent page scroll + any layout shift while drawer is open */
body.drawer-open {
  overflow: hidden;
  /* if your theme adds a scrollbar gutter, uncomment this line:
  padding-right: var(--scrollbar-compensation, 0px);
  */
}

/* reduces layout shift on browsers that support it */
html { scrollbar-gutter: stable; }


/* Desktop slide-in from right */
.twc-drawer.slide-in {
  transform: translateX(0);
}
.twc-drawer.slide-out {
  transform: translateX(100%);
}

/* Mobile slide-in from bottom */
@media (max-width: 768px) {
  .twc-drawer {
    transform: translateY(100%);
  }
  .twc-drawer.slide-in {
    transform: translateY(0);
  }
  .twc-drawer.slide-out {
    transform: translateY(100%);
  }
}

/* ========== ADA ========== */
*:focus {
  outline: 2px solid  #d29d00;
}

.twc-actions {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}


/* ========== update button ========== */
.twc-apply {
  padding: 10px 18px;
  border: none;
  border-radius: 9999px;
  background: #d29d00;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s ease, transform .05s ease;
}
.twc-apply:disabled { opacity: .5; cursor: not-allowed; }
.twc-apply:active { transform: translateY(1px); }

.twc-apply-note {
  font-size: .9rem;
  color: #333;
}
.twc-sheet-size {
  margin-bottom: 4px; /* tighten spacing above link */
  text-align: center;
}

.twc-subheading {
  margin: 0 0 15px 0;
  text-align: center;
}

.twc-subheading a {
  font-size: 14px;
  color: #333;
  text-decoration: underline;
}

.twc-subheading a:hover {
  color: #b88a44; /* gold accent */
}

sections/I section-tool-wallpaper-calculator-multi.liquid
{%- unless content_for_header contains 'calculator-loaded' -%}
  {{ 'tool-wallpaper-calculator.css' | asset_url | stylesheet_tag }}
  <script src="{{ 'tool-wallpaper-calculator.js' | asset_url }}" defer></script>
  <meta name="calculator-loaded">
{%- endunless -%}

<!-- Backdrop (overlay) -->
<div id="twc-backdrop" class="twc-backdrop hidden"></div>

<!-- Drawer -->
<div id="twc-drawer" class="twc-drawer hidden">
  <button id="twc-close-btn" class="twc-close-btn" aria-label="Close">&times;</button>

  <div class="twc-header">
    <h2 class="twc-title">Wallpaper Calculator</h2>
  </div>

  <div class="twc-drawer-content">
    {% render 'tool-wallpaper-calculator-form' %}
  </div>
</div>





snippets/tool-wallpaper-calculator-multi.liquid
<!-- snippets/tool-wallpaper-calculator-multi.liquid -->
<div id="wallpaper-calculator">
  <button data-calculator-trigger class="twc-icon-btn">
    <img
      src="/cdn/shop/files/akar-icons_calculator.svg?v=1754975743" 
      alt="Calculator icon"
      class="twc-icon"
      loading="lazy"
      width="24"
      height="24"
    >
    <span>Wallpaper Calculator</span>
  </button>

  <div id="twc-backdrop" class="twc-backdrop hidden"></div>

  <div id="twc-drawer" class="twc-drawer hidden" role="dialog" aria-modal="true" aria-labelledby="twc-title">
    <div class="twc-header">
      <h2 id="twc-title">How many sheets do I need?</h2>
      <button id="twc-close-btn" class="twc-close-btn" aria-label="Close">&times;</button>
    </div>

    <p class="twc-subheading">Calculate how many sheets you need</p>

    <div class="twc-unit-and-roll-row">
      <!-- Unit Toggle -->
      <div class="twc-unit-toggle-row">
        <span class="twc-toggle-label">Unit</span>
        <div class="twc-toggle-group" role="radiogroup">
          <input type="radio" name="unit" id="unit-meter" value="meters" checked>
          <label for="unit-meter" class="twc-toggle-option">Meter</label>

          <input type="radio" name="unit" id="unit-feet" value="feet">
          <label for="unit-feet" class="twc-toggle-option">Feet</label>
        </div>
      </div>

      <!-- Roll Size Dropdown (no label) -->
      <select id="roll_size" class="twc-rollsize-dropdown" aria-label="Select wallpaper roll size">
        <!-- Populated by JS -->
      </select>
    </div> <!-- ✅ Close .twc-unit-and-roll-row -->

    <div id="walls-container">
      <!-- Wall inputs added dynamically -->
    </div>

    <button id="add-wall-btn" class="twc-add-wall">+ Add wall</button>

    <div id="estimate-result" class="twc-result">
      <p class="twc-estimate-label">We estimate you will require</p>
      <div class="twc-rolls">0</div>
      <p>Rolls</p>
      <p class="twc-disclaimer">
        <strong>Disclaimer: </strong>
        This calculator gives an estimate only. Buffalo Bunny cannot be held responsible for any overage or shortfall. Actual needs depend on your pattern’s repeat and match type. We base our recommendation on your room’s square footage, but you can also total your wall width (in inches) and divide by your roll width to find the exact number of rolls.
      </p>
    </div>
  </div>
</div>