/**
 * Подключается в layout-both-columns.tpl после опционального FIELD_customCSS.
 * Инлайн Theme Customizer идёт в документе раньше этого файла и иначе перебивает
 * theme.css / custom.css — пропадает #f5f5f5 и multiply на обложках.
 * Также: кнопка «нет в наличии» (серый #9e9e9e) — инлайн кастомайзер иначе даёт чёрный/зелёный.
 * Синхронизируйте с _dev/css/components/product-covers.scss и custom.css при правках.
 */

/* fieldslideshow (Owl): без серого фона у слайдов */
.field-home-slideshow .owl-item > .item,
.field-main-slider .field-home-slide {
  background: none !important;
  background-color: transparent !important;
}

.owl-carousel .owl-item img {
  display: block !important;
  width: 100% !important;
  mix-blend-mode: multiply !important;
  vertical-align: top;
}

.horizontal_mode .item-inner .left-product,
.vertical_mode .item-inner .left-product,
.item-product-list .left-product {
  background-color: #f5f5f5 !important;
}

.product-miniature .left-product .product-thumbnail {
  background-color: #f5f5f5 !important;
}

.product-miniature .left-product .product-thumbnail .cover_image,
#products .product-miniature .left-product .product-thumbnail .cover_image,
.featured-products .product-miniature .left-product .product-thumbnail .cover_image,
.product-accessories .product-miniature .left-product .product-thumbnail .cover_image {
  display: block !important;
  width: 100% !important;
  position: relative;
  isolation: isolate;
  background-color: #f5f5f5 !important;
}

.product-miniature .left-product .product-thumbnail .cover_image img,
#products .product-miniature .left-product .product-thumbnail .cover_image img,
.featured-products .product-miniature .left-product .product-thumbnail .cover_image img,
.product-accessories .product-miniature .left-product .product-thumbnail .cover_image img {
  mix-blend-mode: multiply !important;
  vertical-align: top;
}

#products .product-miniature .left-product .product-thumbnail,
.featured-products .product-miniature .left-product .product-thumbnail,
.product-accessories .product-miniature .left-product .product-thumbnail {
  background-color: #f5f5f5 !important;
}

#products .thumbnail-container,
.featured-products .thumbnail-container,
.product-accessories .thumbnail-container,
.product-miniature .thumbnail-container {
  background-color: #f5f5f5 !important;
}

#products .thumbnail-container .product-thumbnail img,
.featured-products .thumbnail-container .product-thumbnail img,
.product-accessories .thumbnail-container .product-thumbnail img,
.product-miniature .thumbnail-container .product-thumbnail img {
  mix-blend-mode: multiply !important;
  vertical-align: top;
}

/* PDP: белая рамка (.product-cover-shell), серый блок под фото (.product-cover-media) */
#product .images-container .product-cover {
  background-color: transparent !important;
  isolation: isolate;
  position: relative;
}

#product .images-container .product-cover-shell {
  background-color: #fff !important;
  /* padding: 12px; */
}

#product .images-container .thumb-item-shell {
  background-color: #fff !important;
  /* padding: 6px; */
}

#product .images-container .product-cover-media,
#product .images-container .thumb-item-media {
  background-color: #f5f5f5 !important;
  isolation: isolate;
  position: relative;
}

#product .images-container .product-cover .js-qv-product-cover,
#product .images-container .slider_image_product_pages .thumb {
  display: block !important;
  width: 100% !important;
  mix-blend-mode: multiply !important;
  vertical-align: top;
}

#product .images-container .thumb-product-page,
#product .images-container .list-thumb-product {
  background-color: transparent !important;
}

#product .images-container .grid-thumb-product {
  background-color: #f5f5f5 !important;
}

#product .images-container .thumb-inner,
#product .images-container .slider_image_product_pages .image-inner {
  background-color: #f5f5f5 !important;
  isolation: isolate;
}

#product .images-container .thumb-item img.thumb,
#product .images-container .thumb-item img.js-thumb {
  display: block !important;
  width: 100% !important;
  mix-blend-mode: multiply !important;
  vertical-align: top;
}

/* image_product_style_1: без .row — flex на контейнере */
#product .images-container.image_product_style_1 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* image_product_style_1: отступы как demo Field Woodpro (между колонкой превью и обложкой, между превью) */
#product .images-container.image_product_style_1 .thumb-product-page {
  padding-left: 0 !important;
  padding-right: 15px !important;
}

#product .images-container.image_product_style_1 .list-thumb-product .thumb-item {
  margin-bottom: 12px;
}

#product .images-container.image_product_style_1 .list-thumb-product .thumb-item:last-child {
  margin-bottom: 0;
}

/* Адаптив (≤991px): обложка сверху, миниатюри снизу в ряд */
@media (max-width: 991px) {
  #product .images-container.image_product_style_1 {
    flex-direction: column;
  }

  #product .images-container.image_product_style_1 .product-cover {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto;
    float: none !important;
    margin-left: 0 !important;
  }

  #product .images-container.image_product_style_1 .thumb-product-page {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 12px;
  }

  #product .images-container.image_product_style_1 .list-thumb-product .thumb-item {
    margin-bottom: 0;
    margin-right: 10px;
  }

  #product .images-container.image_product_style_1 .list-thumb-product .thumb-item:last-child {
    margin-right: 0;
  }

  #product .images-container.image_product_style_1 .thumb-product-page .thumb-item .thumb-item-shell {
    max-width: 100%;
  }
}

/* Вертикальный bxSlider для .thumb_product_vertical: 3 миниатюры в окне, картинки на всю ширину колонки */
#product .images-container .thumb-product-page .list-thumb-product.thumb_product_vertical .thumb-item img,
#product .images-container .thumb-product-page .bx-wrapper .list-thumb-product.thumb_product_vertical img {
  width: 100% !important;
  max-width: 100% !important;
}

/* Колонка миниатюр (только десктоп): чуть уже */
@media (min-width: 992px) {
  #product .images-container .thumb-product-page .thumb-item .thumb-item-shell {
    max-width: 86%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Десктоп: вертикальный bx — стрелки сверху/снизу и поворот иконок */
@media (min-width: 992px) {
  #product .images-container .thumb-product-page .bx-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  #product .images-container .thumb-product-page .bx-wrapper > .bx-viewport {
    order: 2;
    width: 100% !important;
  }

  #product .images-container .thumb-product-page .bx-wrapper .bx-controls {
    display: contents;
  }

  #product .images-container .thumb-product-page .bx-wrapper .bx-controls-direction {
    display: contents;
  }

  #product .images-container .thumb-product-page .bx-wrapper .bx-prev {
    order: 1;
    position: static !important;
    display: block;
    width: 100%;
    text-align: center;
    top: auto !important;
    margin: 0 0 8px;
  }

  #product .images-container .thumb-product-page .bx-wrapper .bx-next {
    order: 3;
    position: static !important;
    display: block;
    width: 100%;
    text-align: center;
    top: auto !important;
    margin: 8px 0 0;
  }

  #product .images-container .thumb-product-page .bx-wrapper .bx-prev:before {
    display: inline-block;
    transform: rotate(90deg);
  }

  #product .images-container .thumb-product-page .bx-wrapper .bx-next:before {
    display: inline-block;
    transform: rotate(90deg);
  }
}

/* PDP: лайтбокс по клику, без inner zoom */
#product .product-cover .js-qv-product-cover,
#product .slider_image_product_pages .owl-item img.thumb {
  cursor: zoom-in;
}

#product .product-cover .layer {
  cursor: zoom-in;
  pointer-events: auto;
}

/*
 * Карточка товара: смена фото по hover в стиле Wokiee (crossfade второго изображения).
 * Перебивает field_style.css: scale(0/1) в сетке и rotateY в списке.
 * Только устройства с настоящим hover — без «залипшего» второго кадра на тачскринах.
 */
@media (hover: hover) and (pointer: fine) {
  .horizontal_mode .item-inner .left-product .product-thumbnail,
  .vertical_mode .item-inner .left-product .product-thumbnail {
    position: relative;
  }

  .horizontal_mode .item-inner .left-product .hover_image,
  .vertical_mode .item-inner .left-product .hover_image {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: none !important;
    transition: opacity 0.4s ease;
    pointer-events: none;
    overflow: hidden;
  }

  .horizontal_mode .item-inner .left-product .hover_image img,
  .vertical_mode .item-inner .left-product .hover_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    vertical-align: top;
    mix-blend-mode: multiply !important;
    transition: opacity 0.4s ease;
  }

  .horizontal_mode .item-inner .left-product .cover_image,
  .vertical_mode .item-inner .left-product .cover_image {
    z-index: 0;
  }

  .horizontal_mode .item-inner .left-product .cover_image img,
  .vertical_mode .item-inner .left-product .cover_image img {
    transition: opacity 0.4s ease;
  }

  .horizontal_mode .item-inner:hover .left-product .hover_image,
  .vertical_mode .item-inner:hover .left-product .hover_image {
    opacity: 1;
    transform: none !important;
  }

  .horizontal_mode .item-inner:hover .left-product:has(.hover_image) .cover_image img,
  .vertical_mode .item-inner:hover .left-product:has(.hover_image) .cover_image img {
    opacity: 0;
  }

  #module-blockwishlist-mywishlist .item-inner .product_image {
    position: relative;
  }

  #module-blockwishlist-mywishlist .product_image .hover_image {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: none !important;
    transition: opacity 0.4s ease;
    pointer-events: none;
    overflow: hidden;
  }

  #module-blockwishlist-mywishlist .product_image .hover_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: multiply !important;
    transition: opacity 0.4s ease;
  }

  #module-blockwishlist-mywishlist .product_image .cover_image img {
    transition: opacity 0.4s ease;
  }

  #module-blockwishlist-mywishlist .item-inner:hover .product_image .hover_image {
    opacity: 1;
    transform: none !important;
  }

  #module-blockwishlist-mywishlist .item-inner:hover .product_image:has(.hover_image) .cover_image img {
    opacity: 0;
  }

  .item-product-list .left-product .product-thumbnail {
    position: relative;
  }

  .item-product-list .left-product .cover_image {
    z-index: 0;
  }

  .item-product-list .left-product .hover_image {
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: block !important;
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0;
    visibility: visible !important;
    opacity: 0;
    filter: none !important;
    transform: none !important;
    transition: opacity 0.4s ease;
    pointer-events: none;
    overflow: hidden;
    perspective: none !important;
    transform-style: flat !important;
  }

  .item-product-list .left-product .hover_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: multiply !important;
  }

  .item-product-list .left-product .cover_image img {
    transition: opacity 0.4s ease;
  }

  .item-product-list:hover .left-product .hover_image {
    opacity: 1;
    transform: none !important;
  }

  .item-product-list:hover .left-product:has(.hover_image) .cover_image img {
    opacity: 0;
  }
}

/* После FIELD_customizer: серая кнопка «нет в наличии» (#9e9e9e), иначе инлайн перебивает custom.css */
#product .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock:disabled,
#product .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock[disabled],
body .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock:disabled,
body .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock[disabled] {
  cursor: not-allowed;
  opacity: 1 !important;
  background: #9e9e9e !important;
  background-color: #9e9e9e !important;
  background-image: none !important;
  border-color: #8a8a8a !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

#product .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock:disabled:hover,
#product .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock:disabled:focus,
#product .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock:disabled:active,
#product .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock[disabled]:hover,
#product .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock[disabled]:focus,
body .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock:disabled:hover,
body .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock:disabled:focus {
  background: #9e9e9e !important;
  background-color: #9e9e9e !important;
  background-image: none !important;
  border-color: #8a8a8a !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: none !important;
}

#product .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock:disabled .fa,
body .product-actions .product-quantity--unavailable .btn.btn-primary.add-to-cart--out-of-stock:disabled .fa {
  color: #fff !important;
}