/* Phone layouts use intrinsic content height; desktop columns are unchanged. */
@media (max-width:767px) {
  #onyx-banner-app main {display:flex;flex-direction:column;gap:12px;padding:0 12px 16px;min-width:0;width:100%}
  #onyx-banner-app main>* {min-width:0;max-width:100%;width:100%;grid-column:auto;grid-row:auto}
  #onyx-banner-app .artwork-editor {position:relative;top:auto}
  #onyx-banner-app .product-bar {flex-direction:column;align-items:stretch;gap:12px;padding:16px 0 4px}
  #onyx-banner-app .product-bar>div:first-child {min-width:0;width:100%}
  #onyx-banner-app .price-block {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);width:100%;gap:8px;align-items:stretch}
  #onyx-banner-app .price-block>div {grid-column:1/-1;text-align:left;margin:0}
  #onyx-banner-app .price-block button {width:100%;min-width:0;white-space:normal;line-height:1.35;padding:10px}
  #onyx-banner-app #configure {display:block;min-width:0}
  #onyx-banner-app .quick-size {display:block;margin:0;padding:14px;min-width:0}
  #onyx-banner-app .quick-size h2 {white-space:normal}
  #onyx-banner-app .size-controls {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #onyx-banner-app .size-fields {grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-width:0;gap:10px}
  #onyx-banner-app .size-fields label {min-width:0}
  #onyx-banner-app .dimension-inputs {grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px;gap:5px;min-width:0}
  #onyx-banner-app .size-times {display:none}
  #onyx-banner-app input:not([type=checkbox]),#onyx-banner-app select {min-width:0;max-width:100%;font-size:16px}
  #onyx-banner-app .size-controls input,#onyx-banner-app .size-controls select {width:100%}
  #onyx-banner-app .acrylic-controls {display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);gap:10px;min-width:0}
  #onyx-banner-app .acrylic-controls label {min-width:0}
  #onyx-banner-app .acrylic-controls input,#onyx-banner-app .acrylic-controls select {width:100%}
  #onyx-banner-app .acrylic-controls label:last-child {grid-column:1/-1}
  #onyx-banner-app[data-product=vehicle-magnets] .acrylic-controls {grid-template-columns:minmax(0,1fr) 80px}
  #onyx-banner-app .acrylic-options {padding:14px;margin:0}
  #onyx-banner-app .acrylic-options .option-grid {grid-template-columns:minmax(0,1fr);gap:12px}
  #onyx-banner-app .primary-finishing {grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:14px}
  #onyx-banner-app #grommet-spacing-main {grid-column:1/-1}
  #onyx-banner-app .secondary-options {grid-template-columns:minmax(0,1fr);margin:0}
  #onyx-banner-app .editor-toolbar {flex-wrap:wrap;gap:8px;padding:12px}
  #onyx-banner-app .art-actions {display:flex;flex-wrap:wrap;flex:1 1 100%;gap:8px;margin:0;justify-content:flex-start;min-width:0}
  #onyx-banner-app .art-actions button {white-space:normal}
  #onyx-banner-app .preview-stage {height:clamp(250px,72vw,340px);min-height:250px}
  #onyx-banner-app .artwork-editor.expanded {position:relative;inset:auto;display:block;z-index:auto;overflow:visible}
  #onyx-banner-app .artwork-editor.expanded .preview-stage {height:clamp(320px,90vw,480px);min-height:320px;flex:none}
  #onyx-banner-app .artwork-editor.expanded #placement-panel {max-height:none;overflow:visible}
  #onyx-banner-app .status-strip {flex-direction:column;gap:8px;padding:12px;min-width:0}
  #onyx-banner-app .status-strip>*,#onyx-banner-app .resolution-wrap {min-width:0;max-width:100%;overflow-wrap:anywhere}
  #onyx-banner-app #resolution-note {max-width:100%;text-align:left}
  #onyx-banner-app #placement-panel,#onyx-banner-app #placement-details {padding:12px;min-width:0}
  #onyx-banner-app .placement-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
  #onyx-banner-app .placement-options button {min-width:0;padding:10px;white-space:normal}
  #onyx-banner-app .material-tooltip {width:240px;max-width:calc(100vw - 64px);overflow-wrap:anywhere}
  #onyx-banner-app .material-control>.material-tooltip {left:auto;right:0}
  #onyx-banner-app .resolution-wrap>.resolution-tooltip {left:0;right:auto}
  #onyx-banner-app .placement-tooltip {width:180px!important;max-width:calc(100vw - 64px)!important;overflow-wrap:anywhere}
  #onyx-banner-app button {min-height:44px}
  #onyx-banner-app .material-info,#onyx-banner-app .finishing-info,#onyx-banner-app .panel-toggle {min-height:0}
  #onyx-banner-app .pricing-table {width:100%;table-layout:fixed}
  #onyx-banner-app .pricing-table th,#onyx-banner-app .pricing-table td {overflow-wrap:anywhere;padding:8px}
  #onyx-banner-app .pricing-table td:not(:first-child) {white-space:normal}
  #onyx-banner-app #pricing-modal {padding:16px}
  #onyx-banner-app dialog {padding:16px;width:calc(100% - 16px);scroll-padding:70px 0 150px}
  #onyx-banner-app dialog .dialog-header {top:-16px;margin:-16px -16px 12px;padding:12px 16px;gap:8px}
  #onyx-banner-app dialog .dialog-header h2 {min-width:0;font-size:20px}
  #onyx-banner-app dialog .dialog-header button {flex:none}
  #onyx-banner-app dialog .cart-actions {bottom:-16px;margin:16px -16px -16px!important;padding:12px 16px;gap:8px}
  #onyx-banner-app dialog .cart-actions>* {width:100%;min-width:0;white-space:normal;line-height:1.4}
  #onyx-banner-app .artwork-approval-previews figure {flex-basis:100%}
}