/** Shopify CDN: Minification failed

Line 377:13 Unexpected ";"
Line 1376:0 Expected "{" but found "@media"
Line 1419:0 Unexpected "{"

**/
/* ===========================================================
GF FLOATING VIDEO PRO
Version 1.0
Part 1
=========================================================== */

:root{

--gf-size:78px;

--gf-radius:999px;

--gf-primary:#ff2d75;

--gf-secondary:#ff6ca8;

--gf-dark:#121212;

--gf-white:#ffffff;

--gf-shadow:
0 10px 35px rgba(0,0,0,.18);

--gf-transition:.35s cubic-bezier(.22,.61,.36,1);

--gf-popup-width:420px;

--gf-popup-radius:22px;

}

#gfFloatingVideo{

position:fixed;

right:24px;

bottom:24px;

z-index:999999;

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

font-family:inherit;

-webkit-tap-highlight-color:transparent;

}

.gf-floating{

user-select:none;

}

.gf-floating__outer{

position:relative;

width:var(--gf-size);

height:var(--gf-size);

cursor:pointer;

transition:var(--gf-transition);

}

.gf-floating__outer:hover{

transform:translateY(-4px);

}

.gf-floating__pulse{

position:absolute;

inset:0;

border-radius:50%;

background:rgba(255,45,117,.25);

animation:gfPulse 2.4s infinite;

}

.gf-floating__gradient{

position:absolute;

inset:0;

padding:3px;

border-radius:50%;

background:
linear-gradient(
135deg,
#ff2d75,
#ff7db3,
#ff2d75);

background-size:300% 300%;

animation:

gfGradient 6s linear infinite;

box-shadow:var(--gf-shadow);

}

.gf-floating__inner{

width:100%;

height:100%;

border-radius:50%;

background:#fff;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

}

.gf-floating__thumbnail{

width:100%;

height:100%;

background:#f7f7f7;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

}

.gf-floating__thumbnail img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.gf-floating__loader{

display:flex;

align-items:center;

justify-content:center;

width:100%;

height:100%;

color:#fff;

background:#222;

}

.gf-floating__label{

padding:8px 16px;

border-radius:999px;

background:rgba(18,18,18,.92);

color:#fff;

font-size:13px;

font-weight:600;

letter-spacing:.2px;

backdrop-filter:blur(12px);

transition:var(--gf-transition);

box-shadow:0 8px 20px rgba(0,0,0,.18);

white-space:nowrap;

}

.gf-floating:hover .gf-floating__label{

transform:translateY(-2px);

}
/* ===========================================================
POPUP
=========================================================== */

.gf-video-overlay{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

pointer-events:none;

transition:.35s ease;

z-index:9999999;

}

.gf-video-overlay.active{

opacity:1;

visibility:visible;

pointer-events:auto;

}

.gf-video-backdrop{

position:absolute;

inset:0;

background:rgba(10,10,10,.72);

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

}

.gf-video-popup{

position:relative;

width:min(92vw,var(--gf-popup-width));

background:rgba(255,255,255,.92);

backdrop-filter:blur(25px);

-webkit-backdrop-filter:blur(25px);

border-radius:var(--gf-popup-radius);

overflow:hidden;

box-shadow:

0 25px 80px rgba(0,0,0,.28);

transform:translateY(30px) scale(.94);

transition:.35s cubic-bezier(.22,.61,.36,1);

z-index:2;

}

.gf-video-overlay.active .gf-video-popup{

transform:translateY(0) scale(1);

}

.gf-video-player{

position:relative;

width:100%;

background:#000;

overflow:hidden;

border-radius:18px 18px 0 0;

aspect-ratio:9 / 16;

max-height:65vh;

display:flex;

align-items:center;

justify-content:center;

}

.gf-video-player{

position:relative;

overflow:hidden;

background:#000;

}

.gf-video-player iframe{

position:absolute;

top:50%;

left:50%;

width:120%;

height:120%;

transform:translate(-50%,-50%);

border:0;

}

.gf-video-player video{

width:100%;

height:100%;

object-fit:cover;

}

display:block;

}

.gf-video-player iframe,

.gf-video-player video{

width:100%;

height:100%;

border:0;

display:block;

}

.gf-video-close{

position:absolute;

top:14px;

right:14px;

width:42px;

height:42px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.15);

color:#fff;

font-size:28px;

line-height:1;

cursor:pointer;

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

transition:all .25s ease;

z-index:10;

}

.gf-video-close:hover{

transform:rotate(90deg);

background:rgba(255,255,255,.25);

}
/* ===========================================================
ANIMATIONS
=========================================================== */

@keyframes gfPulse{

0%{
transform:scale(1);
opacity:.75;
}

70%{
transform:scale(1.22);
opacity:0;
}

100%{
transform:scale(1.22);
opacity:0;
}

}

@keyframes gfGradient{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

@keyframes gfFloatIn{

0%{

opacity:0;

transform:
translateY(40px)
scale(.9);

}

100%{

opacity:1;

transform:
translateY(0)
scale(1);

}

}

@keyframes gfVideoOpen{

0%{

opacity:0;

transform:
translateY(30px)
scale(.92);

}

100%{

opacity:1;

transform:
translateY(0)
scale(1);

}

}

#gfFloatingVideo{

animation:
gfFloatIn .55s cubic-bezier(.22,.61,.36,1);

}

.gf-video-popup{

animation:
gfVideoOpen .35s ease;

}

.gf-floating__gradient{

will-change:transform;

}

.gf-floating__outer{

will-change:transform;

}

.gf-video-popup{

will-change:transform;

}
/* ===========================================================
MOBILE
=========================================================== */

@media screen and (max-width:768px){

:root{

--gf-size:68px;

--gf-popup-width:95vw;

}

#gfFloatingVideo{

right:16px;

/* Above bottom navigation */
bottom:calc(85px + env(safe-area-inset-bottom));

z-index:999999;

}

.gf-floating__label{

font-size:12px;

padding:7px 13px;

}

.gf-video-popup{

border-radius:18px;

}

.gf-video-close{

width:38px;

height:38px;

font-size:24px;

}

}

@media screen and (max-width:480px){

:root{

--gf-size:64px;

}

.gf-floating__label{

display:none;

}

}

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}
html.gf-video-lock,
body.gf-video-lock{
overflow:hidden;
}
/* ===========================================================
GF PREMIUM BUBBLE
PART 4
=========================================================== */

#gfFloatingVideo{

display:flex;

align-items:center;

gap:14px;

animation:gfFloat 5s ease-in-out infinite;

}

.gf-floating__outer{

flex-shrink:0;

}

.gf-floating__label{

display:flex;

align-items:center;

gap:8px;

padding:12px 18px;

background:rgba(255,255,255,.92);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border-radius:999px;

box-shadow:

0 10px 35px rgba(0,0,0,.15);

color:#111;

font-size:14px;

font-weight:700;

transition:.35s ease;

transform-origin:right center;

overflow:hidden;

}

.gf-floating__label::before{

content:"🎥";

font-size:18px;

}

.gf-floating__label::after{

content:"→";

margin-left:2px;

font-size:16px;

transition:.35s ease;

}

#gfFloatingVideo:hover .gf-floating__label{

padding-left:22px;

padding-right:24px;

transform:translateX(-4px);

}

#gfFloatingVideo:hover .gf-floating__label::after{

transform:translateX(6px);

}

.gf-floating__gradient{

box-shadow:

0 0 0 2px rgba(255,255,255,.25),

0 12px 40px rgba(255,45,117,.28);

}

/* ===========================================================
FLOATING ANIMATION
=========================================================== */

@keyframes gfFloat{

0%{

transform:translateY(0px);

}

25%{

transform:translateY(-4px);

}

50%{

transform:translateY(0px);

}

75%{

transform:translateY(4px);

}

100%{

transform:translateY(0px);

}

}

#gfFloatingVideo{

transition:.35s ease;

}

#gfFloatingVideo:hover{

transform:scale(1.04);

}

@media(max-width:768px){

.gf-floating__label{

padding:10px 14px;

font-size:13px;

}

.gf-floating__label::before{

font-size:16px;

}

}

/* ===========================================================
GF Premium Bubble V3
Safe Version
=========================================================== */

#gfFloatingVideo{

display:flex;

align-items:center;

gap:12px;

}

.gf-floating__label{

background:rgba(255,255,255,.95);

color:#111;

border-radius:999px;

padding:12px 18px;

font-size:14px;

font-weight:700;

box-shadow:

0 12px 35px rgba(0,0,0,.12);

transition:

transform .35s ease,

box-shadow .35s ease,

background .35s ease;

cursor:pointer;

}

#gfFloatingVideo:hover .gf-floating__label{

transform:translateX(-4px);

box-shadow:

0 18px 45px rgba(0,0,0,.18);

}

.gf-floating__gradient{

overflow:hidden;

}

.gf-floating__thumbnail img{

transition:transform .45s ease;

}

#gfFloatingVideo:hover .gf-floating__thumbnail img{

transform:scale(1.08);

}

/* ===========================================================
GF PRODUCT CARD
=========================================================== */

.gf-video-popup{

display:flex;

flex-direction:column;

overflow:hidden;

}

.gf-video-player{

width:100%;

aspect-ratio:9/16;

background:#000;

}

.gf-product-card{

background:#fff;

padding:18px;

border-top:1px solid rgba(0,0,0,.06);

display:flex;

flex-direction:column;

gap:12px;

}

.gf-product-title{

font-size:18px;

font-weight:700;

line-height:1.35;

color:#111;

}

.gf-product-price{

display:flex;

align-items:center;

gap:10px;

}

.gf-price{

font-size:22px;

font-weight:800;

color:#111;

}

.gf-compare{

font-size:16px;

color:#999;

text-decoration:line-through;

}

.gf-discount{

padding:4px 10px;

border-radius:999px;

background:#e8fff0;

color:#0a8f45;

font-size:13px;

font-weight:700;

}

/* ===========================================================
GF POPUP OVERRIDE
FINAL MOBILE UI
=========================================================== */

.gf-video-popup{

width:min(94vw,420px) !important;

max-height:90vh !important;

display:flex !important;

flex-direction:column !important;

background:#ffffff !important;

border-radius:22px !important;

overflow:hidden !important;

box-shadow:0 30px 80px rgba(0,0,0,.28) !important;

transform:translateY(25px) scale(.96);

}

.gf-video-overlay.active .gf-video-popup{

transform:translateY(0) scale(1);

}

.gf-video-player{

position:relative;

width:100%;

aspect-ratio:9/16;

max-height:65vh;

background:#000;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.gf-video-player iframe,
.gf-video-player video{

width:100%;

height:100%;

display:block;

border:0;

object-fit:cover;

}

@media(max-width:768px){

.gf-video-popup{

width:96vw !important;

max-height:88vh !important;

border-radius:20px !important;

}

.gf-video-player{

max-height:58vh;

}

}

/* ===========================================================
GF ADD TO CART V2
=========================================================== */

.gf-add-cart{

width:100%;

height:50px;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

border:none;

border-radius:14px;

background:#111;

color:#fff;

font-size:15px;

font-weight:700;

letter-spacing:.2px;

cursor:pointer;

margin-top:4px;

transition:all .25s ease;

box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.gf-add-cart:hover{

transform:translateY(-2px);

background:#000;

}

.gf-add-cart:active{

transform:scale(.98);

}

.gf-add-cart:disabled{

opacity:.7;

cursor:not-allowed;

}

@media(max-width:768px){

.gf-add-cart{

height:48px;

font-size:15px;

border-radius:12px;

}

}

/* ===========================================================
GF PRODUCT CARD V2
Compact Mobile UI
=========================================================== */

.gf-product-card{

padding:14px 16px !important;

display:flex;

flex-direction:column;

gap:10px !important;

background:#fff;

}

.gf-product-title{

font-size:20px;

font-weight:700;

line-height:1.25;

margin:0;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

}

.gf-product-price{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:8px;

margin:0;

}

.gf-price{

font-size:18px;

font-weight:800;

color:#111;

}

.gf-compare{

font-size:15px;

color:#888;

text-decoration:line-through;

}

.gf-discount{

padding:3px 10px;

background:#eaf8ec;

color:#118847;

border-radius:999px;

font-size:12px;

font-weight:700;

}

@media(max-width:768px){

.gf-product-card{

padding:12px 14px !important;

gap:8px !important;

}

.gf-product-title{

font-size:16px;

}

.gf-price{

font-size:17px;

}

.gf-compare{

font-size:14px;

}

}

/* ===========================================================
GF PRODUCT INFO
=========================================================== */

.gf-product-info{

display:flex;

align-items:flex-start;

gap:12px;

}

.gf-product-image{

width:70px;

height:70px;

flex-shrink:0;

border-radius:10px;

overflow:hidden;

background:#f5f5f5;

}

.gf-product-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.gf-product-details{

flex:1;

min-width:0;

}

@media(max-width:768px){

.gf-product-image{

width:60px;

height:60px;

}

}

/* ===========================================================
GF AJAX CART
=========================================================== */

.gf-add-cart.loading{

pointer-events:none;

opacity:.8;

}

.gf-add-cart.success{

background:#178a46;

}

.gf-add-cart.loading::before{

content:"";

width:18px;

height:18px;

border:2px solid rgba(255,255,255,.35);

border-top-color:#fff;

border-radius:50%;

display:inline-block;

animation:gfSpin .8s linear infinite;

}

@keyframes gfSpin 
/* ===========================================================
GF MOBILE AUTO EXPAND
=========================================================== */

@media screen and (max-width:768px){

    #gfFloatingVideo{
        overflow:visible;
    }

    .gf-floating__label{

        width:0;

        opacity:0;

        margin-left:0;

        padding-left:0;

        padding-right:0;

        overflow:hidden;

        white-space:nowrap;

        transition:
        width .45s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease,
        margin .35s ease,
        padding .35s ease;

    }

    #gfFloatingVideo.gf-expand .gf-floating__label{

        width:118px;

        opacity:1;

        margin-left:10px;

        padding:8px 16px;

    }

}
{

to{

transform:rotate(360deg);

}

}

/* ===========================================================
GF MOBILE LABEL ANIMATION
=========================================================== */

@media screen and (max-width:768px){

#gfFloatingVideo .gf-floating__label{

opacity:0;

visibility:hidden;

transform:translateX(-8px);

transition:
opacity .35s ease,
transform .35s ease,
visibility .35s;

}

#gfFloatingVideo.gf-show-label .gf-floating__label{

opacity:1;

visibility:visible;

transform:translateX(0);

}

}