{"version":3,"file":"CartSummaryFloating.a07f7664.js","sources":["../../../../components/cart/CartItem.vue","../../../../components/cart/CartCouponForm.vue","../../../../components/cart/CartSummaryFloating.vue"],"sourcesContent":["<template>\n  <div\n    class=\"cart-item\"\n    @mouseenter=\"$emit('setActiveBike', item)\"\n  >\n    <a\n      v-if=\"productUrl\"\n      :href=\"productUrl\"\n      class=\"title\"\n    >{{ item.product.name }}</a>\n    <img\n      v-if=\"item.configured_variant?.image?.url || item?.product?.image?.url || false\"\n      :alt=\"item.product?.name ?? ''\"\n      :src=\"item.configured_variant?.image?.url || item?.product?.image?.url\"\n      class=\"image\"\n    >\n    <div class=\"price\" v-if=\"item.prices?.regular_price?.value > item.prices?.row_total_including_tax?.value\">\n      <span\n        v-if=\"storeCode\"\n        :class=\"{\n          'old': item.prices?.regular_price?.value\n        }\"\n      >\n        {{ $formatPriceWithCurrency(item.prices?.regular_price?.value, item.prices?.regular_price?.currency, storeCode) }}\n      </span>\n      <span v-if=\"storeCode && (item.prices?.regular_price?.value > item.prices?.row_total_including_tax?.value)\">\n        {{ $formatPriceWithCurrency(item.prices?.row_total_including_tax?.value, item.prices?.row_total_including_tax?.currency, storeCode) }}\n      </span>\n    </div>\n\n    <div class=\"price\" v-if=\"item.prices?.total_item_discount?.value > 0\">\n      <span\n          v-if=\"storeCode\"\n          :class=\"{\n          'old': item.prices.total_item_discount.value\n        }\"\n      >\n        {{ $formatPriceWithCurrency(item.prices?.row_total_including_tax?.value, item.prices?.row_total_including_tax?.currency, storeCode) }}\n      </span>\n      <span v-if=\"storeCode && item.prices?.total_item_discount?.value\">\n        {{ $formatPriceWithCurrency(item.prices?.row_total_including_tax?.value - item.prices?.total_item_discount?.value, item.prices?.row_total_including_tax?.currency, storeCode) }}\n      </span>\n    </div>\n\n    <div class=\"price\" v-if=\"item.prices?.total_item_discount?.value === 0 && item.prices?.regular_price?.value <= item.prices?.row_total_including_tax?.value\">\n      <span v-if=\"storeCode\">\n        {{ $formatPriceWithCurrency(item.prices?.row_total_including_tax?.value, item.prices?.row_total_including_tax?.currency, storeCode) }}\n      </span>\n    </div>\n\n    <div\n      v-if=\"item.configurable_options\"\n      class=\"attributes\"\n    >\n      <div\n        v-for=\"option in item.configurable_options\"\n        :key=\"option.configurable_product_option_uid\"\n        class=\"attribute\"\n      >\n        <span class=\"label\">{{ option.option_label }}</span>\n        <span\n          class=\"value\"\n          v-html=\"$renderSwatchValue(option.value_label)\"\n        />\n      </div>\n    </div>\n    <div class=\"quantity\">\n      <button\n        :disabled=\"item.quantity < 2 || isLoading\"\n        @click=\"updateCartItemQuantity(item, item.quantity - 1)\"\n      >\n        -\n      </button>\n      <span>{{ item.quantity }}</span>\n      <button\n        :disabled=\"isLoading\"\n        @click=\"updateCartItemQuantity(item, item.quantity + 1)\"\n      >\n        +\n      </button>\n    </div>\n    <Icon\n      class=\"remove\"\n      name=\"mdi-light:delete\"\n      @click=\"updateCartItemQuantity(item, 0)\"\n    />\n  </div>\n</template>\n\n<script setup>\n  import { computed, onMounted } from \"vue\";\n  import { useI18n } from \"vue-i18n/dist/vue-i18n.cjs.js\";\n  import updateCartItems from \"../../apollo/queries/updateCartItems.gql\";\n  import removeItemFromCart from \"../../apollo/queries/removeItemFromCart.gql\";\n\n  defineEmits([\"setActiveBike\"]);\n\n  const props = defineProps({\n    item: {\n      type: Object,\n      default: () => {\n      },\n    },\n  });\n\n  const { t } = useI18n();\n  const cart = useCart();\n  const storeCode = useStoreCode();\n  const runtimeConfig = useRuntimeConfig();\n  const isLoading = useState(() => false);\n  const shopBaseUrl = useState('shopBaseUrl', () => null);\n  const productUrl = computed(() => shopBaseUrl.value + '/' + props.item.product?.url_key);\n  const checkoutDisabled = useCheckoutDisabled();\n  const { useRecaptchaMutation } = useRecaptcha();\n  const { $toast, $renderSwatchValue, $formatPriceWithCurrency } = useNuxtApp();\n\n  onMounted(() => {\n    if (runtimeConfig?.public?.SHOP?.BASE_URL && storeCode?.value) {\n      shopBaseUrl.value = runtimeConfig.public.SHOP.BASE_URL.replace('store_code', storeCode.value);\n    }\n  })\n\n  async function updateCartItemQuantity(item, newQuantity) {\n    let input;\n    let mutation;\n\n    if (newQuantity > 0) {\n      mutation = updateCartItems;\n      input = {\n        input: {\n          cart_id: cart.value.id,\n          cart_items: [\n            {\n              cart_item_uid: item.uid,\n              quantity: newQuantity,\n            },\n          ],\n        },\n      };\n    } else {\n      mutation = removeItemFromCart;\n      input = {\n        input: {\n          cart_id: cart.value.id,\n          cart_item_uid: item.uid,\n        }\n      }\n    }\n\n    isLoading.value = true;\n    const { mutate, error } = await useRecaptchaMutation(\n      mutation,\n      input\n    );\n    const productName = item.product.name;\n\n    try {\n      const result = await mutate();\n\n      if (result.data) {\n        isLoading.value = false;\n        checkoutDisabled.value = false;\n\n        if (item.quantity < newQuantity) {\n          $toast.success(t(\"cart.components.item.toast_added\", { product_name: productName, }));\n        } else {\n          $toast.success(t(\"cart.components.item.toast_removed\", { product_name: productName, }));\n        }\n\n        cart.value = result.data?.updateCartItems?.cart || result.data?.removeItemFromCart?.cart || null;\n      }\n    } catch (error) {\n      isLoading.value = false;\n      throw error;\n    }\n\n    if (!cart.value) {\n      isLoading.value = false;\n      return $toast.error(t(\"cart.components.item.toast_error\", { product_name: productName, error_value: error.value }))\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .cart-item {\n    display: grid;\n    align-items: center;\n    padding: 30px;\n    position: relative;\n    margin-bottom: 10px;\n    box-sizing: border-box;\n    background: var(--cart-item-bg, $cart-item-bg);\n    margin-top: var(--cart-item-mobile-image-margin-top);\n    border: 1px solid var(--cart-item-border, $cart-item-border);\n    grid-template-areas: var(--cart-item-grid-template-areas-mobile);\n\n    @include min-screen('medium') {\n      margin: 0 0 20px;\n      margin-right: calc(var(--cart-item-remove-desktop-right) * -1);\n      grid-row-gap: 15px;\n      align-items: center;\n      grid-column-gap: 30px;\n      grid-template-columns: var(--cart-item-grid-template-columns);\n      grid-template-areas: var(--cart-item-grid-template-areas-desktop);\n    }\n\n    &:hover {\n      @include min-screen('medium') {\n        border-color: var(--cart-item-border-hover, $cart-item-border-hover);\n      }\n    }\n\n    img {\n      grid-area: image;\n      object-fit: contain;\n      max-width: var(--cart-item-mobile-image-width, 100%);\n      margin-top: calc(var(--cart-item-mobile-image-margin-top, 0) * -1);\n      margin-bottom: 30px;\n\n      @include min-screen('medium') {\n        margin: 0;\n        max-width: 120px;\n      }\n    }\n\n    a.title {\n      grid-area: title;\n      margin-bottom: 15px;\n      font-size: var(--cart-item-title-font-size, 20px);\n      font-weight: var(--cart-item-title-font-weight-mobile, 400);\n      text-transform: var(--cart-item-title-text-transform, none);\n      font-family: var(--title-font, --primary-font, $default-font);\n      color: var(--black, $black);\n      text-decoration: none;\n\n      &:hover {\n        text-decoration: underline;\n      }\n\n      @include min-screen('medium') {\n        margin-bottom: 0;\n        top: var(--cart-item-title-transform-top, initial);\n        left: var(--cart-item-title-transform-left, initial);\n        font-weight: var(--cart-item-title-font-weight-desktop, 600);\n        position: var(--cart-item-title-transform-position, initial);\n      }\n    }\n\n    .price {\n      grid-area: price;\n      display: flex;\n      flex-wrap: wrap;\n      grid-gap: 3px;\n      font-size: 18px;\n      margin-bottom: 20px;\n      justify-content: var(--cart-item-mobile-price-justify-content, start);\n\n      @include min-screen('medium') {\n        margin-bottom: 0;\n      }\n\n      .old {\n        font-weight: 400;\n        text-decoration: line-through;\n      }\n\n      span {\n        display: block;\n        width: 100%;\n        font-weight: 600;\n        text-align: right;\n      }\n    }\n\n    .attributes {\n      grid-area: attributes;\n      margin-bottom: 30px;\n\n      @include min-screen('medium') {\n        margin-bottom: 0;\n        display: grid;\n        grid-gap: 10px;\n        grid-template-columns: 1fr 1fr;\n      }\n\n      @include min-screen('large') {\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      @include min-screen('xlarge') {\n        grid-template-columns: 1fr 1fr 1fr;\n      }\n\n      .attribute {\n        display: grid;\n        margin-bottom: 10px;\n        grid-template-columns: 1fr 1fr;\n\n        @include min-screen('medium') {\n          grid-template-columns: 1fr;\n        }\n\n        .label {\n          opacity: 0.4;\n          font-weight: 500;\n          color: var(--black, $black);\n\n          @include min-screen('medium') {\n            margin-bottom: 5px;\n          }\n        }\n\n        .value {\n          font-weight: 700;\n          word-break: break-word;\n          color: var(--black, $black);\n        }\n      }\n    }\n\n    .quantity {\n      grid-area: quantity;\n      display: grid;\n      align-items: center;\n      grid-template-columns: 1fr 1fr 1fr;\n      text-align: center;\n      padding: 12px;\n      grid-gap: 10px;\n      min-width: 120px;\n      line-height: 1;\n      font-size: 20px;\n      user-select: none;\n      border: 1px solid var(--medium-grey, $medium-grey);\n\n      button {\n        border: 0;\n        padding: 0;\n        outline: none;\n        cursor: pointer;\n        line-height: 1;\n        font-size: 24px;\n        background: none;\n        color: currentColor;\n        font-weight: normal;\n\n        &[disabled] {\n          cursor: default;\n          opacity: .2;\n        }\n      }\n    }\n\n    .remove {\n      grid-area: remove;\n      top: -10px;\n      right: -10px;\n      opacity: 0.5;\n      color: $black;\n      font-size: 24px;\n      cursor: pointer;\n      margin-left: auto;\n      position: absolute;\n\n      @include min-screen('medium') {\n        top: var(--cart-item-remove-desktop-top, unset);\n        right: var(--cart-item-remove-desktop-right, unset);\n        transform: var(--cart-item-remove-desktop-transform, none);\n        position: var(--cart-item-remove-desktop-position, relative);\n        grid-area: var(--cart-item-remove-desktop-grid-area, remove);\n      }\n\n      &:hover {\n        color: var(--error, $error);\n      }\n    }\n  }\n</style>\n","<template>\n  <div class=\"coupon\">\n    <div\n      v-show=\"!couponsApplied && !showCouponForm\"\n      class=\"coupon__trigger\"\n      @click=\"showCouponForm = !showCouponForm\"\n    >\n      <Icon name=\"material-symbols:add\" />\n      {{ $t('cart.components.coupon_form.coupon_code') }}\n    </div>\n\n    <div\n      v-if=\"!couponsApplied && showCouponForm\"\n      class=\"coupon__form\"\n    >\n      <input\n        v-model=\"couponCode\"\n        :placeholder=\"$t('cart.components.coupon_form.coupon_code')\"\n        type=\"text\"\n        @keyup.enter=\"applyCoupon\"\n      >\n      <div\n        :class=\"{\n          'button--loading': isLoading,\n          'button--disabled': isLoading\n        }\"\n        class=\"button button--small\"\n        @click=\"applyCoupon\"\n      >\n        {{ $t('cart.components.form.buttons.apply_coupon') }}\n      </div>\n      <span\n        class=\"coupon__cancel\"\n        @click=\"showCouponForm = !showCouponForm\"\n      >\n        {{ $t('buttons.cancel') }}\n      </span>\n    </div>\n\n    <div\n      v-if=\"couponsApplied\"\n      class=\"coupon__codes\"\n    >\n      <div\n        v-for=\"coupon in cart.applied_coupons\"\n        :key=\"coupon.code\"\n        class=\"coupon__code\"\n      >\n        {{ $t('cart.components.coupon_form.applied_coupon') }}: <span>{{ coupon.code }}</span>\n        <Icon\n          class=\"coupon__remove\"\n          name=\"material-symbols:close\"\n          @click=\"removeCoupon\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n  import { computed } from \"vue\";\n  import { useI18n } from \"vue-i18n/dist/vue-i18n.cjs.js\";\n  import { useRecaptcha } from \"~/composables/useRecaptcha\";\n  import applyCouponToCart from \"../../apollo/queries/applyCouponToCart.gql\";\n  import removeCouponFromCart from \"../../apollo/queries/removeCouponFromCart.gql\";\n\n  const cart = useCart();\n  const { t } = useI18n();\n  const { $toast } = useNuxtApp();\n  const { useRecaptchaMutation } = useRecaptcha();\n  const couponCode = useState('couponCode', () => '');\n  const isLoading = useState('isLoading', () => false);\n  const showCouponForm = useState('showCouponForm', () => false);\n  const couponsApplied = computed(() => cart.value?.applied_coupons);\n\n  async function applyCoupon() {\n    const applyCouponInput = {\n      input: {\n        cart_id: cart.value.id,\n        coupon_code: couponCode.value\n      }\n    }\n\n    const { mutate, loading } = await useRecaptchaMutation(applyCouponToCart, applyCouponInput);\n    isLoading.value = loading;\n    const applyCouponResult = await mutate();\n\n    if (applyCouponResult.data) {\n      cart.value = applyCouponResult.data.applyCouponToCart.cart;\n      $toast.success(t('cart.components.coupon_form.toast_coupon_code_applied', { coupon_code: couponCode.value }));\n    }\n  }\n\n  async function removeCoupon() {\n    const removeCouponInput = {\n      input: {\n        cart_id: cart.value.id\n      }\n    }\n    const { mutate, loading } = await useRecaptchaMutation(removeCouponFromCart, removeCouponInput);\n    isLoading.value = loading;\n    const removeCouponResult = await mutate();\n\n    if (removeCouponResult.data) {\n      cart.value = removeCouponResult.data.removeCouponFromCart.cart;\n      $toast.success(t('cart.components.coupon_form.toast_coupon_code_removed', { coupon_code: couponCode.value }));\n      showCouponForm.value = false;\n      couponCode.value = '';\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .coupon {\n    font-size: 14px;\n    margin-top: 20px;\n    font-weight: normal;\n    color: var(--dark-grey, $dark-grey);\n\n    &__trigger {\n      cursor: pointer;\n    }\n\n    &__form {\n      width: 100%;\n      gap: 15px;\n      display: grid;\n      align-items: center;\n      grid-template-columns: 1fr 1fr;\n\n      @include min-screen('medium') {\n        display: flex;\n      }\n\n      .button {\n        white-space: nowrap;\n        padding: calc(var(--button-padding-vertical, 10px) * 0.6) 30px;\n      }\n\n      input[type=\"text\"] {\n        grid-column-end: span 2;\n        padding: calc(var(--input-padding-vertical, 10px) * 0.75) calc(var(--input-padding-horizontal, 15px) * 0.75);\n      }\n    }\n\n    &__code {\n      gap: 5px;\n      display: flex;\n      align-items: center;\n      line-height: 1;\n\n      span {\n        color: var(--black, $black);\n        font-size: 14px;\n      }\n    }\n\n    &__remove {\n      cursor: pointer;\n      font-size: 14px;\n      margin-left: 3px;\n      color: var(--error, $error);\n      transform: translateY(-2px);\n    }\n\n    &__cancel {\n      cursor: pointer;\n      margin: 0 0 0 auto;\n    }\n  }\n</style>\n","<template>\n  <section\n    v-if=\"cart.items\"\n    :class=\"{\n      'open': summaryOpen\n    }\"\n    class=\"cart-summary-floating\"\n  >\n    <div class=\"cart-summary-floating__wrapper\">\n      <div\n        class=\"toggle\"\n        @click.stop=\"summaryOpen = !summaryOpen\"\n      />\n      <div\n        class=\"close\"\n        @click.stop=\"summaryOpen = !summaryOpen\"\n      >\n        <Icon name=\"material-symbols:close\" />\n      </div>\n\n      <div class=\"items\">\n      <CartItem\n        v-for=\"item in cart?.items\"\n        :key=\"item.uid\"\n        :item=\"item\"\n      />\n    </div>\n\n      <div class=\"overview\">\n        <div class=\"overview__wrapper\">\n          <div class=\"overview__title\">\n            {{ $t('cart.components.summary.order_overview') }}\n          </div>\n          <div\n            v-if=\"cart.prices.applied_taxes.length\"\n            class=\"overview__tax--mobile\"\n          >\n            <span>{{ $t('cart.components.summary.including_tax') }}</span>\n            <strong>{{ $formatPriceWithCurrency(cart.prices.applied_taxes[0].amount.value, cart.prices.applied_taxes[0].amount.currency, storeCode) }}</strong>\n          </div>\n          <div\n            v-if=\"cart.prices\"\n            class=\"overview__tax--mobile\"\n          >\n            <span>{{ $t('cart.components.summary.order_total') }}</span>\n            <strong>{{ $formatPriceWithCurrency(cart.prices.grand_total.value, cart.prices.grand_total.currency, storeCode) }}</strong>\n          </div>\n\n          <CartCouponForm />\n        </div>\n\n        <div class=\"overview__tax--desktop\">\n          <div v-if=\"couponsApplied\">\n            <span>{{ $t('cart.components.summary.discount_from_coupon') }}</span>\n            <strong>-&nbsp;{{ $formatPriceWithCurrency(cart.prices.discounts[0].amount.value, cart.prices.discounts[0].amount.currency, storeCode) }}</strong>\n          </div>\n\n          <div v-if=\"cart.prices.applied_taxes.length\">\n            <span>{{ $t('cart.components.summary.including_tax') }}</span>\n            <strong>{{ $formatPriceWithCurrency(cart.prices.applied_taxes[0].amount.value, cart.prices.applied_taxes[0].amount.currency, storeCode) }}</strong>\n          </div>\n          <div\n            v-if=\"cart.prices\"\n            class=\"overview__price\"\n          >\n            <span>{{ $t('cart.components.summary.order_total') }}</span>\n            <strong>{{ $formatPriceWithCurrency(cart.prices.grand_total.value, cart.prices.grand_total.currency, storeCode) }}</strong>\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"showCheckoutButton\"\n        :class=\"{\n          'button--disabled': checkoutDisabled,\n        }\"\n        class=\"button\"\n        @click=\"toCheckout\"\n      >\n        {{ $t('cart.components.form.buttons.checkout') }}\n      </div>\n    </div>\n  </section>\n</template>\n\n<script setup>\n  import { computed } from \"vue\";\n\n  const cart = useCart();\n  const route = useRouter();\n  const storeCode = useStoreCode();\n  const checkoutDisabled = useCheckoutDisabled();\n  const summaryOpen = useState('summaryOpen', () => false);\n  const showCheckoutButton = useState('showCheckoutButton', () => false);\n  const couponsApplied = computed(() => cart.value?.applied_coupons);\n  const { $formatPriceWithCurrency } = useNuxtApp();\n\n  route.isReady().then(() => showCheckoutButton.value = ['init', 'cart'].includes(route.currentRoute.value.name));\n\n  function toCheckout() {\n    navigateTo('/customer');\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  $filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.125));\n\n  .cart-summary-floating {\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: auto;\n    z-index: 1;\n    position: fixed;\n    filter: $filter;\n\n    @include min-screen('medium') {\n      left: 60px;\n      right: 60px;\n      bottom: 30px;\n    }\n\n    &.open {\n      top: 0;\n      filter: none;\n      overflow-y: scroll;\n      background: var(--body-bg-alt, $cart-item-bg);\n      padding-top: var(--cart-summary-floating-padding-top, 60px);\n\n      @include min-screen('medium') {\n        top: unset;\n        filter: $filter;\n        background: unset;\n        overflow-y: unset;\n        padding-top: unset;\n      }\n\n      .items {\n        display: block;\n        margin-bottom: 60px;\n\n        @include min-screen('medium') {\n          display: none;\n        }\n      }\n\n      .toggle {\n        display: none;\n      }\n\n      .close {\n        display: block;\n\n        @include min-screen('medium') {\n          display: none;\n        }\n      }\n\n      .cart-summary-floating__wrapper {\n        background: transparent;\n      }\n    }\n\n    &__wrapper {\n      padding: 0 25px 25px;\n      background: var(--white, $white);\n\n      @include min-screen('medium') {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        grid-column-gap: 60px;\n        padding: 30px 60px 30px 50px;\n        clip-path: polygon(0 0, 100% 0%, calc(100% - var(--cart-summary-floating-clip-path)) 100%, 0% 100%);\n      }\n    }\n\n    .toggle {\n      height: 30px;\n      cursor: pointer;\n      position: relative;\n\n      @include min-screen('medium') {\n        display: none;\n      }\n\n      &::before {\n        content: '';\n        top: 10px;\n        left: 50%;\n        width: 50px;\n        height: 3px;\n        position: absolute;\n        transform: translateX(-50%);\n        transition: transform 150ms ease;\n        background: var(--medium-grey, $medium-grey);\n      }\n\n      &:hover {\n        &::before {\n          transform: translate(-50%, -2px);\n        }\n      }\n    }\n\n    .close {\n      display: none;\n      right: 25px;\n      font-size: 22px;\n      cursor: pointer;\n      position: absolute;\n      top: var(--cart-summary-close-top, 75px);\n    }\n\n    .items {\n      display: none;\n\n      @include min-screen('medium') {\n        display: none;\n      }\n    }\n\n    .overview {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      grid-column-gap: 50px;\n      justify-content: space-between;\n      flex-wrap: wrap;\n      grid-row-gap: 20px;\n\n      @include min-screen('medium') {\n        margin: 0;\n        grid-column-gap: 100px;\n      }\n\n      &__wrapper {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n\n        @include min-screen('medium') {\n          width: auto;\n          display: block;\n        }\n      }\n\n      &__title {\n        margin: 0 0 10px;\n        font-size: 1rem;\n        font-weight: var(--cart-summary-floating-font-weight, 600);\n        text-transform: var(--cart-summary-floating-text-transform, none);\n\n        @include min-screen('medium') {\n          font-size: 1.25rem;\n        }\n      }\n\n      &__tax {\n        &--mobile {\n          display: grid;\n          grid-template-columns: 150px 1fr;\n          align-items: center;\n          gap: 10px;\n          margin-top: 5px;\n          font-size: 14px;\n          font-weight: normal;\n          text-transform: none;\n          color: var(--dark-grey, $dark-grey);\n\n          @include min-screen('medium') {\n            display: none;\n            font-size: 14px;\n          }\n\n          strong {\n            color: var(--black, $black);\n          }\n        }\n\n        &--desktop {\n          display: none;\n          margin-left: auto;\n\n          @include min-screen('medium') {\n            display: flex;\n            align-items: center;\n            grid-column-gap: 60px;\n          }\n\n          span {\n            display: block;\n            margin-bottom: 10px;\n            color: var(--dark-grey, $dark-grey);\n          }\n        }\n      }\n\n      &__price {\n        strong {\n          font-size: 1.5rem;\n        }\n      }\n    }\n\n    .button {\n      width: 100%;\n      margin-top: 20px;\n\n      @include min-screen('medium') {\n        margin-top: 0;\n        width: auto;\n        min-width: 250px;\n      }\n    }\n  }\n</style>\n"],"names":["t","useI18n","cart","useCart","storeCode","useStoreCode","runtimeConfig","useRuntimeConfig","isLoading","useState","shopBaseUrl","productUrl","computed","_a","props","checkoutDisabled","useCheckoutDisabled","useRecaptchaMutation","useRecaptcha","$toast","$renderSwatchValue","$formatPriceWithCurrency","useNuxtApp","onMounted","_b","updateCartItemQuantity","item","newQuantity","input","mutation","updateCartItems","removeItemFromCart","mutate","error","productName","result","_d","_c","couponCode","showCouponForm","couponsApplied","applyCoupon","applyCouponInput","loading","applyCouponToCart","applyCouponResult","removeCoupon","removeCouponInput","removeCouponFromCart","removeCouponResult","route","useRouter","summaryOpen","showCheckoutButton","toCheckout","navigateTo"],"mappings":"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"}