.tlpb-gallery { --tlpb-gallery-gap: var( --tlpb-space-3 ); --tlpb-gallery-thumb: calc( var( --tlpb-space-8 ) + var( --tlpb-space-2 ) ); --tlpb-gallery-btn: calc( var( --tlpb-space-6 ) + var( --tlpb-space-3 ) ); --tlpb-gallery-icon: calc( var( --tlpb-space-4 ) + var( --tlpb-space-1 ) ); --tlpb-gallery-peek: var( --tlpb-space-7 ); container-type: inline-size;
position: relative;
display: grid;
grid-template-columns: minmax( 0, 1fr );
grid-template-areas: "stage";
gap: var( --tlpb-space-3 );
}
.tlpb-gallery--multi {
grid-template-areas:
"stage"
"dots";
} .tlpb-gallery .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images.tlpb-gallery .woocommerce-product-gallery__wrapper {
grid-area: stage;
position: relative;
display: flex;
gap: var( --tlpb-gallery-gap );
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
border-radius: var( --tlpb-radius-md ); transition: none;
}
.tlpb-gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
display: none;
}
.tlpb-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce div.product div.images.tlpb-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
position: relative;
display: block;
flex: 0 0 100%;
width: auto;
aspect-ratio: 1;
overflow: hidden;
border-radius: var( --tlpb-radius-md ); background: var( --tlpb-gallery-fill, var( --tlpb-panel ) );
scroll-snap-align: start;
scroll-snap-stop: always;
}
.tlpb-gallery .woocommerce-product-gallery__image a,
.woocommerce div.product div.images.tlpb-gallery .woocommerce-product-gallery__image a {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
cursor: zoom-in;
}
.tlpb-gallery .woocommerce-product-gallery__image a:focus-visible {
outline: 3px solid var( --tlpb-plum );
outline-offset: -3px;
}
.tlpb-gallery .woocommerce-product-gallery__image img,
.woocommerce div.product div.images.tlpb-gallery .woocommerce-product-gallery__image img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: contain;
} .tlpb-gallery .tlpb-gallery__btn {
position: absolute;
z-index: 2;
grid-area: stage;
display: grid;
place-items: center;
width: var( --tlpb-gallery-btn );
height: var( --tlpb-gallery-btn );
margin: 0;
padding: 0;
border: 0;
border-radius: var( --tlpb-radius-pill );
background: var( --tlpb-panel );
box-shadow: var( --tlpb-shadow-card );
color: var( --tlpb-ink );
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.tlpb-gallery .tlpb-gallery__btn:hover,
.tlpb-gallery .tlpb-gallery__btn:focus {
background: var( --tlpb-panel );
color: var( --tlpb-ink );
}
.tlpb-gallery .tlpb-gallery__btn:hover {
transform: scale( 1.06 );
}
.tlpb-gallery .tlpb-gallery__btn:focus-visible {
outline: 3px solid var( --tlpb-ink );
outline-offset: 2px;
}
.tlpb-gallery .tlpb-gallery__btn svg {
display: block;
width: var( --tlpb-gallery-icon );
height: var( --tlpb-gallery-icon );
}
.tlpb-gallery .tlpb-gallery__btn--zoom {
top: var( --tlpb-space-3 );
right: var( --tlpb-space-3 );
}
.tlpb-gallery .tlpb-gallery__btn--prev,
.tlpb-gallery .tlpb-gallery__btn--next {
top: 50%;
translate: 0 -50%;
opacity: 0;
pointer-events: none;
}
.tlpb-gallery .tlpb-gallery__btn--prev {
left: var( --tlpb-space-3 );
}
.tlpb-gallery .tlpb-gallery__btn--next {
right: var( --tlpb-space-3 );
} .tlpb-gallery:hover .tlpb-gallery__btn:not( [disabled] ),
.tlpb-gallery .tlpb-gallery__btn:focus-visible {
opacity: 1;
pointer-events: auto;
} @media ( hover: none ) {
.tlpb-gallery .tlpb-gallery__btn--prev,
.tlpb-gallery .tlpb-gallery__btn--next {
display: none;
}
} .tlpb-gallery .tlpb-gallery__thumbs {
grid-area: thumbs;
display: none;
flex-direction: column;
gap: var( --tlpb-space-3 ); height: 0;
min-height: 100%;
margin: 0;
padding: var( --tlpb-space-1 );
overflow-y: auto;
scrollbar-width: none;
list-style: none;
}
.tlpb-gallery .tlpb-gallery__thumbs::-webkit-scrollbar {
display: none;
}
.tlpb-gallery .tlpb-gallery__thumbs li {
flex: 0 0 auto;
margin: 0;
padding: 0;
list-style: none;
}
.tlpb-gallery .tlpb-gallery__thumb {
position: relative;
display: block;
width: var( --tlpb-gallery-thumb );
height: var( --tlpb-gallery-thumb );
margin: 0;
padding: 0;
border: 0;
border-radius: var( --tlpb-radius-sm );
background: var( --tlpb-panel );
box-shadow: none;
cursor: pointer;
transition: box-shadow 0.15s ease;
}
.tlpb-gallery .tlpb-gallery__thumb:hover,
.tlpb-gallery .tlpb-gallery__thumb:focus {
background: var( --tlpb-panel );
}
.tlpb-gallery .tlpb-gallery__thumb img {
display: block;
width: 100%;
height: 100%;
margin: 0;
border-radius: inherit;
object-fit: cover;
} .tlpb-gallery .tlpb-gallery__thumb::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px var( --tlpb-line );
pointer-events: none;
transition: box-shadow 0.15s ease;
}
.tlpb-gallery .tlpb-gallery__thumb:hover::after {
box-shadow: inset 0 0 0 1px var( --tlpb-field-line );
} .tlpb-gallery .tlpb-gallery__thumb[aria-current="true"] {
box-shadow: 0 0 0 2px var( --tlpb-surface ), 0 0 0 4px var( --tlpb-plum );
}
.tlpb-gallery .tlpb-gallery__thumb:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var( --tlpb-surface ), 0 0 0 4px var( --tlpb-ink );
} .tlpb-gallery .tlpb-gallery__dots {
grid-area: dots;
display: flex;
justify-content: center;
gap: var( --tlpb-space-2 );
}
.tlpb-gallery .tlpb-gallery__dot {
width: var( --tlpb-space-2 );
height: var( --tlpb-space-2 );
border-radius: var( --tlpb-radius-pill );
background: var( --tlpb-field-line );
transition: width 0.2s ease, background-color 0.2s ease;
}
.tlpb-gallery .tlpb-gallery__dot.is-active {
width: var( --tlpb-space-5 );
background: var( --tlpb-plum );
} @media ( min-width: 768px ) {
.tlpb-gallery--multi .tlpb-gallery__thumbs {
display: flex;
}
.tlpb-gallery .tlpb-gallery__dots {
display: none;
}
} @media ( min-width: 768px ) and ( max-width: 1023px ) {
.tlpb-gallery--multi {
grid-template-areas:
"stage"
"thumbs";
}
.tlpb-gallery--multi .tlpb-gallery__thumbs {
flex-direction: row;
height: auto;
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
} .tlpb-gallery--multi .tlpb-gallery__thumbs li {
flex: 0 1 var( --tlpb-gallery-thumb );
min-width: calc( var( --tlpb-space-7 ) + var( --tlpb-space-2 ) );
}
.tlpb-gallery--multi .tlpb-gallery__thumb {
width: 100%;
height: auto;
aspect-ratio: 1;
}
} @media ( min-width: 1024px ) { .tlpb-gallery--multi {
grid-template-columns: clamp( calc( var( --tlpb-space-8 ) + var( --tlpb-space-2 ) ), 15%, calc( var( --tlpb-space-8 ) + var( --tlpb-space-7 ) ) ) minmax( 0, 1fr );
grid-template-areas: "thumbs stage";
column-gap: var( --tlpb-space-3 );
}
.tlpb-gallery--multi .tlpb-gallery__thumb {
width: 100%;
height: auto;
aspect-ratio: 1;
}
} @media ( max-width: 767px ) { .tlpb-gallery--multi .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images.tlpb-gallery--multi .woocommerce-product-gallery__wrapper {
margin-inline: calc( 50cqw - 50vw );
padding-inline: calc( 50vw - 50cqw );
scroll-padding-inline: calc( 50vw - 50cqw );
border-radius: 0;
} .tlpb-gallery--multi.tlpb-gallery--inset .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images.tlpb-gallery--multi.tlpb-gallery--inset .woocommerce-product-gallery__wrapper {
margin-inline: 0;
padding-inline: 0;
scroll-padding-inline: 0;
border-radius: var( --tlpb-radius-md );
}
.tlpb-gallery--multi .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce div.product div.images.tlpb-gallery--multi .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
flex-basis: calc( 100cqw - var( --tlpb-gallery-peek ) );
} .tlpb-gallery--multi .tlpb-gallery__btn--zoom {
right: calc( var( --tlpb-gallery-peek ) + var( --tlpb-space-3 ) );
transition: right 0.2s ease;
}
.tlpb-gallery--multi.is-last .tlpb-gallery__btn--zoom {
right: var( --tlpb-space-3 );
}
.tlpb-gallery .tlpb-gallery__btn--prev,
.tlpb-gallery .tlpb-gallery__btn--next {
display: none;
}
}
@media ( prefers-reduced-motion: reduce ) {
.tlpb-gallery .tlpb-gallery__btn,
.tlpb-gallery .tlpb-gallery__thumb,
.tlpb-gallery .tlpb-gallery__thumb::after,
.tlpb-gallery .tlpb-gallery__dot {
transition: none;
}
}