.all-colours-pdp .carousel{display:flex;gap:0;overflow-x:scroll;cursor:grab;scroll-behavior:smooth;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}.all-colours-pdp .carousel::-webkit-scrollbar{display:none}.all-colours-pdp .carousel.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}.all-colours-pdp .carousel-wrapper{position:relative;overflow:hidden;border-radius:0}.all-colours-pdp .carousel-stack{position:relative}.all-colours-pdp .carousel-base-layer{position:relative;z-index:1;width:100%;aspect-ratio:1 / 1;overflow:hidden}.all-colours-pdp .carousel-overlay-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;opacity:0;transition:opacity .18s ease;pointer-events:none}.all-colours-pdp .carousel-overlay-layer.is-ready{opacity:1;pointer-events:auto}.all-colours-pdp .slide{position:relative;margin:0;overflow:hidden;box-sizing:border-box;aspect-ratio:1 / 1;min-width:100%;flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;pointer-events:auto}.all-colours-pdp .slide img{display:block;width:100%;height:100%;object-fit:cover}.all-colours-pdp .slide img.carousel-image{opacity:0;transition:opacity .32s ease}.all-colours-pdp .slide img.carousel-image.is-loaded{opacity:1}.all-colours-pdp .dots{position:absolute;bottom:24px;left:0;right:0;display:flex;flex-wrap:wrap;gap:4px;padding:0 .5rem;box-sizing:border-box;justify-content:center}.all-colours-pdp .dot{width:8px;height:8px;border-radius:16px;background-color:var(--tortilla);cursor:pointer;position:relative}.all-colours-pdp .dot.active{width:32px}.all-colours-pdp .dot.active:after{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);width:16px;height:8px;border-radius:16px;background-color:var(--night)}.all-colours-pdp .arrows{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;transform:translateY(-50%);margin:0 8px}.all-colours-pdp .arrow{padding:8px;cursor:pointer;background-color:#25252599;border-radius:50%}.all-colours-pdp .arrow svg{width:40px;height:40px}.all-colours-pdp .arrow svg path{stroke:var(--alabaster)}@media(prefers-reduced-motion:reduce){.all-colours-pdp .slide img.carousel-image{transition:none}}@media screen and (min-width:1000px){.all-colours-pdp .carousel>.slide{min-width:calc(100% + 1px);flex-basis:calc(100% + 1px)}}
/*# sourceMappingURL=/cdn/shop/t/328/assets/coat-all-paints-carousel.css.map */