.spinner{display:inline-block;width:18px;height:18px;border:2px solid #c1ccbf;border-top-color:#3d704c;border-radius:50%;animation:studio-spin .8s linear infinite;vertical-align:middle;margin-right:8px;flex-shrink:0}@keyframes studio-spin{to{transform:rotate(360deg)}}
.preset-panel{padding:20px;background:#f6f8f3;border:1px solid #dde5d8;border-radius:10px;margin:18px 0}.preset-panel button{margin-bottom:12px}.photo-template{position:relative;aspect-ratio:1;overflow:hidden;border-radius:8px}.photo-template>img{width:100%;height:100%;object-fit:cover}.photo-template .photo-design{position:absolute;object-fit:contain}.working{position:sticky;top:0;z-index:5;background:#eaf1e5;padding:15px;border-radius:10px}button:disabled .spinner{opacity:1}.tip code{background:#fff;padding:2px 5px;border-radius:4px}select[multiple]{min-height:110px}.settings-card table{width:100%}
button[aria-busy="true"]{opacity:1;background:#e6efdf;color:#315b3b}

.rendered-template{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#f3f1eb}.active-source{max-width:150px;max-height:180px;object-fit:contain}.gallery-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.gallery-thumbs a{padding:3px;border:2px solid #ddd;border-radius:8px;background:white;width:76px;height:76px;cursor:pointer}.gallery-thumbs a.chosen{border-color:#365c45}.gallery-thumbs img{width:100%;height:100%;object-fit:cover}.check-row{display:flex!important;align-items:center;gap:10px}.check-row input{width:auto!important}.product-gallery{min-width:0}.product-gallery .review-image img{width:100%;height:100%;object-fit:contain}.workspace .settings-card{padding:16px;margin-bottom:24px}.workspace .settings-card table{font-size:13px}.preset-panel button{align-self:end}.rendered-template{min-height:150px}

.upload-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px;margin:16px 0}.upload-products article{border:2px solid #e0e5dc;border-radius:12px;padding:8px;background:white;min-width:0}.upload-products article.active{border-color:#365c45;background:#f0f5ed}.product-tile{background:none;border:0;padding:0;width:100%;text-align:left;cursor:pointer;color:inherit}.product-tile img{width:100%;height:140px;object-fit:contain;background:#f6f5f0;border-radius:7px}.product-tile strong{display:block;font-size:13px;margin:8px 0;overflow-wrap:anywhere}.simple-upload .upload-zone{min-height:170px;margin:16px 0}.simple-upload details,.save-preset{margin:18px 0}.simple-upload summary,.save-preset summary{cursor:pointer;color:#365c45;padding:10px 0}.save-preset label{margin-top:16px}.simple-upload .check-row{font-size:13px}.simple-upload{margin-bottom:20px}

.upload-products.product-rows { display:grid; grid-template-columns:1fr; }
.upload-products.product-rows article {display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:20px;width:100%;}
.product-rows .product-tile img {height:145px;width:100%;object-fit:contain;}
.product-row-fields {min-width:0;}.product-row-fields small {overflow-wrap:anywhere;}
.seo-products {margin:24px 0;padding:24px;border:1px solid #dce3d7;border-radius:14px;}
.seo-product-list {display:grid;gap:20px;margin-top:24px;}
.seo-product-list article {display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;border-top:1px solid #dce3d7;padding-top:20px;}
.seo-product-list img {width:100%;max-height:160px;object-fit:contain;}
.seo-result-copy {white-space:pre-wrap;max-height:250px;overflow:auto;}
@media(max-width:650px){.upload-products.product-rows article{grid-template-columns:75px minmax(0,1fr)}.seo-product-list article{grid-template-columns:65px minmax(0,1fr)}.seo-products{padding:12px}}

.mockup-product-list {display:grid;gap:24px;margin-top:24px}.mockup-product{padding:24px;border:1px solid #dce3d7;border-radius:14px;background:white}.mockup-product header{display:flex;gap:20px;align-items:center;margin-bottom:20px}.mockup-product header img{width:90px;height:120px;object-fit:contain}.mockup-product fieldset>.secondary{margin:12px}.background-preview{width:220px;height:160px;object-fit:cover;border-radius:10px;margin:12px 0}.mockup-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.mockup-gallery>div{position:relative;border:2px solid #ddd;border-radius:12px;padding:8px}.mockup-gallery>div.selected{border-color:#4a7656}.mockup-gallery img{width:100%;aspect-ratio:1;object-fit:contain}.mockup-gallery .remove-image{position:absolute;right:4px;top:4px;border-radius:50%;background:white;padding:4px 10px;color:#333}.product-row-fields .preset-panel{padding:16px;margin:14px 0}.product-rows article>.check-row{align-self:start}.product-rows .product-tile{align-self:start}

.sidebar-product {display:flex;gap:12px;width:100%;text-align:left;padding:10px;margin:8px 0;background:white;border:1px solid #dce3d7;border-radius:12px;align-items:center;}
.sidebar-product img {width:55px;height:70px;object-fit:contain;flex-shrink:0;}
.sidebar-product small {display:block;margin-top:6px;}
.sidebar-product.active {border:2px solid #355e49;background:#f0f5ed;}
.sidebar-product strong {overflow-wrap:anywhere;}
.all-products {padding:18px;}
.mockup-gallery a {display:block;position:relative;}
.mockup-gallery a:hover,.mockup-gallery a:focus {z-index:20;}
.mockup-gallery a img {transition:transform .15s;transform-origin:center;}
.mockup-gallery a:hover img,.mockup-gallery a:focus img {transform:scale(1.8);box-shadow:0 5px 30px #0005;}

.reference-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;max-height:460px;overflow:auto;margin:16px 0}.reference-tile{border:1px solid #dce3d7;padding:10px;border-radius:10px;background:#fff;cursor:pointer}.reference-tile:has(input:checked){border:2px solid #365c45;background:#f0f5ed}.reference-tile img{width:100%;height:115px;object-fit:contain}.reference-tile input{width:auto!important}.reference-tile span{display:block;font-size:13px;overflow-wrap:anywhere}.reference-picker{margin:20px 0}.product-mockup-settings summary{cursor:pointer;padding:14px;background:#f4f6f1;border-radius:8px;margin-bottom:16px}.seo-editor{border:1px solid #dce3d7;border-radius:12px;padding:20px;margin-top:20px}

.mockup-targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:16px 0}.mockup-targets label{border:1px solid #dce3d7;padding:10px;border-radius:10px}.mockup-targets img{width:40px;height:55px;object-fit:contain}.mockup-targets span{font-size:14px}

.action-right{display:block!important;margin-left:auto!important;margin-top:18px!important;margin-bottom:18px!important}.library-grid input{min-width:0;width:100%}.library-grid button{margin:6px 4px 0 0}

.library-tabs { display:flex; gap:16px; margin:24px 0; }
.library-tabs button { display:flex; align-items:center; gap:16px; padding:22px 30px; border:2px solid #dce4d8; border-radius:14px; background:white; font-size:20px; font-weight:650; flex:1; }
.library-tabs button.selected { border-color:#365f48; background:#edf3e9; }
.library-tabs button span { font-size:36px; }
.reference-add { position:relative; display:inline-flex; padding:14px 20px; border:1px dashed #365f48; border-radius:10px; margin:12px 0; cursor:pointer; font-weight:600; }
.reference-add input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.library-grid textarea { width:100%; min-height:95px; }
.reference-tile small { display:block; font-size:12px; color:#526652; margin-top:8px; }

.reference-grid.reference-strip { display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; max-height:none; scrollbar-width:none; scroll-snap-type:x proximity; }
.reference-strip::-webkit-scrollbar { display:none; }
.reference-strip .reference-tile { flex:0 0 170px; scroll-snap-align:start; }
.reference-navigation { display:flex; justify-content:flex-end; gap:10px; }
.reference-navigation button { font-size:24px; padding:8px 20px; border-radius:10px; }
.image-order { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; }
.image-order button { padding:7px; font-size:12px; }

.reference-grid.reference-strip { display:grid; grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:calc((100% - 48px)/5); gap:12px; }
.reference-navigation { justify-content:center; }
.library-tabs { justify-content:center; }
.library-tabs button { flex:0 1 auto; padding:14px 24px; }
.library-grid .template-card>img { object-fit:contain; background:#f3f3ee; }
.batch-thumbnails { display:flex; gap:12px; overflow:auto; margin:16px 0; }
.batch-thumbnails button { flex:0 0 120px; background:white; border:1px solid #dce3d7; border-radius:10px; padding:8px; }
.batch-thumbnails button.selected { border:2px solid #365c45; }
.batch-thumbnails img { width:100%;height:105px;object-fit:contain; }
.batch-thumbnails span { display:block;font-size:12px;overflow-wrap:anywhere; }
@media(max-width:700px) { .reference-grid.reference-strip { grid-auto-columns:calc((100% - 12px)/2); } }

/* Keep previews out of the gallery controls and remove sticky focus zoom. */
.mockup-gallery a:hover img,.mockup-gallery a:focus img {transform:none;box-shadow:none}
.mockup-gallery a:hover,.mockup-gallery a:focus {z-index:auto}
.hover-preview {pointer-events:none;margin:18px 0;display:flex;justify-content:center;background:#f3f5f0;border-radius:12px}
.hover-preview img {max-width:100%;max-height:420px;object-fit:contain}
.mockup-gallery>div[draggable=true] {cursor:grab}
.image-order {display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}
.image-order button {padding:6px;border:1px solid #cbd6c9;border-radius:7px;background:#fff}
.collection-select {margin:16px 0;padding:14px;border:1px solid #dce3d7;border-radius:12px;background:white}
.collection-select summary,.publish-products summary {cursor:pointer;font-weight:600;padding:8px 0}
.choice-chips {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;max-height:240px;overflow:auto}
.choice-chips button {width:auto!important;border:1px solid #ccd9c8;border-radius:20px;padding:8px 13px;background:#f5f7f2;color:#294533;font-size:13px}
.choice-chips button[aria-pressed=true] {background:#dcead4;border-color:#3d6a43;box-shadow:inset 0 0 0 1px #3d6a43}
.reference-guidelines summary {font-size:12px;cursor:pointer;padding:8px 0}
.reference-guidelines p {font-size:12px;max-height:140px;overflow:auto;overflow-wrap:anywhere;white-space:pre-wrap}
.publish-product {padding:20px;border:1px solid #dce3d7;border-radius:14px;margin:22px 0}
.publish-actions {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:20px}