/* Совместимость с разметкой темы pro, которая шла «под плагин» twist:
 *   - <a class="woocommerce-product-gallery__lightbox"><i class="icon-resize-full"></i></a>
 *   - .wpgs_image / .wpgs-wrapper / .swiper-slide.woocommerce-product-gallery__image
 *
 * Подмножество wpgs-style.css из twist 3.5.9 — без slick-, wpgs-thumb-, wpgs-dots-,
 * wpgs-video- стилей (они для отключённого слайдера плагина, тема использует Swiper).
 */

/* Иконочный шрифт. Из всего набора в разметке темы используется только
 * icon-resize-full (см. <i class="icon-resize-full"> в functions.php и др.).
 * Грузим один woff2 — все живые браузеры его поддерживают. */
@font-face {
    font-family: 'fontelloq';
    src: url('fonts/fontello.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.wpgs-wrapper [class^="icon-"]:before,
.wpgs-wrapper [class*=" icon-"]:before,
.woocommerce-product-gallery__lightbox [class^="icon-"]:before,
.woocommerce-product-gallery__lightbox [class*=" icon-"]:before {
    font-family: "fontelloq" !important;
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-resize-full:before { content: '\e800'; }

/* Иконка-зум в правом верхнем углу слайда.
   ВНИМАНИЕ: background сюда НЕ ставим. В разметке темы класс
   .woocommerce-product-gallery__lightbox висит на <a>, который оборачивает фото
   (не просто иконку), и серый фон перекрывал картинку. На проде с twist это
   тоже было видно. */
.woocommerce-product-gallery__lightbox {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px;
    font-size: 20px;
    color: #000;
    transition: all 0.2s ease-in;
}

/* По умолчанию иконка скрыта — её показывает либо JS на slick-current,
 * либо CSS-правило ниже для главного изображения галереи. В разметке темы
 * иконка нередко перебивается inline-стилем `style="opacity:1;display:block"`. */
.woocommerce-product-gallery__lightbox {
    opacity: 0;
    display: none;
    transition: all 0.2s;
}
.woocommerce-product-gallery__image .woocommerce-product-gallery__lightbox {
    opacity: 1;
    display: block;
}

.wpgs_image {
    position: relative;
    padding: 0 !important;
}

.wpgs-wrapper {
    overflow: hidden;
}

/* fancybox поверх любых модалок темы */
.fancybox-container {
    z-index: 9999999;
}

/* Стрелки навигации fancybox.
   В теме swiper-стрелки рисуются SVG slab_arrow (см. style.css). Для fancybox
   тот же SVG лежит здесь в assets/ — плагин самодостаточен и не зависит от
   путей темы. Селекторы — <span class="arrow-prev/next">, который inject'ит
   наш init.js через btnTpl. */
.fancybox-navigation .fancybox-button--arrow_left .arrow-prev::before,
.fancybox-navigation .fancybox-button--arrow_right .arrow-next::before {
    content: '';
    display: block;
    height: 100%;
    width: 100px;
    background: url('slab_arrow.svg') center center no-repeat;
    filter: grayscale(1);
}
.fancybox-navigation .fancybox-button--arrow_right .arrow-next::before {
    transform: rotateY(180deg);
}

/* стандартные WooCommerce-оверрайды, которые шли в wpgs-style.css */
.woocommerce-product-gallery {
    display: block !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image a {
    z-index: 999;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image {
    padding: 0 !important;
}