.card-product-preview{background:#edf0ec;border-radius:20px;grid-template-columns:1fr 1fr;gap:10px;padding:28px;display:grid}.card-product-preview img{object-fit:contain;width:100%;max-height:350px}.card-product-preview .inside{grid-column:1/-1;max-height:220px}.card-design-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;display:grid}.card-select{background:#fff;border:1px solid #d9e0dc;border-radius:6px;width:100%;padding:9px;font-size:14px;display:block}.card-studio{background:#fff;flex-direction:column;width:100%;height:100dvh;display:flex}.card-studio-header{border-bottom:1px solid #dce3de;flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:8px 20px;padding:12px 20px;display:flex}.card-workbench-frame{border:0;flex:1;min-width:0;min-height:0;margin:0;padding:0;position:relative}.card-workbench{border:0;grid-template-rows:minmax(0,1fr);grid-template-columns:clamp(130px,13vw,195px) minmax(0,1fr) clamp(280px,23vw,370px);min-width:0;min-height:0;margin:0;padding:0;display:grid;position:absolute;inset:0}.card-workbench:not([data-side=inside]) .card-stage{grid-column:1/3}.card-layouts,.card-properties{min-width:0;padding:16px;overflow:auto}.card-layouts{border-right:1px solid #dce3de}.card-layout-list{gap:10px;display:grid}.card-layout-option{color:#4c6558;background:#fff;border:1px solid #d9e0dc;border-radius:8px;padding:8px;font-size:12px}.card-layout-option.selected{background:#f1faf5;border-color:#16704a}.card-stage{background:#edf0ec;flex-direction:column;min-width:0;min-height:0;display:flex}.card-preview-area{flex:1;place-items:center;min-height:0;display:grid;position:relative}.card-preview-image{object-fit:contain;width:calc(100% - 36px);height:calc(100% - 36px);margin:auto;position:absolute;inset:0}.card-tabs{background:#fff;justify-content:center;align-items:stretch;padding:0 8px 6px;display:flex;container-type:inline-size}.card-tabs button{isolation:isolate;border-radius:0 0 10px 10px;place-items:center;min-width:44px;min-height:48px;padding:12px clamp(6px,2cqi,16px) 10px;display:grid;position:relative}.card-tabs button:hover{background:#f5f7f5}.card-tabs button[aria-selected=true]{background:#edf0ec}.card-tabs button[aria-selected=true]:before,.card-tabs button[aria-selected=true]:after{content:"";pointer-events:none;width:9px;height:9px;position:absolute;top:0}.card-tabs button[aria-selected=true]:before{background:radial-gradient(circle at 0 100%,#0000 9px,#edf0ec 9.5px);right:100%}.card-tabs button[aria-selected=true]:after{background:radial-gradient(circle at 100% 100%,#0000 9px,#edf0ec 9.5px);left:100%}.card-tabs button:focus-visible{outline-offset:-3px;outline:2px solid #176443}.card-tab-paper{background:#fff;border:1px solid #9fa7a3;display:block;position:relative}.card-tab-paper img{object-fit:contain;width:100%;height:100%}.card-tabs [data-side=inside] .card-tab-paper:after{content:"";border-left:1px solid #9fa7a3;position:absolute;inset:0 50% 0 auto}.card-tabs [data-side=front] .card-tab-paper:before,.card-tabs [data-side=back] .card-tab-paper:before{content:"";z-index:-1;clip-path:polygon(0 5px,100% 0,100% 100%,0 100%);background:#aeb5b0;position:absolute;inset:-5px 2px 1px}.card-tabs [data-side=back] .card-tab-paper:before{transform:scaleX(-1)}.card-sidebar{border-left:1px solid #dce3de;flex-direction:column;min-width:0;min-height:0;display:flex;overflow-y:auto}.card-properties{flex:auto;min-height:8rem}.card-studio-summary{flex:none;gap:14px;padding:16px;display:grid}.card-properties+.card-studio-summary{border-top:1px solid #dce3de}.card-order-shortcut{display:none}@media (max-width:760px){.card-order-shortcut{display:inline}.card-studio-heading{width:100%}.card-studio-header{padding:8px 12px}.card-studio-header h1{font-size:1.125rem;line-height:1.3}.card-workbench{flex-direction:column;display:flex;overflow-y:auto}.card-stage{flex:none;order:0}.card-preview-area{flex:none;height:clamp(175px,35dvh,360px)}.card-preview-image{width:calc(100% - 20px);height:calc(100% - 20px)}.card-layouts{border:0;flex:none;order:1;padding:12px}.card-layout-list{display:flex;overflow-x:auto}.card-layout-option{flex:0 0 100px}.card-sidebar{border:0;flex:none;order:2;overflow:visible}.card-properties{flex:none;overflow:visible}.card-product-preview{padding:16px}}
