/* ============================================================================
PRIVATE SELLER — MOBILE CARDS REDESIGN v2 (premium refinement)
----------------------------------------------------------------------------
Scope: ONLY @media (max-width: 768px). Desktop is untouched on purpose.
v2 changes from v1:
• Selectors prefixed with #sjStep0 so they ALWAYS win the cascade — no more
fighting the :nth-child(even) overrides in sell-journey.css.
• Title
kept visible → "Sell on your terms." / "Outperform on ours."
wraps cleanly on two short lines (no more "terms.Outperform" jam).
• Icon: small 44px glyph chip pinned top-right with absolute positioning.
The complex inner SVG is constrained to a compact 26px so it reads as a
single emblem, not a feature illustration.
• Tag pills: text-transform stripped (Title-case now reads tighter), font
and padding shrunk, gap tightened → 3–4 chips fit in ≤ 2 rows.
• Border 1.5px solid rgba(15,23,42,0.14) → visible immediately, no need to
hover for it to appear.
• Hides .sj-tc-desc-extra long marketing copy (only the short tagline shows).
• Scramble heading area locked with min-height + contain:layout so the JS
fallback can't shake the cards below.
Load order: MUST come AFTER sell-journey.css (already true in Index.cshtml).
============================================================================ */
/* ────────────────────────────────────────────────────────────────────────────
MOBILE BREAKPOINT
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* ════════════════════════════════════════════════════════════════════
HORIZONTAL-MOVEMENT LOCK (added to stop the seller-journey cards
drifting / clipping side-to-side on phones)
--------------------------------------------------------------------
Symptom: on the List tab, Step-0 (heading + the three role cards)
could be nudged horizontally — the heading clipped on the right in
one render and the card titles clipped on the left in the next.
Cause: a combination of (a) the heading's translateX slide-in
re-firing on every tab activation, (b) decorative orbs whose drift
extended the paint box, and (c) no explicit overflow-x containment
on the .sj-step scroll frame itself (only on .sj-step0-inner).
This block constrains only the INNER CONTENT of Step-0 to the panel
width so its own children can't push past the edge. The carousel
track and panels are deliberately left alone — see the note below.
════════════════════════════════════════════════════════════════════ */
/* IMPORTANT: do NOT touch .sj-scroll-track or the #sjStep0 panel width
here. The track is a flex row sized `calc(panels * 100%)` and slid
sideways to reveal one panel at a time; constraining its width or
clipping it collapses every panel into one column (the bug that broke
this view). The OUTER .sj-track-viewport already has `overflow:hidden`
in the base stylesheet and is the single element responsible for
clipping the carousel — we leave that to it.
We only constrain the INNER CONTENT of Step-0 so its own children
(heading, card column) can't push past the panel edge. */
#sjStep0 .sj-step0-inner,
#sjStep0 .sj-step0-theater,
#sjStep0 .sj-theater-hero,
#sjStep0 .sj-theater-cards {
max-width: 100% !important;
overflow-x: clip !important; /* falls back to hidden via the rule below */
}
/* Fallback for engines without `overflow: clip` (older iOS Safari):
hidden still prevents the sideways pan. NOTE: .sj-theater-cards is
deliberately excluded here — it carries `overflow-y: visible`, and
`overflow-x: hidden` would coerce that to `auto` and spawn a stray
inner vertical scrollbar. Its parents clip the horizontal axis, so
the cards column is already protected. */
@supports not (overflow: clip) {
#sjStep0 .sj-step0-inner,
#sjStep0 .sj-step0-theater,
#sjStep0 .sj-theater-hero {
overflow-x: hidden !important;
}
}
/* Block horizontal finger-panning of the Step-0 panel content while
still allowing normal vertical scroll. (No transform override here —
the carousel relies on transforms on the track and panels.) */
#sjStep0 {
touch-action: pan-y !important;
}
/* Heading: on mobile, NEVER slide in horizontally. The desktop
`sjScrambleSlideIn` starts at translateX(60px); re-running it on each
List-tab click made the whole hero appear to shoot in from the right
and settle off-centre. Swap it for an in-place fade so re-activating
the tab is visually stable. */
#sjStep0 .sj-scramble-text,
#sjStep0 .sj-heading-main-row,
#sjStep0 .sj-theater-heading {
animation: psmrHeadingFade 0.35s ease both !important;
transform: none !important;
}
@keyframes psmrHeadingFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ── Hide the long marketing copy on mobile ──────────────────────── */
#sjStep0 .sj-tc-desc-extra {
display: none !important;
}
/* ── Container: clean stacked column with cushioned gutters ──────── */
#sjStep0 .sj-theater-cards,
#sjStep0 .sj-premium-cards {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: 4px 14px 14px !important;
margin: 0 auto !important;
max-width: 560px !important;
width: 100% !important;
grid-template-columns: none !important;
overflow-y: visible !important;
align-items: stretch !important;
}
/* ── Card chrome — full coloured 2px border per brand, visible from the start ── */
#sjStep0 .sj-theater-cards .sj-theater-card,
#sjStep0 .sj-premium-cards .sj-theater-card {
position: relative !important;
width: 100% !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
flex: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
animation: psmrFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
border-radius: 18px !important;
overflow: hidden !important;
background: #FFFFFF !important;
border: 2px solid var(--psmr-accent, #F58220) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15, 23, 42, 0.06) !important;
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease !important;
}
/* Staggered entrance */
#sjStep0 .sj-theater-cards .sj-theater-card:nth-child(1),
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(1) {
animation-delay: 0.05s !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card:nth-child(2),
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(2) {
animation-delay: 0.12s !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card:nth-child(3),
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(3) {
animation-delay: 0.19s !important;
}
@keyframes psmrFadeUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Active state */
#sjStep0 .sj-theater-cards .sj-theater-card:active,
#sjStep0 .sj-premium-cards .sj-theater-card:active {
transform: scale(0.985) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
/* Top accent stripe REMOVED — the full card border now carries the brand colour.
Hide the existing ::before from sell-journey.css just in case. */
#sjStep0 .sj-theater-cards .sj-theater-card::before,
#sjStep0 .sj-premium-cards .sj-theater-card::before {
display: none !important;
content: none !important;
}
/* Per-card accents */
#sjStep0 .sj-theater-card.sj-tc--private {
--psmr-accent: #F58220;
--psmr-accent-deep: #B85B12;
--psmr-accent-soft: rgba(245, 130, 32, 0.10);
--psmr-accent-softer: rgba(245, 130, 32, 0.04);
}
#sjStep0 .sj-theater-card.sj-tc--agent {
--psmr-accent: #2BA7DD;
--psmr-accent-deep: #1A6E94;
--psmr-accent-soft: rgba(43, 167, 221, 0.10);
--psmr-accent-softer: rgba(43, 167, 221, 0.04);
}
#sjStep0 .sj-theater-card.sj-tc--agency {
--psmr-accent: #0ABFBC;
--psmr-accent-deep: #0A7F7C;
--psmr-accent-soft: rgba(10, 191, 188, 0.10);
--psmr-accent-softer: rgba(10, 191, 188, 0.04);
}
/* ── Inner: single-column flex (kill the old 128px-icon grid) ────── */
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-inner,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
gap: 0 !important;
padding: 16px 16px 14px 16px !important;
min-height: 0 !important;
overflow: visible !important;
}
/* Neutralise the existing even/odd column flip */
#sjStep0 .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
grid-template-columns: none !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-icon-wrap,
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-icon-wrap,
#sjStep0 .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-label,
#sjStep0 .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-title,
#sjStep0 .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-desc,
#sjStep0 .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-tags,
#sjStep0 .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-cta,
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-icon-wrap,
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-label,
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-title,
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-desc,
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-tags,
#sjStep0 .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-cta {
grid-column: auto !important;
grid-row: auto !important;
}
/* ── Icon: small 44px glyph chip pinned top-right ─────────────────── */
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap {
position: absolute !important;
top: 14px !important;
right: 14px !important;
left: auto !important;
bottom: auto !important;
grid-column: unset !important;
grid-row: unset !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 8px !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, var(--psmr-accent-soft) 0%, var(--psmr-accent-softer) 100%) !important;
border: 1px solid var(--psmr-accent-soft) !important;
align-self: auto !important;
z-index: 1 !important;
}
/* Constrain the SVG to a small, glyph-sized footprint */
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
width: 26px !important;
height: 26px !important;
max-width: 26px !important;
max-height: 26px !important;
flex: none !important;
}
/* ── Label: kerned eyebrow with leading status dot ────────────────── */
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-label,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-label {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
margin: 2px 60px 0 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
font-size: 0.66rem !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--psmr-accent) !important;
grid-column: unset !important;
grid-row: unset !important;
line-height: 1 !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-label::before,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-label::before {
content: '' !important;
width: 6px !important;
height: 6px !important;
border-radius: 999px !important;
background: var(--psmr-accent) !important;
box-shadow: 0 0 0 3px var(--psmr-accent-soft) !important;
flex-shrink: 0 !important;
display: block !important;
position: static !important;
}
/* ── Title: keep the natural
for two clean lines ─────────────── */
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-title,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-title {
margin: 10px 60px 0 0 !important;
padding: 0 !important;
font-size: 1.12rem !important;
line-height: 1.22 !important;
font-weight: 800 !important;
color: #1A1D20 !important;
letter-spacing: -0.018em !important;
text-align: left !important;
grid-column: unset !important;
grid-row: unset !important;
}
/* KEEP the
visible — two short, clean lines look better than a
single wrapped line and avoid the "terms.Outperform" jam */
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-title br,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-title br {
display: inline !important;
}
/* ── Description: short tagline only (extra hidden above) ─────────── */
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-desc,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-desc {
margin: 8px 0 0 0 !important;
padding: 0 !important;
font-size: 0.82rem !important;
line-height: 1.45 !important;
color: #475569 !important;
text-align: left !important;
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
max-height: none !important;
grid-column: unset !important;
grid-row: unset !important;
}
/* ── Tag pills: bulletproof inline chips, ≤ 2 rows max ───────────── */
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-tags,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-tags {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: flex-start !important;
gap: 5px !important;
margin: 10px 0 0 0 !important;
padding: 0 !important;
grid-column: unset !important;
grid-row: unset !important;
max-height: calc(2 * 1.7em + 6px) !important; /* clamp to 2 rows */
overflow: hidden !important;
width: 100% !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-tags span,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-tags span {
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important; /* lock to content size — never stretch */
width: auto !important;
max-width: max-content !important;
min-width: 0 !important;
padding: 2px 8px !important;
border-radius: 999px !important;
background: #F1F5F9 !important;
color: #475569 !important;
font-size: 0.56rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
line-height: 1.4 !important;
white-space: nowrap !important;
opacity: 1 !important;
transform: none !important;
border: 1px solid transparent !important;
}
/* Per-brand tag tint */
#sjStep0 .sj-theater-card.sj-tc--private .sj-tc-tags span {
background: var(--psmr-accent-soft) !important;
color: var(--psmr-accent-deep) !important;
}
#sjStep0 .sj-theater-card.sj-tc--agent .sj-tc-tags span {
background: var(--psmr-accent-soft) !important;
color: var(--psmr-accent-deep) !important;
}
#sjStep0 .sj-theater-card.sj-tc--agency .sj-tc-tags span {
background: var(--psmr-accent-soft) !important;
color: var(--psmr-accent-deep) !important;
}
/* ── CTA: full-width pill, 48px touch target ─────────────────────── */
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-cta,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-cta {
display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
width: 100% !important;
margin: 12px 0 0 0 !important;
padding: 13px 18px !important;
border-radius: 14px !important;
background: var(--psmr-accent) !important;
color: #FFFFFF !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
letter-spacing: -0.005em !important;
border: none !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 18px color-mix(in oklab, var(--psmr-accent), transparent 65%) !important;
opacity: 1 !important;
grid-column: unset !important;
grid-row: unset !important;
min-height: 48px !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-cta span,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-cta span {
color: #FFFFFF !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-cta .sj-cta-arrow,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-cta .sj-cta-arrow {
color: #FFFFFF !important;
font-size: 1.25rem !important;
line-height: 1 !important;
opacity: 0.95 !important;
transition: transform 0.2s ease !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card:hover .sj-tc-cta .sj-cta-arrow,
#sjStep0 .sj-theater-cards .sj-theater-card:focus-within .sj-tc-cta .sj-cta-arrow,
#sjStep0 .sj-premium-cards .sj-theater-card:hover .sj-tc-cta .sj-cta-arrow,
#sjStep0 .sj-premium-cards .sj-theater-card:focus-within .sj-tc-cta .sj-cta-arrow {
transform: translateX(3px) !important;
}
/* ── Kill desktop hover/glass flourishes on mobile ─────────────────── */
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-glass,
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-mouse-glow,
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-border-shimmer,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-glass,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-mouse-glow,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-border-shimmer {
display: none !important;
}
/* ── Hero spacing & scramble heading anti-shift (belt + braces) ──── */
#sjStep0 .sj-theater-hero {
padding: 14px 16px 10px !important;
}
#sjStep0 .sj-theater-heading,
#sjStep0 .sj-step0-heading {
min-height: 2.6em !important;
contain: layout style !important;
}
#sjStep0 .sj-heading-main-row {
min-height: 2.6em !important;
align-items: center !important;
}
#sjStep0 .sj-scramble-text {
display: inline-block !important;
min-height: 1.2em !important;
}
#sjStep0 .sj-scramble-text .scramble-char,
#sjStep0 .sj-scramble-text .dud {
animation: none !important;
transition: none !important;
}
}
/* ────────────────────────────────────────────────────────────────────────────
VERY SMALL PHONES (≤ 380px) — final compression pass
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
#sjStep0 .sj-theater-cards,
#sjStep0 .sj-premium-cards {
padding: 4px 10px 12px !important;
gap: 10px !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-inner,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-inner {
padding: 14px 14px 12px 14px !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
max-height: 40px !important;
min-height: 40px !important;
top: 12px !important;
right: 12px !important;
padding: 7px !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-title,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-title {
font-size: 1.04rem !important;
margin-right: 54px !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-label,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-label {
margin-right: 54px !important;
font-size: 0.62rem !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-desc,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-desc {
font-size: 0.78rem !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-tags span,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-tags span {
font-size: 0.54rem !important;
padding: 2px 7px !important;
}
#sjStep0 .sj-theater-cards .sj-theater-card .sj-tc-cta,
#sjStep0 .sj-premium-cards .sj-theater-card .sj-tc-cta {
padding: 12px 16px !important;
font-size: 0.88rem !important;
}
}
/* ── Honour reduced-motion preferences ──────────────────────────────────── */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
#sjStep0 .sj-theater-cards .sj-theater-card,
#sjStep0 .sj-premium-cards .sj-theater-card {
animation: none !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
MOBILE REDESIGN v2 — STICKY-BOTTOM NAV · ANCHORED DROPDOWN · SCENE-3 SETTERS
----------------------------------------------------------------------------
This file loads LAST among the seller stylesheets, so the rules below win
over private-seller.css and private-seller-mobile-fixes.css by source order
at equal specificity.
THREE FIXES:
1. Back/Continue bar is pinned to the BOTTOM of every scene and STAYS there
(position: sticky). The companion JS (private-seller-mobile-redesign.js)
pins each scene's scroll container to a definite pixel height, because
on iOS the % height chain collapses and the bar would otherwise land
mid-screen.
2. The Scene-2 property-type dropdown opens ABOVE the bar (never split by
it) and the WHOLE trigger row — caret included — is one tap zone.
3. Scene-3's "live house" silhouette is shorter, freeing vertical room so
the dimension setter tiles can grow for longer translated labels.
════════════════════════════════════════════════════════════════════════ */
/* ── Scene-3 silhouette: globally a touch shorter (all widths) so the metric
setters get more room — matters most for long translated labels. ─────── */
.ps-scene#psScene2 .ps-silhouette-stage,
.ps-scene-dna .ps-silhouette-stage {
min-height: clamp(80px, 11vh, 130px) !important;
max-height: clamp(96px, 13vh, 150px) !important;
}
@media (max-width: 768px) {
/* ───────────────────────────────────────────────────────────────────
1. SCROLL CONTAINERS — the element that owns the Back/Continue bar
becomes a definite-height flex column that scrolls internally; the
bar sticks to its bottom. JS pins the pixel height.
─────────────────────────────────────────────────────────────────── */
/* THE SINGLE SOURCE OF TRUTH for Scene 1 & 2 mobile layout.
.ps-left is a DEFINITE-HEIGHT flex column that does NOT scroll itself:
• header chrome (breadcrumb…subtitle, dropdown) is pinned (flex:0 0 auto)
• exactly ONE inner region scrolls (the category grid / banner area)
• the Back/Continue nav is a pinned footer (flex:0 0 auto)
This replaces the old "scroll .ps-left + hide scrollbar + JS pixel-pin"
approach, which left the nav floating mid-screen. */
.ps-scene#psScene0 > .ps-left,
.ps-scene#psScene1 > .ps-left {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
-webkit-overflow-scrolling: touch !important;
position: relative !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
}
/* Pinned header chrome — never scrolls, never shrinks. */
.ps-scene#psScene0 > .ps-left > .ps-breadcrumb,
.ps-scene#psScene0 > .ps-left > .ps-progress,
.ps-scene#psScene0 > .ps-left > .ps-scene-label,
.ps-scene#psScene0 > .ps-left > .ps-question,
.ps-scene#psScene0 > .ps-left > .ps-subtitle,
.ps-scene#psScene1 > .ps-left > .ps-breadcrumb,
.ps-scene#psScene1 > .ps-left > .ps-progress,
.ps-scene#psScene1 > .ps-left > .ps-scene-label,
.ps-scene#psScene1 > .ps-left > .ps-question,
.ps-scene#psScene1 > .ps-left > .ps-subtitle,
.ps-scene#psScene1 > .ps-left > .ps-subtype-select-wrap {
flex: 0 0 auto !important;
}
/* The ONE scrolling body region — WITH a visible scrollbar, as requested. */
.ps-scene#psScene0 > .ps-left > .ps-cat-grid,
.ps-scene#psScene1 > .ps-left > .ps-subtype-banner {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(245, 130, 32, 0.55) rgba(15, 23, 42, 0.06) !important;
scroll-padding-bottom: 8px;
padding-right: 4px !important;
}
.ps-scene#psScene0 > .ps-left > .ps-cat-grid::-webkit-scrollbar,
.ps-scene#psScene1 > .ps-left > .ps-subtype-banner::-webkit-scrollbar {
display: block !important;
width: 7px !important;
}
.ps-scene#psScene0 > .ps-left > .ps-cat-grid::-webkit-scrollbar-track,
.ps-scene#psScene1 > .ps-left > .ps-subtype-banner::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.05) !important;
border-radius: 8px !important;
}
.ps-scene#psScene0 > .ps-left > .ps-cat-grid::-webkit-scrollbar-thumb,
.ps-scene#psScene1 > .ps-left > .ps-subtype-banner::-webkit-scrollbar-thumb {
background: rgba(245, 130, 32, 0.55) !important;
border-radius: 8px !important;
}
.ps-scene#psScene0 > .ps-left > .ps-cat-grid::-webkit-scrollbar-thumb:hover,
.ps-scene#psScene1 > .ps-left > .ps-subtype-banner::-webkit-scrollbar-thumb:hover {
background: rgba(245, 130, 32, 0.8) !important;
}
/* Scene 3 — the SCENE is the column (its nav `.ps-nav-dna` is a scene
child, sibling of .ps-left / .ps-right). */
.ps-scene#psScene2.ps-scene-dna {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
}
.ps-scene#psScene2 > .ps-dna-left {
flex: 1 1 auto !important;
min-height: 0 !important;
}
/* Body regions grow to fill the column so the bar is pushed to the very
bottom even when content is short. */
.ps-scene#psScene0 > .ps-left > .ps-cat-grid {
flex: 1 1 auto !important;
min-height: 0 !important;
}
.ps-scene#psScene1 > .ps-left > .ps-subtype-banner {
flex: 1 1 auto !important;
min-height: 0 !important;
}
/* ───────────────────────────────────────────────────────────────────
SCENE 1 (psScene0) — PERFORMANCE: strip per-card animation/hover work.
On touch there is no hover, so these effects only cost paint/layout
(the long "style/layout/paint" frames in the trace) without any UX
benefit. We:
• kill transitions/animations on the cards and their inner bits,
• neutralise the hover lift / wash (moot on touch),
• isolate each card's paint so selecting/scrolling one card doesn't
repaint the whole grid,
…while KEEPING the active (selected) colour fully intact — just applied
instantly instead of animated, with a cheaper ring shadow than the big
blurred one.
─────────────────────────────────────────────────────────────────── */
.ps-scene#psScene0 .ps-cat-card,
.ps-scene#psScene0 .ps-cat-card .ps-cat-icon,
.ps-scene#psScene0 .ps-cat-card .ps-cat-name,
.ps-scene#psScene0 .ps-cat-card .ps-cat-meta,
.ps-scene#psScene0 .ps-cat-card::before,
.ps-scene#psScene0 .ps-cat-card::after {
transition: none !important;
animation: none !important;
}
.ps-scene#psScene0 .ps-cat-card {
contain: layout paint;
will-change: auto !important;
}
/* No hover lift/wash on touch. */
.ps-scene#psScene0 .ps-cat-card:hover {
transform: none !important;
box-shadow: none !important;
border-color: rgba(0, 0, 0, 0.06) !important;
}
.ps-scene#psScene0 .ps-cat-card:hover .ps-cat-icon {
transform: none !important;
box-shadow: none !important;
}
.ps-scene#psScene0 .ps-cat-card:hover::before,
.ps-scene#psScene0 .ps-cat-card:hover::after {
opacity: 0 !important;
}
/* ACTIVE / SELECTED — colour preserved, applied instantly, with a
lightweight ring instead of a large blurred shadow. */
.ps-scene#psScene0 .ps-cat-card.selected {
border-color: var(--sj-orange, #F58220) !important;
box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.22) !important;
}
.ps-scene#psScene0 .ps-cat-card.selected::before {
opacity: 1 !important;
}
.ps-scene#psScene0 .ps-cat-card.selected .ps-cat-icon {
background: var(--sj-orange, #F58220) !important;
color: #fff !important;
box-shadow: none !important;
}
.ps-scene#psScene0 .ps-cat-card.selected .ps-cat-name {
color: var(--sj-orange-dark, #C2410C) !important;
}
/* ───────────────────────────────────────────────────────────────────
2. STICKY BOTTOM NAV — consistent across all three scenes.
─────────────────────────────────────────────────────────────────── */
.ps-scene#psScene0 > .ps-left > .ps-nav,
.ps-scene#psScene1 > .ps-left > .ps-nav,
.ps-scene#psScene2 > .ps-nav-dna,
.ps-scene-dna > .ps-nav-dna {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
z-index: 40 !important; /* below an open dropdown (9000) */
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 10px 0 max(10px, env(safe-area-inset-bottom)) !important;
background: #ffffff !important;
border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
box-shadow: 0 -10px 18px -12px rgba(15, 23, 42, 0.22) !important;
}
/* NAV-AT-BOTTOM FIX (Scenes 1 & 2). The nav lives INSIDE .ps-left (unlike the
DNA scene, where it's a scene-level child). .ps-left fills the scene height,
but its body region — the category grid on Scene 1, the fixed-aspect subtype
banner on Scene 2 — doesn't always grow to consume the slack, so the nav
floated mid-card. `margin-top:auto` makes the nav absorb ALL remaining
vertical space in the flex column, pinning it to the very bottom. Per the
flexbox spec an auto margin claims free space BEFORE flex-grow, so this wins
regardless of the body's flex settings; and when content overflows (Scene 1's
full category list) there is no positive free space, the auto margin resolves
to 0, the grid scrolls, and the nav still sits at the bottom. The longhand
beats the `margin:0` shorthand above (same specificity, declared later). */
.ps-scene#psScene0 > .ps-left > .ps-nav,
.ps-scene#psScene1 > .ps-left > .ps-nav {
margin-top: auto !important;
}
/* THE "<481px pushes the buttons up" FIX. Legacy rules (private-seller.css
@media ≤480 lines ~9699/9799, plus the generic `.ps-scene > .ps-left`)
add `padding-bottom: calc(80px + safe-area)` to .ps-left to "reserve space
above the pinned nav" — a leftover from when the nav was fixed/sticky
OUTSIDE the flow. The nav is now an in-flow flex footer pushed down with
margin-top:auto, so that bottom padding just shoves it UP by ~80px on
phones ≤480px (fine at 487px, broken below 481px). Zero it for Scenes 1 &
2; the nav supplies its own bottom + safe-area padding. Same specificity as
the ≤480 rules but in the last-loaded stylesheet, so it wins by source
order. Deliberately does NOT touch psScene2/.ps-dna-left (DNA nav is a
scene-level child and keeps its own scroll reserve). */
.ps-scene#psScene0 > .ps-left,
.ps-scene#psScene1 > .ps-left {
padding-bottom: 0 !important;
}
/* Scene-3 nudge sits between the two buttons; keep it from forcing height */
.ps-scene#psScene2 > .ps-nav-dna .ps-dna-validation-nudge {
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* ───────────────────────────────────────────────────────────────────
3. ANCHORED DROPDOWN (Scene 2) — opens ABOVE the bar, never split.
We override the older position:fixed approach (which was trapped by
the carousel's translateX transform) with a plain absolute panel
under the trigger, capped to fit in the visible area above the bar.
─────────────────────────────────────────────────────────────────── */
.ps-scene#psScene1 .ps-subtype-anchored-panel,
.ps-subtype-anchored-panel {
position: absolute !important;
top: calc(100% + 6px) !important;
bottom: auto !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
max-height: var(--ps-panel-maxh, 280px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
z-index: 9000 !important; /* decisively above the nav (40) */
}
/* When there's more room above the trigger, open upward. */
.ps-subtype-anchored-panel.opens-up {
top: auto !important;
bottom: calc(100% + 6px) !important;
}
/* Raise the wrap into its own stacking context above the nav so the panel
overlays the bar — works WITHOUT :has(), so older iOS WebKit is fine. */
.ps-subtype-select-wrap.ps-subtype-open {
position: relative !important;
z-index: 9000 !important;
}
/* While the dropdown is open, let the panel escape the pane's clip so the
full option list shows (it's capped to fit, so this is just a safety).
The scene-id selectors are required so this beats the
`.ps-scene#psScene1 > .ps-left { overflow:hidden }` rule above (which has
higher specificity than a bare `.ps-left.ps-subtype-dropdown-open`). */
.ps-scene#psScene0 > .ps-left.ps-subtype-dropdown-open,
.ps-scene#psScene1 > .ps-left.ps-subtype-dropdown-open,
.ps-left.ps-subtype-dropdown-open,
.ps-scene.ps-subtype-dropdown-open,
.ps-scene-dna.ps-subtype-dropdown-open {
overflow: visible !important;
}
/* WHOLE TRIGGER ROW IS ONE TAP ZONE — caret included.
The inner label + caret are pointer-events:none so every tap lands on
the trigger; the trigger itself stays interactive. Fixes "tapping the
arrow does nothing". */
.ps-subtype-trigger {
pointer-events: auto !important;
touch-action: manipulation !important;
cursor: pointer !important;
min-height: 54px !important;
-webkit-tap-highlight-color: rgba(245, 130, 32, 0.10) !important;
}
.ps-subtype-trigger-label,
.ps-subtype-trigger-caret {
pointer-events: none !important;
}
/* Give the caret a comfortable hit footprint within the trigger. */
.ps-subtype-trigger-caret {
padding-left: 8px !important;
font-size: 1.05rem !important;
}
/* ───────────────────────────────────────────────────────────────────
4. SCENE-3 SETTERS — shorter silhouette + setter labels that wrap and
grow (instead of truncating) for longer translated words.
─────────────────────────────────────────────────────────────────── */
.ps-scene#psScene2 .ps-silhouette-stage,
.ps-scene-dna .ps-silhouette-stage {
min-height: 84px !important;
max-height: 116px !important;
height: auto !important;
aspect-ratio: auto !important;
margin-bottom: 8px !important;
flex: 0 0 auto !important;
}
.ps-scene#psScene2 .ps-silhouette-caption,
.ps-scene-dna .ps-silhouette-caption {
margin-top: 1px !important;
}
/* Setter tiles grow with their content; labels wrap to a second line. */
.ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile,
.ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile {
height: auto !important;
min-height: 0 !important;
}
.ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label,
.ps-scene-dna .ps-dna-panel-metrics .ps-metric-tile .ps-slider-label,
.ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-dna-label,
.ps-scene#psScene2 .ps-dna-panel-metrics .ps-metric-tile .ps-slider-label {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.2 !important;
}
/* ── Advisory "seems unusually small" size warning — amber, not error red,
so it reads as a soft "please verify" rather than a hard block. ───── */
.ps-size-hint--fix.ps-size-hint--warn {
color: #B45309 !important; /* amber-700 */
font-weight: 600 !important;
}
.ps-size-hint--fix.ps-size-hint--warn i {
color: #F59E0B !important; /* amber-500 */
margin-right: 4px !important;
}
.ps-metric-tile--below-min {
box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, 0.55) !important;
border-radius: 14px !important;
}
}
/* The advisory warning hint styling is harmless at all widths. */
.ps-size-hint--fix.ps-size-hint--warn {
color: #B45309;
font-weight: 600;
font-size: 0.74rem;
margin-top: 4px;
}
/* ============================================================================
SCENE 1 (psScene0) — DESKTOP performance trim (≥769px)
----------------------------------------------------------------------------
The category cards on desktop animated `transition: all`, a radial hover
"wash" (::before opacity), and icon transitions — repaint-heavy on hover and
on selection. Per request we REDUCE (not remove) the motion on large screens:
keep a light, fast border+shadow hover and the full selected colour, but drop
the expensive all-property transitions, the hover wash, and any transform.
Paint is isolated per card so hovering/selecting one doesn't repaint the grid.
============================================================================ */
@media (min-width: 769px) {
.ps-scene#psScene0 .ps-cat-card {
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
contain: layout paint;
will-change: auto !important;
}
.ps-scene#psScene0 .ps-cat-card .ps-cat-icon {
transition: background-color 0.15s ease, color 0.15s ease !important;
}
.ps-scene#psScene0 .ps-cat-card .ps-cat-name,
.ps-scene#psScene0 .ps-cat-card .ps-cat-meta {
transition: color 0.15s ease !important;
}
/* Drop the radial hover wash + any hover lift; keep a light hover cue. */
.ps-scene#psScene0 .ps-cat-card:hover::before,
.ps-scene#psScene0 .ps-cat-card:hover::after {
opacity: 0 !important;
}
.ps-scene#psScene0 .ps-cat-card:hover {
transform: none !important;
border-color: rgba(245, 130, 32, 0.45) !important;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}
.ps-scene#psScene0 .ps-cat-card:hover .ps-cat-icon {
transform: none !important;
}
/* Selected (active) colour preserved in full — just not animated. */
.ps-scene#psScene0 .ps-cat-card.selected {
border-color: var(--sj-orange, #F58220) !important;
box-shadow: 0 4px 16px rgba(245, 130, 32, 0.18) !important;
}
.ps-scene#psScene0 .ps-cat-card.selected::before {
opacity: 1 !important;
}
.ps-scene#psScene0 .ps-cat-card.selected .ps-cat-icon {
background: var(--sj-orange, #F58220) !important;
color: #fff !important;
}
}