.elementor-3160 .elementor-element.elementor-element-ada6db8{--display:flex;}.elementor-3160 .elementor-element.elementor-element-a3bec11{width:100%;max-width:100%;}/* Start custom CSS for html, class: .elementor-element-a3bec11 */<div id="mt-storefront-cart-page">
  TEST WINKELMAND PAGINA ACTIEF
</div>
<div id="mt-storefront-cart-page">
  <div class="mt-cart-shell">
    <div class="mt-cart-header">
      <h1>Jouw winkelwagen</h1>
      <a href="https://moderntreasures.nl" class="mt-cart-back">← Terugkeren naar winkel</a>
    </div>

    <div class="mt-cart-loading" data-mt-cart-loading>
      Winkelmand laden...
    </div>

    <div class="mt-cart-empty" data-mt-cart-empty hidden>
      <h2>Je winkelwagen is leeg</h2>
      <p>Er staan nog geen producten in je winkelmand.</p>
      <a href="https://moderntreasures.nl" class="mt-cart-empty-link">Verder winkelen</a>
    </div>

    <div class="mt-cart-layout" data-mt-cart-layout hidden>
      <div class="mt-cart-items" data-mt-cart-items></div>

      <aside class="mt-cart-summary">
        <div class="mt-cart-summary-inner">
          <h2>Besteloverzicht</h2>

          <div class="mt-cart-summary-row">
            <span>Subtotaal</span>
            <strong data-mt-cart-subtotal>€0,00</strong>
          </div>

          <div class="mt-cart-summary-row muted">
            <span>Verzendkosten</span>
            <span>Berekenen bij checkout</span>
          </div>

          <div class="mt-cart-discount">
            <label for="mt-cart-discount-code">Kortingscode</label>
            <div class="mt-cart-discount-row">
              <input id="mt-cart-discount-code" type="text" placeholder="Code invoeren">
              <button type="button" data-mt-apply-discount>Toepassen</button>
            </div>
            <div class="mt-cart-discount-message" data-mt-discount-message></div>
          </div>

          <div class="mt-cart-total">
            <span>Totaal</span>
            <strong data-mt-cart-total>€0,00</strong>
          </div>

          <p class="mt-cart-tax-note">Inclusief btw. Verzendkosten worden berekend bij de checkout.</p>

          <button type="button" class="mt-cart-checkout" data-mt-cart-checkout>
            Direct bestellen
          </button>
        </div>
      </aside>
    </div>
  </div>
</div>

<style>
  #mt-storefront-cart-page {
    width: 100%;
    min-height: 100vh;
    background: #f8f8f6;
    color: #111111;
    padding: calc(var(--mt-nav-height, 56px) + 48px) 24px 80px;
    box-sizing: border-box;
  }

  body.mt-theme-dark #mt-storefront-cart-page {
    background: #080808;
    color: #f5f5f0;
  }

  #mt-storefront-cart-page .mt-cart-shell {
    width: min(1480px, 100%);
    margin: 0 auto;
  }

  #mt-storefront-cart-page .mt-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 38px;
  }

  #mt-storefront-cart-page h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.95;
    letter-spacing: 0.04em;
    margin: 0;
    color: inherit;
  }

  body.mt-theme-dark #mt-storefront-cart-page h1 {
    color: #e8c45a;
  }

  #mt-storefront-cart-page .mt-cart-back {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    opacity: 0.62;
  }

  #mt-storefront-cart-page .mt-cart-back:hover {
    opacity: 1;
  }

  #mt-storefront-cart-page .mt-cart-loading,
  #mt-storefront-cart-page .mt-cart-empty {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
  }

  #mt-storefront-cart-page .mt-cart-empty h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(38px, 4vw, 64px);
    letter-spacing: 0.04em;
    margin: 0;
  }

  #mt-storefront-cart-page .mt-cart-empty p {
    margin: 0;
    opacity: 0.68;
  }

  #mt-storefront-cart-page .mt-cart-empty-link {
    margin-top: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: inherit;
  }

  #mt-storefront-cart-page .mt-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 58px;
    align-items: start;
  }

  #mt-storefront-cart-page .mt-cart-items {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(128,128,128,0.18);
  }

  #mt-storefront-cart-page .mt-cart-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 150px;
    gap: 26px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(128,128,128,0.16);
    align-items: start;
  }

  #mt-storefront-cart-page .mt-cart-item-image {
    display: block;
    width: 150px;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(128,128,128,0.12);
  }

  #mt-storefront-cart-page .mt-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #mt-storefront-cart-page .mt-cart-item-info {
    min-width: 0;
  }

  #mt-storefront-cart-page .mt-cart-item-title {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: inherit;
    margin-bottom: 8px;
  }

  #mt-storefront-cart-page .mt-cart-item-options {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    opacity: 0.72;
    margin-bottom: 16px;
  }

  #mt-storefront-cart-page .mt-cart-qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  #mt-storefront-cart-page .mt-cart-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(128,128,128,0.35);
    border-radius: 999px;
    overflow: hidden;
  }

  #mt-storefront-cart-page .mt-cart-qty button {
    width: 38px;
    height: 36px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
  }

  #mt-storefront-cart-page .mt-cart-qty span {
    min-width: 32px;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 16px;
  }

  #mt-storefront-cart-page .mt-cart-remove {
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 13px;
  }

  #mt-storefront-cart-page .mt-cart-remove:hover {
    opacity: 1;
  }

  #mt-storefront-cart-page .mt-cart-item-price {
    text-align: right;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px;
    letter-spacing: 0.04em;
  }

  #mt-storefront-cart-page .mt-cart-summary {
    position: sticky;
    top: calc(var(--mt-nav-height, 56px) + 28px);
  }

  #mt-storefront-cart-page .mt-cart-summary-inner {
    border: 1px solid rgba(128,128,128,0.18);
    border-radius: 18px;
    padding: 28px;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body.mt-theme-dark #mt-storefront-cart-page .mt-cart-summary-inner {
    background: rgba(13,13,15,0.72);
    border-color: rgba(255,255,255,0.1);
  }

  #mt-storefront-cart-page .mt-cart-summary h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 42px;
    line-height: 1;
    letter-spacing: 0.04em;
    margin: 0 0 24px;
  }

  body.mt-theme-dark #mt-storefront-cart-page .mt-cart-summary h2 {
    color: #e8c45a;
  }

  #mt-storefront-cart-page .mt-cart-summary-row,
  #mt-storefront-cart-page .mt-cart-total {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    margin-bottom: 14px;
  }

  #mt-storefront-cart-page .mt-cart-summary-row strong,
  #mt-storefront-cart-page .mt-cart-total strong {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: 0.04em;
    font-weight: 400;
  }

  #mt-storefront-cart-page .mt-cart-summary-row.muted {
    opacity: 0.62;
    border-bottom: 1px solid rgba(128,128,128,0.18);
    padding-bottom: 18px;
    margin-bottom: 20px;
  }

  #mt-storefront-cart-page .mt-cart-discount {
    border-bottom: 1px solid rgba(128,128,128,0.18);
    padding-bottom: 22px;
    margin-bottom: 22px;
  }

  #mt-storefront-cart-page .mt-cart-discount label {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 10px;
    opacity: 0.72;
  }

  #mt-storefront-cart-page .mt-cart-discount-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  #mt-storefront-cart-page .mt-cart-discount input {
    height: 46px;
    border: 1px solid rgba(128,128,128,0.35);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    padding: 0 16px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    min-width: 0;
  }

  #mt-storefront-cart-page .mt-cart-discount button {
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(128,128,128,0.35);
    background: transparent;
    color: inherit;
    padding: 0 16px;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #mt-storefront-cart-page .mt-cart-discount-message {
    min-height: 18px;
    margin-top: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    opacity: 0.75;
  }

  #mt-storefront-cart-page .mt-cart-total {
    align-items: baseline;
    margin-bottom: 8px;
  }

  #mt-storefront-cart-page .mt-cart-total span {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  #mt-storefront-cart-page .mt-cart-total strong {
    font-size: 38px;
  }

  #mt-storefront-cart-page .mt-cart-tax-note {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    opacity: 0.58;
    margin: 0 0 22px;
  }

  #mt-storefront-cart-page .mt-cart-checkout {
    width: 100%;
    min-height: 56px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(10,10,10,0.78);
    color: #f5f5f0;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow:
      0 4px 24px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(255,255,255,0.18);
  }

  body.mt-theme-dark #mt-storefront-cart-page .mt-cart-checkout {
    background: rgba(232,196,90,0.94);
    color: #080808;
    border-color: rgba(232,196,90,0.5);
  }

  @media (max-width: 989px) {
    #mt-storefront-cart-page {
      padding: calc(var(--mt-nav-height, 56px) + 32px) 18px 60px;
    }

    #mt-storefront-cart-page .mt-cart-header {
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 28px;
    }

    #mt-storefront-cart-page .mt-cart-layout {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    #mt-storefront-cart-page .mt-cart-summary {
      position: static;
    }

    #mt-storefront-cart-page .mt-cart-item {
      grid-template-columns: 104px minmax(0, 1fr);
      gap: 16px;
    }

    #mt-storefront-cart-page .mt-cart-item-image {
      width: 104px;
    }

    #mt-storefront-cart-page .mt-cart-item-price {
      grid-column: 2;
      text-align: left;
      font-size: 26px;
      margin-top: -8px;
    }

    #mt-storefront-cart-page .mt-cart-item-title {
      font-size: 20px;
    }
  }
</style>

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

  var endpoint = "https://nqdkcs-mx.myshopify.com/api/2026-04/graphql.json";
  var token = "d7ef14b66d218d3f59a6b754bc1fcc99";
  var cookieName = "mt_shopify_storefront_cart_id";

  var root = document.getElementById("mt-storefront-cart-page");
  if (!root) return;

  var loadingEl = root.querySelector("[data-mt-cart-loading]");
  var emptyEl = root.querySelector("[data-mt-cart-empty]");
  var layoutEl = root.querySelector("[data-mt-cart-layout]");
  var itemsEl = root.querySelector("[data-mt-cart-items]");
  var subtotalEl = root.querySelector("[data-mt-cart-subtotal]");
  var totalEl = root.querySelector("[data-mt-cart-total]");
  var checkoutBtn = root.querySelector("[data-mt-cart-checkout]");
  var applyDiscountBtn = root.querySelector("[data-mt-apply-discount]");
  var discountInput = root.querySelector("#mt-cart-discount-code");
  var discountMessage = root.querySelector("[data-mt-discount-message]");

  var currentCart = null;

  function setCartId(cartId) {
    try {
      document.cookie =
        cookieName +
        "=" +
        encodeURIComponent(cartId) +
        "; domain=.moderntreasures.nl; path=/; max-age=2592000; SameSite=Lax; Secure";
    } catch (e) {}

    try {
      localStorage.setItem(cookieName, cartId);
    } catch (e) {}
  }

  function getCartId() {
    var match = document.cookie.match(new RegExp("(?:^|; )" + cookieName + "=([^;]*)"));

    if (match) {
      return decodeURIComponent(match[1]);
    }

    try {
      return localStorage.getItem(cookieName);
    } catch (e) {
      return null;
    }
  }

  function clearCartId() {
    try {
      document.cookie =
        cookieName +
        "=; domain=.moderntreasures.nl; path=/; max-age=0; SameSite=Lax; Secure";
    } catch (e) {}

    try {
      localStorage.removeItem(cookieName);
    } catch (e) {}
  }

  function gql(query, variables) {
    return fetch(endpoint, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Storefront-Access-Token": token
      },
      body: JSON.stringify({
        query: query,
        variables: variables || {}
      })
    })
      .then(function (response) {
        if (!response.ok) {
          throw new Error("Storefront request failed: " + response.status);
        }

        return response.json();
      })
      .then(function (json) {
        if (json.errors && json.errors.length) {
          throw new Error(json.errors[0].message || "Storefront API error");
        }

        return json.data;
      });
  }

  function cartFragment() {
    return `
      fragment MtCartPageFields on Cart {
        id
        checkoutUrl
        totalQuantity
        discountCodes {
          code
          applicable
        }
        cost {
          subtotalAmount {
            amount
            currencyCode
          }
          totalAmount {
            amount
            currencyCode
          }
        }
        lines(first: 100) {
          edges {
            node {
              id
              quantity
              cost {
                totalAmount {
                  amount
                  currencyCode
                }
              }
              merchandise {
                ... on ProductVariant {
                  id
                  title
                  image {
                    url
                    altText
                  }
                  selectedOptions {
                    name
                    value
                  }
                  product {
                    title
                    vendor
                    handle
                  }
                }
              }
            }
          }
        }
      }
    `;
  }

  function fetchCart(cartId) {
    var query = `
      ${cartFragment()}
      query MtCartPage($id: ID!) {
        cart(id: $id) {
          ...MtCartPageFields
        }
      }
    `;

    return gql(query, { id: cartId }).then(function (data) {
      if (!data.cart) {
        clearCartId();
        return createCart();
      }

      setCartId(data.cart.id);
      return data.cart;
    });
  }

  function createCart() {
    var mutation = `
      ${cartFragment()}
      mutation MtCartPageCreate {
        cartCreate {
          cart {
            ...MtCartPageFields
          }
          userErrors {
            field
            message
          }
        }
      }
    `;

    return gql(mutation).then(function (data) {
      if (data.cartCreate.userErrors && data.cartCreate.userErrors.length) {
        throw new Error(data.cartCreate.userErrors[0].message);
      }

      setCartId(data.cartCreate.cart.id);
      return data.cartCreate.cart;
    });
  }

  function getOrCreateCart() {
    var cartId = getCartId();

    if (cartId) {
      return fetchCart(cartId).catch(function () {
        clearCartId();
        return createCart();
      });
    }

    return createCart();
  }

  function updateLine(lineId, quantity) {
    var mutation = `
      ${cartFragment()}
      mutation MtCartPageLinesUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
        cartLinesUpdate(cartId: $cartId, lines: $lines) {
          cart {
            ...MtCartPageFields
          }
          userErrors {
            field
            message
          }
        }
      }
    `;

    return gql(mutation, {
      cartId: currentCart.id,
      lines: [
        {
          id: lineId,
          quantity: Number(quantity)
        }
      ]
    }).then(function (data) {
      if (data.cartLinesUpdate.userErrors && data.cartLinesUpdate.userErrors.length) {
        throw new Error(data.cartLinesUpdate.userErrors[0].message);
      }

      setCartId(data.cartLinesUpdate.cart.id);
      return data.cartLinesUpdate.cart;
    });
  }

  function removeLine(lineId) {
    var mutation = `
      ${cartFragment()}
      mutation MtCartPageLinesRemove($cartId: ID!, $lineIds: [ID!]!) {
        cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
          cart {
            ...MtCartPageFields
          }
          userErrors {
            field
            message
          }
        }
      }
    `;

    return gql(mutation, {
      cartId: currentCart.id,
      lineIds: [lineId]
    }).then(function (data) {
      if (data.cartLinesRemove.userErrors && data.cartLinesRemove.userErrors.length) {
        throw new Error(data.cartLinesRemove.userErrors[0].message);
      }

      setCartId(data.cartLinesRemove.cart.id);
      return data.cartLinesRemove.cart;
    });
  }

  function applyDiscount(code) {
    var mutation = `
      ${cartFragment()}
      mutation MtCartPageDiscount($cartId: ID!, $discountCodes: [String!]) {
        cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) {
          cart {
            ...MtCartPageFields
          }
          userErrors {
            field
            message
          }
        }
      }
    `;

    return gql(mutation, {
      cartId: currentCart.id,
      discountCodes: code ? [code] : []
    }).then(function (data) {
      if (data.cartDiscountCodesUpdate.userErrors && data.cartDiscountCodesUpdate.userErrors.length) {
        throw new Error(data.cartDiscountCodesUpdate.userErrors[0].message);
      }

      setCartId(data.cartDiscountCodesUpdate.cart.id);
      return data.cartDiscountCodesUpdate.cart;
    });
  }

  function money(amount, currencyCode) {
    try {
      return new Intl.NumberFormat("nl-NL", {
        style: "currency",
        currency: currencyCode || "EUR"
      }).format(Number(amount || 0));
    } catch (e) {
      return "€" + Number(amount || 0).toFixed(2).replace(".", ",");
    }
  }

  function escapeHtml(value) {
    return String(value || "")
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  function getLine(lineId) {
    var edges = currentCart && currentCart.lines && currentCart.lines.edges ? currentCart.lines.edges : [];
    var found = edges.find(function (edge) {
      return edge.node.id === lineId;
    });

    return found ? found.node : null;
  }

  function updateBadge(cart) {
    var badge = document.getElementById("mt-cart-badge");
    if (!badge) return;

    var qty = cart && cart.totalQuantity ? cart.totalQuantity : 0;

    if (qty > 0) {
      badge.textContent = qty > 99 ? "99+" : qty;
      badge.classList.add("is-visible");
    } else {
      badge.textContent = "";
      badge.classList.remove("is-visible");
    }
  }

  function render(cart) {
    currentCart = cart;
    updateBadge(cart);

    var edges = cart && cart.lines && cart.lines.edges ? cart.lines.edges : [];
    var hasItems = edges.length > 0;

    if (loadingEl) loadingEl.hidden = true;
    if (emptyEl) emptyEl.hidden = hasItems;
    if (layoutEl) layoutEl.hidden = !hasItems;

    if (!hasItems) {
      if (itemsEl) itemsEl.innerHTML = "";
      if (subtotalEl) subtotalEl.textContent = money(0, "EUR");
      if (totalEl) totalEl.textContent = money(0, "EUR");
      return;
    }

    itemsEl.innerHTML = edges.map(function (edge) {
      var line = edge.node;
      var variant = line.merchandise || {};
      var product = variant.product || {};
      var image = variant.image || {};
      var lineTotal = line.cost && line.cost.totalAmount ? line.cost.totalAmount : null;
      var productUrl = product.handle ? "https://shop.moderntreasures.nl/products/" + product.handle : "https://shop.moderntreasures.nl";

      var optionsHtml = (variant.selectedOptions || [])
        .filter(function (option) {
          return option.name !== "Title" && option.value !== "Default Title";
        })
        .map(function (option) {
          return "<span>" + escapeHtml(option.name) + ": " + escapeHtml(option.value) + "</span>";
        })
        .join("");

      return `
        <article class="mt-cart-item" data-line-id="${escapeHtml(line.id)}">
          <a class="mt-cart-item-image" href="${escapeHtml(productUrl)}">
            <img src="${escapeHtml(image.url || "")}" alt="${escapeHtml(image.altText || product.title || "")}" loading="lazy">
          </a>

          <div class="mt-cart-item-info">
            <a class="mt-cart-item-title" href="${escapeHtml(productUrl)}">
              ${escapeHtml(product.title || "")}
            </a>

            <div class="mt-cart-item-options">
              ${optionsHtml}
            </div>

            <div class="mt-cart-qty-row">
              <div class="mt-cart-qty">
                <button type="button" data-mt-qty-minus="${escapeHtml(line.id)}">−</button>
                <span>${line.quantity}</span>
                <button type="button" data-mt-qty-plus="${escapeHtml(line.id)}">+</button>
              </div>

              <button type="button" class="mt-cart-remove" data-mt-remove="${escapeHtml(line.id)}">
                Verwijderen
              </button>
            </div>
          </div>

          <div class="mt-cart-item-price">
            ${lineTotal ? money(lineTotal.amount, lineTotal.currencyCode) : ""}
          </div>
        </article>
      `;
    }).join("");

    var subtotal = cart.cost && cart.cost.subtotalAmount ? cart.cost.subtotalAmount : null;
    var total = cart.cost && cart.cost.totalAmount ? cart.cost.totalAmount : null;

    if (subtotalEl) subtotalEl.textContent = subtotal ? money(subtotal.amount, subtotal.currencyCode) : money(0, "EUR");
    if (totalEl) totalEl.textContent = total ? money(total.amount, total.currencyCode) : money(0, "EUR");

    var discounts = cart.discountCodes || [];
    var activeDiscount = discounts.find(function (discount) {
      return discount.code;
    });

    if (activeDiscount && discountInput) {
      discountInput.value = activeDiscount.code;
    }
  }

  function refresh() {
    if (loadingEl) loadingEl.hidden = false;

    return getOrCreateCart()
      .then(function (cart) {
        render(cart);
        return cart;
      })
      .catch(function (error) {
        console.error("Winkelmand laden mislukt:", error);
        if (loadingEl) loadingEl.textContent = "Winkelmand kon niet geladen worden.";
      });
  }

  root.addEventListener("click", function (event) {
    var minus = event.target.closest("[data-mt-qty-minus]");
    var plus = event.target.closest("[data-mt-qty-plus]");
    var remove = event.target.closest("[data-mt-remove]");

    if (minus) {
      event.preventDefault();
      var minusLineId = minus.getAttribute("data-mt-qty-minus");
      var minusLine = getLine(minusLineId);
      if (!minusLine) return;

      var newQty = Math.max(0, Number(minusLine.quantity || 0) - 1);

      if (newQty === 0) {
        removeLine(minusLineId).then(render);
      } else {
        updateLine(minusLineId, newQty).then(render);
      }

      return;
    }

    if (plus) {
      event.preventDefault();
      var plusLineId = plus.getAttribute("data-mt-qty-plus");
      var plusLine = getLine(plusLineId);
      if (!plusLine) return;

      updateLine(plusLineId, Number(plusLine.quantity || 0) + 1).then(render);
      return;
    }

    if (remove) {
      event.preventDefault();
      var removeLineId = remove.getAttribute("data-mt-remove");
      removeLine(removeLineId).then(render);
    }
  });

  if (checkoutBtn) {
    checkoutBtn.addEventListener("click", function () {
      if (currentCart && currentCart.checkoutUrl) {
        window.location.href = currentCart.checkoutUrl;
      }
    });
  }

  if (applyDiscountBtn) {
    applyDiscountBtn.addEventListener("click", function () {
      var code = discountInput ? discountInput.value.trim() : "";

      if (!code) {
        if (discountMessage) discountMessage.textContent = "Vul eerst een kortingscode in.";
        return;
      }

      if (discountMessage) discountMessage.textContent = "Code controleren...";

      applyDiscount(code)
        .then(function (cart) {
          render(cart);

          var discounts = cart.discountCodes || [];
          var discount = discounts.find(function (item) {
            return item.code && item.code.toLowerCase() === code.toLowerCase();
          });

          if (discountMessage) {
            discountMessage.textContent = discount && discount.applicable
              ? "Kortingscode toegepast."
              : "Deze kortingscode is niet geldig voor deze winkelmand.";
          }
        })
        .catch(function (error) {
          console.error(error);
          if (discountMessage) discountMessage.textContent = "Kortingscode kon niet worden toegepast.";
        });
    });
  }

  refresh();

  window.mtStorefrontCartPageRefresh = refresh;
})();
</script>/* End custom CSS */