/* Single */ .single-product div.product div.images .woocommerce-product-gallery__trigger { position: absolute; top: .5em; left: .5em; font-size: 2em; z-index: 9; width: 36px; height: 36px; background: var(--ast-global-color-primary,var(--ast-global-color-5)); text-indent: -9999px; border-radius: 100%; box-sizing: content-box; backface-visibility: hidden; } .single-product div.product div.images .woocommerce-product-gallery__trigger:before { content: ""; display: block; width: 10px; height: 10px; border: 2px solid var(--ast-global-color-3); border-radius: 100%; position: absolute; top: 9px; right: 9px; box-sizing: content-box; } .single-product div.product div.images .woocommerce-product-gallery__trigger:after { content: ""; display: block; width: 2px; height: 8px; background: var(--ast-global-color-3); border-radius: 6px; position: absolute; top: 19px; right: 22px; transform: rotate(45deg); box-sizing: content-box; } .woocommerce-product-gallery + .flex-control-thumbs{ margin-top: -1em !important; } .single-product div.product div.images { margin-bottom: 2em; } /* ===== THUMBS: FIXED SCROLLING ===== */ .woocommerce-product-gallery + .flex-control-thumbs, .single-product div.product div.images .flex-control-thumbs { direction: ltr; display: flex; flex-wrap: nowrap; /* IMPORTANT: keep in a single row */ overflow-x: auto; /* IMPORTANT: allow horizontal scroll */ overflow-y: hidden; -webkit-overflow-scrolling: touch; zoom: 1; margin: 0; padding: 0; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; } .woocommerce-product-gallery + .flex-control-thumbs::-webkit-scrollbar, .single-product div.product div.images .flex-control-thumbs::-webkit-scrollbar{ display: none; } /* IMPORTANT: prevent flex items from shrinking (otherwise no overflow => no scroll) */ .woocommerce-product-gallery + .flex-control-thumbs li, .single-product div.product div.images .flex-control-thumbs li { flex: 0 0 auto; /* IMPORTANT */ list-style: none; float: none; /* not needed with flex; can mess with layout */ margin: 0 1em 1em 0; scroll-snap-align: start; } /* Default thumb sizing (columns-4 is most common) */ .woocommerce-product-gallery + .flex-control-thumbs li, .single-product div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li { width: auto; flex-basis: 20%; /* 5-ish per view; change to 25% for 4 per view */ max-width: 20%; } /* Columns 3 */ .single-product div.product div.woocommerce-product-gallery--columns-3 .flex-control-thumbs li { width: auto; flex-basis: 33.333%; max-width: 33.333%; } /* Columns 5 */ .single-product div.product div.woocommerce-product-gallery--columns-5 .flex-control-thumbs li { width: auto; flex-basis: 20%; max-width: 20%; } /* Images */ .woocommerce-product-gallery + .flex-control-thumbs li img, .single-product div.product div.images .flex-control-thumbs li img { cursor: pointer; opacity: .5; margin: 0; display: block; } .woocommerce-product-gallery + .flex-control-thumbs li img.flex-active, .woocommerce-product-gallery + .flex-control-thumbs li img:hover, .single-product div.product div.images .flex-control-thumbs li img.flex-active, .single-product div.product div.images .flex-control-thumbs li img:hover { opacity: 1; } /* Main gallery viewport */ .single-product div.product div.images.woocommerce-product-gallery .flex-viewport { transform-style: preserve-3d; margin-bottom: 1em; }