:root{--gutter: clamp(16px, 3.5vw, 50px);--ease-out: cubic-bezier(.2, .7, .2, 1)}.hero{position:relative;display:grid;background:#a2a2a2;overflow:hidden;font-family:Inter,-apple-system,Segoe UI,sans-serif}.hero__slide{grid-area:1 / 1;position:relative;display:block;opacity:0;visibility:hidden;transition:opacity .6s var(--ease-out),visibility .6s}.hero__slide.is-active{opacity:1;visibility:visible}.hero__slide:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(to top,#00000073,#0000);pointer-events:none}.hero__frame{position:relative;display:block;aspect-ratio:16 / 7;overflow:hidden;background:#a2a2a2;color:#000}.hero__frame picture{display:contents}.hero__pic{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.hero__empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:12px;color:#000;background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,currentColor 8%,transparent) 10px 11px)}.hero__empty-label{max-width:90%;font-size:12px;font-weight:500;line-height:1.3;text-align:center}.hero__controls{position:absolute;left:var(--gutter);bottom:clamp(16px,2.6vw,36px);z-index:2;display:flex;align-items:center;gap:20px;color:#fff}.hero__controls button{font-family:inherit}.hero__controls :focus{outline:none}.hero__controls :focus-visible{outline:2px solid #fff;outline-offset:2px}.hero__pause,.hero__arrows button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.75);border-radius:100px;background:transparent;color:#fff;cursor:pointer}.hero__pause:hover,.hero__arrows button:hover{background:#fff;color:#000}.hero__count{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}.hero__dots{display:flex;gap:6px}.hero__dot{width:24px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;transition:width .3s}.hero__dot span{display:block;width:100%;height:3px;border-radius:3px;background:#ffffffbf}.hero__dot.is-active{width:40px}.hero__dot.is-active span{background:#fff}.hero__arrows{display:flex;gap:4px}@media(max-width:767px){.hero__frame{aspect-ratio:4 / 5}.hero__controls{right:var(--gutter);gap:16px}.hero__dots{display:none}.hero__arrows{margin-left:auto}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/cc-hero-slider.css.map */