/*
Theme Name: Claue Child
Theme URI: http://www.janstudio.net/claue
Author: JanStudio
Author URI: http://www.janstudio.net
Description: The best woocommerce theme for online fashion store, furniture store, handemade store, organic store, wordpress personal portfolio, personal blog.
Template: claue
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: claue
Tags: one-column, two-columns, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/
/* --- ETSY TARZI DİKEY GALERİ (DESKTOP) --- */
@media (min-width: 768px) {
  .single-product-thumbnail.left {
    position: relative !important;
  }
  .single-product-thumbnail.left .p-nav {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 80px !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.25) transparent;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 4px 0 0 !important;
    margin: 0 !important;
    z-index: 5;
  }
  .single-product-thumbnail.left .p-nav::-webkit-scrollbar {
    width: 4px;
  }
  .single-product-thumbnail.left .p-nav::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
  }
  .single-product-thumbnail.left .p-nav > div {
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    opacity: 0.65;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    box-sizing: border-box !important;
  }
  .single-product-thumbnail.left .p-nav > div:hover,
  .single-product-thumbnail.left .p-nav > div.active,
  .single-product-thumbnail.left .p-nav > div.slick-current {
    opacity: 1;
    border-color: #222 !important;
  }
  .single-product-thumbnail.left .p-nav > div img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}



    /* --- ARTVAGE ÜRÜN KARTLARI: KUSURSUZ HOVER (DEĞİŞSİN, TAŞMASIN, 1:1 KARE) --- */
    .product-inner .product-image,
    .product-image-flip {
        position: relative !important;
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    .product-image-flip > a {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        overflow: hidden !important;
        background: #ffffff !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
    }

    .product-image-flip picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .product-image-flip img,
    .product-inner .product-image img,
    .attachment-470x0x0,
    .wp-post-image,
    .wp-image-flip {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* Normal Durum: 1. görsel görünür, 2. görsel gizli */
    .product-image-flip > a:first-child,
    .product-image-flip > a:not(.back) {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1 !important;
    }

    .product-image-flip a.back,
    .product-image-flip .back {
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    /* Hover Durumu: 2. görsel tam kare açılır, 1. görsel tamamen gizlenir (SIFIR TAŞMA) */
    .product-inner:hover .product-image-flip > a:first-child,
    .product-image:hover .product-image-flip > a:first-child,
    .product-inner:hover .product-image-flip > a:not(.back),
    .product-image:hover .product-image-flip > a:not(.back) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .product-inner:hover .product-image-flip a.back,
    .product-image:hover .product-image-flip a.back,
    .product-inner:hover .product-image-flip .back,
    .product-image:hover .product-image-flip .back {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }