.carousel { position: relative; overflow: hidden; overflow: visible; user-select: text; }

.wrap.carousel .inner { position: static; height: 100%; }

.carousel .inner .row { height: 100%; }

.carousel:not(.scroll) div:is(.inner, .colgroup) .row .col { display: none; position: static; height: 100%; opacity: 0; transition: opacity ease-in-out .3s; margin: 0; }

.carousel div:is(.inner, .colgroup) .row .col.show, .carousel.mobile div:is(.inner, .colgroup) .row .col, .carousel.mobile.productimagegallery ul li.show { opacity: 1; display: inline-block; }

.carousel .carousel-container .colgroup, .carousel .inner .row .col .row { height: 100%; }

.carousel.indicators { padding-bottom: 65px; }

.carousel.arrows { padding-bottom: 85px; }

.carousel.scroll .row { display: flex; flex-wrap: nowrap; }

.carousel.scroll .row { overflow-y: hidden; overflow-x: auto; scroll-snap-type: x mandatory; user-select: none; scrollbar-width: none; scroll-behavior: smooth; }

.carousel.scroll .row .col { flex-shrink: 0; scroll-snap-align: start; }

/* THE CONTENT */
/*.carousel .carousel-container .row {*/
/*display: flex;*/
                                                            /*}
.carousel .carousel-container .carousel-content { }
.carousel .carousel-container h1, .carousel .carousel-container h2 { font-size: 3.6rem; padding-bottom: 1rem; }

.carousel .carousel-container.show .carousel-content { animation: fadeInY .3s forwards; height: 100%; display: flex; z-index: 1 }
.carousel .carousel-container.show .carousel-content > .colgroup { height: auto; width: 100%; align-self: flex-end; margin-bottom: 80px; }
.carousel .carousel-container.show .col .butblock.cta a { animation: pulse 1s forwards; animation-delay: .75s; }

.carousel .carousel-container p { font-size: 1.4rem; }

.carousel .carousel-container .carousel-content img { width: auto; height: 50px; }*/
/* THE IMAGE */
/*.carousel .carousel-container .stretch { position: static }
.carousel .carousel-container .stretch .imgelm { z-index: 0; width: 60%; height: 100%; margin-bottom: 0; box-sizing: border-box; position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.carousel .carousel-container .stretch .imgelm img { object-fit: cover; display: block; width: 100%; height: 100%; }
.carousel .carousel-container .stretch .imgelm:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to left, transparent 0%, transparent 70%, $carouselMainBg 100%), linear-gradient(to bottom, transparent 0%, transparent 10%, $carouselMainBg 100%); z-index: 1 }

.carousel .carousel-container.show .stretch .imgelm { animation: fadeIn .5s forwards; }*/
/* INDICATORS/ARROWS */
.carousel-indicator, .carousel-arrows { position: absolute; bottom: 20px; left: 50%; width: 100%; height: auto; transform: translateX(-50%); text-align: center; z-index: 1; display: none; }

.carousel.indicators .carousel-indicator, .carousel.arrows .carousel-arrows { display: block; bottom: 0; }

.carousel.arrows .carousel-arrows { display: flex; justify-content: end; column-gap: 20px; padding: 0 10px; box-sizing: border-box; }

.carousel.indicators.mobile .carousel-indicator { display: none; }

.carousel-indicator button { margin: 0 10px; display: inline-block; vertical-align: middle; padding: 0; background: #fff; width: 25px; height: 25px; position: relative; margin-bottom: 0; box-sizing: border-box; border-radius: 50%; cursor: pointer; user-select: none; box-sizing: border-box; }

.carousel-indicator button.active { border: 3px solid #1D1D1D !important; opacity: 1; }

.carousel-arrows button { display: block; width: 60px; height: 60px; background: transparent url(/images/right-grey.svg) center no-repeat; background-size: contain; border-radius: 3rem; cursor: pointer; text-indent: -999999px; }

.carousel-arrows button.previous { background-image: url(/images/left.svg); }

.carousel.thumbs { padding-bottom: 0; }

.thumbs .carousel-indicator { bottom: 0; text-align: left; position: relative; padding: 10px 0; }

.thumbs .carousel-indicator button { margin: 0; display: inline-block; vertical-align: middle; padding: 0; background: #1D1D1D center no-repeat; background-size: cover; width: 80px; height: 80px; position: relative; aspect-ratio: 100 / 100; margin-bottom: 0; box-sizing: border-box; border-radius: 10px; cursor: pointer; user-select: none; box-sizing: border-box; }

/*.automatic .carousel-indicator button.active:before { content: ''; background: $carouselBase; height: 5px; bottom: -55px; width: 50%; margin: 0 auto; display: block; position: relative; }
.automatic .carousel-indicator button:after { content: ''; background: linear-gradient(to bottom, $carouselAccent1, $carouselAccent2); height: 5px; bottom: -50px; transform-origin: left center; width: 50%; transform: scaleX(0); margin: 0 auto; opacity: 0; transition: all ease-in-out .3s; display: block; position: relative; }
.automatic .carousel-indicator button.active:after { opacity: 1; animation: roundtime calc(10s) linear forwards; }
.carousel-indicator button.active, .carousel-indicator button:hover { transform: scale(1.05); }*/
/* ANIMATIONS */
@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeInY { 0% { opacity: 0; top: 0; }
  100% { opacity: 1; top: -8px; } }
@keyframes pulse { 0% { transform: scale(1); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); } }
@keyframes roundtime { to { /* More performant than `width` */
transform: scaleX(1); } }
@media only screen and (max-width: 1140px) { /*.carousel .carousel-container.show .carousel-content > .colgroup { margin-bottom: 60px; }*/ }
/* RESPONSIVE */
@media screen and (max-width: 769px) {    /* .carousel .carousel-container .row { display: block; } .carousel .carousel-container .stretch .imgelm { width: 100%; height: 60%; background-position: top center !important; top: 0; left: 50%; transform: translateX(-50%) } .carousel .carousel-container .stretch .imgelm:before { background-image: linear-gradient(to bottom, transparent 0%, transparent 10%, $carouselMainBg 100%); } .carousel-indicator button { height: 50px; } .automatic .carousel-indicator button.active:after { bottom: -35px; } .automatic .carousel-indicator button.active:before { bottom: -40px; }
 .carousel .carousel-container.show { text-align: center; } .carousel .carousel-container .carousel-content { width: 75% !important; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-bottom: 40px; } .carousel .carousel-container h1, .carousel .carousel-container h2 { font-size: 2.4rem; }

 .carousel .carousel-container.show .carousel-content > .colgroup { margin-bottom: 20px }
 .carousel .carousel-container .carousel-content img { margin: 0 auto; }*/
  .productimagegallery ul { display: block; }
  .carousel.indicators.mobile .carousel-indicator { display: flex; white-space: nowrap; overflow: hidden; overflow-x: scroll; scrollbar-width: none; gap: 10px; box-sizing: border-box; }
  .carousel.mobile div:is(.inner, .colgroup) .row .col:not(.show), .carousel.mobile.productimagegallery ul li { display: none; opacity: 0; } }
@media screen and (max-width: 376px) { /*.carousel { height: 75dvh; } .carousel .carousel-container .col { width: 100% !important; } .carousel-indicator button { height: 20px; background-image: none !important; aspect-ratio: auto; width: 20px; background: #777777; } .carousel-indicator button.active { border: none !important; background: $carouselBorder; } .carousel-indicator button:before, .carousel-indicator button:after { display: none !important; } .carousel-indicator { bottom: -40px; }*/ }