/* v2-mobile.css — phone layout (≤760px) for Pixo Studio. Loaded LAST. One codebase: desktop untouched.
   System: 16px side gutters · 56px top bar · sidebar → slide-in drawer (hamburger) · journey rail → bottom step bar
   · card grids 2 per row · big pop-ups → full-screen sheets with a sticky bottom action · 44px min hit targets. */
@media (max-width:760px){
:root{--sbw:0px;--dock-h:52px;--dock-gap:12px;--dock-margin:10px;--mob-g:16px;--mob-top:56px}
body{overflow-x:hidden}
/* ── drawer (was the sidebar) ── */
aside{width:min(84vw,300px)!important;padding:20px 14px 16px!important;transform:translateX(-104%);transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:320!important;top:0!important;box-shadow:0 0 0 1px var(--sbbd),24px 0 60px rgba(0,0,0,.5);overflow-y:auto;background:#1b1a17!important}
body.mobNav aside{transform:none}
aside .wm{font-size:22px!important;text-align:left!important;padding:2px 6px 14px!important}aside .wm::before{content:none!important}
aside .nav{font-size:15px!important;justify-content:flex-start!important;gap:12px!important;padding:12px 12px!important;min-height:46px}
aside .nav svg{width:18px;height:18px}
aside .sbAuth{justify-content:stretch!important;margin:12px 0!important}
aside .signin{width:100%!important;height:46px!important;font-size:14px!important;gap:8px!important;padding:0 14px!important}
aside .oauth,aside .sbQuick{display:flex!important}
.mobScrim{position:fixed;inset:0;z-index:310;background:rgba(8,7,6,.6);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
body.mobNav .mobScrim{opacity:1;pointer-events:auto}
/* ── top bar ── */
.utils{left:0!important;height:var(--mob-top);padding:0 8px 0 4px!important;justify-content:flex-end;gap:2px!important}
.utils .usep{display:none!important}
.utils .u{min-width:44px;min-height:44px;padding:0 8px!important;justify-content:center}
.utils .u:not(.tok):not(:last-child){display:none!important} /* search/import/library/lang live in the drawer */
.utils .u.tok{display:inline-flex!important}
.mobBurger{margin-right:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;background:none;border:0;color:var(--tp);font:700 17px/1 Inter,sans-serif;letter-spacing:-.01em;cursor:pointer;white-space:nowrap}
.mobBurger i{display:block;flex:0 0 18px;width:18px;height:12px;position:relative;border:0;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.mobBurger i::after{content:none}
.mobBurger em{font-style:italic;font-weight:400;color:var(--gold);margin-left:-5px}
/* ── content column ── */
main{left:0!important;padding-top:0}
.col,.pcol,.scol,.galCol,.mdCol,[class$="Col"]{max-width:none!important;padding-left:var(--mob-g)!important;padding-right:var(--mob-g)!important}
.pcol,.scol,.col{padding-top:calc(var(--mob-top) + 16px)!important}
#homeOv{left:0!important}
h1{font-size:clamp(26px,7.4vw,32px)!important;line-height:1.12!important;letter-spacing:-.02em}
.hgroup .sub,.sub{font-size:15px!important}
.prog{display:none!important}
/* ── bottom step bar (journey rail) ── */
.dock{left:0!important;right:0!important;bottom:calc(env(safe-area-inset-bottom,0px) + var(--dock-margin))!important;padding:0 10px;gap:8px;justify-content:space-between}
.dock .jrail{max-width:none!important;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;justify-content:flex-start!important;padding:0 8px!important;border-radius:8px}
.dock .jrail::-webkit-scrollbar{display:none}
.dock .jrail .jlb{display:none!important}
.dock .jrail .jch:not(.cur) .jv{display:none}
.dock .otto{position:static!important;transform:none!important;flex:0 0 auto;width:48px!important;height:48px!important;padding:0!important;justify-content:center;border-radius:8px!important}
.dock .otto .otl{display:none!important}
.dockTip{left:12px!important;right:12px!important;transform:none!important}
/* ── card grids: 2 per row ── */
.pgrid,#scrSetup .pgrid,.sgrid,.sgrid.rec,.pgrid.sgrid,.pgrid.sgrid.rec,.dgrid,.dgrid.shGrid,#scrStyle.lgOn #lookRec,.galGrid,.wdGrid,.mCard.cast.wdStep .wdGrid,.castGrid,.libmGrid,.libGrid,.mdWall,.hcTopics,.cc4Gal{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
#scrStyle.lgOn #lookRec{grid-template-rows:none!important;grid-auto-rows:auto!important}
.pcard .pf{padding:9px 10px 10px!important}.pcard .pt{font-size:13.5px!important}.pcard .pd,.pcard .pm{font-size:11px!important}
.pcard:hover{transform:none}
.ottoPick,.pcard.on::after{font-size:10px!important;top:6px!important}
.pcard.on::after{right:6px!important;padding:4px 7px!important}
.ottoPick{left:6px!important}
/* bottom action rows sit above the step bar */
.pacts,.moRow,.lgRow{flex-wrap:wrap!important;gap:10px!important}
.pacts .cta,.moRow .cta,.lgRow .cta,.lgRow>.cta{flex:1 1 0!important;min-width:0!important;width:auto!important}
.pacts .backb,.moRow .backb,.lgRow>.backb{flex:0 0 auto!important;min-width:0!important}
.moRow .moExp{flex-basis:100%!important;order:-1}
#scrStyle .pacts.float{left:var(--mob-g)!important;right:var(--mob-g)!important;transform:none!important;bottom:calc(var(--dock-h) + var(--dock-margin) + 12px)!important}
.pacts.dock{bottom:calc(var(--dock-h) + var(--dock-margin) + 10px)!important}
/* ── pop-ups → full-screen sheets ── */
.mOv{align-items:stretch!important;justify-content:stretch!important;padding:0!important}
.mCard,.mCard.wide,.mCard.cast,.mCard.cast:not(.wdStep),.mCard.cast.wdStep,.mCard.wide.cc4,.mCard.wide.cc{width:100vw!important;max-width:none!important;height:100%!important;max-height:none!important;border-radius:0!important;padding:20px var(--mob-g) 0!important;margin:0!important;border:0!important;overflow-y:auto}
.mX{top:8px!important;right:8px!important;width:44px!important;height:44px!important;z-index:20}
.mCard .mT,.mCard.cast .mT,.mCard.cast.wdStep .wdHd b{font-size:26px!important;padding-right:44px}
.mCard .mS{font-size:14px!important}
/* sticky bottom action inside sheets */
.castFoot,.castFoot.dock,.mCard.cast.wdStep .castFoot,.mCard.cast.wdStep .castFoot.wdDock,.mBtns,.cc4Ft{position:sticky!important;bottom:0!important;margin:16px calc(-1 * var(--mob-g)) 0!important;padding:12px var(--mob-g) calc(12px + env(safe-area-inset-bottom,0px))!important;background:linear-gradient(180deg,rgba(27,26,23,0),#1b1a17 30%)!important;z-index:8;justify-content:stretch!important;pointer-events:auto!important}
#castDone,.mCard.cast:not(.wdStep) .castFoot.dock #castDone,.mCard.cast.wdStep .castFoot.wdDock #castDone,.mCard.cast.wdStep #castDone{width:100%!important;margin:0!important;justify-content:center;min-height:52px!important;font-size:17px!important;padding:0 20px!important}
.mCard.cast.wdStep .wdInfo{display:none!important}
.mCard.cast.wdStep .castFoot:not(.wdDock)::before{display:none!important}
/* cast filters: stacked, swipeable pill rows */
.mCard.cast:not(.wdStep) .castTop{display:flex!important;flex-direction:column;align-items:stretch!important;gap:14px!important;margin:18px calc(-1 * var(--mob-g)) 16px!important;padding:14px var(--mob-g)!important;top:-20px!important}
.ctG{padding:0!important;border-left:0!important;gap:8px!important}
.mCard.cast .seg{overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}
.mCard.cast .seg button{flex:0 0 auto;min-height:40px!important}
/* wardrobe sheet */
.wdOpts2{margin-left:calc(-1 * var(--mob-g))!important;margin-right:calc(-1 * var(--mob-g))!important;padding:14px var(--mob-g)!important;top:-20px!important}
.wdColG,.wdVibG{display:flex!important;overflow-x:auto;gap:8px!important;scrollbar-width:none;padding-bottom:2px}
.wdCol{flex:0 0 132px}.wdVib{flex:0 0 160px}
.mCard.cast .wdOpts2.stuck .wdSec{flex-direction:column!important;align-items:stretch!important;gap:6px}
.mCard.cast .wdOpts2.stuck .wdColG,.mCard.cast .wdOpts2.stuck .wdVibG{flex-wrap:nowrap!important}
.mCard.cast.wdStep .wdBox{padding-top:8px!important}
.mCard.cast.wdStep .wdC .wdT{font-size:14px!important;padding:10px 10px 0!important}.mCard.cast.wdStep .wdC .wdD{font-size:12px!important;padding:4px 10px 12px!important}
.wdDlg{align-items:flex-end!important;padding:0!important}
.wdDlgC{width:100%!important;border-radius:8px 8px 0 0!important;padding:22px var(--mob-g) calc(16px + env(safe-area-inset-bottom,0px))!important}
.wdDlgF .cta{flex:1}
/* Ask Otto panel */
.oPanel{left:0!important;right:0!important;bottom:0!important;top:0!important;width:auto!important;height:auto!important;border-radius:0!important}
/* dev bar: one swipe row */
.devbar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
/* ── round 2 fixes (measured at 390) ── */
body main h1,body .hgroup h1,body #scrCat.cgOn h1{font-size:clamp(26px,7.4vw,30px)!important}
.dock{width:auto!important;box-sizing:border-box}
.hgroup{flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
.hgroup>.stBack{position:static!important;margin:0!important;transform:none!important}
.hgroup>h1,.hgroup>.stBack~h1{padding-inline:0!important;text-align:left!important}
.hgroup .kick2,.hgroup .sub{text-align:left!important}
/* category: 2-up photo tiles, no separate big preview */
#scrCat.cgOn .cgWrap{grid-template-columns:1fr!important;grid-template-rows:none!important}
#scrCat .cgList{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
#scrCat.cgOn .cap{min-height:0!important;aspect-ratio:4/5}
#scrCat .cgPrev{display:none!important}
/* create action rows: always reachable, sticky above the step bar */
#scrStyle .lgRow,#scrSetup .moRow,#scrDetails .moRow,#scrSetup .pacts,#scrDetails .pacts{position:sticky!important;bottom:calc(var(--dock-h) + var(--dock-margin) + 8px);z-index:9;margin:14px calc(-1 * var(--mob-g)) 0!important;padding:10px var(--mob-g)!important;background:linear-gradient(180deg,rgba(20,19,16,0),rgba(20,19,16,.94) 26%)!important;border:0!important;box-shadow:none!important;border-radius:0!important}
#scrStyle .lgRow .lgExp,#scrSetup .moRow .moExp,#scrDetails .moRow .moExp{flex:1 1 100%!important;order:-1;min-height:40px!important;max-height:40px!important;height:40px!important;padding:0 12px!important;font-size:13px!important}
#scrStyle .lgRow .lgExp .lgTh,#scrSetup .moRow .moExp .lgTh,#scrDetails .moRow .moExp .lgTh{display:none!important}
#scrStyle .lgRow>.backb,#scrStyle .lgRow>.cta,#scrStyle .lgRow #styleBack,#scrStyle .lgRow #styleNext,.moRow .backb,.moRow .cta{min-height:50px!important;height:50px!important}
.fitS>.col{padding-bottom:calc(var(--dock-h) + var(--dock-margin) + 24px)!important}
/* review: single column, natural height */
#scrReview .rvwrap{display:flex!important;flex-direction:column!important;flex:none!important;gap:12px}
#scrReview .rvCard{width:auto!important;margin:0!important;min-height:auto!important}
/* tokens page: use the full width */
#scrTokens .tkPage,#scrTokens [class^="tk3"]{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;max-width:none!important}
.tk3Seg{flex-wrap:wrap;max-width:100%}
/* sheets: no scrollbar gutter; cast Continue always fully on screen */
.mCard{scrollbar-gutter:auto!important}
body #castOv .mCard.cast .castFoot,body #castOv .mCard.cast .castFoot.dock,body #castOv .mCard.cast .castFoot.wdDock{padding:12px var(--mob-g) calc(12px + env(safe-area-inset-bottom,0px))!important;height:auto!important;min-height:auto!important;flex-shrink:0!important;max-height:none!important}
body #castOv .mCard.cast .castTop,body #castOv .mCard.cast .wdOpts2{flex-shrink:0!important}
.cc4Body{padding:12px 0!important}.cc4Stage{padding:0!important}.cc4Hd{padding:0 44px 0 0!important}
/* wardrobe colour + vibe: compact chips on phone (bar stays short when pinned) */
.wdCol,body .mCard.cast .wdOpts2 .wdCol{flex:0 0 auto!important;flex-direction:row!important;align-items:center!important;gap:8px!important;padding:8px 12px 8px 8px!important;min-height:44px}
.wdCol .sw i,body .wdCol .sw i{width:18px!important;height:18px!important;border-radius:8px!important}
.wdVib,body .mCard.cast .wdOpts2 .wdVib{flex:0 0 auto!important;gap:8px!important;padding:6px 12px 6px 6px!important;min-height:44px}
.wdVib img,body .mCard.cast .wdOpts2 .wdVib img{width:32px!important;height:32px!important;border-radius:8px!important}
.wdCol b,.wdVib b{font-size:14px!important}
.wdOpts2,body .mCard.cast .wdOpts2.stuck{gap:12px!important}
.wdSec{gap:8px!important}.wdSec+.wdSec{padding-top:12px!important}
/* cast filters on phone: compact from the start (one swipe row per group, slider inline) */
body .mCard.cast:not(.wdStep) .castTop{gap:10px!important;padding:10px var(--mob-g)!important}
body .mCard.cast .ctL{font-size:11px!important;letter-spacing:.08em}
body .mCard.cast .ctG{flex-direction:row!important;align-items:center!important;gap:10px!important}
body .mCard.cast .ctG>.ctL{flex:0 0 52px}
body .mCard.cast .seg button{min-height:36px!important;padding:0 12px!important;font-size:13px!important}
body .mCard.cast .ctG:last-child{flex-wrap:wrap}
/* ── round 3 (user review) ── */
.devbar,#devbar{display:none!important}
body.devon main,body.devon aside,body.devon .utils{top:0!important}
/* step bar: frozen to the bottom edge, full-bleed, no arrows, no outline */
.dock{bottom:0!important;padding:0!important;height:calc(var(--dock-h) + env(safe-area-inset-bottom,0px))!important;background:#171613!important;border-top:1px solid rgba(245,244,240,.1)}
.dock .jrail{height:100%!important;border-radius:0!important;border:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;padding:0 6px env(safe-area-inset-bottom,0px)!important;gap:6px!important;justify-content:space-between!important;max-width:none!important;width:100%!important}
.dock .jrail .jconn,.dock .jrail .jfrac,.dock .jrail .jarr,.dock .jrail [class*="jArr"],.dock .jrail .jnav{display:none!important}
.dock .jrail .jch{border:0!important;outline:0!important;box-shadow:none!important;background:none!important;padding:4px 6px!important;min-height:44px;flex:0 0 auto}
.dock .jrail .jch.cur{background:rgba(229,168,46,.1)!important;border-radius:8px}
.dock .jrail .jch:not(.cur) .jk{display:none!important}
.dock .jrail .jch:not(.cur):not(.jcat){min-width:36px;justify-content:center}
.dock .jrail .jch.jcat:not(.cur) .jv{display:none!important}
.dock .otto{display:none!important}
:root{--dock-margin:0px}
.pacts.dock,#scrStyle .pacts.float{bottom:calc(var(--dock-h) + 8px)!important}
#scrStyle .lgRow,#scrSetup .moRow,#scrDetails .moRow,#scrSetup .pacts,#scrDetails .pacts{bottom:var(--dock-h)!important;margin-bottom:0!important}
.fitS>.col{padding-bottom:calc(var(--dock-h) + 16px)!important}
/* no Back buttons on phone (step bar + system back cover it) */
.stBack,.hgroup>.stBack,#scrStyle .lgRow #styleBack,#scrStyle .lgRow>.backb,.moRow .backb,.pacts .backb,.psNav .backb{display:none!important}
.moRow .cta,.lgRow .cta,.pacts .cta{flex:1 1 100%!important}
.pfBack,.pfTopBack,.pfNav .backb,.pfBk,.pfPrev,#pfOv .backb{display:none!important}
.pfNav .cta,.pfFt .cta{flex:1 1 100%!important;width:100%!important}
/* explore row: just "Explore N more …" on one line */

#scrStyle .lgRow .lgExp,.moRow .moExp{background:none!important;border:0!important;justify-content:center!important;color:var(--gold)!important;font-weight:600!important}
#scrStyle .lgRow .lgExp b,.moRow .moExp b{font-size:14px!important;color:var(--gold)!important}
/* staging page: hide empty tray/spacer boxes */
#scrSetup .moHold:empty,#scrSetup .stTray:empty,#scrSetup .slots:empty,#scrSetup #presCnt{display:none!important}
/* resume toast */
.resume{left:12px!important;right:12px!important;transform:none!important;top:calc(var(--mob-top) + 8px)!important;flex-wrap:wrap;gap:8px!important;padding:12px!important}
.resume .t{flex:1 1 100%;font-size:13px!important;line-height:1.4}
.resume button{flex:1 1 0;min-height:40px}
.resume .x{flex:0 0 40px}
/* demo banner: slim bar above the step bar, no overlap */
html body .demoBn{left:12px!important;right:12px!important;transform:none!important;top:auto!important;bottom:calc(var(--dock-h) + 76px)!important;height:auto!important;min-height:44px;padding:4px 4px 4px 12px!important;gap:8px!important;justify-content:space-between}
html body .demoBn .tx{display:block!important;font-size:12px!important;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .demoBn button{height:36px!important;font-size:12px!important;padding:0 10px!important;white-space:nowrap}
.dock .jrail .jch{display:flex!important}
html body .dock .jrail{flex:1 1 100%!important;min-width:100%!important;width:100%!important;max-width:100%!important;margin:0!important}
#scrSetup .pacts,#scrDetails .pacts{display:none!important}
#scrStyle .lgRow .lgExp,.moRow .moExp{font-size:0!important}
#scrStyle .lgRow .lgExp .lgTh,.moRow .moExp .lgTh,#scrStyle .lgRow .lgExp small,.moRow .moExp small,#scrStyle .lgRow .lgExp>svg,.moRow .moExp>svg{display:none!important}
#scrStyle .lgRow .lgExp .lgTx,.moRow .moExp .lgTx{display:block!important}
#scrStyle .lgRow .lgExp b,.moRow .moExp b{display:inline!important}
/* step bar: other steps = number only (thumbnail/number chip), current = name */
.dock .jrail .jch:not(.cur) .jt{display:none!important}
.dock .jrail .jch:not(.cur){min-width:40px!important;width:40px;padding:4px!important;justify-content:center!important}
.dock .jrail .jch:not(.cur) img{width:30px!important;height:30px!important;border-radius:8px!important}
/* back-to-top: appears after scrolling, sits above the step bar + sticky actions */
.mobTop{position:fixed;right:12px;bottom:calc(var(--dock-h) + 12px);z-index:60;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(245,244,240,.2);background:rgba(27,26,23,.92);backdrop-filter:blur(8px);color:var(--tp);cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.mobTop.show{opacity:1;transform:none;pointer-events:auto}
html.homeOn .mobTop,body:not([data-screen="work"]):not([data-screen="cat"]) .mobTop{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
/* create steps with a sticky Continue row: sit just above it */
body:has(.screen.onscr .lgRow, .screen.onscr .moRow) .mobTop{bottom:calc(var(--dock-h) + 130px)}
/* home page / tool pages have no step bar: hide the empty dock */
html.homeOn .dock,body:not([data-screen="work"]):not([data-screen="cat"]) .dock{display:none!important}
html.homeOn .lgRow,html.homeOn .moRow{display:none!important}
/* main titles: one line wherever possible (smaller, balanced if they must wrap) */
html{--sh-h1:clamp(20px,6.2vw,24px)!important}
html body #scrTokens h1{font-size:clamp(19px,5.6vw,22px)!important}
html body main .screen .hgroup h1,html body main .screen h1,html body .pfHd h1,html body #scrCat.cgOn h1{font-size:clamp(20px,6.2vw,24px)!important;line-height:1.15!important;letter-spacing:-.02em!important;text-wrap:balance}
/* language in the phone top bar (compact: code only) */
.utils .u.u:not(.tok):has(.lang){display:inline-flex!important}
.utils .u .lang span{display:none!important}
.utils .u .lang b{font-size:13px;letter-spacing:.04em}
/* top bar: hamburger (menu) + wordmark (→ Home) as separate targets */
.mobBurger{margin-right:0!important;padding:0 12px!important;min-width:44px;justify-content:center}
.mobWm{margin-right:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;background:none;border:0;color:var(--tp);font:700 17px/1 Inter,sans-serif;letter-spacing:-.01em;cursor:pointer;white-space:nowrap}
.mobWm em{font-style:italic;font-weight:400;color:var(--gold);margin-left:.28em}
}
/* hamburger is phone-only */
@media (min-width:761px){.mobBurger,.mobWm,.mobScrim{display:none!important}}
/* back to top on desktop: bottom-right, clear of the step bar */
@media (min-width:761px){.mobTop{position:fixed;right:24px;bottom:24px;z-index:60;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(245,244,240,.2);background:rgba(27,26,23,.92);backdrop-filter:blur(8px);color:var(--tp);cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s,border-color .2s}.mobTop.show{opacity:1;transform:none;pointer-events:auto}.mobTop:hover{border-color:var(--gold);color:var(--gold)}body[data-screen="work"]:not(.homeOn) .mobTop,body[data-screen="cat"] .mobTop{bottom:calc(var(--dock-h,52px) + var(--dock-margin,16px) + 16px)}html.homeOn .mobTop{bottom:24px!important}}
/* desktop ⇄ phone switch (dev) — phone view opens the app in a 390px frame (real media queries) */
.viewSw{position:fixed;left:50%;top:12px;right:auto;bottom:auto;transform:translateX(-50%);z-index:99999;box-shadow:0 8px 24px rgba(0,0,0,.45);display:flex;border:1px solid rgba(245,244,240,.2);border-radius:8px;overflow:hidden;background:#1b1a17;font:600 12px Inter,sans-serif}
.viewSw a{color:#B8B2A7;padding:9px 12px;text-decoration:none;min-height:36px;box-sizing:border-box}.viewSw a.on{background:var(--gold,#E5A82E);color:#1a1712}
@media (max-width:760px){.viewSw{display:none!important}}
@media (max-width:380px){
.pgrid,#scrSetup .pgrid,.sgrid,.dgrid.shGrid,.wdGrid,.mCard.cast.wdStep .wdGrid,.castGrid{gap:8px!important}
}

/* switch sits at the left of the top bar */
.utils>.viewSw{position:static!important;transform:none!important;margin:0 auto 0 16px!important;box-shadow:none;flex:0 0 auto;align-self:center}
@media (max-width:760px){.utils>.viewSw{display:none!important}}

/* Desktop | Phone switch — bottom of the sidebar (desktop) and the menu drawer (phone) */
aside{display:flex;flex-direction:column}
aside .viewSwM{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;padding:14px 8px 4px;border-top:1px solid var(--sbbd,rgba(245,244,240,.1));font:600 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ts)}
aside .viewSwM .viewSw{position:static!important;transform:none!important;display:flex!important;margin:0!important;box-shadow:none;border:1px solid rgba(245,244,240,.2);border-radius:8px;overflow:hidden}
aside .viewSwM .viewSw a{flex:1;min-height:34px;display:flex;align-items:center;justify-content:center;padding:0 8px;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--ts);text-decoration:none}
aside .viewSwM .viewSw a.on{background:rgba(229,168,46,.16);color:var(--gold)}
aside .viewSwM .viewSw a:not(.on):hover{color:var(--tp)}
@media (min-width:761px) and (max-width:1024px){aside .viewSwM>span{display:none}aside .viewSwM .viewSw{flex-direction:column}aside .viewSwM .viewSw a{font-size:10.5px;padding:0 2px}}
@media (max-width:760px){aside{bottom:0!important;height:100dvh!important}aside .viewSwM{flex-direction:row;align-items:center;justify-content:space-between;padding:14px 12px 4px}aside .viewSwM .viewSw a{min-height:40px;padding:0 14px;font-size:13px}}

aside .viewSwM>span{text-align:center}

/* phone fixes round 3 */
@media (max-width:760px){
.pfC .pfBd{height:auto!important;max-height:none!important}
.pfC .pfTry{position:relative;z-index:5}
.pfC[data-pf="1"] .pfIm{height:220px!important;min-height:0!important;flex:none!important}
#gateNote.gateNote,.gateNote{display:block!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important;transform:none!important;top:auto!important;bottom:calc(var(--dock-h) + var(--dock-margin) + 14px)!important;padding:12px 16px!important;font-size:14px!important;line-height:1.4!important;text-align:center;border-radius:8px!important}
.gateNote b{display:inline!important}
#scrSetup .moExp,#scrSetup .lgRow .lgExp,#scrSetup .moRow .moExp{display:none!important}
html body #scrSetup .pgrid .pcard.on .pf,html body #scrDetails .shGrid .pcard.on .pf{padding:10px 10px 10px!important}
.ottoPick{font-size:10px!important;padding:3px 7px!important}
}

/* phone: selected card keeps its photo — dark scrim + gold outline, no big gold block */
@media (max-width:760px){
html body #scrSetup .pgrid .pcard.on .pf,html body #scrDetails .shGrid .pcard.on .pf,html body .moModal .pcard.on .pf{background:linear-gradient(180deg,rgba(10,9,7,0),rgba(10,9,7,.88) 45%)!important;padding:28px 10px 10px!important}
html body #scrSetup .pgrid .pcard.on .pt,html body #scrDetails .shGrid .pcard.on .pt,html body .moModal .pcard.on .pt{color:var(--tp)!important}
html body #scrSetup .pgrid .pcard.on .pd,html body #scrDetails .shGrid .pcard.on .pd,html body .moModal .pcard.on .pd,html body #scrSetup .pgrid .pcard.on .pm,html body #scrDetails .shGrid .pcard.on .pm{color:var(--ts)!important}
html body #scrSetup .pgrid .pcard .pd,html body #scrDetails .shGrid .pcard .pd{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
html body #scrSetup .pgrid .pcard.on,html body #scrDetails .shGrid .pcard.on,html body .moModal .pcard.on{outline:2px solid var(--gold)!important;outline-offset:-2px!important;box-shadow:0 0 14px rgba(229,168,46,.22)!important}
html body #scrSetup .pgrid .pcard.on .ph,html body #scrDetails .shGrid .pcard.on .ph{height:100%!important;max-height:none!important;flex:1 1 auto!important}
}

/* phone: product windows stack in one column (quality card under the inputs, never beside) */
@media (max-width:760px){
.pfM .pfW1,.pfM .pfW2,.pfM .pfW3,.pfM [class^="pfW"]{grid-template-columns:minmax(0,1fr)!important;display:grid!important;gap:16px!important;width:100%!important}
.pfM .pfW1m,.pfM [class$="m"]{width:auto!important;min-width:0!important}
.pfM .pfFq{position:static!important;width:auto!important;margin:0!important;transform:none!important;order:2}
.pfM h2{font-size:26px!important;line-height:1.15!important;padding-right:48px}
.pfM .pfSub{font-size:14px!important}
.pfM .pfSrcG{grid-template-columns:minmax(0,1fr)!important;width:100%!important}
.pfM .pfSrc,.pfM .pfDrop{width:auto!important;min-height:0!important}
.pfM .pfFt{flex-direction:column!important;align-items:stretch!important;gap:10px!important}
.pfM .pfFt .cta,.pfM .pfFt .pfGo{width:100%!important;justify-content:center}
.pfM .pfFt .pfSkip{align-self:center}
.pfM .pfSl,.pfM .pfSlots{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:760px){:is(#scrStyle .lgRow,#scrSetup .moRow,#scrDetails .moRow) .lgExp{gap:10px!important;padding:0 10px 0 6px!important}:is(#scrStyle,#scrSetup,#scrDetails) .lgBd{min-width:40px!important;height:28px!important;font-size:14px!important;border-radius:8px!important}:is(#scrStyle,#scrSetup,#scrDetails) .lgExp .lgTx b{font-size:14px!important}:is(#scrStyle,#scrSetup,#scrDetails) .lgExp .lgTx small{display:none}:is(#scrStyle,#scrSetup,#scrDetails) .lgExp>svg{width:20px!important;height:20px!important}}

/* results (wrap) screen — phone */
@media (max-width:760px){
#scrWrap .wrTools{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:6px;padding:10px 0}
#scrWrap .wrTools button{flex-direction:column;justify-content:center;gap:4px;height:auto;min-height:56px;padding:6px 2px;border-radius:8px;font-size:10.5px;line-height:1.15;text-align:center;white-space:normal}
#scrWrap .wrTools button svg{width:18px;height:18px;flex:0 0 auto}
#scrWrap .wrTools button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scrWrap .rfBan{flex-wrap:nowrap;align-items:flex-start;gap:10px;padding:10px 12px;font-size:12.5px;line-height:1.45}
#scrWrap .rfBan .ic{margin-top:1px}
#scrWrap .rfBan button{margin-left:0;padding:6px 10px;font-size:11.5px;border-radius:8px;align-self:center}
#scrWrap .wrView{height:auto;aspect-ratio:3/4;max-height:62vh}
#scrWrap .wrThumbs .sh{width:64px}
#scrWrap .wrapActs .cta,#scrWrap .wrapActs .backb{width:100%;justify-content:center}
}
@media (max-width:400px){#scrWrap .wrTools{grid-template-columns:repeat(3,minmax(0,1fr))!important}#scrWrap .wrTools button{min-height:48px;flex-direction:row;gap:6px;font-size:11.5px}}
/* "More looks" / "More stagings·shots" popups → full-screen sheet on phone (was a narrow, clipped, see-through box) */
@media (max-width:760px){
html body .lgModal{padding:0!important;place-items:stretch!important;z-index:1200!important;opacity:1!important;filter:none!important}
html body .lgWin{width:100vw!important;height:100dvh!important;max-height:none!important;border-radius:0!important;border:0!important;box-shadow:none!important;background:#171513!important;opacity:1!important}
html body .lgHd{position:relative;flex-wrap:wrap!important;gap:12px!important;padding:14px var(--mob-g,16px) 12px!important}
html body .lgHd>div{flex:1 1 100%!important;padding-right:52px}
html body .lgHd h3{font-size:24px!important}html body .lgHd p{font-size:14px!important}
html body .lgX{position:absolute!important;top:10px;right:10px}
html body .lgFiltHost{flex:1 1 100%;min-width:0;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--mob-g,16px));padding:0 var(--mob-g,16px)}
html body .lgFiltHost::-webkit-scrollbar{display:none}
html body .lgFiltHost .lkFilt{width:max-content!important;flex-wrap:nowrap!important;overflow:visible!important}
html body .lgBody{overflow-x:hidden!important;padding:14px var(--mob-g,16px) calc(24px + env(safe-area-inset-bottom,0px))!important}
html body .lgBody .lkScroll{width:auto!important;margin:0!important;padding:0!important;overflow:visible!important}
html body .lgBody #lookMore{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-columns:auto!important;min-height:0!important;gap:10px!important;width:auto!important;opacity:1!important}
html body .lgBody #lookMore .pcard{min-width:0!important;width:auto!important}
html body .lgBody #lookMore .pcard .ph{aspect-ratio:4/5!important}
html body .moModal .moBody .moHold .pcard .ph{height:auto!important;flex:none!important;aspect-ratio:4/5!important}
}

/* demo product card: base in v2-democard.css; phone = pill on its own full-width row */
@media (max-width:760px){html body .pfTry.pfTryCard{max-width:none}html body .pfTry.pfTryCard .pfTryGo{min-height:46px}}
@media (max-width:360px){.pfTryFan{flex-basis:62px}.pfTryFan img{width:38px;height:44px}.pfTryFan img:nth-child(2){left:12px}.pfTryFan img:nth-child(3){left:24px}}

/* a11y (Oct 2026): 44px hit targets the audit found under 44 */
@media (max-width:760px){
aside .sbQuick .qbtn{min-height:44px}
button.it[data-ac]{min-height:44px}
.shActs button{min-height:44px}
.tk3Stp button{min-width:44px;min-height:44px}
}

/* Continue on phone: ONE bar for every step lives in v2-mobbar.css/.js. Demo notice keeps its own row in the page. */
@media (max-width:760px){
html body .pfNav{flex-wrap:wrap!important;gap:8px!important}
html body .pfNav .pfDemoSlot{flex:1 1 100%!important;order:-1;width:100%}
html body .pfNav .pfDemoSlot:empty{display:none}
html body .pfNav .pfDemoSlot .demoBn{width:100%!important;max-width:none!important;min-height:40px;justify-content:space-between;white-space:nowrap!important}
html body .pfNav .pfDemoSlot .demoBn .tx{display:none!important}
html body .pfNav .cta{min-height:50px!important;height:50px!important}
#scrReview .shBar,#scrWrap .shBar{position:sticky!important}
}
/* no "Explore more" on phone (Oct 2026): all options live in the page grid (v2-mob-all.js) */
@media (max-width:760px){
/* pull-down-to-close affordance on popups (v2-mob-gestures.js) */
html body .mOv.open .mCard::before{content:'';position:sticky;top:0;display:block;width:40px;height:4px;margin:-6px auto 6px;border-radius:2px;background:rgba(245,244,240,.25);z-index:3}
/* the sticky × has negative margins, which pulled the title/kicker up under the handle ("Step into the studio" struck through) */
html body .mOv.open .mCard>.mX+*{margin-top:12px!important}
.shLb .shBa img{transform-origin:center;touch-action:pinch-zoom}
html body :is(#scrStyle,#scrSetup,#scrDetails) :is(.lgExp,.moExp,.smBtn,.moModal,.lgModal),html body #lookAllHd,html body #lookMore{display:none!important}
}


/* "On a model" cast chip: never wider than the card — 3 faces max on narrow cards */
html body .pcard .ph .castStrip{max-width:calc(100% - 20px)!important;overflow:hidden}
@media (max-width:760px){html body .pcard .ph .castStrip .fc img:nth-child(n+4){display:none!important}html body .pcard .ph .castStrip .ct i{font-size:11.5px!important}html body .pcard .ph .castStrip .fc img{width:22px!important;height:22px!important;min-width:22px}}
/* sign-in email row: the input must be allowed to shrink, or Continue runs off a 320px screen */
#authOv .mIn input{min-width:0}