.charm-viewer{width:100%}.charm-viewer__grid{max-width:1440px;gap:2rem;align-items:start}@media screen and (min-width: 750px){.charm-viewer__grid{display:grid;padding:0 1.5rem;margin:0 auto;grid-template-columns:repeat(2,1fr);gap:3rem}}.charm-viewer__media-container{position:relative;width:100%;max-width:100vw}@media screen and (max-width: 750px){.charm-viewer__media-container{padding:0 1.5rem}}.charm-viewer__media-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--media-wrapper-bg, #f8f8f8);border-radius:8px;aspect-ratio:1/1}.charm-viewer__media-wrapper.loading:after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:3px solid #f3f3f3;border-top:3px solid #333;border-radius:50%;animation:spin 1s linear infinite}.charm-viewer__model-container,.charm-viewer__video-container{width:100%;height:100%}.charm-viewer__video-container video{width:100%;height:100%;object-fit:cover;border-radius:8px}.charm-viewer__model{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.charm-viewer__model-viewer{width:100%;height:100%;border-radius:8px;object-fit:contain}.charm-viewer__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#666;font-style:italic}.charm-viewer__floating-info{position:absolute;bottom:20px;right:-15px;background:var(--floating-info-bg, #fcf0ef);color:#000;padding:15px 20px;border-top-left-radius:8px;border-bottom-left-radius:8px;max-width:300px;z-index:2}@media screen and (min-width: 750px){.charm-viewer__floating-info{right:-30px;border-top-right-radius:8px;border-bottom-right-radius:8px}}.charm-viewer__floating-title{font-size:1.1rem;font-weight:600;margin-bottom:5px;line-height:1.3}.charm-viewer__floating-description{font-size:1rem;line-height:1.4;opacity:.9}.charm-viewer__content{display:flex;flex-direction:column;gap:2rem}@media screen and (min-width: 750px){.charm-viewer__content{height:100%;justify-content:center}}.charm-viewer__title{margin-bottom:1rem}.charm-viewer__title-text{font-size:1.5rem;font-weight:600;color:#333;margin:0;text-align:center}@media screen and (min-width: 750px){.charm-viewer__title-text{font-size:2rem}}.charm-viewer__charms{display:flex;flex-wrap:wrap;justify-content:center}.charm-viewer__charms.swiper{width:100%;max-width:100%;padding-top:2.2rem}@media screen and (min-width: 750px){.charm-viewer__charms.swiper{max-width:calc((var(--charm-size-desktop, 82px) + 1rem) * var(--charms-per-row-desktop, 4) + 2rem)}}.charm-viewer__charms:not(.swiper-initialized){padding:2px 1.5rem}.charm-viewer__charms:not(.swiper-initialized) .swiper-wrapper{gap:1rem;flex-wrap:wrap;justify-content:center}@media screen and (min-width: 749px){.charm-viewer__charms .swiper-wrapper{flex-wrap:wrap;gap:1rem;transform:none!important;justify-content:center}}.charm-item{border:1px solid transparent;border-radius:100%;transition:all .3s ease;cursor:pointer;width:var(--charm-size-mobile, 62px)!important;height:var(--charm-size-mobile, 62px)!important;display:flex;align-items:center;justify-content:center}@media screen and (min-width: 750px){.charm-item{width:var(--charm-size-desktop, 82px)!important;height:var(--charm-size-desktop, 82px)!important}}.charm-item:hover{border-color:#ddd}@media screen and (min-width: 750px){.charm-item:hover{transform:translateY(-2px)}}.charm-item.charm-item--active{border-color:#000;background:#f8f8f8}.charm-item__button{width:100%;padding:0;background:none;border:none;text-align:left;cursor:pointer;transition:all .3s ease;border-radius:100%}.charm-item__button:focus-visible{box-shadow:0 0 0 2px #000}.charm-item__image{flex-shrink:0;width:calc(var(--charm-size-mobile, 62px) - 2px);height:calc(var(--charm-size-mobile, 62px) - 2px);border-radius:100%;overflow:hidden;background:#f0f0f0}@media screen and (min-width: 750px){.charm-item__image{width:calc(var(--charm-size-desktop, 82px) - 2px);height:calc(var(--charm-size-desktop, 82px) - 2px)}}.charm-item__image img{width:100%;height:100%;object-fit:cover}.charm-item__content{flex:1;min-width:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.charm-viewer__model-viewer::part(default-ar-button){left:16px!important;right:auto!important}.charm-viewer__model-viewer .slot.ar-button{left:16px!important;right:auto!important}model-viewer::part(default-ar-button){left:16px!important;right:auto!important}model-viewer .slot.ar-button{left:16px!important;right:auto!important}
/*# sourceMappingURL=/cdn/shop/t/13/assets/section-charm-viewer.css.map */