/* =================================
   CLOVIA SHOWROOM
================================= */

html,
body{
    margin:0;
    padding:0;
}


/* 全体 */


.clv-product__actions button {

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    color:#000;

    background:transparent;

    border:0;

    cursor:pointer;

}

.clv-top-btn {

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    color:#000;

    background:#fff;

    border:0;

    cursor:pointer;

}

.ec-layoutRole{
    background: #000!important;
}

.clv-showroom{

    position:relative;

    width:100%;
    max-width:768px;

    height:100vh;

    margin:0 auto;

    overflow:hidden;

    background:#000;

}



/* ===============================
 INTRO
=============================== */

.clv-intro{

    position:fixed;

    inset:0;

    z-index:100;

    background:#000;

    display:flex;

    align-items:center;

    justify-content:center;

    animation:
        clvIntro 3.5s ease forwards;

}


.clv-intro__inner{

    text-align:center;

}


.clv-intro__logo img{

    width:220px;

    height:auto;

    display:block;

    opacity:0;

    transform:translateY(20px);

    animation:
        clvLogo 1s ease .1s forwards;

}



.clv-intro__sub img{

    width:160px;

    height:auto;

    display:block;

    margin:25px auto 0;

    opacity:0;

    transform:translateY(15px);

    animation:
        clvLogo 1s ease 1s forwards;

}



@keyframes clvLogo{

    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



.clv-top-btn{


    position:fixed;


    top:20px;

    left:20px;


    z-index:100;


    width:42px;

    height:42px;


    border-radius:50%;


    border:none;


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


    backdrop-filter:blur(10px);


    font-size:20px;


    cursor:pointer;


}


/* ===============================
 CATEGORY
=============================== */

.clv-category{

    position:absolute;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    z-index:20;

    display:flex;

    gap:35px;

}


.clv-category button{

    background:none;

    border:none;

    color:#fff;

    font-size:13px;

    letter-spacing:.2em;

    padding:8px 0;

    cursor:pointer;

}


.clv-category button.is-active{

    border-bottom:1px solid #fff;

}


/* ===============================
 PRODUCT AREA
=============================== */

.clv-products{

    width:100%;

    height:100vh;

    overflow-y:scroll;

    scroll-snap-type:y mandatory;


    /* scrollbar hide */

    scrollbar-width:none;

    -ms-overflow-style:none;

}


.clv-products::-webkit-scrollbar{

    display:none;

}


.clv-loading{

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    letter-spacing:.2em;

}



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


@keyframes clvLogo{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes clvIntro{

    0%{

        opacity:1;

    }


    75%{

        opacity:1;

    }


    100%{

        opacity:0;

        visibility:hidden;

    }

}



/* ===========================
 PRODUCT
=========================== */


.clv-product{

    width:100%;

    height:100vh;

    position:relative;

    overflow:hidden;

}



.clv-product__image{

    width:100%;

    height:100%;

    object-fit:cover;

}



.clv-product__actions{


    position:absolute;

    right:20px;

    bottom:180px;


    display:flex;

    flex-direction:column;

    gap:20px;


}



.clv-product__actions button{


    width:52px;

    height:52px;


    border-radius:50%;


    border:none;


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


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:20px;


    box-shadow:
    0 4px 15px rgba(0,0,0,.15);


}


.favorite-btn.is-active i{

    color: #e60023;

}



.clv-product__info{


    position:absolute;

    bottom:80px;

    left:20px;


    color:white;


}



.clv-product__info h2{


    font-size:16px;

    margin:0 0 10px;


}



.clv-product__info p{


    font-size:14px;

}




.clv-progress-showroom{


    position:absolute;

    bottom:20px;

    left:20px;

    right:20px;

    height:2px;

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


}



.clv-progress-showroom span{

    display:block;

    height:100%;

    width:0;

    background:#fff;

}



@keyframes showroomProgress{


    from{

        width:0;

    }


    to{

        width:100%;

    }

}



/* ==========================
   REELS STYLE
========================== */


.clv-products{

    width:100%;

    height:100vh;

    overflow-y:scroll;

    scroll-snap-type:y mandatory;

}


.clv-product{


    width:100%;

    height:100vh;


    position:relative;


    scroll-snap-align:start;


    overflow:hidden;


}



.clv-product__image{


    width:100%;

    height:100%;


    object-fit:cover;


}



.clv-product__overlay{


    position:absolute;

    inset:0;


    background:
    linear-gradient(
        transparent 55%,
        rgba(0,0,0,.65)
    );


}



.clv-product__actions{


    position:absolute;


    right:20px;


    bottom:250px;


    display:flex;


    flex-direction:column;


    gap:18px;


}



.clv-product__actions button{


    width:50px;

    height:50px;


    border-radius:50%;


    border:none;


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


    font-size:22px;


}



.clv-product__info{


    position:absolute;


    left:20px;


    bottom:120px;


    color:#fff;


}


.clv-product__info h2{


    font-size:16px;


    margin-bottom:10px;


    max-width:260px;


}


.clv-product__info p{


    font-size:14px;


}




.clv-progress-showroom{


    position:absolute;


    bottom:100px;


    left:20px;

    right:20px;


    height:2px;


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


}



.clv-progress-showroom span{


    display:block;


    height:100%;


    background:#fff;


    width:0;


}



.cart-btn,
.favorite-btn,
.share-btn, {

    color: #000;
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;

}


.cart-btn i,
.favorite-btn i,
.share-btn i,
.clv-top-btn {

    color: #000;

}



.cart-btn,
.favorite-btn,
.share-btn,
.clv-top-btn {

    -webkit-tap-highlight-color: transparent;

}

.clv-top-btn a {
color: #000!important;
}