/* Desktop keeps its original three-column layout and the same form controls. */
.mobile-only{display:none}
.mobile-pane-group{display:contents}
[data-flow-pane][hidden],.mobile-only[hidden]{display:none!important}

/* A bounded workspace: only the current step scrolls, so the model stays in view. */
.mobile-flow{--mobile-height:100dvh;--preview-size:clamp(324px,calc(var(--mobile-height)*.46 + 24px),424px);height:100%;overflow:hidden}
.mobile-flow body{height:var(--mobile-height);min-height:0;overflow:hidden;display:flex;flex-direction:column}
.mobile-flow .mobile-only{display:block}
.mobile-flow .site-header{height:56px;min-height:56px;flex:none;width:100%;padding:8px 16px;gap:12px;background:var(--bg)}
.mobile-flow .wordmark{font-size:30px}
.mobile-flow .brand{gap:12px}
.mobile-flow .brand-sub{font-size:9px;padding-right:10px;max-width:62px}
.mobile-flow .site-header nav{display:none}
.mobile-flow .cart-trigger{min-height:40px;font-size:12px;gap:7px}
.mobile-flow .cart-trigger svg{width:18px}
.mobile-flow main{flex:1;min-height:0;width:100%;max-width:none;padding:0}
.mobile-flow .intro,.mobile-flow .demo-banner,.mobile-flow .how-section,.mobile-flow footer{display:none}
.mobile-flow .workspace{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--preview-size) 54px minmax(0,1fr) auto;gap:0;align-items:stretch}
.mobile-flow .workspace>*{width:auto}
.mobile-flow .material-panel,.mobile-flow .center-column{display:contents}
.mobile-flow .material-panel>.panel-title,.mobile-flow .processing-panel>.panel-title,.mobile-flow .appearance-note{display:none}
.mobile-flow .product-preview{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:48px minmax(0,1fr) 84px;min-height:0;margin:0 10px;border-radius:12px;border:1px solid #e3e5db}
.mobile-flow .product-preview>.part-name-row{grid-column:1;grid-row:1;min-height:0;padding:3px 10px;gap:7px}
.mobile-flow .product-preview>.part-name-row>div{display:flex;align-items:center;gap:8px}
.mobile-flow .product-preview>.part-name-row label{font-size:10px;line-height:1.4;max-width:75px;flex:none}
.mobile-flow .product-preview>.part-name-row #part-name{min-width:0;width:100%;padding:0;min-height:40px}
.mobile-flow .product-preview>.part-name-row .part-counter{font-size:8px;padding:3px 5px;white-space:nowrap}
.mobile-flow .stage{grid-column:1;grid-row:2;order:0;height:auto;min-height:0;margin:0;border:0;border-radius:0}
.mobile-flow .preview-price-bar{grid-column:1;grid-row:3;padding:5px 12px;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 12px;align-content:center}
.mobile-flow .preview-price-content{grid-column:1;grid-row:1;gap:1px}
.mobile-flow .preview-price-bar>.quantity-block{grid-column:2;grid-row:1/3}
.mobile-flow .preview-price-bar>.quantity-block>span{font-size:11px;margin-bottom:4px}
.mobile-flow .preview-price-bar .price-label{font-size:10px}
.mobile-flow .preview-price-bar .price{font-size:25px;line-height:1.1}
.mobile-flow .preview-price-bar .unit-price{display:none}
.mobile-flow .preview-price-bar #price-details{grid-column:1;grid-row:2;justify-self:start;font-size:11px;min-height:24px;text-align:right}
.mobile-flow .stage-top .live-tag{visibility:hidden}
.mobile-flow .stage-top{top:8px;right:11px;left:11px}
.mobile-flow .live-tag{padding:3px 7px;font-size:9px}
.mobile-flow #viewer{inset:10px 6px 86px}
.mobile-flow .model-caption{bottom:50px;gap:2px;padding:0 8px}
.mobile-flow .model-caption strong{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-flow .model-caption span{font-size:10px;color:#65725e}
.mobile-flow .stage-bottom{bottom:5px;right:5px;left:5px;gap:0}
.mobile-flow .drag-hint{display:none}
.mobile-flow .view-buttons{flex-wrap:nowrap;gap:0;padding:1px;border-radius:7px}
.mobile-flow .view-buttons button{min-height:38px;min-width:38px;padding:4px 9px;font-size:15px;gap:4px}
.mobile-flow .view-buttons button span{font-size:10px}
.mobile-flow .placement-hint{top:34px;font-size:11px;padding:5px}
.mobile-flow .model-invalid{inset:40px 20px 85px;font-size:12px}
.mobile-flow .texture-status{top:34%;padding:7px;font-size:11px}
.mobile-flow .fallback{inset:0}
.mobile-flow .fallback>div{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.mobile-flow .fallback svg{max-height:calc(100% - 36px);flex:1;min-height:0}
.mobile-flow .fallback p{font-size:9px;line-height:1.4}
.mobile-flow .mobile-steps{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px 12px;background:var(--bg);border-bottom:1px solid var(--line)}
.mobile-steps button{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#778474;border-radius:7px;min-height:44px;padding:0 4px}
.mobile-steps button>span{width:21px;height:21px;display:grid;place-items:center;border:1px solid #cbd5c6;border-radius:50%;font-family:Arial,sans-serif;font-size:11px}
.mobile-steps button[aria-current=step]{color:var(--green);font-weight:600;background:#eaf0e4}
.mobile-steps button[aria-current=step]>span{background:var(--green);color:white;border-color:var(--green)}
.mobile-flow [data-flow-pane]{grid-column:1;grid-row:3;order:0;display:block;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scroll-padding:16px;padding:18px 20px 24px;margin:0;border:0;border-radius:0;background:white;min-width:0}
.mobile-flow .mobile-step-title{font-size:19px;font-weight:600;line-height:1.5;margin:0 0 3px;letter-spacing:-.3px;outline:none}
.mobile-flow .mobile-step-copy{font-size:12px;line-height:1.7;color:#73816e;margin-bottom:17px}
.mobile-flow .mobile-errors{font-size:12px;line-height:1.7;color:var(--error);background:#fcf2ed;padding:10px 12px;border-radius:7px;white-space:pre-line;margin-bottom:14px}
.mobile-flow #step-dimensions>.section-label.spaced:first-of-type{margin-top:0}
.mobile-flow .materials{grid-template-columns:1fr;gap:8px}
.mobile-flow .material-card:last-child{grid-column:auto}
.mobile-flow .material-card label{padding:10px;gap:12px;min-height:66px}
.mobile-flow .swatch{width:48px;min-width:48px;height:44px}
.mobile-flow .material-copy strong{font-size:14px}
.mobile-flow .material-copy small{font-size:11px;color:#7b8873}
.mobile-flow .material-check{font-size:14px}
.mobile-flow .material-card .info,.mobile-flow .finish-option .info{margin-left:12px}
.mobile-flow .info{width:24px;height:24px;min-width:24px;font-size:13px}
.mobile-flow .stock-note{font-size:11px;padding:10px 12px}
.mobile-flow .stock-note .info{width:20px;height:20px;min-width:20px;font-size:11px}
.mobile-flow .more-materials summary{font-size:13px;min-height:44px;padding:12px 0}
.mobile-flow .more-materials label{font-size:12px}
.mobile-flow .selected-material strong{font-size:13px}
.mobile-flow input:not([type=radio]):not([type=checkbox]),.mobile-flow select{font-size:16px;min-height:44px}
.mobile-flow .dimension-grid{grid-template-columns:1fr 1fr;gap:14px 12px}
.mobile-flow .dimension-grid>label{font-size:13px}
.mobile-flow .dimension-grid>label:last-child{grid-column:1/-1}
.mobile-flow .dimension-grid small{font-size:11px}
.mobile-flow .input-wrap span{font-size:11px}
.mobile-flow .section-label h3{font-size:15px}
.mobile-flow .segmented button{font-size:13px;min-height:44px}
.mobile-flow .material-footnote{font-size:11px}
.mobile-flow .processing-shortcuts{display:flex;gap:6px;position:sticky;top:-18px;z-index:4;margin:0 -2px 18px;padding:8px 0;background:white;border-bottom:1px solid var(--line)}
.processing-shortcuts button{flex:1;min-height:40px;font-size:12px;border-radius:6px;background:#f1f4ec}
.mobile-flow .finish-option{min-height:58px}
.mobile-flow .finish-option label{padding:11px;gap:10px}
.mobile-flow .finish-option strong{font-size:14px}
.mobile-flow .finish-option small{font-size:11px;color:#7b8873}
.mobile-flow .finish-option input{width:17px;height:17px;flex:none}
.mobile-flow .field-hint{font-size:12px;color:#78826f}
.mobile-flow .edge-options{grid-template-columns:1fr 1fr}
.mobile-flow .edge-option label{font-size:12px;min-height:65px;padding:10px;gap:5px}
.mobile-flow .edge-option label small{font-size:10px}
.mobile-flow .edge-option .info{margin-left:8px}
.mobile-flow .selected-edge-row strong{font-size:12px}
.mobile-flow .selected-edge-row button{font-size:11px;min-height:40px}
.mobile-flow #edge-plan{max-height:120px}
.mobile-flow .shared-radius>label{font-size:13px}
.mobile-flow .shared-radius>small,.mobile-flow #corner-limit{font-size:11px}
.mobile-flow .corner-summary strong{font-size:13px}
.mobile-flow .hole-add-row button{font-size:13px;min-height:48px}
.mobile-flow .hole-heading{font-size:13px}
.mobile-flow .hole-heading button{min-width:40px;min-height:40px}
.mobile-flow .hole-fields label{font-size:12px}
.mobile-flow .hole-bottom{font-size:11px;gap:6px}
.mobile-flow .hole-bottom button{font-size:11px;min-height:40px}
.mobile-flow .mobile-review{margin:0 0 20px}
.mobile-review-row{display:flex;width:100%;align-items:center;justify-content:space-between;text-align:right;gap:15px;padding:12px 0;border-bottom:1px solid var(--line)}
.mobile-review-row>span:first-child{min-width:0}
.mobile-review-row small{display:block;font-size:11px;color:#7a8773;margin-bottom:4px}
.mobile-review-row strong{display:block;font-size:13px;font-weight:500;line-height:1.7;overflow-wrap:anywhere}
.mobile-review-edit{font-size:11px;color:var(--green);text-decoration:underline;flex:none}
.mobile-flow .mobile-review-note{font-size:11px;line-height:1.8;color:#7a8773;margin:10px 0}
.mobile-flow .part-name-row label,.mobile-flow .price-label,.mobile-flow .quantity-block>span{font-size:12px}
.mobile-flow .quantity button{width:40px;height:44px}
.mobile-flow .quantity input{width:38px}
.mobile-flow .price{font-size:32px}
.mobile-flow .summary-card #add-cart{display:none}
.mobile-flow .errors{font-size:12px}
.mobile-flow .processing-price-note,.mobile-flow .saved-note{font-size:11px}
.mobile-flow .mobile-actions{grid-row:4;grid-column:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px calc(11px + env(safe-area-inset-bottom));border-top:1px solid #dfe5d8;box-shadow:0 -4px 16px #263f3507;background:#fff;z-index:5;min-width:0}
.mobile-action-buttons{display:flex;gap:12px;width:100%;align-items:center;justify-content:space-between}
#mobile-back{font-size:12px;padding:8px 6px;min-height:44px}
#mobile-next{font-size:13px;min-height:46px;min-width:98px;padding:10px 12px}
.mobile-flow .toast{bottom:calc(92px + env(safe-area-inset-bottom));font-size:12px;width:max-content;max-width:90vw;z-index:20}
.mobile-flow dialog{max-height:calc(var(--mobile-height) - 24px)}
.mobile-flow.mobile-compact{--preview-size:240px}
.mobile-flow.mobile-compact .product-preview{grid-template-rows:40px minmax(0,1fr) 78px}
.mobile-flow.mobile-compact .preview-price-bar .price{font-size:22px}
.mobile-flow.mobile-compact .product-preview>.part-name-row #part-name{min-height:34px}
.mobile-flow.mobile-compact .preview-price-bar{padding-block:3px}
.mobile-flow.mobile-compact .preview-price-bar #price-details{min-height:24px}
.mobile-flow.mobile-compact .preview-price-bar .quantity button{height:40px}
.mobile-flow.mobile-compact .preview-price-bar #quantity{min-height:40px}
.mobile-flow.mobile-compact .site-header{height:48px;min-height:48px}
.mobile-flow.mobile-compact .workspace{grid-template-rows:var(--preview-size) 48px minmax(0,1fr) auto}
.mobile-flow.mobile-compact .model-caption{display:none}
.mobile-flow.mobile-compact #viewer{inset:4px 6px 46px}
.mobile-flow.mobile-compact .mobile-actions{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
.mobile-flow.mobile-compact .mobile-steps{padding-top:2px;padding-bottom:2px}

@media(max-width:359px){
 .mobile-flow:not(.mobile-compact) .product-preview{grid-template-rows:48px minmax(0,1fr) 90px}
 .mobile-flow [data-flow-pane]{padding-inline:14px}
 .mobile-flow .view-buttons button{padding-inline:6px}
 .mobile-flow .mobile-actions{padding-inline:10px;gap:4px}
 #mobile-next{font-size:12px;padding-inline:9px;min-width:88px}
 #mobile-back{font-size:11px;padding-inline:3px}
}
/* On a phone held sideways, the model gets its own fixed column. */
@media(min-width:600px) and (max-height:500px){
 .mobile-flow .workspace,.mobile-flow.mobile-compact .workspace{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:50px minmax(0,1fr) auto}
 .mobile-flow .product-preview{grid-column:2;grid-row:1/-1;margin:0 8px 8px}
 .mobile-flow .mobile-steps{grid-column:1;grid-row:1}
 .mobile-flow [data-flow-pane]{grid-column:1;grid-row:2}
 .mobile-flow .mobile-actions{grid-column:1;grid-row:3;padding-inline:12px}
 .mobile-flow.mobile-compact .model-caption{display:flex}
 .mobile-flow.mobile-compact #viewer{inset:10px 6px 86px}
}

/* Editing owns the space above the keyboard. Never leave a zero-height pane.
   Preview focus keeps the name/quantity fields mounted and visible too. */
.mobile-flow.mobile-editing body{position:fixed;top:var(--mobile-top,0px);left:0;right:0;width:100%}
.mobile-flow.mobile-editing .site-header{display:none}
.mobile-flow.mobile-editing .workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:0px 48px minmax(0,1fr) auto}
.mobile-flow.mobile-editing .product-preview{display:none}
.mobile-flow.mobile-editing .mobile-steps{grid-column:1;grid-row:2;padding-block:2px}
.mobile-flow.mobile-editing [data-flow-pane]{grid-column:1;grid-row:3;scroll-padding-block:32px;padding-top:12px}
.mobile-flow.mobile-editing .mobile-actions{grid-column:1;grid-row:4;padding-block:6px}
.mobile-flow.mobile-editing .processing-shortcuts{position:static}
.mobile-flow.mobile-editing-preview .workspace{grid-template-rows:108px 48px minmax(0,1fr) auto}
.mobile-flow.mobile-editing-preview .product-preview{display:grid;grid-column:1;grid-row:1;grid-template-rows:44px 0px 64px;margin-block:0}
.mobile-flow.mobile-editing-preview .stage{display:none}
.mobile-flow.mobile-editing-preview .preview-price-bar{grid-row:3}
.mobile-flow.mobile-editing-preview .preview-price-bar .quantity-block>span,.mobile-flow.mobile-editing-preview #price-details{display:none}
.mobile-flow .hinge-card .hole-fields{grid-template-columns:1fr}