.reels-section{padding:3rem 0 3.5rem;background:rgb(var(--color-background));overflow:hidden}.reels-container{max-width:1280px;margin:0 auto;padding:0 1.25rem}.reels-header{text-align:center;margin:0 auto 2rem;max-width:640px}.reels-heading{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:0;color:rgb(var(--color-foreground))}.reels-subheading{font-size:.9375rem;font-weight:400;line-height:1.5;margin:.625rem 0 0;color:rgba(var(--color-foreground),.65)}.reels-track-wrapper{position:relative}.reels-track{display:flex;gap:.875rem;list-style:none;margin:0;padding:0 1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:1.25rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}.reels-track::-webkit-scrollbar{display:none}.reel-card{flex:0 0 auto;width:38vw;max-width:160px;scroll-snap-align:start;display:flex;flex-direction:column;gap:.5rem}.reel-card__media{position:relative;aspect-ratio:9 / 16;border-radius:14px;overflow:hidden;background:rgba(var(--color-foreground),.05);box-shadow:0 1px 2px #0000000a;transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1)}.reel-card__media:hover{transform:translateY(-2px);box-shadow:0 6px 18px #00000014}.reel-card__video{width:100%;height:100%;object-fit:cover;display:block}.reel-card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:rgba(var(--color-foreground),.25)}.reel-card__placeholder svg{width:3rem;height:3rem}.reel-card__play{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:#fff;transition:background .22s cubic-bezier(.4,0,.2,1)}.reel-card__play:hover,.reel-card__play:focus-visible{background:#0000002e;outline:none}.reel-card__play-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:999px;background:#00000073;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:scale(.92);opacity:0;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .22s cubic-bezier(.4,0,.2,1)}.reel-card__media:hover .reel-card__play-icon,.reel-card__play:focus-visible .reel-card__play-icon{transform:scale(1);opacity:1}.reel-card__play-icon svg{width:1.25rem;height:1.25rem;margin-left:2px}.reel-card__footer{display:flex;align-items:flex-start;justify-content:space-between;gap:.625rem;padding:0 .125rem}.reel-card__caption{font-size:.8125rem;font-weight:500;line-height:1.4;color:rgba(var(--color-foreground),.75);margin:0;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.reel-card__link{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.625rem;height:1.625rem;color:rgba(var(--color-foreground),.55);transition:color .18s ease}.reel-card__link:hover{color:rgb(var(--color-foreground))}.reel-card__link svg{width:.9375rem;height:.9375rem}.reels-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:2.5rem;height:2.5rem;border-radius:999px;border:1px solid rgba(var(--color-foreground),.12);background:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0000000f;transition:opacity .18s ease,transform .18s ease,background .18s ease;opacity:0;pointer-events:none}.reels-nav svg{width:1.125rem;height:1.125rem}.reels-nav--prev{left:-.5rem}.reels-nav--next{right:-.5rem}.reels-nav:hover{background:rgba(var(--color-foreground),.04)}.reels-nav:disabled{opacity:0;pointer-events:none}.reels-cta{display:flex;justify-content:center;margin-top:2rem}.reels-cta__link{display:inline-flex;align-items:center;gap:.5rem;padding:.6875rem 1.25rem;font-size:.875rem;font-weight:500;letter-spacing:-.005em;color:rgb(var(--color-foreground));text-decoration:none;border:1px solid rgba(var(--color-foreground),.18);border-radius:999px;transition:background .18s ease,border-color .18s ease}.reels-cta__link:hover{background:rgba(var(--color-foreground),.04);border-color:rgba(var(--color-foreground),.3)}.reels-cta__link svg{width:.875rem;height:.875rem}.reels-empty{padding:2.5rem 1rem;text-align:center;border:1px dashed rgba(var(--color-foreground),.18);border-radius:12px;color:rgba(var(--color-foreground),.5);font-size:.875rem}.reel-modal{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;margin:0;top:0;right:0;bottom:0;left:0;overflow:hidden}.reel-modal[open]{display:flex;align-items:center;justify-content:center}.reel-modal::backdrop{background:#000000d9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.reel-modal__media{position:relative;width:min(92vw,420px);aspect-ratio:9 / 16;max-height:88vh;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 20px 60px #00000080}.reel-modal__video{width:100%;height:100%;object-fit:contain;background:#000}.reel-modal__close{position:absolute;top:1rem;right:1rem;z-index:3;width:2.5rem;height:2.5rem;border-radius:999px;border:0;background:#ffffff1f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease}.reel-modal__close:hover{background:#fff3}.reel-modal__close svg{width:1.125rem;height:1.125rem}@media(min-width:750px){.reels-section{padding:4rem 0 4.5rem}.reels-heading{font-size:1.875rem}.reels-subheading{font-size:1rem;margin-top:.75rem}.reels-track{gap:1rem;padding:0 1.5rem;scroll-padding-left:1.5rem}.reel-card{width:18vw;max-width:165px}.reel-card__caption{font-size:.8125rem}}@media(min-width:990px){.reels-track-wrapper:hover .reels-nav{opacity:1;pointer-events:auto}.reels-track{gap:1rem;padding:0 1.75rem;scroll-padding-left:1.75rem}.reel-card{width:165px;max-width:165px}.reels-nav--prev{left:.25rem}.reels-nav--next{right:.25rem}}@media(prefers-reduced-motion:reduce){.reel-card__media,.reel-card__play-icon,.reels-nav,.reels-cta__link{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/product-reels.css.map */