/* Pack context surrounds the existing canonical workbench. */
.studio-app #studio-pack-context { position:relative; padding:12px 18px; color:var(--ink); background:var(--white); border-bottom:1px solid var(--line); flex-shrink:0; z-index:32; }
.pack-studio-heading,.pack-title-row,.pack-studio-controls,.pack-studio-products,.pack-studio-actions,.pack-secondary-options { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.pack-studio-heading { margin-bottom:10px; }
.pack-title-row { gap:10px; }
.pack-studio-heading a { display:inline-flex; align-items:center; gap:5px; color:#944100; font-size:12px; padding:6px 0; min-height:32px; }
.pack-studio-heading strong { font:750 19px var(--font-display); }
.pack-price { margin-left:auto; font-size:12px; color:var(--muted); }
.pack-progress { padding:5px 9px; border-radius:999px; background:var(--paper); color:var(--muted); font-size:11px; font-weight:750; }
.pack-progress[data-ready="true"] { color:#216048; background:var(--mint); }
.pack-studio-controls { justify-content:space-between; }
.studio-app .pack-studio-controls button { min-height:44px; border:1px solid var(--line); border-radius:10px; padding:9px 14px; background:var(--paper); color:var(--ink); font:700 12px var(--font-body); cursor:pointer; transition:background .18s,transform .18s; }
.pack-studio-products button small { display:block; font:500 10px var(--font-body); margin-top:3px; }
.studio-app .pack-studio-products button[aria-pressed="true"] { border-color:#ff7900; background:#fff1e4; color:#944100; }
.pack-mobile-actions { display:contents; }
.pack-options-toggle { display:none; }
.studio-app #pack-add-design { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:#ff7900; color:#07111b; border-color:#ff7900; }
.studio-app .pack-studio-controls button:disabled { opacity:.45; cursor:default; }
.studio-app .pack-studio-controls button:active:not(:disabled) { transform:scale(.98); }
#studio-pack-context>p { margin:10px 0 0; font-size:11px; color:var(--muted); }
.is-pack-mode :is(#btn-open-share,.quote-notice-card,.studio-topbar-right #save-design,#mobile-save-design) { display:none!important; }
.is-pack-mode .studio-history-controls,
.is-pack-mode .tool-tab:not([data-studio-tool="image"]):not([data-studio-tool="inspector"]),
.is-pack-mode .drawer-panel:not([data-drawer-panel="image"]),
.is-pack-mode .inspector-tabs [data-insp-tab="properties"],
.is-pack-mode .inspector-tabs [data-insp-tab="layers"] { display:none!important; }
.pack-logo-choice { display:flex; flex-wrap:wrap; gap:8px; }
.studio-app .pack-logo-choice button { background:#fff8f1; border-color:#e9b982; }
#pack-preview-modal .studio-modal-box { max-height:90dvh; overflow:auto; }
#pack-preview-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
#pack-preview-body h3 { font-size:15px; }
.pack-preview-faces { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.pack-preview-faces figure { margin:0; min-width:0; }
.pack-preview-faces canvas { display:block; width:100%; height:auto; background:#f4f1eb; border-radius:12px; }
.pack-preview-faces figcaption { font-size:11px; text-align:center; padding:8px 0; }
#studio-pack-context :is(a,button):focus-visible { outline:3px solid #ff7900; outline-offset:3px; }
.pack-direct-loading { display:grid; place-items:center; gap:8px; min-height:42vh; padding:40px; text-align:center; color:#07111b; background:#f7f4ee; }
.pack-direct-loading strong { font:800 clamp(24px,4vw,42px)/1.05 var(--font-display); }
.pack-direct-loading span { color:#66717b; }

@media(max-width:800px), (max-height:500px) and (orientation:landscape) {
  .studio-app.is-pack-mode { height:100dvh; min-height:0; }
  .studio-app #studio-pack-context { padding:8px 10px 10px; }
  .pack-studio-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; margin-bottom:7px; }
  .pack-title-row { min-width:0; gap:6px; }
  .pack-title-row a { flex:none; width:36px; min-height:36px; justify-content:center; padding:0; border:1px solid var(--line); border-radius:10px; }
  .pack-title-row a span { display:none; }
  .pack-title-row strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; }
  .pack-price { grid-column:1; margin:0 0 0 42px; font-size:10px; }
  .pack-progress { grid-column:2; grid-row:1 / span 2; align-self:center; white-space:nowrap; font-size:10px; }
  .pack-studio-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); gap:7px; }
  .pack-studio-products { grid-column:1/-1; width:100%; flex-wrap:nowrap; gap:6px; }
  .pack-studio-products button { flex:1; min-width:0; padding:6px!important; }
  .pack-studio-products button span { display:block; white-space:nowrap; }
  .pack-studio-products button small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pack-mobile-actions { display:contents; }
  .studio-app .pack-options-toggle { display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 6px; text-align:left; padding:5px 10px; }
  .pack-options-toggle span { white-space:nowrap; }
  .pack-options-toggle small { grid-column:1; font-size:9px; color:var(--muted); font-weight:500; }
  .pack-options-toggle b { grid-column:2; grid-row:1 / span 2; font-size:18px; transition:transform .18s; }
  .pack-options-toggle[aria-expanded="true"] b { transform:rotate(180deg); }
  .studio-app #pack-add-design { min-width:0; padding:7px 9px; }
  .studio-app #pack-add-design span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pack-secondary-options { display:none; position:absolute; top:calc(100% + 6px); left:10px; right:10px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--white); box-shadow:0 16px 38px rgb(7 17 27 / 20%); z-index:4; }
  .pack-secondary-options.is-open { display:grid; gap:8px; }
  .pack-logo-choice,.pack-studio-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:8px; }
  .studio-app .pack-secondary-options button { padding:8px; font-size:11px; }
  #studio-pack-context>p { display:none; }
  #pack-preview-body { grid-template-columns:1fr; gap:14px; }
  .is-pack-mode .studio-workspace { min-height:0; }
  .is-pack-mode .studio-stage { padding-top:7px; }
}

@media(max-width:360px) {
  .pack-progress { display:none; }
  .pack-studio-heading { grid-template-columns:1fr; }
  .pack-price { grid-column:1; }
  .pack-studio-products button { font-size:11px!important; }
  .studio-app #pack-add-design span { font-size:10px; }
}

@media(max-height:500px) and (orientation:landscape) {
  .studio-app #studio-pack-context { padding:4px 10px 6px; }
  .pack-studio-heading { display:flex; flex-wrap:nowrap; min-height:32px; margin-bottom:4px; }
  .pack-title-row a { width:32px; min-height:32px; }
  .pack-title-row strong { font-size:15px; }
  .pack-price { display:none; }
  .pack-progress { grid-column:auto; grid-row:auto; margin-left:auto; }
  .pack-studio-controls { grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1.05fr); gap:6px; }
  .pack-studio-products { grid-column:auto; gap:5px; }
  .studio-app .pack-studio-controls button { min-height:40px; }
  .pack-studio-products button small { font-size:9px; }
  .studio-app .pack-options-toggle { min-width:0; }
  .pack-options-toggle span { overflow:hidden; text-overflow:ellipsis; }
}

@media(prefers-reduced-motion:reduce) { #studio-pack-context * { transition:none!important; animation:none!important; } }