.reels-grid{background:var(--color-bg)}.reels-grid__header{max-width:48rem;margin-bottom:var(--space-8)}.reels-grid__eyebrow{margin:0 0 var(--space-2);font-family:var(--font-body);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-secondary)}.reels-grid__heading{margin:0;color:var(--color-text)}.reels-grid__viewport{position:relative}.reels-grid__track{display:flex;gap:var(--space-4);margin:0;padding:0 0 var(--space-2);list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-steel-200) transparent;padding-inline:var(--space-6);margin-inline:calc(-1 * var(--space-6))}.reels-grid__track::-webkit-scrollbar{height:6px}.reels-grid__track::-webkit-scrollbar-thumb{background:var(--color-steel-200)}.reels-grid__track::-webkit-scrollbar-track{background:transparent}.reels-grid__item{flex:0 0 auto;width:clamp(15rem,22vw,17rem);scroll-snap-align:start}.reels-grid__card{display:block;text-decoration:none;color:var(--color-text)}.reels-grid__card--static{cursor:default}.reels-grid__media{position:relative;aspect-ratio:9 / 16;overflow:hidden;background:var(--color-surface-grey);border:1px solid var(--color-border);border-radius:0}.reels-grid__image,.reels-grid__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.25,.1,.25,1)}.reels-grid__card:hover .reels-grid__image,.reels-grid__card:focus-visible .reels-grid__image{transform:scale(1.03)}.reels-grid__media:after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(40,40,38,.32),transparent);pointer-events:none}.reels-grid__play{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;color:var(--color-text);background:#ffffffdb;border:1px solid var(--color-steel-200);border-radius:0}.reels-grid__play svg{margin-left:1px}.reels-grid__caption-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-3)}.reels-grid__caption{font-family:var(--font-body);font-size:.8125rem;letter-spacing:.01em;color:var(--color-text)}.reels-grid__shop{flex:0 0 auto;font-family:var(--font-body);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary);padding-bottom:1px;border-bottom:1px solid var(--color-steel-200);transition:color .2s ease,border-color .2s ease}.reels-grid__card:hover .reels-grid__shop,.reels-grid__card:focus-visible .reels-grid__shop{color:var(--color-text);border-color:var(--color-text)}.reels-grid__card:focus-visible{outline:2px solid var(--color-text);outline-offset:3px}.reels-grid__empty{font-family:var(--font-body);font-size:.875rem;color:var(--color-text-secondary);border:1px dashed var(--color-border);padding:var(--space-8);text-align:center}@media(max-width:767px){.reels-grid__header{margin-bottom:var(--space-6)}.reels-grid__track{gap:var(--space-3);padding-inline:var(--space-4);margin-inline:calc(-1 * var(--space-4))}.reels-grid__item{width:clamp(11rem,64vw,14rem)}.reels-grid__caption{font-size:.875rem}}@media(prefers-reduced-motion:reduce){.reels-grid__image{transition:none}.reels-grid__card:hover .reels-grid__image,.reels-grid__card:focus-visible .reels-grid__image{transform:none}}.reels-grid__track{padding-inline:max(var(--section-spacing-x),calc((100vw - var(--max-width)) / 2 + var(--section-spacing-x)));scroll-padding-inline:max(var(--section-spacing-x),calc((100vw - var(--max-width)) / 2 + var(--section-spacing-x)));margin-inline:0}@media(min-width:990px){.reels-grid__track{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));max-width:var(--max-width);margin-inline:auto;padding-inline:var(--section-spacing-x);overflow:visible}.reels-grid__item{width:auto}}.reels-grid__card{position:relative}.reels-grid__media:after{height:45%;background:linear-gradient(to top,rgba(40,40,38,.55),transparent)}.reels-grid__caption-row{position:absolute;right:var(--space-4);bottom:var(--space-4);left:var(--space-4);z-index:1;margin:0}.reels-grid__caption{color:#fff;font-size:.9375rem;font-weight:700;letter-spacing:0}.reels-grid__caption-detail{display:block;margin-top:.125rem;font-size:.8125rem;font-weight:400;line-height:1.35}.reels-grid__card--detail .reels-grid__media:after{height:55%;background:linear-gradient(to top,rgba(40,40,38,.72),transparent)}.reels-grid__video,.reels-grid__still{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.reels-grid__still{transition:opacity .2s ease}.reels-grid__media.is-video .reels-grid__still{opacity:0}@media(prefers-reduced-motion:reduce){.reels-grid__video{display:none}.reels-grid__media.is-video .reels-grid__still{opacity:1;transition:none}}@media(min-width:768px){.reels-grid--large{--reel-w: clamp(17.5rem, min(25vw, (100vh - 10rem) * .5625), 25rem)}.reels-grid--large .reels-grid__item{width:var(--reel-w)}}@media(min-width:990px){.reels-grid--large .reels-grid__track{display:flex;max-width:none;margin-inline:0;padding-inline:max(var(--section-spacing-x),calc((100% - var(--max-width)) / 2 + var(--section-spacing-x)));scroll-padding-inline:max(var(--section-spacing-x),calc((100% - var(--max-width)) / 2 + var(--section-spacing-x)));overflow-x:auto;overflow-y:hidden}}.reels-grid--large>.container{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6)}.reels-grid__nav{display:none;flex:0 0 auto;gap:var(--space-2);margin-left:auto;margin-bottom:var(--space-8)}@media(min-width:768px)and (hover:hover)and (pointer:fine){.reels-grid__nav{display:flex}}.reels-grid__nav[hidden]{display:none}.reels-grid__arrow{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;color:var(--color-text);background:transparent;border:1px solid var(--color-border);border-radius:0;cursor:pointer;transition:border-color .2s ease,opacity .2s ease}.reels-grid__arrow svg{pointer-events:none}.reels-grid__arrow:hover:not(:disabled){border-color:var(--color-text)}.reels-grid__arrow:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}.reels-grid__arrow:disabled{opacity:.35;cursor:default}
/*# sourceMappingURL=/cdn/shop/t/11/assets/section-reels-grid.css.map */