/* Featured products carousel (public/site/lendl-carousel.js). */
.lcar { position: relative; overflow: hidden; padding: 6px 0 10px; }
.lcar ul.lcar__track.product-grid { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  will-change: transform; }
.lcar ul.lcar__track > li.grid__item { flex: 0 0 var(--lcar-w, 25%) !important; width: var(--lcar-w, 25%) !important; max-width: none !important; padding: 0 10px !important; box-sizing: border-box; margin: 0 !important; }
.lcar ul.lcar__track > .grid__item > .card-wrapper { zoom: 1 !important; }
.lcar:not(.is-ready) ul.lcar__track { opacity: 0; }
.lcar.is-ready ul.lcar__track { opacity: 1; transition: opacity .3s ease; }

/* The half-cut cards at each edge fade into the page, so they read as "more this way". */
.lcar::before, .lcar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 2; pointer-events: none; }
.lcar::before { left: 0; background: linear-gradient(90deg, rgb(var(--color-background, 255, 255, 255)) 0%, rgba(var(--color-background, 255, 255, 255), 0) 100%); }
.lcar::after { right: 0; background: linear-gradient(270deg, rgb(var(--color-background, 255, 255, 255)) 0%, rgba(var(--color-background, 255, 255, 255), 0) 100%); }

.lcar__arrow { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 1px solid #e6e7ea; border-radius: 50% !important;
  background: #fff; color: #121212; cursor: pointer; box-shadow: 0 12px 28px -14px rgba(15, 18, 24, .45); transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.lcar__arrow--prev { left: 3%; }
.lcar__arrow--next { right: 3%; }
.lcar__arrow:hover { background: #d51c2a; border-color: #d51c2a; color: #fff; transform: scale(1.06); }
.lcar__arrow:focus-visible { outline: 3px solid rgba(213, 28, 42, .35); outline-offset: 3px; }
@media (max-width: 599px) { .lcar__arrow { width: 42px; height: 42px; margin-top: -21px; } .lcar__arrow--prev { left: 6px; } .lcar__arrow--next { right: 6px; } }
@media (prefers-reduced-motion: reduce) { .lcar.is-ready ul.lcar__track { transition: none; } }
