{"version":3,"file":"_nuxt/YiQI8kRF.js","sources":["../../../../components/Main/MainCategoryFactoid.vue","../../../../components/Product/ProductTags/ProductTagExtra.vue","../../../../components/Product/ProductCard/ProductCardContent.vue","../../../../components/Product/ProductCard/ProductCardFooter.vue","../../../../components/Product/ProductTags/ProductTagElements.vue","../../../../components/Product/ProductCard/ProductCardImage.vue","../../../../components/Product/ProductTags/ProductTagDiscount.vue","../../../../components/Product/ProductTags/ProductTags.vue","../../../../components/Product/ProductCard/ProductCard.vue","../../../../components/Product/ProductDetail/ProductDetailComponent.vue","../../../../components/Product/ProductDetail/ProductDetailComponentSlider.vue","../../../../components/Product/ProductDetail/ProductDetailDescription.vue","../../../../components/Product/ProductDetail/ProductDetailImage.vue","../../../../components/Product/ProductDetail/ProductDetailImageTags.vue","../../../../components/Product/ProductDetail/ProductDetailModifications.vue","../../../../components/Product/ProductDetail/ProductDetailButton.vue","../../../../components/Product/ProductDetail/ProductDetailPricePanel.vue","../../../../components/Product/ProductDetail/ProductDetailTitle.vue","../../../../components/Product/ProductDetail/ProductDetailCard.vue","../../../../components/Product/ProductDialogContent.vue","../../../../components/Product/ProductModal.vue","../../../../composables/useProductModal.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Factoid } from '@/types/main'\n\ntype Props = {\n  factoid: Factoid\n  isCategoryPage?: boolean\n}\n\nconst props = defineProps<Props>()\n\nconst component = computed(() => {\n  return props.factoid.url ? resolveComponent('NuxtLink') : 'div'\n})\n</script>\n\n<template>\n  <component\n    :is=\"component\"\n    :to=\"factoid.url\"\n    class=\"factoid\"\n    :style=\"{ backgroundImage: `url(${factoid.image})` }\"\n  >\n    <div class=\"factoid__text\">\n      <span class=\"factoid__title\">{{ factoid.title }}</span>\n\n      <div v-if=\"factoid.description && isCategoryPage\" class=\"factoid__desc\">\n        {{ factoid.description }}\n      </div>\n    </div>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n.factoid {\n  position: relative;\n  display: block;\n  height: 248px;\n  overflow: hidden;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: cover;\n  border-radius: 16px;\n\n  @include media('>=desktop-mini') {\n    width: 276px;\n    height: 392px;\n    border-radius: 25px;\n  }\n\n  &__text {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    width: 100%;\n    height: 100%;\n    padding: 24px 20px;\n\n    @include media('>=tablet') {\n      padding: 30px 25px;\n    }\n\n    @include media('>=desktop-mini') {\n      padding: 40px 36px;\n    }\n  }\n\n  &__title {\n    display: block;\n    max-width: 200px;\n    font-size: 16px;\n    font-weight: 900;\n    line-height: 19px;\n    color: var(--ui-white);\n\n    @include media('>=tablet') {\n      font-size: 20px;\n    }\n\n    @include media('>=desktop-mini') {\n      font-size: 26px;\n      line-height: 31px;\n    }\n  }\n\n  &__desc {\n    margin-top: 5px;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 17px;\n    color: var(--ui-white);\n\n    @include media('>=desktop-mini') {\n      font-size: 14px;\n    }\n  }\n}\n</style>\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 { NewProduct, NewProductModification } from '@/types/api/api-v4/product'\nimport {\n  ProductParentType,\n  ProductType,\n} from '@/types/components/product-card.types'\n\nimport AppMeasureUnits from '@/components/App/AppMeasureUnits.vue'\nimport ProductTagExtra from '@/components/Product/ProductTags/ProductTagExtra.vue'\n\ntype Props = {\n  product: NewProduct\n  productType: ProductType\n  currentModification: NewProductModification\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['on-open-dialog'])\n\nconst { isDesktop } = useResponsive()\n\nconst productTitleElement = ref<HTMLElement | null>(null)\n\nconst productTitleElementHeight = computed(() => {\n  if (!productTitleElement.value) return 0\n\n  return productTitleElement?.value?.getBoundingClientRect().height\n})\n\nconst productTitle = computed(() => {\n  if (props.product.modifications.length >= 2) {\n    return `${props.product.name}`\n  }\n\n  return props.product.modifications[0].mode\n    ? `${props.product.name}: ${props.product.modifications[0].mode}`\n    : `${props.product.name}`\n})\n\nconst showExtraTag = computed(() => {\n  return props.product.main_tags.length || props.product.additional_tags.length\n})\n\nconst onClick = () => emit('on-open-dialog')\n</script>\n\n<template>\n  <a\n    :href=\"`/product/${product.slug}/`\"\n    class=\"product-card-content\"\n    @click.prevent=\"onClick\"\n  >\n    <div class=\"product-card-content__header\">\n      <span ref=\"productTitleElement\" class=\"product-card-content__title\">\n        {{ productTitle }}\n      </span>\n\n      <product-tag-extra\n        v-if=\"showExtraTag\"\n        class=\"product-card-content__extra\"\n        :main-tags=\"product.main_tags\"\n        :additional-tags=\"product.additional_tags\"\n        :type=\"ProductParentType.card\"\n      />\n\n      <app-measure-units\n        v-if=\"productType === ProductType.simple\"\n        class=\"product-card-content__weight\"\n        :weight=\"currentModification.weight\"\n        :volume-in-liters=\"currentModification.volume_in_liters\"\n        :measure=\"currentModification.measure\"\n      />\n    </div>\n\n    <div\n      v-if=\"isDesktop\"\n      class=\"product-card-content__text\"\n      :class=\"{\n        'product-card-content__text--short': productTitleElementHeight > 20,\n      }\"\n    >\n      {{ currentModification.description }}\n    </div>\n  </a>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-card-content {\n  display: block;\n  flex-grow: 1;\n  padding: 0 8px 8px;\n\n  @include media('>=desktop-mini') {\n    padding: 0 16px 16px;\n    line-height: 21px;\n  }\n\n  &__header {\n    max-height: 36px;\n    overflow: hidden;\n    font-weight: 600;\n    line-height: 18px;\n\n    @include media('>=desktop-mini') {\n      max-height: 42px;\n      line-height: 21px;\n    }\n  }\n\n  &__title {\n    margin-right: 4px;\n    font-size: 14px;\n    color: var(--ui-text-primary);\n    word-break: break-word;\n\n    @include media('>=desktop-mini') {\n      font-size: 16px;\n    }\n  }\n\n  &__extra {\n    margin-right: 4px;\n  }\n\n  &__weight {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--ui-text-secondary);\n\n    @include media('>=desktop-mini') {\n      font-size: 14px;\n    }\n  }\n\n  &__text {\n    display: none;\n\n    @include media('>=desktop-mini') {\n      display: -webkit-box;\n      margin-top: 4px;\n      overflow: hidden;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 18px;\n      color: var(--ui-text-secondary);\n      text-overflow: ellipsis;\n      -webkit-line-clamp: 3;\n      line-clamp: 3;\n      -webkit-box-orient: vertical;\n\n      &--short {\n        -webkit-line-clamp: 2;\n        line-clamp: 2;\n      }\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useCityStore } from '@/store/city/city'\n\nimport { NewProduct, NewProductModification } from '@/types/api/api-v4/product'\nimport { ProductType } from '@/types/components/product-card.types'\n\ntype Props = {\n  product: NewProduct\n  productType: ProductType\n  currentModification: NewProductModification\n  productsQuantity: number\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['on-add', 'on-increase', 'on-decrease'])\n\nconst { currencySymbol } = useCityStore()\n\nconst isActive = computed(() => {\n  return props.productsQuantity > 0 && props.productType === ProductType.simple\n})\n</script>\n\n<template>\n  <div class=\"product-card-footer\">\n    <the-card-button\n      :price=\"currentModification.price\"\n      :old-price=\"currentModification.subprice\"\n      :currency=\"currencySymbol\"\n      :is-active=\"isActive\"\n      :type=\"productType\"\n      @on-add=\"emit('on-add')\"\n      @on-increase=\"emit('on-increase')\"\n      @on-decrease=\"emit('on-decrease')\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-card-footer {\n  padding: 0 8px 8px;\n\n  @include media('>=desktop-mini') {\n    padding: 0 16px 16px;\n  }\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, NewProductModification } from '@/types/api/api-v4/product'\n\nimport ProductCardImageTags from '@/components/Product/ProductCard/ProductCardImageTags.vue'\n\ntype Props = {\n  product: NewProduct\n  currentModification: NewProductModification\n  productsQuantity: number\n  isLoading?: boolean\n}\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['on-open-dialog'])\n\nconst { productImage, productTitle, setError } = useProductImage(props)\n\nconst imageClasses = computed(() => {\n  const classes = ['product-card-image']\n\n  if (props.productsQuantity > 0) classes.push('product-card-image--overlay')\n\n  if (props.isLoading) classes.push('product-card-image--loading')\n\n  return classes\n})\n\nconst productsQuantityAmount = computed(() => {\n  return props.productsQuantity > 0 ? props.productsQuantity : ''\n})\n\nconst onClick = () => emit('on-open-dialog')\n</script>\n\n<template>\n  <a\n    :href=\"`/product/${product.slug}/`\"\n    :class=\"imageClasses\"\n    :data-amount=\"productsQuantityAmount\"\n    @click.prevent=\"onClick\"\n  >\n    <product-card-image-tags :product=\"product\" />\n\n    <nuxt-img\n      :src=\"productImage\"\n      :title=\"productTitle\"\n      :alt=\"product.name\"\n      class=\"product-card-image__media\"\n      loading=\"lazy\"\n      format=\"webp\"\n      @error=\"setError(true)\"\n    />\n  </a>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-card-image {\n  position: relative;\n  height: 121px;\n  overflow: hidden;\n  border-radius: 16px;\n\n  @include media('>=desktop-mini') {\n    height: 185px;\n  }\n\n  &::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 20px;\n    font-weight: 800;\n    line-height: 26px;\n    color: var(--ui-white);\n    pointer-events: none;\n    visibility: hidden;\n    content: attr(data-amount);\n    background-color: rgba(#2c2f39, 0.6);\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n\n    @include media('>=desktop-mini') {\n      font-size: 28px;\n      font-weight: 900;\n      line-height: 36px;\n    }\n  }\n\n  &--loading {\n    opacity: 0;\n  }\n\n  &--overlay {\n    &::after {\n      pointer-events: auto;\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n\n  &__quantity {\n    padding: 2px 4px;\n    line-height: 10px;\n\n    @include media('>=desktop-mini') {\n      line-height: 16px;\n    }\n  }\n\n  &__media {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\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","<script setup lang=\"ts\">\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 { NewProduct } from '@/types/api/api-v4/product'\nimport {\n  ProductParentType,\n  ProductType,\n} from '@/types/components/product-card.types'\nimport { EcommerceEventName } from '@/types/plugins/yandex-metrika'\n\nimport ProductCardContent from '@/components/Product/ProductCard/ProductCardContent.vue'\nimport ProductCardFooter from '@/components/Product/ProductCard/ProductCardFooter.vue'\nimport ProductCardImage from '@/components/Product/ProductCard/ProductCardImage.vue'\nimport ProductTags from '@/components/Product/ProductTags/ProductTags.vue'\n\nimport { mapEcommerceData } from '@/services/metrics/utils/ecommerce'\n\ntype Props = {\n  product: NewProduct\n  isLoading?: boolean\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['on-open-dialog'])\n\nconst { $metrics } = useNuxtApp()\n\nconst { currencyCode } = useCityStore()\nconst { showSnackbar } = useAppStore()\nconst basketStore = useBasketStore()\n\nconst productId = computed(() => currentModification.value.id)\n\n// Находим модификацию с наименьшей ценой\nconst currentModification = computed(() => {\n  return props.product.modifications.reduce((acc, modification) => {\n    return acc.price < modification.price ? acc : modification\n  })\n})\n\nconst productBasketQuantity = computed(() => {\n  const inBasket = basketStore.isProductInBasket(productId.value)\n\n  return inBasket?.quantity || 0\n})\n\nconst productType = computed(() => {\n  if (props.product.modifications.length > 1) return ProductType.selection\n\n  return ProductType.simple\n})\n\nconst {\n  basketError,\n  quantitySelectedProducts,\n  totalSelectedProductsQuantity,\n  setProductQuantity,\n  setTotalProductsQuantity,\n  decreaseQuantity,\n  increaseQuantity,\n} = useProductCounter(productId, currentModification.value, props.product)\n\nconst { pushMetrics } = useSendMetricsOfProduct(currentModification.value)\n\nconst onOpenDialog = () => {\n  emit('on-open-dialog', 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 addToCart = async () => {\n  if (productType.value === ProductType.selection) {\n    onOpenDialog()\n    return\n  }\n\n  setProductQuantity(quantitySelectedProducts.value + 1) // текущее + 1\n\n  await basketStore.addProduct(productId.value)\n\n  if (!basketError.value) {\n    pushMetrics(EcommerceEventName.ADD, 1)\n\n    return\n  }\n\n  setProductQuantity(productBasketQuantity.value) // при ошибке возвращаем кол-во с сервера\n\n  showSnackbar({\n    message: 'Что-то пошло не так',\n    type: SnackbarType.MESSAGE,\n  })\n}\n\nwatch(\n  () => basketStore.isLoaded,\n  (state) => state && setTotalProductsQuantity(),\n)\n\nonMounted(() => {\n  if (basketStore.isLoaded) setTotalProductsQuantity()\n})\n</script>\n\n<template>\n  <div class=\"product-card\" :class=\"{ 'product-card--loading': isLoading }\">\n    <product-card-image\n      :product=\"product\"\n      :current-modification=\"currentModification\"\n      :products-quantity=\"totalSelectedProductsQuantity\"\n      :is-loading=\"isLoading\"\n      @on-open-dialog=\"onOpenDialog\"\n    />\n\n    <a :href=\"`/product/${product.slug}/`\" @click.prevent=\"onOpenDialog\">\n      <product-tags\n        :type=\"ProductParentType.card\"\n        :current-modification=\"currentModification\"\n        :main-tags=\"product.main_tags\"\n        :additional-tags=\"product.additional_tags\"\n      />\n    </a>\n\n    <product-card-content\n      :product=\"product\"\n      :product-type=\"productType\"\n      :current-modification=\"currentModification\"\n      @on-open-dialog=\"onOpenDialog\"\n    />\n\n    <product-card-footer\n      :product=\"product\"\n      :product-type=\"productType\"\n      :current-modification=\"currentModification\"\n      :products-quantity=\"quantitySelectedProducts\"\n      @on-add=\"addToCart\"\n      @on-increase=\"increaseQuantity\"\n      @on-decrease=\"decreaseQuantity\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 248px;\n  overflow: hidden;\n  background-color: var(--ui-grey);\n  border-radius: 16px;\n  transition: background-color 0.2s ease-in-out;\n\n  @include media('>=desktop-mini') {\n    height: 392px;\n    border-radius: 25px;\n\n    &:hover {\n      background-color: var(--ui-grey--hover);\n    }\n  }\n\n  &--loading {\n    &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: 3;\n      content: '';\n      background: linear-gradient(\n        122.57deg,\n        #f1f3f9 34.56%,\n        #ffffff 51.72%,\n        #f1f4f9 79.78%\n      );\n      background-size: 1200px 100%;\n      animation: shimmer 3s linear infinite forwards;\n    }\n  }\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: -1200px 0;\n  }\n  100% {\n    background-position: 1200px 0;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Component } from '@/types/api/api-v3/product'\n\ntype Props = {\n  component: Component\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=\"product-detail-component\">\n    <nuxt-img\n      class=\"product-detail-component__image\"\n      :src=\"imageUrl\"\n      :alt=\"component.name\"\n      @error=\"isErrorImage = true\"\n    />\n\n    <div class=\"product-detail-component__text\">\n      <h5 class=\"product-detail-component__title\">{{ component.name }}</h5>\n\n      <p class=\"product-detail-component__description\">\n        {{ component.description }}\n      </p>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-detail-component {\n  display: flex;\n  gap: 16px;\n  padding-bottom: 16px;\n\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--ui-grey);\n  }\n\n  &__image {\n    width: 60px;\n    height: 40px;\n    border-radius: 6px;\n  }\n\n  &__text {\n    font-size: 14px;\n    line-height: 18px;\n    word-break: break-word;\n  }\n\n  &__title {\n    font-size: 14px;\n    font-weight: 800;\n    color: var(--ui-secondary);\n  }\n\n  &__description {\n    margin-top: 8px;\n    font-weight: 600;\n    color: var(--ui-dark-grey);\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  border: boolean\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\n  <div v-if=\"border\" class=\"component__border\" />\n</template>\n\n<style lang=\"scss\" scoped>\n$card-height: 206px;\n\n.component__border {\n  width: 1px;\n  height: $card-height;\n  margin: 0 8px;\n  background-color: var(--ui-grey);\n}\n\n.component {\n  width: 100%;\n  max-width: 176px;\n  height: $card-height;\n  padding: 8px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n\n  &:first-child {\n    max-width: 164px;\n  }\n\n  &:hover {\n    max-width: 280px;\n    background-color: var(--ui-white);\n    border-radius: 16px;\n    box-shadow: var(--ui-card-shadow);\n  }\n\n  &__image {\n    width: 81px;\n    height: 50px;\n    border-radius: 6px;\n  }\n\n  &__title {\n    display: -moz-box;\n    display: -webkit-box;\n    width: 100%;\n    margin-top: 8px;\n    overflow: hidden;\n    font-size: 14px;\n    font-weight: 800;\n    line-height: 18px;\n    color: var(--ui-secondary);\n    text-overflow: ellipsis;\n    white-space: pre-wrap;\n    -moz-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    line-clamp: 2;\n  }\n\n  &__description {\n    display: -moz-box;\n    display: -webkit-box;\n    width: 100%;\n    margin-block-end: 0;\n    margin-top: 6px;\n    overflow: hidden;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 18px;\n    color: var(--ui-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</style>\n","<script setup lang=\"ts\">\nimport { NewProduct, NewProductModification } from '@/types/api/api-v4/product'\n\ntype Props = {\n  product: NewProduct\n  currentModification: NewProductModification\n}\n\nconst props = defineProps<Props>()\n\nconst { isMobile } = useResponsive()\n\nconst isNotExpand = ref(true)\n\nconst nutritionalValue = computed(() => {\n  return props.currentModification.nutritional_values\n})\n</script>\n\n<template>\n  <div class=\"product-detail-description\">\n    <div\n      class=\"product-detail-description__text\"\n      :class=\"{\n        'product-detail-description__text--not-expand': isNotExpand && isMobile,\n      }\"\n    >\n      {{ currentModification.description }}\n    </div>\n\n    <div\n      v-if=\"isNotExpand && isMobile\"\n      class=\"product-detail-description__btn-expand\"\n      @click=\"isNotExpand = false\"\n    >\n      <the-icon name=\"expand-down\" color=\"var(--ui-secondary)\" />\n    </div>\n\n    <template v-if=\"!isNotExpand || !isMobile\">\n      <div\n        v-if=\"product.marking_composition\"\n        class=\"product-detail-description__composition\"\n      >\n        <div class=\"product-detail-description__composition-title\">Состав</div>\n        <div class=\"product-detail-description__composition-text\">\n          {{ product.marking_composition }}\n        </div>\n      </div>\n\n      <div class=\"product-detail-description__colories\">\n        <div class=\"product-detail-description__colories-title\">На 100 г</div>\n\n        <div class=\"product-detail-description__colories-items\">\n          <div class=\"product-detail-description__colories-item\">\n            <div class=\"product-detail-description__colories-weight\">\n              {{ nutritionalValue.protein }} г\n            </div>\n            <div class=\"product-detail-description__colories-name\">белки</div>\n          </div>\n\n          <div class=\"product-detail-description__colories-item\">\n            <div class=\"product-detail-description__colories-weight\">\n              {{ nutritionalValue.fat }} г\n            </div>\n            <div class=\"product-detail-description__colories-name\">жиры</div>\n          </div>\n\n          <div class=\"product-detail-description__colories-item\">\n            <div class=\"product-detail-description__colories-weight\">\n              {{ nutritionalValue.carbohydrate }} г\n            </div>\n            <div class=\"product-detail-description__colories-name\">\n              углеводы\n            </div>\n          </div>\n\n          <div class=\"product-detail-description__colories-item\">\n            <div class=\"product-detail-description__colories-weight\">\n              {{ nutritionalValue.calorific }}\n            </div>\n            <div class=\"product-detail-description__colories-name\">кКал</div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.product-detail-description {\n  display: flex;\n  flex-direction: column;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 18px;\n  color: var(--ui-dark-grey);\n  word-break: break-word;\n\n  &__text {\n    position: relative;\n\n    &--not-expand {\n      display: -webkit-box;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: initial;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n    }\n  }\n\n  &__composition {\n    padding-bottom: 16px;\n    margin-top: 16px;\n    border-bottom: 1px solid var(--ui-grey);\n\n    @include media('>=tablet') {\n      padding: 0;\n      margin-top: 24px;\n      border: unset;\n    }\n  }\n\n  &__composition-title {\n    margin-bottom: 8px;\n    font-weight: 800;\n    color: var(--ui-secondary);\n  }\n\n  &__colories {\n    margin-top: 14px;\n\n    @include media('>=tablet') {\n      margin-top: 24px;\n    }\n  }\n\n  &__colories-title {\n    margin-bottom: 8px;\n    font-size: 12px;\n    line-height: 16px;\n  }\n\n  &__colories-items {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n  }\n\n  &__colories-item {\n    color: var(--ui-secondary);\n  }\n\n  &__colories-name {\n    font-size: 12px;\n    line-height: 16px;\n  }\n\n  &__btn-expand {\n    display: flex;\n    width: max-content;\n    margin: 4px;\n    margin: 0 auto;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport type {\n  NewProduct,\n  NewProductModification,\n} from '@/types/api/api-v4/product'\nimport { ProductDetailType } from '@/types/components/product-card.types'\n\ntype Props = {\n  type: ProductDetailType\n  product: NewProduct\n  currentModification: NewProductModification\n}\n\nconst props = defineProps<Props>()\n\nconst { isMobile } = useDevice()\n\nconst { productTitle, productImageList, productImage, setError } =\n  useProductImage(props)\n\nconst sliderOptions = computed(() => {\n  return {\n    slideWidth: isMobile ? 350 : 426,\n    dotsOffset: isMobile ? 4 : 8,\n  }\n})\n</script>\n\n<template>\n  <div class=\"product-detail-image\">\n    <the-slider\n      v-if=\"productImageList.length\"\n      class=\"product-detail-image__slider\"\n      :slide-width=\"sliderOptions.slideWidth\"\n      :space-between=\"10\"\n      :arrows=\"!isMobile\"\n      :length=\"productImageList.length\"\n      :dots-offset=\"sliderOptions.dotsOffset\"\n      dots\n    >\n      <nuxt-img\n        v-for=\"image in productImageList\"\n        :key=\"image\"\n        :src=\"image\"\n        :title=\"productTitle\"\n        :alt=\"product.name\"\n        class=\"product-detail-image__media\"\n        loading=\"lazy\"\n        format=\"webp\"\n      />\n    </the-slider>\n\n    <nuxt-img\n      v-else\n      :src=\"productImage\"\n      :title=\"productTitle\"\n      :alt=\"product.name\"\n      class=\"product-detail-image__media\"\n      loading=\"lazy\"\n      format=\"webp\"\n      @error=\"setError(true)\"\n    />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.product-detail-image {\n  width: 100%;\n\n  @include media('>=tablet') {\n    max-width: 426px;\n  }\n\n  &__slider {\n    margin-bottom: 26px;\n  }\n\n  &__media {\n    display: block;\n    width: 100%;\n    height: 205px;\n    object-fit: contain;\n    border-radius: 16px;\n\n    @include media('>=tablet') {\n      height: 284px;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { NewProduct, NewProductModification } from '@/types/api/api-v4/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\n\nimport ProductTagElements from '@/components/Product/ProductTags/ProductTagElements.vue'\nimport ProductTagRating from '@/components/Product/ProductTags/ProductTagRating.vue'\nimport ProductTags from '@/components/Product/ProductTags/ProductTags.vue'\n\ntype Props = {\n  product: NewProduct\n  currentModification: NewProductModification\n}\n\ndefineProps<Props>()\n\nconst { isDesktop } = useResponsive()\n</script>\n\n<template>\n  <div class=\"image-tags\">\n    <product-tag-elements\n      :product=\"product\"\n      :type=\"ProductParentType.detail\"\n      size=\"md\"\n    />\n\n    <product-tag-rating\n      :product=\"product\"\n      :type=\"ProductParentType.detail\"\n      size=\"md\"\n    />\n\n    <product-tags\n      v-if=\"isDesktop\"\n      :main-tags=\"product.main_tags\"\n      :additional-tags=\"product.additional_tags\"\n      :current-modification=\"currentModification\"\n      :type=\"ProductParentType.detail\"\n    />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.image-tags {\n  display: flex;\n  gap: 4px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { NewProductModification } from '@/types/api/api-v4/product'\n\ntype Props = {\n  modifications: NewProductModification[]\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['changeModification'])\n\nconst productModificationId = ref(props.modifications[0]?.id)\n\nconst changeModification = (modificationId: number) => {\n  productModificationId.value = modificationId\n\n  emit('changeModification', modificationId)\n}\n</script>\n\n<template>\n  <the-tabs class=\"modifications__tabs\" :model-value=\"productModificationId\">\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.modifications__tabs {\n  max-width: 100%;\n}\n</style>\n","<script setup lang=\"ts\">\ntype Props = {\n  productQuantity: number\n}\ndefineProps<Props>()\n\nconst emit = defineEmits([\n  'updateProductQuantity',\n  'addToCart',\n  'setIncreaseProduct',\n  'setDecreaseProduct',\n])\n\nonMounted(() => emit('updateProductQuantity'))\n\nconst addToCart = () => emit('addToCart')\n\nconst setIncreaseProduct = () => emit('setIncreaseProduct')\n\nconst setDecreaseProduct = () => emit('setDecreaseProduct')\n</script>\n\n<template>\n  <div class=\"product-detail-actions\">\n    <the-button\n      v-if=\"!productQuantity\"\n      class=\"product-detail-actions__button\"\n      @click=\"addToCart\"\n    >\n      Добавить\n    </the-button>\n\n    <the-counter\n      v-else\n      size=\"md\"\n      :value=\"productQuantity\"\n      @on-increase=\"setIncreaseProduct\"\n      @on-decrease=\"setDecreaseProduct\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-detail-actions {\n  &__button {\n    width: 160px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\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 { NewProductModification } from '@/types/api/api-v4/product'\nimport { EcommerceEventName } from '@/types/plugins/yandex-metrika'\nimport { SetProductIncludeType, SetProductType } from '@/types/store/category'\n\nimport ProductDetailButton from '@/components/Product/ProductDetail/ProductDetailButton.vue'\n\ntype Props = {\n  currentModification: NewProductModification\n}\nconst props = defineProps<Props>()\n\nconst { isMobile } = useResponsive()\n\nconst { showSnackbar } = useAppStore()\nconst basketStore = useBasketStore()\nconst { currencySymbol } = useCityStore()\n\nconst { pushMetrics } = useSendMetricsOfProduct(props.currentModification)\n\nconst priceValue = computed(() => {\n  return `${props.currentModification.price} ${currencySymbol}`\n})\n\nconst oldPriceValue = computed(() => {\n  return `${props.currentModification.subprice} ${currencySymbol}`\n})\n\nconst productId = computed(() => props.currentModification.id)\n\nconst {\n  basketError,\n  quantitySelectedProducts,\n  setProductQuantity,\n  decreaseQuantity,\n  increaseQuantity,\n} = useProductCounter(productId, props.currentModification)\n\nconst quantityInProductBasket = computed(() => {\n  return (\n    basketStore.isProductInBasket(props.currentModification.id)?.quantity || 0\n  )\n})\n\nconst onUpdateProductQuantity = () => {\n  const quantity = quantitySelectedProducts.value\n\n  setProductQuantity(quantity)\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 isVisibleBasketBtn = computed(() => {\n  return !isMobile.value && quantitySelectedProducts.value\n})\n</script>\n\n<template>\n  <div class=\"price-panel\" v-bind=\"$attrs\">\n    <div class=\"price-panel__prices\">\n      <div class=\"price-panel__price\">{{ priceValue }}</div>\n\n      <div v-if=\"currentModification.subprice\" class=\"price-panel__old-price\">\n        {{ oldPriceValue }}\n      </div>\n    </div>\n\n    <div class=\"price-panel__action-btn\">\n      <product-detail-button\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  </div>\n\n  <the-button\n    v-if=\"isVisibleBasketBtn\"\n    class=\"price-panel__basket-btn\"\n    variant=\"tertiary\"\n    to=\"/basket/\"\n  >\n    Перейти в корзину\n  </the-button>\n</template>\n\n<style scoped lang=\"scss\">\n.price-panel {\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 16px;\n  background-color: var(--ui-white);\n  border-radius: 20px 20px 0 0;\n  box-shadow: 0px -6px 30px 0px #32344826;\n\n  @include media('>=tablet') {\n    position: relative;\n    padding: 0;\n    background-color: unset;\n    border-radius: unset;\n    box-shadow: none;\n  }\n\n  &__prices {\n    width: max-content;\n  }\n\n  &__price {\n    font-size: 20px;\n    font-weight: 800;\n    line-height: 26px;\n    color: var(--ui-secondary);\n\n    @include media('>=tablet') {\n      font-size: 22px;\n      line-height: 29px;\n    }\n  }\n\n  &__old-price {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 16px;\n    color: var(--ui-dark-grey);\n    text-decoration: line-through;\n\n    @include media('>=tablet') {\n      font-size: 14px;\n      line-height: 18px;\n    }\n  }\n\n  &__basket-btn {\n    width: 100%;\n    margin-top: 24px;\n  }\n\n  &__action-btn {\n    margin-left: auto;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { NewProduct, NewProductModification } from '@/types/api/api-v4/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\n\nimport AppMeasureUnits from '@/components/App/AppMeasureUnits.vue'\nimport ProductTagExtra from '@/components/Product/ProductTags/ProductTagExtra.vue'\n\ntype Props = {\n  product: NewProduct\n  currentModification: NewProductModification\n}\n\nconst props = defineProps<Props>()\n\nconst productTitle = computed(() => {\n  if (props.product.modifications.length >= 2) {\n    return `${props.product.name}`\n  }\n\n  return props.product.modifications[0].mode\n    ? `${props.product.name}: ${props.product.modifications[0].mode}`\n    : `${props.product.name}`\n})\n</script>\n\n<template>\n  <div class=\"product-detail-header\">\n    <span class=\"product-detail-header__title\">{{ productTitle }}</span>\n\n    <product-tag-extra\n      class=\"product-detail-header__extra\"\n      :main-tags=\"product.main_tags\"\n      :additional-tags=\"product.additional_tags\"\n      :type=\"ProductParentType.detail\"\n    />\n\n    <app-measure-units\n      class=\"product-detail-header__weight\"\n      :weight=\"currentModification.weight\"\n      :volume-in-liters=\"currentModification.volume_in_liters\"\n      :measure=\"currentModification.measure\"\n    />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.product-detail-header {\n  &__title {\n    font-size: 18px;\n    font-weight: 800;\n    line-height: 23px;\n    color: var(--ui-secondary);\n    word-break: break-word;\n\n    @include media('>=tablet') {\n      font-size: 22px;\n      line-height: 29px;\n    }\n  }\n\n  &__extra {\n    margin-left: 4px;\n\n    @include media('>=desktop-mini') {\n      margin-left: 8px;\n    }\n  }\n\n  &__weight {\n    margin-left: 4px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 18px;\n    color: var(--ui-dark-grey);\n\n    @include media('>=desktop-mini') {\n      margin-left: 8px;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport type {\n  NewProduct,\n  NewProductModification,\n} from '@/types/api/api-v4/product'\nimport {\n  ProductDetailType,\n  ProductParentType,\n} from '@/types/components/product-card.types'\n\nimport ProductDetailComponents from '@/components/Product/ProductDetail/ProductDetailComponents.vue'\nimport ProductDetailComponentsSlider from '@/components/Product/ProductDetail/ProductDetailComponentsSlider.vue'\nimport ProductDetailDescription from '@/components/Product/ProductDetail/ProductDetailDescription.vue'\nimport ProductDetailImage from '@/components/Product/ProductDetail/ProductDetailImage.vue'\nimport ProductDetailImageTags from '@/components/Product/ProductDetail/ProductDetailImageTags.vue'\nimport ProductDetailModifications from '@/components/Product/ProductDetail/ProductDetailModifications.vue'\nimport ProductDetailPricePanel from '@/components/Product/ProductDetail/ProductDetailPricePanel.vue'\nimport ProductDetailTitle from '@/components/Product/ProductDetail/ProductDetailTitle.vue'\nimport ProductTags from '@/components/Product/ProductTags/ProductTags.vue'\n\nconst MODIFICATION_COUNT = 2\n\ntype Props = {\n  product: NewProduct\n  type: ProductDetailType\n  currentModification: NewProductModification\n}\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['update:current-modification'])\n\nconst { isMobile } = useResponsive()\n\nconst schemaAttributes = computed(() => {\n  if (props.type !== ProductDetailType.Page) {\n    return {\n      itemScope: undefined,\n      itemType: undefined,\n    }\n  }\n\n  return {\n    itemScope: true,\n    itemType: 'http://schema.org/Product',\n  }\n})\n\nconst onUpdateCurrentModification = (modificationId: number) => {\n  emit('update:current-modification', modificationId)\n}\n</script>\n\n<template>\n  <div\n    class=\"product-detail-card\"\n    :itemscope=\"schemaAttributes.itemScope\"\n    :itemtype=\"schemaAttributes.itemType\"\n  >\n    <div class=\"product-detail-card__left-block\">\n      <product-detail-image-tags\n        class=\"product-detail-card__image-tags\"\n        :product=\"product\"\n        :current-modification=\"currentModification\"\n      />\n\n      <product-detail-image\n        :product=\"product\"\n        :current-modification=\"currentModification\"\n        :type=\"type\"\n      />\n    </div>\n\n    <div class=\"product-detail-card__right-block\">\n      <product-tags\n        v-if=\"isMobile\"\n        :main-tags=\"product.main_tags\"\n        :additional-tags=\"product.additional_tags\"\n        :current-modification=\"currentModification\"\n        :type=\"ProductParentType.detail\"\n        class=\"product-detail-card__tags\"\n      />\n\n      <product-detail-title\n        :product=\"product\"\n        :current-modification=\"currentModification\"\n        class=\"product-detail-card__title\"\n      />\n\n      <product-detail-description\n        :product=\"product\"\n        :current-modification=\"currentModification\"\n      />\n\n      <product-detail-modifications\n        v-if=\"product.modifications.length >= MODIFICATION_COUNT\"\n        class=\"product-detail-card__modifications\"\n        :modifications=\"product.modifications\"\n        @change-modification=\"onUpdateCurrentModification\"\n      />\n\n      <product-detail-price-panel\n        v-if=\"!isMobile\"\n        class=\"product-detail-card__price-panel\"\n        :current-modification=\"currentModification\"\n      />\n    </div>\n\n    <product-detail-components\n      v-if=\"product.components.length > 0 && isMobile\"\n      class=\"product-detail-card__components\"\n      :components=\"product.components\"\n    />\n  </div>\n\n  <product-detail-components-slider\n    v-if=\"product.components.length > 0 && !isMobile\"\n    :components=\"product.components\"\n    class=\"product-detail-card__components\"\n  />\n</template>\n\n<style scoped lang=\"scss\">\n.product-detail-card {\n  position: relative;\n\n  @include media('>=tablet') {\n    display: flex;\n    gap: 30px;\n    align-items: center;\n  }\n\n  &__image-tags {\n    position: absolute;\n    top: -12px;\n    overflow: hidden;\n\n    @include media('>=tablet') {\n      position: relative;\n      top: unset;\n      margin-bottom: 16px;\n    }\n  }\n\n  &__tags {\n    margin: 16px 0 8px;\n    overflow: hidden;\n  }\n\n  &__title {\n    margin-bottom: 4px;\n\n    @include media('>=tablet') {\n      margin-bottom: 8px;\n    }\n  }\n\n  &__modifications {\n    margin-top: 24px;\n  }\n\n  :deep(.product-detail-card__price-panel) {\n    margin-top: 24px;\n  }\n\n  &__components {\n    margin-top: 24px;\n\n    @include media('>=tablet') {\n      margin-top: 30px;\n    }\n  }\n\n  &__left-block {\n    @include media('>=tablet') {\n      flex-basis: 426px;\n      max-width: 426px;\n    }\n  }\n\n  &__right-block {\n    @include media('>=tablet') {\n      flex-basis: 273px;\n      flex-shrink: 0;\n      max-width: 273px;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { NewProduct } from '@/types/api/api-v4/product'\nimport { ProductDetailType } from '@/types/components/product-card.types'\n\nimport ProductDetailCard from '@/components/Product/ProductDetail/ProductDetailCard.vue'\nconst ProductDetailPricePanel = defineAsyncComponent(\n  () =>\n    import('@/components/Product/ProductDetail/ProductDetailPricePanel.vue'),\n)\n\ntype Props = {\n  products: NewProduct[]\n  product: NewProduct\n}\n\nconst props = defineProps<Props>()\n\nconst { isMobile } = useResponsive()\n\nconst changeModification = (modificationId: number) => {\n  // меняем текущую модификацию продукта путем поиска по id модификации\n  currentModification.value =\n    props.product.modifications.find(\n      (modification) => modification.id === modificationId,\n    ) ||\n    props.product.modifications[0] ||\n    null\n}\nconst currentModification = ref(props.product?.modifications[0] || null) // текущая модификация товара\n</script>\n\n<template>\n  <div class=\"product-dialog-content\">\n    <div class=\"product-dialog-content__product-detail\">\n      <div class=\"product-dialog-content__product-card\">\n        <product-detail-card\n          :type=\"ProductDetailType.Page\"\n          :product=\"product\"\n          :current-modification=\"currentModification\"\n          @update:current-modification=\"changeModification\"\n        />\n      </div>\n    </div>\n\n    <product-detail-price-panel\n      v-if=\"isMobile\"\n      :current-modification=\"currentModification\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-dialog-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  @include media('>=tablet') {\n    // TODO Крестик в модалке скрывается под блоком на планшете, убрать после фикса\n    padding-top: 2px;\n  }\n\n  &__product-detail {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__product-card {\n    width: 100%;\n    padding: 12px 16px 24px;\n    background-color: var(--ui-white);\n\n    &:not(:last-child) {\n      margin-bottom: 16px;\n      border-radius: 0 0 20px 20px;\n    }\n\n    &:last-child {\n      padding-bottom: 24px;\n    }\n\n    @include media('>=tablet') {\n      padding: 0 !important;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { NewProductDialog } from '@/types/api/api-v4/product'\n\nimport ProductDialogContent from '@/components/Product/ProductDialogContent.vue'\n\ntype Props = {\n  productDialog: NewProductDialog\n}\n\ndefineProps<Props>()\n\nconst emit = defineEmits(['closeDialogProduct'])\n\nconst { isMobile } = useResponsive()\n\nconst closeDialogProduct = () => {\n  emit('closeDialogProduct')\n}\n</script>\n\n<template>\n  <the-bottom-sheet\n    v-if=\"isMobile\"\n    :model-value=\"productDialog.visible\"\n    padding=\"0\"\n    persistent-close\n    @update:model-value=\"closeDialogProduct\"\n  >\n    <product-dialog-content\n      v-if=\"productDialog.currentProduct\"\n      :product=\"productDialog.currentProduct\"\n      :products=\"productDialog.productList\"\n      class=\"product-dialog-content\"\n    />\n  </the-bottom-sheet>\n\n  <the-dialog\n    v-if=\"!isMobile\"\n    :model-value=\"productDialog.visible\"\n    :max-width=\"789\"\n    @update:model-value=\"closeDialogProduct\"\n  >\n    <product-dialog-content\n      v-if=\"productDialog.currentProduct\"\n      :product=\"productDialog.currentProduct\"\n      :products=\"productDialog.productList\"\n      class=\"product-dialog-content\"\n    />\n  </the-dialog>\n</template>\n","import { NewProductDialog } from '@/types/api/api-v4/product'\n\nexport const useProductModal = () => {\n  const productDialog = ref<NewProductDialog>({\n    currentProduct: null,\n    productList: [],\n    visible: false,\n  })\n\n  const openDialogProduct = (productDialogData: NewProductDialog) => {\n    productDialog.value = productDialogData\n  }\n\n  const closeDialogProduct = () => {\n    productDialog.value = {\n      currentProduct: null,\n      productList: [],\n      visible: false,\n    }\n  }\n\n  return {\n    productDialog,\n    openDialogProduct,\n    closeDialogProduct,\n  }\n}\n"],"names":["props","__props","component","computed","__nuxt_component_0","componentClasses","filteredTag","tags","ProductParentType","tag","emit","__emit","isDesktop","useResponsive","productTitleElement","ref","productTitleElementHeight","_a","productTitle","showExtraTag","onClick","currencySymbol","useCityStore","isActive","ProductType","isVisible","_b","productImage","setError","useProductImage","imageClasses","classes","productsQuantityAmount","discountValue","discount","price","subprice","filteredTags","is_extra","hidden","$metrics","useNuxtApp","currencyCode","showSnackbar","useAppStore","basketStore","useBasketStore","productId","currentModification","acc","modification","productBasketQuantity","inBasket","productType","basketError","quantitySelectedProducts","totalSelectedProductsQuantity","setProductQuantity","setTotalProductsQuantity","decreaseQuantity","increaseQuantity","useProductCounter","pushMetrics","useSendMetricsOfProduct","onOpenDialog","ecommerceData","mapEcommerceData","EcommerceEventName","addToCart","SnackbarType","watch","state","onMounted","isErrorImage","imageUrl","isMobile","isNotExpand","nutritionalValue","useDevice","productImageList","sliderOptions","productModificationId","changeModification","modificationId","setIncreaseProduct","setDecreaseProduct","priceValue","oldPriceValue","quantityInProductBasket","onUpdateProductQuantity","quantity","setProduct","type","SetProductType","isVisibleBasketBtn","MODIFICATION_COUNT","schemaAttributes","ProductDetailType","onUpdateCurrentModification","ProductDetailPricePanel","defineAsyncComponent","__vitePreload","ProductDetailPricePanel$1","closeDialogProduct","useProductModal","productDialog","productDialogData"],"mappings":";;ysCAQA,MAAMA,EAAQC,EAERC,EAAYC,EAAS,IAClBH,EAAM,QAAQ,IAAMI,GAA+B,KAC3D,obCFD,MAAMJ,EAAQC,EAERI,EAAmB,CACvB,oBACA,2BAA2BL,EAAM,IAAI,EACvC,EAEMM,EAAcH,EAAS,IAAM,CAEjC,MAAMI,EAAO,CAAC,GAAGP,EAAM,QAAQ,EAG3B,OAAAA,EAAM,OAASQ,EAAkB,QAC9BD,EAAA,KAAK,GAAGP,EAAM,cAAc,EAG5BO,EAAK,KAAME,GAAQA,EAAI,QAAQ,EACvC,0WCXD,MAAMT,EAAQC,EAERS,EAAOC,EAEP,CAAE,UAAAC,CAAU,EAAIC,EAAc,EAE9BC,EAAsBC,EAAwB,IAAI,EAElDC,EAA4Bb,EAAS,IAAM,OAC3C,OAACW,EAAoB,OAElBG,EAAAH,GAAA,YAAAA,EAAqB,QAArB,YAAAG,EAA4B,wBAAwB,OAFpB,CAEoB,CAC5D,EAEKC,EAAef,EAAS,IACxBH,EAAM,QAAQ,cAAc,QAAU,EACjC,GAAGA,EAAM,QAAQ,IAAI,GAGvBA,EAAM,QAAQ,cAAc,CAAC,EAAE,KAClC,GAAGA,EAAM,QAAQ,IAAI,KAAKA,EAAM,QAAQ,cAAc,CAAC,EAAE,IAAI,GAC7D,GAAGA,EAAM,QAAQ,IAAI,EAC1B,EAEKmB,EAAehB,EAAS,IACrBH,EAAM,QAAQ,UAAU,QAAUA,EAAM,QAAQ,gBAAgB,MACxE,EAEKoB,EAAU,IAAMV,EAAK,gBAAgB,0mCC/B3C,MAAMV,EAAQC,EAERS,EAAOC,EAEP,CAAE,eAAAU,CAAe,EAAIC,EAAa,EAElCC,EAAWpB,EAAS,IACjBH,EAAM,iBAAmB,GAAKA,EAAM,cAAgBwB,EAAY,MACxE,kfCND,MAAMxB,EAAQC,EAERwB,EAAYtB,EAAS,IAAM,SAC/B,QACEc,EAAAjB,EAAM,UAAN,YAAAiB,EAAe,aAAYS,EAAA1B,EAAM,QAAQ,gBAAd,YAAA0B,EAA6B,SAAS,QAAM,CAE1E,ouBCVD,MAAM1B,EAAQC,EAERS,EAAOC,EAEP,CAAE,aAAAgB,EAAc,aAAAT,EAAc,SAAAU,CAAS,EAAIC,GAAgB7B,CAAK,EAEhE8B,EAAe3B,EAAS,IAAM,CAC5B,MAAA4B,EAAU,CAAC,oBAAoB,EAErC,OAAI/B,EAAM,iBAAmB,GAAG+B,EAAQ,KAAK,6BAA6B,EAEtE/B,EAAM,WAAmB+B,EAAA,KAAK,6BAA6B,EAExDA,CAAA,CACR,EAEKC,EAAyB7B,EAAS,IAC/BH,EAAM,iBAAmB,EAAIA,EAAM,iBAAmB,EAC9D,EAEKoB,EAAU,IAAMV,EAAK,gBAAgB,4eClB3C,MAAMV,EAAQC,EAER,CAAE,eAAAoB,CAAe,EAAIC,EAAa,EAElCW,EAAgB9B,EAAS,IAAM,CACnC,KAAM,CAAE,SAAA+B,EAAU,MAAAC,EAAO,SAAAC,GAAapC,EAAM,oBAE5C,OAAOkC,EAAW,QAAQC,EAAQC,GAAU,QAAQ,CAAC,CAAC,EAAI,EAC3D,wSCJD,MAAMpC,EAAQC,EAERoC,EAAelC,EAAS,IAAM,CAElC,MAAMI,EAAO,CAAC,GAAGP,EAAM,QAAQ,EAG3B,OAAAA,EAAM,OAASQ,EAAkB,QAC9BD,EAAA,KAAK,GAAGP,EAAM,cAAc,EAG5BO,EAAK,OAAO,CAAC,CAAE,SAAA+B,EAAU,OAAAC,KAAa,CAACD,GAAY,CAACC,CAAM,EAClE,EAEKlC,EAAmBF,EAAS,IACzB,CAAC,eAAgB,sBAAsBH,EAAM,IAAI,EAAE,CAC3D,6lBCND,MAAMA,EAAQC,EAERS,EAAOC,EAEP,CAAE,SAAA6B,CAAS,EAAIC,GAAW,EAE1B,CAAE,aAAAC,CAAa,EAAIpB,EAAa,EAChC,CAAE,aAAAqB,CAAa,EAAIC,EAAY,EAC/BC,EAAcC,GAAe,EAE7BC,EAAY5C,EAAS,IAAM6C,EAAoB,MAAM,EAAE,EAGvDA,EAAsB7C,EAAS,IAC5BH,EAAM,QAAQ,cAAc,OAAO,CAACiD,EAAKC,IACvCD,EAAI,MAAQC,EAAa,MAAQD,EAAMC,CAC/C,CACF,EAEKC,EAAwBhD,EAAS,IAAM,CAC3C,MAAMiD,EAAWP,EAAY,kBAAkBE,EAAU,KAAK,EAE9D,OAAOK,GAAA,YAAAA,EAAU,WAAY,EAC9B,EAEKC,EAAclD,EAAS,IACvBH,EAAM,QAAQ,cAAc,OAAS,EAAUwB,EAAY,UAExDA,EAAY,MACpB,EAEK,CACJ,YAAA8B,EACA,yBAAAC,EACA,8BAAAC,EACA,mBAAAC,EACA,yBAAAC,EACA,iBAAAC,EACA,iBAAAC,CAAA,EACEC,GAAkBd,EAAWC,EAAoB,MAAOhD,EAAM,OAAO,EAEnE,CAAE,YAAA8D,CAAgB,EAAAC,GAAwBf,EAAoB,KAAK,EAEnEgB,EAAe,IAAM,CACpBtD,EAAA,iBAAkBV,EAAM,OAAO,EAEpC,MAAMiE,EAAgBC,GACpBlB,EAAoB,MACpBmB,EAAmB,QACnBzB,GAAA,YAAAA,EAAc,QAAS,EACzB,EAEAF,GAAA,MAAAA,EAAU,mBAAmB,CAAE,GAAIyB,CAAA,EACrC,EAEMG,EAAY,SAAY,CACxB,GAAAf,EAAY,QAAU7B,EAAY,UAAW,CAClCwC,EAAA,EACb,OAOE,GAJeP,EAAAF,EAAyB,MAAQ,CAAC,EAE/C,MAAAV,EAAY,WAAWE,EAAU,KAAK,EAExC,CAACO,EAAY,MAAO,CACVQ,EAAAK,EAAmB,IAAK,CAAC,EAErC,OAGFV,EAAmBN,EAAsB,KAAK,EAEjCR,EAAA,CACX,QAAS,sBACT,KAAM0B,GAAa,QACpB,CACH,EAEA,OAAAC,GACE,IAAMzB,EAAY,SACjB0B,GAAUA,GAASb,EAAyB,CAC/C,EAEAc,GAAU,IAAM,CACV3B,EAAY,UAAmCa,EAAA,EACpD,quCC3GD,MAAM1D,EAAQC,EAERwE,EAAe1D,EAAI,EAAK,EAExB2D,EAAWvE,EAAS,IAAM,OAC9B,MAAI,GAACc,EAAAjB,EAAM,YAAN,MAAAiB,EAAiB,QAASwD,EAAa,MACnC,2BAGFzE,EAAM,UAAU,MACxB,q8BCPD,MAAMA,EAAQC,EAERwE,EAAe1D,EAAI,EAAK,EAExB2D,EAAWvE,EAAS,IAAM,OAC9B,MAAI,GAACc,EAAAjB,EAAM,YAAN,MAAAiB,EAAiB,QAASwD,EAAa,MACnC,2BAGFzE,EAAM,UAAU,MACxB,2qDCXD,MAAMA,EAAQC,EAER,CAAE,SAAA0E,CAAS,EAAI9D,EAAc,EAE7B+D,EAAc7D,EAAI,EAAI,EAEtB8D,EAAmB1E,EAAS,IACzBH,EAAM,oBAAoB,kBAClC,s7CCHD,MAAMA,EAAQC,EAER,CAAE,SAAA0E,CAAS,EAAIG,GAAU,EAEzB,CAAE,aAAA5D,EAAc,iBAAA6D,EAAkB,aAAApD,EAAc,SAAAC,CAAS,EAC7DC,GAAgB7B,CAAK,EAEjBgF,EAAgB7E,EAAS,KACtB,CACL,WAAYwE,EAAW,IAAM,IAC7B,WAAYA,EAAW,EAAI,CAC7B,EACD,20BCVK,MAAE,UAAA/D,CAAU,EAAIC,EAAc,ulBCRpC,MAAMb,EAAQC,EAERS,EAAOC,EAEPsE,EAAwBlE,GAAIE,EAAAjB,EAAM,cAAc,CAAC,IAArB,YAAAiB,EAAwB,EAAE,EAEtDiE,EAAsBC,GAA2B,CACrDF,EAAsB,MAAQE,EAE9BzE,EAAK,qBAAsByE,CAAc,CAC3C,kiBCXA,MAAMzE,EAAOC,EAOH6D,GAAA,IAAM9D,EAAK,uBAAuB,CAAC,EAEvC,MAAA0D,EAAY,IAAM1D,EAAK,WAAW,EAElC0E,EAAqB,IAAM1E,EAAK,oBAAoB,EAEpD2E,EAAqB,IAAM3E,EAAK,oBAAoB,qjBCJ1D,MAAMV,EAAQC,EAER,CAAE,SAAA0E,CAAS,EAAI9D,EAAc,EAE7B,CAAE,aAAA8B,CAAa,EAAIC,EAAY,EAC/BC,EAAcC,GAAe,EAC7B,CAAE,eAAAzB,CAAe,EAAIC,EAAa,EAElC,CAAE,YAAAwC,CAAgB,EAAAC,GAAwB/D,EAAM,mBAAmB,EAEnEsF,EAAanF,EAAS,IACnB,GAAGH,EAAM,oBAAoB,KAAK,IAAIqB,CAAc,EAC5D,EAEKkE,EAAgBpF,EAAS,IACtB,GAAGH,EAAM,oBAAoB,QAAQ,IAAIqB,CAAc,EAC/D,EAEK0B,EAAY5C,EAAS,IAAMH,EAAM,oBAAoB,EAAE,EAEvD,CACJ,YAAAsD,EACA,yBAAAC,EACA,mBAAAE,EACA,iBAAAE,EACA,iBAAAC,CACE,EAAAC,GAAkBd,EAAW/C,EAAM,mBAAmB,EAEpDwF,EAA0BrF,EAAS,IAAM,OAC7C,QACEc,EAAA4B,EAAY,kBAAkB7C,EAAM,oBAAoB,EAAE,IAA1D,YAAAiB,EAA6D,WAAY,EAE5E,EAEKwE,EAA0B,IAAM,CACpC,MAAMC,EAAWnC,EAAyB,MAE1CE,EAAmBiC,CAAQ,CAC7B,EAEMtB,EAAY,MAAOrB,GAAsB,CAKzC,GAJeU,EAAAF,EAAyB,MAAQ,CAAC,EAE/C,MAAAV,EAAY,WAAWE,CAAS,EAElC,CAACO,EAAY,MAAO,CACVQ,EAAAK,EAAmB,IAAK,CAAC,EAErC,OAGFV,EAAmB+B,EAAwB,KAAK,EAEnC7C,EAAA,CACX,QAAS,sBACT,KAAM0B,GAAa,QACpB,CACH,EAEMsB,EAAcC,GAAgC,CAE9C,GAAAA,IAASC,EAAe,SAAU,CACnBlC,EAAA,EACjB,OAGeC,EAAA,CACnB,EAEMkC,EAAqB3F,EAAS,IAC3B,CAACwE,EAAS,OAASpB,EAAyB,KACpD,+6BC1ED,MAAMvD,EAAQC,EAERiB,EAAef,EAAS,IACxBH,EAAM,QAAQ,cAAc,QAAU,EACjC,GAAGA,EAAM,QAAQ,IAAI,GAGvBA,EAAM,QAAQ,cAAc,CAAC,EAAE,KAClC,GAAGA,EAAM,QAAQ,IAAI,KAAKA,EAAM,QAAQ,cAAc,CAAC,EAAE,IAAI,GAC7D,GAAGA,EAAM,QAAQ,IAAI,EAC1B,wnBCFK+F,GAAqB,6IAO3B,MAAM/F,EAAQC,EAERS,EAAOC,EAEP,CAAE,SAAAgE,CAAS,EAAI9D,EAAc,EAE7BmF,EAAmB7F,EAAS,IAC5BH,EAAM,OAASiG,GAAkB,KAC5B,CACL,UAAW,OACX,SAAU,MACZ,EAGK,CACL,UAAW,GACX,SAAU,2BACZ,CACD,EAEKC,EAA+Bf,GAA2B,CAC9DzE,EAAK,8BAA+ByE,CAAc,CACpD,o3DC5CA,MAAMgB,EAA0BC,GAC9B,IAAAC,GAAA,IACE,2BAAAC,EAAA,EAAuE,uBAC3E,EAOMtG,EAAQC,EAER,CAAE,SAAA0E,CAAS,EAAI9D,EAAc,EAE7BqE,EAAsBC,GAA2B,CAEjCnC,EAAA,MAClBhD,EAAM,QAAQ,cAAc,KACzBkD,GAAiBA,EAAa,KAAOiC,CAExC,GAAAnF,EAAM,QAAQ,cAAc,CAAC,GAC7B,IACJ,EACMgD,EAAsBjC,IAAIE,EAAAjB,EAAM,UAAN,YAAAiB,EAAe,cAAc,KAAM,IAAI,wcCjBvE,MAAMP,EAAOC,EAEP,CAAE,SAAAgE,CAAS,EAAI9D,EAAc,EAE7B0F,EAAqB,IAAM,CAC/B7F,EAAK,oBAAoB,CAC3B,wwBCfa8F,GAAkB,IAAM,CACnC,MAAMC,EAAgB1F,EAAsB,CAC1C,eAAgB,KAChB,YAAa,CAAC,EACd,QAAS,GACV,EAcM,OACL,cAAA0F,EACA,kBAdyBC,GAAwC,CACjED,EAAc,MAAQC,CACxB,EAaE,mBAXyB,IAAM,CAC/BD,EAAc,MAAQ,CACpB,eAAgB,KAChB,YAAa,CAAC,EACd,QAAS,EACX,CACF,CAMA,CACF","debug_id":"c58d2000-a38d-5a41-9d14-e42a1c7fb670"}