/* Shared by designer.html, litho.html and insert.html: sticky preview + collapsible tool cards */
#stage{width:auto;max-width:100%;max-height:max(300px,calc(100vh - 400px));display:block;margin:0 auto}
/* Desktop: the preview column follows you down the page */
@media(min-width:851px){
 main>section:first-child{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow-y:auto;padding:0 7px 7px 0}
}
/* Phone: the preview stays pinned at the top (small), the price and download cards move below the tools */
@media(max-width:850px){
 #stage{max-height:34vh}
 main>section{display:contents}
 main>section:first-child>.card:first-child{position:sticky;top:0;z-index:20;order:-1;margin-bottom:0;padding:8px}
 main>section:first-child>.card:first-child p{display:none}
 main>section:first-child>.card:not(:first-child){order:5}
 main>section:last-child>.card:last-child{order:6}
}
/* Collapsible cards */
.fold{cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}
.fold::after{content:'▾';font-size:20px;transition:transform .15s}
.card.closed>.fold::after{transform:rotate(-90deg)}
.card.closed>:not(h2){display:none}
.card.closed>h2{margin-bottom:0}
.fold:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:6px}
.foldbar{display:flex;gap:8px;justify-content:flex-end;margin:0 0 10px}
.foldbar .btn{padding:4px 12px;font-size:14px;box-shadow:2px 2px 0 var(--ink)}

/* Consent tick-box on the order forms */
.chk{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:14px;margin-top:12px}.chk input{width:auto;margin-top:3px;flex:none}

/* Colour swatches that are out of stock */
.sw.out{opacity:.35;cursor:not-allowed;background-image:linear-gradient(135deg,transparent 42%,#b00020 42%,#b00020 58%,transparent 58%)}