/**
 * WooCommerce Product Gallery Frame Styling
 *
 * Adds a picture frame and mat effect to product images
 * Similar to the Artwork Visualizer plugin's styling
 *
 * @package Pursue_Life_Outdoors
 */

/* Product Gallery Frame Effect */
.woocommerce-product-gallery__wrapper {
    position: relative;
    background-color: #000; /* Frame color */
    padding: 3px; /* Frame thickness */
    border-radius: 0; /* Ensures square corners for frame */
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    z-index: 5;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
}

/* Mat styling for the image inside the wrapper */
.woocommerce-product-gallery__wrapper img {
    border: 15px solid white; /* Mat border */
    box-sizing: border-box;
    border-radius: 0; /* Ensures square corners for mat */
    width: 100%;
    height: auto;
    display: block;
}

/* Portrait mode adjustments */
.woocommerce-product-gallery__wrapper.portrait-image img {
    /* Adjust mat proportionally for portrait orientation */
    border-left-width: 12px;
    border-right-width: 12px;
    border-top-width: 15px;
    border-bottom-width: 15px;
}

/* Fix for flexslider */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    border: none !important;
    padding: 0 !important;
}

/* Ensure thumbnails maintain the framing effect */
.woocommerce-product-gallery__wrapper .flex-control-thumbs li {
    background-color: #000;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.woocommerce-product-gallery__wrapper .flex-control-thumbs li img {
    border: 5px solid white;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.woocommerce-product-gallery__wrapper .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery__wrapper .flex-control-thumbs li img:hover {
    opacity: 1;
}

/* Fix for zoom overlay */
.woocommerce-product-gallery__trigger {
    z-index: 10;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .woocommerce-product-gallery__wrapper img {
        border-width: 10px;
    }
    
    .woocommerce-product-gallery__wrapper.portrait-image img {
        border-left-width: 8px;
        border-right-width: 8px;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }
    
    .woocommerce-product-gallery__wrapper .flex-control-thumbs li img {
        border-width: 3px;
    }
}

/* Detection for portrait/landscape images with JavaScript */
/* This will be handled by the JS file */