/* A viewport-sized atelier: the design and checkout stay in view. */
@media(min-width:761px){
 body:has(#bracelet-studio){height:100dvh;overflow:hidden;overscroll-behavior:none}
 body:has(#bracelet-studio) .announce,body:has(#bracelet-studio) .site-footer{display:none}
 body:has(#bracelet-studio) .site-header{position:fixed;inset:0 0 auto;height:64px;z-index:60}
 body:has(#bracelet-studio) .site-header>.wrap{height:64px;min-height:0;padding-block:0}
 body.admin-bar:has(#bracelet-studio) .site-header{top:32px}
 #bracelet-studio{position:fixed;inset:var(--builder-top,64px) 0 0;max-width:1600px;width:100%;padding:0 24px 16px;margin:0 auto;display:flex;flex-direction:column;min-height:0}
 #bracelet-studio>.studio-heading{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
 #bracelet-studio>.studio-heading>.eyebrow{display:none}
 #bracelet-studio>.studio-heading h1{font-size:30px;line-height:1.2;margin:0;white-space:nowrap}
 #bracelet-studio>.studio-heading p{font-size:13px;line-height:1.5;margin:0;text-align:right}
 #bracelet-studio>.studio-heading br{display:none}
 #bracelet-studio>.studio-notes{display:none}
 #bracelet-studio .atelier-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:stretch}
 #bracelet-studio .atelier-preview{position:relative;top:auto;min-width:0;min-height:0;display:flex;flex-direction:column;align-self:stretch;border-radius:8px;background:#f6f1e8}
 #bracelet-studio .preview-top{flex:none;padding:10px 16px;background:transparent}
 #bracelet-studio .preview-top .eyebrow{font-size:10px;letter-spacing:.12em}
 #bracelet-studio .studio-tag{font-size:10px;padding:3px 8px}
 #bracelet-studio .bracelet-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse,#fffdf8,#eae3d7)}
 #bracelet-studio #bracelet-canvas{display:block;flex:none;max-width:none;max-height:none}
 #bracelet-studio .canvas-caption{display:none}
 #bracelet-studio .view-controls{flex:none;display:flex;flex-wrap:wrap;justify-content:center;padding:5px 8px;gap:2px;background:transparent}
 #bracelet-studio .view-controls button{padding:6px 8px;min-height:32px;font-size:11px;white-space:nowrap}
 #bracelet-studio .bead-touch-hint{flex:none;text-align:center;font-size:11px;line-height:1.4;margin:0;padding:2px 12px 8px;color:#7a6b57}
 #bracelet-studio #bead-drop-zone{display:none;position:absolute;bottom:118px;left:18px;right:18px;margin:0;z-index:2;pointer-events:none;background:#fff8efef}
 #bracelet-studio.is-bead-dragging #bead-drop-zone{display:block}
 #bracelet-studio .design-metrics{flex:none;padding:10px 6px;gap:6px}
 #bracelet-studio .design-metrics b{font-size:24px;line-height:1.1}
 #bracelet-studio .design-metrics small{font-size:10px;line-height:1.2;padding:4px 4px 0}
 #bracelet-studio .atelier-controls{min-height:0;min-width:0;padding:12px 14px;display:flex;flex-direction:column;background:#fffcf7;border:1px solid #e2d9ca;border-radius:8px;overflow:hidden}
 #bracelet-studio #panel-beads{flex:1;min-height:0;display:flex;flex-direction:column}
 #bracelet-studio .studio-step{flex:none;margin:0 0 8px}
 #bracelet-studio .studio-step h2{font-size:26px;line-height:1.1}
 #bracelet-studio #panel-beads>.studio-help:not(#palette-help){display:none}
 #bracelet-studio .bead-filters{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 8px}
 #bracelet-studio .bead-filters label{display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.3}
 #bracelet-studio .bead-filters select{flex:1;min-width:0;min-height:34px;padding:6px 8px;margin:0;font-size:12px}
 #bracelet-studio #palette-help{flex:none;font-size:11px;line-height:1.35;margin:0 0 8px}
 #bracelet-studio #reading-palette{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0 0 6px}
 #bracelet-studio #reading-palette>span{font-size:10px}
 #bracelet-studio #reading-palette button{font-size:10px;padding:5px 8px}
 #bracelet-studio .material-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(90px,1fr);gap:8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:1px 2px 2px;align-content:stretch}
 #bracelet-studio .material-card{container-type:size;min-width:0;min-height:90px;padding:4px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}
 #bracelet-studio .material-card img{display:block;flex:none;width:clamp(28px,40cqh,64px);height:clamp(28px,40cqh,64px);object-fit:contain;margin:0 0 3px}
 #bracelet-studio .material-card strong{font-size:12px;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}
 #bracelet-studio .material-card small{font-size:10px;line-height:1.3;margin-top:2px}
 #bracelet-studio .material-count{font-size:10px;right:5px;top:3px}
 #bracelet-studio .studio-checkout{flex:none;padding:10px 0 0;margin:10px 0 0;border-bottom:0}
 #bracelet-studio .order-fit{gap:8px;font-size:12px}
 #bracelet-studio .order-fit select{min-height:32px;padding:4px 8px;font-size:13px}
 #bracelet-studio #design-summary{font-size:13px;font-weight:500}
 #bracelet-studio .studio-checkout .fit-message{font-size:11px;line-height:1.35;padding:0;border:0;background:transparent;margin:6px 0}
 #bracelet-studio .studio-checkout .cc-btn{min-height:42px;padding:10px;font-size:12px;line-height:1.3}
 #bracelet-studio #studio-status{font-size:11px;line-height:1.3;margin:5px 0 0;max-height:40px;overflow:auto}
}
@media(min-width:761px) and (max-height:700px){
 #bracelet-studio{padding-bottom:10px}
 #bracelet-studio>.studio-heading{padding:7px 0}
 #bracelet-studio>.studio-heading h1{font-size:26px}
 #bracelet-studio .preview-top{padding:6px 12px}
 #bracelet-studio .material-grid{gap:5px;grid-auto-rows:minmax(80px,1fr)}
 #bracelet-studio .material-card{min-height:80px;padding:4px 2px}
 #bracelet-studio .material-card img{width:32px;height:32px;margin-bottom:2px}
 #bracelet-studio .material-card strong{font-size:11px}
 #bracelet-studio .studio-step h2{font-size:23px}
 #bracelet-studio .studio-checkout{padding-top:7px;margin-top:7px}
 #bracelet-studio .view-controls button{padding:5px 6px}
}
@media(min-width:761px) and (max-width:1050px){
 #bracelet-studio{padding-inline:16px}
 #bracelet-studio .atelier-layout{gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
 #bracelet-studio>.studio-heading p{max-width:330px;font-size:11px}
 #bracelet-studio .atelier-controls{padding:10px}
 #bracelet-studio .bead-filters label{font-size:10px;gap:4px}
 #bracelet-studio .preview-top .eyebrow{font-size:9px}
 #bracelet-studio .studio-tag{display:none}
}
@media(min-width:761px) and (max-height:640px){
 #bracelet-studio #panel-beads>.studio-step,#bracelet-studio #palette-help{display:none}
 #bracelet-studio .material-card img{width:28px;height:28px}
}