/* Keep preview controls compact, calm, and usable on narrow screens. */
.previewbar{gap:clamp(8px,1.3vw,15px)}
.device{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid transparent;color:var(--ink);transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.device:before{width:20px;height:20px}
.device.active{background:#f4f1eb;border-color:#d9d3c9;box-shadow:0 1px 2px #24211f12}
.previewbar .button{box-shadow:none}
.previewbar .button.secondary{background:#fff;border-color:#d9d3c9;color:var(--ink)}
.preview-frame{transition:width .25s ease}
@media(max-width:720px){
  .devices .device[data-device="desktop"],.devices .device[data-device="tablet"]{display:none}
  .devices{margin:0 auto;min-width:44px}
  .device{padding:8px}
  .previewbar{padding-inline:8px;gap:8px}
  .previewbar .logo{display:none}
  .previewbar>.secondary{font-size:0;width:42px;min-width:42px;height:42px;min-height:42px;padding:0;position:relative;overflow:hidden;color:transparent!important}
  .previewbar>.secondary:after{content:"×";position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-size:23px;font-weight:600}
  .previewbar>.buy{display:none}
  .preview-wrap{padding:6px}
  .preview-frame.mobile{width:min(390px,100%);border-radius:14px}
}
@media(max-width:430px){
  .previewbar{height:58px}
  .preview-wrap{height:calc(100vh - 58px);padding:0}
  .preview-frame.mobile{border-radius:0}
}
@media(prefers-reduced-motion:reduce){.device,.preview-frame{transition:none}}
@media(max-width:720px){
  .previewbar{position:absolute;top:10px;right:10px;z-index:210;width:44px;height:44px;padding:0;background:transparent;border:0;box-shadow:none}
  .previewbar .devices{display:none}
  .previewbar>.secondary{width:44px;min-width:44px;height:44px;min-height:44px;border:0;border-radius:50%;background:var(--purple);color:#fff!important;box-shadow:0 3px 12px #1d2c4540}
  .previewbar>.secondary:after{color:#fff}
  .preview-wrap{height:100vh;padding:0}
  .preview-frame.mobile{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
}
@media(max-width:430px){.previewbar{height:44px}}
@media(max-width:720px){
  .previewbar>.secondary{background:var(--violet)!important;color:#fff!important;border-color:var(--violet)!important;box-shadow:0 3px 12px #1e293b55!important}
  .previewbar>.secondary:after{color:#fff!important}
}
@media(max-width:720px){
  .previewbar>.secondary:after{inset:0;width:100%;height:100%;margin:auto;display:flex;align-items:center;justify-content:center;line-height:1;transform:translateY(-1px)}
}