/* v2-shell.css — ONE stage-screen system (Oct 2026). Loaded last. Product / Staging / Look / Shots / Review share:
   header = top-left Back (40px outline) + centred title · footer = right-aligned Back (outline) + Continue (gold), 48px · cards 14px radius */
:root{--sh-btn-h:48px;--sh-btn-r:8px;--sh-top-h:40px;--sh-card-r:8px;--sh-h1:clamp(34px,3.4vw,52px)}
/* title */
.screen .hgroup h1,.pfHd h1{font-size:var(--sh-h1)!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.08!important}
/* top Back — same on every stage */
.stBack,.pfTopBack{height:var(--sh-top-h)!important;min-height:var(--sh-top-h)!important;padding:0 16px 0 12px!important;display:inline-flex!important;align-items:center!important;gap:7px!important;border-radius:8px!important;border:1px solid rgba(245,244,240,.24)!important;background:rgba(20,18,14,.45)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--tp)!important;font-family:inherit!important;font-size:14px!important;font-weight:600!important;line-height:1!important;cursor:pointer;box-shadow:none!important}
.stBack:hover,.pfTopBack:hover{border-color:rgba(245,244,240,.5)!important;background:rgba(245,244,240,.08)!important}
.stBack svg,.pfTopBack svg{width:15px!important;height:15px!important}
/* footer actions */
.pacts,.lgRow,.pfNav{display:flex!important;align-items:center!important;justify-content:flex-end;gap:12px!important}
.pacts>.backb,.lgRow>.backb,.pacts>.cta,.lgRow>.cta,.pfNav .backb,.pfNav .cta,.pfNav .pfBack,.pfNav .pfNext{height:var(--sh-btn-h)!important;min-height:var(--sh-btn-h)!important;max-height:var(--sh-btn-h)!important;padding:0 24px!important;margin:0!important;width:auto!important;border-radius:var(--sh-btn-r)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-family:inherit!important;font-size:14px!important;font-weight:700!important;line-height:1!important;flex:0 0 auto!important;box-sizing:border-box}
.pacts>.backb,.lgRow>.backb,.pfNav .backb,.pfNav .pfBack{background:rgba(245,244,240,.04)!important;border:1px solid rgba(245,244,240,.25)!important;color:var(--tp)!important;font-weight:600!important;box-shadow:none!important}
.pacts>.backb:hover,.lgRow>.backb:hover,.pfNav .backb:hover,.pfNav .pfBack:hover{background:rgba(245,244,240,.08)!important;border-color:rgba(245,244,240,.45)!important}
.pacts>.cta,.lgRow>.cta,.pfNav .cta,.pfNav .pfNext{background:linear-gradient(120deg,var(--gold),var(--gold-b))!important;border:0!important;color:#242424!important;box-shadow:0 8px 26px rgba(229,168,46,.3)!important;min-width:150px}
.pacts>.cta:hover,.lgRow>.cta:hover,.pfNav .cta:hover{filter:brightness(1.05)}
.pacts>.cta:disabled,.lgRow>.cta:disabled,.pfNav .cta:disabled{opacity:.45;box-shadow:none!important}
/* same chevrons everywhere (only where the button has no icon of its own) */
.pacts>.backb:not(:has(svg))::before,.lgRow>.backb:not(:has(svg))::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.5 4.5-5.5 5.5 5.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.5 4.5-5.5 5.5 5.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat}
.pacts>.cta:not(:has(svg))::after,.lgRow>.cta:not(:has(svg))::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
/* extras in the footer row (summary, explore strip) take the left side */
.pacts>:not(.backb):not(.cta){margin-right:auto}
/* cards */
.pgrid .pcard,.pfC{border-radius:var(--sh-card-r)!important}
.lgRow{gap:12px!important}.lgRow>:not(.backb):not(.cta){margin-right:auto;flex:1 1 auto;min-width:0}
/* rows with a strip (Look "Explore", more-looks rows): buttons stretch to the row height, as before */
.lgRow{align-items:stretch!important}
.lgRow>.backb,.lgRow>.cta,#scrStyle .lgRow #styleBack,#scrStyle .lgRow #styleNext{height:auto!important;max-height:none!important;min-height:56px!important;align-self:stretch!important;border-radius:var(--sh-btn-r)!important;font-size:15px!important;padding:0 28px!important}
.lgRow>.backb,#scrStyle .lgRow #styleBack{min-width:128px!important}
.lgRow>.cta,#scrStyle .lgRow #styleNext{min-width:160px!important}

/* app-wide scrollbar (theme): thin gold thumb inset from rounded corners, no arrow buttons.
   Chrome ignores ::-webkit-scrollbar when scrollbar-color is set (and then draws Windows arrows) → reset it where webkit styling exists. */
@supports selector(::-webkit-scrollbar){html body *,html{scrollbar-color:auto!important}} /* width untouched: keeps scrollbar-width:none hiders */
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-track{background:transparent;margin:14px 0}
::-webkit-scrollbar-thumb{background:rgba(229,168,46,.38);border-radius:8px;border:3px solid transparent;background-clip:padding-box;min-height:40px}
::-webkit-scrollbar-thumb:hover{background:rgba(229,168,46,.6);background-clip:padding-box}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){html body *,html{scrollbar-width:thin;scrollbar-color:rgba(229,168,46,.38) transparent}}