.related-products{display:block}.related-products__header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;margin-bottom:3rem}.related-products__heading{margin:0}.related-products__controls{display:flex;gap:.8rem}.related-products__control{display:inline-flex;align-items:center;justify-content:center;width:4.8rem;height:4.8rem;border:.1rem solid var(--velae-border, rgba(var(--color-foreground), .14));border-radius:50%;background:#f7f3efc2;color:rgb(var(--color-foreground));cursor:pointer;font-size:1.7rem;line-height:1;transition:background-color .22s ease,border-color .22s ease,color .22s ease,opacity .22s ease,transform .22s ease}.related-products__control:hover{border-color:rgb(var(--color-foreground));background:rgb(var(--color-foreground));color:rgb(var(--color-background));transform:translateY(-.2rem)}.related-products__control:disabled{cursor:default;opacity:.36;transform:none}.related-products__rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(22rem,24vw,34rem);gap:clamp(1.2rem,2vw,2.4rem);align-items:start;margin:0;overflow-x:auto;overflow-y:hidden;padding-bottom:1.2rem;list-style:none;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-color:var(--velae-champagne, rgba(var(--color-foreground), .36)) transparent;scrollbar-width:thin}.related-products__rail::-webkit-scrollbar{height:.4rem}.related-products__rail::-webkit-scrollbar-track{background:transparent}.related-products__rail::-webkit-scrollbar-thumb{background:rgba(var(--color-foreground),.24);border-radius:999rem}.related-products__rail .grid__item{width:auto;max-width:none;min-width:0;scroll-snap-align:start}.related-products__rail .card-wrapper{transform:translateZ(0)}.related-products__rail .media.media--hover-effect>img{backface-visibility:hidden;transition:opacity .26s ease,transform .52s cubic-bezier(.22,1,.36,1)}@media screen and (min-width:990px){.related-products__rail .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child){opacity:0}.related-products__rail .card-wrapper:hover .media.media--hover-effect>img+img{opacity:1;transform:scale(1.03)}}@media screen and (max-width:749px){.related-products__header{grid-template-columns:1fr}.related-products__controls{justify-content:flex-start}.related-products__rail{grid-auto-columns:minmax(19rem,66vw)}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/section-related-products.css.map */