/* ==========================================================
   PP Gallery  (v5.5.0)
   Path: catalog/view/theme/journal3/css/pp-gallery.css
   ---------------------------------------------------------
   Mobile dots + Desktop pair view + HD drag-zoom
   Scoped to #product-product so it never affects modules,
   product cards, or the quickview popup.
   ========================================================== */

/* ==========================================================
   1. MOBILE DOTS
   ========================================================== */
@media (max-width: 767px) {
    #product-product .swiper.additional-images { display: none !important; }
    #product-product .swiper.main-image { width: 100% !important; }
    #pp-mobile-dots { display: flex !important; justify-content: center; align-items: center; gap: 5px; padding: 10px 0; }
    #pp-mobile-dots span { width: 5px; height: 5px; border-radius: 50%; background: #D9D9D9; display: inline-block; cursor: pointer; transition: background .3s ease; flex-shrink: 0; }
    #pp-mobile-dots span.pp-dot-active { background: #5F5F5F !important; }

    /* double-tap hint badge (πάνω δεξιά, slide in/out) */
    #product-product .product-image .main-image { position: relative; }
    #pp-tap-hint {
        position: absolute; top: -2px; right: 2px; z-index: 30;
        width: 170px; height: auto; display: block; pointer-events: none;
        background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
        opacity: 0; transform: translateX(120%);
        transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
    }
    #pp-tap-hint.pp-show { opacity: 1; transform: translateX(0); }
    #pp-tap-hint.pp-hide { opacity: 0; transform: translateX(120%); }
}
@media (min-width: 768px) { #pp-mobile-dots, #pp-tap-hint { display: none !important; } }

/* ==========================================================
   2. DESKTOP LAYOUT  (scoped: #product-product ONLY)
   ========================================================== */
@media (min-width: 992px) {
    #product-product:not(.pp-single-product) #content > .product-info { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 28px !important; }
    #product-product:not(.pp-single-product) #content > .product-info > .product-left  { flex: 0 0 68% !important; width: 68% !important; max-width: 68% !important; margin: 0 !important; padding: 0 !important; }
    #product-product:not(.pp-single-product) #content > .product-info > .product-right { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; position: sticky !important; top: 90px; align-self: flex-start !important; }
}

@media (min-width: 768px) {
    #product-product:not(.pp-single-product) .product-image { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 8px !important; overflow: visible !important; width: 100% !important; }

    /* ---- thumbnail rail ---- */
    #product-product:not(.pp-single-product) .product-image .additional-images { order: -1 !important; flex: 0 0 78px !important; width: 78px !important; min-width: 78px !important; max-width: 78px !important; height: auto !important; margin: 0 !important; padding: 0 !important; align-self: flex-start !important; }
    #product-product:not(.pp-single-product) .product-image .additional-images .swiper-container,
    #product-product:not(.pp-single-product) .product-image .additional-images.pp-scroller { height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; max-height: 82vh; scrollbar-width: none; -ms-overflow-style: none; }
    #product-product:not(.pp-single-product) .product-image .additional-images .swiper-container::-webkit-scrollbar,
    #product-product:not(.pp-single-product) .product-image .additional-images.pp-scroller::-webkit-scrollbar { width: 0 !important; display: none !important; }
    #product-product:not(.pp-single-product) .product-image .additional-images .swiper-wrapper { display: block !important; transform: none !important; height: auto !important; width: auto !important; }
    #product-product:not(.pp-single-product) .product-image .additional-images .additional-image { width: 100% !important; height: auto !important; margin: 0 0 5px 0 !important; cursor: pointer; border: 1px solid transparent; opacity: .85; transition: border-color .2s ease, opacity .2s ease; }
    #product-product:not(.pp-single-product) .product-image .additional-images .additional-image:hover { opacity: 1; }
    #product-product:not(.pp-single-product) .product-image .additional-images .additional-image.pp-thumb-active { border-color: #5F5F5F; opacity: 1; }
    #product-product:not(.pp-single-product) .product-image .additional-images .additional-image img { width: 100% !important; height: auto !important; max-width: none !important; display: block; }
    #product-product:not(.pp-single-product) .product-image .additional-images .swiper-buttons,
    #product-product:not(.pp-single-product) .product-image .additional-images .swiper-pagination { display: none !important; }

    #product-product .pp-thumbs-next { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 6px auto 0; border: 1px solid #D9D9D9; border-radius: 50%; background: #fff; cursor: pointer; padding: 0; }
    #product-product .pp-thumbs-next:after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid #5F5F5F; border-bottom: 1.5px solid #5F5F5F; transform: rotate(45deg) translate(-2px, -2px); }
    #product-product .pp-thumbs-next.pp-hidden { display: none !important; }

    /* ---- main: ενεργή δυάδα, χωρίς κενό ---- */
    #product-product:not(.pp-single-product) .product-image .main-image { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
    #product-product:not(.pp-single-product) .product-image .main-image .swiper-container { overflow: visible !important; width: 100% !important; height: auto !important; }
    #product-product:not(.pp-single-product) .product-image .main-image .swiper-wrapper { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; transform: none !important; height: auto !important; width: 100% !important; cursor: grab !important; }
    #product-product:not(.pp-single-product) .product-image .main-image .swiper-wrapper.pp-single { grid-template-columns: 1fr !important; }
    #product-product:not(.pp-single-product) .product-image .main-image .swiper-wrapper.pp-dragging { cursor: grabbing !important; }
    #product-product:not(.pp-single-product) .product-image .main-image .swiper-slide { display: none !important; }
    #product-product:not(.pp-single-product) .product-image .main-image .swiper-slide.pp-visible {
        display: block !important; position: relative !important;
        width: auto !important; height: auto !important; max-width: none !important; margin: 0 !important;
        overflow: hidden !important;
    }
    #product-product:not(.pp-single-product) .product-image .main-image .swiper-slide.pp-visible img {
        width: 100% !important; height: auto !important; max-width: none !important; display: block;
        -webkit-user-drag: none;
    }
    #product-product:not(.pp-single-product) .product-image .main-image .swiper-controls,
    #product-product:not(.pp-single-product) .product-image .main-image .swiper-buttons,
    #product-product:not(.pp-single-product) .product-image .main-image .swiper-pagination { display: none !important; }

    /* ---- διακριτικά άσπρα βελάκια αλλαγής δυάδας (desktop) ---- */
    #product-product:not(.pp-single-product) .product-image .main-image { position: relative; }
    #product-product .pp-pair-nav {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 30px; height: 30px; z-index: 25;
        display: flex; align-items: center; justify-content: center;
        border: 0; padding: 0; cursor: pointer;
        background: rgba(0,0,0,0.18);
        border-radius: 50%;
        opacity: 0; transition: opacity .25s ease, background .2s ease;
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    }
    #product-product .pp-pair-nav:hover { background: rgba(0,0,0,0.32); }
    #product-product .pp-pair-nav.pp-prev { left: 12px; }
    #product-product .pp-pair-nav.pp-next { right: 12px; }
    #product-product .product-image .main-image:hover .pp-pair-nav { opacity: 1; }
    #product-product .pp-pair-nav.pp-nav-hidden { display: none !important; }
    #product-product .pp-pair-nav svg { width: 18px; height: 18px; display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }
    #product-product .pp-pair-nav svg path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
}

/* ==========================================================
   3. HD DRAG-ZOOM  (layout-resize = καθαρή ανάλυση, όχι GPU upscale)
   ========================================================== */
/* minimal άσπρος μεγεθυντικός φακός (+) με διακριτική σκιά */
#product-product .product-image .main-image .swiper-slide img {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='29'%20height='29'%20viewBox='0%200%2029%2029'%3E%3Cdefs%3E%3Cfilter%20id='sh'%20x='-50%25'%20y='-50%25'%20width='200%25'%20height='200%25'%3E%3CfeDropShadow%20dx='0'%20dy='0.5'%20stdDeviation='0.9'%20flood-color='%23000'%20flood-opacity='0.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20filter='url(%23sh)'%20fill='none'%20stroke='%23fff'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Ccircle%20cx='11.5'%20cy='11.5'%20r='8'/%3E%3Cline%20x1='17.4'%20y1='17.4'%20x2='25'%20y2='25'/%3E%3Cline%20x1='11.5'%20y1='8.2'%20x2='11.5'%20y2='14.8'/%3E%3Cline%20x1='8.2'%20y1='11.5'%20x2='14.8'%20y2='11.5'/%3E%3C/g%3E%3C/svg%3E") 11 11, zoom-in;
}

#product-product .product-image .swiper-slide.pp-zoom-host {
    overflow: hidden !important; position: relative !important;
    background: #fff;
}
#product-product .product-image .swiper-slide.pp-zoom-host img {
    position: absolute !important; top: 0 !important; left: 0 !important;
    max-width: none !important;
    /* minimal άσπρος μεγεθυντικός φακός (−) με διακριτική σκιά */
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='29'%20height='29'%20viewBox='0%200%2029%2029'%3E%3Cdefs%3E%3Cfilter%20id='sh'%20x='-50%25'%20y='-50%25'%20width='200%25'%20height='200%25'%3E%3CfeDropShadow%20dx='0'%20dy='0.5'%20stdDeviation='0.9'%20flood-color='%23000'%20flood-opacity='0.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20filter='url(%23sh)'%20fill='none'%20stroke='%23fff'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Ccircle%20cx='11.5'%20cy='11.5'%20r='8'/%3E%3Cline%20x1='17.4'%20y1='17.4'%20x2='25'%20y2='25'/%3E%3Cline%20x1='8.2'%20y1='11.5'%20x2='14.8'%20y2='11.5'/%3E%3C/g%3E%3C/svg%3E") 11 11, zoom-out;
    transition: none !important;
    transform-origin: 0 0 !important;
    image-rendering: auto;
    touch-action: none;
    -webkit-user-drag: none; user-select: none;
    backface-visibility: hidden;
}
#product-product .product-image .swiper-slide.pp-zoom-host.pp-loading:after {
    content: ""; position: absolute; top: 12px; right: 12px;
    width: 16px; height: 16px; border: 2px solid rgba(0,0,0,.15); border-top-color: #5F5F5F;
    border-radius: 50%; animation: pp-spin .7s linear infinite; z-index: 2;
}
@keyframes pp-spin { to { transform: rotate(360deg); }


}