#cf-circle-preview-container{--cf-circle-editor-size: min(100%, 31rem);--cf-circle-preview-aspect: 1 / 1;margin-top:2rem}#cf-circle-preview-container.is-design-open .cf-start-row{display:none}#cf-circle-preview-container .cf-circle-designer-body[hidden]{display:none!important}#cf-circle-preview-container .cf-start-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;align-items:center}#cf-circle-preview-container .cf-start-btn,#cf-circle-preview-container .cf-circle-upload-btn{min-width:14rem}#cf-circle-preview-container .cf-start-hint,#cf-circle-preview-container .cf-circle-upload-hint,#cf-circle-preview-container .cf-circle-status,#cf-circle-preview-container .cf-circle-meta{color:var(--saac-customizer-muted-text);font-size:.95rem;line-height:1.5}#cf-circle-preview-container .cf-start-hint{flex:1 1 18rem;max-width:38rem}#cf-circle-preview-container .cf-circle-designer-body{display:grid;gap:.9rem}#cf-circle-preview-container .cf-circle-layout{display:grid;grid-template-columns:minmax(0,31rem) minmax(0,1fr);gap:1rem;align-items:start}#cf-circle-preview-container .cf-circle-toolbar{display:grid;align-items:center;gap:.75rem .9rem}#cf-circle-preview-container .cf-circle-action-row{display:flex;flex-wrap:nowrap;gap:.75rem;align-items:center;justify-content:flex-start}#cf-circle-preview-container .cf-circle-action-row .cf-circle-upload-btn,#cf-circle-preview-container .cf-circle-action-row .cf-circle-reset-btn{min-width:0}#cf-circle-preview-container .cf-circle-editor-panel{display:grid;gap:.55rem}#cf-circle-preview-container .cf-circle-editor-surface,#cf-circle-preview-container .cf-circle-preview-surface{display:grid;gap:.85rem;padding:1rem;border:1px solid var(--saac-customizer-surface-border);border-radius:1rem;background:var(--saac-customizer-surface-bg)}#cf-circle-preview-container .cf-circle-preview-panel{display:grid}#cf-circle-preview-container .cf-circle-surface-label{margin:0;color:var(--saac-customizer-strong-text);font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}#cf-circle-preview-container .cf-circle-editor-stage{position:relative;width:var(--cf-circle-editor-size);justify-self:center;aspect-ratio:1 / 1;overflow:hidden;border-radius:.8rem;background:linear-gradient(180deg,#e9ece5fa,#e3e7dff5);border:1px solid rgba(17,24,39,.1);box-shadow:none;touch-action:none}#cf-circle-preview-container .cf-circle-preview-stage{position:relative;width:min(100%,40rem);justify-self:center;aspect-ratio:var(--cf-circle-preview-aspect);overflow:hidden;border-radius:.8rem;background:linear-gradient(180deg,#e7ebe4f2,#e4e8e1f2);border:1px solid rgba(17,24,39,.1)}#cf-circle-preview-container .cf-circle-editor-stage__grid{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(rgba(17,24,39,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(17,24,39,.06) 1px,transparent 1px);background-size:2.6rem 2.6rem;opacity:1;pointer-events:none}#cf-circle-preview-container .cf-circle-mockup{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}#cf-circle-preview-container .cf-circle-frame,#cf-circle-preview-container .cf-circle-design-wrap,#cf-circle-preview-container .cf-circle-placeholder,#cf-circle-preview-container .cf-circle-preview-mask,#cf-circle-preview-container .cf-circle-preview-frame,#cf-circle-preview-container .cf-circle-preview-design-wrap{position:absolute;border-radius:50%}#cf-circle-preview-container .cf-circle-placeholder{display:grid;place-items:center;overflow:hidden;pointer-events:none;z-index:1;background:radial-gradient(circle at center,#fff3,#ffffff14 58%,#ffffff05),#d2d8ccdb;backdrop-filter:saturate(.92);-webkit-backdrop-filter:saturate(.92);box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 0 0 2px #1818180f;transition:opacity .16s ease}#cf-circle-preview-container .cf-circle-placeholder[hidden]{display:none!important}#cf-circle-preview-container .cf-circle-placeholder__inner{display:grid;gap:.28rem;width:min(82%,16rem);text-align:center;color:#111827e6;text-shadow:none}#cf-circle-preview-container .cf-circle-placeholder__eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.74}#cf-circle-preview-container .cf-circle-placeholder__title{font-size:.92rem;font-weight:700;line-height:1.2}#cf-circle-preview-container .cf-circle-placeholder__hint{font-size:.72rem;line-height:1.3;opacity:.78}#cf-circle-preview-container .cf-circle-placeholder[data-size=small] .cf-circle-placeholder__inner{width:min(88%,10rem);gap:.22rem}#cf-circle-preview-container .cf-circle-placeholder[data-size=small] .cf-circle-placeholder__eyebrow{font-size:.58rem;letter-spacing:.06em}#cf-circle-preview-container .cf-circle-placeholder[data-size=small] .cf-circle-placeholder__title{font-size:.76rem;line-height:1.15}#cf-circle-preview-container .cf-circle-placeholder[data-size=small] .cf-circle-placeholder__hint{font-size:.62rem;line-height:1.25}#cf-circle-preview-container .cf-circle-placeholder[data-size=medium] .cf-circle-placeholder__inner{width:min(84%,13rem)}#cf-circle-preview-container .cf-circle-placeholder[data-size=medium] .cf-circle-placeholder__eyebrow{font-size:.64rem}#cf-circle-preview-container .cf-circle-placeholder[data-size=medium] .cf-circle-placeholder__title{font-size:.86rem}#cf-circle-preview-container .cf-circle-placeholder[data-size=medium] .cf-circle-placeholder__hint{font-size:.68rem;line-height:1.3}#cf-circle-preview-container .cf-circle-frame{background:#e3e7df3d;border:2px solid rgba(255,255,255,.96);box-shadow:0 0 0 2px #18181838,0 0 0 7px #ffffff38,inset 0 0 0 1px #18181814;pointer-events:none;z-index:2}#cf-circle-preview-container .cf-circle-preview-frame{background:transparent;border:0;box-shadow:none;pointer-events:none;z-index:2}#cf-circle-preview-container .cf-circle-preview-mask{background:#fff;box-shadow:none;pointer-events:none;z-index:1}#cf-circle-preview-container .cf-circle-preview-frame:after{content:none}#cf-circle-preview-container .cf-circle-frame:before{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:50%;background:#e7eae26b}#cf-circle-preview-container .cf-circle-frame:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.8);opacity:1}#cf-circle-preview-container .cf-circle-frame-label{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);padding:.25rem .6rem;border-radius:999px;background:#fffffff0;border:1px solid rgba(17,24,39,.12);color:#111827cc;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 8px 18px #1118271f;pointer-events:none;z-index:3}#cf-circle-preview-container .cf-circle-design-wrap{overflow:hidden;cursor:grab;touch-action:none;background:#f1efe9b8;box-shadow:0 0 0 1px #18181814,inset 0 0 0 1px #ffffff2e;z-index:1}#cf-circle-preview-container .cf-circle-preview-design-wrap{overflow:hidden;pointer-events:none;background:#f1efe980;box-shadow:0 0 0 1px #1818180f,inset 0 0 0 1px #ffffff24;z-index:2}#cf-circle-preview-container .cf-circle-design-wrap.is-dragging{cursor:grabbing}#cf-circle-preview-container .cf-circle-design-edit{position:absolute;top:0;left:0;max-width:none;max-height:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;transform-origin:top left;pointer-events:none}#cf-circle-preview-container .cf-circle-preview-design{position:absolute;top:0;left:0;max-width:none;max-height:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}#cf-circle-preview-container .cf-circle-handle{position:absolute;width:2.4rem;height:2.4rem;border-radius:50%;border:0;padding:0;background:#111827eb;box-shadow:0 8px 24px #00000038;cursor:nwse-resize;z-index:4}#cf-circle-preview-container .cf-circle-handle:before{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;background:transparent}#cf-circle-preview-container .cf-circle-handle:hover,#cf-circle-preview-container .cf-circle-handle:focus-visible,#cf-circle-preview-container .cf-circle-shell-handle:hover,#cf-circle-preview-container .cf-circle-shell-handle:focus-visible{transform:translateY(-1px) scale(1.04);box-shadow:0 14px 28px #00000038;outline:none}#cf-circle-preview-container .cf-circle-control-label{position:absolute;left:50%;bottom:calc(100% + .45rem);transform:translate(-50%);padding:.28rem .5rem;border-radius:.45rem;background:#111827eb;color:#fff;font-size:.72rem;font-weight:600;line-height:1;white-space:nowrap;box-shadow:0 10px 24px #0003;opacity:0;pointer-events:none;transition:opacity .14s ease}#cf-circle-preview-container .cf-circle-handle:hover .cf-circle-control-label,#cf-circle-preview-container .cf-circle-handle:focus-visible .cf-circle-control-label,#cf-circle-preview-container .cf-circle-shell-handle:hover .cf-circle-control-label,#cf-circle-preview-container .cf-circle-shell-handle:focus-visible .cf-circle-control-label{opacity:1}#cf-circle-preview-container .cf-circle-handle:after{position:absolute;content:""}#cf-circle-preview-container .cf-circle-handle:after{left:50%;top:50%;width:1rem;height:1rem;background-repeat:no-repeat;background-position:center;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'%3E%3Cpath d='M5 11L1.75 14.25'/%3E%3Cpath d='M11 5L14.25 1.75'/%3E%3Cpath d='M10.1 1.75h4.15V5.9'/%3E%3Cpath d='M5.9 14.25H1.75V10.1'/%3E%3C/g%3E%3C/svg%3E");transform:translate(-50%,-50%) rotate(90deg);pointer-events:none}#cf-circle-preview-container .cf-circle-reset-btn{opacity:.82}#cf-circle-preview-container .cf-circle-status{flex:1 1 16rem;min-width:16rem;min-height:3rem;display:block;font-size:.92rem;color:var(--saac-customizer-muted-text)}#cf-circle-preview-container .cf-circle-meta{width:100%;display:block;font-size:.86rem;color:var(--saac-customizer-muted-text)}#cf-circle-preview-container .cf-circle-inline-notice{margin:0}#cf-circle-preview-container .cf-circle-frame-slider-row[hidden]{display:none!important}#cf-circle-preview-container .cf-circle-frame-slider-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:.7rem}#cf-circle-preview-container .cf-circle-frame-slider-label{color:var(--saac-customizer-strong-text);font-size:.9rem;font-weight:600;line-height:1.2}#cf-circle-preview-container .cf-circle-frame-step{width:2rem;height:2rem;display:inline-grid;place-items:center;border:1px solid rgba(17,24,39,.14);border-radius:999px;background:#ffffffeb;color:#111827c7;font-size:1rem;font-weight:700;line-height:1;cursor:pointer}#cf-circle-preview-container .cf-circle-frame-slider{width:100%;margin:0}#cf-circle-preview-container .cf-circle-editor-helper{margin:0;color:rgba(var(--color-foreground),.72);font-size:.88rem;line-height:1.45}media-gallery.bd-circle-thumbs-locked .thumbnail-list__item button.thumbnail.is-circle-thumb-locked{opacity:.42;cursor:not-allowed;filter:grayscale(.18)}media-gallery.bd-circle-thumbs-locked .thumbnail-list__item button.thumbnail.is-circle-thumb-locked img{opacity:.92}media-gallery.bd-circle-thumbs-locked .thumbnail-list__item button.thumbnail.is-circle-thumb-locked:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:#ffffff47;pointer-events:none}.cf-circle-thumbnail-lock-note{margin:.65rem 0 0;color:rgba(var(--color-foreground),.76);font-size:.82rem;line-height:1.4}#cf-circle-preview-container .cf-circle-notice{margin-top:.15rem}#cf-circle-preview-container .cf-circle-notice__text{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin:0;color:rgba(var(--color-foreground),.72);font-size:.9rem;line-height:1.45}#cf-circle-preview-container .cf-circle-notice__tooltip-wrap{position:relative;display:inline-flex;align-items:center}#cf-circle-preview-container .cf-circle-notice__trigger{width:1.2rem;height:1.2rem;border:1px solid rgba(var(--color-foreground),.2);border-radius:50%;padding:0;background:#ffffffeb;color:rgba(var(--color-foreground),.68);font-size:.78rem;line-height:1;cursor:help}#cf-circle-preview-container .cf-circle-notice__tooltip{position:absolute;left:50%;bottom:calc(100% + .45rem);transform:translate(-50%);width:min(18rem,80vw);padding:.55rem .65rem;border-radius:.55rem;background:#111827f5;color:#fff;font-size:.74rem;line-height:1.4;box-shadow:0 12px 28px #0003;opacity:0;pointer-events:none;transition:opacity .14s ease;z-index:6}#cf-circle-preview-container .cf-circle-notice__tooltip-wrap:hover .cf-circle-notice__tooltip,#cf-circle-preview-container .cf-circle-notice__tooltip-wrap:focus-within .cf-circle-notice__tooltip{opacity:1}@media screen and (max-width:749px){#cf-circle-preview-container{margin-top:1.5rem}#cf-circle-preview-container .cf-circle-layout{grid-template-columns:1fr}#cf-circle-preview-container .cf-circle-editor-stage{width:min(100%,26rem);border-radius:.9rem}#cf-circle-preview-container .cf-circle-editor-surface,#cf-circle-preview-container .cf-circle-preview-surface{padding:.85rem}#cf-circle-preview-container .cf-circle-preview-stage{width:min(100%,26rem)}#cf-circle-preview-container .cf-circle-toolbar{display:grid;gap:.65rem}#cf-circle-preview-container .cf-circle-frame-slider-row{grid-template-columns:auto auto minmax(0,1fr) auto;gap:.55rem}#cf-circle-preview-container .cf-circle-frame-slider-label{font-size:.84rem}#cf-circle-preview-container .cf-circle-frame-step{width:1.9rem;height:1.9rem}#cf-circle-preview-container .cf-circle-action-row{display:flex;flex-wrap:nowrap;gap:.65rem}#cf-circle-preview-container .cf-circle-status,#cf-circle-preview-container .cf-circle-meta{min-width:0}#cf-circle-preview-container .cf-circle-status{min-height:3.4rem}#cf-circle-preview-container .cf-start-btn{width:100%}#cf-circle-preview-container .cf-circle-upload-btn,#cf-circle-preview-container .cf-circle-reset-btn{width:auto;flex:1 1 0;min-width:0}#cf-circle-preview-container .cf-circle-placeholder__inner{width:min(84%,13rem)}#cf-circle-preview-container .cf-circle-placeholder__title{font-size:.88rem}#cf-circle-preview-container .cf-circle-placeholder__hint{font-size:.7rem}#cf-circle-preview-container .cf-circle-handle{width:2.85rem;height:2.85rem}#cf-circle-preview-container .cf-circle-handle:before{top:-16px;right:-16px;bottom:-16px;left:-16px}#cf-circle-preview-container .cf-circle-handle:after{width:1.12rem;height:1.12rem}#cf-circle-preview-container .cf-circle-handle .cf-circle-control-label{opacity:1;bottom:calc(100% + .3rem);font-size:.66rem;padding:.26rem .44rem}}
/*# sourceMappingURL=/cdn/shop/t/17/assets/cf-circle-preview.css.map */