.hero-banner-clickable{width:100%;background-color:var(--hbc-bg, #ffffff)}.hero-banner-clickable__heading{text-align:center;padding-block:1.5rem 1rem}.hero-banner-clickable__title{margin:0}.hero-banner-clickable__marquee{position:relative;overflow:hidden;padding-top:var(--hbc-mobile-pad-top, 16px);padding-bottom:var(--hbc-mobile-pad-bottom, 16px)}.hero-banner-clickable__track{display:flex;gap:var(--hbc-gap, 16px);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.hero-banner-clickable__track::-webkit-scrollbar{display:none}.hero-banner-clickable__item{position:relative;display:block;overflow:hidden;text-decoration:none;cursor:pointer;flex:0 0 100%;width:100%;scroll-snap-align:start}.hero-banner-clickable__image{display:block;width:100%;aspect-ratio:3 / 4;object-fit:cover;transition:transform .35s ease}.hero-banner-clickable__item:hover .hero-banner-clickable__image{transform:scale(1.04)}.hero-banner-clickable__label{position:absolute;left:50%;bottom:1rem;transform:translate(-50%);color:#fff;font-size:1.2rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.45);pointer-events:none;white-space:nowrap}.hbc-nav-btn{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:#ffffffe6;box-shadow:0 1px 4px #0003;cursor:pointer;z-index:2}.hbc-nav-btn--prev{left:8px}.hbc-nav-btn--next{right:8px}@media(prefers-reduced-motion:reduce){.hero-banner-clickable__track{animation:none!important}}@media screen and (min-width:750px){.hero-banner-clickable__marquee{padding-top:var(--hbc-pad-top, 40px);padding-bottom:var(--hbc-pad-bottom, 40px)}.hero-banner-clickable__item{flex-basis:var(--hbc-item-width, 350px);width:var(--hbc-item-width, 350px);scroll-snap-align:none}.hbc-nav-btn{display:none}.hero-banner-clickable__track{overflow:visible;scroll-snap-type:none}.hero-banner-clickable__marquee.hbc-marquee--active .hero-banner-clickable__track{width:max-content;animation:hbc-scroll var(--hbc-speed, 30s) linear infinite;animation-direction:var(--hbc-direction, normal)}.hbc-pause-on-hover.hbc-marquee--active:hover .hero-banner-clickable__track{animation-play-state:paused}}@keyframes hbc-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}
/*# sourceMappingURL=/cdn/shop/t/33/assets/component-hero-banner-clickable.css.map */