{"version":3,"file":"Do1R1W5s.js","sources":["../../../../types/products.ts","../../../../types/components/product-card.types.ts","../../../../components/Product/ProductTags/ProductTagExtra.vue","../../../../components/Product/ProductTags/ProductTag.vue","../../../../components/Product/ProductTags/ProductTagElements.vue","../../../../components/Product/ProductTags/ProductTagRating.vue","../../../../components/Product/ProductTags/ProductTagDiscount.vue","../../../../components/Product/ProductTags/ProductTags.vue","../../../../utils/defineLayoutOfProduct.ts","../../../../types/store/category.ts","../../../../components/Product/ProductItem/ProductContent/MainDesktopColories.vue","../../../../components/Product/ProductItem/ProductContent/ProductButton.vue","../../../../node_modules/@smenaspace/ui-layer/components/counter/Counter.vue","../../../../components/Product/ProductItem/ProductContent/ProductButtonPage.vue","../../../../components/Product/ProductItem/ProductContent/ProductCalories.vue","../../../../components/Product/ProductItem/ProductContent/ProductCardComponentsItem.vue","../../../../components/Product/ProductItem/ProductContent/ProductCardComponents.vue","../../../../components/Product/ProductItem/ProductContent/ProductModifications.vue","../../../../components/Product/ProductItem/ProductContent/ProductContent.vue","../../../../components/Product/ProductItem/ProductImage/ProductImage.vue","../../../../components/Product/ProductCard/ProductCardTag.vue","../../../../components/Product/ProductCard/ProductCardRatingTag.vue","../../../../components/Product/ProductItem/ProductTags/ProductTag.vue","../../../../components/Product/ProductItem/ProductTags/ProductTags.vue","../../../../components/Product/ProductItem/ProductItem.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","export const enum ProductType {\n  simple = 'simple',\n  selection = 'selection',\n}\n\nexport const enum ProductParentType {\n  card = 'card',\n  detail = 'detail',\n}\n\nexport type ProductTagSize = 'sm' | 'md'\n","<script setup lang=\"ts\">\nimport { NewProductTag } from '@/types/api/api-v4/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\n\ntype Props = {\n  mainTags: NewProductTag[]\n  additionalTags: NewProductTag[]\n  type: ProductParentType\n}\n\nconst props = defineProps<Props>()\n\nconst componentClasses = [\n  'product-tag-extra',\n  `product-tag-extra--type-${props.type}`,\n]\n\nconst filteredTag = computed(() => {\n  // По умолчанию ищем is_extra среди основных тегов\n  const tags = [...props.mainTags]\n\n  // Если это детальная страница товара или ДО товара, то ищем среди основных и дополнительных тегов\n  if (props.type === ProductParentType.detail) {\n    tags.push(...props.additionalTags)\n  }\n\n  return tags.find((tag) => tag.is_extra)\n})\n</script>\n\n<template>\n  <nuxt-img\n    v-if=\"filteredTag\"\n    :class=\"componentClasses\"\n    :src=\"filteredTag.image\"\n    :alt=\"filteredTag.name\"\n  />\n</template>\n\n<style lang=\"scss\" scoped>\n.product-tag-extra--type-card {\n  width: 12px;\n  height: 12px;\n}\n\n.product-tag-extra--type-detail {\n  width: 14px;\n  height: 14px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport {\n  ProductParentType,\n  ProductTagSize,\n} from '@/types/components/product-card.types'\n\ntype Props = {\n  type: ProductParentType\n  size?: ProductTagSize\n  color?: string\n  backgroundColor?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'md',\n  color: '',\n  backgroundColor: '',\n})\n\nconst componentClasses = [\n  'product-tag',\n  `product-tag--type-${props.type}`,\n  `product-tag--size-${props.size}`,\n]\n\nconst componentStyles = {\n  color: props.color || 'var(--ui-white)',\n  background: props.backgroundColor || 'var(--ui-violet)',\n}\n</script>\n\n<template>\n  <div :class=\"componentClasses\" :style=\"componentStyles\">\n    <slot />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-tag {\n  display: flex;\n  gap: 2px;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  border-radius: 50px;\n}\n\n.product-tag--size-sm {\n  padding: 2px 4px;\n\n  @include media('>=desktop-mini') {\n    padding: 2px 8px;\n  }\n}\n\n.product-tag--size-md {\n  padding: 4px 8px;\n}\n\n.product-tag--type-card {\n  font-size: 8px;\n  font-weight: 700;\n  line-height: 10px;\n\n  @include media('>=desktop-mini') {\n    font-size: 12px;\n    font-weight: 800;\n    line-height: 16px;\n  }\n}\n\n.product-tag--type-detail {\n  font-size: 12px;\n  font-weight: 800;\n  line-height: 16px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { NewProduct } from '@/types/api/api-v4/product'\nimport {\n  ProductParentType,\n  ProductTagSize,\n} from '@/types/components/product-card.types'\n\nimport ProductTag from '@/components/Product/ProductTags/ProductTag.vue'\n\ntype Props = {\n  product: NewProduct\n  type: ProductParentType\n  size?: ProductTagSize\n}\n\nconst props = defineProps<Props>()\n\nconst isVisible = computed(() => {\n  return (\n    props.product?.elements && props.product.category_slug?.includes('sety')\n  )\n})\n</script>\n\n<template>\n  <product-tag\n    v-if=\"isVisible\"\n    color=\"var(--ui-white)\"\n    background-color=\"rgba(var(--ui-secondary-rgb), 0.8)\"\n    :type=\"type\"\n    :size=\"size\"\n  >\n    {{ product.elements }}&nbsp;шт.\n  </product-tag>\n</template>\n","<script setup lang=\"ts\">\nimport { NewProduct } from '@/types/api/api-v4/product'\nimport {\n  ProductParentType,\n  ProductTagSize,\n} from '@/types/components/product-card.types'\n\nimport ProductTag from '@/components/Product/ProductTags/ProductTag.vue'\n\nconst MIN_RATING = 4\n\ntype Props = {\n  product: NewProduct\n  type: ProductParentType\n  size?: ProductTagSize\n}\n\nconst props = defineProps<Props>()\n\nconst componentClasses = [\n  'product-tag-rating',\n  `product-tag-rating--type-${props.type}`,\n]\n\nconst isVisible = computed(() => {\n  return props.product?.rating && props.product?.rating >= MIN_RATING\n})\n</script>\n\n<template>\n  <product-tag\n    v-if=\"isVisible\"\n    :class=\"componentClasses\"\n    color=\"var(--ui-white)\"\n    background-color=\"rgba(var(--ui-secondary-rgb), 0.8)\"\n    :type=\"type\"\n    :size=\"size\"\n  >\n    <nuxt-img src=\"/product/rating-star.svg\" alt=\"Рейтинг\" />\n\n    <span>{{ product.rating }}</span>\n  </product-tag>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-tag-rating {\n  img {\n    flex-shrink: 0;\n  }\n}\n\n.product-tag-rating--type-card {\n  img {\n    width: 10px;\n    height: 10px;\n\n    @include media('>=desktop-mini') {\n      width: 14px;\n      height: 14px;\n    }\n  }\n}\n\n.product-tag-rating--type-detail {\n  img {\n    width: 16px;\n    height: 16px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useCityStore } from '@/store/city/city'\n\nimport { NewProductModification } from '@/types/api/api-v4/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\n\nimport ProductTag from '@/components/Product/ProductTags/ProductTag.vue'\n\ntype Props = {\n  type: ProductParentType\n  currentModification: NewProductModification\n}\n\nconst props = defineProps<Props>()\n\nconst { currencySymbol } = useCityStore()\n\nconst discountValue = computed(() => {\n  const { discount, price, subprice } = props.currentModification\n\n  return discount ? Number((price - subprice).toFixed(2)) : 0\n})\n</script>\n\n<template>\n  <product-tag\n    v-if=\"discountValue\"\n    color=\"var(--ui-text-primary)\"\n    background-color=\"var(--ui-yellow)\"\n    :type=\"type\"\n  >\n    {{ discountValue }} {{ currencySymbol }}\n  </product-tag>\n</template>\n","<script setup lang=\"ts\">\nimport type {\n  NewProductModification,\n  NewProductTag,\n} from '@/types/api/api-v4/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\n\nimport ProductTag from '@/components/Product/ProductTags/ProductTag.vue'\nimport ProductTagDiscount from '@/components/Product/ProductTags/ProductTagDiscount.vue'\n\ntype Props = {\n  type: ProductParentType\n  currentModification: NewProductModification\n  mainTags: NewProductTag[]\n  additionalTags: NewProductTag[]\n}\n\nconst props = defineProps<Props>()\n\nconst filteredTags = computed(() => {\n  // По умолчанию отображаем основные теги\n  const tags = [...props.mainTags]\n\n  // Если это детальная страница товара или ДО товара, то отображаем основные и дополнительные теги\n  if (props.type === ProductParentType.detail) {\n    tags.push(...props.additionalTags)\n  }\n\n  return tags.filter(({ is_extra, hidden }) => !is_extra && !hidden)\n})\n\nconst componentClasses = computed(() => {\n  return ['product-tags', `product-tags--type-${props.type}`]\n})\n</script>\n\n<template>\n  <div :class=\"componentClasses\">\n    <slot name=\"prepend\" />\n\n    <product-tag-discount\n      :current-modification=\"currentModification\"\n      :type=\"type\"\n    />\n\n    <product-tag\n      v-for=\"(tag, index) in filteredTags\"\n      :key=\"index\"\n      :color=\"tag.hover_color\"\n      :background-color=\"tag.hover_background_color\"\n      :type=\"type\"\n    >\n      {{ tag.name }}\n    </product-tag>\n\n    <slot name=\"append\" />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-tags {\n  display: flex;\n  gap: 4px;\n}\n\n.product-tags--type-card {\n  min-height: 21px;\n  padding: 8px;\n\n  @include media('>=desktop-mini') {\n    min-height: 40px;\n    padding: 16px 16px 8px;\n  }\n}\n</style>\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","import { AxiosError } from 'axios'\n\nimport { Category } from '@/types/api/api-v3/category'\nimport { LoadState } from '@/types/main'\nimport { ErrorData } from '@/types/api/api-v3/basket'\n\nexport type CategoryState = LoadState<Category[], AxiosError<ErrorData>>\n\nexport type SimpleCategoriesState = LoadState<Category[]>\n\n// Перечисление для определения типа ивента counter-а\nexport enum SetProductType {\n  INCREASE = 'INCREASE',\n  DECREASE = 'DECREASE',\n}\n\nexport type SetProductIncludeType = 'INCREASE' | 'DECREASE'\n","<script setup lang=\"ts\">\nimport { NutritionalValues } from '@/types/api/api-v3/product'\n\ntype Props = {\n  nutritionalValue: NutritionalValues\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: $unactive-grey;\n    text-transform: uppercase;\n    cursor: pointer;\n    background-color: $button-background;\n    border-radius: 6px;\n\n    &:hover {\n      color: $text-dark-gray;\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: $white;\n      text-align: center;\n    }\n\n    &-table {\n      font-size: 12px;\n      color: $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\">\nimport { computed, onMounted } from 'vue'\n\n/* Components */\nimport AppButton from '@/components/App/AppButton.vue'\nimport AppCounter from '@/components/App/AppCounter.vue'\n\nconst props = defineProps({\n  productQuantity: {\n    type: Number,\n    required: true,\n  },\n  large: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  isForDialog: {\n    type: Boolean,\n    required: false,\n    default: false,\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 buttonClasses = computed(() => {\n  return [\n    'actions',\n    {\n      'large--button': props.large,\n      'dialog-button': props.isForDialog,\n    },\n  ]\n})\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=\"buttonClasses\">\n    <app-button\n      v-if=\"!productQuantity\"\n      :disabled=\"disabled\"\n      class=\"action__button\"\n      @click=\"addToCart\"\n    >\n      Хочу!\n    </app-button>\n    <app-counter\n      v-else\n      class=\"action__counter\"\n      :model-value=\"productQuantity\"\n      :large=\"large\"\n      @increase=\"setIncreaseProduct\"\n      @decrease=\"setDecreaseProduct\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.actions {\n  button.action__button {\n    padding: 12px 35px;\n    font-weight: 800;\n    border-radius: 40px;\n    box-shadow: 0 4px 20px rgba(255, 80, 0, 0.16);\n    @include media('<=desktop-mini') {\n      min-height: 30px;\n      padding: 8px 24px;\n      font-size: 12px;\n      font-weight: 800;\n      line-height: 14px;\n    }\n  }\n\n  .action__counter {\n    @include media('<=desktop-mini') {\n      height: 30px;\n      font-size: 12px;\n      font-weight: 800;\n      line-height: 14px;\n    }\n  }\n}\n\n.large--button {\n  button.action__button {\n    width: 177px;\n    height: 64px;\n  }\n  .app-count__value {\n    font-size: 18px;\n    font-weight: 600;\n  }\n  .app-count__btn {\n    width: 64px !important;\n    height: 64px !important;\n  }\n}\n\n.dialog-button {\n  button.action__button {\n    width: 108px;\n    padding: 12px 35px;\n\n    @include media('<=desktop-mini') {\n      min-height: 40px;\n      font-size: 14px !important;\n    }\n  }\n\n  :deep() {\n    .app-count {\n      height: 40px;\n\n      &__value {\n        width: 28px;\n        margin: 0;\n        font-size: 12px;\n        font-weight: 600;\n      }\n\n      &__btn {\n        width: 40px !important;\n        height: 40px !important;\n      }\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { CounterSize, CounterVariant } from './types'\n\ntype Props = {\n  size?: CounterSize\n  variant?: CounterVariant\n  value: number\n  min?: number\n  max?: number\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'primary',\n  size: 'sm',\n  min: 0,\n  max: undefined,\n})\n\nconst emit = defineEmits(['onIncrease', 'onDecrease'])\n\nconst componentClasses = computed(() => {\n  return [\n    'app-counter',\n    `app-counter--size-${props.size}`,\n    `app-counter--variant-${props.variant}`,\n    {\n      'app-counter--disabled': props.disabled,\n    },\n  ]\n})\n\nconst isHidden = computed(() => props.value <= props?.min)\n</script>\n\n<template>\n  <div :class=\"componentClasses\" :aria-disabled=\"disabled\">\n    <the-button\n      data-test-id=\"counter-minus\"\n      class=\"app-counter__button\"\n      :class=\"{ 'app-counter__button--hidden': isHidden }\"\n      variant=\"transparent\"\n      radius=\"lg\"\n      icon=\"minus\"\n      aria-label=\"Уменьшить\"\n      type=\"button\"\n      :size=\"size\"\n      @click=\"emit('onDecrease')\"\n    />\n\n    <div v-show=\"!isHidden\" class=\"app-counter__number\">\n      {{ value }}\n    </div>\n\n    <the-button\n      data-test-id=\"counter-plus\"\n      class=\"app-counter__button\"\n      :class=\"{ 'app-counter__button--hidden': isHidden }\"\n      variant=\"transparent\"\n      radius=\"lg\"\n      icon=\"plus\"\n      aria-label=\"Увеличить\"\n      type=\"button\"\n      :size=\"size\"\n      @click=\"emit('onIncrease')\"\n    />\n\n    <the-button\n      v-show=\"isHidden\"\n      data-test-id=\"counter-add\"\n      class=\"app-counter__button app-counter__button--overlay\"\n      variant=\"transparent\"\n      radius=\"lg\"\n      icon=\"plus\"\n      aria-label=\"Добавить\"\n      type=\"button\"\n      :size=\"size\"\n      :ripple=\"false\"\n      @click=\"emit('onIncrease')\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/ui-layer/styles/mixins';\n\n.app-counter {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 12px;\n  font-weight: 800;\n  line-height: 16px;\n  color: var(--ui-text-primary);\n  border-radius: 100px;\n  transition: background-color 0.2s ease-in-out;\n\n  @include media('>=desktop-mini') {\n    font-size: 16px;\n    line-height: 20px;\n  }\n\n  &__number {\n    width: 24px;\n    margin: 0 auto;\n    text-align: center;\n    user-select: none;\n  }\n\n  &__button {\n    transition: all 0.2s ease-in-out;\n\n    &--overlay {\n      position: absolute;\n      width: 100% !important;\n    }\n\n    &--hidden {\n      pointer-events: none;\n      visibility: hidden;\n      opacity: 0;\n    }\n  }\n\n  &--size-sm {\n    min-width: 108px;\n  }\n\n  &--size-md {\n    min-width: 160px;\n  }\n\n  &--variant-primary {\n    background-color: var(--ui-grey);\n\n    @include media('>=desktop-mini') {\n      &:hover {\n        background-color: var(--ui-grey--hover);\n      }\n    }\n  }\n\n  &--variant-secondary {\n    background-color: var(--ui-white);\n  }\n\n  &--disabled {\n    pointer-events: none;\n    opacity: 0.5;\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'))\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=\"sizeButton\"\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: $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 { Component } from '@/types/api/api-v3/product'\n\ntype Props = {\n  component: Component\n}\n\nconst props = defineProps<Props>()\n\nconst isErrorImage = ref(false)\n\nconst imageUrl = computed(() => {\n  if (!props.component?.image || isErrorImage.value) {\n    return './no-image-category.webp'\n  }\n\n  return props.component.image\n})\n</script>\n\n<template>\n  <div class=\"component\">\n    <nuxt-img\n      class=\"component__image\"\n      :src=\"imageUrl\"\n      :alt=\"component.name\"\n      @error=\"isErrorImage = true\"\n    />\n\n    <h5 class=\"component__title\">{{ component.name }}</h5>\n\n    <p class=\"component__description\">{{ component.description }}</p>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.component {\n  min-width: 140px;\n  max-width: 140px;\n  height: 180px;\n  padding: 10px;\n  margin-right: 12px;\n  cursor: pointer;\n  background: $white;\n  border-radius: 16px;\n  box-shadow: 0 4px 13px rgba(50, 52, 72, 0.07);\n  -webkit-transition: max-width 0.5s ease;\n  transition: max-width 0.5s ease;\n\n  &__image {\n    width: 76px;\n    height: 50px;\n    margin-top: 4px;\n  }\n\n  &__title {\n    width: 100%;\n    margin-top: 8px;\n    font-size: 12px;\n    font-weight: 800;\n    line-height: 11px;\n    color: $text-dark-gray;\n    white-space: pre-wrap;\n  }\n  &__description {\n    display: -moz-box;\n    display: -webkit-box;\n    width: 100%;\n    margin-block-end: 0;\n    margin-top: 8px;\n    overflow: hidden;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 12px;\n    color: $dark-grey;\n\n    // для разных браузеров ставим ограничение в 5 строк видимости описания\n    text-overflow: ellipsis;\n    white-space: pre-wrap;\n    -moz-box-orient: vertical;\n    -webkit-line-clamp: 5;\n    -webkit-box-orient: vertical;\n    line-clamp: 5;\n  }\n\n  &:hover {\n    max-width: 250px;\n  }\n\n  @include media('>=tablet', '<=desktop-mini') {\n    &__title {\n      font-size: 14px;\n    }\n\n    &__description {\n      font-size: 12px;\n    }\n  }\n\n  @include media('<desktop-mini') {\n    display: grid;\n    grid-template-columns: max-content 1fr;\n    gap: 0 10px;\n    align-items: center;\n    min-width: 100%;\n    height: max-content;\n    min-height: 105px;\n    padding: 20px 10px;\n    box-shadow: 0 6px 30px rgba(50, 52, 72, 0.1);\n\n    &__image {\n      grid-area: 1 / 1 / 3 / 2;\n    }\n\n    &__title {\n      grid-area: 1 / 2 / 2 / 3;\n      height: max-content;\n      font-weight: 800;\n      line-height: 16px;\n    }\n\n    &__description {\n      grid-area: 2 / 2 / 3 / 3;\n      font-weight: 500;\n      line-height: 14px;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { PropType } from 'vue'\n\n/* Components */\nimport ProductCardComponentsItem from '@/components/Product/ProductItem/ProductContent/ProductCardComponentsItem.vue'\nimport IconArrowRight from '@/components/Icons/IconArrowRight.vue'\nimport IconArrowLeft from '@/components/Icons/IconArrowLeft.vue'\n\n/* Types */\nimport { Component } from '@/types/api/api-v3/product'\n\nconst props = defineProps({\n  components: {\n    type: Array as PropType<Component[]>,\n    required: true,\n  },\n})\n</script>\n\n<template>\n  <v-slide-group\n    show-arrows\n    :prev-icon=\"IconArrowLeft\"\n    :next-icon=\"IconArrowRight\"\n  >\n    <v-slide-group-item\n      v-for=\"component in props.components\"\n      :key=\"component.id\"\n      v-ripple\n    >\n      <product-card-components-item :component=\"component\" />\n    </v-slide-group-item>\n  </v-slide-group>\n</template>\n\n<style lang=\"scss\" scoped>\n.v-slide-group {\n  position: relative;\n  display: flex;\n  flex: 0 1 auto;\n  max-width: 100%;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n\n:deep() {\n  .v-slide-group__container {\n    padding-bottom: 20px;\n\n    @include media('<=desktop-mini') {\n      padding: 24px 48px 20px 48px;\n    }\n\n    @include media('<=tablet') {\n      padding: 24px 20px 26px 20px;\n    }\n  }\n\n  .v-slide-group__prev,\n  .v-slide-group__next {\n    position: absolute;\n    top: 0;\n    z-index: 1;\n    width: 30px;\n    height: 100%;\n\n    &--disabled {\n      display: none;\n    }\n\n    .v-icon:before {\n      color: $text-black;\n    }\n  }\n\n  .v-slide-group__next {\n    right: -10px;\n    background: linear-gradient(90deg, rgba(255, 255, 255, 0), white);\n  }\n\n  .v-slide-group__prev {\n    left: -10px;\n    background: linear-gradient(90deg, white, rgba(255, 255, 255, 0));\n  }\n\n  .v-slide-group__content {\n    @include media('<desktop-mini') {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 20px;\n    }\n    @include media('<tablet') {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 10px;\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'\nimport { useToggleStore } from '@/store/toggle/toggle'\n\nimport { Modification, Product } from '@/types/api/api-v3/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\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 ProductCardComponents from '@/components/Product/ProductItem/ProductContent/ProductCardComponents.vue'\nimport ProductCompound from '@/components/Product/ProductItem/ProductContent/ProductCompound.vue'\nimport ProductModifications from '@/components/Product/ProductItem/ProductContent/ProductModifications.vue'\nimport ProductTagExtra from '@/components/Product/ProductTags/ProductTagExtra.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()\nconst { newProductCardEnabled } = useToggleStore()\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  if (newProductCardEnabled) return false\n\n  return props.product.tags.find((item) => item.as_highlight)\n})\n\nconst isVisibleProductCalories = computed(\n  () =>\n    NAME_PARENT_COMPONENT.DIALOG === props.parentComponent ||\n    NAME_PARENT_COMPONENT.PAGE === props.parentComponent,\n)\n\nconst isVisibleComponents = computed(\n  () =>\n    !!props.product.components.length &&\n    !isDesktop &&\n    NAME_PARENT_COMPONENT.DIALOG === props.parentComponent,\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 showExtraTag = computed(() => {\n  return (\n    props.product?.main_tags &&\n    props.product?.additional_tags &&\n    newProductCardEnabled\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  if (\n    newProductCardEnabled &&\n    props.parentComponent === NAME_PARENT_COMPONENT.DIALOG\n  ) {\n    setTimeout(() => {\n      emit('changeModification', modificationId)\n    }, 100)\n\n    return\n  }\n\n  // TODO: Удалить после того как все города перейдут на новый дизайн карточек\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\n      <product-tag-extra\n        v-if=\"showExtraTag\"\n        class=\"product__content-extra-tag\"\n        :main-tags=\"product.main_tags\"\n        :additional-tags=\"product.additional_tags\"\n        :type=\"ProductParentType.detail\"\n      />\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      v-if=\"isVisibleProductCalories\"\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        :is-for-dialog=\"NAME_PARENT_COMPONENT.DIALOG === 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    </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\n    <product-card-components\n      v-if=\"isVisibleComponents\"\n      class=\"product__content-components\"\n      :components=\"product.components\"\n    />\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  &-extra-tag {\n    margin-left: 4px;\n\n    @include media('>=desktop-mini') {\n      margin-left: 8px;\n    }\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: $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: $text-black;\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: $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: $text-black;\n      border-radius: 20px;\n\n      h1 {\n        font-size: 12px;\n        font-weight: 800;\n        line-height: 14px;\n        color: $text-black;\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: $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      :deep() {\n        .app-button.v-btn {\n          height: 30px;\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: $text-dark-gray;\n      word-break: break-word;\n\n      h1 {\n        font-size: 22px;\n        font-weight: 800;\n        line-height: 26px;\n        color: $text-dark-gray;\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: $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: $text-black;\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: $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: $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: #fff;\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: $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 { useCityStore } from '@/store/city/city'\nimport { useToggleStore } from '@/store/toggle/toggle'\n\nimport { Modification, Product } from '@/types/api/api-v3/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\n\nimport ProductTagElements from '@/components/Product/ProductTags/ProductTagElements.vue'\nimport ProductTagRating from '@/components/Product/ProductTags/ProductTagRating.vue'\nimport ProductTagsNew from '@/components/Product/ProductTags/ProductTags.vue'\n\nconst emit = defineEmits(['openDialogProduct'])\n\ntype Props = {\n  product: Product\n  currentModification: Modification\n  parentComponent: string\n  wrapperAttrs: Record<string, unknown>\n  wrapperComponent: string\n  isMainPage: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  wrapperComponent: '',\n})\n\nconst { isDesktop, isMobileOrTablet } = useDevice()\n\nconst {\n  cityInfo: { padeg },\n} = useCityStore()\nconst { newProductCardEnabled } = useToggleStore()\n\nconst productTitle = computed(() => {\n  if (props.product.name === props.currentModification.name) {\n    return `Заказать \"${props.product.name}\" с доставкой в ${padeg?.pred} от ресторана Farfor`\n  }\n  return `Заказать \"${props.product.name} ${props.currentModification.name}\" с доставкой в ${padeg?.pred} от ресторана Farfor`\n})\n\nconst isImageCrashed = ref(false)\n\nconst checkVisibleQuantity = computed(() =>\n  Boolean(\n    props.product.elements &&\n      props.product.category_slug?.includes('sety') &&\n      !newProductCardEnabled,\n  ),\n)\n\nconst isHighLight = computed(() => {\n  if (newProductCardEnabled) return false\n\n  return props.product.tags.find((item) => item.as_highlight)\n})\n\nconst isShowDiscount = computed(() => {\n  return !!props.currentModification.discount && !newProductCardEnabled\n})\n\nconst showNewTags = computed(() => {\n  return newProductCardEnabled && props.product.main_tags && isDesktop\n})\n\nconst productImageClasses = computed(() => {\n  return [\n    'product__image',\n    {\n      'product__image--mobile':\n        NAME_PARENT_COMPONENT.DIALOG === props.parentComponent &&\n        isMobileOrTablet,\n      'product__image--dialog-desktop':\n        NAME_PARENT_COMPONENT.DIALOG === props.parentComponent && isDesktop,\n    },\n  ]\n})\n\nconst openDialogProduct = () => {\n  emit('openDialogProduct')\n}\n\nconst getProductMicrolayouts = defineLayoutOfProduct(props.parentComponent)\n\nconst itemTypeProductItem = getProductMicrolayouts('image')\n</script>\n\n<template>\n  <component\n    :is=\"wrapperComponent\"\n    :class=\"productImageClasses\"\n    v-bind=\"wrapperAttrs\"\n    v-on=\"isMainPage ? { click: openDialogProduct } : {}\"\n    @click.prevent\n  >\n    <nuxt-img\n      v-if=\"product.image && !isImageCrashed\"\n      :src=\"product.image\"\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=\"isImageCrashed = true\"\n    />\n\n    <nuxt-img\n      v-else\n      :alt=\"product.name\"\n      :title=\"productTitle\"\n      src=\"/no-image-category.webp\"\n      format=\"webp\"\n      width=\"100%\"\n      height=\"100%\"\n      loading=\"lazy\"\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\n    <product-tags-new\n      v-if=\"showNewTags\"\n      class=\"product__image-tags\"\n      :type=\"ProductParentType.detail\"\n      :current-modification=\"currentModification\"\n      :main-tags=\"product.main_tags\"\n      :additional-tags=\"product.additional_tags\"\n    >\n      <template #prepend>\n        <product-tag-elements\n          :product=\"product\"\n          :type=\"ProductParentType.detail\"\n        />\n\n        <product-tag-rating\n          :product=\"product\"\n          :type=\"ProductParentType.detail\"\n        />\n      </template>\n    </product-tags-new>\n  </component>\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: $white;\n  background: $text-dark-gray;\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: $discount-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-dialog {\n  .product__image {\n    position: relative;\n    width: 426px;\n    height: 100%;\n\n    &--mobile {\n      width: inherit;\n      height: initial;\n      margin: 0 48px;\n      overflow: visible;\n\n      @include media('<=tablet') {\n        margin: 0 20px;\n      }\n    }\n\n    &--dialog-desktop {\n      height: 284px;\n    }\n  }\n\n  .product__image-quantity {\n    @include quantity;\n\n    bottom: 0;\n\n    @include media('<=tablet') {\n      width: initial;\n      margin-top: 24px;\n    }\n  }\n\n  .product__image-sale {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    justify-content: center;\n    width: fit-content;\n    padding: 7px 10px;\n    font-size: 12px;\n    font-weight: bold;\n    line-height: 12px;\n    color: $white;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    background: $success;\n    border-radius: 20px;\n\n    @include media('<=tablet') {\n      position: relative;\n      padding: 6px 10px;\n    }\n  }\n\n  .product__image-discount {\n    position: absolute;\n    top: 0;\n    right: 0;\n    padding: 6px 12px;\n    font-size: 16px;\n    font-weight: 800;\n    line-height: 19px;\n    background: $discount-yellow;\n    border-radius: 20px;\n\n    @include media('<=tablet') {\n      padding: 5px 12px;\n      font-size: 12px;\n      line-height: 14px;\n    }\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__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--dialog {\n  @include product-dialog;\n}\n\n.product--page {\n  @include product-page;\n}\n</style>\n","<script setup lang=\"ts\">\n// TODO: Размер lg удалить когда детальная страница товара будет с новым дизайном\ntype Size = 'sm' | 'md' | 'lg'\n\ntype Props = {\n  size: Size\n  backgroundColor?: string\n}\n\nconst props = defineProps<Props>()\n\nconst componentClasses = computed(() => {\n  return [`product-card-tag--size-${props.size}`]\n})\n\nconst componentStyles = computed(() => {\n  return {\n    backgroundColor: props.backgroundColor,\n  }\n})\n</script>\n\n<template>\n  <div\n    class=\"product-card-tag\"\n    :class=\"componentClasses\"\n    :style=\"componentStyles\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-card-tag {\n  display: flex;\n  align-items: center;\n  text-align: center;\n  border-radius: 50px;\n}\n\n.product-card-tag--size-sm {\n  gap: 2px;\n  padding: 2px 4px;\n  font-size: 8px;\n  font-weight: 700;\n  line-height: 10px;\n\n  @include media('>=desktop-mini') {\n    padding-right: 8px;\n    padding-left: 8px;\n    font-size: 12px;\n    font-weight: 800;\n    line-height: 16px;\n  }\n}\n\n.product-card-tag--size-md {\n  gap: 4px;\n  padding: 4px 8px;\n  font-size: 12px;\n  font-weight: 800;\n  line-height: 16px;\n}\n\n.product-card-tag--size-lg {\n  gap: 4px;\n  padding: 6px 8px;\n  font-size: 16px;\n  font-weight: 800;\n  line-height: 20px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { NewProduct } from '@/types/api/api-v4/product'\n\nimport ProductCardTag from '@/components/Product/ProductCard/ProductCardTag.vue'\n\nconst MIN_RATING = 4\n\n// TODO: Размер lg удалить когда детальная страница товара будет с новым дизайном\ntype Size = 'sm' | 'md' | 'lg'\n\ntype Props = {\n  product: NewProduct\n  size: Size\n}\n\nconst props = defineProps<Props>()\n\nconst componentClasses = computed(() => {\n  return [`product-card-rating-tag--size-${props.size}`]\n})\n\nconst isVisible = computed(() => {\n  return props.product?.rating && props.product?.rating >= MIN_RATING\n})\n</script>\n\n<template>\n  <product-card-tag\n    v-if=\"isVisible\"\n    class=\"product-card-rating-tag\"\n    :class=\"componentClasses\"\n    :size=\"size\"\n    background-color=\"var(--ui-dark-grey)\"\n  >\n    <nuxt-img\n      src=\"/product/rating-star.svg\"\n      alt=\"Рейтинг\"\n      class=\"product-card-rating-tag__icon\"\n    />\n    {{ product?.rating }}\n  </product-card-tag>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-card-rating-tag {\n  color: var(--ui-white);\n\n  &__icon {\n    width: var(--rating-icon-size);\n    height: var(--rating-icon-size);\n  }\n}\n\n.product-card-rating-tag--size-sm {\n  --rating-icon-size: 10px;\n\n  @include media('>=desktop-mini') {\n    --rating-icon-size: 14px;\n  }\n}\n\n.product-card-rating-tag--size-md,\n.product-card-rating-tag--size-lg {\n  --rating-icon-size: 16px;\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 { computed, PropType } from 'vue'\n\n/* Types */\nimport { Product } from '@/types/api/api-v3/product'\nimport { NAME_PARENT_COMPONENT, TagSize } from '@/types/products'\n\n/* Components */\nimport ProductCardRatingTag from '@/components/Product/ProductCard/ProductCardRatingTag.vue'\nimport ProductTag from '@/components/Product/ProductItem/ProductTags/ProductTag.vue'\n\nconst props = defineProps({\n  product: {\n    type: Object as PropType<Product>,\n    required: true,\n  },\n  parentComponent: {\n    type: String,\n    required: true,\n  },\n})\n\nconst { isDesktop } = useDevice()\n\nconst ratingTagSize = computed(() => {\n  return isDesktop ? 'lg' : 'md'\n})\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\nconst isVisibleRatingTag = computed(() => {\n  return (\n    NAME_PARENT_COMPONENT.DIALOG === props.parentComponent ||\n    NAME_PARENT_COMPONENT.PAGE === props.parentComponent\n  )\n})\n</script>\n\n<template>\n  <div :class=\"tagsClasses\">\n    <product-card-rating-tag\n      v-if=\"isVisibleRatingTag\"\n      :product=\"product\"\n      :size=\"ratingTagSize\"\n    />\n\n    <product-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    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'\nimport { useToggleStore } from '@/store/toggle/toggle'\n\nimport { Product } from '@/types/api/api-v3/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\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'\nimport ProductTagElements from '@/components/Product/ProductTags/ProductTagElements.vue'\nimport ProductTagRating from '@/components/Product/ProductTags/ProductTagRating.vue'\nimport ProductTagsNew from '@/components/Product/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()\nconst { newProductCardEnabled } = useToggleStore()\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  if (newProductCardEnabled) return false\n\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 showNewTags = computed(() => {\n  return newProductCardEnabled && props.product.main_tags && isMobileOrTablet\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\nconst showOldTags = computed(() => {\n  return (\n    !newProductCardEnabled ||\n    props.parentComponent === NAME_PARENT_COMPONENT.PAGE\n  )\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      :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    />\n\n    <div v-if=\"showNewTags\" class=\"product__tags-top\">\n      <product-tag-elements\n        :product=\"product\"\n        :type=\"ProductParentType.detail\"\n      />\n\n      <product-tag-rating :product=\"product\" :type=\"ProductParentType.detail\" />\n    </div>\n\n    <product-tags-new\n      v-if=\"showNewTags\"\n      class=\"product__tags-new\"\n      :type=\"ProductParentType.detail\"\n      :current-modification=\"currentModification\"\n      :main-tags=\"product.main_tags\"\n      :additional-tags=\"product.additional_tags\"\n    />\n\n    <template v-if=\"showOldTags\">\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    </template>\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 v-deep-content {\n  :deep(.v-responsive__content) {\n    width: auto !important;\n  }\n}\n\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: #fff;\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: $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: #fff;\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  :deep(.v-responsive__content) {\n    width: auto !important;\n  }\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 v-deep-content;\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\n.product__tags-new {\n  max-width: 100%;\n  margin: 16px 20px 0;\n  overflow: hidden;\n}\n\n.product__tags-top {\n  position: absolute;\n  top: 0;\n  left: 20px;\n  display: flex;\n  gap: 4px;\n}\n</style>\n"],"names":["NAME_PARENT_COMPONENT","TagSize","ProductType","ProductParentType","props","__props","componentClasses","filteredTag","computed","tags","tag","componentStyles","isVisible","_a","_b","MIN_RATING","currencySymbol","useCityStore","discountValue","discount","price","subprice","filteredTags","is_extra","hidden","defineLayoutOfProduct","pageName","propValue","SetProductType","isTooltipShow","ref","emit","__emit","buttonClasses","onMounted","addToCart","setIncreaseProduct","setDecreaseProduct","isHidden","isDesktop","useDevice","sizeButton","isErrorImage","imageUrl","productModificationId","tabsSize","changeModification","modificationId","cityStore","basketStore","useBasketStore","showSnackbar","useAppStore","newProductCardEnabled","useToggleStore","vOnOpenDialog","openDialogProduct","isTitleProduct","isShowDescription","isHighLight","item","isVisibleProductCalories","isVisibleComponents","currencyCode","quantityInProductBasket","productId","isCompoundVisible","showExtraTag","basketError","quantitySelectedProducts","setProductQuantity","decreaseQuantity","increaseQuantity","useProductCounter","pushMetrics","useSendMetricsOfProduct","onUpdateProductQuantity","quantity","EcommerceEventName","SnackbarType","setProduct","type","getProductMicrolayouts","itemPropProductTitle","itemPropProductDescription","isMobileOrTablet","padeg","productTitle","isImageCrashed","checkVisibleQuantity","isShowDiscount","showNewTags","productImageClasses","itemTypeProductItem","onError","error","target","ratingTagSize","tagsClasses","tagSize","isVisibleRatingTag","$metrics","useNuxtApp","productClasses","isMainPage","wrapperComponent","wrapperAttrs","isShowHighLight","currentModification","watch","newProduct","ecommerceData","mapEcommerceData","itemScopeProductItem","modification","showOldTags"],"mappings":"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","debug_id":"c372832d-b320-549a-aa6b-124af60cf1d3"}