/*
 * Bố cục dự phòng cho gallery sản phẩm WooCommerce.
 * Chỉ có tác dụng khi wc-gallery-fallback.js đã gắn class .lssk-wc-gallery,
 * tức là khi flexslider của WooCommerce không khởi tạo được.
 */

.lssk-wc-gallery .woocommerce-product-gallery__wrapper{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:0;
}
.lssk-wc-gallery .woocommerce-product-gallery__image{
    display:block;
    margin:0;
    /* WooCommerce đặt width:25% cho ảnh từ thứ hai trở đi. Trong ô lưới thì 25%
       của ô lại thu nhỏ tiếp còn ~24px, nên phải trả về auto. */
    width:auto !important;
    float:none !important;
}
.lssk-wc-gallery .lssk-wc-main{
    grid-column:1 / -1;
    border:1px solid #e2e9df;
    border-radius:12px;
    overflow:hidden;
}
.lssk-wc-gallery .lssk-wc-main img{
    width:100%;
    height:auto;
    display:block;
}
.lssk-wc-gallery .lssk-wc-thumb{
    cursor:pointer;
    border:1px solid #e2e9df;
    border-radius:8px;
    overflow:hidden;
    transition:border-color .15s;
}
.lssk-wc-gallery .lssk-wc-thumb:hover{border-color:#82b735}
.lssk-wc-gallery .lssk-wc-thumb img{
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
}
@media(max-width:640px){
    .lssk-wc-gallery .woocommerce-product-gallery__wrapper{grid-template-columns:repeat(3,1fr)}
}

/* WooCommerce đặt sẵn inline style opacity:0 trên gallery, để JS của nó bật lên 1
   sau khi dựng xong flexslider. JS không chạy thì opacity kẹt ở 0 vĩnh viễn: ảnh
   vẫn tải đủ, vẫn đúng kích thước, nhưng trong suốt nên nhìn như mất ảnh.
   Chỉ mở lại khi lớp dự phòng đã tiếp quản. */
.lssk-wc-gallery{opacity:1 !important}