{"version":3,"file":"D4j513xt.js","sources":["../../../../types/products.ts","../../../../utils/defineLayoutOfProduct.ts","../../../../components/Product/ProductItem/ProductContent/MainDesktopColories.vue","../../../../components/Product/ProductItem/ProductContent/ProductButton.vue","../../../../components/Product/ProductItem/ProductContent/ProductButtonPage.vue","../../../../components/Product/ProductItem/ProductContent/ProductCalories.vue","../../../../components/Product/ProductItem/ProductContent/ProductModifications.vue","../../../../components/Product/ProductItem/ProductContent/ProductContent.vue","../../../../components/Product/ProductItem/ProductImage/ProductImage.vue","../../../../components/Product/ProductItem/ProductTags/ProductTag.vue","../../../../components/Product/ProductItem/ProductTags/ProductTags.vue","../../../../components/Product/ProductItem/ProductItem.vue","../../../../pages/product/[product]/index.vue"],"sourcesContent":["export enum NAME_PARENT_COMPONENT {\n  MAIN_DESKTOP = 'mainDesktop',\n  MAIN_MOBILE = 'mainMobile',\n  DIALOG = 'dialog',\n  PAGE = 'page',\n}\n\nexport enum TagSize {\n  'NORMAL' = 'NORMAL',\n  'LARGE' = 'LARGE',\n  'SMALL' = 'SMALL',\n}\n","import { NAME_PARENT_COMPONENT } from '@/types/products'\n\n/**\n * Определение наименования шаблона для карточки товара\n * @param pageName - наименование страницы\n */\nexport const defineLayoutOfProduct = (pageName: string) => {\n  return <Type>(propValue: Type | undefined): undefined | Type => {\n    if (NAME_PARENT_COMPONENT.PAGE !== pageName) {\n      return\n    }\n\n    return propValue\n  }\n}\n","<script setup lang=\"ts\">\nimport { NutritionalValues } from '@/types/api/api-v3/product'\n\ntype Props = {\n  nutritionalValue: NutritionalValues\n}\n\nconst props = defineProps<Props>()\n\nconst isTooltipShow = ref(false)\n</script>\n\n<template>\n  <div class=\"product__tooltip\">\n    <div\n      class=\"product__tooltip-trigger\"\n      @mouseover=\"isTooltipShow = !isTooltipShow\"\n      @mouseout=\"isTooltipShow = !isTooltipShow\"\n    >\n      <div>КБЖУ</div>\n    </div>\n    <div\n      v-if=\"isTooltipShow\"\n      class=\"product__tooltip-content product__calories\"\n    >\n      <h4 class=\"product__calories-headline\">Пищевая ценность на 100 г</h4>\n      <table class=\"product__calories-table\">\n        <tbody>\n          <tr>\n            <td>{{ props.nutritionalValue.protein }}</td>\n            <td>{{ props.nutritionalValue.fat }}</td>\n            <td>{{ props.nutritionalValue.carbohydrate }}</td>\n            <td>{{ props.nutritionalValue.calorific }}</td>\n          </tr>\n          <tr>\n            <th>белки</th>\n            <th>жиры</th>\n            <th>углеводы</th>\n            <th>Ккал</th>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product__tooltip {\n  position: relative;\n\n  &-trigger {\n    padding: 3px 5px;\n    font-size: 9px;\n    font-weight: 800;\n    color: var(--ui-unactive-gray);\n    text-transform: uppercase;\n    cursor: pointer;\n    background-color: var(--ui-grey);\n    border-radius: 6px;\n\n    &:hover {\n      color: var(--ui-text-primary);\n      background-color: $carousel-dot-background;\n    }\n  }\n\n  &-content {\n    position: absolute;\n    bottom: 120%;\n    left: -130%;\n    z-index: 9;\n    padding: 22px 15px;\n    background-color: #000;\n    border-radius: 20px;\n  }\n\n  .product__calories {\n    &-headline {\n      margin-bottom: 5px;\n      font-size: 12px;\n      font-weight: 800;\n      color: var(--ui-white);\n      text-align: center;\n    }\n\n    &-table {\n      font-size: 12px;\n      color: var(--ui-white);\n      border-spacing: 10px 0;\n\n      tr {\n        td {\n          height: max-content;\n          font-size: 12px;\n          font-weight: 800;\n        }\n\n        th {\n          font-size: 12px;\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\ndefineProps({\n  productQuantity: {\n    type: Number,\n    required: true,\n  },\n  disabled: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n})\n\nconst emit = defineEmits([\n  'updateProductQuantity',\n  'addToCart',\n  'setIncreaseProduct',\n  'setDecreaseProduct',\n])\n\nconst { isMobileOrTablet } = useDevice()\n\nonMounted(() => {\n  emit('updateProductQuantity')\n})\n\nconst addToCart = () => {\n  emit('addToCart')\n}\n\nconst setIncreaseProduct = () => {\n  emit('setIncreaseProduct')\n}\n\nconst setDecreaseProduct = () => {\n  emit('setDecreaseProduct')\n}\n</script>\n\n<template>\n  <div class=\"product-button\">\n    <the-button\n      v-if=\"!productQuantity\"\n      class=\"product-button__action\"\n      :size=\"isMobileOrTablet ? 'xs' : 'sm'\"\n      font=\"sm\"\n      radius=\"lg\"\n      :disabled=\"disabled\"\n      @click=\"addToCart\"\n    >\n      Хочу!\n    </the-button>\n\n    <the-counter\n      v-else\n      class=\"product-button__counter\"\n      :value=\"productQuantity\"\n      @on-increase=\"setIncreaseProduct\"\n      @on-decrease=\"setDecreaseProduct\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-button {\n  &__action {\n    width: 108px;\n\n    @include media('<=tablet') {\n      width: 80px;\n    }\n  }\n\n  &__counter {\n    @include media('<=tablet') {\n      min-width: 80px !important;\n\n      :deep(.app-button) {\n        min-width: 30px !important;\n        min-height: 30px !important;\n      }\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\ntype Props = {\n  productQuantity: number\n  disabled?: boolean\n}\ndefineProps<Props>()\n\nconst emit = defineEmits([\n  'updateProductQuantity',\n  'addToCart',\n  'setIncreaseProduct',\n  'setDecreaseProduct',\n])\n\nconst { isDesktop } = useDevice()\n\nonMounted(() => {\n  emit('updateProductQuantity')\n})\n\nconst addToCart = () => emit('addToCart')\n\nconst setIncreaseProduct = () => emit('setIncreaseProduct')\n\nconst setDecreaseProduct = () => emit('setDecreaseProduct')\n\nconst sizeButton = computed(() => (!isDesktop ? 'sm' : 'md'))\nconst fontButton = computed(() => (!isDesktop ? 'sm' : 'lg'))\n</script>\n\n<template>\n  <div class=\"action\">\n    <the-button\n      v-if=\"!productQuantity\"\n      class=\"action__button\"\n      :disabled=\"disabled\"\n      :size=\"sizeButton\"\n      :font=\"fontButton\"\n      radius=\"lg\"\n      @click=\"addToCart\"\n    >\n      Хочу!\n    </the-button>\n    <the-counter\n      v-else\n      class=\"action__counter\"\n      :value=\"productQuantity\"\n      :size=\"sizeButton\"\n      @on-increase=\"setIncreaseProduct\"\n      @on-decrease=\"setDecreaseProduct\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.action__button {\n  width: 160px;\n\n  @include media('<=desktop-mini') {\n    width: 108px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { PropType } from 'vue'\n\n/* Types */\nimport { NutritionalValues } from '@/types/api/api-v3/product'\n\nconst props = defineProps({\n  nutritionalValue: {\n    type: Object as PropType<NutritionalValues>,\n    required: true,\n  },\n  isProductPage: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n})\n</script>\n\n<template>\n  <div class=\"product__content-calories\">\n    <table>\n      <tbody>\n        <tr :class=\"{ 'large--font': props.isProductPage }\">\n          <th>КБЖУ</th>\n          <th>{{ `${props.nutritionalValue.protein} г` }}</th>\n          <th>{{ `${props.nutritionalValue.fat} г` }}</th>\n          <th>{{ `${props.nutritionalValue.carbohydrate} г` }}</th>\n          <th>{{ props.nutritionalValue.calorific }}</th>\n        </tr>\n        <tr :class=\"{ 'large--font': props.isProductPage }\">\n          <td>на 100 г</td>\n          <td>белки</td>\n          <td>жиры</td>\n          <td>углеводы</td>\n          <td>кКал</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product__content {\n  &-calories {\n    @include media('<=tablet') {\n      width: 264px;\n      margin-top: 0;\n    }\n\n    table {\n      width: 100%;\n      color: var(--ui-dark-grey);\n      text-align: left;\n      border-collapse: collapse;\n\n      tr {\n        th {\n          height: max-content;\n          font-size: 12px;\n          font-weight: 600;\n          line-height: 19px;\n        }\n\n        td {\n          font-size: 12px;\n          font-weight: 600;\n          line-height: 19px;\n        }\n      }\n\n      th:first-child,\n      td:first-child {\n        border-left: none;\n      }\n\n      .large--font {\n        td {\n          font-size: 16px;\n        }\n        th {\n          font-size: 16px;\n        }\n      }\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/* Types */\nimport { Modification } from '@/types/api/api-v3/product'\n\ntype Props = {\n  modifications: Modification[]\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['changeModification'])\n\nconst { isDesktop } = useDevice()\n\nconst productModificationId = ref(props.modifications[0]?.id)\n\nconst tabsSize = computed(() => (isDesktop ? 'md' : 'sm'))\n\nconst changeModification = (modificationId: number) => {\n  productModificationId.value = modificationId\n\n  emit('changeModification', modificationId)\n}\n</script>\n\n<template>\n  <the-tabs\n    class=\"modification__tabs\"\n    :size=\"tabsSize\"\n    :model-value=\"productModificationId\"\n  >\n    <the-tabs-item\n      v-for=\"modification in modifications\"\n      :key=\"modification.id\"\n      :value=\"modification.id\"\n      @click=\"changeModification(modification.id)\"\n    >\n      {{ modification.mode }}\n    </the-tabs-item>\n  </the-tabs>\n</template>\n\n<style lang=\"scss\" scoped>\n.modification__tabs {\n  max-width: 100%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { defineLayoutOfProduct } from '@/utils/defineLayoutOfProduct'\n\nimport { useProductCounter } from '@/composables/useProductCounter'\n\nimport { useAppStore } from '@/store/app/app'\nimport { SnackbarType } from '@/store/app/app.types'\nimport { useBasketStore } from '@/store/basket/basket'\nimport { useCityStore } from '@/store/city/city'\n\nimport { Modification, Product } from '@/types/api/api-v3/product'\nimport { EcommerceEventName } from '@/types/plugins/yandex-metrika'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\nimport { SetProductIncludeType, SetProductType } from '@/types/store/category'\n\nimport AppMeasureUnits from '@/components/App/AppMeasureUnits.vue'\nimport MainDesktopColories from '@/components/Product/ProductItem/ProductContent/MainDesktopColories.vue'\nimport ProductButton from '@/components/Product/ProductItem/ProductContent/ProductButton.vue'\nimport ProductButtonPage from '@/components/Product/ProductItem/ProductContent/ProductButtonPage.vue'\nimport ProductCalories from '@/components/Product/ProductItem/ProductContent/ProductCalories.vue'\nimport ProductCompound from '@/components/Product/ProductItem/ProductContent/ProductCompound.vue'\nimport ProductModifications from '@/components/Product/ProductItem/ProductContent/ProductModifications.vue'\n\ntype Props = {\n  product: Product\n  currentModification: Modification\n  parentComponent: string\n  wrapperAttrs: object\n  wrapperComponent: string\n  isMainPage: boolean\n}\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['openDialogProduct', 'changeModification'])\n\nconst cityStore = useCityStore()\nconst basketStore = useBasketStore()\nconst { showSnackbar } = useAppStore()\n\nconst { isDesktop } = useDevice()\n\nconst vOnOpenDialog = computed(() =>\n  props.isMainPage ? { click: openDialogProduct } : {},\n)\n\nconst openDialogProduct = () => {\n  emit('openDialogProduct')\n}\n\nconst isTitleProduct = computed(() => {\n  if (props.product.modifications.length >= 2) return `${props.product.name}`\n  else\n    return props.product.modifications[0].mode\n      ? `${props.product.name}: ${props.product.modifications[0].mode}`\n      : `${props.product.name}`\n})\n\nconst isShowDescription = computed(\n  () => NAME_PARENT_COMPONENT.MAIN_MOBILE !== props.parentComponent,\n)\n\nconst isHighLight = computed(() => {\n  return props.product.tags.find((item) => item.as_highlight)\n})\n\nconst currencyCode = computed(() => cityStore.currencyCode)\n\nconst currencySymbol = computed(() => cityStore.currencySymbol)\n\nconst quantityInProductBasket = computed(() => {\n  return (\n    basketStore.isProductInBasket(props.currentModification.id)?.quantity || 0\n  )\n})\n\nconst productId = computed(() => props.currentModification.id)\n\nconst isCompoundVisible = computed(() => {\n  return (\n    props.product?.marking_composition &&\n    (props.parentComponent === NAME_PARENT_COMPONENT.DIALOG ||\n      props.parentComponent === NAME_PARENT_COMPONENT.PAGE)\n  )\n})\n\nconst {\n  basketError,\n  quantitySelectedProducts,\n  setProductQuantity,\n  decreaseQuantity,\n  increaseQuantity,\n} = useProductCounter(productId, props.currentModification)\n\nconst { pushMetrics } = useSendMetricsOfProduct(props.currentModification)\n\nconst onUpdateProductQuantity = () => {\n  let quantity = quantityInProductBasket.value\n\n  if (NAME_PARENT_COMPONENT.DIALOG === props.parentComponent) {\n    quantity = quantitySelectedProducts.value\n  }\n\n  setProductQuantity(quantity)\n}\n\nconst changeModification = (modificationId: number) => {\n  // await, чтобы работать дальше с измененным currentModification\n  emit('changeModification', modificationId)\n\n  // ищем кол- во товара по модификации в корзине и меняем в случае, если он есть\n  setProductQuantity(quantityInProductBasket.value)\n}\n\nconst addToCart = async (productId: number) => {\n  setProductQuantity(quantitySelectedProducts.value + 1) // текущее + 1\n\n  await basketStore.addProduct(productId)\n\n  if (!basketError.value) {\n    pushMetrics(EcommerceEventName.ADD, 1)\n\n    return\n  }\n\n  setProductQuantity(quantityInProductBasket.value) // при ошибке возвращаем кол-во с сервера\n\n  showSnackbar({\n    message: 'Что-то пошло не так',\n    type: SnackbarType.MESSAGE,\n  })\n}\n\nconst setProduct = (type: SetProductIncludeType) => {\n  // Проверяем, какая кнопка counter-а была нажата и высчитываем измененнное кол- во продукта\n  if (type === SetProductType.DECREASE) {\n    decreaseQuantity()\n    return\n  }\n\n  increaseQuantity()\n}\n\nconst getProductMicrolayouts = defineLayoutOfProduct(props.parentComponent)\n\nconst itemPropProductTitle = getProductMicrolayouts('name')\nconst itemPropProductDescription = getProductMicrolayouts('description')\n</script>\n\n<template>\n  <div class=\"product__content\">\n    <component\n      :is=\"wrapperComponent\"\n      class=\"product__content-title\"\n      v-bind=\"wrapperAttrs\"\n      v-on=\"vOnOpenDialog\"\n      @click.prevent\n    >\n      <h1\n        v-if=\"NAME_PARENT_COMPONENT.PAGE === parentComponent\"\n        class=\"product__content-headline\"\n        :itemprop=\"itemPropProductTitle\"\n      >\n        {{ isTitleProduct }}\n      </h1>\n\n      <div\n        v-else\n        class=\"product__content-headline\"\n        :itemprop=\"itemPropProductTitle\"\n        v-on=\"vOnOpenDialog\"\n      >\n        {{ isTitleProduct }}\n      </div>\n    </component>\n\n    <div\n      v-if=\"isHighLight && NAME_PARENT_COMPONENT.PAGE === parentComponent\"\n      class=\"product__content-sale\"\n    >\n      <span\n        class=\"product__content-sale--text\"\n        :style=\"{ 'background-color': isHighLight.hover_background_color }\"\n      >\n        {{ isHighLight.name }}\n      </span>\n    </div>\n\n    <component\n      :is=\"wrapperComponent\"\n      v-if=\"isShowDescription\"\n      class=\"product__content-description\"\n      v-bind=\"wrapperAttrs\"\n      v-on=\"vOnOpenDialog\"\n    >\n      <div\n        :itemprop=\"itemPropProductDescription\"\n        v-html=\"currentModification.description\"\n      />\n    </component>\n\n    <product-compound\n      v-if=\"isCompoundVisible\"\n      :marking-composition=\"product?.marking_composition\"\n      class=\"product__content-compound\"\n    />\n\n    <product-calories\n      class=\"product__content-calories\"\n      :is-product-page=\"\n        isDesktop && NAME_PARENT_COMPONENT.PAGE === parentComponent\n      \"\n      :nutritional-value=\"currentModification.nutritional_values\"\n    />\n\n    <div\n      v-if=\"product.modifications.length >= 2\"\n      class=\"product__content-modifications\"\n      tabindex=\"-1\"\n    >\n      <product-modifications\n        :modifications=\"product.modifications\"\n        @change-modification=\"changeModification\"\n      />\n    </div>\n\n    <template v-if=\"NAME_PARENT_COMPONENT.PAGE === parentComponent\">\n      <div\n        v-for=\"modificationItem in product.modifications\"\n        :key=\"`offer_${modificationItem.id}`\"\n        class=\"hidden\"\n        itemprop=\"offers\"\n        itemscope\n        itemtype=\"http://schema.org/Offer\"\n      >\n        <meta itemprop=\"price\" :content=\"`${modificationItem.price}`\" />\n        <meta itemprop=\"priceCurrency\" :content=\"currencyCode\" />\n      </div>\n    </template>\n    <div class=\"product__content-price\">\n      <p\n        :class=\"{\n          'product__content-price--new': currentModification.subprice,\n        }\"\n      >\n        {{ currentModification.price }} {{ currencySymbol }}\n      </p>\n\n      <div\n        v-if=\"currentModification.discount\"\n        class=\"product__content-price--discount\"\n      >\n        {{ currentModification.subprice }} {{ currencySymbol }}\n      </div>\n    </div>\n\n    <div class=\"product__content-actions\">\n      <the-button\n        v-if=\"\n          !basketStore.isLoaded &&\n          NAME_PARENT_COMPONENT.DIALOG !== parentComponent\n        \"\n        class=\"button--loading\"\n        loading\n        disabled\n        radius=\"lg\"\n        :size=\"!isDesktop ? 'sm' : 'md'\"\n      />\n      <product-button-page\n        v-else-if=\"NAME_PARENT_COMPONENT.PAGE === parentComponent\"\n        :product-quantity=\"quantitySelectedProducts\"\n        @add-to-cart=\"addToCart(currentModification.id)\"\n        @set-increase-product=\"setProduct(SetProductType.INCREASE)\"\n        @set-decrease-product=\"setProduct(SetProductType.DECREASE)\"\n        @update-product-quantity=\"onUpdateProductQuantity\"\n      />\n      <product-button\n        v-else\n        :product-quantity=\"quantitySelectedProducts\"\n        @add-to-cart=\"addToCart(currentModification.id)\"\n        @set-increase-product=\"setProduct(SetProductType.INCREASE)\"\n        @set-decrease-product=\"setProduct(SetProductType.DECREASE)\"\n        @update-product-quantity=\"onUpdateProductQuantity\"\n      />\n    </div>\n\n    <div class=\"product__content-weight\">\n      <app-measure-units\n        :weight=\"currentModification.weight\"\n        :volume-in-liters=\"currentModification.volume_in_liters\"\n        :measure=\"currentModification.measure\"\n      />\n\n      <main-desktop-colories\n        v-if=\"NAME_PARENT_COMPONENT.MAIN_DESKTOP === parentComponent\"\n        class=\"product__content-calories\"\n        :nutritional-value=\"currentModification.nutritional_values\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.product__content {\n  &-title {\n    grid-area: title;\n  }\n\n  &-sale {\n    grid-area: sale;\n  }\n\n  &-description {\n    grid-area: description;\n  }\n\n  &-modifications {\n    grid-area: modifications;\n  }\n\n  &-price {\n    grid-area: price;\n  }\n\n  &-actions {\n    grid-area: actions;\n  }\n\n  &-weight {\n    grid-area: weight;\n  }\n\n  &-calories {\n    grid-area: calories;\n  }\n\n  &-compound {\n    grid-area: compound;\n  }\n\n  &-components {\n    grid-area: components;\n  }\n\n  &-headline {\n    display: inline;\n  }\n}\n\n.hidden {\n  display: none;\n}\n\n@mixin product-main-desktop {\n  .product__content {\n    display: grid;\n    grid-template-areas:\n      'title title'\n      'description description'\n      'modifications modifications'\n      'price actions'\n      'weight calories';\n    grid-template-rows: max-content 1fr max-content;\n    width: 100%;\n\n    .product__control {\n      margin-top: 200px;\n    }\n\n    &-title {\n      display: flex;\n      align-items: flex-start;\n      margin: 16px 0 16px;\n      font-size: 16px;\n      font-weight: 800;\n      line-height: 20px;\n      color: #2c2f39;\n\n      h1 {\n        font-size: 16px;\n        font-weight: 800;\n        line-height: 20px;\n        color: #2c2f39;\n      }\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    &-description {\n      width: 100%;\n      margin-bottom: 27px;\n      overflow: hidden;\n      font-size: 14px;\n      font-weight: 500;\n      line-height: 17px;\n      color: var(--ui-dark-grey);\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    &-modifications {\n      width: 100%;\n      padding-bottom: 24px;\n    }\n\n    &-price {\n      display: flex;\n      align-items: center;\n      color: var(--ui-text-primary);\n      white-space: nowrap;\n\n      &--new {\n        color: var(--ui-primary);\n      }\n\n      p {\n        margin: 2px 0 0 0;\n        font-size: 22px;\n        font-weight: 800;\n        line-height: 26px;\n      }\n\n      &--discount {\n        margin-left: 10px;\n        font-size: 16px;\n        font-weight: 600;\n        line-height: 19px;\n        text-decoration: line-through;\n      }\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      min-height: 40px;\n\n      .button--loading {\n        width: 108px !important;\n        height: 40px !important;\n        padding: 12px 35px;\n        font-weight: 800;\n        border-radius: 40px;\n        box-shadow: 0 4px 20px rgb(255 80 0 / 16%);\n      }\n    }\n\n    &-weight {\n      position: relative;\n      display: flex;\n      gap: 0 10px;\n      align-items: center;\n      padding-top: 12px;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 16px;\n      color: var(--ui-dark-grey);\n    }\n  }\n}\n\n@mixin product-main-mobile {\n  .product__content {\n    display: grid;\n    grid-template-areas:\n      'title title'\n      'modifications modifications'\n      'price price'\n      'weight actions'\n      'compound compound';\n    grid-template-rows: max-content 1fr max-content;\n    width: 100%;\n\n    &-title {\n      display: flex;\n      align-items: center;\n      height: 44px;\n      margin-bottom: 10px;\n      font-size: 12px;\n      font-weight: 800;\n      line-height: 14px;\n      color: var(--ui-text-primary);\n      border-radius: 20px;\n\n      h1 {\n        font-size: 12px;\n        font-weight: 800;\n        line-height: 14px;\n        color: var(--ui-text-primary);\n      }\n    }\n\n    &-modifications {\n      width: 100%;\n      max-width: 100%;\n      padding-bottom: 10px;\n    }\n\n    &-price {\n      display: flex;\n      align-items: center;\n      padding-bottom: 10px;\n\n      &--new {\n        color: var(--ui-primary);\n      }\n\n      p {\n        margin: 0;\n        font-size: 14px;\n        font-weight: 800;\n        line-height: 17px;\n      }\n\n      &--discount {\n        margin-left: 10px;\n        font-size: 12px;\n        font-weight: 600;\n        line-height: 14px;\n        text-decoration: line-through;\n      }\n    }\n\n    &-control {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      width: -webkit-fill-available;\n    }\n\n    &-weight {\n      position: relative;\n      display: grid;\n      gap: 0 10px;\n      align-items: center;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 14px;\n      color: var(--ui-dark-grey);\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      height: 30px;\n\n      .button--loading {\n        @include media('<desktop-mini') {\n          width: 80px !important;\n          height: 30px !important;\n          min-height: 30px;\n          padding: 8px 24px;\n          font-size: 12px;\n          font-weight: 800;\n          line-height: 14px;\n          border-radius: 40px;\n          box-shadow: 0 4px 20px rgba(255, 80, 0, 0.16);\n        }\n      }\n    }\n  }\n}\n\n@mixin product-dialog {\n  .product__content {\n    display: grid;\n    grid-template-areas:\n      'title title'\n      'description description'\n      'compound compound'\n      'calories calories'\n      'modifications modifications'\n      'price actions'\n      'weight weight';\n    width: 280px;\n    margin: auto 0;\n\n    @include media('<desktop') {\n      grid-template-areas:\n        'title title'\n        'description description'\n        'compound compound'\n        'modifications modifications'\n        'price actions'\n        'weight weight'\n        'calories calories'\n        'components components';\n      width: 100%;\n\n      &-title {\n        margin-top: 24px;\n        font-size: 16px;\n        line-height: 19px;\n\n        h1 {\n          font-size: 16px;\n          line-height: 19px;\n        }\n\n        @include media('<tablet') {\n          margin-bottom: 16px;\n        }\n      }\n\n      &-calories {\n        max-width: 264px;\n        margin-top: 24px;\n      }\n\n      &-description {\n        margin-bottom: 0;\n      }\n    }\n\n    &-title {\n      margin-bottom: 24px;\n      font-size: 22px;\n      font-weight: 800;\n      line-height: 26px;\n      color: var(--ui-text-primary);\n      word-break: break-word;\n\n      h1 {\n        font-size: 22px;\n        font-weight: 800;\n        line-height: 26px;\n        color: var(--ui-text-primary);\n        word-break: break-word;\n      }\n    }\n\n    &-description {\n      width: auto;\n      margin-bottom: 24px;\n      overflow: hidden;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 17px;\n      color: var(--ui-dark-grey);\n    }\n\n    &-components {\n      overflow: hidden;\n    }\n\n    &-modifications {\n      margin: 24px 20px 0;\n\n      @include media('>=desktop-mini') {\n        margin: 24px 0 0;\n      }\n    }\n\n    &-compound {\n      margin: 0 0 10px;\n    }\n\n    &-price {\n      display: flex;\n      align-items: center;\n      margin-top: 24px;\n      color: var(--ui-text-primary);\n\n      &--new {\n        color: var(--ui-primary);\n      }\n\n      p {\n        margin: 0;\n        font-size: 22px;\n        font-weight: 800;\n        line-height: 26px;\n      }\n\n      &--discount {\n        margin-left: 10px;\n        font-size: 16px;\n        font-weight: 600;\n        line-height: 19px;\n        text-decoration: line-through;\n      }\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      margin-top: 24px;\n    }\n\n    &-weight {\n      padding-top: 10px;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 16px;\n      color: var(--ui-dark-grey);\n    }\n\n    @include media('<=desktop-mini') {\n      &-title {\n        margin: 24px 48px 24px 48px;\n      }\n      &-description {\n        margin: 0 48px 24px 48px;\n      }\n\n      &-price,\n      &-calories {\n        margin: 24px 48px 0 48px;\n      }\n      &-actions {\n        margin: 24px 48px 0 0;\n      }\n\n      &-weight {\n        margin: 0 48px 0 48px;\n      }\n\n      &-compound {\n        margin-left: 0px;\n      }\n    }\n\n    @include media('<=tablet') {\n      &-title {\n        margin: 24px 20px 24px 20px;\n      }\n\n      &-description {\n        margin: 0 20px 24px 20px;\n      }\n\n      &-price,\n      &-calories {\n        margin: 24px 20px 0 20px;\n      }\n\n      &-compound {\n        margin-left: 20px;\n      }\n\n      &-actions {\n        margin: 24px 20px 0 0;\n      }\n      &-weight {\n        margin: 0 20px 0 20px;\n      }\n    }\n  }\n}\n\n@mixin product-page {\n  .product__content {\n    display: grid;\n    grid-template-areas:\n      'title title'\n      'sale sale'\n      'description description'\n      'compound compound'\n      'calories calories'\n      'modifications modifications'\n      'price actions'\n      'weight actions';\n\n    @include media('>=tablet', '<desktop') {\n      grid-template-areas:\n        'sale sale'\n        'title title'\n        'modifications modifications'\n        'price actions'\n        'weight actions'\n        'compound compound'\n        'description description'\n        'calories calories';\n    }\n\n    @include media('<tablet') {\n      grid-template-areas:\n        'sale sale'\n        'title title'\n        'description description'\n        'modifications modifications'\n        'price actions'\n        'weight actions'\n        'compound compound'\n        'calories calories';\n    }\n\n    &-title {\n      margin-bottom: 24px;\n      font-size: 22px;\n      font-weight: 800;\n\n      h1 {\n        font-size: 22px;\n        font-weight: 800;\n      }\n\n      @include media('<desktop') {\n        margin-bottom: 16px;\n        font-size: 16px;\n\n        h1 {\n          font-size: 16px;\n        }\n      }\n    }\n\n    &-description {\n      margin: 40px 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 19px;\n      color: var(--ui-dark-grey);\n\n      @include media('<desktop') {\n        margin: 24px 0;\n        font-size: 14px;\n      }\n\n      @include media('<tablet') {\n        margin-bottom: 24px;\n        font-size: 12px;\n      }\n    }\n\n    &-sale {\n      width: max-content;\n\n      @include media('<=desktop') {\n        margin-bottom: 24px;\n      }\n\n      &--text {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 5px 10px;\n        font-size: 12px;\n        font-weight: 700;\n        line-height: 14px;\n        color: var(--ui-white);\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        background: #00c304;\n        border-radius: 20px;\n      }\n    }\n\n    &-calories {\n      max-width: 80%;\n      margin-bottom: 40px;\n      font-size: 22px !important;\n\n      @include media('<desktop') {\n        max-width: 260px;\n        margin: 0;\n      }\n\n      @include media('<tablet') {\n        margin-top: 24px;\n      }\n    }\n\n    &-modifications {\n      margin-bottom: 40px;\n\n      @include media('<desktop') {\n        margin-bottom: 24px;\n      }\n    }\n\n    &-compound {\n      margin-bottom: 20px;\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n\n      .button--loading {\n        width: 177px;\n\n        @include media('<desktop-mini') {\n          width: 108px;\n        }\n      }\n    }\n\n    &-price {\n      display: flex;\n      align-items: center;\n\n      &--new {\n        color: var(--ui-primary);\n      }\n\n      p {\n        margin: 0;\n        font-size: 28px;\n        font-weight: 800;\n        line-height: 33px;\n\n        @include media('<desktop') {\n          font-size: 22px;\n          line-height: 26px;\n        }\n      }\n\n      &--discount {\n        margin-left: 10px;\n        font-size: 20px;\n        font-weight: 600;\n        line-height: 23px;\n        text-decoration: line-through;\n\n        @include media('<desktop') {\n          font-size: 16px;\n          line-height: 19px;\n        }\n      }\n    }\n\n    &-weight {\n      display: flex;\n      align-items: center;\n      margin-top: 10px;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--ui-dark-grey);\n\n      @include media('<desktop') {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n.product--main-desktop {\n  @include product-main-desktop();\n}\n\n.product--main-mobile {\n  @include product-main-mobile;\n}\n\n.product--dialog {\n  @include product-dialog;\n}\n\n.product--page {\n  @include product-page;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { defineLayoutOfProduct } from '@/utils/defineLayoutOfProduct'\n\nimport { Modification, Product } from '@/types/api/api-v3/product'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\n\ntype Props = {\n  product: Product\n  currentModification: Modification\n  parentComponent: string\n}\n\nconst props = defineProps<Props>()\n\nconst { isMobile } = useDevice()\n\nconst { productTitle, productImage, productImageList, setError } =\n  useProductImage(props)\n\nconst slideWidth = computed(() => (isMobile ? 350 : 678))\n\nconst checkVisibleQuantity = computed(() =>\n  Boolean(\n    props.product.elements && props.product.category_slug?.includes('sety'),\n  ),\n)\n\nconst isHighLight = computed(() => {\n  return props.product.tags.find((item) => item.as_highlight)\n})\n\nconst isShowDiscount = computed(() => {\n  return !!props.currentModification.discount\n})\n\nconst getProductMicrolayouts = defineLayoutOfProduct(props.parentComponent)\n\nconst itemTypeProductItem = getProductMicrolayouts('image')\n</script>\n\n<template>\n  <div class=\"product__image\">\n    <the-slider\n      v-if=\"productImageList.length\"\n      class=\"product__slider\"\n      :slide-width=\"slideWidth\"\n      :space-between=\"10\"\n      :arrows=\"!isMobile\"\n      :length=\"productImageList.length\"\n      :dots-offset=\"8\"\n      dots\n    >\n      <nuxt-img\n        v-for=\"image in productImageList\"\n        :key=\"image\"\n        :src=\"image\"\n        :alt=\"product.name\"\n        :title=\"productTitle\"\n        class=\"image\"\n        loading=\"lazy\"\n        format=\"webp\"\n        width=\"100%\"\n        height=\"100%\"\n      />\n    </the-slider>\n\n    <nuxt-img\n      v-else\n      :src=\"productImage\"\n      :alt=\"product.name\"\n      :title=\"productTitle\"\n      :itemprop=\"itemTypeProductItem\"\n      class=\"image\"\n      loading=\"lazy\"\n      format=\"webp\"\n      width=\"100%\"\n      height=\"100%\"\n      @error=\"setError(true)\"\n    />\n\n    <div v-if=\"checkVisibleQuantity\" class=\"product__image-quantity\">\n      {{ product.elements }} шт.\n    </div>\n\n    <span v-if=\"isShowDiscount\" class=\"product__image-discount\">\n      -{{ currentModification.discount }}%\n    </span>\n\n    <template v-if=\"NAME_PARENT_COMPONENT.DIALOG === parentComponent\">\n      <div\n        v-if=\"isHighLight\"\n        :style=\"{ 'background-color': isHighLight.hover_background_color }\"\n        class=\"product__image-sale\"\n      >\n        {{ isHighLight.name }}\n      </div>\n    </template>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.product__image {\n  img {\n    display: block;\n    width: 100%;\n    border-radius: 20px;\n  }\n\n  &-tags {\n    @include media('>=desktop-mini') {\n      position: absolute;\n      top: 0;\n      left: 0;\n      max-width: 100%;\n      overflow: hidden;\n    }\n  }\n}\n\n@mixin quantity {\n  position: absolute;\n  right: 0;\n  display: flex;\n  justify-content: center;\n  padding: 3px 8px;\n  font-size: 12px;\n  font-weight: 800;\n  color: var(--ui-white);\n  background: var(--ui-text-primary);\n  border-radius: 200px;\n}\n\n@mixin quantity-tablet {\n  width: initial;\n  padding: 2px 4px;\n  margin-top: 24px;\n  font-size: 10px;\n  line-height: 12px;\n}\n\n@mixin discount-styles {\n  position: absolute;\n  top: 0;\n  right: 0;\n  font-weight: 800;\n  color: #000;\n  background: var(--ui-yellow);\n}\n\n@mixin product-main-desktop {\n  .product__image {\n    position: relative;\n    grid-area: 1 / 1 / 2 / 3;\n    height: max-content;\n    min-height: 187px;\n    max-height: 270px;\n    transition: 0.2s ease-in;\n\n    &:hover {\n      cursor: pointer;\n      transition: 0.2s ease-in;\n      transform: translateY(5px);\n    }\n  }\n\n  .product__image-quantity {\n    @include quantity;\n\n    bottom: 18px;\n\n    @include media('<=tablet') {\n      @include quantity-tablet;\n    }\n  }\n\n  .product__image-discount {\n    @include discount-styles;\n\n    padding: 6px 12px;\n    font-size: 12px;\n    line-height: 14px;\n    border-radius: 20px;\n  }\n}\n\n@mixin product-main-mobile {\n  .product__image {\n    position: relative;\n    grid-area: 1 / 1 / 2 / 2;\n    height: max-content;\n    min-height: 100px;\n    max-height: 270px;\n    transition: 0.2s ease-in;\n  }\n\n  .product__image-quantity {\n    @include quantity;\n\n    bottom: 10px;\n\n    @include media('<=tablet') {\n      @include quantity-tablet;\n    }\n  }\n\n  .product__image-discount {\n    @include discount-styles;\n\n    padding: 3px 5px;\n    margin-left: 10px;\n    font-size: 10px;\n    line-height: 12px;\n    border-radius: 20px;\n  }\n}\n\n@mixin product-page {\n  .product__image {\n    position: relative;\n    max-height: 452px;\n    border-radius: 32px;\n\n    @include media('<=desktop') {\n      margin-bottom: 15px;\n    }\n\n    @include media('>=tablet', '<=desktop-mini') {\n      max-width: 100%;\n      max-height: 100%;\n    }\n  }\n\n  .product__slider {\n    margin-bottom: 15px;\n  }\n\n  .product__image-discount {\n    @include discount-styles;\n\n    padding: 6px 10px;\n    font-size: 16px;\n    line-height: 19px;\n    border-radius: 40px;\n\n    @include media('<desktop') {\n      padding: 5px 12px;\n      font-size: 12px;\n      line-height: 14px;\n      border-radius: 20px;\n    }\n  }\n\n  .product__image-quantity {\n    @include quantity;\n\n    bottom: 18px;\n    padding: 3px 12px;\n    font-size: 18px;\n    line-height: 29px;\n\n    @include media('<=tablet') {\n      @include quantity-tablet;\n    }\n  }\n}\n\n.product--main-desktop {\n  @include product-main-desktop();\n}\n\n.product--main-mobile {\n  @include product-main-mobile;\n}\n\n.product--page {\n  @include product-page;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { PropType } from 'vue'\n\n/* Types */\nimport { Tag } from '@/types/api/api-v3/product'\nimport { TagSize } from '@/types/products'\n\ndefineProps({\n  tag: {\n    type: Object as PropType<Tag>,\n    required: true,\n  },\n  size: {\n    type: String as PropType<TagSize>,\n    required: false,\n    default: String(TagSize.NORMAL),\n  },\n})\n\nconst onError = (error: Event) => {\n  if (!error.target) {\n    return\n  }\n\n  const target = error.target as HTMLElement\n\n  target.style.display = 'none'\n}\n</script>\n\n<template>\n  <nuxt-img\n    v-if=\"tag.image\"\n    class=\"tag\"\n    :class=\"{ 'size--large': size === TagSize.LARGE }\"\n    :src=\"tag.image\"\n    :alt=\"tag.name\"\n    @error=\"onError\"\n  />\n</template>\n\n<style lang=\"scss\" scoped>\n.tag {\n  width: 14px;\n  height: 14px;\n  object-fit: cover;\n  border-radius: 50%;\n  @include media('>=tablet') {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n.size--large {\n  width: 24px;\n  height: 24px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Product } from '@/types/api/api-v3/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\nimport { NAME_PARENT_COMPONENT, TagSize } from '@/types/products'\n\nimport ProductOldTag from '@/components/Product/ProductItem/ProductTags/ProductTag.vue'\nimport ProductTagRating from '@/components/Product/ProductTags/ProductTagRating.vue'\n\ntype Props = {\n  product: Product\n  parentComponent: string\n}\n\nconst props = defineProps<Props>()\n\nconst tagsClasses = computed(() => [\n  'product__tags',\n  {\n    'product__tags--wide':\n      NAME_PARENT_COMPONENT.MAIN_DESKTOP === props.parentComponent &&\n      props.product.tags.length > 5,\n  },\n])\n\nconst tagSize = computed(() =>\n  NAME_PARENT_COMPONENT.DIALOG === props.parentComponent\n    ? TagSize.LARGE\n    : TagSize.NORMAL,\n)\n</script>\n\n<template>\n  <div :class=\"tagsClasses\">\n    <product-tag-rating :product=\"product\" :type=\"ProductParentType.detail\" />\n\n    <product-old-tag\n      v-for=\"tag in product.tags\"\n      :key=\"tag.name\"\n      :tag=\"tag\"\n      :size=\"tagSize\"\n    />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@mixin product-main-desktop {\n  .product__tags {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: grid;\n    gap: 10px 0;\n    margin-top: 12px;\n\n    &--wide {\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      width: 54px;\n      max-height: 150px;\n    }\n  }\n}\n\n@mixin product-main-mobile {\n  .product__tags {\n    position: absolute;\n    top: 12px;\n    left: 12px;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    gap: 8px;\n    max-height: 100px;\n\n    @include media('>=tablet') {\n      gap: 10px;\n    }\n\n    @include media('<=desktop-mini') {\n      max-height: 160px;\n    }\n\n    @include media('<tablet') {\n      max-height: 110px;\n    }\n  }\n}\n\n@mixin product-dialog {\n  .product__tags {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    gap: 16px;\n    height: calc(100% - 34px);\n\n    @include media('<=desktop-mini') {\n      left: 48px;\n    }\n\n    @include media('<tablet') {\n      left: 20px;\n    }\n  }\n}\n\n@mixin product-page {\n  .product__tags {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 5;\n    display: grid;\n    gap: 12px 0;\n    padding: 25px 0 0 5px;\n\n    @include media('<=tablet') {\n      padding: 0;\n    }\n  }\n}\n\n.product--main-desktop {\n  @include product-main-desktop();\n}\n\n.product--main-mobile {\n  @include product-main-mobile;\n}\n\n.product--dialog {\n  @include product-dialog;\n}\n\n.product--page {\n  @include product-page;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { defineLayoutOfProduct } from '@/utils/defineLayoutOfProduct'\n\nimport { useCityStore } from '@/store/city/city'\n\nimport { Product } from '@/types/api/api-v3/product'\nimport { EcommerceEventName } from '@/types/plugins/yandex-metrika'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\n\nimport ProductContent from '@/components/Product/ProductItem/ProductContent/ProductContent.vue'\nimport ProductImage from '@/components/Product/ProductItem/ProductImage/ProductImage.vue'\nimport ProductTags from '@/components/Product/ProductItem/ProductTags/ProductTags.vue'\n\nimport { mapEcommerceData } from '@/services/metrics/utils/ecommerce'\n\nconst emit = defineEmits(['openDialogProduct'])\n\ntype Props = {\n  product: Product\n  parentComponent: string\n}\nconst props = defineProps<Props>()\n\nconst cityStore = useCityStore()\n\nconst { isMobileOrTablet } = useDevice()\n\nconst { $metrics } = useNuxtApp()\n\nconst productClasses = computed(() => {\n  return [\n    'product',\n    {\n      'product--main-desktop':\n        NAME_PARENT_COMPONENT.MAIN_DESKTOP === props.parentComponent,\n      'product--main-mobile':\n        NAME_PARENT_COMPONENT.MAIN_MOBILE === props.parentComponent,\n      'product--dialog': NAME_PARENT_COMPONENT.DIALOG === props.parentComponent,\n      'product--dialog-mobile':\n        NAME_PARENT_COMPONENT.DIALOG === props.parentComponent &&\n        isMobileOrTablet,\n      'product--page': NAME_PARENT_COMPONENT.PAGE === props.parentComponent,\n    },\n  ]\n})\n\nconst isMainPage = computed(\n  () =>\n    NAME_PARENT_COMPONENT.MAIN_DESKTOP === props.parentComponent ||\n    NAME_PARENT_COMPONENT.MAIN_MOBILE === props.parentComponent,\n)\n\nconst wrapperComponent = computed(() => (isMainPage.value ? 'a' : 'div'))\n\nconst wrapperAttrs = computed(() => {\n  return isMainPage.value\n    ? {\n        href: `/product/${props.product.slug}/`,\n      }\n    : {}\n})\n\nconst isHighLight = computed(() => {\n  return props.product.tags.find((item) => item.as_highlight)\n})\n\nconst isShowHighLight = computed(\n  () =>\n    NAME_PARENT_COMPONENT.MAIN_DESKTOP === props.parentComponent ||\n    NAME_PARENT_COMPONENT.MAIN_MOBILE === props.parentComponent,\n)\n\nconst currentModification = ref(props.product?.modifications[0] || {}) // текущая модификация товара\n\nwatch(\n  () => props.product,\n  (newProduct) => {\n    currentModification.value = newProduct?.modifications[0] || {}\n  },\n)\n\nconst currencyCode = computed(() => cityStore.currencyCode)\n\nconst openDialogProduct = () => {\n  emit('openDialogProduct', props.product)\n\n  const ecommerceData = mapEcommerceData(\n    currentModification.value,\n    EcommerceEventName.DETAIL,\n    currencyCode?.value || '',\n  )\n\n  $metrics?.eventViewedProduct({ ym: ecommerceData })\n}\n\nconst getProductMicrolayouts = defineLayoutOfProduct(props.parentComponent)\n\nconst itemScopeProductItem = getProductMicrolayouts(true)\nconst itemTypeProductItem = getProductMicrolayouts('http://schema.org/Product')\n\nconst changeModification = (modificationId: number) => {\n  // меняем текущую модификацию продукта путем поиска по id модификации\n  currentModification.value =\n    props.product.modifications.find(\n      (modification) => modification.id === modificationId,\n    ) || props.product.modifications[0]\n}\n</script>\n\n<template>\n  <div\n    :itemscope=\"itemScopeProductItem\"\n    :itemtype=\"itemTypeProductItem\"\n    :class=\"productClasses\"\n  >\n    <product-image\n      :product=\"product\"\n      :current-modification=\"currentModification\"\n      :parent-component=\"parentComponent\"\n    />\n\n    <product-tags\n      v-if=\"product.tags\"\n      :product=\"product\"\n      :parent-component=\"parentComponent\"\n    />\n\n    <div class=\"product__sale\">\n      <span\n        v-if=\"isHighLight && isShowHighLight\"\n        class=\"product__sale--text\"\n        :style=\"{ 'background-color': isHighLight.hover_background_color }\"\n      >\n        {{ isHighLight.name }}\n      </span>\n    </div>\n\n    <product-content\n      :product=\"product\"\n      :wrapper-attrs=\"wrapperAttrs\"\n      :wrapper-component=\"wrapperComponent\"\n      :is-main-page=\"isMainPage\"\n      :current-modification=\"currentModification\"\n      :parent-component=\"parentComponent\"\n      @open-dialog-product=\"openDialogProduct\"\n      @change-modification=\"changeModification\"\n    />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@mixin product-main-desktop {\n  position: relative;\n  display: grid;\n  grid-template-rows: repeat(2, max-content) 1fr;\n  grid-template-columns: 100%;\n  width: 273px;\n  cursor: default;\n\n  .product__sale {\n    display: flex;\n    grid-area: 2 / 1 / 3 / 3;\n    height: 20px;\n\n    &--text {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 20px;\n      font-size: 12px;\n      font-weight: bold;\n      line-height: 14px;\n      color: var(--ui-white);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: #00c304;\n      border-radius: 20px;\n    }\n  }\n}\n\n@mixin product-main-mobile {\n  position: relative;\n  display: grid;\n  grid-template-rows: repeat(2, max-content) 1fr;\n  grid-template-columns: 100%;\n  padding: 12px 12px 16px;\n  background: var(--ui-white);\n  border-radius: 16px;\n  box-shadow: 0 6px 30px rgba(50, 52, 72, 0.08);\n\n  .product__sale {\n    display: flex;\n    grid-area: 2 / 1 / 3 / 2;\n    height: 20px;\n\n    &--text {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 20px;\n      font-size: 12px;\n      font-weight: bold;\n      line-height: 12px;\n      color: var(--ui-white);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: #00c304;\n      border-radius: 20px;\n\n      @include media('<tablet') {\n        font-size: 8px;\n        font-weight: 800;\n        line-height: 16px;\n      }\n    }\n  }\n}\n\n@mixin product-dialog {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n\n  @include media('<=tablet') {\n    align-items: flex-start;\n    justify-content: flex-start;\n    height: initial;\n  }\n\n  &-mobile {\n    align-items: flex-start !important;\n    justify-content: flex-start !important;\n    height: initial;\n  }\n}\n\n@mixin product-page {\n  position: relative;\n  display: grid;\n  grid-template-columns: 1fr 0 max(452px);\n  gap: 0 35px;\n  align-items: center;\n  margin: 50px 0 90px;\n\n  @include media('<=desktop-mini') {\n    margin: 26px 0;\n  }\n\n  @include media('<=desktop') {\n    grid-template-columns: 1fr;\n    padding-bottom: 0;\n  }\n}\n\n.product--main-desktop {\n  @include product-main-desktop;\n}\n\n.product--main-mobile {\n  @include product-main-mobile;\n}\n\n.product--dialog {\n  @include product-dialog;\n}\n\n.product--page {\n  @include product-page;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useCityStore } from '@/store/city/city'\n\nimport { HttpStatusCode, NotFoundError, ServerError } from '@/api/results'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\n\nimport ProductItem from '@/components/Product/ProductItem/ProductItem.vue'\n\nconst route = useRoute()\nconst { $apiService } = useNuxtApp()\n\nconst {\n  cityInfo: { domain },\n} = useCityStore()\n\nconst { data: productInfo, error } = await useAsyncData(async () => {\n  const result = await $apiService.category.fetchOneProduct(\n    String(route.params.product),\n  )\n\n  if (result instanceof NotFoundError) {\n    throw createError({\n      statusCode: HttpStatusCode.NOT_FOUND,\n    })\n  }\n\n  if (result instanceof ServerError) {\n    throw createError({\n      statusCode: HttpStatusCode.INTERNAL_SERVER_ERROR,\n    })\n  }\n\n  return result.data\n})\n\nif (error.value) showError(error.value)\n\nusePopupFetch()\n</script>\n\n<template>\n  <div class=\"base-container\">\n    <div v-if=\"productInfo\" class=\"page__content\">\n      <app-head\n        :title=\"productInfo?.seo?.seo_title\"\n        :seo=\"{\n          title: productInfo?.seo?.seo_title,\n          keywords: productInfo?.seo?.seo_keywords,\n          description: productInfo?.seo?.seo_description,\n        }\"\n      />\n\n      <the-breadcrumbs\n        :breadcrumbs=\"productInfo.breadcrumbs\"\n        :domain=\"domain\"\n      />\n\n      <product-item\n        :product=\"productInfo\"\n        :parent-component=\"NAME_PARENT_COMPONENT.PAGE\"\n      />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.base-container {\n  padding: 30px calc((100% - 1200px) / 2) 100px;\n  @include media('>=portrait-phone', '<=desktop') {\n    padding-right: 48px;\n    padding-left: 48px;\n  }\n\n  @include media('<=portrait-phone') {\n    padding-right: 20px;\n    padding-left: 20px;\n  }\n}\n</style>\n"],"names":["NAME_PARENT_COMPONENT","TagSize","defineLayoutOfProduct","pageName","propValue","props","__props","isTooltipShow","ref","emit","__emit","isMobileOrTablet","useDevice","onMounted","addToCart","setIncreaseProduct","setDecreaseProduct","isDesktop","sizeButton","computed","fontButton","productModificationId","_a","tabsSize","changeModification","modificationId","cityStore","useCityStore","basketStore","useBasketStore","showSnackbar","useAppStore","vOnOpenDialog","openDialogProduct","isTitleProduct","isShowDescription","isHighLight","item","currencyCode","currencySymbol","quantityInProductBasket","productId","isCompoundVisible","basketError","quantitySelectedProducts","setProductQuantity","decreaseQuantity","increaseQuantity","useProductCounter","pushMetrics","useSendMetricsOfProduct","onUpdateProductQuantity","quantity","EcommerceEventName","SnackbarType","setProduct","type","SetProductType","getProductMicrolayouts","itemPropProductTitle","itemPropProductDescription","isMobile","productTitle","productImage","productImageList","setError","useProductImage","slideWidth","checkVisibleQuantity","isShowDiscount","itemTypeProductItem","onError","error","target","tagsClasses","tagSize","$metrics","useNuxtApp","productClasses","isMainPage","wrapperComponent","wrapperAttrs","isShowHighLight","currentModification","watch","newProduct","ecommerceData","mapEcommerceData","itemScopeProductItem","modification","route","useRoute","$apiService","domain","productInfo","__temp","__restore","_withAsyncContext","useAsyncData","result","NotFoundError","createError","HttpStatusCode","ServerError","showError","usePopupFetch"],"mappings":"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","debug_id":"71a3de73-4275-5bf4-be96-64d401404f25"}