.granxok-thumbs-outer {
position: relative;
width: 100%;
margin-top: 14px;
padding: 0 36px;
box-sizing: border-box;
}
.granxok-thumbs-outer .granxok-thumbs-swiper {
overflow: hidden;
}
.granxok-thumbs-outer .flex-control-thumbs.swiper-wrapper {
display: flex;
align-items: stretch;
margin: 0;
padding: 4px 0;
list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce-page div.product div.images .flex-control-thumbs {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin: 14px 0 0;
padding: 4px 0;
list-style: none;
overflow-x: auto;
scrollbar-width: thin;
}
.granxok-thumbs-outer .flex-control-thumbs .swiper-slide {
width: 88px;
height: 108px;
flex-shrink: 0;
margin: 0;
box-sizing: border-box;
}
.granxok-thumbs-outer .flex-control-thumbs li {
width: 88px;
height: 108px;
flex-shrink: 0;
margin: 0;
padding: 4px;
border: 2px solid transparent;
border-radius: 6px;
background: #fff;
box-sizing: border-box;
cursor: pointer;
transition: border-color 0.2s ease, opacity 0.2s ease;
}
.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce-page div.product div.images .flex-control-thumbs li {
width: 88px !important;
height: 108px;
flex: 0 0 88px !important;
margin: 0 !important;
padding: 4px;
border: 2px solid transparent;
border-radius: 6px;
background: #fff;
box-sizing: border-box;
overflow: hidden;
}
.granxok-thumbs-outer .flex-control-thumbs li.flex-active,
.granxok-thumbs-outer .flex-control-thumbs li:hover {
border-color: #257785;
}
.granxok-thumbs-outer .flex-control-thumbs li img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
border-radius: 4px;
}
.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce-page div.product div.images .flex-control-thumbs li img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain;
object-position: center center;
}
.woocommerce div.product div.images .flex-control-thumbs li.flex-active,
.woocommerce-page div.product div.images .flex-control-thumbs li.flex-active {
border-color: #257785;
}
.granxok-thumbs-prev,
.granxok-thumbs-next {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin: 0;
padding: 0;
border: 1px solid #d8d8d8;
border-radius: 50%;
background: #fff;
color: #257785;
font-size: 20px;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.granxok-thumbs-prev {
left: 0;
}
.granxok-thumbs-next {
right: 0;
}
.granxok-thumbs-prev:hover,
.granxok-thumbs-next:hover {
background: #f4f8f9;
border-color: #257785;
}
.granxok-thumbs-prev.swiper-button-disabled,
.granxok-thumbs-next.swiper-button-disabled {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
@media (max-width: 767px) {
.granxok-thumbs-outer {
padding: 0 32px;
}
.granxok-thumbs-outer .flex-control-thumbs .swiper-slide,
.granxok-thumbs-outer .flex-control-thumbs li {
width: 72px;
height: 90px;
}
.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce-page div.product div.images .flex-control-thumbs li {
width: 72px !important;
height: 90px;
flex-basis: 72px !important;
}
}