/* PROSOCHE product discovery and quick-action enhancement. Public release candidate. */
.tool-rail .products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.tool-rail .product-tile{min-width:0;position:relative;border:1px solid #d9dde1;border-radius:13px;padding:4px;background:#fff;display:flex;flex-direction:column;gap:0;transition:border-color .15s,box-shadow .15s}
.tool-rail .product-tile.selected,.tool-rail .product-tile:hover{border-color:#d2a343;box-shadow:0 0 0 1px #d2a34355}
@media(hover:hover) and (pointer:fine){.tool-rail .product-tile[data-quick]:hover::after{content:attr(data-quick);position:absolute;z-index:50;left:4px;right:4px;top:calc(100% + 4px);background:#102639;color:#fff;font-size:11px;line-height:1.35;padding:9px 10px;border-radius:8px;box-shadow:0 8px 19px #0004;pointer-events:none}.tool-rail .product-tile[data-quick]:hover{z-index:12}}

.tool-rail .product-tile .product-option{border:0!important;background:transparent!important;width:100%;min-height:108px;padding:5px 5px 1px;flex:1}
.tool-rail .product-tile .product-option small{display:block!important;font-size:10px;line-height:1.2;margin-top:4px;white-space:normal}
.tool-rail .product-tile .product-option img,.tool-rail .product-tile .product-vector-thumb{width:100%;height:65px;object-fit:contain;border-radius:8px}
.tool-rail .product-info-btn{margin:3px 4px 4px;border:1px solid #cdd6df;border-radius:7px;background:#f4f6f7;color:#2f4556;padding:6px 5px;font-size:11px;font-weight:800;min-height:32px}
.tool-rail .product-info-btn:hover,.tool-rail .product-info-btn:focus-visible{background:#fce4a8;color:#151d26}
.more-products-toggle{grid-column:1/-1;min-height:39px;border:1px solid #b78c3c;border-radius:9px;background:#fff5dc;color:#553b14;font-size:12px;font-weight:850;padding:9px 7px}
.product-extra-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.product-selection-hint{font-size:11px;line-height:1.4;margin:11px 2px 8px;color:#586b77}
.product-details-dialog{width:min(520px,calc(100vw - 26px));max-height:min(85vh,780px);overflow:auto;border:1px solid #d6b166;border-radius:18px;padding:22px 24px;background:#fff;color:#152534;box-shadow:0 22px 75px #0006}
.product-details-dialog::backdrop{background:#07111bd5}
.product-details-head{display:flex;justify-content:space-between;align-items:start;gap:12px;border-bottom:1px solid #dcdfe4;padding-bottom:13px}
.product-details-head small{font-size:10px;font-weight:900;color:#b38023;letter-spacing:.12em}
.product-details-head h2{font-size:23px;margin:3px 0 0}
.product-details-head button{width:39px;height:39px;border:1px solid #c5ccd3;border-radius:9px;background:#f4f6f8;color:#223342;font-size:20px}
.product-detail-intro{color:#4e6374;margin:12px 0;font-size:14px}
.detail-value{padding:9px 0;display:flex;flex-direction:column;border-bottom:1px solid #e9eaed;font-size:13px;gap:2px}
.detail-value b{color:#10202e;font-size:12px}.detail-value span{color:#4b5c6b}
.detail-caution{background:#fff5de;padding:12px;border-left:3px solid #e6b653;border-radius:7px;font-size:12px;line-height:1.5;color:#473819;margin:15px 0 3px}
.studio-quick-tools{margin-top:14px;border:1px solid #d9dedf;background:#f8f9f9;border-radius:13px;padding:12px}
.quick-tools-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px}
.quick-tools-head h4{margin:0;font-size:14px}.quick-tools-head span{font-size:11px;color:#63717e}
.studio-quick-tools .bg-removal-block,.studio-quick-tools .alignment-tools{min-height:0;margin:7px 0!important;padding:11px;border-radius:11px}
.studio-quick-tools .bg-removal-block>p,.studio-quick-tools .alignment-tools>p{font-size:11px;margin:3px 0 9px}
.studio-quick-tools .bg-actions{display:flex;flex-wrap:wrap;gap:8px}
.studio-quick-tools .bg-actions .button{font-size:12px;padding:9px 12px;min-height:36px;margin:0!important}
.studio-quick-tools .guide-toggles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.studio-quick-tools .guide-toggles label{font-size:11px}
.studio-quick-tools .align-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.studio-quick-tools .align-quick button{padding:8px 9px;font-size:11px;min-height:32px}
.studio-quick-actions{padding:13px 11px;border:1px solid #e6ca8c;border-radius:13px;background:#fffaf0;margin-top:11px}
.studio-quick-actions h4{font-size:15px;margin:0 0 3px}.studio-quick-actions .action-subtitle{font-size:11px;margin:0 0 9px;color:#5f6b74}
.studio-main-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.studio-main-actions .studio-action-btn{width:100%;min-height:43px;padding:9px 8px;font-size:12px;white-space:normal;line-height:1.25}
.studio-quick-actions #studioPurchaseStatus{margin-top:10px;font-size:11px;line-height:1.45}
body[data-studio-theme="dark"] .tool-rail .product-tile{background:#192c3c;border-color:#485668}
body[data-studio-theme="dark"] .tool-rail .product-tile.selected{border-color:#ebbe67}
body[data-studio-theme="dark"] .tool-rail .product-info-btn{background:#293b4d;border-color:#5c7085;color:#e9eff4}
body[data-studio-theme="dark"] .more-products-toggle{background:#4b361c;color:#ffe0a2;border-color:#c69535}
body[data-studio-theme="dark"] .product-selection-hint{color:#bdcad6}
body[data-studio-theme="dark"] .studio-quick-tools{background:#1d3041;border-color:#455e74;color:#f0f4f7}
body[data-studio-theme="dark"] .quick-tools-head span{color:#b6c6d3}
body[data-studio-theme="dark"] .studio-quick-actions{background:#243445;border-color:#755b31;color:#f2f6f8}
body[data-studio-theme="dark"] .studio-quick-actions .action-subtitle{color:#c0cbd3}
body[data-studio-theme="dark"] .studio-quick-actions #studioPurchaseStatus{color:#d1dce4}
@media(max-width:1100px){.tool-rail .products{grid-template-columns:repeat(4,minmax(0,1fr))}.product-extra-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:650px){.tool-rail .products{grid-template-columns:repeat(2,minmax(0,1fr))}.product-extra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-quick-tools .guide-toggles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* PROSOCHE: Independent side scrolling, stable center preview, and honest photo-only garments. */
.real-preview-unavailable{width:100%;height:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 22px;gap:8px;text-align:center;color:#40566a;background:linear-gradient(145deg,#eef3f7,#f9fafb);border:1px dashed #b8c8d7;border-radius:12px}
.real-preview-unavailable span{font-size:40px}.real-preview-unavailable strong{font-size:19px;color:#132737}.real-preview-unavailable p{font-size:13px;line-height:1.55;max-width:340px;margin:0}
.preview-artwork-paused{display:none!important}
body[data-studio-theme="dark"] .real-preview-unavailable{background:linear-gradient(145deg,#1b2c3c,#293d50);color:#d6e1ec;border-color:#677c8f}
body[data-studio-theme="dark"] .real-preview-unavailable strong{color:#fff}
/* Keep all three columns parallel and let each side panel have a visible independent scrollbar. */
@media (min-width:1101px){
 .studio-grid{display:grid!important;align-items:start!important;grid-template-columns:minmax(245px,24%) minmax(400px,1fr) minmax(295px,27%)!important;column-gap:12px}
 .studio-grid>.tool-rail,.studio-grid>.controls-panel,.studio-grid>.visual-panel{
   position:sticky!important;top:10px!important;align-self:start!important;max-height:calc(100dvh - 20px)!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable;scrollbar-width:thin;overscroll-behavior-y:contain;
 }
 .studio-grid>.tool-rail{grid-column:1!important;grid-row:1!important}
 .studio-grid>.visual-panel{grid-column:2!important;grid-row:1!important}
 .studio-grid>.controls-panel{grid-column:3!important;grid-row:1!important}
 .studio-grid>.tool-rail::-webkit-scrollbar,.studio-grid>.controls-panel::-webkit-scrollbar,.studio-grid>.visual-panel::-webkit-scrollbar{width:9px}
 .studio-grid>.tool-rail::-webkit-scrollbar-thumb,.studio-grid>.controls-panel::-webkit-scrollbar-thumb,.studio-grid>.visual-panel::-webkit-scrollbar-thumb{background:#b59b63;border-radius:10px;border:2px solid transparent;background-clip:content-box}
 .studio-grid>.tool-rail::-webkit-scrollbar-track,.studio-grid>.controls-panel::-webkit-scrollbar-track,.studio-grid>.visual-panel::-webkit-scrollbar-track{background:#17263216;border-radius:10px}
 .studio-grid>.visual-panel .preview-background{aspect-ratio:1/1.02;min-height:300px}
}
@media (max-width:1100px){.studio-grid>.tool-rail,.studio-grid>.controls-panel,.studio-grid>.visual-panel{position:static!important;max-height:none!important;overflow:visible!important}}
/* A cue that explains the two distinct scroll areas while leaving global page scroll free for artwork gallery. */
.studio-scroll-note{font-size:11px;line-height:1.45;opacity:.8;margin:0 0 8px;color:#626f79}
body[data-studio-theme="dark"] .studio-scroll-note{color:#cbd7e0}