.bb-redemption{
max-width:1100px;
margin:0 auto;
display:flex;
gap:32px;
align-items:stretch;
--bb-video-h:min(400px,400px);
} .bb-redemption-desktop {
display: flex;
} .bb-redemption-mobile {
display: none;
}
.bb-redemption-tabs{
display:none;
gap:16px;
}
.bb-redemption-tab{
border:none;
background:transparent;
color:inherit !important;
font:inherit;
padding:0;
cursor:pointer;
opacity:0.6;
white-space:nowrap;
}
.bb-redemption-tab.is-active{
opacity:1;
background:transparent;
}
.bb-redemption-col{
display:flex;
flex-direction:column;
gap:10px;
align-items:flex-start;
text-align:left;
}
.bb-redemption-col-phone .bb-redemption-label{
margin-left:-80px;
}
.bb-redemption-label{
font-size:16px;
font-weight:600;
}
.bb-redemption-main,
.bb-phone-video{
height:var(--bb-video-h);
}
.bb-redemption-main{
flex:1;
border-radius:16px;
overflow:hidden;
position:relative;
z-index:1;
}
.bb-redemption-main video{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.bb-phone-video{
aspect-ratio:526.4/1080;
width:auto;
margin-left:-100px;
position:relative;
z-index:2;
}
.bb-phone-video{
--bb-phone-frame-url:url(//yoyorewards.com/wp-content/plugins/bbws-yoyo-components/modules/redemption-videos/assets/images/phone-video-frame.svg);
}
.bb-phone-video video{
width:100%;
height:100%;
object-fit:cover;
display:block;
-webkit-mask-image:var(--bb-phone-frame-url);
mask-image:var(--bb-phone-frame-url);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-mode:alpha;
mask-mode:alpha;
background-color:#000;
}
.bb-phone-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
transition:opacity .2s;
opacity:1;
z-index: 10;
}
.bb-phone-video.bb-playing .bb-phone-overlay,
.bb-phone-wrap.bb-playing .bb-phone-overlay,
.bb-redemption-col-phone .bb-phone-video.bb-playing .bb-phone-overlay {
opacity:0 !important;
pointer-events: none;
}
.bb-phone-overlay img{
width:72px !important;
height:auto;
display:block;
}
@media(max-width:600px){ .bb-redemption-desktop {
display: none !important;
} .bb-redemption-mobile {
display: block;
max-width: 100%;
padding: 0 0;
} .bb-redemption-mobile-carousel {
position: relative;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100%;
overflow: hidden;
} .bb-redemption-mobile-carousel .owl-stage {
display: flex;
width: 100% !important;
}
.bb-redemption-mobile-carousel .owl-stage-outer {
width: 100%;
overflow: hidden;
}
.bb-redemption-mobile-carousel .owl-item {
width: 100% !important;
flex-shrink: 0;
max-width: 100%;
box-sizing: border-box;
} .bb-redemption-mobile-carousel .owl-item.active {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
} .bb-redemption-mobile-item {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 2px;
} .bb-redemption-mobile-label {
font-size: 16px;
font-weight: 600;
text-align: center;
} .bb-redemption-mobile-video--online {
position: relative;
width: 100%;
max-width: 180px;
margin: 0 auto;
aspect-ratio: 526.4 / 1080;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
} .bb-redemption-mobile-video--instore {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; height: calc(180px * (1080 / 526.4));
max-height: calc(180px * (1080 / 526.4));
border-radius: 16px;
overflow: hidden;
box-sizing: border-box;
} @media (max-width: 400px) {
.bb-redemption-mobile-video--instore { height: calc(min(180px, 45vw) * (1080 / 526.4));
max-height: calc(min(180px, 45vw) * (1080 / 526.4));
}
.bb-redemption-mobile-video--online {
max-width: min(180px, 45vw);
}
}
.bb-redemption-mobile-video--instore video {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
display: block;
}
.bb-redemption-mobile-video--online video {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
display: block;
-webkit-mask-image: var(--bb-phone-frame-url);
mask-image: var(--bb-phone-frame-url);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-mode: alpha;
mask-mode: alpha;
background-color: #000;
} .bb-redemption-mobile-video--online .bb-phone-overlay {
position: absolute;
inset: 0;
display: none; align-items: center;
justify-content: center;
pointer-events: none;
transition: opacity 0.2s;
opacity: 1;
}
.bb-redemption-mobile-video--online.bb-playing .bb-phone-overlay {
opacity: 0;
}
.bb-redemption-mobile-video--online .bb-phone-overlay img {
width: 72px;
height: auto;
display: block;
}
.bb-redemption .owl-dots {
width: 100%;
} }