/* BP client theme tokens: default colours retained; scene artwork untouched. */
/* BlueProprty's mobile shell: stable header, flexible choices, pinned action. */
.mobile-area-other,.mobile-area-input,.area-options .icon{display:none}
@media(max-width:760px){
  html{height:100%;overflow:hidden;overscroll-behavior:none}
  body{position:fixed;inset:0 auto auto 0;width:100%;height:var(--app-height,100dvh);min-height:0;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none;background:#fff}
  .mobile-header{height:auto;min-height:0;display:block;flex:0 0 auto;padding:max(4px,env(safe-area-inset-top)) 16px 0}
  .mobile-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:40px;padding-bottom:6px}
  .mobile-header img{justify-self:center;width:auto;height:30px}
  .mobile-header #mobile-count{justify-self:end;font-size:12px;font-weight:800;color:var(--quiet)}
  #mobile-count b{color:var(--orange-dark)}
  .mobile-back{position:relative;justify-self:start;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-4px;border-radius:50%;background:transparent;border:0;padding:0}
  .mobile-back::before{content:'';position:absolute;inset:4px;box-sizing:border-box;border-radius:50%;background:#f4f1ea}
  .mobile-back svg{position:relative;width:16px;height:16px;stroke-width:2.25}
  .mobile-back:disabled{visibility:hidden}
  .mobile-progress{display:flex;gap:4px;height:4px}
  .mobile-progress i{flex:1;border-radius:99px;background:var(--line);overflow:hidden}
  .mobile-progress i.on{background:linear-gradient(90deg,var(--orange),var(--orange-dark))}
  .shell{display:block;flex:1 1 0;width:100%;height:auto;min-height:0;margin:0;padding:10px 16px 0;overflow:hidden}
  .left,.right{display:none}
  .center{height:100%;min-height:0;display:flex;flex-direction:column;gap:10px}
  .preview-card{flex:0 0 clamp(120px,calc(var(--app-height,100dvh) * .30),290px);height:auto;min-height:0;padding:0;border:0;border-radius:18px}
  .preview,.sf-contact{border-radius:18px}
  .question-card{display:flex;flex:1 1 0;min-height:0;height:auto;border:0;border-radius:0;overflow:visible}
  .question-stage{flex:1 1 0;min-height:0;overflow:hidden}
  .question-panel{height:100%;padding:2px 2px 0;min-height:0;animation-duration:var(--qr-t3)}
  .question-head{margin-bottom:8px;flex-shrink:0}
  .question-head h1{font-size:18px;line-height:1.2;letter-spacing:-.45px}
  .question-head p{font-size:14px;line-height:1.3;margin-top:4px}
  .question-content{display:flex;flex-direction:column;flex:1 1 0;min-height:0;padding:2px 2px 6px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scroll-padding:4px}
  .question-footer{flex:0 0 auto;min-height:0;margin:0 -16px;padding:9px 18px max(12px,env(safe-area-inset-bottom));border-top:1px solid #ededed;background:#fff;z-index:10}
  .question-footer .back,.question-footer .selection-note{display:none}
  .continue{width:100%;min-width:0!important;min-height:46px;margin:0;border-radius:12px;background:var(--ink);font-size:16px;line-height:1.2;padding:12px;box-shadow:none}
  @media(hover:hover){.continue:hover:enabled{background:#29384c;transform:none}}
  .continue:active{transform:scale(.985)}
  .options,.options:not(.area-options):not(.priorities),.floors,.blends{flex:1 1 0;height:auto;min-height:0;max-height:none!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(min-content,1fr);gap:6px;align-content:stretch}
  .option{min-height:64px;height:auto;padding:8px 10px;gap:4px;border-radius:14px;box-shadow:none}
  @media(hover:hover){.option:hover{transform:none;box-shadow:none}}
  .option:active{transform:scale(.98)}
  .option strong{font-size:16px;line-height:1.1;letter-spacing:-.25px}
  .option small{font-size:12px;line-height:1.15;color:var(--muted)}
  .option .icon{margin:0;color:var(--orange);opacity:.6}
  .icon svg{width:23px;height:23px}
  .option.selected:not(.material-card){background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:none}
  .option.selected:not(.material-card) :is(small,.icon){color:#fff;opacity:1}
  .options:not(.priorities)>.option:not(.material-card)>.checkmark{display:none}
  .option.material-card,.floors .material-card,.blends .material-card{position:relative;min-height:72px;height:auto;display:flex;flex-direction:column;padding:0;gap:0}
  .material-card .material-media,.floors .material-media,.blends .material-media{position:relative;width:100%;height:auto;min-height:24px!important;flex:1 1 0}
  .material-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .material-card .material-text,.floors .material-text,.blends .material-text{display:flex;flex:0 0 auto;height:auto;min-height:0;flex-direction:column;justify-content:center;gap:2px;padding:6px 5px}
  .material-card .material-text strong,.floors .material-text strong,.blends .material-text strong{font-size:14px;line-height:1.1;white-space:normal}
  .material-card .material-text small,.floors .material-text small,.blends .material-text small{font-size:12px;line-height:1.1;white-space:normal}
  .material-card.selected .material-text{background:var(--orange);color:#fff}
  .material-card.selected small{color:#fff}
  .checkmark{top:6px;right:6px;width:18px;height:18px;font-size:11px;pointer-events:none}
  .area-options .option[data-choice="650"],.area-editor{display:none}
  .area-options .option{min-height:54px;padding:6px 8px;gap:3px}
  .area-options .option strong{font-size:19px;line-height:1.1}
  .area-options .option small{font-size:12px;text-transform:uppercase}
  .area-options .icon{display:block}
  .area-options .icon svg{width:18px;height:18px}
  .area-options .mobile-area-other{display:flex;flex-direction:column}
  .mobile-area-input{display:flex;align-items:center;grid-column:1/-1;gap:8px;min-height:54px;padding:7px 12px;border:1.5px solid var(--orange);border-radius:14px}
  .mobile-area-input>span{font-size:12px;color:var(--muted);max-width:70px}
  .mobile-area-input input{min-width:0;width:100%;border:0;outline:0;font-size:22px;font-weight:800;text-align:center;background:transparent;color:var(--ink)}
  .mobile-area-input small{font-size:12px;white-space:nowrap;color:var(--muted)}
  .mobile-area-input:focus-within{box-shadow:inset 0 0 0 1px var(--orange)}
  #area-error:empty{display:none}
  .color-tools{flex:0 0 auto;flex-wrap:wrap;gap:6px;margin-bottom:8px}
  .color-count{padding:3px;gap:3px}
  .color-count:before{display:block;content:'Colors';font-size:12px;padding:0 6px}
  .color-count button{min-width:32px;min-height:36px;font-size:14px;padding:5px}
  .color-count button span,.color-slot .slot-name{display:none}
  .color-slot .slot-short{display:inline}
  .color-slots{gap:4px}
  .color-slot{min-height:40px;min-width:40px;padding:5px;gap:4px;font-size:12px}
  .color-slot i{width:12px;height:12px}
  .palette-grid{flex:1 1 0;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(46px,1fr);gap:6px;padding-bottom:2px}
  .color-option{min-height:46px;padding:4px;gap:3px;flex-direction:column;justify-content:center}
  .color-option i{flex:1 1 0;width:100%;height:auto;min-height:15px}
  .color-option span{font-size:12px;line-height:1.1;max-width:100%;white-space:nowrap}
  .priorities .option{min-height:74px;flex-direction:column;justify-content:center;gap:5px;text-align:center;padding:8px}
  body:is([data-step=zip],[data-step=phone]) .contact-input{flex:1;justify-content:center;gap:8px}
  body:is([data-step=zip],[data-step=phone]) .contact-input input{font-size:22px;min-height:50px}
  body:is([data-step=zip],[data-step=phone]) .sf-input-label{font-size:14px}
  body:is([data-step=zip],[data-step=phone]) .sf-contact-note{font-size:12px;margin:5px 0}
  body:is([data-step=zip],[data-step=phone]) .sf-contact-benefits{font-size:12px;gap:4px}
  body[data-step="phone"] .preview-card{flex-basis:clamp(260px,calc(var(--app-height,100dvh) * .40),330px)}
  body[data-step="phone"] .sf-message-card{width:calc(100% - 20px);margin-top:0;padding:9px 10px 0}
  body[data-step="phone"] .sf-message-preview .sf-contact-kicker{display:none}
  body[data-step="phone"] #phone-error:empty{display:none}
  body[data-step="phone"] .sf-message-brand{margin-bottom:6px;gap:7px}
  body[data-step="phone"] .sf-message-brand b{font-size:13px}
  body[data-step="phone"] .sf-message-icon{width:25px;height:25px}
  body[data-step="phone"] .sf-message-details{gap:0 10px}
  body[data-step="phone"] .sf-message-details>div{padding:2px 0}
  body[data-step="phone"] .sf-message-details dt{font-size:10px;margin-bottom:2px}
  body[data-step="phone"] .sf-message-details dd{font-size:12px}
  body[data-step="phone"] .sf-message-footer{font-size:9px;margin:3px -10px 0;padding:6px}
  .keyboard-open .preview-card{display:none}
  .keyboard-open .question-head p{display:none}
  .keyboard-open .mobile-header{padding-top:2px}
  .keyboard-open .sf-contact-benefits,.keyboard-open .sf-contact-note{display:none}
}
@media(max-width:760px) and (max-height:620px){
  .preview-card{flex-basis:clamp(90px,calc(var(--app-height,100dvh) * .23),142px)}
  .question-head h1{font-size:17px}
  .question-head p{font-size:13px;line-height:1.2}
  .question-head{margin-bottom:5px}
  .material-card .material-text small{font-size:12px}
  .floors .material-text small,.blends .material-text small{display:none}
  .option.material-card,.floors .material-card,.blends .material-card{min-height:62px}
  .color-tools{flex-wrap:nowrap;gap:3px;margin-bottom:5px}
  .color-count:before{display:none}
  .question-footer{padding-top:7px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  body[data-step="phone"] .sf-contact-benefits{font-size:10px;flex-wrap:nowrap;margin-top:3px}
  body[data-step="phone"] .sf-contact-benefits span{padding:1px 4px}
  body[data-step="phone"] .sf-contact-note{font-size:10px;margin:0}
  body[data-step="phone"] .contact-input input{min-height:46px;padding:8px 16px}
  body[data-step="phone"] .preview-card{flex-basis:250px}
  body[data-step="phone"] .contact-input{flex:0 0 auto;justify-content:flex-start;gap:4px;padding:0}
}
@media(max-width:760px) and (max-height:450px){
  body:not(.keyboard-open) .preview-card{flex-basis:80px}
  .question-head p{display:none}
}