{"cart-drawer":"<div id=\"shopify-section-cart-drawer\" class=\"shopify-section\"><div id=\"ajax-loading-cart\">\n  \n<style data-shopify>\n.text-removed-discount {\n        font-size: 1.0125rem;\n      }\n      @media(min-width: 768px) {\n        .text-removed-discount {\n          font-size: 1.125rem;\n        }\n      }\n    \n    .children-container {\n      font-size: 90%;\n    }\n    .children-container .child-item:not(:last-child)::before {\n      content: var(--tw-content);\n      position: absolute;\n      top: 0;\n      \n        left: 7px;\n        border-left-width: 1px;\n      \n      height: 100%;\n    }\n    .parent-item::before {\n      content: var(--tw-content);\n      position: absolute;\n      top: 4px;\n      \n        left: 8px;\n        border-left-width: 1px;\n      \n      height: calc(100% + 1px);\n      transform-origin: 0 100%;\n      transition: transform .3s;\n      transform: scaleY(1);\n    }\n    .parent-item.hide-before::before {\n      transform: scaleY(0);\n    }\n    .children-container .child-item-image::before {\n      content: var(--tw-content);\n      position: absolute;\n      top: -12px;\n      border-bottom-width: 1px;\n      \n        left: -21px;\n        border-left-width: 1px;\n        border-bottom-left-radius: 10px;\n      \n      height: calc(50% + 12px);\n      width: 28px;\n    }\n    @media (min-width: 1024px) {\n      .children-container .child-item-image::before {\n        width: 48px;\n        \n          left: -41px;\n        \n      }\n    }\n    .children-container .text-small {\n      font-size: calc(var(--font-size-small-mobile) * 0.9);\n    }\n    .children-container .text-normal {\n      font-size: calc(var(--font-size-normal-mobile) * 0.9);\n    }\n    @media (min-width: 1024px) {\n      .children-container .text-small {\n        font-size: calc(var(--font-size-small) * 0.9);\n      }\n      .children-container .text-normal {\n        font-size: calc(var(--font-size-normal) * 0.9);\n      }\n    }\n  </style>\n<div\n  id=\"CartDrawer\"\n  class=\"drawer text-[rgb(var(--colors-text))] pointer-events-auto\"\n  x-data=\"xCart\"\n  x-init=\"$store.xMiniCart.type = 'drawer'; updateEstimateShippingAll($el);\"\n  x-show=\"$store.xMiniCart.open\"@keydown.escape=\"setTimeout(() => { $store.xModal.removeFocus(); $store.xMiniCart.hideCart(); }, 0)\"\n  x-cloak\n   \n>\n  <div \n     \n    class=\"drawer fixed z-20 md:z-20 typeDrawer md:fixed left-0 top-0 w-full h-full md:flex md:justify-end right-0 animate-goleft duration-300\"\n  >\n    <div id=\"CartDrawer-Overlay\" class=\"bg-black opacity-40 block md:block fixed top-0 right-0 bottom-0 left-0\" @click=\"$store.xMiniCart.hideCart()\"></div><div\n      id=\"update-cart\" \n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Your cart\"\n      tabindex=\"-1\"\n      class=\"z-30 overflow-hidden flex flex-col fixed bottom-0 left-0 h-full max-h-screen md:max-h-[100vh] w-full bg-[rgba(var(--background-color),1)] md:w-96 md:h-full md:z-auto md:relative lg:w-[32rem] md:left-auto\"\n      x-show=\"$store.xMiniCart.open\" \n      x-data=\"{ show: false, productCount: 0 }\"\n      x-intersect.full=\"$store.xModal.focus('CartDrawer', 'CloseCart'); $store.xCartAnalytics.viewCart();\"\n      \n      x-transition:enter=\"transition-all ease-in-out duration-500\"\n      x-transition:enter-start=\"opacity-0 transform translate-y-1/3 md:translate-y-0 md:translate-x-1/3\"\n      x-transition:enter-end=\"opacity-100 transform translate-y-0 md:translate-x-0\"\n      x-transition:leave=\"transition ease-in-out duration-500\"\n      x-transition:leave-end=\"opacity-0 transform translate-y-1/3 md:translate-y-0 md:translate-x-1/3\"\n    >\n      <div id=\"loading-cart-cart-drawer\" class=\"absolute top-0 bottom-0 h-full w-full\" x-show=\"$store.xMiniCart.loading\">\n        <div class=\"absolute top-0 right-0 w-full h-full opacity-20\"></div>\n        <div class=\"loading-cover\">\n          <span class=\"loading-bar absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"></span>\n        </div>\n      </div>\n      <div class=\"x-cart-heading pl-4 pt-1 pb-1 md:pl-9 md:pt-2 md:pb-2 pr-2 flex justify-between items-center\">\n        <div class=\"relative flex gap-1 items-center z-0\">\n          <p class=\"h3\">Your cart</p></div>\n        <button \n          id=\"CloseCart\"\n          aria-label=\"Close cart\"\n          class=\"cursor-pointer group-close-btn rounded-full icon-close-container w-fit\"\n          @click=\"setTimeout(() => { $store.xModal.removeFocus(); $store.xMiniCart.hideCart(); }, 0)\" \n        >\n          \n    <svg class=\"icon-close-animation\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M1 1L23 23M23 1L1 23\" stroke=\"currentColor\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n\n        </button>\n      </div>\n      <div class=\"border-t flex-1 overflow-auto scrollbar-body grow lg:pr-9 rtl:lg:pr-0 rtl:lg:pl-9 pb-4\" :class=\"$store.xMiniCart.loading ? 'opacity-0': 'opacity-1'\">\n        <div class=\"flex flex-col h-full relative justify-between\"><div \n              class=\"pl-6 pr-6 flex flex-col justify-center text-center pt-14 pb-14 md:h-screen\"\n              \n            >\n              <h3 class=\"mb-3 h3\">Your cart is empty</h3>\n              <div class=\"rte mb-6\"><p>Not sure where to start?<br/>Try these collections:</p></div>\n              \n                <div class=\"pt-6 pb-6 pl-12 pr-12 text-center\">\n                  \n                  <a\n                    href=\"/collections/all\"\n                    class=\"button pt-2.5 pb-2.5 pl-7 pr-7 md:pl-9 md:pr-9 md:pt-3 md:pb-3 button-outline text-center inline-block border leading-normal\"\n                  >\n                    \n<div class=\"flex\">\n  \n    \n      \n        <span class=\"button-text  is-focus-button:opacity-0\">Continue shopping</span>\n      \n    \n  \n  \n</div>\n                  </a>\n                </div>\n              \n<p class=\"mt-16 mb-2\">Have an account?</p>\n                <p class=\"mt-3\"><a href=\"https://tastenewmexico.com/customer_authentication/redirect?locale=en&region_country=US\" class=\"nav-link relative effect-inline\">Log in</a> to check out faster.</p></div></div>\n      </div>\n\n      \n<div \n          x-data=\"{ cart_note: '' }\"\n        >\n          <div x-show=\"$store.xCartHelper.openField == 'note'\" x-cloak class=\"absolute z-20 top-0 left-0 w-full h-full bg-black bg-opacity-20\"></div>\n          <div class=\"absolute bottom-0 left-0 w-full z-20 pt-5 pr-5 pl-5 lg:pl-7 lg:pr-7 pb-7 bg-[rgba(var(--colors-background),1)]\" \n            :class=\"show && 'lg:w-[56.15%]'\" \n            x-show=\"$store.xCartHelper.openField == 'note'\" x-cloak\n            @click.away=\"$store.xCartHelper.openField = false\"\n            x-transition:enter=\"transition-all ease-in-out duration-300\"\n            x-transition:enter-start=\"transform translate-y-full\"\n            x-transition:enter-end=\"transform translate-y-0\"\n            x-transition:leave=\"transition-all ease-in-out duration-300\"\n            x-transition:leave-end=\"transform translate-y-full\">\n            <div class=\"w-full flex items-center justify-between mb-5\">\n              <p class=\"text-medium h6\">Order note</p>\n              <span\n                class=\"cursor-pointer absolute top-2 right-2 icon-close-container inline-block group-close-btn rounded-full\"\n                @click=\"$store.xCartHelper.openField = false\"\n              >\n                \n    <svg class=\"icon-close-animation\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M1 1L23 23M23 1L1 23\" stroke=\"currentColor\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n\n              </span>\n            </div>\n            <div class=\"w-full flex items-center justify-between mb-2\">\n              <p class=\"text-[12px] lg:text-[14px] font-medium\">Order special instructions</p>\n            </div>\n            <textarea\n              id=\"x-cart-note\"\n              aria-label=\"Cart note\"\n              x-model=\"cart_note\"\n              rows=\"4\" \n              cols=\"50\" \n              class=\"w-full pl-4 pr-4 pt-4 pb-4 border border-solid bg-[rgba(var(--background-color),1)] focus-within:outline-none placeholder:text-current placeholder:opacity-60\"\n              placeholder=\"Order special instructions\"\n            ></textarea>\n            <div class=\"flex mt-5\">\n              <button\n                class=\"button button-solid leading-normal ml-1 w-full justify-center pt-2.5 pb-2.5 md:pt-3 md:pb-3 cursor-pointer\" \n                @click=\"$store.xCartHelper.openField = false; $store.xCartHelper.updateCart({ note: cart_note})\"\n              >\n                \n                <span class=\"flex items-center justify-center\">\n                  \n<div class=\"flex\">\n  \n    \n      \n        <span class=\"button-text  is-focus-button:opacity-0\">Save</span>\n      \n    \n  \n  \n</div>\n                </span>\n              </button>\n            </div>\n          </div>\n        </div>\n<div x-data=\"xCouponCode([])\">\n          <div x-show=\"$store.xCartHelper.openField == 'discount_field'\" x-cloak class=\"absolute z-20 top-0 left-0 w-full h-full bg-black bg-opacity-20\"></div>\n          <div class=\"absolute bottom-0 left-0 w-full z-20 pt-5 pr-5 pl-5 lg:pl-7 lg:pr-7 pb-7 bg-[rgba(var(--colors-background),1)]\" \n            :class=\"show && 'lg:w-[56.15%]'\" \n            x-data =\"{ discount_field: '' }\"\n            x-show=\"$store.xCartHelper.openField == 'discount_field'\" x-cloak\n            @click.away=\"$store.xCartHelper.openField = false\"\n            x-transition:enter=\"transition-all ease-in-out duration-300\"\n            x-transition:enter-start=\"transform translate-y-full\"\n            x-transition:enter-end=\"transform translate-y-0\"\n            x-transition:leave=\"transition-all ease-in-out duration-300\"\n            x-transition:leave-end=\"transform translate-y-full\"\n          >\n            <div class=\"w-full flex items-center justify-between mb-5\">\n              <p class=\"text-medium h6\">Discount</p>\n              <span\n                class=\"cursor-pointer absolute top-2 right-2 icon-close-container inline-block group-close-btn rounded-full\"\n                @click=\"$store.xCartHelper.openField = false\"\n              >\n                \n    <svg class=\"icon-close-animation\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M1 1L23 23M23 1L1 23\" stroke=\"currentColor\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n\n              </span>\n            </div>\n            <div\n              class=\"bg-[rgba(var(--background-color),1)] w-full z-20 pr-[1px] pl-[1px]\"\n              x-show=\"$store.xCartHelper.openField == 'discount_field'\"\n              @keydown.escape.stop=\"$store.xCartHelper.openField = false\"\n            >\n              <div \n                :class=\"($store.xCouponCodeDetail.discountFaild || $store.xCouponCodeDetail.freeShippingApplied) && 'border-[rgba(var(--color-error))]'\"\n                class=\"flex pt-1 pb-1 pl-1 pr-1 border border-solid rounded-[var(--border-radius)]\">\n                <div class=\"grow\">\n                  <label class=\"hidden\" for=\"x-cart-discount-field\">Discount code</label>\n                  <input\n                    id=\"x-cart-discount-field\"\n                    x-model=\"discount_field\"\n                    type=\"text\"\n                    class=\"w-full pl-5 pr-5 pt-2.5 pb-2.5 focus:outline-none focus-within:outline-none focus:border-0 bg-transparent placeholder:text-current placeholder:opacity-60\"\n                    placeholder=\"Please enter discount code\"\n                    x-on:change=\"onChange()\"\n                    @keyup.enter=\"applyDiscountToCart()\"\n                  />\n                </div>\n                <button @click=\"applyDiscountToCart()\"\n                  :class=\"discount_field == '' && 'opacity-70 hover:cursor-not-allowed'\"\n                  class=\"button button-solid p-break-words border inline-block empty:hidden pl-4 pr-4 lg:pl-6 lg:pr-6 pt-2 pb-2 leading-normal cursor-pointer pointer-events-auto\"\n                >\n                  <span :class=\"{ 'lg:block opacity-0 is-focus-button' : loading }\">\n                    <span class=\"flex items-center justify-center\">\n                      \n                      \n<div class=\"flex\">\n  \n    \n      \n        <span class=\"button-text  is-focus-button:opacity-0\">Apply</span>\n      \n    \n  \n  \n</div>\n                    </span>\n                  </span>\n                  <div class=\"lg:inline-block w-4 h-4 md:w-5 md:h-5 absolute top-[calc(50%-8px)] left-[calc(50%-8px)] md:top-[calc(50%-10px)] md:left-[calc(50%-10px)]\" x-show=\"loading\" x-cloak>\n                    <svg class=\"animate-spin\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path transform=\"translate(0 512) scale(0.1 -0.1)\" fill=\"currentColor\" d=\"M2474 4676 c-43 -19 -101 -81 -115 -123 -18 -56 -7 -145 24 -190 52 -75 79 -85 262 -99 90 -7 207 -22 260 -33 436 -92 824 -352 1070 -721 521 -781 321 -1824 -453 -2358 -501 -345 -1172 -393 -1715 -121 -700 350 -1075 1118 -917 1876 37 180 86 305 209 536 51 96 54 147 15 226 -37 73 -86 104 -174 109 -105 6 -151 -24 -224 -145 -137 -230 -241 -543 -276 -833 -13 -110 -13 -355 1 -478 52 -475 268 -922 614 -1267 351 -352 787 -560 1284 -615 171 -19 442 -8 615 24 423 80 802 282 1111 591 407 407 625 931 625 1505 0 574 -218 1098 -625 1505 -296 296 -654 493 -1055 579 -210 45 -470 61 -536 32z\"/>\n  </svg>\n\n                  </div>\n                </button>\n              </div>\n              <p x-show=\"$store.xCouponCodeDetail.discountFaild\" x-cloak class=\"text-[rgba(var(--color-error))] mt-2\">Discount invalid. Please make sure the discount details are correct.</p>\n              <p x-show=\"$store.xCouponCodeDetail.freeShippingApplied\" x-cloak class=\"text-[rgba(var(--color-error))] mt-2\">Free shipping code should be applied later on Checkout page.</p>\n              <p x-show=\"$store.xCouponCodeDetail.discountApplied\" x-cloak class=\"text-[rgba(var(--color-success))] mt-2\">Discount code is already applied.</p>\n              <p x-show=\"$store.xCouponCodeDetail.discountCorrect\" x-cloak class=\"text-[rgba(var(--color-success))] mt-2\">Discount applied!</p>\n            </div></div>\n          <div x-cloak x-data=\"{timer: 5, countdown: ''}\" x-show=\"$store.xCouponCodeDetail.removedDiscountCode\" class=\"flex gap-3 absolute top-14 pl-5 pr-6.5 w-full z-20 pt-1 pb-1\" x-intersect=\n            \"\n              $el.querySelector('.button-text.text-timer').innerText = `Undo (${timer})`;\n              countdown = setInterval(() => {\n                timer--;\n                $el.querySelector('.button-text.text-timer').innerText = `Undo (${timer})`;\n\n                if (timer === 0) {\n                  $store.xCouponCodeDetail.removedDiscountCode = '';\n                  timer = 5;\n                  clearInterval(countdown);\n                }\n              }, 1000);\n            \" \n          >\n            <div class=\"text-[rgba(var(--background-color))] bg-[rgba(var(--colors-heading))] w-full pt-1 pb-1 pl-3 pr-2 flex justify-between gap-3 rounded-[var(--border-radius)] z-50\">\n              <div class=\"grow self-center text-removed-discount\">\n                Discount code has been removed.\n              </div>\n              <div class=\"flex gap-0.5\">\n                <button \n                  aria-label=\"Undo discount\"\n                  @click=\"undoRemoveDiscount(); clearInterval(countdown)\"\n                  @click.stop=\"$store.xCartHelper.openField == 'discount_field' && ($store.xCartHelper.openField = 'discount_field')\"\n                  class=\"whitespace-nowrap grow bg-transparent min-w-[100px] inline-block empty:hidden pl-4 pr-4 pt-2.5 pb-2.5 leading-normal cursor-pointer pointer-events-auto\"\n                >\n                  <span :class=\"{ 'lg:block opacity-0 is-focus-button invisible' : loading }\">\n                    <span class=\"flex items-center justify-center\">\n                      <span class=\"button-text text-[rgba(var(--background-color))] underline text-timer\"></span>\n                    </span>\n                  </span>\n                </button>\n                <div class=\"h-8 w-8 min-h-8 min-w-8 pt-2 pb-2 pl-2 pr-2 cursor-pointer self-center\" x-show=\"loading\" x-cloak>\n                  <svg class=\"animate-spin\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path transform=\"translate(0 512) scale(0.1 -0.1)\" fill=\"currentColor\" d=\"M2474 4676 c-43 -19 -101 -81 -115 -123 -18 -56 -7 -145 24 -190 52 -75 79 -85 262 -99 90 -7 207 -22 260 -33 436 -92 824 -352 1070 -721 521 -781 321 -1824 -453 -2358 -501 -345 -1172 -393 -1715 -121 -700 350 -1075 1118 -917 1876 37 180 86 305 209 536 51 96 54 147 15 226 -37 73 -86 104 -174 109 -105 6 -151 -24 -224 -145 -137 -230 -241 -543 -276 -833 -13 -110 -13 -355 1 -478 52 -475 268 -922 614 -1267 351 -352 787 -560 1284 -615 171 -19 442 -8 615 24 423 80 802 282 1111 591 407 407 625 931 625 1505 0 574 -218 1098 -625 1505 -296 296 -654 493 -1055 579 -210 45 -470 61 -536 32z\"/>\n  </svg>\n\n                </div>\n                <div class=\"h-8 w-8 min-h-8 min-w-8 pt-2 pb-2 pl-2 pr-2 cursor-pointer self-center\" x-show=\"!loading\" x-cloak @click=\"$store.xCouponCodeDetail.clearRemovedDiscount()\">\n                  \n    <svg class=\"\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M1 1L23 23M23 1L1 23\" stroke=\"currentColor\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      \n        <div class=\"estimate-shipping-popup\">\n          <div x-show=\"$store.xPopupShipping.open\" x-cloak class=\"absolute z-20 top-0 left-0 w-full h-full bg-black bg-opacity-20\"></div>\n          <div class=\"scrollbar-body scrollbar-visible overflow-y-auto max-h-full absolute bottom-0 left-0 rtl:left-auto rtl:right-0 w-full z-20 pt-5 pr-5 pl-5 lg:pl-7 lg:pr-7 pb-7 bg-[rgba(var(--colors-background),1)]\" \n            :class=\"show && 'lg:w-[56.15%]'\"            \n            x-show=\"$store.xPopupShipping.open\" x-cloak\n            @click.away=\"$store.xPopupShipping.open = false\"\n            x-transition:enter=\"transition-all ease-in-out duration-500\"\n            x-transition:enter-start=\"transform translate-y-full\"\n            x-transition:enter-end=\"transform translate-y-0\"\n            x-transition:leave=\"transition-all ease-in-out duration-500\"\n            x-transition:leave-end=\"transform translate-y-full\">\n            \n            \n          </div>\n        </div>\n      \n      \n\n\n\n      \n    </div></div>\n</div>\n\n</div></div>"}