.stories-bar{--stories-size: 7.2rem;--stories-gap: var(--spacing-4);--stories-ring-width: .25rem;--stories-ring-gap: .3rem;--stories-ring: rgb(var(--color-foreground));--stories-ring-seen: rgb(var(--color-border));position:relative}.stories-bar__inner{position:relative}.stories-bar__heading{margin:0 0 var(--spacing-3);font-size:var(--font-size-static-xs);letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--color-foreground));opacity:.7}.stories-bar__track{display:flex;gap:var(--stories-gap);overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:.4rem 0 .2rem;margin:-.4rem 0 -.2rem;list-style:none}.stories-bar__track::-webkit-scrollbar{display:none}.stories-bar--center .stories-bar__track{justify-content:safe center}.stories-bar__item{flex:0 0 auto;scroll-snap-align:start;width:var(--stories-size);margin:0}.stories-bar__link{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-decoration:none;color:rgb(var(--color-foreground));outline-offset:.3rem}.stories-bar .stories-bar__ring{position:relative;display:block;width:var(--stories-size);height:var(--stories-size);border-radius:50%;transition:transform .25s ease}.stories-bar .stories-bar__ring:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--stories-ring);transition:opacity .25s ease}.stories-bar .stories-bar__ring:after{content:"";position:absolute;inset:var(--stories-ring-width);border-radius:50%;background:rgb(var(--color-background))}.stories-bar--ring-gradient .stories-bar__ring:before{background:conic-gradient(from 210deg,var(--stories-ring-a),var(--stories-ring-b),var(--stories-ring-c),var(--stories-ring-a))}.stories-bar .stories-bar__link.is-seen .stories-bar__ring:before{background:var(--stories-ring-seen)}.stories-bar__link:hover .stories-bar__ring,.stories-bar__link:focus-visible .stories-bar__ring{transform:scale(1.05)}.stories-bar .stories-bar__media{position:absolute;inset:calc(var(--stories-ring-width) + var(--stories-ring-gap));z-index:1;display:block;border-radius:50%;overflow:hidden;background:rgb(var(--color-border))}.stories-bar .stories-bar__media img,.stories-bar .stories-bar__media svg{width:100%;height:100%;object-fit:cover;display:block}.stories-bar .stories-bar__media--text{display:flex;align-items:center;justify-content:center;font-family:var(--font-heading-family);font-weight:var(--font-heading-weight);font-size:calc(var(--stories-size) * .26);line-height:1;color:rgb(var(--color-background));background:rgb(var(--color-foreground));text-transform:uppercase;letter-spacing:.04em}.stories-bar__badge{z-index:2;position:absolute;bottom:-.2rem;left:50%;transform:translate(-50%);padding:.15rem .55rem;border-radius:999px;background:rgb(var(--color-foreground));color:rgb(var(--color-background));font-size:.95rem;font-weight:var(--font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;line-height:1.3;white-space:nowrap;border:.2rem solid rgb(var(--color-background))}.stories-bar__label{max-width:calc(var(--stories-size) + 1.2rem);font-size:var(--font-size-static-xs);line-height:1.25;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.stories-bar__nav{position:absolute;top:calc(var(--stories-size) / 2);transform:translateY(-50%);width:3.2rem;height:3.2rem;border-radius:50%;border:1px solid rgb(var(--color-border));background:rgb(var(--color-background));color:rgb(var(--color-foreground));display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2;box-shadow:0 .2rem .8rem rgba(var(--color-black-rgb),.12)}.stories-bar__nav svg{width:1.2rem;height:1.2rem}.stories-bar__nav--prev{left:-1.2rem}.stories-bar__nav--next{right:-1.2rem}.stories-bar__nav[hidden]{display:none}@media screen and (min-width:990px){.stories-bar.is-scrollable .stories-bar__nav:not([hidden]){display:inline-flex}}@media screen and (max-width:749px){.stories-bar{--stories-size: var(--stories-size-mobile, 6.4rem);--stories-gap: var(--spacing-3)}.stories-bar__track{padding-inline:var(--spacing-3);margin-inline:calc(-1 * var(--spacing-3))}}@media(prefers-reduced-motion:reduce){.stories-bar__track{scroll-behavior:auto}.stories-bar__ring{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/89/assets/section-stories-bar.css.map */