/* Product list image swipe — mobile only
   Added: 2026-05-29 (v3 — native scroll-snap)

   Approach: native horizontal scroll-snap on the .pl-swiper container.
   Browser handles touch, momentum, snap, and click suppression on scroll.
   JS only handles arrow clicks, dot highlight and edge-arrow visibility.

   home_default = 270x270 (square) → aspect-ratio: 1/1.
*/

/* --- Desktop state (>=768px) — keep legacy cover, hide swiper ---
   Scoped to a min-width media query so the !important hide does NOT
   leak into the mobile (<=767px) slider rules below. On desktop only
   the legacy .image_root cover is visible (single image, hover rollover). */
@media (min-width: 768px) {
    .product_img_link .pl-swiper,
    .product_img_link .pl-arrow,
    .product_img_link .pl-dots {
        display: none !important;
    }
    .product_img_link.pl-has-swipe .pl-legacy-img {
        display: inline !important;
    }
}

/* --- Mobile state --- */
@media (max-width: 767px) {
    .product_img_link.pl-has-swipe {
        position: relative;
        display: block;
        overflow: hidden;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Hide the legacy hover-image / image_root duplicates */
    .product_img_link.pl-has-swipe .pl-legacy-img {
        display: none !important;
    }

    /* Swiper is a native horizontal-scroll container with snap-to-slide */
    .product_img_link.pl-has-swipe .pl-swiper {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        background: #f8f8f8;
        /* Hide scrollbar in all engines */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .product_img_link.pl-has-swipe .pl-swiper::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Each slide is the full swiper width and a 1:1 box */
    .product_img_link.pl-has-swipe .pl-slide {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        aspect-ratio: 1 / 1;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f8f8;
        position: relative;
    }
    .product_img_link.pl-has-swipe .pl-slide img.pl-img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        pointer-events: none;
        -webkit-user-drag: none;
        user-drag: none;
    }

    /* --- Arrows — always visible on mobile listings for discoverability --- */
    .product_img_link.pl-has-swipe .pl-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
        opacity: 1;
        visibility: visible;
        transition: opacity 200ms ease, visibility 0s;
        z-index: 5;
        cursor: pointer;
        pointer-events: auto;
    }
    .product_img_link.pl-has-swipe .pl-arrow-prev { left: 6px; }
    .product_img_link.pl-has-swipe .pl-arrow-next { right: 6px; }
    .product_img_link.pl-has-swipe .pl-arrow::before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-style: solid;
        border-color: #333;
        border-width: 2px 2px 0 0;
    }
    .product_img_link.pl-has-swipe .pl-arrow-prev::before {
        transform: rotate(-135deg);
        margin-left: 3px;
    }
    .product_img_link.pl-has-swipe .pl-arrow-next::before {
        transform: rotate(45deg);
        margin-right: 3px;
    }
    .product_img_link.pl-has-swipe.pl-at-start .pl-arrow-prev,
    .product_img_link.pl-has-swipe.pl-at-end   .pl-arrow-next {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* --- Dots --- */
    .product_img_link.pl-has-swipe .pl-dots {
        display: flex;
        position: absolute;
        bottom: 8px;
        left: 0;
        right: 0;
        justify-content: center;
        gap: 5px;
        z-index: 4;
        pointer-events: none;
    }
    .product_img_link.pl-has-swipe .pl-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.28);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
        transition: background-color 200ms ease, transform 200ms ease;
    }
    .product_img_link.pl-has-swipe .pl-dot.pl-active {
        background: rgba(0, 0, 0, 0.82);
        transform: scale(1.18);
    }
}

/* Graceful fallback for very old browsers that don't support aspect-ratio
   (iOS < 15, etc): use padding-bottom trick. */
@supports not (aspect-ratio: 1 / 1) {
    @media (max-width: 767px) {
        .product_img_link.pl-has-swipe .pl-slide {
            height: 0;
            padding-bottom: 100%;
        }
        .product_img_link.pl-has-swipe .pl-slide img.pl-img {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
        }
    }
}

/* --- Home page (fieldtabproductsisotope) — force single column on mobile ---
   The module ships a rule:  @media (max-width:767px) and (min-width:420px)
   { #fieldtabproductsisotope .isotope-item { width: 50% } }  which gives
   2 columns on phones 420-767px wide. Override to 1 column so the layout
   matches the category listing and the image swiper has full width.
   This also zeroes the .grid-sizer width so Isotope lays out a single column. */
@media (max-width: 767px) {
    #fieldtabproductsisotope .isotope-item {
        width: 100% !important;
    }
}

/* ============================================================
   PRODUCT PAGE (catalog) — mobile image swiper
   Reuses the same .pl-swiper / .pl-slide / .pl-arrow / .pl-dot
   markup, but scoped to .pl-product-gallery so the listing rules
   are untouched. Desktop keeps the native #views_block + #image-block.
   ============================================================ */

/* Desktop (>=768px): hide the mobile gallery entirely */
@media (min-width: 768px) {
    .pl-product-gallery { display: none !important; }
}

/* Mobile (<=767px): show the swiper, hide the native gallery siblings.
   The general-sibling selector means the native gallery is only hidden
   when a .pl-product-gallery is actually present (i.e. there are images). */
@media (max-width: 767px) {
    .pl-product-gallery ~ #views_block,
    .pl-product-gallery ~ #image-block {
        display: none !important;
    }

    .pl-product-gallery {
        position: relative;
        display: block;
        width: 100%;
        margin: 0 0 14px;
        overflow: hidden;
        -webkit-user-select: none;
        user-select: none;
    }
    .pl-product-gallery .pl-swiper {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        background: #fff;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .pl-product-gallery .pl-swiper::-webkit-scrollbar {
        display: none; width: 0; height: 0;
    }
    .pl-product-gallery .pl-slide {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        position: relative;
    }
    .pl-product-gallery .pl-slide img.pl-img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        pointer-events: none;
        -webkit-user-drag: none;
        user-drag: none;
    }
    /* Arrows */
    .pl-product-gallery .pl-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,0.92);
        box-shadow: 0 1px 4px rgba(0,0,0,0.18);
        z-index: 5;
        cursor: pointer;
        pointer-events: auto;
    }
    .pl-product-gallery .pl-arrow-prev { left: 8px; }
    .pl-product-gallery .pl-arrow-next { right: 8px; }
    .pl-product-gallery .pl-arrow::before {
        content: \x27\x27;
        display: block;
        width: 9px;
        height: 9px;
        border-style: solid;
        border-color: #333;
        border-width: 2px 2px 0 0;
    }
    .pl-product-gallery .pl-arrow-prev::before { transform: rotate(-135deg); margin-left: 4px; }
    .pl-product-gallery .pl-arrow-next::before { transform: rotate(45deg); margin-right: 4px; }
    .pl-product-gallery.pl-at-start .pl-arrow-prev,
    .pl-product-gallery.pl-at-end   .pl-arrow-next {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /* Dots */
    .pl-product-gallery .pl-dots {
        display: flex;
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        justify-content: center;
        gap: 6px;
        z-index: 4;
        pointer-events: none;
    }
    .pl-product-gallery .pl-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(0,0,0,0.28);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
        transition: background-color 200ms ease, transform 200ms ease;
    }
    .pl-product-gallery .pl-dot.pl-active {
        background: rgba(0,0,0,0.82);
        transform: scale(1.18);
    }
}
@supports not (aspect-ratio: 1 / 1) {
    @media (max-width: 767px) {
        .pl-product-gallery .pl-slide { height: 0; padding-bottom: 100%; }
        .pl-product-gallery .pl-slide img.pl-img { position: absolute; top: 0; left: 0; }
    }
}

/* Product page zoom link fills the slide so a tap anywhere zooms */
@media (max-width: 767px) {
    .pl-product-gallery .pl-slide a.pl-zoom-link {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
}

/* Product page: .left-column-wrap is a CSS grid (thumbs column + big image).
   On mobile we hide both native columns and show the full-width swiper, so the
   grid tracks (e.g. 65px 280px) would squeeze the swiper into the 65px thumbs
   track. Drop the grid on mobile so the swiper gets the full block width. */
@media (max-width: 767px) {
    .pb-left-column .left-column-wrap,
    .left-column-wrap {
        display: block !important;
        grid-template-columns: none !important;
    }
}

/* Product gallery arrows — match the catalog/listing design exactly:
   white circle, dark (#333) chevron, subtle shadow, NO ring/border.
   Both arrows kept always visible. */
@media (max-width: 767px) {
    .pl-product-gallery .pl-arrow {
        background: rgba(255, 255, 255, 0.92) !important;
        border: 0 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
        width: 36px !important;
        height: 36px !important;
        box-sizing: border-box !important;
    }
    .pl-product-gallery .pl-arrow::before {
        content: "" !important;
        display: block !important;
        box-sizing: content-box !important;
        width: 9px !important;
        height: 9px !important;
        border-style: solid !important;
        border-color: #333 !important;
        border-width: 2px 2px 0 0 !important;
        background: transparent !important;
        opacity: 1 !important;
    }
    .pl-product-gallery .pl-arrow-prev::before {
        transform: rotate(-135deg) !important;
        margin-left: 3px !important;
    }
    .pl-product-gallery .pl-arrow-next::before {
        transform: rotate(45deg) !important;
        margin-right: 3px !important;
    }
    .pl-product-gallery.pl-at-start .pl-arrow-prev,
    .pl-product-gallery.pl-at-end   .pl-arrow-next {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Hide the "Recently viewed products" block (#viewed-products_block_left) on
   CATEGORY pages only, and only at tablet width (Bootstrap sm: 768-991px). */
@media (min-width: 768px) and (max-width: 991px) {
    body#category #viewed-products_block_left {
        display: none !important;
    }
}