.main-ugc{padding:0 8px}.main-ugc .section-top .insta-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;margin-top:12px}.ugc-img .media-img{padding-bottom:123.43%}.inner-ugc{display:flex}.inner-ugc .singal-ugc{width:calc(25% - 6px);box-sizing:border-box}.ugc-slider{margin-top:24px}.ugc-info{padding:16px}.ugc-info{position:absolute;top:0;left:0;z-index:2}.ugc-info .ugc-name{display:flex;align-items:center;gap:8px;color:var(--color-white)}.ugc-btn{display:none;position:absolute;z-index:2;pointer-events:none;width:max-content}.singal-ugc:hover .ugc-btn{display:block}.singal-ugc:hover .ugc-info:hover~.ugc-btn{display:none!important}.singal-inner{position:relative}.ugc-product{position:absolute;width:100%;height:100%;top:0;left:0;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#1c1c1c1a;z-index:0;opacity:0;visibility:hidden;transition:.33s ease;padding:56px 16px 16px;display:flex;flex-direction:column;gap:24px;justify-content:end}.singal-ugc.active .ugc-product{opacity:1;visibility:visible;z-index:3}.product-close svg{width:12px;height:auto}.ugc-product .product-close{position:absolute;top:16px;right:16px;cursor:pointer;background:var(--color-white);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .3s ease-in-out}.ugc-product .product-close:hover{background:var(--color-secondary)}.ugc-product .mobile-text{position:absolute;padding:16px;top:0;right:0;cursor:pointer}.ugc-product .mobile-text{left:0;color:var(--color-white);right:auto}.ugc-product .mobile-text h4{padding:3.5px 0}.ugc-product .pro-top .media-img{padding-bottom:82%}.ugc-product .pro-top .pro-img img{object-fit:contain}.ugc-product .pro-top{padding-bottom:82%}.ugc-product .pro-top .pro-img{opacity:0;visibility:hidden;transition:.33s ease}.ugc-product .pro-top .pro-img.active{opacity:1;visibility:visible}.ugc-product .pro-top{position:relative}.ugc-product .pro-top .pro-img{position:absolute;width:100%}.ugc-product .main-quick-shop{display:none}.pro-bottom .pro-info{color:var(--color-white);display:grid;grid-template-columns:repeat(2,auto);gap:16px;align-items:center;opacity:.6}.pro-bottom .pro-title .icon{padding:6px;background:var(--color-white);border-radius:6px;transition:background .3s ease-in-out;opacity:0;visibility:hidden}.pro-bottom .pro-title{display:flex;align-items:center;gap:8px}.pro-bottom .pro-title .title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;transform:translate(-32px);transition:.33s}.pro-bottom{display:flex;flex-direction:column;gap:8px}.pro-bottom .pro-info.active .pro-title .icon{opacity:1;visibility:visible}.pro-bottom .pro-info.active{opacity:1}.pro-bottom .pro-info.active .title{transform:translate(0)}.pro-bottom .pro-info .prop-price{text-align:right}.ugc-product .quick-add{cursor:pointer}.main-ugc{position:relative}.main-ugc .swiper-button-next,.main-ugc .swiper-button-prev{top:12px}.main-ugc .swiper-button-next{right:24px}.main-ugc .swiper-button-prev{right:64px;left:auto}.pro-bottom .pro-info.active .pro-title .icon:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;z-index:2}@media (min-width:768px){.ugc-product .product-close{width:24px;height:24px}.pro-bottom .pro-info:hover .pro-title .icon{background:var(--color-secondary)}}@media (max-width:1199px){.main-ugc{padding-right:0;padding-left:16px}.inner-ugc .singal-ugc{width:30%}}@media (max-width:991px){.ugc-btn{display:block;position:absolute;bottom:0;left:0;padding:12px}.ugc-info{padding:12px}.inner-ugc .singal-ugc{width:40%}.main-ugc .swiper-button-next,.main-ugc .swiper-button-prev{display:none}}@media (max-width:767px){.inner-ugc .singal-ugc{width:65%}.singal-inner .ugc-product{display:none}.ugc-product{position:fixed;width:100%;height:100dvh;top:0;left:0;z-index:3;opacity:1;visibility:visible;z-index:11;padding:60px 16px 32px;justify-content:space-between}.ugc-product .pro-top{padding-bottom:calc(100dvh - 192px)}.ugc-product .pro-top .pro-img{display:flex;flex-direction:column;height:100%;justify-content:center}.product-close svg{width:16px}.ugc-product .product-close{width:32px;height:32px}.pro-bottom .pro-title .icon{position:relative}.pro-bottom .pro-title .icon:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:#1c1c1c1a;border-radius:6px}}@media (max-width:575px){.inner-ugc .singal-ugc{width:86.075%}}
/*# sourceMappingURL=/cdn/shop/t/45/assets/ugc-media.css.map */