.bb-the-system{position:relative;background-color:var(--bb-color-bg-offwhite, #f7f6f3);padding:80px 0 48px;overflow:visible;scroll-margin-top:var(--bb-header-height, 110px)}.bb-the-system__container{position:relative;z-index:2;width:100%;max-width:var(--bb-container-max, 1416px);margin:0 auto;padding:0 var(--bb-container-padding, 12px)}.bb-the-system__header{text-align:center;margin-bottom:48px}.bb-the-system__title{font-family:var(--bb-font-display, "Brodaers", serif)!important;font-size:var(--bb-text-9xl);font-weight:400!important;line-height:.95;letter-spacing:-.02em;text-transform:uppercase;color:var(--bb-color-text, #222012);margin:0 auto 24px;max-width:794px}.bb-the-system__description{font-family:var(--bb-font-body, "Gill Sans", sans-serif);font-size:18px;font-weight:400;line-height:1.5;color:var(--bb-color-text, #222012);margin:0 auto;max-width:600px}.bb-the-system__video-wrapper{position:relative;max-width:1100px;margin:0 auto}.bb-the-system__bg-art{position:absolute;top:180px;left:0;width:100%;height:calc(100% - 132px);z-index:0;pointer-events:none;overflow:hidden}.bb-the-system__bg-art img{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100%;min-width:1440px;height:auto;display:block}.bb-the-system__sticker{position:absolute;z-index:10;top:-60px;left:30px;width:150px;height:auto;pointer-events:none}.bb-the-system__sticker img{width:100%;height:auto;display:none}.bb-the-system__video-container{position:relative;z-index:2;border-radius:16px;overflow:hidden;background-color:var(--bb-color-bg-dark, #222012);box-shadow:0 4px 24px #0000001a}.bb-the-system__video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}.bb-the-system__control{position:absolute;z-index:5;right:24px;bottom:24px;width:36px;height:36px;background:#0003;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--bb-transition-fast, .15s)}.bb-the-system__control:hover{background:#00000059}.bb-the-system__control-icon--pause{display:flex;align-items:center;justify-content:center;gap:4px;position:relative;z-index:2}.bb-the-system__control-icon--pause span{width:2px;height:12px;background-color:#fff;border-radius:1px}.bb-the-system__control-icon--play{display:none;align-items:center;justify-content:center;position:relative;z-index:2}.bb-the-system__control-icon--play svg{width:10px;height:12px;fill:#fff;margin-left:2px}.bb-the-system__control.is-paused .bb-the-system__control-icon--pause{display:none}.bb-the-system__control.is-paused .bb-the-system__control-icon--play{display:flex}.bb-the-system__control-ring{position:absolute;top:0;left:0;width:36px;height:36px;transform:rotate(-90deg);pointer-events:none}.bb-the-system__control-ring-track{fill:none;stroke:#fff3;stroke-width:1}.bb-the-system__control-ring-progress{fill:none;stroke:#ffffffb3;stroke-width:2;stroke-linecap:round;stroke-dasharray:106.81;stroke-dashoffset:106.81;transition:stroke-dashoffset .1s linear}@media(max-width:1023px){.bb-the-system{padding:64px 0 40px}.bb-the-system__title{font-size:48px}.bb-the-system__header{margin-bottom:40px}.bb-the-system__video-wrapper{max-width:100%}.bb-the-system__sticker{width:110px;top:-15px;left:-10px}.bb-the-system__video-container{border-radius:12px}.bb-the-system__control{right:16px;bottom:16px}.bb-the-system__bg-art{top:150px;height:calc(100% - 110px)}}@media(max-width:767px){.bb-the-system{padding:48px 0 32px}.bb-the-system__title{font-size:36px}.bb-the-system__description{font-size:16px}.bb-the-system__header{margin-bottom:32px}.bb-the-system__sticker{display:none}.bb-the-system__video-container{border-radius:12px}.bb-the-system__control{right:12px;bottom:12px;width:32px;height:32px}.bb-the-system__control-ring{width:32px;height:32px}.bb-the-system__control-icon--pause span{height:10px}.bb-the-system__control-icon--play svg{width:8px;height:10px}.bb-the-system__bg-art{top:120px;height:calc(100% - 88px)}.bb-the-system__bg-art img{min-width:auto}}.bb-the-system__control:focus-visible{outline:2px solid var(--bb-color-primary, #ffa500);outline-offset:2px}@media(prefers-reduced-motion:reduce){.bb-the-system__control-ring-progress{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/60/assets/bb-the-system.css.map */