npm - @primestyleai/tryon - Versions diffs - 5.10.99 → 5.10.101 - Mend

@primestyleai/tryon 5.10.99 → 5.10.101

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/react/index.js +4425 -3945
package/dist/react/index.js.map +1 -1
package/dist/react/styles.d.ts +1 -1
package/dist/react/types.d.ts +1 -1
package/dist/react/views/PhotoGuideView.d.ts +18 -0
package/dist/react/views/PhotoUploadZone.d.ts +42 -0
package/dist/storefront/primestyle-tryon.js +548 -3
package/package.json +1 -1

package/dist/react/styles.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const STYLES = "\n /* Variable defaults must live on BOTH the root (for the trigger button)\n and the overlay (which is React-portaled to <body> and therefore not\n a descendant of .ps-tryon-root, so the cascade is broken). Without\n this duplication the slider track gradient and the thumb border \u2014\n both var(--ps-accent) \u2014 render as unset and become invisible. /\n .ps-tryon-root,\n .ps-tryon-overlay {\n --ps-accent: #3B82F6;\n --ps-accent-hover: #2563EB;\n --ps-accent-light: #BFDBFE;\n --ps-text-primary: #1C1D1E;\n --ps-text-secondary: #454545;\n --ps-text-muted: #84898C;\n --ps-text-dim: #696E71;\n --ps-border-color: #E7E7E7;\n --ps-border-subtle: #F0F0F0;\n --ps-bg-primary: #FFFFFF;\n --ps-bg-secondary: #F8FAFF;\n --ps-bg-tertiary: #F0F0F0;\n --ps-input-bg: #FFFFFF;\n --ps-input-border: #E7E7E7;\n --ps-input-focus-border: var(--ps-accent);\n --ps-error-color: #E7000B;\n --ps-success-color: #1C9D4C;\n --ps-warning-color: #DF8400;\n --ps-logo-height: 2.8vw;\n }\n .ps-tryon-root { display: inline-block; visibility: visible !important; }\n\n .ps-tryon-btn {\n display: inline-flex; align-items: center; gap: max(6px, 0.42vw);\n padding: var(--ps-btn-padding, max(10px, 0.63vw) max(16px, 1.25vw));\n background: var(--ps-btn-bg, var(--ps-accent)); color: var(--ps-btn-color, #FFFFFF);\n font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);\n font-size: var(--ps-btn-font-size, max(13px, 0.73vw)); font-weight: var(--ps-btn-font-weight, 600);\n border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, max(6px, 0.42vw));\n cursor: pointer; transition: all 0.2s ease;\n width: var(--ps-btn-width, auto); height: var(--ps-btn-height, auto);\n box-shadow: var(--ps-btn-shadow, none); line-height: 1; white-space: nowrap;\n box-sizing: border-box;\n }\n .ps-tryon-btn svg { width: var(--ps-btn-icon-size, max(16px, 1.1vw)); height: var(--ps-btn-icon-size, max(16px, 1.1vw)); flex-shrink: 0; }\n .ps-tryon-btn:hover { background: var(--ps-btn-hover-bg, var(--ps-accent-hover)); transform: translateY(-1px); }\n .ps-tryon-btn:active { transform: translateY(0); }\n\n .ps-tryon-overlay {\n position: fixed; inset: 0; background: var(--ps-modal-overlay, rgba(0,0,0,0.6));\n display: flex; align-items: center; justify-content: center;\n z-index: 2147483647;\n isolation: isolate;\n contain: layout style;\n padding: 0.83vw;\n padding: max(0.83vw, env(safe-area-inset-top)) max(0.83vw, env(safe-area-inset-right)) max(0.83vw, env(safe-area-inset-bottom)) max(0.83vw, env(safe-area-inset-left));\n animation: ps-fade-in 0.2s ease;\n overflow-y: auto; -webkit-overflow-scrolling: touch;\n font-family: system-ui, -apple-system, sans-serif;\n -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;\n box-sizing: border-box;\n }\n .ps-tryon-overlay, .ps-tryon-overlay , .ps-tryon-overlay ::before, .ps-tryon-overlay ::after { box-sizing: border-box; }\n @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }\n\n .ps-tryon-modal {\n background: var(--ps-modal-bg, #FFFFFF); color: var(--ps-modal-color, #1C1D1E);\n border-radius: clamp(8px, 0.83vw, 16px); width: var(--ps-modal-width, 100%);\n max-width: var(--ps-modal-max-width, 36vw); max-height: 92dvh; overflow-y: auto;\n font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);\n box-shadow: 0 8px 40px rgba(0,0,0,0.12); animation: ps-slide-up 0.3s ease;\n scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n flex-shrink: 0;\n container-type: inline-size;\n }\n .ps-tryon-modal-wide {\n /* Use the SMALLER of 55vw or 92dvh\u00D7(16/10) for width so the modal\n never gets wider than the height can support. Height bumped from\n 70dvh \u2192 82dvh to fit the longer accessory photo step (guidelines +\n legal notice + nav) without pushing content under the Analyze CTA. /\n width: min(55vw, calc(92dvh 1.6));\n max-width: min(55vw, calc(92dvh * 1.6));\n height: min(82dvh, calc(55vw / 1.35));\n max-height: min(92dvh, calc(55vw / 1.35));\n display: flex; flex-direction: column; overflow: hidden;\n transition: height 0.45s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.45s cubic-bezier(0.32, 0.72, 0, 1);\n }\n .ps-tryon-modal-tall.ps-tryon-modal-wide {\n height: min(92dvh, calc(55vw / 1.2));\n max-height: min(95dvh, calc(55vw / 1.2));\n }\n .ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }\n @keyframes ps-slide-up { from { transform: translateY(12px) scale(0.97); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }\n\n /* Header /\n .ps-tryon-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: max(8px, 0.7vw) max(12px, 1.25vw);\n background: var(--ps-modal-header-bg, rgba(255,255,255,0.95));\n border-bottom: 1px solid var(--ps-border-color);\n border-radius: max(8px, 0.83vw) max(8px, 0.83vw) 0 0;\n backdrop-filter: blur(12px); flex-shrink: 0;\n }\n .ps-tryon-header-minimal {\n justify-content: flex-end; gap: 0.4vw; padding: 0.4vw 0.8vw;\n }\n .ps-tryon-back-btn {\n display: flex; align-items: center; gap: 0.35vw;\n background: none; border: none; color: var(--ps-text-secondary); cursor: pointer;\n font-size: 0.73vw; padding: 0; margin-bottom: 0.63vw;\n transition: color 0.2s;\n }\n .ps-tryon-back-btn:hover { color: var(--ps-text-primary); }\n .ps-tryon-back-btn svg { width: 1vw; height: 0.63vw; stroke: currentColor; flex-shrink: 0; }\n\n / Regen progress bar \u2014 absolutely-positioned fill div inside the\n \"Generating new try-on\u2026\" button. Animation runs at the browser's\n refresh rate (smooth) instead of via React state ticks. The button\n itself sets position: relative + overflow: hidden so the fill is\n clipped to the button's rounded shape. /\n @keyframes ps-tryon-regen-fill {\n from { width: 0%; }\n to { width: 100%; }\n }\n .ps-tryon-regen-fill {\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 0%;\n background: rgba(255, 255, 255, 0.28);\n animation: ps-tryon-regen-fill 22s linear forwards;\n pointer-events: none;\n z-index: 0;\n }\n .ps-tryon-title { display: flex; align-items: center; }\n .ps-tryon-logo-img { height: var(--ps-logo-height); width: auto; }\n .ps-tryon-header-actions { display: flex; align-items: center; gap: 0.42vw; }\n .ps-tryon-header-icon {\n / Pure vw sizing collapsed to ~8 px on 375 px mobile. Clamp so the icon\n stays finger-tappable (min 30 px) while scaling up on large screens. /\n width: clamp(30px, 2.2vw, 34px); height: clamp(30px, 2.2vw, 34px);\n display: flex; align-items: center; justify-content: center;\n border: 1.5px solid var(--ps-border-color); border-radius: clamp(6px, 0.52vw, 10px); background: transparent;\n cursor: pointer; color: var(--ps-text-secondary); transition: all 0.2s;\n }\n .ps-tryon-header-icon:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n .ps-tryon-header-icon svg { stroke: currentColor; fill: none; width: clamp(14px, 0.9vw, 16px); height: clamp(14px, 0.9vw, 16px); }\n .ps-tryon-close {\n width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center;\n background: none; border: none; color: var(--ps-modal-close-color, #999);\n cursor: pointer; border-radius: 0.31vw; transition: background 0.15s;\n }\n .ps-tryon-close:hover { background: rgba(0,0,0,0.06); }\n .ps-tryon-close svg { width: 1vw; height: 1vw; }\n\n / Language switcher /\n .ps-tryon-lang-wrap { position: relative; z-index: 99999; }\n .ps-tryon-lang-trigger {\n display: flex; align-items: center; gap: clamp(5px, 0.36vw, 7px);\n padding: clamp(6px, 0.36vw, 8px) clamp(10px, 0.73vw, 14px);\n border: 1.5px solid var(--ps-border-color); border-radius: clamp(8px, 0.57vw, 10px);\n background: transparent; cursor: pointer; color: var(--ps-text-secondary);\n transition: all 0.25s ease; font-family: inherit; white-space: nowrap;\n min-height: clamp(28px, 2.2vw, 38px);\n }\n .ps-tryon-lang-trigger:hover, .ps-tryon-lang-trigger.ps-active {\n border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.06);\n }\n .ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; width: clamp(13px, 0.8vw, 16px); height: clamp(13px, 0.8vw, 16px); }\n .ps-tryon-lang-current {\n font-size: clamp(12px, 0.68vw, 14px); font-weight: 500; letter-spacing: 0.01em;\n }\n .ps-tryon-lang-arrow {\n font-size: clamp(10px, 0.57vw, 12px); transition: transform 0.25s ease; display: inline-block;\n }\n .ps-tryon-lang-arrow.ps-open { transform: rotate(180deg); }\n\n / Dropdown is portaled to document.body \u2014 uses hardcoded colors (no CSS vars available) /\n .ps-tryon-lang-dropdown {\n min-width: min(13vw, 180px);\n background: #FFFFFF; border: 1.5px solid rgba(0,0,0,0.1);\n border-radius: clamp(8px, 0.73vw, 12px);\n box-shadow: 0 clamp(6px, 0.5vw, 10px) clamp(16px, 2vw, 32px) rgba(0,0,0,0.15),\n 0 0 0 1px rgba(0,0,0,0.03);\n overflow: hidden;\n animation: ps-lang-open 0.2s ease both;\n font-family: system-ui, -apple-system, sans-serif;\n }\n @keyframes ps-lang-open {\n from { opacity: 0; transform: translateY(-0.42vw) scale(0.96); }\n to { opacity: 1; transform: none; }\n }\n\n .ps-tryon-lang-list {\n / max(...) picks the larger of the two values so the dropdown is tall\n enough to scroll through a handful of languages on any viewport.\n Pure min(18vw, 280px) collapsed to ~67 px on 375 px mobile. /\n max-height: max(260px, min(18vw, 280px)); overflow-y: auto; padding: clamp(3px, 0.31vw, 5px);\n scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent;\n }\n .ps-tryon-lang-item {\n display: flex; align-items: center; gap: clamp(6px, 0.57vw, 10px);\n width: 100%; padding: clamp(6px, 0.57vw, 10px) clamp(8px, 0.83vw, 14px);\n border: none; background: transparent; color: #555; cursor: pointer;\n border-radius: clamp(5px, 0.47vw, 8px); transition: all 0.15s ease;\n font-family: inherit; text-align: left;\n }\n .ps-tryon-lang-item:hover { background: rgba(0,0,0,0.04); color: #1C1D1E; }\n .ps-tryon-lang-item.ps-selected { background: rgba(59,130,246,0.1); color: #3B82F6; }\n .ps-tryon-lang-name {\n flex: 1; font-size: clamp(12px, 0.73vw, 14px); font-weight: 500;\n }\n .ps-tryon-lang-code {\n font-size: clamp(10px, 0.52vw, 11px); color: #999; font-weight: 600;\n letter-spacing: 0.05em; font-family: ui-monospace, monospace;\n }\n .ps-tryon-lang-item.ps-selected .ps-tryon-lang-code { color: #3B82F6; opacity: 0.7; }\n .ps-tryon-lang-check { color: #3B82F6; display: flex; align-items: center; }\n\n / Stepper /\n / Dots progress /\n .ps-tryon-dots { display: none; }\n .ps-tryon-dot { display: none; }\n\n / Body /\n .ps-tryon-body { padding: clamp(12px, 1.25vw, 20px); flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }\n @keyframes ps-fade-up { from { opacity: 0; transform: translateY(0.63vw); } to { opacity: 1; transform: translateY(0); } }\n .ps-tryon-view-enter { animation: ps-fade-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; flex: 1; display: flex; flex-direction: column; min-height: 0; will-change: transform, opacity; }\n\n / Welcome /\n .ps-tryon-welcome { text-align: center; padding: 0.5vw 0; }\n .ps-tryon-welcome-hero { margin-bottom: 1.3vw; }\n .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }\n .ps-tryon-welcome-product { width: 9vw; height: 10.5vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); border-radius: 0.9vw; border: 2px solid var(--ps-border-color); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }\n .ps-tryon-welcome-sparkle { position: absolute; top: -0.5vw; right: -0.5vw; width: 1.8vw; height: 1.8vw; background: var(--ps-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }\n .ps-tryon-welcome-sparkle svg { stroke: #111; width: 0.9vw; height: 0.9vw; }\n @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }\n .ps-tryon-welcome-title { font-size: 1.4vw; font-weight: 700; color: var(--ps-text-primary); margin: 1vw 0 0.3vw; letter-spacing: -0.01em; }\n .ps-tryon-welcome-sub { font-size: 0.9vw; color: var(--ps-text-secondary); margin: 0; }\n .ps-tryon-features { display: flex; gap: 0.7vw; margin: 1.3vw 0; }\n .ps-tryon-feature { flex: 1; padding: 1vw 0.7vw; border: 1px solid var(--ps-border-color); border-radius: 0.8vw; text-align: center; transition: border-color 0.2s; }\n .ps-tryon-feature:hover { border-color: #555; }\n .ps-tryon-feature-icon { margin-bottom: 0.4vw; color: var(--ps-accent); display: flex; justify-content: center; }\n .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; width: 1.2vw; height: 1.2vw; }\n .ps-tryon-feature-title { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); margin-bottom: 2px; }\n .ps-tryon-feature-desc { font-size: 0.7vw; color: var(--ps-text-secondary); }\n .ps-tryon-cta {\n width: 100%; padding: 1vw; background: var(--ps-accent); color: #fff; border: none;\n border-radius: 0.8vw; font-size: 1vw; font-weight: 700; cursor: pointer;\n display: flex; align-items: center; justify-content: center; gap: 0.5vw; transition: all 0.2s;\n font-family: var(--ps-modal-font, system-ui, sans-serif);\n }\n .ps-tryon-cta:hover { background: var(--ps-accent-hover); transform: translateY(-1px); }\n .ps-tryon-cta svg { stroke: #111; }\n .ps-tryon-welcome-note { font-size: 0.7vw; color: var(--ps-text-muted); margin-top: 0.7vw; }\n\n / Upload /\n .ps-tryon-upload {\n border: 2px dashed var(--ps-upload-border, var(--ps-border-color)); border-radius: 0.63vw;\n padding: 2.08vw 1.25vw; text-align: center; cursor: pointer; transition: all 0.2s;\n background: var(--ps-upload-bg, transparent); display: flex; flex-direction: column; align-items: center;\n }\n .ps-tryon-upload:hover, .ps-tryon-drag-over { border-color: var(--ps-accent); background: rgba(33,84,239,0.05); }\n .ps-tryon-upload svg { color: var(--ps-upload-icon-color, var(--ps-accent)); margin-bottom: 0.63vw; }\n .ps-tryon-upload-text { font-size: 0.73vw; color: var(--ps-upload-color, var(--ps-text-primary)); margin: 0 0 0.21vw; }\n .ps-tryon-upload-hint { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }\n .ps-tryon-preview {\n position: relative; margin-bottom: 0.21vw;\n height: 20vw; border-radius: 0.63vw;\n overflow: hidden; background: var(--ps-bg-tertiary);\n }\n .ps-tryon-preview-blur {\n position: absolute; inset: -20px; background-size: cover; background-position: center;\n filter: blur(25px) brightness(0.4); transform: scale(1.2);\n }\n .ps-tryon-preview img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }\n .ps-tryon-preview-remove {\n position: absolute; top: 0.42vw; right: 0.42vw; width: 1.46vw; height: 1.46vw;\n border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;\n cursor: pointer; display: flex; align-items: center; justify-content: center;\n font-size: 0.83vw; transition: background 0.15s;\n }\n .ps-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }\n .ps-tryon-submit {\n width: 100%; padding: 0.73vw; margin-top: 0.83vw;\n background: var(--ps-modal-primary-bg, var(--ps-accent)); color: var(--ps-modal-primary-color, #111);\n font-family: var(--ps-modal-font, system-ui, sans-serif);\n font-size: 0.73vw; font-weight: 600; border: none;\n border-radius: var(--ps-modal-primary-radius, 0.52vw);\n cursor: pointer; transition: all 0.2s;\n display: flex; align-items: center; justify-content: center; gap: 0.42vw;\n }\n .ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }\n .ps-tryon-submit svg { stroke: currentColor; }\n\n / Profile bar /\n .ps-tryon-profile-bar { margin-bottom: 0.83vw; }\n .ps-tryon-profile-select {\n width: 100%; padding: 0.52vw 1.88vw 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit;\n appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;\n background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat; background-position: right 0.73vw center;\n }\n .ps-tryon-profile-select:focus { border-color: var(--ps-accent); }\n\n / Sizing \u2014 split layout (product image left, form right) /\n .ps-tryon-sizing-split {\n display: flex; gap: 1.8vw;\n flex: 1; min-height: 0; position: relative;\n height: 30vw;\n }\n .ps-tryon-sizing-img-col {\n flex: 1.15; position: relative;\n background: transparent;\n border-radius: 0.8vw; overflow: hidden;\n }\n .ps-tryon-sizing-img-col > img, .ps-tryon-sizing-img-col > .ps-tryon-sizing-measure-img {\n display: block; width: 100%; height: 100%;\n object-fit: contain; object-position: center center;\n background: transparent;\n border-radius: 1vw;\n transition: opacity 0.3s ease;\n }\n .ps-tryon-sizing-product-img { opacity: 1; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); }\n .ps-tryon-sizing-product-img.ps-tryon-img-hidden { opacity: 0.08; }\n .ps-tryon-sizing-measure-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }\n .ps-tryon-sizing-measure-img.ps-tryon-img-visible { opacity: 1; }\n .ps-tryon-sizing-height-img { position: absolute; inset: 0; object-fit: contain !important; background: #f5f5f5; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }\n .ps-tryon-sizing-height-img.ps-tryon-img-visible { opacity: 1; }\n\n / Model overlay \u2014 positioned on top of the image column /\n .ps-tryon-model-overlay {\n grid-area: 1 / 1; position: relative; opacity: 0; transition: opacity 0.5s ease;\n width: 100%; aspect-ratio: 896 / 1200; overflow: hidden;\n }\n .ps-tryon-model-overlay.ps-tryon-img-visible { opacity: 1; }\n .ps-tryon-model-raw { width: 100%; height: 100%; object-fit: contain; }\n\n / Measurement overlay group \u2014 each measurement is one group /\n .ps-tryon-mline-group { position: absolute; inset: 0; pointer-events: none; }\n\n / Horizontal dashed line /\n .ps-tryon-mline-h {\n position: absolute; height: 0;\n border-top: 2.5px dashed var(--ps-border-color);\n animation: ps-dash-draw 0.5s ease 0.1s both;\n }\n / Vertical dashed line (inseam, sleeve) /\n .ps-tryon-mline-v {\n position: absolute; width: 0;\n border-left: 2.5px dashed var(--ps-border-color);\n animation: ps-vdash-draw 0.5s ease 0.1s both;\n }\n / Tick marks at line endpoints \u2014 vertical ticks for horizontal lines /\n .ps-tryon-mline-tick {\n position: absolute; width: 0;\n border-left: 2.5px solid var(--ps-border-color);\n animation: ps-label-pop 0.3s ease 0.2s both;\n }\n / Horizontal ticks for vertical lines /\n .ps-tryon-mline-htick {\n position: absolute; height: 0;\n border-top: 2.5px solid var(--ps-border-color);\n animation: ps-label-pop 0.3s ease 0.2s both;\n }\n\n / Label box \u2014 matches reference: black title box + left-bordered description /\n .ps-tryon-mline-label {\n position: absolute;\n animation: ps-label-pop 0.35s ease 0.25s both;\n max-width: 33%;\n }\n .ps-tryon-mline-title {\n display: inline-block; background: #222; color: var(--ps-text-primary);\n font-size: 0.55vw; font-weight: 800; letter-spacing: 0.06em;\n padding: 0.12vw 0.35vw; margin-bottom: 0.2vw;\n }\n .ps-tryon-mline-desc {\n font-size: 0.42vw; color: #444; line-height: 1.4;\n font-style: italic;\n border-left: 1.5px solid var(--ps-border-color); padding-left: 0.3vw;\n margin-top: 0.1vw;\n }\n\n / Per-field measurement guide overlay /\n .ps-tryon-measure-overlay {\n position: absolute; inset: 0; z-index: 5; pointer-events: none;\n animation: ps-measure-in 0.3s ease both;\n }\n .ps-tryon-measure-dot {\n position: absolute; width: 0.55vw; height: 0.55vw;\n background: #222;\n border: 2px solid var(--ps-border-color);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 0 2px rgba(0,0,0,0.15);\n z-index: 6;\n }\n .ps-tryon-measure-callout {\n position: absolute; top: 3%; left: 4%; z-index: 7;\n animation: ps-label-pop 0.35s ease 0.15s both;\n max-width: 55%;\n }\n .ps-tryon-measure-title {\n display: inline-block; background: #222; color: var(--ps-text-primary);\n font-size: 1.1vw; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;\n padding: 0.3vw 0.65vw; margin-bottom: 0.35vw;\n }\n .ps-tryon-measure-desc {\n font-size: 0.85vw; color: #222; line-height: 1.55;\n font-style: italic; font-weight: 500;\n border-left: 2.5px solid var(--ps-border-color); padding-left: 0.55vw;\n margin-top: 0.15vw;\n }\n @keyframes ps-dot-pulse {\n 0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }\n 50% { box-shadow: 0 0 0 5px rgba(0,0,0,0.06); }\n }\n\n @keyframes ps-measure-in {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes ps-dash-draw {\n from { clip-path: inset(0 100% 0 0); }\n to { clip-path: inset(0 0 0 0); }\n }\n @keyframes ps-vdash-draw {\n from { clip-path: inset(0 0 100% 0); }\n to { clip-path: inset(0 0 0 0); }\n }\n @keyframes ps-label-pop {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 V2 Redesign \u2014 Editorial luxury \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-tryon-v2 {\n display: flex; gap: 1.2vw; flex: 1; min-height: 0;\n height: 100%; overflow: hidden;\n }\n\n / Left image column \u2014 proper contained display.\n No background \u2014 the product/try-on image sits directly on the modal\n surface without a gray placeholder box behind it. /\n .ps-tryon-v2-bg {\n flex: 0 0 43%; position: relative; min-width: 0;\n border-radius: 0.9vw; overflow: hidden;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-tryon-v2-bg-img {\n width: 100%; height: 100%; object-fit: contain; object-position: center center;\n transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ps-tryon-v2-bg-img.ps-tryon-img-hidden { opacity: 0.06; }\n .ps-tryon-v2-guide {\n position: absolute; inset: 0; width: 100%; height: 100%;\n object-fit: contain; object-position: center center;\n opacity: 0; z-index: 1;\n transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n will-change: opacity;\n }\n .ps-tryon-v2-guide.ps-visible { opacity: 1; }\n\n / Right form panel /\n .ps-tryon-v2-panel {\n flex: 1; min-width: 0;\n display: flex; flex-direction: column;\n padding: 0.2vw 0;\n justify-content: center;\n animation: ps-v2-fade 0.3s ease forwards;\n }\n @keyframes ps-v2-fade {\n 0% { opacity: 0; transform: translateY(0.4vw); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n @keyframes ps-panel-slide {\n from { transform: translateX(2vw); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n }\n\n / Top bar /\n .ps-tryon-v2-top {\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 0.6vw;\n }\n .ps-tryon-v2-title {\n font-size: 1.2vw; font-weight: 300; color: var(--ps-text-primary);\n letter-spacing: 0.2em; text-transform: uppercase; margin: 0;\n font-family: inherit;\n }\n .ps-tryon-v2-subtitle {\n font-size: 0.65vw; font-weight: 400; color: rgba(0,0,0,0.25);\n margin: 0.15vw 0 0; letter-spacing: 0.03em;\n }\n .ps-tryon-v2-unit-toggle {\n display: flex; gap: 0;\n border: 1px solid rgba(0,0,0,0.06); border-radius: 2vw; overflow: hidden;\n }\n .ps-tryon-v2-unit {\n background: none; border: none; padding: 0.22vw 0.7vw;\n font-size: 0.55vw; font-weight: 700; color: rgba(0,0,0,0.2);\n cursor: pointer; font-family: inherit; letter-spacing: 0.1em;\n transition: all 0.25s;\n }\n .ps-tryon-v2-unit.ps-on {\n background: rgba(33,84,239,0.15); color: var(--ps-accent);\n }\n\n / Body type card selector /\n .ps-tryon-bodytype-cards {\n display: flex; gap: 0.35vw; width: 100%;\n overflow-x: auto; padding: 0.15vw 0;\n scrollbar-width: none;\n }\n .ps-tryon-bodytype-cards::-webkit-scrollbar { display: none; }\n .ps-tryon-bodytype-card {\n flex: 1; min-width: 0;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 0.2vw; padding: 0.4vw 0.2vw;\n border: 1.5px solid rgba(0,0,0,0.06); border-radius: 0.35vw;\n background: transparent; color: rgba(0,0,0,0.3);\n cursor: pointer; font-family: inherit; transition: all 0.2s;\n }\n .ps-tryon-bodytype-card:hover {\n border-color: var(--ps-accent); background: rgba(33,84,239,0.06);\n }\n .ps-tryon-bodytype-card.ps-active {\n border-color: var(--ps-accent); background: rgba(33,84,239,0.12);\n color: var(--ps-accent);\n }\n .ps-tryon-bodytype-label {\n font-size: 0.5vw; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;\n }\n\n / Separator /\n .ps-tryon-v2-sep {\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(33,84,239,0.2), transparent);\n margin-bottom: 0.8vw;\n }\n\n / Profile select /\n .ps-tryon-v2-profile {\n width: 100%; padding: 0.3vw 0.5vw; margin-bottom: 0.6vw;\n background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.04);\n border-radius: 0.3vw; color: rgba(0,0,0,0.08);\n font-size: 0.6vw; font-family: inherit; cursor: pointer; outline: none;\n appearance: none; -webkit-appearance: none;\n transition: border-color 0.2s;\n }\n .ps-tryon-v2-profile:focus { border-color: rgba(33,84,239,0.3); }\n\n / Fields container \u2014 scrollable /\n .ps-tryon-v2-fields {\n flex: 1; min-height: 0; overflow-y: auto;\n display: flex; flex-direction: column; gap: 0;\n scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.04) transparent;\n }\n\n / Override float-row for inline look inside v2 /\n .ps-tryon-v2-fields .ps-tryon-sf-float-row {\n width: 100%;\n }\n / Label inline with input line /\n .ps-tryon-v2-fields .ps-tryon-sf-float-field {\n display: flex; align-items: center; gap: 0.8vw;\n width: 100%; padding: 0.9vw 0.8vw;\n }\n .ps-tryon-v2-fields .ps-tryon-sf-float-label {\n flex-shrink: 0;\n font-size: 0.75vw; font-weight: 500;\n color: rgba(0,0,0,0.08);\n letter-spacing: 0.04em;\n margin: 0; white-space: nowrap;\n transition: color 0.25s;\n }\n .ps-tryon-v2-fields .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label {\n color: var(--ps-accent);\n }\n .ps-tryon-v2-fields .ps-tryon-sf-input {\n flex: 1; border: none;\n border-bottom: 1.5px solid rgba(0,0,0,0.1);\n background: none; padding: 0.25vw 0;\n font-size: 1vw; font-weight: 400; color: var(--ps-text-primary);\n font-family: inherit; outline: none;\n -moz-appearance: textfield;\n transition: border-color 0.3s;\n }\n .ps-tryon-v2-fields .ps-tryon-sf-input:focus {\n border-bottom-color: var(--ps-accent);\n }\n .ps-tryon-v2-fields .ps-tryon-sf-input::placeholder {\n color: rgba(0,0,0,0.08);\n }\n .ps-tryon-v2-fields .ps-tryon-sf-input::-webkit-outer-spin-button,\n .ps-tryon-v2-fields .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n\n / CTA button /\n .ps-tryon-v2-cta {\n margin-top: 0.8vw; padding: 0.65vw 1.5vw;\n width: auto; min-width: 12vw; display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n background: var(--ps-accent); color: #fff;\n border: none; border-radius: 0.35vw;\n font-size: 0.72vw; font-weight: 700; font-family: inherit;\n letter-spacing: 0.12em; text-transform: uppercase;\n cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n flex-shrink: 0;\n }\n .ps-tryon-v2-cta svg { width: 0.75vw; height: 0.75vw; }\n .ps-tryon-v2-cta:hover {\n background: var(--ps-accent-hover);\n box-shadow: 0 0.3vw 1.5vw rgba(33,84,239,0.25);\n transform: translateY(-1px);\n }\n .ps-tryon-v2-cta svg { width: 0.8vw; height: 0.8vw; stroke: currentColor; }\n\n / \u2500\u2500 Size result card rows (split layout) \u2500\u2500 /\n .ps-tryon-sr-cards-stack {\n display: flex; flex-wrap: wrap; gap: 0.4vw;\n flex: 1; min-height: 0; justify-content: center;\n }\n / Cards inside stack: 2 per row, compact, dark /\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard {\n flex: 1 1 45%; max-width: 49%; min-height: 0; border-radius: 0.5vw;\n background: #0a0a0a; max-height: 8vw;\n }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard:not(.ps-has-img) {\n min-height: 5vw; padding: 0.4vw; max-height: 8vw;\n }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-bg {\n max-height: 8vw; width: 100%; height: 100%;\n object-fit: contain; object-position: center center;\n }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-overlay {\n height: 100%;\n background: rgba(0,0,0,0.6);\n }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-content {\n padding: 0.4vw;\n }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-name { font-size: 0.5vw; }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-size { font-size: 1.2vw; }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-badge { font-size: 0.35vw; }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-icon { width: 1.8vw; height: 1.8vw; }\n .ps-tryon-sr-card-row {\n display: flex; align-items: center; gap: 0.6vw;\n padding: 0.6vw 0.7vw;\n background: rgba(255,255,255,0.02);\n border: 1px solid rgba(0,0,0,0.04);\n border-radius: 0.5vw;\n cursor: pointer; font-family: inherit;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n animation: ps-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n opacity: 0;\n }\n .ps-tryon-sr-card-row:nth-child(1) { animation-delay: 0s; }\n .ps-tryon-sr-card-row:nth-child(2) { animation-delay: 0.06s; }\n .ps-tryon-sr-card-row:nth-child(3) { animation-delay: 0.12s; }\n .ps-tryon-sr-card-row:nth-child(4) { animation-delay: 0.18s; }\n .ps-tryon-sr-card-row:hover {\n border-color: var(--ps-accent);\n background: rgba(33,84,239,0.04);\n transform: translateX(0.15vw);\n }\n .ps-tryon-sr-card-icon {\n width: 2vw; height: 2vw; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n background: rgba(33,84,239,0.06); border: 1px solid rgba(33,84,239,0.1);\n border-radius: 50%; color: var(--ps-accent);\n }\n .ps-tryon-sr-card-icon svg { stroke: currentColor; }\n .ps-tryon-sr-card-info {\n flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05vw;\n }\n .ps-tryon-sr-card-name {\n font-size: 0.72vw; font-weight: 500; color: var(--ps-text-primary);\n text-transform: capitalize;\n }\n .ps-tryon-sr-card-fit {\n font-size: 0.55vw; color: var(--ps-text-muted); letter-spacing: 0.03em;\n }\n .ps-tryon-sr-card-size {\n font-size: 1.3vw; font-weight: 300; color: var(--ps-accent);\n letter-spacing: -0.01em;\n }\n .ps-tryon-sr-card-row > svg { color: rgba(0,0,0,0.1); flex-shrink: 0; transition: color 0.2s; }\n .ps-tryon-sr-card-row:hover > svg { color: var(--ps-accent); }\n\n / \u2500\u2500 Result cards v2: bold, clear, unmissable \u2500\u2500 /\n .ps-tryon-sr-cards-v2 {\n display: flex; flex-wrap: wrap; gap: 0.4vw;\n flex: 1; min-height: 0;\n }\n .ps-tryon-sr-card-v2 {\n flex: 1 1 45%; max-width: 49%;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n text-align: center;\n background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06);\n border-radius: 0.6vw; padding: 1vw 0.5vw;\n cursor: pointer; font-family: inherit;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n animation: ps-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n opacity: 0; overflow: hidden; position: relative;\n min-height: 7vw;\n }\n .ps-tryon-sr-card-v2.ps-full { flex: 1 1 100%; max-width: 100%; min-height: 5vw; padding: 0.8vw; }\n .ps-tryon-sr-card-v2:hover {\n border-color: var(--ps-accent);\n background: rgba(33,84,239,0.06);\n transform: translateY(-2px);\n box-shadow: 0 0.4vw 1.5vw rgba(0,0,0,0.08);\n }\n .ps-tryon-sr-card-v2-text {\n display: flex; flex-direction: column; align-items: center; gap: 0.15vw; z-index: 1;\n }\n .ps-tryon-sr-card-v2-label {\n font-size: 0.65vw; font-weight: 600; color: var(--ps-text-secondary);\n text-transform: uppercase; letter-spacing: 0.1em;\n display: inline-flex; align-items: center; gap: 0.5vw;\n }\n .ps-tryon-sr-card-v2-label-icon {\n width: 4.8vw; height: 4.8vw; object-fit: contain;\n opacity: 1;\n }\n .ps-tryon-sr-card-v2-value {\n font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);\n line-height: 1; letter-spacing: -0.02em;\n }\n .ps-tryon-sr-card-v2.ps-full .ps-tryon-sr-card-v2-value { font-size: 1.8vw; }\n .ps-tryon-sr-card-v2-value-suffix {\n font-size: 0.75vw; font-weight: 500; color: var(--ps-text-secondary);\n letter-spacing: 0; margin-left: 0.25vw; white-space: nowrap;\n }\n .ps-tryon-sr-card-v2-rec {\n font-size: 0.5vw; font-weight: 600; color: var(--ps-accent);\n text-transform: uppercase; letter-spacing: 0.1em;\n margin-top: 0.15vw;\n border: 1px solid rgba(33,84,239,0.25); border-radius: 2vw;\n padding: 0.1vw 0.5vw;\n }\n .ps-tryon-sr-card-v2-img { display: none; }\n .ps-tryon-sr-card-v2-icon {\n position: absolute; bottom: 0.35vw; right: 0.45vw;\n opacity: 0.1; color: var(--ps-accent);\n pointer-events: none;\n transform: scale(1.5); transform-origin: bottom right;\n }\n\n / \u2500\u2500 Photo guide v2 \u2500\u2500 /\n .ps-tryon-guide-drop-v2 {\n width: 90%; height: 90%; border-radius: 0.6vw;\n border: 1.5px dashed rgba(0,0,0,0.08);\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 0.3vw; cursor: pointer; transition: all 0.25s;\n position: relative; overflow: hidden;\n }\n .ps-tryon-guide-drop-v2:hover, .ps-tryon-guide-drop-v2.ps-drag {\n border-color: var(--ps-accent); background: rgba(33,84,239,0.04);\n }\n .ps-tryon-guide-drop-v2.ps-has { border-style: solid; border-color: rgba(0,0,0,0.06); cursor: default; }\n .ps-tryon-guide-drop-v2 svg { color: rgba(0,0,0,0.2); }\n .ps-tryon-guide-drop-v2-text { font-size: 0.8vw; font-weight: 500; color: rgba(0,0,0,0.5); }\n .ps-tryon-guide-drop-v2-hint { font-size: 0.55vw; color: rgba(0,0,0,0.15); }\n .ps-tryon-guide-drop-v2-img {\n width: 100%; height: 100%; object-fit: contain; border-radius: 0.5vw;\n }\n .ps-tryon-guide-drop-v2-remove {\n position: absolute; top: 0.4vw; right: 0.4vw;\n width: 1.4vw; height: 1.4vw; border-radius: 50%;\n background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.08);\n color: var(--ps-text-muted); font-size: 0.6vw; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: background 0.2s;\n }\n .ps-tryon-guide-drop-v2-remove:hover { background: rgba(239,68,68,0.7); }\n\n .ps-tryon-guide-v2-tips {\n display: flex; flex-direction: column; gap: 0.4vw;\n margin: 0.5vw 0;\n }\n .ps-tryon-guide-v2-tip {\n display: flex; align-items: center; gap: 0.4vw;\n font-size: 0.65vw; color: rgba(0,0,0,0.5);\n }\n .ps-tryon-guide-v2-tip-icon {\n width: 1.2vw; height: 1.2vw; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.55vw; border-radius: 50%;\n background: rgba(74,222,128,0.1); color: #4ade80;\n }\n .ps-tryon-guide-v2-tip.ps-dont .ps-tryon-guide-v2-tip-icon {\n background: rgba(239,68,68,0.1); color: #f87171;\n }\n .ps-tryon-v2-cta:disabled {\n opacity: 0.4; cursor: not-allowed; transform: none;\n box-shadow: none;\n }\n\n / Try-on processing overlay on image /\n .ps-tryon-v2-bg-img.ps-tryon-blur {\n filter: blur(8px) brightness(0.5); transform: scale(1.05);\n transition: filter 0.5s ease, transform 0.5s ease;\n }\n .ps-tryon-v2-processing-label {\n position: absolute; bottom: 1vw; left: 50%; transform: translateX(-50%);\n z-index: 5; font-size: 0.7vw; font-weight: 600;\n color: #fff; letter-spacing: 0.05em;\n background: rgba(0,0,0,0.72); backdrop-filter: blur(10px);\n padding: 0.6vw 0.9vw; border-radius: 0.6vw;\n display: flex; flex-direction: column; align-items: center; gap: 0.5vw;\n min-width: 14vw;\n box-shadow: 0 0.4vw 1.5vw rgba(0,0,0,0.35);\n }\n .ps-tryon-v2-processing-label > span:first-child {\n animation: ps-loading-pulse 2s ease-in-out infinite;\n }\n .ps-tryon-v2-processing-label .ps-tryon-progress-ring-track { stroke: rgba(255,255,255,0.18); }\n .ps-tryon-v2-processing-label .ps-tryon-progress-ring-fill { stroke: var(--ps-accent-light); }\n .ps-tryon-v2-processing-label .ps-tryon-progress-eta { color: #fff; }\n .ps-tryon-v2-processing-label .ps-tryon-progress-bar-wrap { background: rgba(255,255,255,0.18); }\n .ps-tryon-v2-processing-label .ps-tryon-progress-pct { color: var(--ps-accent-light); }\n\n / \"I don't know\" link /\n .ps-tryon-v2-dontknow {\n background: none; border: none;\n color: var(--ps-accent); font-size: 0.72vw; font-weight: 500;\n cursor: pointer; font-family: inherit;\n padding: 0.5vw 0.8vw; text-align: left;\n transition: color 0.2s;\n }\n .ps-tryon-v2-dontknow:hover { color: var(--ps-accent-light); text-decoration: underline; }\n\n / Alternative links /\n .ps-tryon-v2-alt {\n display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n margin-top: 0.5vw; flex-shrink: 0;\n }\n .ps-tryon-v2-alt button {\n background: none; border: none; color: rgba(33,84,239,0.5);\n font-size: 0.58vw; font-weight: 500; cursor: pointer;\n font-family: inherit; letter-spacing: 0.04em;\n transition: color 0.2s; padding: 0;\n }\n .ps-tryon-v2-alt button:hover { color: var(--ps-accent); }\n .ps-tryon-v2-alt span { color: rgba(0,0,0,0.06); font-size: 0.55vw; }\n\n / Active field row highlight (legacy) /\n .ps-tryon-sf-row-active { border-bottom-color: var(--ps-accent); }\n .ps-tryon-sf-row-active .ps-tryon-sf-label { color: var(--ps-accent); }\n .ps-tryon-sizing-form-col {\n flex: 1; display: flex; flex-direction: column; justify-content: flex-start;\n padding: 0.3vw 0; min-height: 0;\n }\n .ps-tryon-sf-title {\n font-size: 1.1vw; font-weight: 300; color: var(--ps-text-primary);\n margin: 0 0 0.8vw; letter-spacing: 0.12em; text-transform: uppercase;\n text-align: left;\n background: linear-gradient(90deg, #fff 0%, rgba(0,0,0,0.5) 100%);\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .ps-tryon-sf-unit-tabs {\n display: inline-flex; gap: 0; border: 1px solid rgba(0,0,0,0.06);\n border-radius: 0.3vw; overflow: hidden; margin-bottom: 1vw; align-self: flex-start;\n }\n .ps-tryon-sf-unit-tab {\n background: none; border: none; padding: 0.3vw 0.9vw;\n font-size: 0.62vw; font-weight: 600; color: rgba(0,0,0,0.25); cursor: pointer;\n font-family: inherit; transition: all 0.25s; letter-spacing: 0.06em; text-transform: uppercase;\n }\n .ps-tryon-sf-unit-tab:hover { color: rgba(0,0,0,0.5); }\n .ps-tryon-sf-unit-tab.ps-active { color: var(--ps-accent); background: rgba(33,84,239,0.08); }\n\n .ps-tryon-sf-profile-bar { margin-bottom: 0.7vw; }\n .ps-tryon-sf-profile-select {\n width: 100%; padding: 0.4vw; background: var(--ps-bg-secondary); color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color); border-radius: 0.4vw;\n font-size: 0.75vw; font-family: inherit; cursor: pointer;\n }\n\n .ps-tryon-sf-scroll {\n flex: 1; min-height: 0; overflow-y: auto;\n scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n }\n .ps-tryon-sf-fields {\n display: flex; flex-direction: column; gap: 0.8vw;\n }\n .ps-tryon-sf-footer {\n flex-shrink: 0; padding-top: 0.6vw;\n display: flex; flex-direction: column; gap: 0.4vw;\n }\n\n / \u2500\u2500 Refined line inputs \u2500\u2500 /\n .ps-tryon-sf-float-row {\n width: 100%;\n }\n .ps-tryon-sf-float-field {\n width: 100%; position: relative;\n }\n\n / Label \u2014 subtle, editorial /\n .ps-tryon-sf-float-label {\n display: block;\n font-size: 0.58vw; font-weight: 500; color: var(--ps-text-secondary);\n letter-spacing: 0.1em; text-transform: uppercase;\n margin-bottom: 0.15vw;\n transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label {\n color: var(--ps-accent);\n }\n\n / Input \u2014 elegant underline /\n .ps-tryon-sf-input {\n width: 100%; box-sizing: border-box;\n background: none; border: none;\n border-bottom: 1.5px solid rgba(0,0,0,0.15);\n color: var(--ps-text-primary);\n font-size: 0.85vw; font-weight: 300; font-family: inherit;\n padding: 0.4vw 0; letter-spacing: 0.02em;\n outline: none;\n -moz-appearance: textfield;\n transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ps-tryon-sf-input:focus {\n border-bottom-color: var(--ps-accent);\n }\n .ps-tryon-sf-input:not(:placeholder-shown) {\n border-bottom-color: rgba(0,0,0,0.1);\n }\n .ps-tryon-sf-input:focus:not(:placeholder-shown) {\n border-bottom-color: var(--ps-accent);\n }\n .ps-tryon-sf-input::placeholder { color: rgba(0,0,0,0.08); }\n .ps-tryon-sf-input::-webkit-outer-spin-button,\n .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n\n .ps-tryon-sf-ft-group {\n display: flex; align-items: stretch; gap: 1vw; width: 100%;\n }\n .ps-tryon-sf-ft-group .ps-tryon-sf-float-field { flex: 1; }\n\n / Legacy (keep for skeleton/review) /\n .ps-tryon-sf-row {\n display: flex; align-items: center; justify-content: center; gap: 1.2vw;\n padding: 1.3vw 0; max-width: 100%; margin: 0 auto;\n }\n .ps-tryon-sf-label {\n font-size: 0.78vw; font-weight: 700; color: var(--ps-text-secondary);\n letter-spacing: 0.1em; text-transform: uppercase;\n flex-shrink: 0; min-width: 5vw;\n }\n .ps-tryon-sf-input-wrap { flex: 1; display: flex; align-items: center; gap: 0.4vw; }\n .ps-tryon-sf-inline { flex: 1; display: flex; align-items: center; gap: 0.4vw; }\n .ps-tryon-sf-unit {\n font-size: 0.73vw; color: var(--ps-text-secondary); font-weight: 500; flex-shrink: 0;\n }\n\n .ps-tryon-sf-optional { border-top: 1px solid var(--ps-border-color); margin-top: 0.52vw; padding-top: 0.52vw; }\n .ps-tryon-sf-optional-toggle {\n display: flex; align-items: center; justify-content: space-between;\n width: 100%; padding: 0.52vw 0.73vw;\n font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); cursor: pointer;\n font-family: inherit;\n border: 1px solid var(--ps-border-color); border-radius: 0.52vw;\n background: #161616; transition: all 0.2s;\n }\n .ps-tryon-sf-optional-toggle:hover { border-color: #555; background: #1a1a1a; }\n .ps-tryon-sf-optional-arrow {\n font-size: 0.83vw; color: var(--ps-text-secondary); transition: transform 0.3s ease; display: inline-block;\n }\n .ps-tryon-sf-optional-arrow.ps-open { transform: rotate(180deg); }\n .ps-tryon-sf-optional-fields {\n display: flex; flex-direction: column; gap: 0.8vw;\n max-height: 0; overflow: hidden; opacity: 0;\n transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;\n padding-top: 0;\n }\n .ps-tryon-sf-optional-fields.ps-open {\n max-height: 30vw; opacity: 1; padding-top: 0.7vw;\n }\n\n / Mode switch \u2014 below button /\n .ps-tryon-sf-mode-switch { margin-top: 0.5vw; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.25vw; }\n .ps-tryon-sf-switch-btn {\n background: none; border: none; color: rgba(33,84,239,0.7); font-size: 0.65vw;\n font-weight: 500; cursor: pointer; font-family: inherit;\n display: inline-flex; align-items: center; gap: 0.2vw;\n transition: color 0.25s; padding: 0.15vw 0; letter-spacing: 0.03em;\n }\n .ps-tryon-sf-switch-btn:hover { color: var(--ps-accent); }\n .ps-tryon-sf-switch-divider { color: rgba(0,0,0,0.08); font-size: 0.65vw; font-weight: 300; }\n .ps-tryon-sf-switch-btn svg { stroke: currentColor; width: 0.8vw; height: 0.8vw; }\n\n / How to measure \u2014 overlaid on product image bottom-left /\n .ps-tryon-sf-measure-overlay {\n position: absolute; bottom: 0.6vw; left: 0.6vw;\n background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);\n border: 1px solid var(--ps-border-color); color: var(--ps-text-secondary); font-size: 0.75vw;\n font-weight: 500; cursor: pointer; font-family: inherit;\n display: inline-flex; align-items: center; gap: 0.35vw;\n padding: 0.4vw 0.8vw; border-radius: 0.45vw; transition: all 0.2s;\n }\n .ps-tryon-sf-measure-overlay:hover { border-color: var(--ps-accent); color: var(--ps-text-primary); }\n .ps-tryon-sf-measure-overlay.ps-active { border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.15); }\n .ps-tryon-sf-measure-overlay svg { stroke: currentColor; }\n\n / Estimation review view /\n .ps-tryon-est-subtitle {\n font-size: 0.7vw; color: var(--ps-text-dim); margin: 0 0 0.8vw; line-height: 1.5; text-align: center;\n }\n .ps-tryon-est-label-group {\n display: flex; flex-direction: column; gap: 0.1vw; flex-shrink: 0; min-width: 5vw;\n }\n .ps-tryon-sf-estimated-badge {\n display: inline-block; font-size: 0.45vw; padding: 0.08vw 0.25vw;\n border-radius: 0.2vw; background: rgba(33,84,239,0.15); color: var(--ps-accent);\n letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; width: fit-content;\n }\n .ps-tryon-sf-edit-icon {\n width: 0.85vw; height: 0.85vw; stroke: #555; flex-shrink: 0; cursor: pointer;\n transition: stroke 0.2s;\n }\n .ps-tryon-sf-edit-icon:hover { stroke: var(--ps-accent); }\n .ps-tryon-est-actions {\n display: flex; align-items: center; gap: 0.8vw; margin-top: 0.6vw;\n }\n .ps-tryon-est-back {\n background: none; border: none; color: var(--ps-text-dim); cursor: pointer; font-size: 0.75vw;\n font-family: inherit; padding: 0; transition: color 0.2s; flex-shrink: 0; white-space: nowrap;\n }\n .ps-tryon-est-back:hover { color: var(--ps-accent); }\n .ps-tryon-est-submit { flex: 1; min-width: 0; }\n\n / Save profile /\n .ps-tryon-sf-save { margin-top: 0.42vw; display: flex; flex-direction: column; gap: 0.36vw; }\n .ps-tryon-sf-save-check {\n display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; color: var(--ps-text-secondary); cursor: pointer; user-select: none;\n }\n .ps-tryon-sf-save-check input[type=\"checkbox\"] { width: 0.83vw; height: 0.83vw; accent-color: var(--ps-accent); cursor: pointer; }\n .ps-tryon-sf-save-name {\n padding: 0.42vw 0.63vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw;\n background: #111; color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none;\n transition: border-color 0.2s; animation: ps-fade-up 0.2s ease both;\n }\n .ps-tryon-sf-save-name:focus { border-color: var(--ps-accent); }\n\n .ps-tryon-sf-error {\n color: var(--ps-error-color); font-size: 0.75vw; text-align: center; margin-top: 0.3vw;\n }\n .ps-tryon-sf-next {\n margin-top: 0.6vw; padding: 0.65vw 2vw;\n width: 100%;\n background: linear-gradient(135deg, var(--ps-accent) 0%, var(--ps-accent-light) 100%);\n color: #0c0c0c; border: none;\n border-radius: 0.4vw; font-size: 0.78vw;\n font-weight: 600; cursor: pointer; font-family: inherit;\n flex-shrink: 0; letter-spacing: 0.06em; text-transform: uppercase;\n transition: background 0.2s ease, opacity 0.2s ease;\n box-shadow: 0 0.2vw 1vw rgba(33,84,239,0.15);\n display: inline-flex; align-items: center; gap: 0.35vw;\n }\n .ps-tryon-sf-next:hover { background: var(--ps-accent-hover); }\n .ps-tryon-sf-next svg { width: 0.85vw; height: 0.85vw; stroke: currentColor; fill: none; }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Height Picker \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-hpk {\n display: flex; flex-direction: column; align-items: center;\n height: 100%; min-height: 26vw;\n }\n .ps-hpk-title {\n font-size: 1.2vw; font-weight: 700; color: var(--ps-text-primary); margin: 0 0 0.2vw;\n }\n .ps-hpk-desc {\n font-size: 0.65vw; color: var(--ps-text-dim); margin: 0 0 0.5vw;\n }\n\n / Shared toggle /\n .ps-hpk-toggle {\n display: inline-flex; border: 1.5px solid var(--ps-border-color); border-radius: 2vw; overflow: hidden;\n margin-bottom: 0.3vw;\n }\n .ps-hpk-toggle button {\n background: transparent; border: none; color: var(--ps-text-dim); font-size: 0.72vw; font-weight: 600;\n padding: 0.3vw 1.4vw; cursor: pointer; font-family: inherit; transition: all 0.15s;\n }\n .ps-hpk-toggle button.ps-on {\n background: var(--ps-accent); color: #fff; border-radius: 2vw;\n }\n\n / Main visual area /\n .ps-hpk-area {\n position: relative; width: 100%; flex: 1; min-height: 18vw;\n cursor: ns-resize; touch-action: none; user-select: none;\n display: flex; align-items: flex-end; justify-content: center;\n }\n\n / Value \u2014 positioned left, floats at indicator height /\n .ps-hpk-val {\n position: absolute; left: 0.5vw; transform: translateY(50%);\n display: flex; align-items: baseline; gap: 0.2vw; z-index: 4;\n pointer-events: none;\n }\n .ps-hpk-num {\n font-size: 2vw; font-weight: 800; color: var(--ps-text-primary); letter-spacing: -0.02em;\n }\n .ps-hpk-unit {\n font-size: 0.85vw; color: var(--ps-text-secondary); font-weight: 500;\n }\n\n / Model \u2014 center /\n .ps-hpk-model {\n display: flex; align-items: flex-end; justify-content: center;\n transition: height 0.1s ease-out; flex-shrink: 0;\n position: relative; z-index: 1;\n }\n .ps-hpk-model img {\n height: 100%; width: auto; max-width: 10vw; object-fit: contain;\n opacity: 0.7;\n border-radius: 0.4vw;\n }\n\n / Ruler \u2014 right side /\n .ps-hpk-ruler {\n position: absolute; right: 0.5vw; top: 0; bottom: 0;\n width: 4vw; z-index: 2;\n }\n .ps-hpk-ruler-line {\n position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: #666;\n }\n .ps-hpk-mark {\n position: absolute; left: 0; display: flex; align-items: center;\n transform: translateY(50%);\n }\n .ps-hpk-mark-tick {\n width: 0.8vw; height: 1.5px; background: #aaa;\n }\n .ps-hpk-mark-label {\n margin-left: 0.35vw; font-size: 0.75vw; color: var(--ps-text-secondary); font-weight: 600;\n white-space: nowrap;\n }\n .ps-hpk-mark-sm {\n position: absolute; left: 0; width: 0.45vw; height: 1px; background: #555;\n transform: translateY(50%);\n }\n\n / Horizontal indicator line \u2014 spans full width /\n .ps-hpk-line {\n position: absolute; left: 0; right: 0; height: 2px;\n background: rgba(33,84,239,0.5); z-index: 3;\n transform: translateY(50%); pointer-events: none;\n box-shadow: 0 0 8px rgba(33,84,239,0.3);\n }\n .ps-hpk-line::before {\n content: ''; position: absolute; left: 50%; top: 50%;\n transform: translate(-50%, -50%);\n width: 10px; height: 10px; border-radius: 50%;\n border: 2px solid var(--ps-accent); background: var(--ps-bg-secondary);\n box-shadow: 0 0 8px rgba(33,84,239,0.6);\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Weight Picker \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-wpk {\n display: flex; flex-direction: column; align-items: center;\n height: 100%; justify-content: center; gap: 0.4vw;\n }\n .ps-wpk-title {\n font-size: 1.2vw; font-weight: 700; color: var(--ps-text-primary); margin: 0 0 0.2vw;\n }\n .ps-wpk-desc {\n font-size: 0.65vw; color: var(--ps-text-dim); margin: 0 0 0.5vw;\n }\n .ps-wpk-val {\n display: flex; align-items: baseline; gap: 0.3vw; margin: 1.5vw 0 1vw;\n }\n .ps-wpk-num {\n font-size: 2.8vw; font-weight: 800; color: var(--ps-text-primary); letter-spacing: -0.02em;\n }\n .ps-wpk-unit {\n font-size: 1vw; color: var(--ps-text-dim); font-weight: 500;\n }\n\n / Scale /\n .ps-wpk-scale-wrap { width: 100%; padding: 0 1vw; }\n .ps-wpk-track {\n position: relative; width: 100%; height: 3.5vw;\n cursor: ew-resize; touch-action: none; user-select: none;\n border-bottom: 1.5px solid var(--ps-border-color);\n }\n .ps-wpk-tick {\n position: absolute; bottom: 0; width: 1px; height: 0.6vw; background: #444;\n }\n .ps-wpk-tick.ps-md { height: 1.1vw; background: #666; }\n .ps-wpk-tick.ps-mj { height: 1.8vw; background: #aaa; }\n\n .ps-wpk-indicator {\n position: absolute; top: 0; bottom: 0; transform: translateX(-50%); z-index: 3;\n display: flex; flex-direction: column; align-items: center; pointer-events: none;\n }\n .ps-wpk-ind-line { flex: 1; width: 2px; background: var(--ps-accent); }\n .ps-wpk-ind-dot {\n width: 10px; height: 10px; border-radius: 50%;\n background: var(--ps-accent); border: 2px solid var(--ps-accent); flex-shrink: 0;\n box-shadow: 0 0 8px rgba(33,84,239,0.7);\n }\n\n .ps-wpk-labels {\n position: relative; width: 100%; height: 1.4vw; margin-top: 0.3vw;\n }\n .ps-wpk-labels span {\n position: absolute; transform: translateX(-50%);\n font-size: 0.65vw; color: #bbb; font-weight: 600; pointer-events: none;\n }\n\n / Mobile: stack vertically /\n @media (max-width: 600px) {\n .ps-tryon-sizing-split { flex-direction: column; }\n .ps-tryon-sizing-img-col { max-height: 280px; }\n .ps-tryon-sf-next { width: 100%; text-align: center; display: flex; justify-content: center; }\n .ps-tryon-sf-measure-overlay { font-size: 12px; padding: 6px 12px; gap: 5px; bottom: 8px; left: 8px; border-radius: 8px; }\n .ps-tryon-sf-mode-switch { margin-top: 8px; }\n .ps-tryon-sf-switch-btn { font-size: 12px; }\n .ps-hpk-title, .ps-wpk-title { font-size: 18px; }\n .ps-hpk-desc, .ps-wpk-desc { font-size: 11px; }\n .ps-hpk-num { font-size: 32px; }\n .ps-hpk-unit { font-size: 14px; }\n .ps-hpk-toggle button { font-size: 13px; padding: 5px 18px; }\n .ps-hpk-area { min-height: 240px; }\n .ps-hpk-model img { max-width: 100px; }\n .ps-hpk-mark-label { font-size: 12px; }\n .ps-hpk-mark-tick { width: 12px; }\n .ps-wpk-num { font-size: 38px; }\n .ps-wpk-unit { font-size: 14px; }\n .ps-wpk-track { height: 50px; }\n .ps-wpk-labels span { font-size: 10px; }\n }\n\n / Keep old class names for backwards compat /\n .ps-tryon-section-title { font-size: 0.95vw; font-weight: 600; color: var(--ps-text-primary); margin: 0 0 0.8vw; }\n .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 2.5vw 1vw; text-align: center; }\n .ps-tryon-sg-checking-icon { color: var(--ps-accent); margin-bottom: 0.8vw; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }\n .ps-tryon-sg-checking-icon svg { stroke: currentColor; fill: none; }\n @keyframes ps-pulse-ruler { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }\n .ps-tryon-sg-checking-bar-wrap { width: 9vw; height: 4px; background: var(--ps-border-color); border-radius: 2px; overflow: hidden; margin-bottom: 1vw; }\n .ps-tryon-sg-checking-bar { height: 100%; width: 40%; background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light)); border-radius: 2px; animation: ps-sg-bar 1.5s ease-in-out infinite; }\n @keyframes ps-sg-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }\n .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: 0.3vw; }\n .ps-tryon-sg-checking-sub { font-size: 0.75vw; color: var(--ps-text-secondary); margin: 0; }\n\n / Back button /\n .ps-tryon-back { display: flex; align-items: center; gap: 0.3vw; background: none; border: none; color: var(--ps-text-secondary); font-size: 0.8vw; cursor: pointer; padding: 0; margin-bottom: 0.7vw; font-family: inherit; transition: color 0.2s; }\n .ps-tryon-back:hover { color: var(--ps-text-primary); }\n .ps-tryon-back svg { stroke: currentColor; fill: none; }\n\n / Sizing form (legacy \u2014 redirect to split view) /\n .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 0.7vw; }\n .ps-tryon-input-row { display: flex; align-items: center; gap: 0.52vw; }\n .ps-tryon-input-row label { font-size: 0.68vw; font-weight: 500; color: var(--ps-text-secondary); min-width: 4.7vw; flex-shrink: 0; }\n .ps-tryon-input-row input {\n flex: 1; padding: 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none;\n transition: border-color 0.2s; -moz-appearance: textfield;\n }\n .ps-tryon-input-row input::-webkit-outer-spin-button,\n .ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-tryon-input-row input:focus { border-color: var(--ps-accent); }\n .ps-tryon-input-unit { font-size: 0.63vw; color: var(--ps-text-muted); flex-shrink: 0; }\n .ps-tryon-height-ft { display: flex; align-items: center; gap: 0.31vw; flex: 1; }\n .ps-tryon-height-ft input { width: 3.13vw; padding: 0.52vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }\n .ps-tryon-height-ft input::-webkit-outer-spin-button, .ps-tryon-height-ft input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-tryon-height-ft input:focus { border-color: var(--ps-accent); }\n .ps-tryon-height-ft span { font-size: 0.63vw; color: var(--ps-text-muted); }\n .ps-tryon-country-select {\n flex: 1; padding: 0.52vw 1.88vw 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit;\n appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;\n background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat; background-position: right 0.73vw center;\n }\n .ps-tryon-country-select:focus { border-color: var(--ps-accent); }\n .ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw; overflow: hidden; }\n .ps-tryon-unit-btn {\n padding: 0.31vw 0.73vw; background: transparent; border: none; color: var(--ps-text-secondary);\n font-size: 0.63vw; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;\n }\n .ps-tryon-unit-btn.ps-active { background: var(--ps-accent); color: #fff; }\n\n / Unit tabs (cm / inches) /\n .ps-tryon-unit-tabs {\n display: flex; gap: 0; background: var(--ps-bg-secondary); border: 1.5px solid var(--ps-border-color);\n border-radius: 0.63vw; overflow: hidden; margin-bottom: 0.83vw;\n }\n .ps-tryon-unit-tab {\n flex: 1; padding: 0.57vw 0.83vw; background: transparent; border: none;\n color: var(--ps-text-muted); font-size: 0.78vw; font-weight: 700; cursor: pointer;\n transition: all 0.2s ease; font-family: inherit; letter-spacing: 0.04em;\n position: relative;\n }\n .ps-tryon-unit-tab:first-child { border-right: 1px solid var(--ps-border-color); }\n .ps-tryon-unit-tab:hover { color: var(--ps-text-secondary); background: rgba(0,0,0,0.02); }\n .ps-tryon-unit-tab.ps-active {\n background: var(--ps-accent); color: #fff;\n }\n .ps-tryon-section-label { font-size: 0.57vw; font-weight: 700; color: var(--ps-accent); text-transform: uppercase; letter-spacing: 0.08em; margin: 0.21vw 0 0.1vw; }\n .ps-tryon-optional-section { border-top: 1px solid var(--ps-border-color); padding-top: 0.52vw; margin-top: 0.31vw; }\n .ps-tryon-optional-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid var(--ps-border-color); border-radius: 0.52vw; padding: 0.52vw 0.73vw; color: var(--ps-text-secondary); font-size: 0.68vw; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }\n .ps-tryon-optional-toggle:hover { border-color: #555; color: var(--ps-text-secondary); }\n .ps-tryon-chevron { transition: transform 0.2s; font-size: 0.73vw; }\n .ps-tryon-optional-fields { display: flex; flex-direction: column; gap: 0.52vw; padding-top: 0.63vw; }\n .ps-tryon-shoe-section { border-top: 1px solid var(--ps-border-color); padding-top: 0.73vw; margin-top: 0.31vw; display: flex; flex-direction: column; gap: 0.52vw; }\n .ps-tryon-shoe-title { font-size: 0.68vw; font-weight: 600; color: var(--ps-text-secondary); }\n .ps-tryon-disclaimer { font-size: 0.57vw; color: var(--ps-text-muted); margin: 0.21vw 0 0; }\n .ps-tryon-form-save-toggle { margin-top: 0.52vw; display: flex; flex-direction: column; gap: 0.42vw; }\n .ps-tryon-form-save-check {\n display: flex; align-items: center; gap: 0.42vw; font-size: 0.68vw; color: var(--ps-text-secondary); cursor: pointer; user-select: none;\n }\n .ps-tryon-form-save-check input[type=\"checkbox\"] {\n width: 0.83vw; height: 0.83vw; accent-color: var(--ps-accent); cursor: pointer;\n }\n .ps-tryon-form-save-name {\n padding: 0.42vw 0.63vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit; outline: none;\n transition: border-color 0.2s;\n }\n .ps-tryon-form-save-name:focus { border-color: var(--ps-accent); }\n\n / Processing /\n .ps-tryon-processing { text-align: center; padding: 1.25vw; display: flex; flex-direction: column; align-items: center; }\n\n .ps-tryon-processing-image-wrap {\n position: relative; width: 11.5vw; height: 14.6vw; margin: 0 auto 1.25vw;\n border-radius: 0.83vw; overflow: hidden; border: 2px solid var(--ps-border-color);\n }\n .ps-tryon-processing-blur {\n position: absolute; inset: -1.04vw; background-size: cover; background-position: center;\n filter: blur(25px) brightness(0.5); transform: scale(1.2);\n }\n .ps-tryon-processing-model {\n position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block;\n }\n .ps-tryon-scan-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(180deg, rgba(33,84,239,0.05) 0%, transparent 40%, transparent 60%, rgba(33,84,239,0.05) 100%);\n pointer-events: none;\n }\n .ps-tryon-scan-line {\n position: absolute; left: 0; right: 0; height: 3px;\n background: linear-gradient(90deg, transparent, #bb945c 20%, var(--ps-accent-light) 50%, #bb945c 80%, transparent);\n box-shadow: 0 0 0.78vw rgba(33,84,239,0.6), 0 0 2.08vw rgba(33,84,239,0.2);\n animation: ps-scan 2.5s ease-in-out infinite;\n pointer-events: none; z-index: 2;\n }\n @keyframes ps-scan {\n 0% { top: 0; opacity: 0; }\n 5% { opacity: 1; }\n 95% { opacity: 1; }\n 100% { top: calc(100% - 3px); opacity: 0; }\n }\n\n / Snap processing step cards /\n .ps-tryon-snap-steps {\n display: flex; flex-direction: column; gap: 1.2vw;\n justify-content: center; padding: 2vw 1.5vw;\n }\n .ps-tryon-snap-step {\n display: flex; align-items: center; gap: 0.8vw;\n padding: 0.8vw 1vw; border-radius: 0.5vw;\n background: var(--ps-bg-secondary);\n border: 1px solid var(--ps-border-subtle);\n color: var(--ps-text-muted);\n font-size: 0.83vw; font-weight: 500; font-family: inherit;\n opacity: 0.4;\n transition: all 0.4s ease;\n }\n .ps-tryon-snap-step.ps-active {\n opacity: 1; color: var(--ps-text-primary);\n border-color: var(--ps-border-color);\n animation: ps-pose-fade 0.4s ease both;\n }\n .ps-tryon-snap-step.ps-done {\n opacity: 0.7; color: var(--ps-text-secondary);\n border-color: rgba(74,222,128,0.2);\n }\n .ps-tryon-snap-step-icon {\n width: 1.4vw; height: 1.4vw;\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n }\n .ps-tryon-snap-check {\n color: var(--ps-success-color); font-size: 0.9vw; font-weight: 700;\n }\n .ps-tryon-snap-num {\n color: var(--ps-text-muted); font-size: 0.7vw; font-weight: 600;\n }\n\n / Pose measurement overlay \u2014 animated SVG rings on result image /\n .ps-tryon-pose-overlay {\n position: absolute; inset: 0; width: 100%; height: 100%;\n pointer-events: none; z-index: 2;\n }\n @keyframes ps-pose-draw {\n to { stroke-dashoffset: 0; }\n }\n @keyframes ps-pose-fade {\n to { opacity: 1; }\n }\n @keyframes ps-dot-pulse {\n 0%, 100% { r: 8; opacity: 0.8; }\n 50% { r: 12; opacity: 1; }\n }\n\n .ps-tryon-progress-section {\n display: flex; align-items: center; gap: 0.63vw; width: 100%; max-width: 18vw; margin-bottom: 0.83vw;\n }\n / Shared progress layout used inside StageCycler (desktop) and\n MobileScanningView \u2014 row of ring + bar + percent, same tokens. /\n .ps-tryon-progress-wrap {\n display: flex; align-items: center; gap: 12px;\n / Fixed width \u2014 the parent StageCycler shrinks to fit its text content,\n so any % width would reflow the bar every 2s when the stage label\n swaps. Hard 320px keeps the ring + bar + % visually stable. /\n width: 320px;\n max-width: calc(100vw - 48px);\n margin-top: 18px;\n }\n .ps-tryon-progress-wrap .ps-tryon-progress-bar-wrap {\n flex: 1; height: 6px; border-radius: 4px; overflow: hidden;\n position: relative; background: var(--ps-border-color);\n }\n .ps-tryon-progress-wrap .ps-tryon-progress-bar-fill {\n height: 100%; width: 0%;\n background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light));\n border-radius: 4px; transition: width 0.3s ease;\n }\n .ps-tryon-progress-wrap .ps-tryon-progress-pct {\n font-size: 13px; font-weight: 700; color: var(--ps-accent);\n min-width: 36px; text-align: right;\n font-variant-numeric: tabular-nums;\n }\n .ps-tryon-progress-bar-wrap {\n flex: 1; height: 0.31vw; background: var(--ps-border-color); border-radius: 3px; overflow: hidden;\n position: relative;\n }\n .ps-tryon-progress-bar-wrap::after {\n content: \"\"; position: absolute; inset: 0;\n background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);\n transform: translateX(-100%);\n animation: ps-progress-shimmer 2s linear infinite;\n pointer-events: none;\n }\n @keyframes ps-progress-shimmer {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n .ps-tryon-progress-bar-fill {\n height: 100%; background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light));\n border-radius: 3px; transition: width 0.3s ease; width: 0%;\n position: relative; z-index: 1;\n }\n .ps-tryon-progress-pct {\n font-size: 0.68vw; font-weight: 700; color: var(--ps-accent); min-width: 1.88vw; text-align: right;\n font-variant-numeric: tabular-nums;\n }\n\n / Circular ETA ring \u2014 64\u00D764 px SVG with a track + progress circle; ETA\n text centered. strokeDashoffset is driven by the ticker in\n PrimeStyleTryonInner, so CSS only styles the appearance. /\n .ps-tryon-progress-ring {\n position: relative; width: 64px; height: 64px; flex: 0 0 64px;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-tryon-progress-ring svg { transform: rotate(-90deg); }\n .ps-tryon-progress-ring-track {\n fill: none; stroke: var(--ps-border-color); stroke-width: 5;\n }\n .ps-tryon-progress-ring-fill {\n fill: none; stroke: var(--ps-accent); stroke-width: 5;\n stroke-linecap: round;\n transition: stroke-dashoffset 0.3s ease;\n }\n .ps-tryon-progress-eta {\n position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;\n font-size: 13px; font-weight: 700; color: var(--ps-accent);\n font-variant-numeric: tabular-nums; letter-spacing: 0.01em;\n pointer-events: none;\n }\n\n @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }\n .ps-tryon-processing-text {\n font-size: 0.73vw; color: var(--ps-text-primary); margin: 0 0 0.21vw;\n opacity: 1; transition: opacity 0.18s ease;\n }\n .ps-tryon-processing-sub { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }\n\n / \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n ProcessingView v2 \u2014 split (image left ~65%,\n panel right ~35%) with engaging cards while\n the user waits 25s for the try-on to complete.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 /\n .ps-tryon-processing-v2 {\n display: flex; gap: 1.2vw;\n padding: 1.2vw;\n width: 100%; height: 100%;\n align-items: stretch;\n }\n .ps-tryon-processing-v2-image {\n flex: 0 0 62%;\n position: relative;\n border-radius: 0.6vw;\n overflow: hidden;\n background: var(--ps-bg-tertiary, #f3f4f6);\n min-height: 28vw;\n }\n .ps-tryon-processing-v2-image .ps-tryon-processing-blur,\n .ps-tryon-processing-v2-image .ps-tryon-processing-model {\n position: absolute; inset: 0;\n width: 100%; height: 100%;\n }\n .ps-tryon-processing-v2-image .ps-tryon-processing-blur {\n background-size: cover; background-position: center;\n filter: blur(40px) brightness(0.8); opacity: 0.65;\n }\n .ps-tryon-processing-v2-image .ps-tryon-processing-model {\n object-fit: contain; z-index: 1;\n }\n .ps-tryon-processing-v2-badge {\n position: absolute; top: 0.8vw; left: 0.8vw; z-index: 3;\n display: inline-flex; align-items: center; gap: 0.4vw;\n padding: 0.4vw 0.7vw;\n background: rgba(33, 84, 239, 0.10);\n color: var(--ps-accent);\n border: 1px solid rgba(33, 84, 239, 0.20);\n border-radius: 999px;\n font-size: 0.6vw; font-weight: 700;\n letter-spacing: 0.12em;\n }\n .ps-tryon-processing-v2-badge-dot {\n width: 6px; height: 6px; border-radius: 50%;\n background: var(--ps-accent);\n animation: ps-pulse-dot 1.4s ease-in-out infinite;\n }\n @keyframes ps-pulse-dot {\n 0%, 100% { opacity: 0.3; transform: scale(0.85); }\n 50% { opacity: 1; transform: scale(1.1); }\n }\n\n .ps-tryon-processing-v2-panel {\n flex: 1 1 38%;\n display: flex; flex-direction: column;\n gap: 0.9vw;\n padding: 0.6vw 0.4vw;\n min-width: 0;\n }\n .ps-tryon-processing-v2-head {\n text-align: center;\n }\n .ps-tryon-processing-v2-title {\n margin: 0;\n font-size: 1.1vw; font-weight: 700;\n color: var(--ps-text-primary);\n line-height: 1.25;\n }\n .ps-tryon-processing-v2-sub {\n margin: 0.3vw 0 0;\n font-size: 0.68vw; line-height: 1.45;\n color: var(--ps-text-secondary);\n }\n\n .ps-tryon-processing-v2-ring-wrap {\n position: relative;\n width: 180px; height: 180px;\n margin: 0.6vw auto 0;\n }\n .ps-tryon-processing-v2-ring-wrap svg {\n transform: rotate(-90deg);\n width: 180px; height: 180px;\n }\n .ps-tryon-processing-v2-ring-wrap .ps-tryon-progress-ring-track {\n fill: none; stroke: var(--ps-border-color); stroke-width: 6;\n }\n .ps-tryon-processing-v2-ring-wrap .ps-tryon-progress-ring-fill {\n fill: none; stroke: var(--ps-accent); stroke-width: 6;\n stroke-linecap: round;\n transition: stroke-dashoffset 0.3s ease;\n }\n .ps-tryon-processing-v2-ring-text {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n pointer-events: none;\n }\n .ps-tryon-processing-v2-pct {\n font-size: 34px; font-weight: 700;\n color: var(--ps-accent);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n }\n .ps-tryon-processing-v2-status {\n display: block;\n font-size: 13px; font-weight: 700;\n letter-spacing: 0.1em; text-transform: uppercase;\n color: var(--ps-text-muted);\n text-align: center;\n margin: 14px auto 0;\n line-height: 1.3;\n }\n\n .ps-tryon-processing-v2-bar-hidden {\n display: none;\n }\n\n .ps-tryon-processing-v2-sep {\n height: 1px; width: 100%;\n background: var(--ps-border-subtle, rgba(0,0,0,0.06));\n margin: 0.4vw 0 0;\n }\n\n .ps-tryon-processing-v2-section-label {\n font-size: 0.6vw; font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-muted);\n margin-bottom: 0.5vw;\n }\n .ps-tryon-processing-v2-cards {\n display: flex; flex-direction: column; gap: 0.5vw;\n }\n .ps-tryon-processing-v2-card {\n display: flex; align-items: flex-start; gap: 0.6vw;\n padding: 0.7vw 0.8vw;\n background: var(--ps-bg-secondary, #f9fafb);\n border: 1px solid var(--ps-border-subtle, rgba(0,0,0,0.06));\n border-radius: 0.55vw;\n }\n .ps-tryon-processing-v2-card-icon {\n width: 1.7vw; height: 1.7vw;\n min-width: 28px; min-height: 28px;\n display: flex; align-items: center; justify-content: center;\n border-radius: 50%;\n flex-shrink: 0;\n }\n .ps-tryon-processing-v2-card-icon.ps-style { background: rgba(33, 84, 239, 0.10); color: var(--ps-accent); }\n .ps-tryon-processing-v2-card-icon.ps-spotlight { background: rgba(168, 85, 247, 0.10); color: #9333ea; }\n .ps-tryon-processing-v2-card-icon.ps-fact { background: rgba(16, 185, 129, 0.10); color: #059669; }\n .ps-tryon-processing-v2-card-text {\n flex: 1; min-width: 0;\n }\n .ps-tryon-processing-v2-card-head {\n font-size: 0.7vw; font-weight: 700;\n color: var(--ps-text-primary);\n margin-bottom: 2px;\n }\n .ps-tryon-processing-v2-card-body {\n font-size: 0.65vw; line-height: 1.5;\n color: var(--ps-text-secondary);\n animation: ps-fade-in 0.4s ease;\n }\n @keyframes ps-fade-in {\n from { opacity: 0; transform: translateY(2px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .ps-tryon-processing-v2-cancel {\n margin-top: auto;\n background: transparent; border: none;\n color: var(--ps-text-muted);\n font-family: inherit;\n font-size: 0.68vw; font-weight: 600;\n cursor: pointer;\n padding: 0.3vw 0;\n text-align: center;\n width: 100%;\n transition: color 0.15s;\n }\n .ps-tryon-processing-v2-cancel:hover { color: var(--ps-text-primary); }\n\n / Result \u2014 split layout /\n .ps-tryon-result-split {\n display: flex; gap: 1.5vw; text-align: left; align-items: flex-start;\n }\n .ps-tryon-result-img-col {\n flex: 0 0 48%; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 0.63vw;\n }\n .ps-tryon-result-img-col img {\n width: 100%; max-height: calc(80vh - 8vw); object-fit: contain; border-radius: 0.73vw;\n box-shadow: 0 0.42vw 1.67vw rgba(0,0,0,0.3); animation: ps-scale-in 0.5s ease both;\n }\n .ps-tryon-result-dl-btn {\n display: inline-flex; align-items: center; gap: 0.31vw;\n padding: 0.36vw 0.83vw; background: transparent; border: 1px solid var(--ps-border-color);\n border-radius: 0.42vw; color: var(--ps-text-secondary); font-size: 0.68vw; font-weight: 600;\n cursor: pointer; font-family: inherit; transition: all 0.2s;\n }\n .ps-tryon-result-dl-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n .ps-tryon-result-dl-btn svg { stroke: currentColor; }\n .ps-tryon-result-info-col {\n flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1vw;\n }\n .ps-tryon-result-fit {\n display: flex; flex-direction: column; gap: 0.36vw;\n }\n .ps-tryon-result-fit-row {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.42vw 0; border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-tryon-result-fit-area { font-size: 0.78vw; font-weight: 600; color: var(--ps-text-secondary); }\n .ps-tryon-result-actions-col {\n display: flex; flex-direction: column; gap: 0.42vw; margin-top: 0.52vw;\n }\n .ps-tryon-result-startover {\n background: none; border: none; color: var(--ps-text-muted); font-size: 0.68vw;\n font-weight: 600; cursor: pointer; font-family: inherit; transition: color 0.2s;\n text-align: center;\n }\n .ps-tryon-result-startover:hover { color: var(--ps-text-secondary); }\n / Legacy result layout /\n .ps-tryon-result-layout { text-align: center; }\n .ps-tryon-result-layout img { width: 100%; border-radius: 0.63vw; margin-bottom: 0.83vw; }\n .ps-tryon-result-actions { display: flex; gap: 0.42vw; margin-top: 0.83vw; }\n .ps-tryon-result-actions button {\n flex: 1; padding: 0.63vw; font-family: var(--ps-modal-font, system-ui, sans-serif);\n font-size: 0.68vw; font-weight: 600; border-radius: 0.52vw; cursor: pointer; transition: all 0.2s; border: none;\n }\n .ps-tryon-btn-download { background: var(--ps-accent); color: #fff; }\n .ps-tryon-btn-download:hover { opacity: 0.9; }\n .ps-tryon-btn-retry { background: rgba(0,0,0,0.06); color: var(--ps-text-primary); border: 1px solid var(--ps-border-color) !important; }\n .ps-tryon-btn-retry:hover { background: rgba(0,0,0,0.08); }\n\n / \u2500\u2500 Size Result \u2500\u2500 /\n .ps-tryon-sr { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }\n .ps-tryon-sr-loading { text-align: center; padding: 3vw 0; }\n .ps-tryon-sr-loading p { font-size: 0.83vw; color: var(--ps-text-muted); margin-top: 0.6vw; }\n .ps-tryon-size-loading-spinner {\n width: 1.8vw; height: 1.8vw; border: 2px solid var(--ps-border-color);\n border-top-color: var(--ps-accent); border-radius: 50%;\n animation: ps-spin 0.7s linear infinite; margin: 0 auto;\n }\n @keyframes ps-spin { to { transform: rotate(360deg); } }\n .ps-tryon-sr-loading-pulse { animation: ps-loading-pulse 2s ease-in-out infinite; }\n @keyframes ps-loading-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }\n\n .ps-tryon-sr-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5vw; flex: 1; min-height: 0; overflow: hidden; }\n\n / Left: product image /\n .ps-tryon-sr-img-col {\n position: relative; border-radius: 0.8vw; overflow: hidden; background: transparent;\n }\n .ps-tryon-sr-product-img {\n width: 100%; height: 100%;\n object-fit: contain; object-position: center center;\n display: block; border-radius: 0.8vw;\n }\n .ps-tryon-sr-chart-btn {\n position: absolute; bottom: 1vw; left: 1vw;\n background: rgba(255,255,255,0.95); color: var(--ps-text-primary); border: none;\n padding: 0.4vw 0.8vw; border-radius: 0.3vw; font-size: 0.7vw; font-weight: 600;\n cursor: pointer; font-family: inherit; transition: all 0.2s;\n }\n .ps-tryon-sr-chart-btn:hover { background: #fff; }\n\n / Right column \u2014 scrolls independently /\n .ps-tryon-sr-right-col {\n display: flex; flex-direction: column; gap: 0.8vw;\n overflow-y: auto; min-height: 0;\n scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n }\n .ps-tryon-sr-right-fixed {\n overflow: hidden;\n }\n .ps-tryon-sr-right-scroll {\n flex: 1; min-height: 0; overflow-y: auto;\n scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n }\n\n / Size hero \u2014 big letter + label /\n .ps-tryon-sr-size-hero { display: flex; align-items: flex-start; gap: 0.8vw; }\n .ps-tryon-sr-size-letter {\n font-size: 3vw; font-weight: 800; color: var(--ps-text-primary); line-height: 1; letter-spacing: -0.02em;\n }\n .ps-tryon-sr-size-meta { display: flex; flex-direction: column; gap: 0.15vw; padding-top: 0.3vw; }\n .ps-tryon-sr-size-label { font-size: 0.65vw; font-weight: 700; color: var(--ps-text-dim); text-transform: uppercase; letter-spacing: 0.1em; }\n .ps-tryon-sr-size-label.ps-not-rec { color: var(--ps-error-color); }\n .ps-tryon-sr-edit-link {\n background: none; border: none; color: var(--ps-accent); font-size: 0.7vw; font-weight: 500;\n cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0; text-align: left;\n }\n .ps-tryon-sr-edit-link:hover { color: var(--ps-accent-light); }\n\n / Size changed /\n .ps-tryon-sr-size-changed {\n display: inline-flex; align-items: center; gap: 0.3vw;\n padding: 0.3vw 0.6vw; border-radius: 0.3vw;\n background: rgba(33,84,239,0.08); border: 1px solid rgba(33,84,239,0.2);\n font-size: 0.7vw; color: var(--ps-accent-light);\n }\n .ps-tryon-sr-size-changed svg { stroke: var(--ps-accent); }\n .ps-tryon-sr-size-changed strong { color: var(--ps-text-primary); }\n\n / Tabs /\n .ps-tryon-sr-tabs { display: flex; border-bottom: 1.5px solid var(--ps-border-color); margin-top: 3.5vh; }\n .ps-tryon-sr-tab {\n background: none; border: none; padding: 0.4vw 0.8vw; margin-bottom: -1.5px;\n font-size: 0.75vw; font-weight: 600; color: var(--ps-text-muted); cursor: pointer;\n font-family: inherit; border-bottom: 2px solid transparent; transition: all 0.2s;\n }\n .ps-tryon-sr-tab:hover { color: var(--ps-text-secondary); }\n .ps-tryon-sr-tab.ps-active { color: var(--ps-text-primary); border-bottom-color: var(--ps-accent); }\n\n / Fit list \u2014 \"Your fit\" tab /\n / \u2500\u2500 Fit table \u2500\u2500 /\n .ps-tryon-sr-fit-table {\n width: 100%; border-collapse: collapse; font-size: 0.85vw; margin-top: 0.8vw;\n }\n .ps-tryon-sr-fit-table thead th {\n font-size: 0.7vw; font-weight: 500; color: #aaa; text-transform: uppercase;\n letter-spacing: 0.05em; padding: 0.3vw 0 0.5vw; text-align: left;\n border-bottom: 1px solid var(--ps-border-color);\n }\n .ps-tryon-sr-fit-table thead th:last-child { text-align: right; }\n .ps-tryon-sr-fit-table tbody tr { border-bottom: 1px solid var(--ps-border-subtle); }\n .ps-tryon-sr-fit-table tbody tr:last-child { border-bottom: none; }\n .ps-tryon-sr-fit-table td { padding: 0.75vw 0; vertical-align: middle; color: var(--ps-text-primary); }\n .ps-tryon-sr-fit-table td:last-child { text-align: right; }\n .ps-tryon-sr-ft-area { font-weight: 600; color: var(--ps-text-primary); }\n .ps-tryon-sr-ft-you { color: var(--ps-text-primary); font-weight: 600; }\n .ps-tryon-sr-ft-garment { color: var(--ps-text-secondary); }\n .ps-tryon-sr-fit-status {\n font-size: 0.65vw; font-weight: 600; padding: 0.18vw 0.45vw; border-radius: 0.25vw;\n white-space: nowrap; display: inline-block;\n }\n .ps-tryon-sr-fit-status.ps-fit-good { color: #4ade80; background: rgba(74,222,128,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-a-bit-tight { color: #f59e0b; background: rgba(245,158,11,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-tight { color: #e87040; background: rgba(232,112,64,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-too-tight { color: #dc2626; background: rgba(220,38,38,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-a-bit-loose { color: #f59e0b; background: rgba(245,158,11,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-loose { color: #e87040; background: rgba(232,112,64,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-too-loose { color: #dc2626; background: rgba(220,38,38,0.12); }\n\n / \u2500\u2500 Size guide fit list (chart tab) \u2500\u2500 /\n .ps-tryon-sr-fit-list { display: flex; flex-direction: column; gap: 0; }\n .ps-tryon-sr-fit-item {\n padding: 0.55vw 0; border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-tryon-sr-fit-item:last-child { border-bottom: none; }\n .ps-tryon-sr-fit-head {\n display: flex; justify-content: space-between; align-items: baseline;\n }\n .ps-tryon-sr-fit-area { font-size: 0.8vw; font-weight: 600; color: var(--ps-text-primary); }\n .ps-tryon-sr-fit-range { font-size: 0.8vw; font-weight: 600; color: var(--ps-text-dim); }\n .ps-tryon-sr-fit-note { font-size: 0.6vw; color: #555; margin-top: 0.5vw; text-align: center; }\n\n / \u2500\u2500 Upload photo modal (inline in size result) \u2500\u2500 /\n .ps-tryon-upload-modal-overlay {\n position: absolute; inset: 0; z-index: 20;\n background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);\n display: flex; align-items: center; justify-content: center;\n border-radius: var(--ps-modal-radius, 0.83vw);\n }\n .ps-tryon-upload-modal {\n background: var(--ps-bg-secondary); border: 1px solid var(--ps-border-color); border-radius: 0.83vw;\n padding: 1.2vw; width: 80%; max-width: 22vw;\n display: flex; flex-direction: column; gap: 0.8vw;\n }\n .ps-tryon-upload-modal-header {\n display: flex; justify-content: space-between; align-items: center;\n }\n .ps-tryon-upload-modal-header h3 {\n font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); margin: 0;\n }\n .ps-tryon-upload-modal-close {\n background: none; border: none; color: var(--ps-text-secondary); font-size: 1.2vw;\n cursor: pointer; line-height: 1; padding: 0;\n }\n .ps-tryon-upload-modal-close:hover { color: var(--ps-text-primary); }\n .ps-tryon-upload-modal-dropzone {\n border: 1.5px dashed #444; border-radius: 0.6vw; padding: 1.5vw;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 0.4vw; cursor: pointer; transition: all 0.2s; min-height: 8vw;\n }\n .ps-tryon-upload-modal-dropzone:hover { border-color: var(--ps-accent); }\n .ps-tryon-upload-modal-dropzone.ps-drag-over { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n .ps-tryon-upload-modal-dropzone svg { color: var(--ps-text-muted); }\n .ps-tryon-upload-modal-dropzone p {\n font-size: 0.75vw; color: var(--ps-text-secondary); margin: 0; font-weight: 500;\n }\n .ps-tryon-upload-modal-dropzone span {\n font-size: 0.6vw; color: var(--ps-text-muted);\n }\n .ps-tryon-upload-modal-preview {\n position: relative; border-radius: 0.6vw; overflow: hidden;\n max-height: 14vw; display: flex; align-items: center; justify-content: center;\n background: #111;\n }\n .ps-tryon-upload-modal-preview img {\n width: 100%; max-height: 14vw; object-fit: contain;\n }\n .ps-tryon-upload-modal-remove {\n position: absolute; top: 0.3vw; right: 0.3vw;\n width: 1.3vw; height: 1.3vw; border-radius: 50%;\n background: rgba(0,0,0,0.7); border: none; color: var(--ps-text-primary);\n font-size: 0.8vw; cursor: pointer; display: flex;\n align-items: center; justify-content: center;\n }\n .ps-tryon-upload-modal-remove:hover { background: #dc2626; }\n\n .ps-tryon-sr-full-chart-btn {\n display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n margin: 0.6vw auto 0; padding: 0.4vw 1vw;\n border: 1.5px solid var(--ps-border-color); border-radius: 0.4vw; background: transparent;\n color: var(--ps-text-secondary); font-size: 0.7vw; font-weight: 600; cursor: pointer;\n font-family: inherit; transition: all 0.2s;\n }\n .ps-tryon-sr-full-chart-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n\n / Chart table \u2014 \"Size guide\" tab /\n / Full-screen overlay inside the modal /\n .ps-tryon-sr-chart-overlay {\n position: absolute; inset: 0; z-index: 50;\n background: var(--ps-modal-bg, #FFFFFF);\n display: flex; flex-direction: column;\n animation: ps-fade-in 0.2s ease;\n overflow: hidden;\n }\n .ps-tryon-sr-chart-modal, .ps-tryon-guide-modal {\n display: flex; flex-direction: column;\n flex: 1; min-height: 0; width: 100%; height: 100%;\n }\n .ps-tryon-sr-chart-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.7vw 1.2vw; border-bottom: 1px solid var(--ps-border-color); flex-shrink: 0;\n }\n .ps-tryon-sr-chart-header h4 { margin: 0; font-size: 0.85vw; font-weight: 700; color: var(--ps-text-primary); }\n .ps-tryon-sr-chart-close {\n background: none; border: none; color: var(--ps-text-muted); font-size: 1.1vw; cursor: pointer; padding: 0.2vw;\n font-family: inherit; transition: color 0.2s;\n }\n .ps-tryon-sr-chart-close:hover { color: var(--ps-text-primary); }\n .ps-tryon-sr-chart-scroll { padding: 1vw 1.2vw; overflow-y: auto; flex: 1; min-height: 0; }\n\n / Photo guide \u2014 side by side /\n .ps-tryon-guide-modal { }\n .ps-tryon-guide-split {\n display: flex; flex: 1; min-height: 0; gap: 0; overflow: hidden;\n }\n .ps-tryon-guide-left {\n flex: 1; display: flex; flex-direction: column; gap: 0.6vw;\n padding: 1vw; border-right: 1px solid #282828;\n justify-content: center; min-height: 0; overflow: hidden;\n }\n .ps-tryon-guide-right {\n flex: 1; display: flex; flex-direction: column; gap: 0.6vw;\n padding: 0.8vw; overflow-y: auto; min-height: 0;\n scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n }\n .ps-tryon-guide-right::-webkit-scrollbar { width: 4px; }\n .ps-tryon-guide-right::-webkit-scrollbar-track { background: transparent; }\n .ps-tryon-guide-right::-webkit-scrollbar-thumb { background: var(--ps-border-color); border-radius: 2px; }\n\n / Upload dropzone /\n .ps-tryon-guide-dropzone {\n border: 1.5px dashed var(--ps-border-color); border-radius: 0.6vw; padding: 1.5vw 1vw;\n display: flex; flex-direction: column; align-items: center; gap: 0.3vw;\n cursor: pointer; transition: all 0.2s; text-align: center;\n }\n .ps-tryon-guide-dropzone:hover, .ps-tryon-guide-dropzone.ps-drag {\n border-color: var(--ps-accent); background: rgba(33,84,239,0.05);\n }\n .ps-tryon-guide-dropzone svg { color: #555; stroke: #555; }\n .ps-tryon-guide-dropzone-text { margin: 0; font-size: 0.9vw; color: var(--ps-text-primary); font-weight: 600; }\n .ps-tryon-guide-dropzone p { margin: 0; font-size: 0.65vw; color: var(--ps-text-secondary); font-weight: 500; }\n .ps-tryon-guide-dropzone span { font-size: 0.52vw; color: var(--ps-text-muted); }\n .ps-tryon-guide-dropzone.ps-has-file { padding: 0; cursor: default; border-style: solid; flex: 1; min-height: 0; overflow: hidden; }\n\n / Preview inside dropzone /\n .ps-tryon-guide-preview { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n .ps-tryon-guide-preview img {\n max-width: 100%; max-height: 100%; object-fit: contain;\n display: block; border-radius: 0.5vw;\n background: var(--ps-modal-bg, #FFFFFF);\n }\n .ps-tryon-guide-preview-remove {\n position: absolute; top: 0.4vw; right: 0.4vw;\n width: 1.4vw; height: 1.4vw; display: flex; align-items: center; justify-content: center;\n background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.1); border-radius: 50%;\n color: var(--ps-text-primary); font-size: 0.65vw; cursor: pointer; font-family: inherit;\n transition: all 0.2s;\n }\n .ps-tryon-guide-preview-remove:hover { background: rgba(239,68,68,0.8); }\n\n\n / Selected file row /\n .ps-tryon-guide-file {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.45vw 0.7vw; background: #222; border-radius: 0.4vw; border: 1px solid var(--ps-border-color);\n }\n .ps-tryon-guide-file-name { font-size: 0.6vw; color: var(--ps-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .ps-tryon-guide-file-remove {\n background: none; border: none; color: #e55; font-size: 0.55vw; cursor: pointer; font-family: inherit;\n padding: 0.1vw 0.3vw; transition: color 0.2s;\n }\n .ps-tryon-guide-file-remove:hover { color: #f77; }\n\n / Tips section /\n .ps-tryon-guide-tips {\n border: 1px solid #282828; border-radius: 0.5vw; overflow: hidden;\n }\n .ps-tryon-guide-tips-header {\n display: flex; align-items: center; gap: 0.4vw;\n padding: 0.5vw 0.7vw; background: #1e1f1e; font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary);\n }\n .ps-tryon-guide-tips-header svg { stroke: var(--ps-accent); }\n .ps-tryon-guide-tips-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 0;\n }\n .ps-tryon-guide-do, .ps-tryon-guide-dont { padding: 0.5vw 0.7vw; }\n .ps-tryon-guide-do { background: rgba(34,197,94,0.06); border-right: 1px solid #282828; }\n .ps-tryon-guide-dont { background: rgba(239,68,68,0.06); }\n .ps-tryon-guide-do-title { font-size: 0.68vw; font-weight: 700; color: #4ade80; display: block; margin-bottom: 0.3vw; }\n .ps-tryon-guide-dont-title { font-size: 0.68vw; font-weight: 700; color: #f87171; display: block; margin-bottom: 0.3vw; }\n .ps-tryon-guide-do ul, .ps-tryon-guide-dont ul {\n margin: 0; padding: 0 0 0 0.8vw; list-style: disc;\n }\n .ps-tryon-guide-do li, .ps-tryon-guide-dont li {\n font-size: 0.58vw; color: #bbb; line-height: 1.7;\n }\n .ps-tryon-guide-do li { color: #a7f3d0; }\n .ps-tryon-guide-dont li { color: #fca5a5; }\n\n / Quick tip /\n .ps-tryon-guide-quicktip {\n display: flex; gap: 0.4vw; padding: 0.5vw 0.7vw;\n background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 0.5vw;\n }\n .ps-tryon-guide-quicktip-icon { font-size: 0.8vw; flex-shrink: 0; }\n .ps-tryon-guide-quicktip-title { font-size: 0.68vw; font-weight: 700; color: #60a5fa; display: block; }\n .ps-tryon-guide-quicktip p { margin: 0.15vw 0 0; font-size: 0.6vw; color: #93c5fd; line-height: 1.5; }\n\n / Privacy note /\n .ps-tryon-guide-privacy {\n display: flex; gap: 0.4vw; padding: 0.5vw 0.7vw;\n background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.15); border-radius: 0.5vw;\n }\n .ps-tryon-guide-privacy-icon { font-size: 0.8vw; flex-shrink: 0; }\n .ps-tryon-guide-privacy-title { font-size: 0.68vw; font-weight: 700; color: #f87171; display: block; }\n .ps-tryon-guide-privacy p { margin: 0.15vw 0 0; font-size: 0.6vw; color: #fca5a5; line-height: 1.5; }\n\n / Section title in full chart /\n .ps-tryon-chart-section { margin-bottom: 1.2vw; }\n .ps-tryon-chart-section:last-child { margin-bottom: 0; }\n .ps-tryon-chart-section-title {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.4vw 0; margin-bottom: 0.4vw;\n border-bottom: 1px solid var(--ps-border-color); font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary);\n }\n .ps-tryon-chart-section-rec {\n font-size: 0.6vw; font-weight: 500; color: var(--ps-text-secondary);\n }\n .ps-tryon-chart-section-rec strong {\n color: var(--ps-accent); font-weight: 700; font-size: 0.7vw;\n }\n .ps-active-row td { color: var(--ps-text-primary) !important; background: rgba(33,84,239,0.1); }\n .ps-active-row .ps-size-col { color: var(--ps-accent) !important; font-weight: 700; }\n\n .ps-tryon-sr-chart-table-wrap { overflow-x: auto; max-height: 14vw; overflow-y: auto; }\n .ps-tryon-sr-chart-table { width: 100%; font-size: 0.7vw; border-collapse: collapse; }\n .ps-tryon-sr-chart-table th {\n text-align: left; padding: 0.35vw 0.5vw; color: var(--ps-text-muted); font-weight: 600;\n border-bottom: 1px solid var(--ps-border-color); position: sticky; top: 0; background: var(--ps-bg-secondary); color: var(--ps-text-primary);\n }\n .ps-tryon-sr-chart-table td { padding: 0.3vw 0.5vw; color: var(--ps-text-secondary); border-bottom: 1px solid var(--ps-border-subtle); }\n .ps-tryon-sr-chart-active td { color: var(--ps-text-primary); background: rgba(33,84,239,0.08); }\n\n / Size chips /\n .ps-tryon-sr-chips { display: flex; flex-wrap: wrap; gap: 0.4vw; justify-content: center; margin-top: 3.5vh; }\n .ps-tryon-sr-chip {\n min-width: 2.2vw; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;\n border: 1.5px solid var(--ps-border-color); border-radius: 0.4vw; background: transparent;\n color: var(--ps-text-secondary); font-size: 0.75vw; font-weight: 600; cursor: pointer;\n font-family: inherit; transition: all 0.2s; padding: 0.3vw 0.8vw; gap: 0.1vw;\n }\n .ps-tryon-sr-chip-hint { font-size: 0.58vw; font-weight: 400; color: var(--ps-text-muted); text-transform: lowercase; }\n .ps-tryon-sr-chip:hover { border-color: #555; color: var(--ps-text-secondary); }\n .ps-tryon-sr-chip.ps-active { background: var(--ps-accent); border-color: var(--ps-accent); color: #fff; }\n .ps-tryon-sr-chip.ps-active .ps-tryon-sr-chip-hint { color: #fff; }\n\n / Multi-section layout (tuxedo, suit, set products) /\n .ps-tryon-sr-split-multi { grid-template-columns: 1fr 1fr; }\n .ps-tryon-sr-img-col-small { }\n .ps-tryon-sr-multi-top {\n display: flex; align-items: center; justify-content: space-between;\n padding-bottom: 0.5vw; margin-bottom: 0.4vw;\n border-bottom: 1px solid rgba(0,0,0,0.03);\n }\n .ps-tryon-sr-multi-title {\n font-size: 0.9vw; font-weight: 300; color: var(--ps-text-primary);\n letter-spacing: 0.15em; text-transform: uppercase;\n }\n\n / \u2500\u2500 Full-width section picker \u2014 redesigned \u2500\u2500 /\n .ps-tryon-sr-picker {\n display: flex; flex-direction: column; gap: 0.6vw;\n padding: 0;\n }\n .ps-tryon-sr-picker-actions {\n display: flex; align-items: center; justify-content: flex-end; gap: 0.8vw;\n }\n\n / Card row /\n .ps-tryon-sec-row {\n display: flex; gap: 0.5vw;\n }\n .ps-tryon-sec-row-compact { flex-wrap: wrap; }\n .ps-tryon-sec-row-compact .ps-tryon-sec-bigcard { min-width: 40%; flex: 1 1 40%; }\n\n .ps-tryon-sec-bigcard {\n position: relative; overflow: hidden;\n display: flex; flex-direction: column;\n background: #0e0e0e; border: 1px solid rgba(0,0,0,0.04); border-radius: 0.7vw;\n cursor: pointer; font-family: inherit;\n text-align: center; flex: 1; min-width: 0; padding: 0;\n transition: border-color 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;\n animation: ps-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n opacity: 0;\n }\n .ps-tryon-sec-bigcard:nth-child(1) { animation-delay: 0s; }\n .ps-tryon-sec-bigcard:nth-child(2) { animation-delay: 0.08s; }\n .ps-tryon-sec-bigcard:nth-child(3) { animation-delay: 0.16s; }\n .ps-tryon-sec-bigcard:nth-child(4) { animation-delay: 0.24s; }\n @keyframes ps-card-in {\n from { opacity: 0; transform: translateY(1vw) scale(0.96); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n .ps-tryon-sec-bigcard:hover {\n border-color: var(--ps-accent);\n transform: translateY(-0.2vw) scale(1.015);\n box-shadow: 0 0.8vw 2.5vw rgba(0,0,0,0.5), 0 0 0 1px rgba(33,84,239,0.1);\n }\n .ps-tryon-sec-bigcard:not(.ps-has-img) {\n align-items: center; justify-content: center;\n padding: 1.2vw 0.8vw; min-height: 14vw; gap: 0.3vw;\n }\n\n / Image /\n .ps-tryon-sec-bigcard-bg {\n width: 100%; height: 100%; max-height: 20vw; display: block;\n object-fit: contain; object-position: center center;\n border-radius: 0.7vw 0.7vw 0 0;\n transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ps-tryon-sec-bigcard:hover .ps-tryon-sec-bigcard-bg {\n transform: scale(1.03);\n }\n\n / Gradient overlay /\n .ps-tryon-sec-bigcard-overlay {\n position: absolute; bottom: 0; left: 0; right: 0;\n height: 65%;\n background: linear-gradient(to top, #0e0e0e 0%, rgba(14,14,14,0.85) 40%, transparent 100%);\n z-index: 1;\n }\n\n / Text content /\n .ps-tryon-sec-bigcard-content {\n position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;\n display: flex; flex-direction: column; align-items: center; gap: 0.15vw;\n padding: 0.8vw 0.5vw;\n }\n\n / Fallback icon (no image) /\n .ps-tryon-sec-bigcard-icon {\n width: 2.8vw; height: 2.8vw;\n display: flex; align-items: center; justify-content: center;\n background: rgba(33,84,239,0.06); border: 1px solid rgba(33,84,239,0.12);\n border-radius: 50%;\n color: var(--ps-accent); transition: all 0.3s;\n }\n .ps-tryon-sec-bigcard:hover .ps-tryon-sec-bigcard-icon {\n background: rgba(33,84,239,0.12); border-color: rgba(33,84,239,0.25);\n transform: scale(1.06);\n }\n .ps-tryon-sec-bigcard-icon svg { stroke: currentColor; }\n\n .ps-tryon-sec-bigcard-name {\n font-size: 0.68vw; font-weight: 400; color: rgba(255,255,255,0.7);\n text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2;\n text-shadow: 0 1px 6px rgba(0,0,0,0.8);\n }\n .ps-tryon-sec-bigcard-size {\n font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);\n text-shadow: 0 2px 8px rgba(0,0,0,0.5);\n line-height: 1; letter-spacing: -0.02em;\n }\n .ps-tryon-sec-bigcard-badge {\n font-size: 0.45vw; font-weight: 600; text-transform: uppercase;\n color: var(--ps-accent); background: none;\n border: 1px solid rgba(33,84,239,0.3);\n padding: 0.12vw 0.45vw; border-radius: 2vw; letter-spacing: 0.08em;\n }\n .ps-tryon-sec-bigcard-fit {\n font-size: 0.52vw; color: rgba(255,255,255,0.45); font-weight: 400;\n letter-spacing: 0.04em;\n }\n\n / \u2500\u2500 Section detail view (drill-down from card) \u2500\u2500 /\n @keyframes ps-sec-detail-in {\n from { opacity: 0; transform: translateX(1vw); }\n to { opacity: 1; transform: translateX(0); }\n }\n .ps-tryon-sec-detail {\n display: flex; flex-direction: column; gap: 0.5vw;\n animation: ps-v2-fade 0.3s ease forwards;\n flex: 1; min-height: 0; overflow: hidden;\n }\n .ps-tryon-sec-detail-back {\n display: inline-flex; align-items: center; gap: 0.25vw;\n background: none; border: none; color: rgba(0,0,0,0.3); cursor: pointer;\n font-size: 0.6vw; font-family: inherit; padding: 0;\n transition: color 0.2s; align-self: flex-start;\n letter-spacing: 0.03em;\n }\n .ps-tryon-sec-detail-back:hover { color: var(--ps-accent); }\n .ps-tryon-sec-detail-back svg { width: 0.7vw; height: 0.7vw; stroke: currentColor; }\n .ps-tryon-sec-detail-header {\n display: flex; align-items: center; gap: 0.5vw;\n padding-bottom: 0.4vw;\n border-bottom: 1px solid rgba(0,0,0,0.04);\n }\n .ps-tryon-sec-detail-icon {\n width: 1.8vw; height: 1.8vw;\n display: flex; align-items: center; justify-content: center;\n background: rgba(33,84,239,0.08); border: 1px solid rgba(33,84,239,0.12);\n border-radius: 50%; color: var(--ps-accent);\n }\n .ps-tryon-sec-detail-icon svg { stroke: currentColor; }\n .ps-tryon-sec-detail-name {\n font-size: 0.8vw; font-weight: 400; color: var(--ps-text-primary);\n text-transform: uppercase; letter-spacing: 0.1em;\n }\n .ps-tryon-sec-detail .ps-tryon-sr-fit-table td { padding: 0.9vw 0; }\n .ps-tryon-sec-detail .ps-tryon-sr-fit-table th { padding: 0.4vw 0 0.6vw; }\n .ps-tryon-sec-detail .ps-tryon-sr-chips { gap: 0.4vw; margin: 0.3vw 0; }\n\n / Length inline selector (inside section detail) /\n .ps-tryon-sec-length-row {\n display: flex; align-items: center; gap: 0.5vw;\n padding: 0.3vw 0; border-top: 1px solid var(--ps-border-color);\n }\n .ps-tryon-sec-length-label {\n font-size: 0.62vw; font-weight: 600; color: var(--ps-text-secondary);\n text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;\n }\n\n / Reasoning /\n .ps-tryon-sr-reasoning { padding: 0.8vw; border: 1px solid var(--ps-border-color); border-radius: 0.6vw; background: var(--ps-bg-secondary); }\n .ps-tryon-sr-reasoning p { font-size: 0.75vw; color: var(--ps-text-secondary); line-height: 1.6; margin: 0; }\n\n / Result actions /\n / Image action icons \u2014 bottom-left of image /\n .ps-tryon-sr-img-actions {\n position: absolute; bottom: 0.6vw; left: 0.6vw; z-index: 3;\n display: flex; flex-direction: column; gap: 0.3vw;\n }\n .ps-tryon-sr-glass-btn {\n background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\n border: 1px solid var(--ps-border-color); border-radius: 0.45vw;\n color: var(--ps-text-primary); font-size: 0.62vw; font-weight: 700; font-family: inherit;\n padding: 0.4vw 0.8vw; cursor: pointer; transition: all 0.2s;\n white-space: nowrap; letter-spacing: 0.02em;\n display: inline-flex; align-items: center;\n }\n / When used standalone on an image (not inside actions container) /\n .ps-tryon-sr-img-col > .ps-tryon-sr-glass-btn {\n position: absolute; bottom: 0.5vw; left: 0.5vw; z-index: 3;\n }\n .ps-tryon-sr-glass-btn:hover {\n background: rgba(255,255,255,1); border-color: var(--ps-accent);\n }\n .ps-tryon-sr-glass-btn svg, .ps-tryon-sr-img-icon svg { width: 0.65vw; height: 0.65vw; }\n .ps-tryon-sr-img-icon {\n display: inline-flex; align-items: center; gap: 0.3vw;\n padding: 0.35vw 0.7vw;\n background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\n border: 1px solid var(--ps-border-color); border-radius: 0.4vw;\n color: var(--ps-text-primary); font-size: 0.6vw; font-weight: 600; font-family: inherit;\n cursor: pointer; transition: all 0.2s; white-space: nowrap;\n }\n .ps-tryon-sr-img-icon:hover { background: #fff; border-color: var(--ps-accent); color: var(--ps-accent); }\n\n / See fit visually \u2014 below size chips /\n .ps-tryon-sr-visual-btn {\n display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n width: 100%; padding: 0.5vw; margin-top: 0.3vw;\n background: transparent; border: 1px solid var(--ps-border-color); border-radius: 0.5vw;\n color: var(--ps-text-secondary); font-size: 0.7vw; font-weight: 600; cursor: pointer;\n font-family: inherit; transition: all 0.2s;\n }\n .ps-tryon-sr-visual-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n .ps-tryon-sr-visual-btn svg { stroke: currentColor; }\n\n / Dark overlay behind SVG lines /\n .ps-tryon-pose-overlay {\n position: absolute; inset: 0; z-index: 1;\n background: rgba(0,0,0,0.35);\n animation: ps-fade-in 0.4s ease both;\n border-radius: inherit;\n }\n\n / SVG pose overlay /\n .ps-tryon-pose-svg {\n position: absolute; inset: 0; width: 100%; height: 100%;\n pointer-events: none; z-index: 2;\n }\n\n / Dotted curved line \u2014 draws in smoothly /\n .ps-tryon-pose-line {\n stroke-dashoffset: 80;\n animation: ps-pose-draw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n / HTML pill labels \u2014 positioned absolutely on the image /\n .ps-tryon-pose-pill {\n position: absolute; z-index: 3; transform: translateY(-50%);\n display: flex; align-items: center; gap: 0.4vw;\n background: rgba(15,15,15,0.85); backdrop-filter: blur(6px);\n border-radius: 0.5vw; padding: 0.35vw 0.6vw;\n opacity: 0;\n animation: ps-pose-pill-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n .ps-tryon-pose-pill-dot {\n width: 0.5vw; height: 0.5vw; border-radius: 50%; flex-shrink: 0;\n }\n .ps-tryon-pose-pill-text { display: flex; flex-direction: column; gap: 0.05vw; }\n .ps-tryon-pose-pill-name {\n font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary); line-height: 1.2;\n font-family: system-ui, -apple-system, sans-serif;\n }\n .ps-tryon-pose-pill-fit {\n font-size: 0.6vw; font-weight: 600; line-height: 1.2;\n font-family: system-ui, -apple-system, sans-serif;\n }\n\n @keyframes ps-pose-draw {\n from { stroke-dashoffset: 80; opacity: 0; }\n 10% { opacity: 1; }\n to { stroke-dashoffset: 0; opacity: 1; }\n }\n @keyframes ps-pose-pill-in {\n from { opacity: 0; transform: translateX(-2px); }\n to { opacity: 1; transform: translateX(0); }\n }\n .ps-tryon-sr-cta {\n width: 100%; padding: 0.7vw;\n background: var(--ps-accent); color: #0a0a0a;\n border: none; border-radius: 0.4vw;\n font-size: 0.75vw; font-weight: 700; cursor: pointer;\n font-family: inherit; letter-spacing: 0.1em; text-transform: uppercase;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-top: auto;\n display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n }\n .ps-tryon-sr-cta:hover {\n background: var(--ps-accent-light);\n box-shadow: 0 0.3vw 1.5vw rgba(33,84,239,0.25);\n transform: translateY(-1px);\n }\n\n / Size chip recommended dot /\n .ps-tryon-sr-chip { position: relative; }\n .ps-tryon-sr-rec-dot {\n position: absolute; bottom: -0.3vw; left: 50%; transform: translateX(-50%);\n width: 0.35vw; height: 0.35vw; border-radius: 50%; background: var(--ps-accent);\n }\n .ps-tryon-sr-chip.ps-active .ps-tryon-sr-rec-dot { background: #fff; }\n .ps-tryon-sr-chip.ps-recommended { border-color: var(--ps-accent); }\n\n / \u2500\u2500 Full Size Chart Overlay \u2500\u2500 /\n .ps-tryon-fc-overlay {\n position: absolute; inset: 0; z-index: 10;\n background: #111211;\n display: flex; flex-direction: column;\n animation: ps-fade-in 0.2s ease;\n }\n @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }\n .ps-tryon-fc-panel {\n background: #111211;\n width: 100%; height: 100%; overflow: hidden;\n display: flex; flex-direction: column;\n }\n .ps-tryon-fc-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.8vw 1.2vw; border-bottom: 1px solid #282828;\n }\n .ps-tryon-fc-title {\n font-size: 0.8vw; font-weight: 700; color: var(--ps-text-primary);\n letter-spacing: 0.12em; margin: 0;\n }\n .ps-tryon-fc-close {\n background: none; border: none; color: var(--ps-text-muted); font-size: 1.4vw;\n cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s;\n }\n .ps-tryon-fc-close:hover { color: var(--ps-text-primary); }\n\n / Your measurements bar /\n .ps-tryon-fc-measures {\n padding: 0.7vw 1.2vw; background: #1a1a1a; border-bottom: 1px solid #282828;\n }\n .ps-tryon-fc-measures-label {\n display: flex; align-items: center; gap: 0.5vw;\n font-size: 0.6vw; font-weight: 700; color: var(--ps-text-dim);\n letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4vw;\n }\n .ps-tryon-fc-measures-vals {\n display: flex; gap: 1.5vw;\n }\n .ps-tryon-fc-measures-val { font-size: 0.9vw; color: var(--ps-text-secondary); }\n .ps-tryon-fc-measures-val strong { font-weight: 700; color: var(--ps-text-primary); margin-right: 0.15vw; }\n .ps-tryon-fc-measures-val span { font-size: 0.65vw; color: var(--ps-text-muted); }\n\n / Full table /\n .ps-tryon-fc-table-wrap {\n flex: 1; overflow: auto; padding: 0.5vw 1.2vw 1.2vw;\n }\n .ps-tryon-fc-table {\n width: 100%; border-collapse: collapse; font-size: 0.75vw;\n }\n .ps-tryon-fc-table th {\n text-align: center; padding: 0.5vw 0.6vw;\n font-size: 0.6vw; font-weight: 700; color: var(--ps-text-muted);\n text-transform: uppercase; letter-spacing: 0.06em;\n border-bottom: 1.5px solid var(--ps-border-color);\n }\n .ps-tryon-fc-table th:first-child { text-align: left; }\n .ps-tryon-fc-table td {\n text-align: center; padding: 0.45vw 0.6vw;\n color: var(--ps-text-secondary); border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-tryon-fc-table td:first-child { text-align: left; font-weight: 600; color: var(--ps-text-secondary); }\n .ps-tryon-fc-rec-row td { color: var(--ps-text-primary); font-weight: 600; background: rgba(33,84,239,0.05); }\n .ps-tryon-fc-rec-pill {\n display: inline-flex; align-items: center; justify-content: center;\n background: #fff; color: var(--ps-text-primary); padding: 0.15vw 0.5vw;\n border-radius: 1vw; font-weight: 800; font-size: 0.7vw;\n }\n\n .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: var(--ps-accent); } .ps-conf-low { color: var(--ps-error-color); }\n .ps-tryon-size-compact { padding: 0.5vw 0; }\n .ps-tryon-size-compact-label { font-size: 0.78vw; color: var(--ps-text-secondary); font-weight: 500; }\n\n / Save profile prompt /\n .ps-tryon-save-prompt { margin-top: 0.73vw; padding: 0.73vw; border: 1px solid var(--ps-border-color); border-radius: 0.63vw; background: var(--ps-bg-secondary); }\n .ps-tryon-save-label { font-size: 0.63vw; color: var(--ps-text-secondary); margin-bottom: 0.52vw; }\n .ps-tryon-save-row { display: flex; gap: 0.42vw; }\n .ps-tryon-save-row input {\n flex: 1; padding: 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n background: #111211; color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit; outline: none;\n }\n .ps-tryon-save-row input:focus { border-color: var(--ps-accent); }\n .ps-tryon-save-row button {\n padding: 0.52vw 1.04vw; background: var(--ps-accent); color: #fff; border: none; border-radius: 0.52vw;\n font-size: 0.68vw; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;\n }\n .ps-tryon-save-row button:hover { opacity: 0.9; }\n .ps-tryon-save-btn-group { display: flex; gap: 0.31vw; }\n .ps-tryon-save-new-btn { background: transparent !important; border: 1.5px solid var(--ps-accent) !important; color: var(--ps-accent) !important; }\n .ps-tryon-save-new-btn:hover { background: rgba(33,84,239,0.1) !important; }\n .ps-tryon-save-done { font-size: 0.63vw; color: #4ade80; margin-top: 0.52vw; display: flex; align-items: center; gap: 0.31vw; justify-content: center; }\n .ps-tryon-save-done svg { stroke: currentColor; }\n\n / Error /\n .ps-tryon-error { text-align: center; padding: 1.25vw; display: flex; flex-direction: column; align-items: center; }\n .ps-tryon-error svg { color: var(--ps-error-color); margin-bottom: 0.63vw; }\n .ps-tryon-error-text { font-size: 0.73vw; color: var(--ps-error-color); margin: 0 0 0.83vw; }\n\n / \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n NoChartView \u2014 empty state when the merchant\n hasn't uploaded a size chart for this product.\n Desktop: split (image left, panel right).\n Mobile: stacked (image top, panel bottom).\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 /\n / Right-column content wrapper \u2014 sits inside the existing\n .ps-tryon-sr-right-col so the modal width/height matches every other\n size-result screen. Only the column content swaps; the modal frame\n does not resize. /\n .ps-tryon-no-chart-right-col {\n align-items: flex-start; justify-content: center;\n gap: 0.8vw;\n }\n .ps-tryon-no-chart-content {\n display: flex; flex-direction: column;\n align-items: flex-start; justify-content: center;\n gap: 0.8vw;\n padding: 0.6vw 1vw;\n min-width: 0;\n }\n .ps-tryon-no-chart-icon {\n width: 3.2vw; height: 3.2vw;\n min-width: 48px; min-height: 48px;\n display: flex; align-items: center; justify-content: center;\n border-radius: 50%;\n background: var(--ps-bg-tertiary, #f3f4f6);\n color: var(--ps-text-secondary);\n }\n .ps-tryon-no-chart-icon svg {\n width: 60%; height: 60%;\n }\n .ps-tryon-no-chart-title {\n font-size: 1.1vw; font-weight: 700;\n color: var(--ps-text-primary);\n margin: 0;\n line-height: 1.25;\n }\n .ps-tryon-no-chart-msg {\n font-size: 0.72vw; line-height: 1.55;\n color: var(--ps-text-secondary);\n margin: 0;\n }\n .ps-tryon-no-chart-actions {\n display: flex; flex-direction: column;\n align-items: stretch; gap: 0.5vw;\n width: 100%; max-width: 22vw;\n margin-top: 0.4vw;\n }\n .ps-tryon-no-chart-cta {\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: 0.5vw;\n padding: 0.8vw 1vw;\n font-family: inherit;\n font-size: 0.78vw; font-weight: 700;\n letter-spacing: 0.04em;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n }\n .ps-tryon-no-chart-cta:active { transform: scale(0.99); opacity: 0.94; }\n .ps-tryon-no-chart-secondary {\n background: transparent; color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color);\n border-radius: 0.5vw;\n padding: 0.7vw 1vw;\n font-family: inherit;\n font-size: 0.7vw; font-weight: 600;\n cursor: pointer;\n transition: background 0.15s;\n }\n .ps-tryon-no-chart-secondary:hover { background: var(--ps-bg-secondary); }\n\n / Footer /\n .ps-tryon-powered { text-align: center; padding: 0.63vw 1.25vw 0.83vw; font-size: 0.57vw; color: var(--ps-text-muted); }\n .ps-tryon-powered a { color: var(--ps-accent); text-decoration: none; }\n .ps-tryon-powered a:hover { text-decoration: underline; }\n\n / Drawer /\n .ps-tryon-drawer {\n position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #FFFFFF);\n overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 1.04vw 1.25vw;\n transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);\n box-sizing: border-box;\n }\n .ps-tryon-drawer-open { transform: translateX(0); }\n .ps-tryon-drawer-header { display: flex; align-items: center; gap: 0.52vw; padding-bottom: 0.73vw; margin-bottom: 0.73vw; border-bottom: 1px solid var(--ps-border-color); }\n .ps-tryon-drawer-back {\n width: 1.67vw; height: 1.67vw; display: flex; align-items: center; justify-content: center;\n border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: transparent;\n cursor: pointer; color: var(--ps-text-secondary); transition: all 0.2s; flex-shrink: 0;\n }\n .ps-tryon-drawer-back:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n .ps-tryon-drawer-title { font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); flex: 1; }\n .ps-tryon-drawer-add-btn {\n width: 1.6vw; height: 1.6vw; display: flex; align-items: center; justify-content: center;\n border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw; background: transparent;\n color: var(--ps-accent); font-size: 1vw; font-weight: 600; cursor: pointer;\n font-family: inherit; transition: all 0.2s; flex-shrink: 0; line-height: 1;\n }\n .ps-tryon-drawer-add-btn:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.1); }\n .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 0.52vw; max-width: 100%; overflow-x: hidden; }\n .ps-tryon-drawer-empty { text-align: center; padding: 1.67vw 0.83vw; color: var(--ps-text-muted); font-size: 0.73vw; }\n\n / Profile items /\n .ps-tryon-profile-item {\n display: flex; align-items: center; gap: 0.63vw; padding: 0.73vw;\n border: 1px solid var(--ps-border-color); border-radius: 0.63vw; cursor: pointer; transition: all 0.2s;\n }\n .ps-tryon-profile-item:hover { border-color: var(--ps-accent); }\n .ps-tryon-profile-avatar {\n width: 2.08vw; height: 2.08vw; border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n background: rgba(33,84,239,0.1); flex-shrink: 0;\n }\n .ps-tryon-profile-avatar svg { stroke: var(--ps-accent); fill: none; }\n .ps-tryon-profile-info { flex: 1; min-width: 0; }\n .ps-tryon-profile-name { font-size: 0.73vw; font-weight: 600; color: var(--ps-text-primary); }\n .ps-tryon-profile-detail { font-size: 0.57vw; color: var(--ps-text-secondary); margin-top: 2px; }\n .ps-tryon-profile-item > svg:last-child { color: var(--ps-text-muted); flex-shrink: 0; transition: color 0.2s; }\n .ps-tryon-profile-item:hover > svg:last-child { color: var(--ps-accent); }\n\n / History items /\n .ps-tryon-history-item {\n display: flex; gap: 0.73vw; padding: 0.73vw;\n border: 1px solid var(--ps-border-color); border-radius: 0.63vw; align-items: flex-start; transition: all 0.2s;\n }\n .ps-tryon-history-item:hover { border-color: var(--ps-accent); box-shadow: 0 0.21vw 0.63vw rgba(33,84,239,0.06); }\n .ps-tryon-history-images { display: flex; gap: 0.42vw; flex-shrink: 0; }\n .ps-tryon-history-thumb { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; }\n .ps-tryon-history-info { flex: 1; min-width: 0; }\n .ps-tryon-history-product { font-size: 0.68vw; font-weight: 600; color: var(--ps-text-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }\n .ps-tryon-history-meta { font-size: 0.57vw; color: var(--ps-text-muted); margin-top: 3px; }\n .ps-tryon-history-sizing { display: flex; align-items: center; gap: 0.42vw; margin-top: 0.31vw; }\n .ps-tryon-history-sizing-reason { font-size: 0.57vw; color: var(--ps-text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }\n .ps-tryon-history-size-badge {\n flex-shrink: 0; width: 2.08vw; height: 2.08vw; border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-light));\n color: #fff; font-size: 0.68vw; font-weight: 700;\n }\n .ps-tryon-history-result-img { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; border: 2px solid var(--ps-accent); }\n .ps-tryon-history-delete {\n width: 1.46vw; height: 1.46vw; display: flex; align-items: center; justify-content: center;\n border: none; background: transparent; cursor: pointer; color: var(--ps-text-muted); border-radius: 0.31vw; transition: all 0.2s; flex-shrink: 0;\n }\n .ps-tryon-history-delete:hover { background: rgba(239,68,68,0.1); color: var(--ps-error-color); }\n .ps-tryon-history-delete svg { stroke: currentColor; fill: none; }\n .ps-tryon-history-clickable { cursor: pointer; }\n .ps-tryon-history-sections { display: flex; flex-wrap: wrap; gap: 0.3vw; margin-top: 0.31vw; }\n .ps-tryon-history-section-chip {\n font-size: 0.55vw; font-weight: 600; color: var(--ps-text-primary); background: rgba(33,84,239,0.18);\n border: 1px solid rgba(33,84,239,0.3); border-radius: 0.3vw; padding: 0.15vw 0.4vw;\n }\n .ps-tryon-history-tryon-badge {\n display: inline-block; font-size: 0.5vw; font-weight: 600; color: var(--ps-accent);\n background: rgba(33,84,239,0.12); border: 1px solid rgba(33,84,239,0.25);\n border-radius: 0.25vw; padding: 0.1vw 0.35vw; margin-top: 0.25vw;\n }\n\n / Quiz view /\n .ps-tryon-quiz-progress { display: flex; gap: 0.4vw; margin-bottom: 1vw; }\n .ps-tryon-quiz-progress-dot {\n width: 1.5vw; height: 0.2vw; border-radius: 0.1vw;\n background: var(--ps-border-color); transition: background 0.3s;\n }\n .ps-tryon-quiz-progress-dot.ps-active { background: var(--ps-accent); }\n .ps-tryon-quiz-basics { display: flex; flex-direction: column; gap: 1.2vw; width: 100%; }\n .ps-tryon-quiz-options { display: flex; flex-direction: column; gap: 0.5vw; width: 100%; }\n .ps-tryon-quiz-options.ps-tryon-quiz-row { flex-direction: row; }\n .ps-tryon-quiz-option {\n display: flex; flex-direction: column; gap: 0.15vw;\n padding: 0.7vw 1vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.5vw;\n background: transparent; color: var(--ps-text-primary); cursor: pointer;\n font-family: inherit; text-align: left; transition: all 0.2s;\n flex: 1;\n }\n .ps-tryon-quiz-option:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n .ps-tryon-quiz-option.ps-active { border-color: var(--ps-accent); background: rgba(33,84,239,0.12); }\n .ps-tryon-quiz-option-label { font-size: 0.8vw; font-weight: 600; }\n .ps-tryon-quiz-option-desc { font-size: 0.6vw; color: var(--ps-text-secondary); }\n\n / Profile edit view /\n .ps-tryon-profile-edit { display: flex; flex-direction: column; gap: 1.2vw; width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; padding: 0.3vw 0.5vw; flex: 1; }\n .ps-tryon-pe-row {\n display: flex; align-items: center; gap: 0.8vw;\n }\n .ps-tryon-pe-pill {\n display: inline-flex; border: 1px solid var(--ps-border-color); border-radius: 1.2vw; overflow: hidden;\n }\n .ps-tryon-pe-pill-btn {\n padding: 0.35vw 0.9vw; background: transparent; border: none;\n color: var(--ps-text-muted); font-size: 0.62vw; font-weight: 600; cursor: pointer;\n font-family: inherit; transition: all 0.15s; white-space: nowrap; line-height: 1.2;\n }\n .ps-tryon-pe-pill-btn.ps-active { background: var(--ps-accent); color: #fff; }\n .ps-tryon-pe-pill-btn:not(.ps-active):hover { color: var(--ps-text-secondary); background: rgba(0,0,0,0.03); }\n .ps-tryon-pe-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw 1.6vw; width: 100%; box-sizing: border-box; }\n .ps-tryon-pe-fields .ps-tryon-sf-float-field {\n min-width: 0; padding: 0.15vw 0.4vw;\n display: flex; align-items: center; gap: 0.6vw;\n }\n .ps-tryon-pe-fields .ps-tryon-sf-float-label {\n flex-shrink: 0; margin: 0; white-space: nowrap;\n font-size: 0.62vw; color: var(--ps-text-secondary);\n }\n .ps-tryon-pe-fields .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label { color: var(--ps-accent); }\n .ps-tryon-pe-fields .ps-tryon-sf-input {\n flex: 1; min-width: 0; padding: 0.3vw 0; font-size: 0.78vw;\n }\n .ps-tryon-pe-error {\n font-size: 0.62vw; color: var(--ps-error-color); font-weight: 500; text-align: center;\n padding: 0.3vw 0.6vw; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);\n border-radius: 0.4vw;\n }\n .ps-tryon-pe-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.8vw; margin-top: auto; padding-top: 1.2vw; }\n .ps-tryon-pe-actions .ps-tryon-est-back { font-size: 0.65vw; }\n .ps-tryon-pe-save {\n padding: 0.45vw 1.2vw; background: var(--ps-accent); color: #fff; border: none;\n border-radius: 0.4vw; font-size: 0.65vw; font-weight: 600; cursor: pointer;\n font-family: inherit; letter-spacing: 0.06em; text-transform: uppercase;\n display: inline-flex; align-items: center; gap: 0.3vw;\n }\n .ps-tryon-pe-save:hover { opacity: 0.85; }\n .ps-tryon-drawer-create {\n width: 100%; padding: 0.6vw; margin-bottom: 0.5vw;\n background: transparent; border: 1.5px dashed var(--ps-border-color);\n border-radius: 0.5vw; color: var(--ps-accent); font-size: 0.73vw;\n font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s;\n display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n }\n .ps-tryon-drawer-create:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n .ps-tryon-drawer-clear {\n background: none; border: none; color: var(--ps-text-muted); font-size: 0.6vw;\n font-weight: 500; cursor: pointer; font-family: inherit; padding: 0.3vw 0;\n transition: color 0.2s; align-self: center;\n }\n .ps-tryon-drawer-clear:hover { color: var(--ps-error-color); }\n\n / Profile detail modal \u2014 portaled to body, sits ABOVE the main modal\n overlay (which has z-index 2147483647). Equal z-index + later DOM\n order means this stacks on top. Same trick as the language dropdown. /\n .ps-tryon-detail-overlay {\n position: fixed; inset: 0; background: rgba(0,0,0,0.55);\n display: flex; align-items: center; justify-content: center;\n z-index: 2147483647; padding: 0.83vw; animation: ps-fade-in 0.2s ease;\n isolation: isolate;\n --ps-accent: #3B82F6;\n --ps-accent-hover: #2563EB;\n --ps-text-primary: #1C1D1E;\n --ps-text-secondary: #454545;\n --ps-text-muted: #84898C;\n --ps-border-color: #E7E7E7;\n --ps-border-subtle: #F0F0F0;\n --ps-bg-primary: #FFFFFF;\n --ps-bg-secondary: #F8FAFF;\n --ps-error-color: #E7000B;\n }\n .ps-tryon-detail-modal {\n background: var(--ps-bg-primary); border-radius: 14px; width: 100%; max-width: 480px; max-height: 85vh;\n overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;\n font-family: var(--ps-modal-font, system-ui, sans-serif); color: var(--ps-text-primary);\n }\n .ps-tryon-detail-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.94vw 1.25vw; border-bottom: 1px solid var(--ps-border-color);\n }\n .ps-tryon-detail-header span { font-size: 0.78vw; font-weight: 600; }\n .ps-tryon-detail-header button { background: none; border: none; color: var(--ps-text-secondary); cursor: pointer; display: flex; align-items: center; border-radius: 0.31vw; padding: 0.21vw; transition: background 0.15s; }\n .ps-tryon-detail-header button:hover { background: rgba(0,0,0,0.06); }\n .ps-tryon-detail-body { padding: 1.04vw 1.25vw; }\n .ps-tryon-detail-gender { display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; font-weight: 600; padding-bottom: 0.73vw; border-bottom: 1px solid var(--ps-border-color); margin-bottom: 0.73vw; }\n .ps-tryon-detail-gender svg { stroke: var(--ps-accent); fill: none; }\n .ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.52vw; margin-bottom: 0.83vw; }\n .ps-tryon-detail-cell { background: var(--ps-bg-secondary); border-radius: 0.52vw; padding: 0.63vw 0.73vw; }\n .ps-tryon-detail-cell-label { font-size: 0.57vw; color: var(--ps-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.21vw; }\n .ps-tryon-detail-cell-value { font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); }\n .ps-tryon-detail-date { font-size: 0.57vw; color: var(--ps-text-muted); text-align: center; margin-top: 0.42vw; }\n .ps-tryon-detail-delete {\n width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.31vw;\n padding: 0.63vw; border: 1px solid var(--ps-border-color); border-radius: 0.52vw; background: none;\n color: var(--ps-error-color); font-size: 0.68vw; font-weight: 500; cursor: pointer; transition: all 0.2s;\n font-family: inherit; margin-top: 0.83vw;\n }\n .ps-tryon-detail-delete:hover { background: rgba(239,68,68,0.06); border-color: var(--ps-error-color); }\n .ps-tryon-detail-delete svg { stroke: currentColor; fill: none; }\n\n / \u2500\u2500 Accessory sizing views (foot / head / face) \u2500\u2500 /\n .ps-acc-diagram { display: flex; justify-content: center; margin: max(10px, 0.8vw) 0; }\n .ps-acc-field { margin: max(8px, 0.7vw) 0; }\n .ps-acc-label {\n display: block;\n font-size: max(11px, 0.72vw);\n font-weight: 600;\n color: var(--ps-text-secondary);\n margin-bottom: max(4px, 0.3vw);\n }\n .ps-acc-input {\n width: 100%;\n padding: max(8px, 0.55vw) max(10px, 0.7vw);\n border: 1.5px solid var(--ps-border-color);\n border-radius: max(6px, 0.42vw);\n font-size: max(14px, 0.9vw);\n background: var(--ps-bg-secondary);\n color: var(--ps-text-primary);\n outline: none;\n transition: border-color 0.15s;\n box-sizing: border-box;\n font-family: inherit;\n }\n .ps-acc-input:focus { border-color: var(--ps-accent); }\n .ps-acc-hint { font-size: max(10px, 0.62vw); color: var(--ps-text-muted); margin-top: max(3px, 0.25vw); }\n .ps-acc-error { font-size: max(10px, 0.65vw); color: var(--ps-error-color); margin-top: max(3px, 0.25vw); font-weight: 500; }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Mobile (\u2264768px) \u2014 full-screen drawer, bigger touch targets,\n px-based sizing (vw becomes sub-pixel and unreadable on phones)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n @media (max-width: 768px) {\n / ProcessingView v2 mobile \u2014 stack: image on top (max 38vh), then\n * the progress + cards panel below. /\n .ps-tryon-processing-v2 {\n flex-direction: column !important;\n gap: 12px !important;\n padding: 12px !important;\n height: auto !important;\n }\n .ps-tryon-processing-v2-image {\n flex: 0 0 auto !important;\n width: 100% !important;\n height: 38vh !important; min-height: 280px !important;\n border-radius: 12px !important;\n }\n .ps-tryon-processing-v2-badge {\n top: 10px !important; left: 10px !important;\n padding: 5px 10px !important; gap: 6px !important;\n font-size: 10px !important;\n }\n .ps-tryon-processing-v2-panel {\n gap: 12px !important; padding: 4px 6px !important;\n }\n .ps-tryon-processing-v2-title { font-size: 17px !important; }\n .ps-tryon-processing-v2-sub { font-size: 12px !important; margin-top: 4px !important; }\n .ps-tryon-processing-v2-ring-wrap { width: 150px !important; height: 150px !important; }\n .ps-tryon-processing-v2-ring-wrap svg { width: 150px !important; height: 150px !important; }\n .ps-tryon-processing-v2-pct { font-size: 28px !important; }\n .ps-tryon-processing-v2-status { font-size: 12px !important; max-width: none !important; margin-top: 12px !important; }\n .ps-tryon-processing-v2-section-label { font-size: 10px !important; margin-bottom: 8px !important; }\n .ps-tryon-processing-v2-cards { gap: 8px !important; }\n .ps-tryon-processing-v2-card { padding: 10px 12px !important; gap: 10px !important; border-radius: 10px !important; }\n .ps-tryon-processing-v2-card-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }\n .ps-tryon-processing-v2-card-head { font-size: 12px !important; }\n .ps-tryon-processing-v2-card-body { font-size: 11px !important; }\n .ps-tryon-processing-v2-cancel { font-size: 12px !important; padding: 8px 0 !important; }\n\n / NoChartView mobile \u2014 content centered, sized like other mobile screens. /\n .ps-tryon-no-chart-right-col,\n .ps-tryon-no-chart-content {\n align-items: center !important; text-align: center !important;\n gap: 12px !important;\n padding: 4px 12px !important;\n }\n .ps-tryon-no-chart-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; }\n .ps-tryon-no-chart-icon svg { width: 28px !important; height: 28px !important; }\n .ps-tryon-no-chart-title { font-size: 18px !important; text-align: center !important; }\n .ps-tryon-no-chart-msg { font-size: 13px !important; text-align: center !important; max-width: 360px !important; margin: 0 auto !important; }\n .ps-tryon-no-chart-actions { max-width: 320px !important; gap: 10px !important; margin-top: 4px !important; }\n .ps-tryon-no-chart-cta { padding: 14px 18px !important; font-size: 13px !important; border-radius: 10px !important; }\n .ps-tryon-no-chart-secondary { padding: 12px 18px !important; font-size: 12px !important; border-radius: 10px !important; }\n\n / \u2500\u2500 Trigger button: minimum 44px touch target, readable text \u2500\u2500 /\n .ps-tryon-btn {\n padding: max(12px, 3vw) max(20px, 5vw); font-size: max(14px, 3.6vw); gap: max(8px, 2vw);\n border-radius: max(8px, 2vw); min-height: 44px;\n }\n .ps-tryon-btn svg { width: var(--ps-btn-icon-size, max(24px, 7vw)); height: var(--ps-btn-icon-size, max(24px, 7vw)); }\n\n / \u2500\u2500 Overlay: full screen, no centering, slide-up drawer feel \u2500\u2500 /\n .ps-tryon-overlay {\n padding: 0 !important;\n align-items: stretch !important; justify-content: stretch !important;\n overflow: hidden !important;\n }\n\n / \u2500\u2500 Modal: occupies entire viewport as a drawer \u2500\u2500 /\n .ps-tryon-modal,\n .ps-tryon-modal-wide {\n max-width: 100vw !important; max-width: 100dvw !important;\n max-height: 100vh !important; max-height: 100dvh !important;\n width: 100vw !important; width: 100dvw !important;\n height: 100vh !important; height: 100dvh !important;\n min-height: 100vh !important; min-height: 100dvh !important;\n border-radius: 0 !important; box-shadow: none !important;\n margin: 0 !important;\n display: flex !important; flex-direction: column !important;\n overflow: hidden !important;\n animation: ps-mobile-slide-up 0.32s cubic-bezier(0.32, 0.72, 0, 1);\n padding-top: env(safe-area-inset-top);\n padding-bottom: env(safe-area-inset-bottom);\n padding-left: env(safe-area-inset-left);\n padding-right: env(safe-area-inset-right);\n }\n .ps-tryon-modal > :last-child { flex: 1; min-height: 0; }\n\n / \u2500\u2500 Header: bigger touch targets, fixed top \u2500\u2500 /\n .ps-tryon-header {\n border-radius: 0 !important;\n padding: 2.5vw 3.6vw !important;\n flex-shrink: 0;\n background: var(--ps-modal-header-bg, rgba(255,255,255,0.95)) !important;\n }\n / Mobile header icons: minimal flat glyphs, vertical hairline separators\n * between adjacent icons (skip the first one). 24 px tap target keeps\n * accessibility while the icon glyph shrinks to 14 px. /\n .ps-tryon-header-icon {\n width: 24px !important; height: 24px !important;\n border: none !important; background: transparent !important;\n border-radius: 0 !important; padding: 0 !important;\n }\n .ps-tryon-header-icon svg { width: 14px !important; height: 14px !important; }\n .ps-tryon-close {\n width: 24px !important; height: 24px !important;\n border: none !important; background: transparent !important;\n border-radius: 0 !important;\n }\n .ps-tryon-close svg { width: 16px !important; height: 16px !important; }\n .ps-tryon-lang-trigger {\n border: none !important; background: transparent !important;\n border-radius: 0 !important;\n padding: 0 6px !important; min-height: 24px !important;\n gap: 3px !important;\n }\n .ps-tryon-lang-trigger:hover, .ps-tryon-lang-trigger.ps-active {\n background: transparent !important;\n }\n .ps-tryon-lang-trigger svg { width: 12px !important; height: 12px !important; }\n .ps-tryon-lang-current { font-size: 11px !important; }\n .ps-tryon-header-actions { gap: 0 !important; align-items: center !important; }\n / Hairline separator between adjacent header icons (skip the very first). /\n .ps-tryon-header-actions > + * {\n position: relative !important;\n padding-left: 8px !important;\n margin-left: 8px !important;\n }\n .ps-tryon-header-actions > * + ::before {\n content: \"\" !important;\n position: absolute !important;\n left: 0 !important; top: 25% !important; bottom: 25% !important;\n width: 1px !important;\n background: var(--ps-border-subtle) !important;\n }\n\n / Mobile body-measurements step \u2014 single-page fit on iPhone (svh).\n * Layout rhythm: title \u2192 3 sliders (compact) \u2192 \"or\" \u2192 upload card \u2192\n * Next (sticky bottom) \u2192 tabs (sticky bottom).\n * No big spacer between upload card and Next: the upload card now feels\n * like the second action in the same group, both reading as primary\n * choices side-by-side vertically. /\n .ps-bpm-title { font-size: 17px !important; line-height: 1.2 !important; margin: 0 !important; }\n .ps-bpm-subtitle { display: none !important; }\n .ps-bpm-header { margin-bottom: 6px !important; padding: 0 !important; }\n .ps-bpm-fields { margin-top: 2px !important; }\n .ps-bpm-row { padding: 10px 0 !important; gap: 8px !important; }\n .ps-bpm-label { font-size: 10.5px !important; letter-spacing: 0.1em !important; }\n .ps-bpm-value-display { font-size: 14px !important; }\n .ps-bpm-slider-row { gap: 10px !important; }\n .ps-bpm-step-btn { width: 28px !important; height: 28px !important; }\n .ps-bpm-step-btn svg { width: 12px !important; height: 12px !important; }\n .ps-bpm-slider { height: 4px !important; }\n / \"or\" divider: tight, no extra margin /\n .ps-bpm-or { margin: 10px 0 8px !important; font-size: 10px !important; letter-spacing: 0.15em !important; }\n / Upload action \u2014 prominent card with dashed accent border + centered\n * icon-over-text layout. Reads as a real \"drop zone\" alternative to the\n * manual sliders above. Larger touch area, accent color cues affordance. /\n .ps-bpm-upload-link {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 6px !important;\n padding: 18px 14px !important;\n width: 100% !important;\n min-height: 92px !important;\n background: rgba(33, 84, 239, 0.04) !important;\n border: 1.5px dashed rgba(33, 84, 239, 0.45) !important;\n border-radius: 12px !important;\n color: var(--ps-accent) !important;\n font-size: 13px !important;\n font-weight: 600 !important;\n letter-spacing: 0 !important;\n text-transform: none !important;\n }\n .ps-bpm-upload-link:hover:not(:disabled) {\n background: rgba(33, 84, 239, 0.08) !important;\n border-color: var(--ps-accent) !important;\n opacity: 1 !important;\n }\n .ps-bpm-upload-link svg { width: 22px !important; height: 22px !important; color: var(--ps-accent) !important; flex-shrink: 0 !important; }\n / Hide the trailing chevron in this taller layout \u2014 direction is implied. /\n .ps-bpm-upload-link svg:last-child:not(:first-of-type) { display: none !important; }\n / Spacer eats remaining vertical space so the bottom block is pushed to\n * the actual viewport bottom (sticky alone doesn't pin shorter content). /\n .ps-bpm-spacer { display: block !important; flex: 1 1 auto !important; min-height: 0 !important; }\n / Bottom group sits at the viewport bottom with a top divider. /\n .ps-bpm-bottom {\n flex-shrink: 0 !important;\n padding: 12px 0 0 !important; gap: 8px !important;\n background: var(--ps-bg-primary) !important;\n border-top: 1px solid var(--ps-border-subtle) !important;\n }\n .ps-bpm-next-btn { height: 44px !important; font-size: 14px !important; border-radius: 10px !important; }\n .ps-bpm-bottom-tab { padding: 8px 6px !important; font-size: 10px !important; letter-spacing: 0.1em !important; }\n .ps-bpm-bottom-tab svg { width: 12px !important; height: 12px !important; }\n\n / iOS-safe modal height: svh (small viewport) is stable when URL bar\n * shows/hides. dvh changes value as user scrolls and causes layout jumps. /\n .ps-tryon-modal,\n .ps-tryon-modal-wide {\n max-height: 100svh !important;\n height: 100svh !important;\n min-height: 100svh !important;\n }\n\n / Photo step layout: stack the two columns vertically on mobile so the\n * upload area gets full width and the body-details column (height /\n * weight / bra / age + \"?\" pill) is fully readable instead of cramped at\n * 50% of viewport. /\n .ps-bp-wrapper > div:first-child {\n flex-direction: column !important;\n padding: 0 !important;\n gap: 16px !important;\n height: auto !important;\n min-height: 0 !important;\n }\n .ps-bp-wrapper > div:first-child > div {\n flex: 1 1 auto !important;\n width: 100% !important;\n }\n / Re-size desktop vw-based body-details typography for mobile. /\n .ps-bp-wrapper h3 { font-size: 16px !important; }\n / \"How to take a good photo\" pill button \u2014 readable size + tap target. /\n .ps-bp-wrapper button[aria-label=\"How to take a good photo\"] {\n padding: 8px 12px !important;\n font-size: 11px !important;\n gap: 6px !important;\n }\n .ps-bp-wrapper button[aria-label=\"How to take a good photo\"] > span:first-child {\n width: 16px !important; height: 16px !important;\n font-size: 11px !important;\n min-width: 16px !important; min-height: 16px !important;\n }\n .ps-bp-wrapper p {\n font-size: 12px !important;\n }\n\n / Body details (height/weight/bra) inputs section on mobile photo step. /\n .ps-pm-body-details {\n display: flex; flex-direction: column;\n gap: 8px;\n padding: 12px 0;\n }\n .ps-pm-body-details-head {\n display: flex; align-items: center; justify-content: space-between;\n gap: 8px;\n }\n .ps-pm-body-details-head h3 {\n margin: 0;\n font-size: 15px; font-weight: 700;\n color: var(--ps-text-primary);\n }\n .ps-pm-body-details-sub {\n margin: 0;\n font-size: 11px;\n color: var(--ps-text-muted);\n }\n .ps-pm-help-pill {\n display: inline-flex; align-items: center; gap: 6px;\n padding: 6px 10px;\n background: transparent; color: var(--ps-accent);\n border: 1.5px solid var(--ps-accent);\n border-radius: 999px;\n cursor: pointer; font-family: inherit;\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.04em; white-space: nowrap;\n flex-shrink: 0;\n transition: background 0.15s, color 0.15s;\n }\n .ps-pm-help-pill.ps-active {\n background: var(--ps-accent); color: #FFFFFF;\n }\n .ps-pm-help-pill-q {\n display: inline-flex; align-items: center; justify-content: center;\n width: 16px; height: 16px;\n border-radius: 50%;\n background: var(--ps-accent); color: #FFFFFF;\n font-size: 11px; font-weight: 700; line-height: 1;\n }\n .ps-pm-help-pill.ps-active .ps-pm-help-pill-q {\n background: #FFFFFF; color: var(--ps-accent);\n }\n / Hide PhotoStepMobile's inline Do/Don't grid on mobile \u2014 content lives\n * in the help drawer now. Keeps the scan step compact. /\n .ps-pm-dodonts-grid, .ps-pm-dodonts-tip { display: none !important; }\n\n / When the visual stepper is rendered above PhotoStepMobile (only the\n * BodyProfileView mobile flow does this), the stepper's \"PHOTO\" /\n * \"DETAILS\" labels already title the step, so PhotoStepMobile's own\n * \"Review your photo\" h2+subtitle header is redundant. Hide it to\n * reclaim vertical space and keep the upload zone uncropped.\n * AccessoryView (no stepper sibling) keeps its header. /\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-header { display: none !important; }\n .ps-bp-scan-progress ~ .ps-pm-root {\n gap: max(10px, 2.6vw) !important;\n padding-top: 0 !important;\n }\n / The \"tall\" upload zone fills all remaining vertical space on\n * mobile Step 1 so the upload area is unmistakably the focal point.\n * .ps-pm-preview-tall is opted in by PhotoStepMobile when caller\n * passes compactAgeGate. Reference design has a dashed border and\n * a slightly lighter fill \u2014 applied here so other usages of\n * .ps-pm-preview (AccessoryView, etc.) aren't affected. /\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-preview.ps-pm-preview-tall {\n flex: 1 1 0% !important;\n height: auto !important;\n min-height: 180px !important;\n background: #F4F5F7 !important;\n border: 2px dashed #D5D8DD !important;\n border-radius: 18px !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-preview-empty-title {\n font-size: 16px !important; font-weight: 600 !important;\n color: var(--ps-text-secondary) !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-preview-empty-hint {\n font-size: 11px !important; color: var(--ps-text-muted) !important;\n letter-spacing: 0.08em; text-transform: uppercase;\n }\n / Single-page layout for the scan flow \u2014 kill the in-root spacer so\n * the preview grows naturally, and let the .ps-pm-root shrink to its\n * parent so total content stays inside the viewport. The bottom CTA\n * + tabs sit naturally pinned at the bottom of the column. /\n .ps-bp-scan-progress ~ .ps-pm-root {\n min-height: 0 !important;\n max-height: 100% !important;\n overflow: hidden !important;\n gap: 8px !important;\n padding: 0 !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-bpm-spacer {\n display: none !important;\n }\n / Same for Step 2 (body details) \u2014 center content, pin the bottom. /\n .ps-bp-wrapper .ps-bp-scan-details-center { min-height: 0 !important; }\n / The bottom block is sticky-style: always visible at the column\n * bottom. flex-shrink: 0 keeps it from collapsing if the upload\n * preview tries to grow past the available space. /\n .ps-bp-wrapper .ps-bpm-bottom {\n flex-shrink: 0 !important;\n margin-top: auto !important;\n background: var(--ps-bg-primary, #FFFFFF) !important;\n }\n / Small-screen pass: tighten everything in the scan flow so the\n * full layout (stepper + help + upload + legal + CTA + tabs) fits\n * on a 568px iPhone-SE-sized viewport without scrolling. /\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-legal-notice {\n margin-top: 8px !important;\n padding: 8px 12px !important;\n gap: 4px !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-legal-notice-body {\n font-size: 11px !important; line-height: 1.4 !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-primary-btn {\n padding: 14px 18px !important;\n font-size: 13px !important;\n margin: 8px 16px 0 !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-bpm-bottom {\n padding-bottom: 4px !important;\n }\n / On very short viewports (\u2264 600px tall) collapse the upload zone\n * floor a bit further so the rest of the page still fits. /\n @media (max-height: 600px) {\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-preview.ps-pm-preview-tall {\n min-height: 140px !important;\n }\n .ps-bp-scan-progress { padding: 6px 12px 0 !important; margin-bottom: 16px !important; }\n .ps-bp-scan-help-row { padding-bottom: 6px !important; }\n }\n\n / Prominent \"How to take a good photo\" pill row \u2014 sits between the\n * stepper and the upload zone so the user always sees how to get\n * help. Centered, FILLED light-accent background (matches the\n * reference design), with a darker \"?\" circle badge. /\n .ps-bp-scan-help-row {\n display: flex; justify-content: center;\n padding: 0 4px 12px;\n }\n .ps-bp-scan-help-pill {\n padding: 10px 18px !important;\n font-size: 13px !important;\n letter-spacing: 0.02em !important;\n background: rgba(33, 84, 239, 0.10) !important;\n color: var(--ps-accent) !important;\n border: 1px solid rgba(33, 84, 239, 0.18) !important;\n box-shadow: 0 2px 6px -2px rgba(33, 84, 239, 0.18);\n gap: 8px !important;\n }\n .ps-bp-scan-help-pill .ps-pm-help-pill-q {\n width: 18px !important; height: 18px !important;\n font-size: 12px !important;\n background: var(--ps-accent) !important;\n color: #FFFFFF !important;\n }\n .ps-bp-scan-help-pill.ps-active {\n background: var(--ps-accent) !important;\n color: #FFFFFF !important;\n border-color: var(--ps-accent) !important;\n }\n .ps-bp-scan-help-pill.ps-active .ps-pm-help-pill-q {\n background: #FFFFFF !important;\n color: var(--ps-accent) !important;\n }\n\n / Mobile primary CTA \u2014 gradient purple/blue to match the reference.\n * Applied only when the photo step is rendered through the new\n * 2-step scan flow (i.e. .ps-bp-scan-progress is a sibling). /\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-primary-btn,\n .ps-bp-wrapper .ps-bp-scan-details-center ~ .ps-bpm-bottom .ps-bpm-next-btn {\n background: linear-gradient(135deg, #6E76F1 0%, #4F46E5 60%, #4338CA 100%) !important;\n box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.42),\n 0 4px 8px -4px rgba(79, 70, 229, 0.25);\n color: #FFFFFF !important;\n border-radius: 14px !important;\n letter-spacing: 0.16em !important;\n }\n\n / Compact, mobile-only age-gate overlay. Centered chip, tiny blur,\n * subtle white dim \u2014 keeps the upload icon visible behind so the\n * user sees the answer \"yes\" reveals the upload zone. /\n .ps-pm-age-overlay {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n padding: 16px;\n background: rgba(255, 255, 255, 0.45);\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n z-index: 2;\n animation: ps-pm-age-gate-in 0.22s ease-out both;\n }\n .ps-pm-age-overlay-chip {\n width: auto; max-width: 100%;\n padding: 12px 14px;\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: 14px;\n box-shadow: 0 10px 24px -10px rgba(17,24,39,0.20),\n 0 4px 10px -6px rgba(17,24,39,0.10);\n display: flex; flex-direction: column;\n align-items: center; text-align: center;\n gap: 10px;\n }\n .ps-pm-age-overlay-error .ps-pm-age-overlay-chip {\n border-color: rgba(192,38,38,0.40);\n box-shadow: 0 10px 24px -10px rgba(192,38,38,0.22);\n }\n .ps-pm-age-overlay-q {\n font-size: 14px; font-weight: 600;\n color: var(--ps-text-primary); line-height: 1.3;\n }\n .ps-pm-age-overlay-error .ps-pm-age-overlay-q { color: #C02626; }\n .ps-pm-age-overlay-actions {\n display: flex; gap: 8px; justify-content: center;\n }\n .ps-pm-age-overlay-btn {\n padding: 7px 18px;\n border-radius: 999px;\n font-family: inherit;\n font-size: 12px; font-weight: 700;\n cursor: pointer;\n letter-spacing: 0.02em;\n }\n .ps-pm-age-overlay-yes {\n background: var(--ps-accent); color: #FFFFFF;\n border: 1px solid var(--ps-accent);\n }\n .ps-pm-age-overlay-no {\n background: transparent; color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color);\n }\n\n / Spinner overlay for the backend age-check / image-processing flow.\n * Sits on top of the upload zone (absolute, inset 0) while the backend\n * verifies the photo. Disappears the moment processing finishes. /\n .ps-pm-processing-overlay {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n padding: 16px;\n background: rgba(255, 255, 255, 0.78);\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n z-index: 3;\n animation: ps-mobile-fade-in 0.18s ease-out;\n }\n .ps-pm-processing-card {\n display: flex; flex-direction: column;\n align-items: center; gap: 12px;\n padding: 16px 18px;\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: 14px;\n box-shadow: 0 10px 24px -10px rgba(17,24,39,0.18);\n }\n .ps-pm-processing-spinner {\n width: 28px; height: 28px;\n border: 3px solid var(--ps-bg-tertiary);\n border-top-color: var(--ps-accent);\n border-radius: 50%;\n animation: ps-pm-spin 0.85s linear infinite;\n }\n @keyframes ps-pm-spin {\n to { transform: rotate(360deg); }\n }\n .ps-pm-processing-label {\n font-size: 13px; font-weight: 600;\n color: var(--ps-text-primary);\n text-align: center;\n }\n\n / Backend-rejection chip \u2014 same structure as the desktop \"Photo\n * declined\" card: red icon + uppercase title row, then the AI's\n * rejection reason, then a primary \"Try another photo\" CTA. Sits\n * BELOW the upload zone. /\n .ps-pm-photo-rejection {\n display: flex; flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n margin: 10px 0 0;\n padding: 12px 14px;\n background: #FFFFFF;\n border: 1px solid rgba(220, 38, 38, 0.35);\n border-radius: 12px;\n box-shadow: 0 6px 18px -10px rgba(220, 38, 38, 0.20);\n }\n .ps-pm-photo-rejection-head {\n display: flex; align-items: center;\n gap: 6px;\n }\n .ps-pm-photo-rejection-title {\n color: #dc2626;\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.08em; text-transform: uppercase;\n }\n .ps-pm-photo-rejection-msg {\n margin: 0;\n font-size: 12px; line-height: 1.45;\n color: var(--ps-text-secondary);\n }\n .ps-pm-photo-rejection-retry {\n padding: 7px 14px;\n background: var(--ps-accent); color: #FFFFFF;\n border: none;\n border-radius: 8px;\n font-family: inherit;\n font-size: 12px; font-weight: 700;\n cursor: pointer;\n }\n .ps-pm-photo-rejection-retry:active { opacity: 0.92; }\n\n / Compact 2-step stepper \u2014 perfectly centered with numbered dots +\n * labels. Big bottom margin gives clear breathing room before the\n * \"How to take a good photo\" pill below it. /\n .ps-bp-scan-progress {\n display: flex; align-items: center; justify-content: center;\n width: 100%;\n gap: 6px;\n padding: 12px 12px 0;\n margin: 0 0 24px;\n position: relative;\n text-align: center;\n }\n .ps-bp-scan-progress-back {\n position: absolute; left: 4px; top: 12px;\n width: 28px; height: 28px;\n display: inline-flex; align-items: center; justify-content: center;\n border: none; background: transparent;\n color: var(--ps-text-primary);\n font-size: 18px; line-height: 1;\n cursor: pointer; border-radius: 50%;\n padding: 0;\n }\n .ps-bp-scan-progress-back:active { background: var(--ps-bg-tertiary); }\n .ps-bp-scan-progress-spacer { display: none; }\n .ps-bp-scan-progress-track {\n display: inline-flex; align-items: center; justify-content: center;\n gap: 10px;\n margin: 0 auto;\n flex: 0 1 auto;\n }\n .ps-bp-scan-progress-step {\n display: inline-flex; align-items: center; gap: 6px;\n flex-shrink: 0;\n }\n .ps-bp-scan-progress-dot {\n display: inline-flex; align-items: center; justify-content: center;\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--ps-bg-tertiary);\n color: var(--ps-text-muted);\n border: 1px solid var(--ps-border-color);\n font-size: 10px; font-weight: 700;\n flex-shrink: 0;\n }\n .ps-bp-scan-progress-step.ps-active .ps-bp-scan-progress-dot,\n .ps-bp-scan-progress-step.ps-done .ps-bp-scan-progress-dot {\n background: var(--ps-accent); color: #FFFFFF;\n border-color: var(--ps-accent);\n }\n .ps-bp-scan-progress-label {\n display: inline;\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.06em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-bp-scan-progress-step.ps-active .ps-bp-scan-progress-label,\n .ps-bp-scan-progress-step.ps-done .ps-bp-scan-progress-label {\n color: var(--ps-text-primary);\n }\n .ps-bp-scan-progress-line {\n flex: 0 0 28px; height: 2px;\n background: var(--ps-border-color);\n border-radius: 2px;\n }\n .ps-bp-scan-progress-line.ps-active {\n background: var(--ps-accent);\n }\n\n / Step 2 (body details) \u2014 centered single-screen layout. The wrapper\n * is a flex column with a centered content block; the bottom CTA +\n * tabs sit pinned at the bottom (handled by .ps-bpm-bottom). /\n .ps-bp-scan-details-center {\n flex: 1 1 auto;\n display: flex; flex-direction: column;\n align-items: stretch; justify-content: center;\n gap: 12px;\n padding: 8px 16px;\n min-height: 0;\n }\n .ps-bp-scan-details-title {\n margin: 0; text-align: center;\n font-size: 22px; font-weight: 700;\n color: var(--ps-text-primary);\n }\n .ps-bp-scan-details-sub {\n margin: 0; text-align: center;\n font-size: 13px; color: var(--ps-text-muted);\n }\n .ps-bp-scan-details-center .ps-bp-system-toggle { align-self: center; }\n .ps-bp-scan-details-center .ps-bp-inline-fields {\n max-width: 360px; width: 100%; margin: 4px auto 0;\n }\n\n / Desktop-style compact age chip on mobile. Sits BELOW the upload\n * zone (sibling, not overlay) so the upload area stays uncropped.\n * Mirrors desktop's two-state design (pre-answer + error). /\n .ps-pm-age-chip {\n display: flex; align-items: center;\n gap: 8px;\n margin: 8px 0 0;\n padding: 8px 12px;\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: 12px;\n box-shadow: 0 6px 18px -10px rgba(17,24,39,0.18);\n animation: ps-cpw-age-gate-in 0.28s ease-out both;\n }\n .ps-pm-age-chip-error {\n border-color: rgba(192,38,38,0.35);\n box-shadow: 0 6px 18px -10px rgba(192,38,38,0.20);\n }\n .ps-pm-age-chip-q {\n flex: 1;\n font-size: 13px; font-weight: 600;\n color: var(--ps-text-primary);\n line-height: 1.3;\n }\n .ps-pm-age-chip-error .ps-pm-age-chip-q { color: #C02626; }\n .ps-pm-age-chip-btn {\n padding: 6px 14px;\n border-radius: 999px;\n font-family: inherit;\n font-size: 12px; font-weight: 700;\n cursor: pointer;\n flex-shrink: 0;\n }\n .ps-pm-age-chip-yes {\n background: var(--ps-accent); color: #FFFFFF;\n border: 1px solid var(--ps-accent);\n }\n .ps-pm-age-chip-no {\n background: transparent; color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color);\n }\n\n / Photo-help popover on mobile = bottom drawer with backdrop. /\n .ps-bp-photo-help-backdrop {\n display: block !important;\n position: fixed !important; inset: 0 !important;\n background: rgba(15, 23, 42, 0.5) !important;\n z-index: 20 !important;\n animation: ps-mobile-fade-in 0.2s ease;\n }\n .ps-bp-photo-help {\n position: fixed !important;\n left: 0 !important; right: 0 !important; bottom: 0 !important;\n top: auto !important;\n width: 100% !important; max-width: 100% !important;\n border-radius: 18px 18px 0 0 !important;\n padding: 8px 16px 24px !important; padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;\n gap: 12px !important;\n max-height: 80svh !important; overflow-y: auto !important;\n z-index: 21 !important;\n animation: ps-mobile-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);\n box-shadow: 0 -10px 30px -8px rgba(17,24,39,0.2) !important;\n }\n .ps-bp-photo-help-handle {\n display: block !important;\n width: 36px; height: 4px; border-radius: 2px;\n background: var(--ps-border-subtle);\n margin: 0 auto 4px;\n }\n .ps-bp-photo-help-title { font-size: 16px !important; }\n .ps-bp-photo-help-close {\n width: 32px !important; height: 32px !important;\n font-size: 22px !important; border-radius: 50% !important;\n }\n .ps-bp-photo-help-section { border-radius: 10px !important; padding: 10px 12px !important; }\n .ps-bp-photo-help-section-label { font-size: 12px !important; margin-bottom: 6px !important; }\n .ps-bp-photo-help-section-body { font-size: 12px !important; line-height: 1.55 !important; }\n .ps-bp-photo-help-tip { font-size: 12px !important; line-height: 1.55 !important; }\n\n / Mobile step roots are flex columns that fill the modal body \u2014 that\n * gives the spacer something to grow into and the bottom block lands at\n * the actual viewport bottom. Negative margins extend the bottom block\n * (and tabs) edge-to-edge inside the body's padding. /\n .ps-bpm-root, .ps-pm-root, .ps-bp-wrapper {\n display: flex !important; flex-direction: column !important;\n min-height: 100% !important;\n flex: 1 !important;\n }\n .ps-bpm-bottom {\n margin-left: calc(-1 max(16px, 4vw)) !important;\n margin-right: calc(-1 * max(16px, 4vw)) !important;\n padding-left: max(16px, 4vw) !important;\n padding-right: max(16px, 4vw) !important;\n }\n .ps-bpm-bottom-tabs {\n margin-left: calc(-1 * max(16px, 4vw)) !important;\n margin-right: calc(-1 * max(16px, 4vw)) !important;\n }\n\n /* \u2500\u2500 Body: scrollable, comfortable padding, momentum scroll \u2500\u2500 /\n .ps-tryon-body {\n padding: max(16px, 4vw) !important;\n flex: 1 !important; min-height: 0 !important;\n overflow-y: auto !important; overflow-x: hidden !important;\n -webkit-overflow-scrolling: touch;\n }\n\n / \u2500\u2500 Back button: bigger, easier to tap \u2500\u2500 /\n .ps-tryon-back-btn {\n font-size: 14px !important; gap: 6px !important;\n margin-bottom: 12px !important; padding: 6px 0 !important;\n }\n .ps-tryon-back-btn svg { width: 18px !important; height: 12px !important; }\n\n / \u2500\u2500 Preserve existing previews and modal-wide overrides \u2500\u2500 /\n .ps-tryon-preview { height: 320px; }\n\n / \u2500\u2500 Drawer list (history / profiles / settings) \u2500\u2500 /\n / Pure vw gap (0.52vw = ~2 px on mobile) crushed list rows together. /\n .ps-tryon-drawer-list { gap: 12px !important; padding: 0 !important; }\n .ps-tryon-drawer { padding: 16px !important; }\n\n / \u2500\u2500 Profile cards inside the sizing-profiles drawer \u2500\u2500 /\n .ps-msp-card {\n padding: 16px !important;\n border-radius: 14px !important;\n }\n .ps-msp-card-tag { font-size: 11px !important; padding: 4px 8px !important; border-radius: 999px !important; }\n .ps-msp-card-circle { width: 72px !important; height: 72px !important; margin: 8px auto 12px !important; }\n .ps-msp-card-name { font-size: 16px !important; margin-bottom: 6px !important; }\n .ps-msp-meta-row { padding: 6px 0 !important; gap: 8px !important; }\n .ps-msp-card-meta { font-size: 12px !important; }\n .ps-msp-card-actions { gap: 8px !important; margin-top: 10px !important; }\n .ps-msp-card-select { font-size: 13px !important; padding: 10px 12px !important; border-radius: 8px !important; }\n .ps-msp-card-edit, .ps-msp-card-delete { width: 36px !important; height: 36px !important; border-radius: 8px !important; }\n .ps-msp-card-create { min-height: 120px !important; font-size: 14px !important; }\n\n / \u2500\u2500 Language switcher dropdown \u2500\u2500 /\n / Default min(18vw, 280px) collapsed to ~67 px on mobile \u2014 unusable. /\n .ps-tryon-lang-list { max-height: 320px !important; }\n .ps-tryon-lang-item { padding: 10px 14px !important; gap: 10px !important; }\n .ps-tryon-lang-name { font-size: 14px !important; }\n .ps-tryon-lang-code { font-size: 11px !important; }\n }\n\n @keyframes ps-mobile-slide-up {\n from { transform: translateY(100%); opacity: 0.4; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes ps-mobile-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @media (max-width: 720px) {\n .ps-tryon-result-split { flex-direction: column; }\n .ps-tryon-result-image-col { flex: none; }\n }\n @media (max-width: 480px) {\n .ps-tryon-body { padding: 18px; }\n .ps-tryon-header { padding: 14px 18px; }\n .ps-tryon-stepper { padding: 14px 18px 8px; }\n .ps-tryon-stepper-circle { width: 24px; height: 24px; font-size: 10px; }\n .ps-tryon-stepper-label { font-size: 9px; }\n .ps-tryon-features { flex-direction: column; gap: 8px; }\n .ps-tryon-feature { flex-direction: row; gap: 10px; text-align: left; }\n .ps-tryon-feature-icon { margin-bottom: 0; }\n .ps-tryon-input-row { flex-wrap: wrap; }\n .ps-tryon-input-row label { min-width: 100%; margin-bottom: -4px; }\n .ps-tryon-drawer { padding: 16px; }\n .ps-tryon-detail-grid { gap: 8px; }\n .ps-tryon-detail-cell { padding: 10px 12px; }\n .ps-tryon-detail-cell-value { font-size: 14px; }\n .ps-tryon-detail-modal { max-width: 100%; }\n .ps-tryon-header-icon { width: 30px; height: 30px; border-radius: 8px; }\n .ps-tryon-back-btn { font-size: 13px; gap: 6px; margin-bottom: 10px; }\n .ps-tryon-back-btn svg { width: 16px; height: 10px; }\n .ps-tryon-sr-fit-table { font-size: 14px; margin-top: 12px; }\n .ps-tryon-sr-fit-table thead th { font-size: 11px; padding: 4px 0 8px; }\n .ps-tryon-sr-fit-table td { padding: 12px 0; }\n .ps-tryon-sr-fit-status { font-size: 10px; padding: 3px 6px; }\n .ps-tryon-sr-fit-area { font-size: 14px; }\n .ps-tryon-sr-fit-range { font-size: 14px; }\n .ps-tryon-upload-modal { width: 90%; max-width: none; padding: 18px; border-radius: 14px; gap: 12px; }\n .ps-tryon-upload-modal-header h3 { font-size: 15px; }\n .ps-tryon-upload-modal-close { font-size: 22px; }\n .ps-tryon-upload-modal-dropzone { padding: 24px; min-height: 120px; border-radius: 10px; }\n .ps-tryon-upload-modal-dropzone p { font-size: 14px; }\n .ps-tryon-upload-modal-dropzone span { font-size: 11px; }\n .ps-tryon-upload-modal-preview { max-height: 200px; border-radius: 10px; }\n .ps-tryon-upload-modal-preview img { max-height: 200px; }\n .ps-tryon-upload-modal-remove { width: 24px; height: 24px; font-size: 14px; top: 6px; right: 6px; }\n / Multi-section mobile /\n .ps-tryon-sr-split-multi { grid-template-columns: 1fr; }\n .ps-tryon-sr-img-col-small { max-height: 200px; }\n .ps-tryon-sr-multi-title { font-size: 16px; }\n .ps-tryon-sr-picker { gap: 12px; padding: 4px; }\n .ps-tryon-sec-row { gap: 8px; }\n .ps-tryon-sec-bigcard:not(.ps-has-img) { padding: 16px 10px; gap: 6px; min-height: 180px; }\n .ps-tryon-sec-bigcard { border-radius: 10px; }\n .ps-tryon-sec-bigcard-content { padding: 12px 8px; }\n .ps-tryon-sec-bigcard-bg { border-radius: 10px 10px 0 0; }\n .ps-tryon-sec-bigcard-icon { width: 48px; height: 48px; }\n .ps-tryon-sec-bigcard-icon svg { width: 26px; height: 26px; }\n .ps-tryon-sec-bigcard-name { font-size: 13px; }\n .ps-tryon-sec-bigcard-size { font-size: 28px; }\n .ps-tryon-sec-bigcard-badge { font-size: 9px; padding: 2px 6px; }\n .ps-tryon-sec-bigcard-fit { font-size: 10px; }\n .ps-tryon-sec-detail-back { font-size: 13px; gap: 5px; }\n .ps-tryon-sec-detail-back svg { width: 14px; height: 14px; }\n .ps-tryon-sec-detail-header { gap: 10px; padding-bottom: 8px; }\n .ps-tryon-sec-detail-icon { width: 38px; height: 38px; }\n .ps-tryon-sec-detail-icon svg { width: 22px; height: 22px; }\n .ps-tryon-sec-detail-name { font-size: 16px; }\n .ps-tryon-section-name { font-size: 14px; }\n .ps-tryon-section-size { font-size: 18px; gap: 6px; }\n .ps-tryon-section-rec-badge,\n .ps-tryon-section-notrec-badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; }\n .ps-tryon-sec-detail .ps-tryon-sr-size-letter { font-size: 32px; }\n .ps-tryon-sec-detail .ps-tryon-sr-chip { min-width: 36px; height: 36px; font-size: 13px; }\n .ps-tryon-sec-length-row { gap: 8px; padding: 6px 0; }\n .ps-tryon-sec-length-label { font-size: 11px; }\n / Body type cards mobile /\n .ps-tryon-bodytype-cards { gap: 6px; }\n .ps-tryon-bodytype-card { padding: 8px 4px; border-radius: 8px; }\n .ps-tryon-bodytype-label { font-size: 10px; }\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Body Profile Onboarding (ps-bp-)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n\n /* Wrapper for title + split layout /\n .ps-bp-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }\n .ps-bp-shapes-header { flex-shrink: 0; margin-bottom: 0.6vw; text-align: left; }\n .ps-bp-shapes-header .ps-bp-title { font-size: 1vw; font-weight: 600; }\n .ps-bp-shapes-header .ps-bp-subtitle { font-size: 0.55vw; color: var(--ps-text-muted); font-weight: 400; }\n\n / Split layout: product left, form right \u2014 FIXED vh height, never changes /\n .ps-bp-layout {\n display: flex; gap: 1.2vw; flex: 1; min-height: 0;\n overflow: hidden; align-items: center;\n }\n .ps-bp-image {\n flex: 0 0 43%; min-width: 0;\n height: 100%;\n background: var(--ps-bg-primary);\n border-radius: 0.9vw; overflow: hidden;\n display: flex;\n }\n .ps-bp-image-img {\n width: 100%; height: 100%;\n object-fit: contain; object-position: center center;\n flex: 1;\n }\n / Upload zone \u2014 same element as .ps-bp-image, dashed border + centered content, full height /\n .ps-bp-image.ps-bp-upload-zone {\n cursor: pointer; border: 2px dashed var(--ps-border-color);\n align-self: stretch; align-items: center; justify-content: center;\n }\n .ps-bp-upload-zone:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.04); }\n .ps-bp-upload-placeholder {\n display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vw;\n color: var(--ps-text-muted);\n }\n .ps-bp-upload-placeholder svg { width: 2.5vw; height: 2.5vw; stroke: var(--ps-accent); opacity: 0.7; }\n .ps-bp-upload-text { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-secondary); }\n .ps-bp-upload-hint { font-size: 0.68vw; color: var(--ps-text-muted); }\n\n .ps-bp-image-remove {\n position: absolute; top: 0.5vw; right: 0.5vw;\n width: 1.6vw; height: 1.6vw; display: flex; align-items: center; justify-content: center;\n background: rgba(0,0,0,0.6); border: none; border-radius: 50%;\n color: var(--ps-text-primary); font-size: 1vw; cursor: pointer; line-height: 1;\n transition: background 0.15s; z-index: 2;\n }\n .ps-bp-image-remove:hover { background: rgba(0,0,0,0.8); }\n\n .ps-bp-root {\n flex: 1; min-width: 0;\n display: flex; flex-direction: column; gap: 0.6vw; padding: 0.2vw 0.5vw 0.3vw 0;\n height: 100%; max-height: 100%; overflow: hidden;\n justify-content: center;\n }\n\n / Step dots /\n .ps-bp-dots {\n display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n }\n .ps-bp-dot {\n width: 0.42vw; height: 0.42vw; border-radius: 50%; background: var(--ps-border-color);\n transition: all 0.3s ease;\n }\n .ps-bp-dot-done { background: var(--ps-accent); }\n .ps-bp-dot-active {\n background: var(--ps-accent); width: 1.2vw; border-radius: 0.25vw;\n }\n\n / Step container + animation \u2014 fade only, no layout shift /\n .ps-bp-step { display: flex; flex-direction: column; gap: 1vw; flex: 1; min-height: 0; margin-top: 3vw; }\n .ps-bp-step-enter { animation: ps-bp-fade 0.25s ease both; }\n @keyframes ps-bp-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n / Minimal \"Using <profile> \u00B7 start fresh\" hint above the first input /\n .ps-bp-profile-hint {\n margin: 0; padding: 0;\n text-align: center;\n font-size: 11px; font-weight: 400;\n color: var(--ps-text-muted);\n letter-spacing: 0.01em;\n line-height: 1.4;\n }\n .ps-bp-profile-hint strong {\n color: var(--ps-text-secondary); font-weight: 600;\n }\n .ps-bp-profile-hint-link {\n background: none; border: none;\n color: var(--ps-text-muted);\n font-family: inherit; font-size: inherit; font-weight: 400;\n text-decoration: underline; text-underline-offset: 2px;\n cursor: pointer; padding: 0;\n }\n .ps-bp-profile-hint-link:hover { color: var(--ps-text-secondary); }\n\n / Typography /\n .ps-bp-title {\n font-size: 1.25vw; font-weight: 700; color: var(--ps-text-primary);\n margin: 0; letter-spacing: -0.02em; text-align: center;\n }\n .ps-bp-subtitle {\n font-size: 0.78vw; color: var(--ps-text-secondary); margin: -0.4vw 0 0; text-align: center;\n }\n\n / Unit system toggle (Imperial / Metric) /\n .ps-bp-system-toggle {\n display: flex; justify-content: center; gap: 1.5vw; margin: 0.3vw 0;\n }\n .ps-bp-system-btn {\n background: none; border: none; padding: 0.2vw 0;\n font-size: 0.78vw; font-weight: 500; color: var(--ps-text-muted);\n cursor: pointer; font-family: inherit;\n border-bottom: 2px solid transparent; transition: all 0.2s;\n }\n .ps-bp-system-btn:hover { color: var(--ps-text-secondary); }\n .ps-bp-system-active {\n color: var(--ps-text-primary); border-bottom-color: var(--ps-accent);\n }\n\n / Inline field rows (WAIR style) /\n .ps-bp-inline-fields {\n display: flex; flex-direction: column; gap: 0; flex: 1;\n justify-content: center;\n }\n .ps-bp-inline-row {\n display: flex; align-items: center; gap: 1vw;\n padding: 1vw 0;\n }\n .ps-bp-inline-label {\n flex: 0 0 6.5vw; font-size: 0.68vw; font-weight: 700;\n color: var(--ps-text-muted); letter-spacing: 0.08em;\n text-transform: uppercase; white-space: nowrap;\n }\n .ps-bp-inline-input-group {\n flex: 1; display: flex; align-items: center; gap: 0.4vw;\n }\n .ps-bp-inline-input {\n flex: 1; min-width: 0; padding: 0;\n background: transparent; border: none; border-bottom: 1px solid var(--ps-border-color);\n color: var(--ps-text-primary); font-size: 1.1vw; font-weight: 500;\n font-family: inherit; outline: none;\n padding-bottom: 0.2vw; transition: border-color 0.2s;\n }\n .ps-bp-inline-input:focus { border-bottom-color: var(--ps-accent); }\n .ps-bp-inline-input::placeholder { color: var(--ps-text-muted); font-weight: 400; }\n .ps-bp-inline-input::-webkit-outer-spin-button,\n .ps-bp-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-bp-inline-input[type=\"number\"] { -moz-appearance: textfield; }\n .ps-bp-inline-unit {\n font-size: 0.73vw; color: var(--ps-text-muted); font-weight: 500;\n flex-shrink: 0;\n }\n\n / Photo CTA link /\n .ps-bp-photo-cta {\n display: flex; align-items: center; gap: 0.5vw;\n background: none; border: none; padding: 0.6vw 0;\n color: var(--ps-accent); font-size: 0.78vw; font-weight: 600;\n cursor: pointer; font-family: inherit; transition: all 0.2s;\n margin-top: 0.3vw;\n }\n .ps-bp-photo-cta:hover:not(:disabled) { color: var(--ps-accent-hover); }\n .ps-bp-photo-cta:disabled {\n opacity: 0.35;\n cursor: not-allowed;\n }\n .ps-bp-photo-cta svg { width: 1vw; height: 1vw; stroke: currentColor; flex-shrink: 0; }\n .ps-bp-photo-cta-arrow { font-size: 0.9vw; transition: transform 0.2s; }\n .ps-bp-photo-cta:hover:not(:disabled) .ps-bp-photo-cta-arrow { transform: translateX(3px); }\n .ps-bp-photo-cta-hint {\n display: block; text-align: center;\n font-size: 0.6vw; color: var(--ps-text-muted);\n font-style: italic; margin-top: 0.25vw;\n }\n .ps-bp-photo-cta-done { color: var(--ps-success-color); }\n .ps-bp-photo-cta-done:hover { color: var(--ps-text-muted); }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Mobile basics step (BasicsStepMobile.tsx) \u2014 matches the reference\n design: product image at top, big editable numbers, RECOMMENDED\n upload card. NOT a slider \u2014 the values are real number inputs\n styled to look like big plain text, so the OS keyboard pops the\n digit pad on iOS/Android.\n These styles are scoped to .ps-bpm-* so they don't conflict with\n the existing desktop .ps-bp-* layout.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-bpm-root {\n display: flex; flex-direction: column;\n gap: max(10px, 2.6vw); padding: max(8px, 2.1vw) max(4px, 1.0vw) 0;\n flex: 1; min-height: 0;\n }\n .ps-bpm-spacer { flex: 1 1 auto; min-height: max(8px, 2.1vw); }\n .ps-bpm-header { text-align: center; margin: max(4px, 1.0vw) 0 0; }\n .ps-bpm-title {\n font-size: max(18px, 4.6vw); font-weight: 700; color: var(--ps-text-primary);\n margin: 0 0 max(4px, 1.0vw); line-height: 1.3;\n }\n .ps-bpm-subtitle {\n font-size: max(12px, 3.1vw); color: var(--ps-text-muted);\n margin: 0 auto; max-width: max(260px, 66.7vw); line-height: 1.45; font-weight: 400;\n }\n\n / Metric / Imperial pill toggle /\n .ps-bpm-toggle {\n display: flex; justify-content: center; gap: max(24px, 6.2vw);\n margin: 2px 0 max(4px, 1.0vw);\n }\n .ps-bpm-toggle-btn {\n background: none; border: none; padding: max(6px, 1.5vw) max(4px, 1.0vw);\n font-family: inherit; font-size: max(12px, 3.1vw); font-weight: 600;\n letter-spacing: 0.06em;\n color: var(--ps-text-muted); cursor: pointer;\n border-bottom: 1.5px solid transparent;\n transition: all 0.2s;\n }\n .ps-bpm-toggle-btn.ps-active {\n color: var(--ps-accent);\n border-bottom-color: var(--ps-accent);\n }\n\n / Slider rows \u2014 label top-left, value top-right, then [-] [track] [+] /\n .ps-bpm-fields {\n display: flex; flex-direction: column;\n margin-top: max(4px, 1.0vw);\n }\n .ps-bpm-row {\n display: flex; flex-direction: column;\n padding: max(14px, 3.6vw) max(4px, 1.0vw);\n gap: max(12px, 3.1vw);\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-bpm-row:last-child { border-bottom: none; }\n .ps-bpm-row-top {\n display: flex; align-items: center; justify-content: space-between;\n }\n .ps-bpm-label {\n font-size: max(11px, 2.8vw); font-weight: 600;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-bpm-value-display {\n font-size: max(14px, 3.6vw); font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n }\n\n / Slider row container: [-] [track] [+] /\n .ps-bpm-slider-row {\n display: flex; align-items: center; gap: max(12px, 3.1vw);\n }\n .ps-bpm-step-btn {\n flex-shrink: 0;\n width: max(34px, 8.7vw); height: max(34px, 8.7vw); border-radius: 50%;\n background: var(--ps-bg-tertiary); border: none;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n color: var(--ps-text-secondary);\n transition: background 0.15s, transform 0.1s;\n }\n .ps-bpm-step-btn:hover { background: var(--ps-border-color); }\n .ps-bpm-step-btn:active { transform: scale(0.92); }\n\n / The slider \u2014 thicker track, dark navy thumb, monochrome /\n .ps-bpm-slider {\n -webkit-appearance: none; appearance: none;\n flex: 1; min-width: 0;\n height: max(4px, 1.0vw); outline: none;\n background: linear-gradient(\n to right,\n var(--ps-text-primary) 0%,\n var(--ps-text-primary) var(--ps-pct, 0%),\n var(--ps-border-color) var(--ps-pct, 0%),\n var(--ps-border-color) 100%\n );\n border-radius: max(999px, 256.2vw); cursor: pointer;\n margin: 0;\n }\n .ps-bpm-slider::-webkit-slider-thumb {\n -webkit-appearance: none; appearance: none;\n width: max(18px, 4.6vw); height: max(18px, 4.6vw); border-radius: 50%;\n background: var(--ps-text-primary); border: none;\n cursor: grab; transition: transform 0.15s ease;\n box-shadow: 0 1px 3px rgba(0,0,0,0.18);\n }\n .ps-bpm-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }\n .ps-bpm-slider::-moz-range-thumb {\n width: max(18px, 4.6vw); height: max(18px, 4.6vw); border-radius: 50%;\n background: var(--ps-text-primary); border: none; cursor: grab;\n box-shadow: 0 1px 3px rgba(0,0,0,0.18);\n }\n .ps-bpm-slider::-moz-range-track { background: transparent; height: max(4px, 1.0vw); }\n\n / \"or\" divider \u2014 flanked by hairlines /\n .ps-bpm-or {\n display: flex; align-items: center; gap: max(12px, 3.1vw);\n margin: max(14px, 3.6vw) max(4px, 1.0vw) max(4px, 1.0vw);\n }\n .ps-bpm-or::before, .ps-bpm-or::after {\n content: \"\"; flex: 1; height: 1px;\n background: var(--ps-border-subtle);\n }\n .ps-bpm-or span {\n font-size: max(10px, 2.6vw); font-weight: 600;\n text-transform: uppercase; letter-spacing: 0.16em;\n color: var(--ps-text-muted);\n }\n\n / Minimal upload link \u2014 no card, no background, just text + icons /\n .ps-bpm-upload-link {\n display: flex; align-items: center; justify-content: center; gap: max(10px, 2.6vw);\n background: none; border: none;\n padding: max(8px, 2.1vw) max(4px, 1.0vw); margin: 0;\n cursor: pointer; font-family: inherit;\n color: var(--ps-text-primary); font-size: max(13px, 3.3vw); font-weight: 500;\n width: 100%;\n transition: opacity 0.15s;\n }\n .ps-bpm-upload-link:hover:not(:disabled) { opacity: 0.7; }\n .ps-bpm-upload-link:disabled {\n opacity: 0.35;\n cursor: not-allowed;\n }\n .ps-bpm-upload-link svg { color: var(--ps-text-secondary); flex-shrink: 0; }\n / Subtle helper text shown below the disabled upload link. /\n .ps-bpm-upload-link-hint {\n display: block; text-align: center;\n margin-top: max(2px, 0.5vw);\n font-size: max(10px, 2.6vw); color: var(--ps-text-muted);\n font-style: italic;\n }\n\n .ps-bpm-error {\n font-size: max(11px, 2.8vw); color: var(--ps-error-color);\n text-align: center; margin: max(4px, 1.0vw) 0 0;\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PhotoStepMobile (.ps-pm-) \u2014 AI scan / photo upload step.\n Title + subtitle, large photo preview, \"Checklist for accuracy\"\n card, dark primary CTA, outlined RETAKE secondary, bottom tabs.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-pm-root {\n display: flex; flex-direction: column;\n gap: max(14px, 3.6vw); padding: max(8px, 2.1vw) max(4px, 1.0vw) 0;\n flex: 1; min-height: 0;\n }\n .ps-pm-header { margin: max(4px, 1.0vw) 0 0; }\n .ps-pm-title {\n font-size: max(22px, 5.6vw); font-weight: 700; color: var(--ps-text-primary);\n margin: 0 0 max(6px, 1.5vw); line-height: 1.25;\n }\n .ps-pm-subtitle {\n font-size: max(13px, 3.3vw); color: var(--ps-text-muted);\n margin: 0; line-height: 1.45; font-weight: 400;\n }\n\n /* Photo preview / upload zone /\n .ps-pm-preview {\n background: var(--ps-bg-tertiary);\n border-radius: max(10px, 2.6vw);\n height: max(280px, 71.8vw);\n overflow: hidden;\n display: flex; align-items: center; justify-content: center;\n position: relative;\n flex-shrink: 0;\n }\n .ps-pm-preview-img {\n max-width: 100%; max-height: 100%;\n width: auto; height: 100%;\n object-fit: contain; display: block;\n }\n .ps-pm-preview-empty {\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n gap: max(6px, 1.5vw); padding: max(24px, 6.2vw);\n background: none; border: none;\n color: var(--ps-text-muted); cursor: pointer;\n font-family: inherit; width: 100%; height: 100%;\n }\n .ps-pm-preview-empty svg { color: var(--ps-text-muted); }\n .ps-pm-preview-empty-title {\n font-size: max(14px, 3.6vw); font-weight: 600; color: var(--ps-text-secondary);\n margin-top: max(4px, 1.0vw);\n }\n .ps-pm-preview-empty-hint {\n font-size: max(11px, 2.8vw); color: var(--ps-text-muted);\n }\n .ps-pm-preview-remove {\n position: absolute; top: max(10px, 2.6vw); right: max(10px, 2.6vw);\n width: max(28px, 7.2vw); height: max(28px, 7.2vw); border-radius: max(6px, 1.5vw);\n background: rgba(255,255,255,0.9); border: none;\n color: var(--ps-text-primary); cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 1px 4px rgba(0,0,0,0.15);\n transition: background 0.15s;\n }\n .ps-pm-preview-remove:hover { background: #FFFFFF; }\n\n / \u2500\u2500 Mobile age-gate overlay \u2500\u2500 /\n .ps-pm-preview-blurred {\n filter: blur(6px) saturate(0.7);\n pointer-events: none;\n user-select: none;\n }\n .ps-pm-age-gate {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n padding: max(16px, 4vw);\n background: rgba(255, 255, 255, 0.55);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n z-index: 2;\n animation: ps-pm-age-gate-in 0.28s ease-out both;\n }\n @keyframes ps-pm-age-gate-in {\n 0% { opacity: 0; transform: scale(0.97); }\n 100% { opacity: 1; transform: scale(1); }\n }\n .ps-pm-age-gate-card {\n width: 100%; max-width: max(280px, 82vw);\n padding: max(18px, 4.6vw) max(16px, 4.2vw);\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: max(12px, 3vw);\n box-shadow: 0 20px 40px -12px rgba(17, 24, 39, 0.25),\n 0 8px 16px -8px rgba(17, 24, 39, 0.15);\n display: flex; flex-direction: column;\n align-items: center; text-align: center;\n gap: max(8px, 2vw);\n }\n .ps-pm-age-gate-eyebrow {\n font-size: max(10px, 2.6vw); font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-pm-age-gate-eyebrow-blocked { color: #C02626; }\n .ps-pm-age-gate-question {\n font-size: max(14px, 3.8vw); font-weight: 600;\n line-height: 1.35; color: var(--ps-text-primary); margin: 0;\n }\n .ps-pm-age-gate-actions {\n display: flex; flex-direction: column; gap: max(8px, 2vw);\n width: 100%; margin-top: max(4px, 1vw);\n }\n .ps-pm-age-gate-btn {\n width: 100%;\n padding: max(11px, 2.9vw) max(14px, 3.6vw);\n border-radius: 999px;\n font-family: inherit;\n font-size: max(12px, 3.2vw); font-weight: 700;\n letter-spacing: 0.02em;\n cursor: pointer;\n transition: background 0.18s, border-color 0.18s, color 0.18s;\n }\n .ps-pm-age-gate-btn-primary {\n background: var(--ps-accent);\n color: #FFFFFF;\n border: 1.5px solid var(--ps-accent);\n }\n .ps-pm-age-gate-btn-secondary {\n background: transparent;\n color: var(--ps-text-primary);\n border: 1.5px solid var(--ps-border-color);\n }\n .ps-pm-age-gate-btn-secondary:active {\n background: var(--ps-bg-secondary);\n }\n\n / \u2500\u2500 Mobile legal notice \u2500\u2500 /\n .ps-pm-legal-notice {\n margin-top: max(10px, 2.6vw);\n background: rgba(33, 84, 239, 0.04);\n border: 1px solid rgba(33, 84, 239, 0.16);\n border-radius: max(10px, 2.6vw);\n padding: max(10px, 2.6vw) max(12px, 3.1vw);\n display: flex; flex-direction: column;\n gap: max(4px, 1vw);\n }\n .ps-pm-legal-notice-head {\n display: flex; align-items: center;\n gap: max(6px, 1.5vw);\n font-size: max(10px, 2.6vw); font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-pm-legal-notice-head svg { width: max(13px, 3.4vw); height: max(13px, 3.4vw); }\n .ps-pm-legal-notice-body {\n margin: 0;\n font-size: max(11px, 2.9vw);\n line-height: 1.5;\n color: var(--ps-text-secondary);\n }\n\n / Checklist for accuracy card /\n .ps-pm-checklist {\n display: flex; gap: max(12px, 3.1vw);\n padding: max(12px, 3.1vw) max(14px, 3.6vw);\n background: var(--ps-bg-secondary);\n border-radius: max(10px, 2.6vw);\n border: 1px solid var(--ps-border-subtle);\n }\n .ps-pm-checklist-icon {\n flex-shrink: 0;\n width: max(22px, 5.6vw); height: max(22px, 5.6vw);\n color: var(--ps-text-primary);\n display: flex; align-items: center; justify-content: center;\n margin-top: 1px;\n }\n .ps-pm-checklist-body { flex: 1; min-width: 0; }\n .ps-pm-checklist-title {\n font-size: max(12px, 3.1vw); font-weight: 700;\n color: var(--ps-text-primary);\n margin-bottom: max(5px, 1.3vw);\n }\n .ps-pm-checklist-items {\n list-style: none; padding: 0; margin: 0;\n }\n .ps-pm-checklist-items li {\n font-size: max(11px, 2.8vw); color: var(--ps-text-secondary);\n padding: 1px 0 1px max(12px, 3.1vw);\n position: relative; line-height: 1.5;\n }\n .ps-pm-checklist-items li::before {\n content: \"\u2022\"; position: absolute; left: 2px;\n color: var(--ps-text-muted);\n }\n\n / \u2500\u2500 Do / Don't grid (full-body photo step) \u2500\u2500\n Colour scheme mirrors the desktop guidelines in BodyProfileView so\n users see the same visual pattern on both form factors. Stacks to a\n single column on very narrow screens so the five-bullet lists stay\n readable. /\n .ps-pm-dodonts-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: max(8px, 2.1vw);\n }\n @media (max-width: 380px) {\n .ps-pm-dodonts-grid { grid-template-columns: 1fr; }\n }\n .ps-pm-do-card,\n .ps-pm-dont-card {\n border-radius: max(10px, 2.6vw);\n padding: max(10px, 2.6vw) max(12px, 3.1vw);\n min-width: 0;\n }\n .ps-pm-do-card { background: #ddfbe7; }\n .ps-pm-dont-card { background: #ffe2e2; }\n .ps-pm-do-card-head,\n .ps-pm-dont-card-head {\n display: flex; align-items: center; gap: max(6px, 1.5vw);\n font-size: max(11px, 2.8vw); font-weight: 700;\n letter-spacing: 0.08em; text-transform: uppercase;\n margin-bottom: max(6px, 1.5vw);\n }\n .ps-pm-do-card-head { color: #1c9d4c; }\n .ps-pm-dont-card-head { color: #e7000b; }\n .ps-pm-do-card-list,\n .ps-pm-dont-card-list {\n list-style: none; padding: 0; margin: 0;\n }\n .ps-pm-do-card-list li,\n .ps-pm-dont-card-list li {\n position: relative;\n padding-left: max(12px, 3.1vw);\n font-size: max(11px, 2.8vw);\n line-height: 1.5;\n color: #1a1a1a;\n }\n .ps-pm-do-card-list li + li,\n .ps-pm-dont-card-list li + li {\n margin-top: max(3px, 0.8vw);\n }\n .ps-pm-do-card-list li::before {\n content: \"\u2713\"; position: absolute; left: 0; top: 0;\n color: #1c9d4c; font-weight: 700;\n }\n .ps-pm-dont-card-list li::before {\n content: \"\u2717\"; position: absolute; left: 0; top: 0;\n color: #e7000b; font-weight: 700;\n }\n\n / Quick-Tip row below the Do/Don't cards. Surfaces the\n \"simpler = more accurate\" reminder that also lives on desktop. /\n .ps-pm-dodonts-tip {\n display: flex; align-items: flex-start; gap: max(8px, 2.1vw);\n padding: max(10px, 2.6vw) max(12px, 3.1vw);\n background: #c6e1f7;\n border-radius: max(10px, 2.6vw);\n font-size: max(11px, 2.8vw); line-height: 1.5;\n color: #1a1a1a;\n }\n .ps-pm-dodonts-tip-emoji { flex-shrink: 0; font-size: max(14px, 3.6vw); line-height: 1; }\n\n / Compact height input row in the mobile photo step /\n .ps-pm-height-row {\n display: flex; align-items: center; gap: max(8px, 2.1vw);\n padding: 0 max(4px, 1.0vw);\n }\n .ps-pm-height-label {\n font-size: max(12px, 3.1vw); font-weight: 600; color: var(--ps-text-secondary);\n flex-shrink: 0;\n }\n .ps-pm-height-input {\n width: max(70px, 18vw); padding: max(7px, 1.8vw) max(10px, 2.6vw);\n font-size: max(13px, 3.3vw); border-radius: max(6px, 1.5vw);\n border: 1px solid var(--ps-border-color); background: var(--ps-bg-secondary);\n color: var(--ps-text-primary); font-family: inherit;\n }\n .ps-pm-height-unit {\n font-size: max(11px, 2.8vw); color: var(--ps-text-muted); flex-shrink: 0;\n }\n\n / Primary CTA: ANALYZE MY SIZE \u2014 uses the user's brand accent /\n .ps-pm-primary-btn {\n margin: 0 max(16px, 4.1vw); width: calc(100% - max(32px, 8.2vw));\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: max(8px, 2.1vw);\n padding: max(16px, 4.1vw) max(18px, 4.6vw);\n font-family: inherit; font-size: max(13px, 3.3vw); font-weight: 700;\n letter-spacing: 0.1em; text-transform: uppercase;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n }\n .ps-pm-primary-btn:active { transform: scale(0.98); }\n .ps-pm-primary-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n / Outlined secondary: RETAKE PHOTO /\n .ps-pm-secondary-btn {\n margin: max(8px, 2.1vw) max(16px, 4.1vw) max(12px, 3.1vw); width: calc(100% - max(32px, 8.2vw));\n background: transparent; color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color); border-radius: 8px;\n padding: max(13px, 3.3vw) max(18px, 4.6vw);\n font-family: inherit; font-size: max(11px, 2.8vw); font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n cursor: pointer;\n transition: background 0.15s;\n }\n .ps-pm-secondary-btn:hover { background: var(--ps-bg-secondary); }\n\n / When the bottom action area contains the primary button (photo step),\n it needs different padding than the basics step (which has the next btn\n baked in via .ps-bpm-next-btn). Both share .ps-bpm-bottom container. /\n .ps-bpm-bottom .ps-pm-primary-btn { margin: max(14px, 3.6vw) max(16px, 4.1vw) 0; }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MobileScanningView (.ps-msc-) \u2014 AI scan processing screen.\n Dark photo viewfinder with corner brackets, scanning line, pose\n skeleton overlay, cycling stage text below with slide-fade.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-msc-root {\n display: flex; flex-direction: column;\n gap: 18px; padding: 8px 4px 0;\n flex: 1; min-height: 0;\n }\n\n /* Photo container \u2014 transparent, no scanner, no chrome /\n .ps-msc-viewfinder {\n position: relative; flex-shrink: 0;\n background: transparent; border-radius: 12px; overflow: hidden;\n height: 64vh; max-height: 540px; min-height: 360px;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-msc-photo {\n max-width: 100%; max-height: 100%;\n width: auto; height: 100%;\n object-fit: contain; display: block;\n }\n\n / Live feed badge top-left /\n .ps-msc-feed-badge {\n position: absolute; top: 12px; left: 14px; z-index: 4;\n display: flex; align-items: center; gap: 6px;\n color: rgba(255,255,255,0.85);\n font-size: 10px; font-weight: 600;\n letter-spacing: 0.12em;\n font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n }\n .ps-msc-feed-dot {\n width: 7px; height: 7px; border-radius: 50%;\n background: #ef4444;\n box-shadow: 0 0 0 0 rgba(239,68,68,0.6);\n animation: ps-msc-rec 1.4s ease-in-out infinite;\n }\n @keyframes ps-msc-rec {\n 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }\n 50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(239,68,68,0); }\n }\n\n / Corner brackets \u2014 four absolutely positioned L-shapes /\n .ps-msc-corners {\n position: absolute; inset: 28px;\n pointer-events: none; z-index: 3;\n }\n .ps-msc-corner {\n position: absolute;\n width: 22px; height: 22px;\n border: 1.5px solid rgba(255,255,255,0.7);\n }\n .ps-msc-corner.ps-tl { top: 0; left: 0; border-right: none; border-bottom: none; }\n .ps-msc-corner.ps-tr { top: 0; right: 0; border-left: none; border-bottom: none; }\n .ps-msc-corner.ps-bl { bottom: 0; left: 0; border-right: none; border-top: none; }\n .ps-msc-corner.ps-br { bottom: 0; right: 0; border-left: none; border-top: none; }\n\n / Scanning line that sweeps top-to-bottom \u2014 GPU-accelerated.\n Animating the top property caused first-paint stutter; switched\n to translate3d so the browser composites on its own layer\n without re-laying out the viewfinder on every frame. /\n .ps-msc-scanline {\n position: absolute; left: 28px; right: 28px;\n top: 28px; height: 1.5px; z-index: 3;\n background: linear-gradient(\n to right,\n transparent,\n rgba(180,220,255,0.9),\n rgba(180,220,255,0.9),\n transparent\n );\n will-change: transform, opacity;\n transform: translate3d(0, 0, 0);\n animation: ps-msc-scan 2.8s ease-in-out 0.4s infinite;\n }\n @keyframes ps-msc-scan {\n 0% { transform: translate3d(0, 0, 0); opacity: 0; }\n 8% { opacity: 1; }\n 92% { opacity: 1; }\n 100% { transform: translate3d(0, min(calc(64vh - 60px), 480px), 0); opacity: 0; }\n }\n\n / Pose skeleton overlay \u2014 sits over the photo /\n .ps-msc-pose-wrap {\n position: absolute; inset: 0; z-index: 2;\n display: flex; align-items: center; justify-content: center;\n pointer-events: none;\n }\n .ps-msc-pose-overlay {\n width: 100%; height: 100%;\n }\n @keyframes ps-msc-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n / Bottom of viewfinder: stage label + progress bar + sub /\n .ps-msc-vf-bottom {\n position: absolute; left: 28px; right: 28px; bottom: 28px;\n z-index: 4; text-align: center;\n color: #FFFFFF;\n }\n .ps-msc-vf-text {\n font-size: 10px; font-weight: 700;\n letter-spacing: 0.16em;\n color: rgba(255,255,255,0.9);\n margin-bottom: 6px;\n font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n }\n .ps-msc-vf-bar {\n height: 2px; width: 100%;\n background: rgba(255,255,255,0.18);\n border-radius: 2px; overflow: hidden;\n }\n .ps-msc-vf-bar-fill {\n height: 100%; width: 30%;\n background: linear-gradient(to right, rgba(180,220,255,0.6), rgba(255,255,255,0.95));\n border-radius: 2px;\n animation: ps-msc-bar 2.2s ease-in-out infinite;\n }\n @keyframes ps-msc-bar {\n 0% { transform: translateX(-100%); }\n 50% { transform: translateX(150%); }\n 100% { transform: translateX(350%); }\n }\n .ps-msc-vf-sub {\n margin-top: 8px;\n font-size: 9px; font-weight: 600;\n letter-spacing: 0.18em;\n color: rgba(255,255,255,0.55);\n font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n }\n\n / Cycling stage text below the viewfinder \u2014 slides + fades on change /\n .ps-msc-stage {\n text-align: center; padding: 4px 12px;\n min-height: 64px;\n / Lock width so the cycling stage text (shorter/longer strings every\n ~2s) doesn't reflow the sibling TryOnProgress bar. /\n width: 320px;\n max-width: 100%;\n overflow: hidden;\n }\n .ps-msc-stage-slot {\n animation: ps-msc-stage-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n }\n @keyframes ps-msc-stage-in {\n 0% { opacity: 0; transform: translateY(18px); filter: blur(4px); }\n 100% { opacity: 1; transform: translateY(0); filter: blur(0); }\n }\n .ps-msc-stage-title {\n font-size: 16px; font-weight: 700;\n letter-spacing: 0.06em;\n color: var(--ps-text-primary);\n margin-bottom: 6px;\n }\n .ps-msc-stage-desc {\n font-size: 12px; color: var(--ps-text-muted);\n line-height: 1.5; max-width: 300px; margin: 0 auto;\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MultiSectionMobile (.ps-msr-) \u2014 mobile multi-section results\n screen. Eyebrow + product hero + match badge + section list + CTA.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n /* Layout: header (modal-level) \u2192 flex column root \u2192 scroll content\n (flex: 1, overflow-y: auto) \u2192 fixed bottom bar (flex-shrink: 0).\n This is more reliable than position: sticky inside an\n overflow:auto flex column, which was floating mid-screen. /\n .ps-msr-root {\n display: flex; flex-direction: column;\n height: 100%; min-height: 0;\n margin: 0 -16px;\n }\n .ps-msr-scroll {\n flex: 1; min-height: 0;\n overflow-y: auto; -webkit-overflow-scrolling: touch;\n display: flex; flex-direction: column;\n gap: 14px; padding: 8px 16px 24px;\n }\n .ps-msr-eyebrow {\n font-size: 10px; font-weight: 600;\n letter-spacing: 0.16em; text-transform: uppercase;\n color: var(--ps-text-muted);\n text-align: center; margin: 4px 0 -4px;\n }\n\n / Product hero \u2014 big centered image + title /\n .ps-msr-product {\n display: flex; flex-direction: column; align-items: center;\n gap: 14px;\n }\n .ps-msr-product-img-wrap {\n position: relative; flex-shrink: 0;\n width: 100%; max-width: 360px; height: 420px;\n border-radius: 12px; overflow: hidden;\n background: var(--ps-bg-secondary);\n display: flex; align-items: center; justify-content: center;\n }\n / Try-on result keeps the same neutral background as the product hero \u2014\n * no dark backdrop on mobile. /\n .ps-msr-product-img {\n width: 100%; height: 100%;\n object-fit: contain; display: block;\n }\n / Show-Fit / mediapipe overlay toggle pill \u2014 bottom-left of try-on hero /\n .ps-msr-fit-toggle {\n position: absolute; bottom: 10px; left: 10px;\n display: flex; align-items: center; gap: 6px;\n padding: 8px 12px;\n background: rgba(255,255,255,0.92);\n color: var(--ps-text-primary);\n border: none; border-radius: 999px;\n font-family: inherit; font-size: 11px; font-weight: 700;\n letter-spacing: 0.04em;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(0,0,0,0.18);\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n z-index: 2;\n }\n .ps-msr-fit-toggle:active { transform: scale(0.97); }\n .ps-msr-fit-toggle[aria-pressed=\"true\"] {\n background: var(--ps-accent); color: #FFFFFF;\n }\n / Bottom action row when try-on finished \u2014 Try Again + Continue Shopping /\n .ps-msr-bottom-row {\n display: flex; gap: 10px; align-items: stretch;\n }\n .ps-msr-bottom-row .ps-msr-tryon-cta { flex: 1; }\n .ps-msr-tryon-cta.ps-secondary {\n background: transparent;\n color: var(--ps-text-primary);\n border: 1.5px solid var(--ps-border-color);\n }\n .ps-msr-tryon-cta.ps-secondary:active {\n background: var(--ps-bg-secondary);\n }\n .ps-msr-bookmark {\n position: absolute; top: 10px; right: 10px;\n width: 30px; height: 30px; border-radius: 7px;\n background: rgba(255,255,255,0.92); border: none;\n color: var(--ps-text-primary); cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n }\n .ps-msr-product-name {\n font-size: 15px; font-weight: 600;\n color: var(--ps-text-primary);\n text-align: center; margin: 0;\n letter-spacing: -0.005em;\n }\n\n / Match badge row /\n .ps-msr-match-row {\n display: flex; align-items: center; justify-content: center;\n gap: 12px; padding: 4px 4px;\n }\n .ps-msr-match {\n display: flex; align-items: center; gap: 10px;\n }\n .ps-msr-match-circle {\n position: relative;\n width: 44px; height: 44px;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-msr-match-ring {\n position: absolute; inset: 0;\n width: 100%; height: 100%;\n transform: rotate(0deg);\n }\n .ps-msr-match-pct {\n position: relative; z-index: 1;\n font-size: 12px; font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n }\n .ps-msr-match-label {\n font-size: 9px; font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n\n / Section cards \u2014 TALL, label small on top, BIG centered size value /\n .ps-msr-sections {\n display: flex; flex-direction: column;\n margin-top: 8px;\n border-top: 1px solid var(--ps-border-subtle);\n }\n .ps-msr-section-card {\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n gap: 8px;\n background: none; border: none;\n border-bottom: 1px solid var(--ps-border-subtle);\n padding: 16px 20px;\n font-family: inherit; cursor: pointer;\n width: 100%;\n transition: background 0.15s, transform 0.15s;\n }\n .ps-msr-section-card:active { transform: scale(0.99); background: var(--ps-bg-secondary); }\n / Bigger garment icon \u2014 same source as desktop (sizeGuide.sectionImages\n * \u2192 falls back to built-in line-art PNG via garmentIconForSection).\n * No background, no tinting \u2014 exact image asset shown at scale. /\n .ps-msr-section-icon-lg {\n width: 56px; height: 56px;\n object-fit: contain;\n background: none;\n margin: 0 auto 4px;\n display: block;\n }\n .ps-msr-section-name {\n font-size: 11px; font-weight: 600;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-muted);\n text-align: center;\n }\n .ps-msr-section-size {\n font-size: 32px; font-weight: 600;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n line-height: 1.1;\n text-align: center;\n letter-spacing: -0.01em;\n }\n\n / Fixed bottom action bar \u2014 always visible, content scrolls above it /\n .ps-msr-bottom {\n flex-shrink: 0;\n background: var(--ps-bg-primary);\n border-top: 1px solid var(--ps-border-subtle);\n padding: 14px 16px;\n padding-bottom: calc(14px + env(safe-area-inset-bottom));\n }\n .ps-msr-tryon-cta {\n display: flex; align-items: center; justify-content: center; gap: 8px;\n width: 100%;\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: 10px;\n padding: 14px 18px;\n font-family: inherit; font-size: 13px; font-weight: 700;\n letter-spacing: 0.04em;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n }\n .ps-msr-tryon-cta:active { transform: scale(0.98); }\n .ps-msr-tryon-cta:disabled { opacity: 0.4; cursor: not-allowed; }\n .ps-msr-tryon-cta svg { flex-shrink: 0; }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BodyShapeStepMobile (.ps-bsm-) \u2014 vertical stacked option cards\n for body shape questions on mobile (chest / midsection / seat /\n hips). Matches the THE DIGITAL TAILOR reference design themed\n with the user's accent color.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-bsm-root {\n display: flex; flex-direction: column;\n gap: 18px; padding: 8px 4px 24px;\n flex: 1; min-height: 0;\n }\n .ps-bsm-step {\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.16em; text-transform: uppercase;\n color: var(--ps-text-muted);\n margin-bottom: -4px;\n }\n .ps-bsm-question {\n font-size: 26px; font-weight: 800;\n color: var(--ps-text-primary);\n line-height: 1.15;\n letter-spacing: -0.01em;\n margin: 0 0 6px;\n }\n /* Wrapper that vertically centers the cards in whatever space is left\n * between the title at the top and the bottom navigation. /\n .ps-bsm-options-center {\n flex: 1 1 auto; min-height: 0;\n display: flex; flex-direction: column; justify-content: center;\n }\n .ps-bsm-options {\n display: flex; flex-direction: column; gap: 12px;\n }\n .ps-bsm-card {\n display: flex; align-items: center; justify-content: space-between;\n width: 100%;\n padding: 16px 18px;\n background: var(--ps-bg-secondary);\n border: 2px solid transparent;\n border-radius: 14px;\n cursor: pointer; font-family: inherit;\n text-align: left;\n transition: background 0.18s, border-color 0.18s, transform 0.15s;\n }\n .ps-bsm-card:active { transform: scale(0.985); }\n .ps-bsm-card.ps-active {\n background: var(--ps-accent);\n border-color: var(--ps-accent);\n box-shadow: 0 8px 24px rgba(33, 84, 239, 0.22);\n }\n .ps-bsm-card-content {\n display: flex; flex-direction: column; gap: 6px;\n min-width: 0;\n }\n .ps-bsm-card-eyebrow {\n font-size: 10px; font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-bsm-card.ps-active .ps-bsm-card-eyebrow {\n color: rgba(255, 255, 255, 0.7);\n }\n .ps-bsm-card-label {\n font-size: 22px; font-weight: 800;\n color: var(--ps-text-primary);\n letter-spacing: 0.02em;\n }\n .ps-bsm-card.ps-active .ps-bsm-card-label { color: #FFFFFF; }\n .ps-bsm-card-thumb {\n flex-shrink: 0;\n width: 64px; height: 64px;\n border-radius: 10px;\n background: rgba(255, 255, 255, 0.6);\n display: flex; align-items: center; justify-content: center;\n overflow: hidden;\n margin-left: 14px;\n }\n .ps-bsm-card.ps-active .ps-bsm-card-thumb {\n background: rgba(255, 255, 255, 0.18);\n }\n .ps-bsm-card-thumb img {\n max-width: 100%; max-height: 100%;\n width: auto; height: 100%;\n object-fit: contain;\n }\n\n / Mobile bra step fixes \u2014 give grid items breathing room and keep\n the dropdown visible. The desktop layout uses .ps-bp-bra-* but\n it's tight on phones. /\n @media (max-width: 768px) {\n .ps-bp-bra-step { padding: 4px 4px 24px; }\n .ps-bp-bra-step .ps-bp-title {\n font-size: 22px; font-weight: 800;\n text-align: left; margin-bottom: 18px;\n letter-spacing: -0.01em;\n }\n .ps-bp-bra-section { margin-bottom: 22px; }\n .ps-bp-bra-header {\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 12px;\n }\n .ps-bp-bra-label {\n font-size: 11px !important; font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-bp-bra-region-trigger {\n padding: 6px 12px !important; font-size: 12px !important;\n border: 1px solid var(--ps-border-color); border-radius: 999px;\n background: var(--ps-bg-secondary);\n color: var(--ps-text-secondary);\n }\n .ps-bp-bra-region-dropdown {\n position: absolute; right: 0; top: 100%;\n margin-top: 6px;\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-color);\n border-radius: 10px;\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n padding: 6px;\n z-index: 5;\n display: flex; flex-direction: column; gap: 2px;\n min-width: 80px;\n }\n .ps-bp-bra-region-item {\n padding: 8px 12px !important; font-size: 12px !important;\n border-radius: 6px; background: none; border: none;\n cursor: pointer; text-align: left;\n color: var(--ps-text-secondary);\n }\n .ps-bp-bra-region-item.ps-selected {\n background: var(--ps-accent); color: #FFFFFF;\n }\n .ps-bp-bra-grid {\n display: grid !important;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n }\n .ps-bp-bra-btn {\n padding: 12px 4px !important; font-size: 13px !important;\n border-radius: 8px;\n border: 1.5px solid var(--ps-border-color);\n background: var(--ps-bg-primary);\n color: var(--ps-text-primary);\n font-weight: 600;\n cursor: pointer;\n min-height: 44px;\n }\n .ps-bp-bra-btn-selected {\n background: var(--ps-accent) !important;\n border-color: var(--ps-accent) !important;\n color: #FFFFFF !important;\n }\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MobileSectionDetail (.ps-msd-) \u2014 section detail view on mobile.\n Layout: scroll container with rich blueprint rows matching the\n reference (number prefix, description, USER/SIZE labels, badge).\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-msd-root {\n display: flex; flex-direction: column;\n height: 100%; min-height: 0;\n margin: 0 -16px;\n }\n .ps-msd-scroll {\n flex: 1; min-height: 0;\n overflow-y: auto; -webkit-overflow-scrolling: touch;\n display: flex; flex-direction: column;\n gap: 18px; padding: 8px 16px 32px;\n }\n /* Topbar: back arrow + section name in uppercase /\n .ps-msd-topbar {\n display: flex; align-items: center; justify-content: space-between;\n padding: 8px 0 4px;\n margin-bottom: 4px;\n }\n .ps-msd-back {\n background: none; border: none;\n color: var(--ps-text-primary);\n font-family: inherit;\n padding: 6px; cursor: pointer;\n display: flex; align-items: center; gap: 4px;\n transition: opacity 0.15s;\n flex-shrink: 0;\n }\n .ps-msd-back:hover { opacity: 0.7; }\n .ps-msd-back-arrow { font-size: 16px; line-height: 1; }\n .ps-msd-topbar-title {\n font-size: 12px; font-weight: 700;\n letter-spacing: 0.16em; text-transform: uppercase;\n color: var(--ps-text-primary);\n text-align: center;\n flex: 1;\n }\n .ps-msd-topbar-spacer { width: 32px; flex-shrink: 0; }\n\n / Footer paragraph (italic, small, muted) /\n .ps-msd-footer-note {\n font-size: 11px; line-height: 1.6;\n color: var(--ps-text-muted);\n text-align: center; font-style: italic;\n margin: 14px 12px 0;\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MySizingProfilesView (.ps-msp-) \u2014 full profile management screen\n that replaces the old profile drawer. Grid of profile cards\n matching the ATELIER reference design.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-msp-root {\n display: flex; flex-direction: column;\n height: 100%; min-height: 0;\n }\n .ps-msp-scroll {\n flex: 1; min-height: 0;\n overflow-y: auto; -webkit-overflow-scrolling: touch;\n padding: 4px;\n }\n .ps-msp-header { margin-bottom: max(10px, 0.85vw); }\n .ps-msp-title {\n font-size: max(13px, 0.95vw);\n font-weight: 700;\n color: var(--ps-text-primary);\n margin: 0 0 max(2px, 0.2vw);\n letter-spacing: -0.005em;\n }\n .ps-msp-subtitle {\n font-size: max(10px, 0.7vw);\n color: var(--ps-text-muted);\n margin: 0; line-height: 1.5;\n }\n\n /* Card grid \u2014 compact saved profile cards /\n .ps-msp-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(max(140px, 11vw), 1fr));\n gap: max(8px, 0.7vw);\n margin-bottom: max(14px, 1.2vw);\n }\n .ps-msp-card {\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: max(8px, 0.6vw);\n padding: max(8px, 0.7vw);\n display: flex; flex-direction: column;\n transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;\n box-shadow: 0 1px 3px rgba(0,0,0,0.04);\n position: relative;\n }\n .ps-msp-card:hover {\n border-color: var(--ps-accent);\n box-shadow: 0 4px 12px rgba(33, 84, 239, 0.08);\n }\n .ps-msp-card.ps-active {\n border-color: var(--ps-accent);\n box-shadow: 0 4px 16px rgba(33,84,239,0.12);\n }\n\n .ps-msp-card-header {\n display: flex; align-items: center; justify-content: flex-start;\n margin-bottom: 8px;\n }\n .ps-msp-card-tag {\n font-size: 9px; font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n background: var(--ps-bg-secondary);\n color: var(--ps-text-muted);\n padding: 4px 8px; border-radius: 4px;\n border: 1px solid var(--ps-border-subtle);\n }\n .ps-msp-card.ps-active .ps-msp-card-tag {\n background: var(--ps-accent); color: #FFFFFF;\n border-color: var(--ps-accent);\n }\n .ps-msp-avatar { color: var(--ps-accent); border-color: var(--ps-accent); }\n .ps-msp-avatar-tag { background: var(--ps-accent); }\n\n / Compact circular profile avatar \u2014 vw-scaled. /\n .ps-msp-card-circle {\n width: max(56px, 4.5vw);\n height: max(56px, 4.5vw);\n border-radius: 50%;\n background: var(--ps-bg-secondary);\n border: 2px solid var(--ps-accent);\n box-shadow: 0 0.3vw 0.9vw rgba(33, 84, 239, 0.15);\n overflow: hidden;\n display: flex; align-items: center; justify-content: center;\n color: var(--ps-accent);\n margin: max(4px, 0.35vw) auto max(8px, 0.7vw);\n }\n .ps-msp-card-circle img {\n width: 100%; height: 100%; object-fit: cover;\n object-position: 50% 12%;\n }\n .ps-msp-avatar {\n position: relative;\n display: flex; align-items: center; justify-content: center;\n width: 56px; height: 56px;\n border-radius: 50%;\n background: var(--ps-bg-primary);\n color: var(--ps-text-secondary);\n border: 1.5px solid var(--ps-border-subtle);\n }\n .ps-msp-avatar-tag {\n position: absolute; bottom: -2px; right: -2px;\n width: 18px; height: 18px; border-radius: 50%;\n background: var(--ps-accent); color: #FFFFFF;\n font-size: 10px; font-weight: 700;\n display: flex; align-items: center; justify-content: center;\n border: 2px solid var(--ps-bg-primary);\n }\n\n .ps-msp-card-name {\n font-size: max(12px, 0.85vw);\n font-weight: 700;\n color: var(--ps-text-primary);\n margin-bottom: max(4px, 0.4vw);\n }\n .ps-msp-card-meta {\n display: flex; flex-direction: column;\n gap: max(2px, 0.2vw);\n margin-bottom: max(6px, 0.55vw);\n }\n .ps-msp-meta-row {\n display: flex; align-items: center; justify-content: space-between;\n padding: max(2px, 0.2vw) 0;\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-msp-meta-row:last-child { border-bottom: none; }\n .ps-msp-meta-label {\n font-size: max(8px, 0.55vw);\n font-weight: 600;\n letter-spacing: 0.1em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-msp-meta-value {\n font-size: max(10px, 0.7vw);\n font-weight: 600;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n }\n\n .ps-msp-card-actions {\n display: flex; gap: max(4px, 0.4vw);\n margin-top: auto;\n }\n .ps-msp-card-select {\n flex: 1;\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: max(4px, 0.35vw);\n padding: max(6px, 0.55vw);\n font-family: inherit;\n font-size: max(9px, 0.65vw);\n font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n }\n .ps-msp-card-select:hover { opacity: 0.85; }\n .ps-msp-card-select:active { transform: scale(0.97); }\n .ps-msp-card-select.ps-active {\n background: var(--ps-accent);\n box-shadow: 0 0 0 2px rgba(33, 84, 239, 0.18);\n }\n .ps-msp-card-edit {\n width: max(28px, 2.2vw); height: max(28px, 2.2vw);\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: max(4px, 0.35vw);\n display: flex; align-items: center; justify-content: center;\n color: var(--ps-text-secondary); cursor: pointer;\n transition: border-color 0.15s, color 0.15s;\n }\n .ps-msp-card-edit:hover {\n border-color: var(--ps-accent);\n color: var(--ps-accent);\n }\n .ps-msp-card-delete {\n width: max(28px, 2.2vw); height: max(28px, 2.2vw);\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: max(4px, 0.35vw);\n display: flex; align-items: center; justify-content: center;\n color: var(--ps-text-secondary); cursor: pointer;\n transition: border-color 0.15s, color 0.15s;\n }\n .ps-msp-card-delete:hover {\n border-color: #F87171;\n color: #F87171;\n }\n\n / Edit measurements modal /\n .ps-msp-edit-overlay {\n position: absolute; inset: 0; z-index: 100;\n background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);\n display: flex; align-items: center; justify-content: center;\n padding: 16px; animation: ps-fade-in 0.2s ease;\n }\n .ps-msp-edit-modal {\n background: var(--ps-bg-primary); border-radius: max(10px, 0.8vw);\n width: 100%; max-width: max(320px, 26vw);\n max-height: clamp(400px, 70vh, 600px);\n display: flex; flex-direction: column;\n box-shadow: 0 12px 40px rgba(0,0,0,0.15);\n animation: ps-slide-up 0.25s ease;\n overflow: hidden;\n }\n .ps-msp-edit-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: max(12px, 1vw) max(14px, 1.1vw);\n border-bottom: 1px solid var(--ps-border-color);\n flex-shrink: 0;\n }\n .ps-msp-edit-header h3 {\n font-size: max(13px, 0.95vw); font-weight: 600; color: var(--ps-text-primary); margin: 0;\n }\n .ps-msp-edit-close {\n background: none; border: none; color: var(--ps-text-secondary);\n cursor: pointer; padding: max(2px, 0.2vw);\n }\n .ps-msp-edit-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: max(8px, 0.7vw);\n padding: max(12px, 1vw) max(14px, 1.1vw);\n overflow-y: auto; flex: 1;\n }\n .ps-msp-edit-field {\n display: flex; flex-direction: column; gap: max(3px, 0.25vw);\n }\n .ps-msp-edit-label {\n font-size: max(9px, 0.6vw); font-weight: 600; text-transform: uppercase;\n letter-spacing: 0.06em; color: var(--ps-text-muted);\n }\n .ps-msp-edit-input-wrap {\n display: flex; align-items: center;\n border: 1px solid var(--ps-border-color); border-radius: max(5px, 0.4vw);\n overflow: hidden; background: var(--ps-bg-secondary);\n }\n .ps-msp-edit-input {\n flex: 1; border: none; background: transparent; padding: max(6px, 0.5vw) max(7px, 0.6vw);\n font-size: max(12px, 0.85vw); color: var(--ps-text-primary); outline: none;\n min-width: 0; -moz-appearance: textfield;\n }\n .ps-msp-edit-input::-webkit-inner-spin-button,\n .ps-msp-edit-input::-webkit-outer-spin-button { -webkit-appearance: none; }\n .ps-msp-edit-input:focus { box-shadow: inset 0 0 0 1px var(--ps-accent); }\n .ps-msp-edit-unit {\n font-size: max(10px, 0.65vw); color: var(--ps-text-muted);\n padding-right: max(7px, 0.6vw);\n font-weight: 500; flex-shrink: 0;\n }\n .ps-msp-edit-actions {\n display: flex; gap: max(6px, 0.5vw); justify-content: flex-end;\n flex-shrink: 0;\n padding: max(10px, 0.8vw) max(14px, 1.1vw);\n border-top: 1px solid var(--ps-border-color);\n background: var(--ps-bg-primary);\n }\n .ps-msp-edit-cancel {\n padding: max(6px, 0.5vw) max(12px, 1vw);\n font-size: max(11px, 0.78vw); font-weight: 500;\n border: 1px solid var(--ps-border-color); border-radius: max(5px, 0.4vw);\n background: transparent; color: var(--ps-text-secondary); cursor: pointer;\n }\n .ps-msp-edit-save {\n padding: max(6px, 0.5vw) max(14px, 1.2vw);\n font-size: max(11px, 0.78vw); font-weight: 600;\n border: none; border-radius: max(5px, 0.4vw);\n background: var(--ps-accent); color: #fff; cursor: pointer;\n }\n .ps-msp-edit-save:hover { opacity: 0.9; }\n\n / \u2500\u2500 Custom delete confirmation modal (replaces browser confirm()) \u2500\u2500 /\n .ps-confirm-overlay {\n position: absolute; inset: 0; z-index: 200;\n background: rgba(255,255,255,0.04); backdrop-filter: blur(8px);\n display: flex; align-items: center; justify-content: center;\n padding: 1vw; animation: ps-fade-in 0.18s ease;\n border-radius: inherit; overflow: hidden;\n }\n .ps-confirm-modal {\n background: var(--ps-bg-primary); border-radius: max(10px, 0.8vw);\n padding: max(16px, 1.4vw); width: max(220px, 18vw);\n box-shadow: 0 8px 32px rgba(0,0,0,0.18); animation: ps-slide-up 0.2s ease;\n text-align: center;\n }\n .ps-confirm-icon {\n width: max(32px, 2.6vw); height: max(32px, 2.6vw);\n background: #FEE2E2; border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n margin: 0 auto max(8px, 0.6vw);\n color: #EF4444;\n }\n .ps-confirm-modal p {\n font-size: max(12px, 0.85vw); font-weight: 600;\n color: var(--ps-text-primary); margin: 0 0 max(4px, 0.35vw);\n }\n .ps-confirm-modal small {\n font-size: max(10px, 0.65vw); color: var(--ps-text-muted);\n display: block; margin-bottom: max(12px, 1vw);\n }\n .ps-confirm-actions {\n display: flex; gap: max(6px, 0.5vw); justify-content: center;\n }\n .ps-confirm-cancel {\n flex: 1; padding: max(6px, 0.5vw);\n font-size: max(11px, 0.75vw); font-weight: 500;\n border: 1px solid var(--ps-border-color); border-radius: max(5px, 0.4vw);\n background: transparent; color: var(--ps-text-secondary); cursor: pointer;\n transition: background 0.15s;\n }\n .ps-confirm-cancel:hover { background: var(--ps-bg-secondary); }\n .ps-confirm-delete {\n flex: 1; padding: max(6px, 0.5vw);\n font-size: max(11px, 0.75vw); font-weight: 600;\n border: none; border-radius: max(5px, 0.4vw);\n background: #EF4444; color: #fff; cursor: pointer;\n transition: opacity 0.15s;\n }\n .ps-confirm-delete:hover { opacity: 0.88; }\n\n / \"Create New Profile\" empty card \u2014 same compact size as the saved\n profile cards (no min-height forcing it taller). /\n .ps-msp-card-create {\n background: var(--ps-bg-secondary);\n border: 2px dashed var(--ps-border-color);\n align-items: center; justify-content: center;\n text-align: center;\n cursor: pointer;\n min-height: 0;\n transition: border-color 0.15s, background 0.15s;\n }\n .ps-msp-card-create:hover {\n border-color: var(--ps-accent);\n background: rgba(33,84,239,0.04);\n }\n / When create card is the only item (no saved profiles), make it wider /\n .ps-msp-grid > .ps-msp-card-create:only-child {\n grid-column: 1 / -1;\n min-height: max(160px, 12vw);\n max-width: 380px;\n margin: 0 auto;\n }\n .ps-msp-create-icon {\n width: max(32px, 2.6vw);\n height: max(32px, 2.6vw);\n background: var(--ps-accent); color: #FFFFFF;\n border-radius: max(4px, 0.35vw);\n display: flex; align-items: center; justify-content: center;\n margin-bottom: max(6px, 0.55vw);\n }\n .ps-msp-create-title {\n font-size: max(11px, 0.78vw);\n font-weight: 700;\n color: var(--ps-text-primary);\n margin-bottom: max(2px, 0.2vw);\n }\n .ps-msp-create-sub {\n font-size: max(8px, 0.55vw);\n font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n\n / Recent size calculations section /\n .ps-msp-history-section {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid var(--ps-border-subtle);\n }\n .ps-msp-history-title {\n font-size: 13px; font-weight: 700;\n letter-spacing: 0.1em; text-transform: uppercase;\n color: var(--ps-text-primary);\n margin: 0 0 14px;\n }\n .ps-msp-history-list {\n display: flex; flex-direction: column; gap: 8px;\n }\n .ps-msp-history-card {\n display: flex; align-items: center; gap: 12px;\n padding: 12px;\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: 8px;\n }\n .ps-msp-history-thumb {\n width: 48px; height: 48px;\n border-radius: 6px;\n background: var(--ps-bg-secondary);\n overflow: hidden;\n flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-msp-history-thumb img {\n max-width: 100%; max-height: 100%; object-fit: contain;\n }\n .ps-msp-history-info {\n flex: 1; min-width: 0;\n display: flex; flex-direction: column; gap: 2px;\n }\n .ps-msp-history-name {\n font-size: 13px; font-weight: 600;\n color: var(--ps-text-primary);\n overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n }\n .ps-msp-history-profile {\n font-size: 10px;\n color: var(--ps-text-muted);\n }\n .ps-msp-history-meta {\n font-size: 10px;\n color: var(--ps-text-muted);\n display: flex; align-items: center; gap: 4px;\n }\n .ps-msp-history-meta svg { color: var(--ps-text-muted); }\n .ps-msp-history-size {\n display: flex; flex-direction: column; align-items: flex-end;\n flex-shrink: 0;\n }\n .ps-msp-history-size-label {\n font-size: 9px; font-weight: 600;\n letter-spacing: 0.1em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-msp-history-size-value {\n font-size: 22px; font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n line-height: 1;\n }\n\n @media (max-width: 768px) {\n / Profile card grid /\n .ps-msp-grid { grid-template-columns: 1fr; gap: 3vw; }\n .ps-msp-card-create { min-height: 22vw; }\n .ps-msp-header { margin-bottom: 3vw; }\n .ps-msp-title { font-size: 5.6vw; }\n .ps-msp-subtitle { font-size: 3vw; }\n .ps-msp-card { padding: 3.5vw; border-radius: 3vw; }\n .ps-msp-card-tag { font-size: 2.3vw; padding: 1vw 2vw; border-radius: 1vw; }\n .ps-msp-card-circle { width: 18vw; height: 18vw; margin: 2vw auto 3vw; }\n .ps-msp-card-name { font-size: 4.1vw; margin-bottom: 2vw; }\n .ps-msp-meta-label { font-size: 2.5vw; }\n .ps-msp-meta-value { font-size: 3.3vw; }\n .ps-msp-meta-row { padding: 1.5vw 0; }\n .ps-msp-card-actions { gap: 2vw; }\n .ps-msp-card-select { font-size: 2.6vw; padding: 2.5vw; border-radius: 1.5vw; }\n .ps-msp-card-edit, .ps-msp-card-delete { width: 10vw; height: 10vw; border-radius: 2vw; }\n\n / Profile measurements view /\n .ps-pmv-hero { padding: 3vw 0 2vw; }\n .ps-pmv-hero-name { font-size: 6vw; }\n .ps-pmv-hero-eyebrow { font-size: 2.5vw; letter-spacing: 0.1em; }\n .ps-pmv-data { gap: 3vw; }\n .ps-pmv-basics { gap: 1.5vw; }\n .ps-pmv-basic-row { gap: 2.5vw; padding: 2.5vw 0; }\n .ps-pmv-basic-icon { width: 6vw; height: 6vw; }\n .ps-pmv-basic-label { font-size: 2.8vw; }\n .ps-pmv-basic-value { font-size: 3.6vw; }\n .ps-pmv-section-title { font-size: 2.5vw; letter-spacing: 0.12em; }\n .ps-pmv-measure-list { gap: 0; }\n .ps-pmv-measure-row { gap: 2.5vw; padding: 2.5vw 0; }\n .ps-pmv-measure-icon { width: 7vw; height: 7vw; }\n .ps-pmv-measure-label { font-size: 2.8vw; }\n .ps-pmv-measure-value { font-size: 3.3vw; }\n .ps-pmv-measure-input { font-size: 3.3vw; padding: 1.5vw; }\n .ps-pmv-measure-input-unit { font-size: 2.8vw; }\n .ps-pmv-inline-input { font-size: 3.3vw; width: 11vw; }\n .ps-pmv-inline-unit { font-size: 2.6vw; }\n .ps-pmv-inline-select { font-size: 3.3vw; }\n .ps-pmv-actions { gap: 2.5vw; padding-top: 3vw; flex-wrap: wrap; }\n .ps-pmv-actions-right { gap: 2vw; flex-wrap: wrap; }\n .ps-pmv-btn-primary, .ps-pmv-btn-secondary {\n padding: 3.5vw 4vw; font-size: 3vw; border-radius: 2vw;\n }\n .ps-pmv-btn-edit, .ps-pmv-btn-delete {\n padding: 3vw 3.5vw; font-size: 2.8vw; border-radius: 2vw;\n }\n\n / Delete confirmation modal \u2014 mobile sizing /\n .ps-confirm-modal { width: 85vw; padding: 5vw; border-radius: 3vw; }\n .ps-confirm-icon { width: 10vw; height: 10vw; margin-bottom: 3vw; }\n .ps-confirm-modal p { font-size: 4vw; }\n .ps-confirm-modal small { font-size: 3.3vw; margin-bottom: 4vw; }\n .ps-confirm-actions { gap: 2.5vw; }\n .ps-confirm-cancel, .ps-confirm-delete { padding: 3.5vw 4vw; font-size: 3.3vw; border-radius: 2vw; }\n\n / Edit measurements modal \u2014 bottom sheet on mobile /\n .ps-msp-edit-overlay { padding: 0; align-items: flex-end; }\n .ps-msp-edit-modal {\n width: 100%; max-width: 100%;\n border-radius: 4vw 4vw 0 0;\n max-height: 85dvh;\n }\n .ps-msp-edit-header { padding: 3.5vw 4vw; }\n .ps-msp-edit-header h3 { font-size: 4.6vw; }\n .ps-msp-edit-grid { padding: 3vw 4vw; gap: 3vw; }\n .ps-msp-edit-label { font-size: 2.8vw; }\n .ps-msp-edit-input { font-size: 3.3vw; padding: 2vw 2.5vw; }\n .ps-msp-edit-unit { font-size: 3vw; padding-right: 2vw; }\n .ps-msp-edit-actions { padding: 3vw 4vw; gap: 2.5vw; }\n .ps-msp-edit-cancel, .ps-msp-edit-save { padding: 3.5vw 5vw; font-size: 3.3vw; border-radius: 2vw; }\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CreateProfileWizard (.ps-cpw-) \u2014 multi-step profile creation\n wizard matching the ATELIER reference but themed with --ps-accent\n instead of monochrome black.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-cpw-root {\n display: flex; flex-direction: column;\n height: 100%; min-height: 0;\n width: 100%; max-width: 100%;\n box-sizing: border-box;\n overflow-x: hidden;\n }\n\n /* Step header \u2014 single tiny title + a thin progress bar inline.\n All sizing is vw-based with sensible clamps so the wizard scales\n proportionally from a 320px phone all the way up to a 5000px display\n without losing its ratios. /\n .ps-cpw-step-head {\n display: flex; align-items: center; justify-content: space-between;\n gap: clamp(8px, 0.75vw, 16px);\n padding: clamp(4px, 0.4vw, 10px) clamp(12px, 1vw, 22px);\n border-bottom: 1px solid var(--ps-border-subtle);\n flex-shrink: 0;\n }\n .ps-cpw-eyebrow { display: none; }\n .ps-cpw-step-title {\n font-size: clamp(10px, 0.7vw, 14px);\n font-weight: 600;\n color: var(--ps-text-primary);\n letter-spacing: 0.02em;\n margin: 0;\n text-transform: uppercase;\n }\n .ps-cpw-progress {\n display: flex; flex-direction: column; align-items: flex-end;\n gap: 0; flex-shrink: 0;\n min-width: clamp(60px, 5vw, 100px);\n }\n .ps-cpw-progress-track {\n width: 100%; height: clamp(2px, 0.12vw, 3px);\n background: var(--ps-border-color); border-radius: 2px;\n overflow: hidden;\n }\n .ps-cpw-progress-fill {\n height: 100%; background: var(--ps-accent);\n transition: width 0.4s cubic-bezier(0.32, 0.72, 0, 1);\n }\n .ps-cpw-progress-label { display: none; }\n\n .ps-cpw-body {\n display: flex; flex-direction: column;\n gap: max(10px, 0.85vw);\n flex: 1; min-height: 0;\n width: 100%; max-width: 100%;\n box-sizing: border-box;\n overflow-y: auto; overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n padding: max(10px, 0.9vw) max(12px, 1vw);\n }\n\n / Step 1 \u2014 Identity form (compact, vw-scaled) /\n .ps-cpw-identity {\n display: flex; flex-direction: column;\n gap: max(8px, 0.7vw);\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n }\n .ps-cpw-field {\n display: flex; flex-direction: column;\n gap: max(4px, 0.4vw);\n }\n .ps-cpw-field-label {\n font-size: max(9px, 0.62vw);\n font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-cpw-input {\n background: transparent; border: none;\n border-bottom: 1px solid var(--ps-border-color);\n color: var(--ps-text-primary);\n font-family: inherit;\n font-size: max(13px, 0.95vw);\n font-weight: 500;\n padding: max(4px, 0.4vw) 0 max(6px, 0.55vw);\n outline: none;\n transition: border-color 0.15s;\n }\n .ps-cpw-input::placeholder { color: var(--ps-text-muted); font-weight: 500; opacity: 0.7; }\n .ps-cpw-input:focus { border-bottom-color: var(--ps-accent); }\n .ps-cpw-input::-webkit-outer-spin-button,\n .ps-cpw-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-cpw-input[type=\"number\"] { -moz-appearance: textfield; }\n\n .ps-cpw-pill-row {\n display: flex; align-items: center;\n gap: max(6px, 0.5vw);\n flex-wrap: wrap;\n }\n .ps-cpw-pill-group {\n display: flex; align-items: center;\n background: var(--ps-bg-secondary);\n border: 1px solid var(--ps-border-color);\n border-radius: 999px;\n padding: max(2px, 0.15vw);\n }\n .ps-cpw-pill {\n background: none; border: none;\n padding: max(4px, 0.35vw) max(10px, 0.9vw);\n border-radius: 999px;\n font-family: inherit;\n font-size: max(10px, 0.7vw);\n font-weight: 600;\n color: var(--ps-text-secondary); cursor: pointer;\n transition: background 0.15s, color 0.15s;\n }\n .ps-cpw-pill.ps-active {\n background: var(--ps-accent); color: #FFFFFF;\n }\n\n .ps-cpw-field-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(max(140px, 11vw), 1fr));\n gap: max(14px, 1.2vw);\n }\n\n / Two-column split: inputs stacked left, photo right /\n .ps-cpw-split {\n display: grid;\n grid-template-columns: 1fr max(180px, 14vw);\n gap: max(16px, 1.4vw);\n align-items: start;\n }\n .ps-cpw-split-left {\n display: flex; flex-direction: column;\n gap: max(14px, 1.2vw);\n min-width: 0;\n }\n .ps-cpw-split-right {\n display: flex; flex-direction: column;\n gap: max(6px, 0.55vw);\n min-width: 0;\n }\n .ps-cpw-error {\n font-size: max(10px, 0.72vw);\n color: var(--ps-error-color);\n margin-top: calc(max(4px, 0.4vw) -1);\n }\n\n /* Optional photo upload (step 1) /\n .ps-cpw-photo {\n display: flex; flex-direction: column; gap: 8px;\n margin-top: 4px;\n }\n .ps-cpw-photo-upload {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 8px; padding: 38px 18px;\n min-height: 220px;\n background: var(--ps-bg-secondary);\n border: 2px dashed var(--ps-border-color);\n border-radius: 12px;\n color: var(--ps-text-secondary); cursor: pointer;\n font-family: inherit;\n transition: border-color 0.15s, background 0.15s;\n }\n .ps-cpw-photo-upload:hover {\n border-color: var(--ps-accent);\n background: rgba(33, 84, 239, 0.04);\n }\n .ps-cpw-photo-upload:disabled { opacity: 0.5; cursor: wait; }\n .ps-cpw-photo-upload svg { color: var(--ps-accent); }\n .ps-cpw-photo-upload-title {\n font-size: 13px; font-weight: 600;\n color: var(--ps-text-primary);\n }\n .ps-cpw-photo-upload-hint {\n font-size: 11px; font-weight: 400;\n color: var(--ps-text-muted);\n }\n .ps-cpw-photo-preview {\n position: relative;\n width: 100%;\n border-radius: 12px; overflow: hidden;\n background: var(--ps-bg-secondary);\n border: 1px solid var(--ps-border-subtle);\n aspect-ratio: 3 / 4;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-cpw-photo-preview img {\n max-width: 100%; max-height: 100%;\n width: auto; height: 100%;\n object-fit: contain;\n }\n .ps-cpw-photo-remove {\n position: absolute; top: 8px; right: 8px;\n width: 28px; height: 28px; border-radius: 50%;\n background: rgba(0, 0, 0, 0.65); color: #FFFFFF;\n border: none; cursor: pointer;\n font-size: 18px; line-height: 1;\n display: flex; align-items: center; justify-content: center;\n }\n\n / Step 2 \u2014 Silhouette (vw-scaled) /\n .ps-cpw-silhouette {\n display: flex; flex-direction: column;\n gap: clamp(16px, 1.4vw, 32px);\n }\n .ps-cpw-section {\n display: flex; flex-direction: column;\n gap: clamp(8px, 0.7vw, 16px);\n }\n .ps-cpw-section-head {\n display: flex; flex-direction: column;\n gap: clamp(2px, 0.2vw, 6px);\n }\n .ps-cpw-section-title {\n font-size: clamp(10px, 0.72vw, 14px);\n font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-primary);\n }\n .ps-cpw-section-sub {\n font-size: clamp(10px, 0.7vw, 13px);\n font-weight: 400;\n color: var(--ps-text-muted);\n }\n .ps-cpw-card-row {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: clamp(8px, 0.75vw, 16px);\n / Inside a flex parent (ProgressiveStep with flex:1), let the row\n claim leftover vertical space so the cards stretch to fill it. /\n flex: 1; min-height: 0;\n }\n .ps-cpw-bra-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: clamp(8px, 0.75vw, 16px);\n }\n .ps-cpw-bra-field {\n display: flex; flex-direction: column;\n gap: clamp(4px, 0.4vw, 10px);\n }\n .ps-cpw-card {\n display: flex; flex-direction: column; align-items: center;\n background: var(--ps-bg-primary);\n border: 2px solid var(--ps-border-subtle);\n border-radius: clamp(8px, 0.6vw, 14px);\n padding: clamp(10px, 0.85vw, 18px) clamp(6px, 0.5vw, 12px) clamp(8px, 0.65vw, 14px);\n cursor: pointer; font-family: inherit;\n transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;\n / Stretch inside the grid track so all 3 cards in the row fill\n the available height equally. /\n min-width: 0; min-height: 0;\n }\n .ps-cpw-card:hover {\n border-color: rgba(33, 84, 239, 0.35);\n }\n .ps-cpw-card.ps-active {\n border-color: var(--ps-accent);\n box-shadow: 0 0.4vw 1.1vw rgba(33, 84, 239, 0.16);\n transform: translateY(-1px);\n }\n .ps-cpw-card-thumb {\n width: 100%;\n / Fills whatever space the card has \u2014 combined with the card's\n min-height: 0, this lets the thumb image grow with viewport size\n and stretch to fill the wizard body. /\n flex: 1; min-height: 0;\n display: flex; align-items: center; justify-content: center;\n overflow: hidden;\n margin-bottom: clamp(4px, 0.4vw, 10px);\n }\n .ps-cpw-card-thumb img {\n max-width: 100%; max-height: 100%;\n object-fit: contain;\n }\n .ps-cpw-card-label {\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-cpw-card.ps-active .ps-cpw-card-label {\n color: var(--ps-accent);\n }\n\n / Footer actions \u2014 vw-scaled /\n .ps-cpw-footer {\n display: flex; align-items: center; justify-content: space-between;\n gap: clamp(8px, 0.7vw, 14px);\n padding: clamp(6px, 0.55vw, 12px) clamp(12px, 1vw, 22px);\n border-top: 1px solid var(--ps-border-subtle);\n background: var(--ps-bg-primary);\n flex-shrink: 0;\n }\n .ps-cpw-back-btn {\n background: none; border: none;\n color: var(--ps-text-secondary);\n font-family: inherit;\n font-size: clamp(10px, 0.7vw, 13px);\n font-weight: 600;\n cursor: pointer;\n padding: clamp(6px, 0.55vw, 12px) clamp(2px, 0.2vw, 6px);\n transition: color 0.15s;\n }\n .ps-cpw-back-btn:hover { color: var(--ps-text-primary); }\n .ps-cpw-next-btn {\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: clamp(4px, 0.35vw, 8px);\n padding: clamp(8px, 0.7vw, 14px) clamp(16px, 1.4vw, 28px);\n font-family: inherit;\n font-size: clamp(10px, 0.7vw, 13px);\n font-weight: 700;\n letter-spacing: 0.1em; text-transform: uppercase;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;\n box-shadow: 0 0.25vw 0.8vw rgba(33, 84, 239, 0.16);\n }\n .ps-cpw-next-btn:disabled {\n background: var(--ps-border-color);\n color: var(--ps-text-muted);\n box-shadow: none;\n cursor: default;\n }\n .ps-cpw-next-btn:hover { opacity: 0.92; }\n .ps-cpw-next-btn:active { transform: scale(0.98); }\n\n / Gender pill \u2014 used inside the inline-row \"GENDER\" field. Sized to\n match the text inputs (compact, underlined-feel) so it doesn't tower\n over the other rows in the form. /\n .ps-cpw-gender-pill {\n appearance: none;\n background: transparent;\n color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color);\n border-radius: clamp(6px, 0.45vw, 10px);\n padding: clamp(4px, 0.35vw, 8px) clamp(10px, 0.85vw, 18px);\n font-family: inherit;\n font-size: clamp(10px, 0.7vw, 13px);\n font-weight: 600;\n cursor: pointer;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n }\n .ps-cpw-gender-pill:hover {\n border-color: var(--ps-accent);\n color: var(--ps-accent);\n }\n .ps-cpw-gender-pill[data-active=\"true\"] {\n background: var(--ps-accent);\n color: #fff;\n border-color: var(--ps-accent);\n }\n\n / When the wizard is on the photo step, suppress the global\n ps-tryon-back-btn rendered by the modal shell \u2014 the wizard's own\n footer Back button is enough, and stacking two looks cluttered. The\n marker class is added by CreateProfileWizard's root and the rule\n reaches up to its preceding sibling via :has(). /\n .ps-tryon-body:has(.ps-cpw-hide-global-back) > .ps-tryon-back-btn {\n display: none;\n }\n\n @keyframes ps-cpw-shake {\n 0%, 100% { transform: translateX(0); }\n 15% { transform: translateX(-5px); }\n 30% { transform: translateX(5px); }\n 45% { transform: translateX(-4px); }\n 60% { transform: translateX(4px); }\n 75% { transform: translateX(-2px); }\n 90% { transform: translateX(2px); }\n }\n .ps-cpw-shake {\n animation: ps-cpw-shake 0.5s ease;\n outline: 1.5px solid var(--ps-error, #ef4444) !important;\n outline-offset: 1px;\n }\n\n / No wizard-specific @media (max-width: 768px) overrides anymore.\n Every ps-cpw-* rule is clamp/vw-driven, so the layout shrinks\n gracefully from 320px \u2192 5000px without a hard breakpoint. /\n\n / \u2500\u2500 Progressive (one-question-at-a-time) flow \u2500\u2500 /\n .ps-cpw-progressive {\n display: flex; flex-direction: column;\n gap: clamp(12px, 1vw, 22px);\n padding: clamp(6px, 0.5vw, 12px) 0;\n / Fills the wizard body so the card row can stretch vertically /\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n }\n .ps-cpw-fade-in {\n animation: ps-cpw-fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);\n }\n @keyframes ps-cpw-fade-up {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n / \u2500\u2500 Method picker (initial step) \u2014 cards stretch to fill body \u2500\u2500 /\n .ps-cpw-method-picker {\n display: flex; flex-direction: column;\n gap: clamp(8px, 0.7vw, 14px);\n padding: clamp(4px, 0.4vw, 10px) 0;\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n }\n .ps-cpw-method-intro { display: none; }\n / Grid claims the picker's leftover height so the cards inside\n stretch vertically to fill it. /\n .ps-cpw-method-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: clamp(8px, 0.75vw, 16px);\n width: 100%; max-width: 100%;\n box-sizing: border-box;\n flex: 1; min-height: 0;\n }\n / \u2500\u2500 Editorial method card \u2014 Stripe / Linear / Notion style \u2500\u2500\n Single-block layout: small icon badge in the top-left, content\n below (eyebrow \u2192 title \u2192 description), corner number watermark in\n the top-right, hover arrow indicator in the bottom-right.\n No big image strip \u2014 minimal, professional. /\n .ps-cpw-method-card {\n position: relative;\n display: flex; flex-direction: column; align-items: flex-start;\n gap: clamp(6px, 0.55vw, 12px);\n min-width: 0; min-height: 0;\n width: 100%; max-width: 100%;\n box-sizing: border-box;\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: clamp(10px, 0.75vw, 16px);\n padding: clamp(16px, 1.3vw, 28px) clamp(16px, 1.3vw, 28px) clamp(20px, 1.6vw, 34px);\n overflow: hidden;\n cursor: pointer; font-family: inherit; text-align: left;\n transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s, background 0.22s;\n box-shadow: 0 0.1vw 0.4vw rgba(20, 30, 60, 0.04);\n }\n .ps-cpw-method-card::before {\n / Thin top accent bar that scales in from the left on hover /\n content: \"\"; position: absolute; top: 0; left: 0; right: 0;\n height: clamp(2px, 0.15vw, 4px);\n background: var(--ps-accent);\n transform: scaleX(0); transform-origin: left center;\n transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 3;\n }\n .ps-cpw-method-card:hover {\n border-color: var(--ps-accent);\n transform: translateY(-2px);\n box-shadow: 0 0.6vw 1.6vw rgba(33, 84, 239, 0.14);\n }\n .ps-cpw-method-card:hover::before { transform: scaleX(1); }\n\n / Big editorial number watermark \u2014 top right /\n .ps-cpw-method-num {\n position: absolute;\n top: clamp(10px, 0.85vw, 18px);\n right: clamp(14px, 1.1vw, 22px);\n z-index: 2;\n font-family: inherit;\n font-size: clamp(22px, 1.8vw, 36px);\n font-weight: 800;\n line-height: 1;\n letter-spacing: -0.04em;\n color: var(--ps-text-primary);\n opacity: 0.08;\n pointer-events: none;\n transition: color 0.22s, opacity 0.22s, transform 0.22s;\n }\n .ps-cpw-method-card:hover .ps-cpw-method-num {\n color: var(--ps-accent);\n opacity: 0.32;\n }\n\n / Small tinted icon badge \u2014 top-left of the card /\n .ps-cpw-method-icon-badge {\n width: clamp(40px, 3.2vw, 60px);\n height: clamp(40px, 3.2vw, 60px);\n border-radius: clamp(8px, 0.65vw, 14px);\n background: rgba(33, 84, 239, 0.08);\n display: flex; align-items: center; justify-content: center;\n padding: clamp(6px, 0.5vw, 10px);\n box-sizing: border-box;\n flex-shrink: 0;\n margin-bottom: clamp(8px, 0.7vw, 14px);\n transition: background 0.22s, transform 0.22s;\n }\n .ps-cpw-method-icon-badge img {\n width: 100%; height: 100%;\n object-fit: contain;\n display: block;\n }\n .ps-cpw-method-card:hover .ps-cpw-method-icon-badge {\n background: rgba(33, 84, 239, 0.14);\n transform: scale(1.05);\n }\n\n / Content typography /\n .ps-cpw-method-eyebrow {\n font-size: clamp(8px, 0.55vw, 11px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-cpw-method-title {\n font-size: clamp(14px, 1vw, 19px);\n font-weight: 700;\n color: var(--ps-text-primary);\n letter-spacing: -0.015em;\n line-height: 1.2;\n }\n .ps-cpw-method-desc {\n font-size: clamp(10px, 0.72vw, 13px);\n line-height: 1.5;\n color: var(--ps-text-muted);\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n / Arrow pill \u2014 bottom right corner /\n .ps-cpw-method-arrow {\n position: absolute;\n right: clamp(14px, 1.1vw, 22px);\n bottom: clamp(14px, 1.1vw, 22px);\n width: clamp(24px, 1.8vw, 34px);\n height: clamp(24px, 1.8vw, 34px);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n background: var(--ps-bg-secondary);\n color: var(--ps-text-secondary);\n transition: background 0.22s, color 0.22s, transform 0.22s;\n }\n .ps-cpw-method-arrow svg {\n width: 55%; height: 55%;\n }\n .ps-cpw-method-card:hover .ps-cpw-method-arrow {\n background: var(--ps-accent);\n color: #FFFFFF;\n transform: translateX(0.2vw);\n }\n / Wizard reuses the SDK basics screen's .ps-bp-inline-* row styles for\n parity. This wrapper just gives them a consistent gap and centers\n them inside the wizard body so all rows fit without scrolling. /\n .ps-cpw-inline-fields {\n width: 100%;\n margin-top: clamp(2px, 0.2vw, 6px);\n display: flex; flex-direction: column;\n gap: clamp(4px, 0.4vw, 10px);\n }\n .ps-cpw-inline-fields .ps-bp-inline-row {\n padding: clamp(10px, 0.9vw, 18px) clamp(1px, 0.1vw, 4px);\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-cpw-inline-fields .ps-bp-inline-row:last-child { border-bottom: none; }\n .ps-cpw-inline-fields .ps-bp-inline-label {\n flex: 0 0 clamp(56px, 4.5vw, 90px);\n font-size: clamp(9px, 0.62vw, 12px);\n font-weight: 700;\n color: var(--ps-text-primary);\n letter-spacing: 0.08em;\n }\n .ps-cpw-inline-fields .ps-bp-inline-input {\n font-size: clamp(12px, 0.85vw, 16px);\n padding-bottom: 0.2vw;\n border-bottom: 1px solid var(--ps-border-color);\n color: var(--ps-text-primary);\n }\n .ps-cpw-inline-fields .ps-bp-inline-unit {\n font-size: clamp(10px, 0.7vw, 13px);\n color: var(--ps-text-muted);\n }\n\n / \u2500\u2500 Image path \u2014 split layout with dropzone + photo guide \u2500\u2500\n Two columns: dropzone with silhouette placeholder on the LEFT,\n gender pills + name input + photo-guide checklist on the RIGHT.\n Collapses to single column on narrow viewports via flex-wrap. /\n .ps-cpw-image-split {\n display: grid;\n grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);\n gap: clamp(14px, 1.2vw, 26px);\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n }\n .ps-cpw-image-left {\n display: flex; flex-direction: column;\n min-width: 0; min-height: 0;\n }\n .ps-cpw-image-right {\n display: flex; flex-direction: column;\n gap: clamp(10px, 0.9vw, 18px);\n min-width: 0; min-height: 0;\n }\n\n / Dropzone \u2014 premium card with a faded body silhouette behind the\n upload prompt. Communicates \"this is where the body photo goes\". /\n .ps-cpw-dropzone {\n position: relative;\n display: flex; align-items: center; justify-content: center;\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n padding: clamp(14px, 1.2vw, 26px);\n border: 1.5px dashed var(--ps-border-color);\n border-radius: clamp(10px, 0.75vw, 16px);\n background:\n radial-gradient(ellipse at 50% 60%, rgba(33, 84, 239, 0.05) 0%, transparent 70%),\n var(--ps-bg-secondary);\n color: var(--ps-text-muted);\n cursor: pointer; font-family: inherit;\n overflow: hidden;\n transition: border-color 0.22s, background 0.22s, transform 0.22s;\n }\n .ps-cpw-dropzone:hover {\n border-color: var(--ps-accent);\n transform: translateY(-1px);\n }\n .ps-cpw-dropzone:disabled { opacity: 0.6; cursor: default; transform: none; }\n / Faded body silhouette behind the upload prompt /\n .ps-cpw-dropzone-silhouette {\n position: absolute;\n left: 50%; top: 50%;\n transform: translate(-50%, -50%);\n width: clamp(140px, 14vw, 260px);\n height: auto;\n object-fit: contain;\n opacity: 0.18;\n pointer-events: none;\n }\n .ps-cpw-dropzone-content {\n position: relative;\n z-index: 1;\n display: flex; flex-direction: column; align-items: center;\n gap: clamp(4px, 0.4vw, 10px);\n }\n .ps-cpw-dropzone-upload-icon {\n width: clamp(28px, 2vw, 40px);\n height: clamp(28px, 2vw, 40px);\n color: var(--ps-accent);\n margin-bottom: clamp(2px, 0.2vw, 6px);\n }\n .ps-cpw-dropzone-title {\n font-size: clamp(11px, 0.78vw, 14px);\n font-weight: 600;\n color: var(--ps-text-primary);\n text-align: center;\n }\n .ps-cpw-dropzone-hint {\n font-size: clamp(9px, 0.62vw, 12px);\n color: var(--ps-text-muted);\n letter-spacing: 0.04em;\n }\n\n / Photo preview frame (after upload) /\n .ps-cpw-photo-preview-frame {\n position: relative;\n flex: 1; min-height: 0;\n width: 100%;\n background: var(--ps-bg-secondary);\n border-radius: clamp(10px, 0.75vw, 16px);\n overflow: hidden;\n border: 1px solid var(--ps-border-subtle);\n display: flex; align-items: center; justify-content: center;\n }\n .ps-cpw-photo-preview-img {\n width: 100%; height: 100%;\n object-fit: contain;\n display: block;\n }\n .ps-cpw-photo-retake-pill {\n position: absolute;\n bottom: clamp(8px, 0.7vw, 14px);\n left: 50%;\n transform: translateX(-50%);\n background: rgba(255,255,255,0.95);\n border: 1px solid var(--ps-border-subtle);\n color: var(--ps-text-primary);\n padding: clamp(6px, 0.55vw, 12px) clamp(12px, 1vw, 20px);\n border-radius: 999px;\n font-family: inherit;\n font-size: clamp(10px, 0.7vw, 13px);\n font-weight: 600;\n cursor: pointer;\n backdrop-filter: blur(6px);\n transition: background 0.22s, color 0.22s;\n }\n .ps-cpw-photo-retake-pill:hover {\n background: var(--ps-accent);\n color: #FFFFFF;\n border-color: var(--ps-accent);\n }\n .ps-cpw-photo-remove {\n position: absolute;\n top: clamp(8px, 0.7vw, 14px);\n right: clamp(8px, 0.7vw, 14px);\n width: clamp(24px, 1.8vw, 34px);\n height: clamp(24px, 1.8vw, 34px);\n border-radius: 50%;\n background: rgba(28, 29, 30, 0.7);\n color: #FFFFFF;\n border: none;\n cursor: pointer;\n font-size: clamp(14px, 1.1vw, 18px);\n font-weight: 600;\n display: flex; align-items: center; justify-content: center;\n backdrop-filter: blur(6px);\n transition: background 0.18s;\n }\n .ps-cpw-photo-remove:hover { background: rgba(28, 29, 30, 0.9); }\n\n / Photo guide checklist \u2014 soft tinted card on the right column /\n .ps-cpw-photo-guide {\n background: var(--ps-bg-secondary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: clamp(10px, 0.75vw, 16px);\n padding: clamp(12px, 1vw, 20px) clamp(14px, 1.1vw, 22px);\n display: flex; flex-direction: column;\n gap: clamp(6px, 0.55vw, 12px);\n margin-top: auto;\n }\n .ps-cpw-photo-guide-title {\n font-size: clamp(9px, 0.62vw, 11px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ps-text-primary);\n }\n .ps-cpw-photo-guide-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex; flex-direction: column;\n gap: clamp(4px, 0.4vw, 10px);\n }\n .ps-cpw-photo-guide-list li {\n display: flex; align-items: flex-start;\n gap: clamp(6px, 0.55vw, 12px);\n font-size: clamp(10px, 0.72vw, 13px);\n line-height: 1.45;\n color: var(--ps-text-secondary);\n }\n .ps-cpw-photo-guide-list li svg {\n flex-shrink: 0;\n width: clamp(12px, 0.9vw, 16px);\n height: clamp(12px, 0.9vw, 16px);\n color: var(--ps-accent);\n margin-top: 0.15em;\n }\n .ps-cpw-photo-frame-img {\n width: 100%; height: 100%;\n object-fit: contain;\n display: block;\n }\n .ps-cpw-photo-retake {\n align-self: center;\n padding: clamp(8px, 0.7vw, 14px) clamp(16px, 1.4vw, 28px);\n border-radius: 999px;\n background: transparent;\n color: var(--ps-accent);\n border: 2px solid var(--ps-accent);\n font-weight: 700;\n font-size: clamp(10px, 0.7vw, 13px);\n text-transform: uppercase; letter-spacing: 0.08em;\n cursor: pointer; font-family: inherit;\n transition: background 0.18s;\n }\n .ps-cpw-photo-retake:hover { background: rgba(33, 84, 239, 0.08); }\n\n / \u2500\u2500 Age-gate overlay on the dropzone \u2500\u2500\n Dropzone stays visible but blurred; overlay shows a premium card\n with the 18+ confirmation question and two pill buttons. /\n .ps-cpw-dropzone-wrap {\n position: relative;\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n display: flex; flex-direction: column;\n }\n .ps-cpw-dropzone-blurred {\n filter: blur(6px) saturate(0.7);\n pointer-events: none;\n user-select: none;\n }\n .ps-cpw-age-gate {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n padding: clamp(12px, 1vw, 24px);\n border-radius: clamp(10px, 0.75vw, 16px);\n background: rgba(255, 255, 255, 0.55);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n z-index: 2;\n animation: ps-cpw-age-gate-in 0.28s ease-out both;\n }\n @keyframes ps-cpw-age-gate-in {\n 0% { opacity: 0; transform: scale(0.97); }\n 100% { opacity: 1; transform: scale(1); }\n }\n .ps-cpw-age-gate-card {\n width: 100%; max-width: clamp(240px, 24vw, 420px);\n padding: clamp(16px, 1.4vw, 28px) clamp(18px, 1.6vw, 32px);\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: clamp(10px, 0.9vw, 18px);\n box-shadow: 0 20px 40px -12px rgba(17, 24, 39, 0.25),\n 0 8px 16px -8px rgba(17, 24, 39, 0.15);\n display: flex; flex-direction: column;\n align-items: center; text-align: center;\n gap: clamp(8px, 0.7vw, 14px);\n }\n .ps-cpw-age-gate-eyebrow {\n font-size: clamp(9px, 0.62vw, 11px);\n font-weight: 700;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-cpw-age-gate-eyebrow-blocked { color: #C02626; }\n .ps-cpw-age-gate-question {\n font-size: clamp(13px, 0.95vw, 18px);\n font-weight: 600;\n line-height: 1.35;\n color: var(--ps-text-primary);\n margin: 0;\n }\n .ps-cpw-age-gate-actions {\n display: flex; gap: clamp(8px, 0.65vw, 14px);\n width: 100%;\n margin-top: clamp(4px, 0.35vw, 8px);\n }\n .ps-cpw-age-gate-btn {\n flex: 1;\n padding: clamp(9px, 0.75vw, 14px) clamp(12px, 1vw, 18px);\n border-radius: 999px;\n font-family: inherit;\n font-size: clamp(11px, 0.78vw, 14px);\n font-weight: 700;\n letter-spacing: 0.02em;\n cursor: pointer;\n transition: transform 0.18s, background 0.18s, border-color 0.18s, color 0.18s;\n }\n .ps-cpw-age-gate-btn:hover { transform: translateY(-1px); }\n .ps-cpw-age-gate-btn-primary {\n background: var(--ps-accent);\n color: #FFFFFF;\n border: 1.5px solid var(--ps-accent);\n }\n .ps-cpw-age-gate-btn-primary:hover { background: color-mix(in srgb, var(--ps-accent) 88%, #000); }\n .ps-cpw-age-gate-btn-secondary {\n background: transparent;\n color: var(--ps-text-primary);\n border: 1.5px solid var(--ps-border-color);\n }\n .ps-cpw-age-gate-btn-secondary:hover {\n background: var(--ps-bg-secondary);\n border-color: var(--ps-text-muted);\n }\n .ps-cpw-age-gate-card-blocked { border-color: rgba(192, 38, 38, 0.35); }\n\n / \u2500\u2500 Legal notice card on the right column \u2500\u2500\n Soft neutral card with a small shield icon; matches photo-guide width. /\n .ps-cpw-legal-notice {\n background: rgba(33, 84, 239, 0.04);\n border: 1px solid rgba(33, 84, 239, 0.16);\n border-radius: clamp(10px, 0.75vw, 16px);\n padding: clamp(10px, 0.9vw, 18px) clamp(12px, 1vw, 20px);\n display: flex; flex-direction: column;\n gap: clamp(5px, 0.45vw, 10px);\n }\n .ps-cpw-legal-notice-head {\n display: flex; align-items: center;\n gap: clamp(6px, 0.5vw, 10px);\n font-size: clamp(9px, 0.62vw, 11px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-cpw-legal-notice-head svg {\n width: clamp(12px, 0.85vw, 15px);\n height: clamp(12px, 0.85vw, 15px);\n }\n .ps-cpw-legal-notice-body {\n margin: 0;\n font-size: clamp(10px, 0.7vw, 12.5px);\n line-height: 1.5;\n color: var(--ps-text-secondary);\n }\n\n .ps-cpw-hint {\n font-size: clamp(10px, 0.72vw, 13px);\n line-height: 1.6;\n color: var(--ps-text-muted);\n margin: clamp(4px, 0.4vw, 10px) 0 0;\n padding: clamp(8px, 0.7vw, 14px) clamp(10px, 0.85vw, 16px);\n background: rgba(33, 84, 239, 0.05);\n border-left: 3px solid var(--ps-accent);\n border-radius: clamp(4px, 0.35vw, 8px);\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ProfileMeasurementsView (.ps-pmv-) \u2014 minimal monoline-icon\n redesign. Two-column body: silhouette diagram on the left,\n basics + measurements list (each with an inline line-art icon)\n on the right. No avatar, no card boxes \u2014 just typography, icons\n and a body diagram, all vw/clamp scaled.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-pmv-root {\n display: flex; flex-direction: column;\n gap: clamp(14px, 1.3vw, 28px);\n padding: clamp(2px, 0.25vw, 6px) clamp(2px, 0.25vw, 6px) 0;\n }\n\n /* Hero \u2014 name + eyebrow only, no avatar /\n .ps-pmv-hero {\n display: flex; flex-direction: column;\n gap: clamp(4px, 0.35vw, 10px);\n padding-bottom: clamp(10px, 0.95vw, 20px);\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-pmv-hero-eyebrow {\n font-size: clamp(9px, 0.6vw, 12px); font-weight: 700;\n letter-spacing: 0.18em; text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-pmv-hero-name {\n font-size: clamp(18px, 1.5vw, 32px); font-weight: 700;\n color: var(--ps-text-primary);\n margin: 0;\n letter-spacing: -0.01em;\n line-height: 1.1;\n }\n\n / Full-width data column (body diagram removed) /\n .ps-pmv-data {\n display: flex; flex-direction: column;\n gap: max(14px, 1.2vw);\n min-width: 0; width: 100%;\n }\n\n / Basics list \u2014 height / weight / age, inline icon + label + value /\n .ps-pmv-basics {\n display: flex; flex-direction: column;\n gap: clamp(6px, 0.55vw, 14px);\n padding-bottom: clamp(10px, 0.9vw, 18px);\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-pmv-basic-row {\n display: flex; align-items: center;\n gap: max(8px, 0.7vw);\n }\n .ps-pmv-basic-icon {\n flex-shrink: 0;\n width: max(24px, 1.6vw);\n height: max(24px, 1.6vw);\n display: inline-flex; align-items: center; justify-content: center;\n }\n .ps-pmv-basic-icon img {\n width: 100%; height: 100%; object-fit: contain; display: block;\n }\n .ps-pmv-basic-label {\n flex: 1; min-width: 0;\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-pmv-basic-value {\n font-size: clamp(13px, 0.95vw, 18px);\n font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n text-align: right;\n }\n\n / Section blocks (BODY MEASUREMENTS) /\n .ps-pmv-section {\n display: flex; flex-direction: column;\n gap: clamp(8px, 0.7vw, 16px);\n }\n .ps-pmv-section-head {\n display: flex; flex-direction: column; gap: clamp(2px, 0.2vw, 6px);\n }\n .ps-pmv-section-title {\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 700;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n color: var(--ps-text-primary);\n }\n .ps-pmv-section-title-row {\n display: flex; align-items: center; justify-content: space-between;\n gap: clamp(8px, 0.7vw, 14px);\n }\n .ps-pmv-loading-pill {\n display: inline-flex; align-items: center;\n gap: clamp(4px, 0.4vw, 10px);\n padding: clamp(3px, 0.3vw, 7px) clamp(7px, 0.6vw, 14px);\n background: rgba(33, 84, 239, 0.08);\n color: var(--ps-accent);\n border-radius: 999px;\n font-size: clamp(8px, 0.55vw, 11px);\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n }\n .ps-pmv-loading-spinner {\n width: clamp(8px, 0.65vw, 14px);\n height: clamp(8px, 0.65vw, 14px);\n border: 1.5px solid rgba(33, 84, 239, 0.25);\n border-top-color: var(--ps-accent);\n border-radius: 50%;\n animation: ps-pmv-spin 0.8s linear infinite;\n }\n @keyframes ps-pmv-spin {\n to { transform: rotate(360deg); }\n }\n\n / Body measurements list \u2014 single column, icon + label + value rows /\n .ps-pmv-measure-list {\n display: flex; flex-direction: column;\n }\n .ps-pmv-measure-row {\n display: flex; align-items: center;\n gap: clamp(8px, 0.7vw, 16px);\n padding: clamp(8px, 0.7vw, 14px) 0;\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-pmv-measure-row:last-child { border-bottom: none; }\n .ps-pmv-measure-icon {\n flex-shrink: 0;\n width: max(26px, 1.8vw);\n height: max(26px, 1.8vw);\n display: inline-flex; align-items: center; justify-content: center;\n }\n .ps-pmv-measure-icon img {\n width: 100%; height: 100%; object-fit: contain; display: block;\n }\n .ps-pmv-measure-label {\n flex: 1; min-width: 0;\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-pmv-measure-value {\n font-size: clamp(12px, 0.85vw, 16px);\n font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n text-align: right;\n }\n .ps-pmv-measure-value.ps-loading {\n color: var(--ps-border-color);\n animation: ps-pmv-shimmer 1.4s ease-in-out infinite;\n }\n .ps-pmv-measure-row.ps-loading .ps-pmv-measure-icon,\n .ps-pmv-measure-row.ps-loading .ps-pmv-measure-label {\n opacity: 0.55;\n }\n @keyframes ps-pmv-shimmer {\n 0%, 100% { opacity: 0.5; }\n 50% { opacity: 1; }\n }\n\n / Inline measurement edit inputs /\n .ps-pmv-measure-row.ps-editing {\n background: rgba(33, 84, 239, 0.04);\n }\n .ps-pmv-measure-edit {\n display: flex; align-items: baseline;\n gap: clamp(2px, 0.2vw, 6px);\n }\n .ps-pmv-measure-input {\n width: clamp(40px, 3vw, 70px);\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--ps-border-color);\n outline: none;\n font-family: inherit;\n font-size: clamp(12px, 0.85vw, 16px);\n font-weight: 700;\n color: var(--ps-text-primary);\n padding: clamp(2px, 0.15vw, 4px) 0;\n text-align: right;\n font-feature-settings: \"tnum\" 1;\n }\n .ps-pmv-measure-input:focus {\n border-bottom-color: var(--ps-accent);\n }\n .ps-pmv-measure-input::-webkit-outer-spin-button,\n .ps-pmv-measure-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-pmv-measure-input[type=\"number\"] { -moz-appearance: textfield; }\n .ps-pmv-measure-input-unit {\n font-size: clamp(8px, 0.55vw, 11px);\n color: var(--ps-text-muted);\n font-weight: 500;\n }\n\n / Inline-editable value wrapper /\n .ps-pmv-inline-edit {\n display: inline-flex; align-items: baseline;\n gap: clamp(2px, 0.2vw, 5px);\n }\n / Input styled to look like a plain text value \u2014 only a dashed underline\n reveals that it is editable. On focus the underline turns solid/accent. /\n .ps-pmv-inline-input {\n width: clamp(38px, 3vw, 68px);\n background: transparent;\n border: none;\n border-bottom: 1px dashed color-mix(in srgb, var(--ps-border-color) 60%, transparent);\n outline: none;\n font-family: inherit;\n font-size: clamp(12px, 0.85vw, 16px);\n font-weight: 700;\n color: var(--ps-text-primary);\n padding: clamp(1px, 0.1vw, 3px) 0;\n text-align: right;\n font-feature-settings: \"tnum\" 1;\n cursor: text;\n transition: border-color 0.15s;\n }\n .ps-pmv-inline-input:hover {\n border-bottom-style: solid;\n border-bottom-color: var(--ps-border-color);\n }\n .ps-pmv-inline-input:focus {\n border-bottom-style: solid;\n border-bottom-color: var(--ps-accent);\n }\n .ps-pmv-inline-input::-webkit-outer-spin-button,\n .ps-pmv-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-pmv-inline-input[type=\"number\"] { -moz-appearance: textfield; }\n .ps-pmv-inline-unit {\n font-size: clamp(8px, 0.55vw, 11px);\n color: var(--ps-text-muted);\n font-weight: 500;\n user-select: none;\n }\n / Inline select (bra band/cup) \u2014 same dashed underline as inputs /\n .ps-pmv-inline-select {\n background: transparent;\n border: none;\n border-bottom: 1px dashed color-mix(in srgb, var(--ps-border-color) 60%, transparent);\n outline: none;\n font-family: inherit;\n font-size: clamp(12px, 0.85vw, 16px);\n font-weight: 700;\n color: var(--ps-text-primary);\n padding: clamp(1px, 0.1vw, 3px) 0;\n cursor: pointer;\n transition: border-color 0.15s;\n -webkit-appearance: none;\n appearance: none;\n text-align: right;\n }\n .ps-pmv-inline-select:hover {\n border-bottom-style: solid;\n border-bottom-color: var(--ps-border-color);\n }\n .ps-pmv-inline-select:focus {\n border-bottom-style: solid;\n border-bottom-color: var(--ps-accent);\n }\n\n / Actions \u2014 sticky bottom nav /\n .ps-pmv-actions {\n display: flex; align-items: center; justify-content: space-between;\n gap: clamp(8px, 0.7vw, 14px);\n position: sticky;\n bottom: 0;\n background: var(--ps-bg-primary);\n border-top: 1px solid var(--ps-border-subtle);\n padding-top: clamp(8px, 0.7vw, 14px);\n padding-bottom: clamp(8px, 0.7vw, 14px);\n z-index: 2;\n margin-top: auto;\n }\n .ps-pmv-actions-right {\n display: flex; align-items: center;\n gap: clamp(6px, 0.5vw, 12px);\n }\n .ps-pmv-btn-secondary,\n .ps-pmv-btn-edit,\n .ps-pmv-btn-delete {\n background: none;\n border: 1px solid var(--ps-border-color);\n border-radius: clamp(4px, 0.35vw, 8px);\n padding: clamp(6px, 0.55vw, 12px) clamp(10px, 0.9vw, 20px);\n font-family: inherit;\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 600;\n letter-spacing: 0.08em;\n color: var(--ps-text-secondary);\n cursor: pointer;\n transition: border-color 0.15s, color 0.15s;\n }\n .ps-pmv-btn-secondary:hover,\n .ps-pmv-btn-edit:hover {\n border-color: var(--ps-accent);\n color: var(--ps-accent);\n }\n .ps-pmv-btn-delete:hover {\n border-color: var(--ps-error-color);\n color: var(--ps-error-color);\n }\n .ps-pmv-btn-primary {\n background: var(--ps-accent); color: #FFFFFF;\n border: none;\n border-radius: clamp(4px, 0.35vw, 8px);\n padding: clamp(7px, 0.65vw, 14px) clamp(12px, 1vw, 22px);\n font-family: inherit;\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s, background 0.2s;\n box-shadow: 0 0.3vw 1vw rgba(33, 84, 239, 0.18);\n display: inline-flex; align-items: center;\n gap: clamp(4px, 0.4vw, 10px);\n justify-content: center;\n }\n .ps-pmv-btn-primary:hover:not(:disabled) { opacity: 0.92; }\n .ps-pmv-btn-primary:active:not(:disabled) { transform: scale(0.98); }\n .ps-pmv-btn-primary:disabled {\n background: var(--ps-text-muted);\n cursor: not-allowed;\n box-shadow: none;\n opacity: 0.65;\n }\n .ps-pmv-btn-spinner {\n width: clamp(8px, 0.65vw, 14px);\n height: clamp(8px, 0.65vw, 14px);\n border: 1.5px solid rgba(255, 255, 255, 0.35);\n border-top-color: #FFFFFF;\n border-radius: 50%;\n animation: ps-pmv-spin 0.8s linear infinite;\n }\n\n / Big product / try-on image /\n .ps-msd-image {\n width: 100%; height: 420px;\n border-radius: 12px; overflow: hidden;\n background: var(--ps-bg-secondary);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .ps-msd-image-img {\n width: 100%; height: 100%;\n object-fit: contain; display: block;\n }\n\n / RECOMMENDED SIZE / FIT ACCURACY card /\n .ps-msd-card {\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: 12px;\n padding: 22px 22px 18px;\n display: flex; flex-direction: column; gap: 8px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.04);\n }\n .ps-msd-card-eyebrow {\n font-size: 10px; font-weight: 700;\n letter-spacing: 0.16em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-msd-card-size-row {\n display: flex; align-items: baseline; gap: 12px;\n margin-top: 2px;\n }\n .ps-msd-card-size {\n font-size: 56px; font-weight: 700;\n color: var(--ps-text-primary);\n line-height: 1; letter-spacing: -0.02em;\n font-feature-settings: \"tnum\" 1;\n }\n .ps-msd-card-size-meta {\n font-size: 12px; font-weight: 600;\n letter-spacing: 0.05em;\n color: var(--ps-text-muted);\n }\n .ps-msd-card-divider {\n height: 1px; background: var(--ps-border-subtle);\n margin: 6px 0;\n }\n .ps-msd-card-pct-row {\n display: flex; align-items: center; gap: 12px;\n margin-top: 2px;\n }\n .ps-msd-card-pct {\n font-size: 30px; font-weight: 700;\n color: var(--ps-accent);\n line-height: 1; font-feature-settings: \"tnum\" 1;\n }\n .ps-msd-card-bar {\n flex: 1; height: 2px;\n background: var(--ps-border-color); border-radius: 1px;\n overflow: hidden;\n }\n .ps-msd-card-bar-fill {\n height: 100%; background: var(--ps-accent);\n border-radius: 1px;\n }\n .ps-msd-card-note {\n font-size: 11px; color: var(--ps-text-muted);\n line-height: 1.5; margin: 2px 0 0;\n }\n\n / MEASUREMENT BLUEPRINT \u2014 rich rows with number, description, USER/SIZE\n labeled values, status badge with check icon /\n .ps-msd-blueprint {\n display: flex; flex-direction: column; gap: 6px;\n padding-top: 6px;\n }\n .ps-msd-blueprint-title {\n font-size: 13px; font-weight: 800;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-primary);\n margin-bottom: 0;\n }\n .ps-msd-blueprint-underline {\n width: 36px; height: 2px;\n background: var(--ps-text-primary);\n margin-bottom: 8px;\n }\n .ps-msd-rows {\n display: flex; flex-direction: column;\n }\n .ps-msd-row {\n display: flex; flex-direction: column;\n padding: 22px 0 24px;\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-msd-row:last-child { border-bottom: none; }\n .ps-msd-row-num {\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-primary);\n margin-bottom: 4px;\n }\n .ps-msd-row-desc {\n font-size: 12px; font-weight: 400;\n color: var(--ps-text-muted);\n margin: 0 0 14px;\n line-height: 1.5;\n }\n .ps-msd-row-cells {\n display: flex; justify-content: space-between; align-items: flex-end;\n gap: 16px; margin-bottom: 14px;\n }\n .ps-msd-row-cell {\n display: flex; flex-direction: column; gap: 4px;\n min-width: 0;\n }\n .ps-msd-row-cell.ps-right { text-align: right; }\n .ps-msd-cell-label {\n font-size: 9px; font-weight: 600;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-msd-cell-value {\n font-size: 18px; font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n line-height: 1.1;\n }\n .ps-msd-row-badge {\n align-self: flex-end;\n display: inline-flex; align-items: center; gap: 5px;\n font-size: 10px; font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n white-space: nowrap;\n }\n .ps-msd-row-badge svg { flex-shrink: 0; }\n .ps-msd-row-badge.ps-good {\n color: var(--ps-accent);\n }\n .ps-msd-row-badge.ps-tight {\n color: #dc2626;\n }\n .ps-msd-row-badge.ps-loose {\n color: #d97706;\n }\n\n / TRY ANOTHER SIZE picker /\n .ps-msd-sizes {\n display: flex; flex-direction: column; gap: 10px;\n padding-top: 18px;\n }\n .ps-msd-sizes-label {\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n text-align: center;\n }\n .ps-msd-sizes-pills {\n display: flex; flex-wrap: wrap; gap: 8px;\n justify-content: center;\n }\n .ps-msd-size-pill {\n min-width: 48px;\n padding: 10px 16px;\n background: transparent;\n border: 1.5px solid var(--ps-border-color);\n border-radius: 8px;\n font-family: inherit; font-size: 13px; font-weight: 600;\n color: var(--ps-text-primary);\n cursor: pointer;\n transition: all 0.15s;\n }\n .ps-msd-size-pill:hover {\n border-color: var(--ps-accent);\n }\n .ps-msd-size-pill.ps-active {\n background: var(--ps-accent); color: #FFFFFF;\n border-color: var(--ps-accent);\n }\n\n / Bottom action area \u2014 Next button + tab bar grouped together,\n pushed to the bottom of the modal body by .ps-bpm-spacer above. /\n .ps-bpm-bottom {\n display: flex; flex-direction: column;\n margin: 0 -16px;\n border-top: 1px solid var(--ps-border-subtle);\n background: var(--ps-bg-primary);\n flex-shrink: 0;\n padding-bottom: env(safe-area-inset-bottom);\n }\n .ps-bpm-next-btn {\n margin: max(14px, 3.5vw) max(16px, 4.1vw) max(12px, 3vw);\n padding: max(14px, 3.5vw) max(18px, 4.6vw);\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: max(10px, 2.5vw);\n font-family: inherit; font-size: max(14px, 3.6vw); font-weight: 700;\n cursor: pointer; transition: opacity 0.15s, transform 0.15s;\n letter-spacing: 0.02em;\n }\n .ps-bpm-next-btn:active { transform: scale(0.98); }\n .ps-bpm-next-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n .ps-bpm-bottom-tabs {\n display: flex; align-items: stretch;\n border-top: 1px solid var(--ps-border-subtle);\n background: var(--ps-bg-primary);\n }\n .ps-bpm-bottom-tab {\n flex: 1; background: none; border: none;\n padding: max(14px, 3.5vw) max(8px, 2vw) max(12px, 3vw);\n font-family: inherit; font-size: max(10px, 2.5vw); font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-muted); cursor: pointer;\n border-bottom: 2px solid transparent;\n transition: color 0.15s, border-color 0.15s;\n display: flex; align-items: center; justify-content: center; gap: max(6px, 1.5vw);\n }\n .ps-bpm-bottom-tab.ps-active {\n color: var(--ps-accent);\n border-bottom-color: var(--ps-accent);\n }\n .ps-bpm-bottom-tab svg { width: max(13px, 3.3vw); height: max(13px, 3.3vw); flex-shrink: 0; }\n\n .ps-bp-optional { font-weight: 400; color: var(--ps-text-muted); }\n\n / Bra size step \u2014 vertically centered /\n .ps-bp-bra-step { display: flex; flex-direction: column; justify-content: center; flex: 1; }\n .ps-bp-bra-step .ps-bp-title { text-align: center; margin-bottom: 1.5vw; }\n\n / Bra size selector /\n .ps-bp-bra-section { margin-bottom: 1.2vw; }\n .ps-bp-bra-header {\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 0.5vw;\n }\n .ps-bp-bra-label {\n font-size: 0.6vw; font-weight: 600; color: rgba(255,255,255,0.45);\n letter-spacing: 0.08em; text-transform: uppercase;\n }\n / Region dropdown /\n / \u2500\u2500 Photo upload overlay (shown during compress + age-check) \u2500\u2500 /\n .ps-bp-photo-overlay {\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.92);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.9vw;\n z-index: 10;\n border-radius: inherit;\n backdrop-filter: blur(2px);\n animation: ps-bp-fade 0.18s ease both;\n }\n .ps-bp-photo-overlay-spinner {\n width: 2.2vw;\n height: 2.2vw;\n min-width: 28px;\n min-height: 28px;\n border-radius: 50%;\n border: 2.5px solid rgba(33, 84, 239, 0.18);\n border-top-color: var(--ps-accent);\n animation: ps-bp-spin 0.7s linear infinite;\n }\n @keyframes ps-bp-spin {\n to { transform: rotate(360deg); }\n }\n .ps-bp-photo-overlay-label {\n font-size: max(12px, 0.85vw);\n font-weight: 600;\n color: var(--ps-text-primary);\n letter-spacing: 0.01em;\n }\n\n / \u2500\u2500 Photo-help popover (Do / Don't / Tip) \u2014 desktop default \u2500\u2500 /\n .ps-bp-photo-help-backdrop { display: none; }\n .ps-bp-photo-help {\n position: absolute; top: 2.2vw; right: 0;\n width: min(360px, 22vw);\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: 0.8vw;\n box-shadow: 0 20px 40px -12px rgba(17,24,39,0.25), 0 8px 16px -8px rgba(17,24,39,0.15);\n padding: 0.8vw 1vw;\n display: flex; flex-direction: column; gap: 0.6vw;\n z-index: 5;\n }\n .ps-bp-photo-help-handle { display: none; }\n .ps-bp-photo-help-header { display: flex; align-items: center; justify-content: space-between; }\n .ps-bp-photo-help-title { font-size: 0.8vw; font-weight: 700; color: var(--ps-text-primary); }\n .ps-bp-photo-help-close {\n width: 1.4vw; height: 1.4vw; border-radius: 50%;\n background: transparent; border: none; color: var(--ps-text-muted);\n cursor: pointer; font-size: 1vw; line-height: 1;\n }\n .ps-bp-photo-help-section { border-radius: 0.5vw; padding: 0.55vw 0.75vw; }\n .ps-bp-photo-help-section-label { font-size: 0.7vw; font-weight: 700; margin-bottom: 0.3vw; }\n .ps-bp-photo-help-section-body { font-size: 0.6vw; color: var(--ps-text-primary); line-height: 1.6; }\n .ps-bp-photo-help-do { background: #ddfbe7; }\n .ps-bp-photo-help-do .ps-bp-photo-help-section-label { color: #1c9d4c; }\n .ps-bp-photo-help-dont { background: #ffe2e2; }\n .ps-bp-photo-help-dont .ps-bp-photo-help-section-label { color: #e7000b; }\n .ps-bp-photo-help-tip {\n background: #c6e1f7; font-size: 0.6vw; line-height: 1.55;\n color: var(--ps-text-primary);\n }\n .ps-bp-photo-help-tip strong { color: #3267c3; }\n\n / \u2500\u2500 MiniSelect: compact animated dropdown for inline bra inputs \u2500\u2500 /\n .ps-bp-mini-select {\n position: relative;\n display: inline-flex;\n width: 100%;\n }\n .ps-bp-mini-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.4vw;\n width: 100%;\n min-width: 4vw;\n padding: 0.45vw 0.7vw;\n background: var(--ps-bg-secondary, #fff);\n border: 1.5px solid rgba(0, 0, 0, 0.12);\n border-radius: 0.4vw;\n color: var(--ps-text-primary);\n font-size: max(11px, 0.78vw);\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n transition: border-color 0.18s, background 0.18s, transform 0.12s;\n }\n .ps-bp-mini-select-trigger:hover {\n border-color: var(--ps-accent);\n }\n .ps-bp-mini-select[data-open=\"true\"] .ps-bp-mini-select-trigger {\n border-color: var(--ps-accent);\n background: rgba(33, 84, 239, 0.04);\n }\n .ps-bp-mini-select-value { display: inline-flex; align-items: center; }\n .ps-bp-mini-select-placeholder {\n color: var(--ps-text-secondary);\n opacity: 0.7;\n font-weight: 500;\n }\n .ps-bp-mini-select-arrow {\n font-size: 0.55vw;\n color: var(--ps-text-secondary);\n transition: transform 0.22s ease;\n }\n .ps-bp-mini-select-arrow.ps-open {\n transform: rotate(180deg);\n color: var(--ps-accent);\n }\n .ps-bp-mini-select-panel {\n position: absolute;\n left: 0;\n right: 0;\n max-height: 9vw;\n overflow-y: auto;\n background: var(--ps-bg-secondary, #fff);\n border: 1.5px solid rgba(0, 0, 0, 0.08);\n border-radius: 0.45vw;\n box-shadow:\n 0 0.25vw 0.55vw rgba(15, 23, 42, 0.08),\n 0 0.85vw 2.0vw rgba(15, 23, 42, 0.14);\n padding: 0.25vw;\n z-index: 250;\n }\n .ps-bp-mini-select[data-dir=\"down\"] .ps-bp-mini-select-panel {\n top: calc(100% + 0.3vw);\n transform-origin: top center;\n animation: ps-bp-mini-slide-down 0.18s cubic-bezier(0.2, 0.8, 0.4, 1) both;\n }\n .ps-bp-mini-select[data-dir=\"up\"] .ps-bp-mini-select-panel {\n bottom: calc(100% + 0.3vw);\n transform-origin: bottom center;\n animation: ps-bp-mini-slide-up 0.18s cubic-bezier(0.2, 0.8, 0.4, 1) both;\n }\n @keyframes ps-bp-mini-slide-down {\n from { opacity: 0; transform: translateY(-0.35vw) scale(0.96); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n @keyframes ps-bp-mini-slide-up {\n from { opacity: 0; transform: translateY(0.35vw) scale(0.96); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n .ps-bp-mini-select-item {\n display: block;\n width: 100%;\n padding: 0.45vw 0.7vw;\n background: transparent;\n border: none;\n border-radius: 0.35vw;\n color: var(--ps-text-secondary);\n font-size: max(11px, 0.78vw);\n font-weight: 600;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: background 0.12s, color 0.12s, transform 0.12s;\n }\n .ps-bp-mini-select-item:hover {\n background: rgba(33, 84, 239, 0.06);\n color: var(--ps-text-primary);\n }\n .ps-bp-mini-select-item.ps-selected {\n background: rgba(33, 84, 239, 0.12);\n color: var(--ps-accent);\n }\n\n .ps-bp-bra-region-wrap { position: relative; z-index: 100; }\n .ps-bp-bra-region-trigger {\n display: flex; align-items: center; gap: 0.35vw;\n padding: 0.45vw 0.9vw; border: 1.5px solid rgba(0,0,0,0.1);\n border-radius: 0.4vw; background: transparent;\n color: var(--ps-text-secondary); font-size: 0.8vw; font-weight: 600;\n cursor: pointer; font-family: inherit; transition: all 0.25s;\n }\n .ps-bp-bra-region-trigger:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n .ps-bp-bra-region-arrow {\n font-size: 0.55vw; transition: transform 0.25s;\n }\n .ps-bp-bra-region-arrow.ps-open { transform: rotate(180deg); }\n .ps-bp-bra-region-dropdown {\n position: absolute; top: calc(100% + 0.3vw); right: 0;\n min-width: 5vw; background: var(--ps-bg-secondary);\n border: 1.5px solid rgba(0,0,0,0.08); border-radius: 0.4vw;\n box-shadow: 0 0.5vw 1.5vw rgba(0,0,0,0.5);\n overflow: hidden; animation: ps-bp-fade 0.2s ease both;\n padding: 0.25vw; z-index: 200;\n }\n .ps-bp-bra-region-item {\n display: block; width: 100%; padding: 0.4vw 0.7vw;\n background: transparent; border: none; border-radius: 0.3vw;\n color: var(--ps-text-secondary); font-size: 0.75vw; font-weight: 600;\n cursor: pointer; font-family: inherit; text-align: left;\n transition: all 0.15s;\n }\n .ps-bp-bra-region-item:hover { background: rgba(0,0,0,0.04); color: var(--ps-text-primary); }\n .ps-bp-bra-region-item.ps-selected { color: var(--ps-accent); background: rgba(33,84,239,0.1); }\n .ps-bp-bra-grid {\n display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35vw;\n }\n .ps-bp-bra-btn {\n padding: 0.4vw 0; text-align: center;\n background: transparent; border: 1px solid rgba(0,0,0,0.08);\n border-radius: 0.35vw; color: var(--ps-text-secondary);\n font-size: 0.65vw; font-weight: 500; cursor: pointer;\n font-family: inherit; transition: all 0.2s;\n }\n .ps-bp-bra-btn:hover { border-color: rgba(0,0,0,0.3); color: var(--ps-text-primary); }\n .ps-bp-bra-btn-selected {\n background: var(--ps-accent) !important; border-color: var(--ps-accent) !important;\n color: #fff !important; font-weight: 700;\n }\n / Bra inline result \u2014 shown in header next to region switcher /\n .ps-bp-bra-inline-result {\n margin-left: auto; font-size: max(11px, 0.75vw); color: var(--ps-accent);\n font-weight: 600; white-space: nowrap;\n }\n .ps-bp-bra-inline-result strong {\n font-weight: 700;\n }\n\n / Profile option rows \u2014 WAIR style stacked list /\n .ps-bp-options {\n display: flex; flex-direction: column; gap: 0.5vw;\n margin-top: 0.8vw;\n }\n .ps-bp-option {\n display: flex; align-items: center; gap: 0.8vw;\n padding: 0.35vw 1vw 0.35vw 0.35vw;\n background: #fff; border: 1.5px solid rgba(0,0,0,0.06);\n border-radius: 0.6vw; cursor: pointer;\n transition: all 0.25s ease; font-family: inherit;\n box-shadow: 0 1px 4px rgba(0,0,0,0.05);\n }\n .ps-bp-option:hover {\n border-color: rgba(33,84,239,0.5);\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n transform: translateY(-1px);\n }\n .ps-bp-option:hover .ps-bp-illust svg { transform: scale(1.05); }\n .ps-bp-option-selected {\n border-color: var(--ps-accent) !important;\n box-shadow: 0 4px 12px rgba(33,84,239,0.18) !important;\n }\n .ps-bp-option-icon {\n width: 6vw; height: 6vw; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n border-radius: 0.4vw; overflow: hidden;\n }\n .ps-bp-illust { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }\n .ps-bp-illust svg { width: 100%; height: 100%; transition: transform 0.25s ease; }\n .ps-bp-option-label {\n flex: 1; font-size: 0.73vw; font-weight: 500;\n color: #555; text-align: center;\n }\n .ps-bp-option-selected .ps-bp-option-label { color: var(--ps-accent); font-weight: 600; }\n .ps-bp-option::after {\n content: \"\u203A\"; font-size: 1.1vw; color: var(--ps-text-secondary); flex-shrink: 0;\n transition: all 0.25s ease;\n }\n .ps-bp-option:hover::after { color: var(--ps-accent); transform: translateX(2px); }\n .ps-bp-option-selected::after { color: var(--ps-accent); }\n\n / Single question step \u2014 3 cards centered /\n .ps-bp-single-q { display: flex; flex-direction: column; flex: 1; justify-content: center; align-items: center; }\n .ps-bp-single-q .ps-bp-title { margin-bottom: 1vw; width: 100%; text-align: center; font-size: 1.05vw; font-weight: 700; letter-spacing: 0.01em; }\n .ps-bp-shape-row-full { width: 100%; margin: 1.5vw auto 0; }\n .ps-bp-shape-row-full .ps-bp-img-card { max-height: 18vw; padding: 0.8vw 0.6vw 0; }\n .ps-bp-shape-row-full .ps-bp-img-card-thumb { height: 13vw; }\n\n / Body shapes screen \u2014 fit all questions without scrolling /\n .ps-bp-shapes-fit { display: flex; flex-direction: column; flex: 1; overflow: hidden; gap: 0.4vw; justify-content: flex-start !important; }\n\n / Body shapes combined screen /\n .ps-bp-shape-section {\n margin-bottom: 0.4vw; flex: 1; display: flex; flex-direction: column; min-height: 0;\n }\n .ps-bp-shape-label {\n font-size: 0.55vw; font-weight: 500; color: rgba(255,255,255,0.7);\n margin-bottom: 0.3vw; display: flex; align-items: center; gap: 0.6vw;\n text-transform: uppercase; letter-spacing: 0.05em;\n }\n .ps-bp-shape-label::after {\n content: \"\"; flex: 1; height: 1px;\n background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);\n }\n .ps-bp-shape-row {\n display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5vw;\n flex: 1; min-height: 0;\n }\n .ps-bp-img-card {\n display: flex; flex-direction: column; align-items: center;\n background: transparent; border: 2px solid rgba(0,0,0,0.08);\n border-radius: 0.5vw; overflow: hidden; cursor: pointer;\n transition: all 0.2s ease; padding: 0; font-family: inherit;\n position: relative;\n }\n .ps-bp-img-card:hover {\n border-color: rgba(33,84,239,0.4);\n transform: translateY(-0.1vw);\n }\n .ps-bp-img-card-selected {\n border-color: var(--ps-accent) !important;\n border-width: 2.5px !important;\n }\n .ps-bp-img-card-selected .ps-bp-img-card-label {\n font-weight: 700; color: var(--ps-accent);\n }\n .ps-bp-img-card-check {\n display: none; position: absolute; top: 0.3vw; right: 0.3vw;\n width: 1.1vw; height: 1.1vw; border-radius: 50%;\n background: var(--ps-accent); align-items: center; justify-content: center;\n z-index: 1;\n }\n .ps-bp-img-card-check svg { width: 0.6vw; height: 0.6vw; }\n .ps-bp-img-card-selected .ps-bp-img-card-check { display: flex; }\n .ps-bp-img-card .ps-bp-img-card-thumb { opacity: 1; }\n .ps-bp-img-card-thumb {\n width: 100%; flex: 1; min-height: 0; overflow: hidden;\n display: flex; align-items: center; justify-content: center;\n background: transparent;\n }\n .ps-bp-img-card-img {\n width: 100%; height: 100%; object-fit: contain;\n }\n .ps-bp-img-card .ps-bp-illust { width: 80%; height: 80%; }\n .ps-bp-img-card .ps-bp-illust svg { width: 100%; height: 100%; }\n .ps-bp-img-card-label {\n padding: 0.3vw 0.2vw; font-size: 0.6vw; font-weight: 600;\n color: var(--ps-text-secondary); text-align: center; width: 100%;\n transition: opacity 0.2s;\n }\n / Hover hint text below cards /\n .ps-bp-hover-hint {\n text-align: center; font-size: 0.8vw; color: rgba(0,0,0,0.45);\n margin: 0.15vw 0 0; min-height: 1em; transition: opacity 0.2s;\n font-weight: 400; letter-spacing: 0.01em;\n }\n\n / Photo upload /\n .ps-bp-photo-upload {\n display: flex; align-items: center; gap: 0.6vw;\n width: 100%; padding: 0.7vw 0.8vw;\n background: transparent; border: 1.5px dashed var(--ps-border-color);\n border-radius: 0.5vw; cursor: pointer;\n transition: all 0.2s; color: var(--ps-text-muted);\n font-family: inherit; text-align: left;\n }\n .ps-bp-photo-upload:hover {\n border-color: var(--ps-accent); background: rgba(33,84,239,0.04);\n color: var(--ps-text-secondary);\n }\n .ps-bp-photo-upload svg { flex-shrink: 0; opacity: 0.6; }\n .ps-bp-photo-upload-text { font-size: 0.78vw; font-weight: 500; }\n .ps-bp-photo-upload-hint { font-size: 0.62vw; color: var(--ps-text-muted); margin-left: auto; }\n\n .ps-bp-photo-preview {\n display: flex; align-items: center; gap: 0.6vw;\n padding: 0.5vw; border: 1.5px solid var(--ps-accent);\n border-radius: 0.5vw; background: rgba(33,84,239,0.06);\n }\n .ps-bp-photo-thumb {\n width: 2.8vw; height: 2.8vw; object-fit: cover;\n border-radius: 0.4vw; flex-shrink: 0;\n }\n .ps-bp-photo-info { display: flex; flex-direction: column; gap: 0.1vw; flex: 1; min-width: 0; }\n .ps-bp-photo-status {\n font-size: 0.73vw; font-weight: 600; color: var(--ps-text-primary);\n display: flex; align-items: center; gap: 0.3vw;\n }\n .ps-bp-photo-hint { font-size: 0.62vw; color: var(--ps-text-muted); }\n .ps-bp-photo-remove {\n width: 1.5vw; height: 1.5vw; display: flex; align-items: center; justify-content: center;\n background: none; border: none; color: var(--ps-text-muted);\n cursor: pointer; font-size: 1vw; line-height: 1; border-radius: 0.25vw;\n transition: all 0.15s; flex-shrink: 0;\n }\n .ps-bp-photo-remove:hover { background: rgba(0,0,0,0.06); color: var(--ps-text-primary); }\n\n / Error /\n .ps-bp-error {\n color: var(--ps-error-color); font-size: 0.73vw; margin: 0;\n }\n\n / Navigation \u2014 back left, next right /\n .ps-bp-nav {\n display: flex; align-items: center; margin-top: auto;\n justify-content: space-between;\n }\n .ps-bp-back-btn {\n background: none; border: none; padding: 0;\n color: var(--ps-text-muted); cursor: pointer;\n font-size: 0.83vw; font-weight: 500; font-family: inherit;\n white-space: nowrap; display: flex; align-items: center; gap: 0.3vw;\n transition: color 0.2s;\n }\n .ps-bp-back-btn:hover { color: var(--ps-text-primary); }\n .ps-bp-back-arrow {\n display: inline-block; font-size: 1.1vw; transition: transform 0.25s ease;\n }\n .ps-bp-back-btn:hover .ps-bp-back-arrow { transform: translateX(-4px); }\n .ps-bp-next-btn {\n display: flex; align-items: center; gap: 0.5vw;\n padding: 0.45vw 1.2vw;\n background: var(--ps-accent); border: none; border-radius: 0.35vw;\n color: #fff; font-size: 0.73vw; font-weight: 700;\n cursor: pointer; transition: all 0.15s; font-family: inherit;\n white-space: nowrap;\n }\n .ps-bp-next-btn svg { width: 0.75vw; height: 0.75vw; }\n .ps-bp-next-btn:hover { background: var(--ps-accent-hover); }\n .ps-bp-btn-disabled {\n opacity: 0.35; cursor: not-allowed; pointer-events: none;\n }\n\n / \u2500\u2500 Mobile responsive \u2500\u2500 /\n @media (max-width: 768px) {\n .ps-bp-layout { flex-direction: column; height: auto; gap: 0; overflow: visible; }\n / Desktop layout's product image \u2014 hidden on mobile because BasicsStepMobile\n has its own minimal layout. The other steps (chest/midsection/hips) don't\n need the giant left-column image on a phone either. /\n .ps-bp-image { display: none !important; }\n .ps-bp-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n .ps-bp-layout { flex: 1; min-height: 0; }\n / Override desktop justify-content:center so BasicsStepMobile can\n stretch to the bottom of the modal \u2014 its bottom action bar (Next +\n tabs) needs to land at the bottom edge, not floating in the middle. /\n .ps-bp-root {\n justify-content: stretch !important;\n height: auto !important;\n max-height: none !important;\n overflow: visible !important;\n flex: 1 !important;\n }\n .ps-bp-upload-placeholder svg { width: 32px; height: 32px; }\n .ps-bp-upload-text { font-size: 14px; }\n .ps-bp-upload-hint { font-size: 11px; }\n .ps-bp-root { padding: 16px; gap: 14px; overflow: visible; }\n .ps-bp-dots { gap: 6px; }\n .ps-bp-dot { width: 6px; height: 6px; }\n .ps-bp-dot-active { width: 18px; border-radius: 4px; }\n .ps-bp-title { font-size: 18px; }\n .ps-bp-subtitle { font-size: 13px; margin-top: -4px; }\n .ps-bp-system-toggle { gap: 20px; margin: 4px 0; }\n .ps-bp-system-btn { font-size: 13px; }\n .ps-bp-inline-row { padding: 14px 0; gap: 12px; }\n .ps-bp-inline-label { flex: 0 0 85px; font-size: 11px; white-space: nowrap; }\n .ps-bp-inline-input { font-size: 18px; }\n .ps-bp-inline-unit { font-size: 12px; }\n .ps-bp-photo-cta { font-size: 13px; gap: 6px; margin-top: 4px; }\n .ps-bp-photo-cta svg { width: 16px; height: 16px; }\n .ps-bp-options { gap: 6px; }\n .ps-bp-option { border-radius: 10px; padding: 6px 12px 6px 6px; gap: 10px; }\n .ps-bp-option-icon { width: 70px; height: 70px; }\n .ps-bp-option-label { font-size: 14px; }\n .ps-bp-option::after { font-size: 18px; }\n .ps-bp-option { padding: 14px 8px; border-radius: 10px; gap: 8px; }\n .ps-bp-option-icon { width: 56px; height: 56px; }\n .ps-bp-option-label { font-size: 13px; }\n .ps-bp-error { font-size: 12px; }\n .ps-bp-shape-section { margin-bottom: 12px; }\n .ps-bp-shape-label { font-size: 13px; margin-bottom: 6px; }\n .ps-bp-shape-row { gap: 6px; }\n .ps-bp-img-card { border-radius: 8px; border-width: 2px; }\n .ps-bp-img-card-label { font-size: 11px; padding: 4px 2px; }\n .ps-bp-hover-hint { font-size: 10px; margin-top: 6px; }\n .ps-bp-single-q .ps-bp-title { font-size: 13px; font-weight: 400; }\n .ps-bp-photo-upload { padding: 10px 12px; gap: 8px; border-radius: 8px; }\n .ps-bp-photo-upload-text { font-size: 13px; }\n .ps-bp-photo-upload-hint { font-size: 10px; }\n .ps-bp-photo-preview { padding: 8px; gap: 8px; border-radius: 8px; }\n .ps-bp-photo-thumb { width: 40px; height: 40px; border-radius: 6px; }\n .ps-bp-photo-status { font-size: 12px; gap: 4px; }\n .ps-bp-photo-hint { font-size: 10px; }\n .ps-bp-photo-remove { width: 22px; height: 22px; font-size: 16px; }\n .ps-bp-nav { padding-top: 6px; }\n .ps-bp-back-btn { font-size: 14px; }\n .ps-bp-back-arrow { font-size: 18px; }\n .ps-bp-next-btn {\n display: flex; align-items: center; gap: 0.5vw; padding: 10px 16px; font-size: 13px; border-radius: 6px; }\n .ps-bp-root { padding: 12px; overflow: hidden; }\n / Accessory sizing inputs \u2014 mobile /\n .ps-acc-input { padding: 3vw; font-size: 3.6vw; border-radius: 2vw; }\n .ps-acc-label { font-size: 2.8vw; margin-bottom: 1.5vw; }\n .ps-acc-field { margin: 3vw 0; }\n .ps-acc-error { font-size: 2.8vw; }\n .ps-acc-hint { font-size: 2.5vw; }\n .ps-tryon-unit-toggle { border-radius: 2vw; }\n .ps-tryon-unit-btn { padding: 2vw 4vw; font-size: 3vw; }\n }\n\n / Upload hover overlay */\n .ps-tryon-upload-hover:hover .ps-tryon-upload-hover-overlay { opacity: 1 !important; }\n";
1	+ export declare const STYLES = "\n /* Variable defaults must live on BOTH the root (for the trigger button)\n and the overlay (which is React-portaled to <body> and therefore not\n a descendant of .ps-tryon-root, so the cascade is broken). Without\n this duplication the slider track gradient and the thumb border \u2014\n both var(--ps-accent) \u2014 render as unset and become invisible. /\n .ps-tryon-root,\n .ps-tryon-overlay {\n --ps-accent: #3B82F6;\n --ps-accent-hover: #2563EB;\n --ps-accent-light: #BFDBFE;\n --ps-text-primary: #1C1D1E;\n --ps-text-secondary: #454545;\n --ps-text-muted: #84898C;\n --ps-text-dim: #696E71;\n --ps-border-color: #E7E7E7;\n --ps-border-subtle: #F0F0F0;\n --ps-bg-primary: #FFFFFF;\n --ps-bg-secondary: #F8FAFF;\n --ps-bg-tertiary: #F0F0F0;\n --ps-input-bg: #FFFFFF;\n --ps-input-border: #E7E7E7;\n --ps-input-focus-border: var(--ps-accent);\n --ps-error-color: #E7000B;\n --ps-success-color: #1C9D4C;\n --ps-warning-color: #DF8400;\n --ps-logo-height: 2.8vw;\n }\n .ps-tryon-root { display: inline-block; visibility: visible !important; }\n\n .ps-tryon-btn {\n display: inline-flex; align-items: center; gap: max(6px, 0.42vw);\n padding: var(--ps-btn-padding, max(10px, 0.63vw) max(16px, 1.25vw));\n background: var(--ps-btn-bg, var(--ps-accent)); color: var(--ps-btn-color, #FFFFFF);\n font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);\n font-size: var(--ps-btn-font-size, max(13px, 0.73vw)); font-weight: var(--ps-btn-font-weight, 600);\n border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, max(6px, 0.42vw));\n cursor: pointer; transition: all 0.2s ease;\n width: var(--ps-btn-width, auto); height: var(--ps-btn-height, auto);\n box-shadow: var(--ps-btn-shadow, none); line-height: 1; white-space: nowrap;\n box-sizing: border-box;\n }\n .ps-tryon-btn svg { width: var(--ps-btn-icon-size, max(16px, 1.1vw)); height: var(--ps-btn-icon-size, max(16px, 1.1vw)); flex-shrink: 0; }\n .ps-tryon-btn:hover { background: var(--ps-btn-hover-bg, var(--ps-accent-hover)); transform: translateY(-1px); }\n .ps-tryon-btn:active { transform: translateY(0); }\n\n .ps-tryon-overlay {\n position: fixed; inset: 0; background: var(--ps-modal-overlay, rgba(0,0,0,0.6));\n display: flex; align-items: center; justify-content: center;\n z-index: 2147483647;\n isolation: isolate;\n contain: layout style;\n padding: 0.83vw;\n padding: max(0.83vw, env(safe-area-inset-top)) max(0.83vw, env(safe-area-inset-right)) max(0.83vw, env(safe-area-inset-bottom)) max(0.83vw, env(safe-area-inset-left));\n animation: ps-fade-in 0.2s ease;\n overflow-y: auto; -webkit-overflow-scrolling: touch;\n font-family: system-ui, -apple-system, sans-serif;\n -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;\n box-sizing: border-box;\n }\n .ps-tryon-overlay, .ps-tryon-overlay , .ps-tryon-overlay ::before, .ps-tryon-overlay ::after { box-sizing: border-box; }\n @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }\n\n .ps-tryon-modal {\n background: var(--ps-modal-bg, #FFFFFF); color: var(--ps-modal-color, #1C1D1E);\n border-radius: clamp(8px, 0.83vw, 16px); width: var(--ps-modal-width, 100%);\n max-width: var(--ps-modal-max-width, 36vw); max-height: 92dvh; overflow-y: auto;\n font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);\n box-shadow: 0 8px 40px rgba(0,0,0,0.12); animation: ps-slide-up 0.3s ease;\n scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n flex-shrink: 0;\n container-type: inline-size;\n }\n .ps-tryon-modal-wide {\n /* Use the SMALLER of 55vw or 92dvh\u00D7(16/10) for width so the modal\n never gets wider than the height can support. Height bumped from\n 70dvh \u2192 82dvh to fit the longer accessory photo step (guidelines +\n legal notice + nav) without pushing content under the Analyze CTA. /\n width: min(55vw, calc(92dvh 1.6));\n max-width: min(55vw, calc(92dvh * 1.6));\n height: min(82dvh, calc(55vw / 1.35));\n max-height: min(92dvh, calc(55vw / 1.35));\n display: flex; flex-direction: column; overflow: hidden;\n transition: height 0.45s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.45s cubic-bezier(0.32, 0.72, 0, 1);\n }\n .ps-tryon-modal-tall.ps-tryon-modal-wide {\n height: min(92dvh, calc(55vw / 1.2));\n max-height: min(95dvh, calc(55vw / 1.2));\n }\n .ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }\n @keyframes ps-slide-up { from { transform: translateY(12px) scale(0.97); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }\n\n /* Header /\n .ps-tryon-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: max(8px, 0.7vw) max(12px, 1.25vw);\n background: var(--ps-modal-header-bg, rgba(255,255,255,0.95));\n border-bottom: 1px solid var(--ps-border-color);\n border-radius: max(8px, 0.83vw) max(8px, 0.83vw) 0 0;\n backdrop-filter: blur(12px); flex-shrink: 0;\n }\n .ps-tryon-header-minimal {\n justify-content: flex-end; gap: 0.4vw; padding: 0.4vw 0.8vw;\n }\n .ps-tryon-back-btn {\n display: flex; align-items: center; gap: 0.35vw;\n background: none; border: none; color: var(--ps-text-secondary); cursor: pointer;\n font-size: 0.73vw; padding: 0; margin-bottom: 0.63vw;\n transition: color 0.2s;\n }\n .ps-tryon-back-btn:hover { color: var(--ps-text-primary); }\n .ps-tryon-back-btn svg { width: 1vw; height: 0.63vw; stroke: currentColor; flex-shrink: 0; }\n\n / Regen progress bar \u2014 absolutely-positioned fill div inside the\n \"Generating new try-on\u2026\" button. Animation runs at the browser's\n refresh rate (smooth) instead of via React state ticks. The button\n itself sets position: relative + overflow: hidden so the fill is\n clipped to the button's rounded shape. /\n @keyframes ps-tryon-regen-fill {\n from { width: 0%; }\n to { width: 100%; }\n }\n .ps-tryon-regen-fill {\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 0%;\n background: rgba(255, 255, 255, 0.28);\n animation: ps-tryon-regen-fill 22s linear forwards;\n pointer-events: none;\n z-index: 0;\n }\n .ps-tryon-title { display: flex; align-items: center; }\n .ps-tryon-logo-img { height: var(--ps-logo-height); width: auto; }\n .ps-tryon-header-actions { display: flex; align-items: center; gap: 0.42vw; }\n .ps-tryon-header-icon {\n / Pure vw sizing collapsed to ~8 px on 375 px mobile. Clamp so the icon\n stays finger-tappable (min 30 px) while scaling up on large screens. /\n width: clamp(30px, 2.2vw, 34px); height: clamp(30px, 2.2vw, 34px);\n display: flex; align-items: center; justify-content: center;\n border: 1.5px solid var(--ps-border-color); border-radius: clamp(6px, 0.52vw, 10px); background: transparent;\n cursor: pointer; color: var(--ps-text-secondary); transition: all 0.2s;\n }\n .ps-tryon-header-icon:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n .ps-tryon-header-icon svg { stroke: currentColor; fill: none; width: clamp(14px, 0.9vw, 16px); height: clamp(14px, 0.9vw, 16px); }\n .ps-tryon-close {\n width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center;\n background: none; border: none; color: var(--ps-modal-close-color, #999);\n cursor: pointer; border-radius: 0.31vw; transition: background 0.15s;\n }\n .ps-tryon-close:hover { background: rgba(0,0,0,0.06); }\n .ps-tryon-close svg { width: 1vw; height: 1vw; }\n\n / Language switcher /\n .ps-tryon-lang-wrap { position: relative; z-index: 99999; }\n .ps-tryon-lang-trigger {\n display: flex; align-items: center; gap: clamp(5px, 0.36vw, 7px);\n padding: clamp(6px, 0.36vw, 8px) clamp(10px, 0.73vw, 14px);\n border: 1.5px solid var(--ps-border-color); border-radius: clamp(8px, 0.57vw, 10px);\n background: transparent; cursor: pointer; color: var(--ps-text-secondary);\n transition: all 0.25s ease; font-family: inherit; white-space: nowrap;\n min-height: clamp(28px, 2.2vw, 38px);\n }\n .ps-tryon-lang-trigger:hover, .ps-tryon-lang-trigger.ps-active {\n border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.06);\n }\n .ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; width: clamp(13px, 0.8vw, 16px); height: clamp(13px, 0.8vw, 16px); }\n .ps-tryon-lang-current {\n font-size: clamp(12px, 0.68vw, 14px); font-weight: 500; letter-spacing: 0.01em;\n }\n .ps-tryon-lang-arrow {\n font-size: clamp(10px, 0.57vw, 12px); transition: transform 0.25s ease; display: inline-block;\n }\n .ps-tryon-lang-arrow.ps-open { transform: rotate(180deg); }\n\n / Dropdown is portaled to document.body \u2014 uses hardcoded colors (no CSS vars available) /\n .ps-tryon-lang-dropdown {\n min-width: min(13vw, 180px);\n background: #FFFFFF; border: 1.5px solid rgba(0,0,0,0.1);\n border-radius: clamp(8px, 0.73vw, 12px);\n box-shadow: 0 clamp(6px, 0.5vw, 10px) clamp(16px, 2vw, 32px) rgba(0,0,0,0.15),\n 0 0 0 1px rgba(0,0,0,0.03);\n overflow: hidden;\n animation: ps-lang-open 0.2s ease both;\n font-family: system-ui, -apple-system, sans-serif;\n }\n @keyframes ps-lang-open {\n from { opacity: 0; transform: translateY(-0.42vw) scale(0.96); }\n to { opacity: 1; transform: none; }\n }\n\n .ps-tryon-lang-list {\n / max(...) picks the larger of the two values so the dropdown is tall\n enough to scroll through a handful of languages on any viewport.\n Pure min(18vw, 280px) collapsed to ~67 px on 375 px mobile. /\n max-height: max(260px, min(18vw, 280px)); overflow-y: auto; padding: clamp(3px, 0.31vw, 5px);\n scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent;\n }\n .ps-tryon-lang-item {\n display: flex; align-items: center; gap: clamp(6px, 0.57vw, 10px);\n width: 100%; padding: clamp(6px, 0.57vw, 10px) clamp(8px, 0.83vw, 14px);\n border: none; background: transparent; color: #555; cursor: pointer;\n border-radius: clamp(5px, 0.47vw, 8px); transition: all 0.15s ease;\n font-family: inherit; text-align: left;\n }\n .ps-tryon-lang-item:hover { background: rgba(0,0,0,0.04); color: #1C1D1E; }\n .ps-tryon-lang-item.ps-selected { background: rgba(59,130,246,0.1); color: #3B82F6; }\n .ps-tryon-lang-name {\n flex: 1; font-size: clamp(12px, 0.73vw, 14px); font-weight: 500;\n }\n .ps-tryon-lang-code {\n font-size: clamp(10px, 0.52vw, 11px); color: #999; font-weight: 600;\n letter-spacing: 0.05em; font-family: ui-monospace, monospace;\n }\n .ps-tryon-lang-item.ps-selected .ps-tryon-lang-code { color: #3B82F6; opacity: 0.7; }\n .ps-tryon-lang-check { color: #3B82F6; display: flex; align-items: center; }\n\n / Stepper /\n / Dots progress /\n .ps-tryon-dots { display: none; }\n .ps-tryon-dot { display: none; }\n\n / Body /\n .ps-tryon-body { padding: clamp(12px, 1.25vw, 20px); flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }\n @keyframes ps-fade-up { from { opacity: 0; transform: translateY(0.63vw); } to { opacity: 1; transform: translateY(0); } }\n .ps-tryon-view-enter { animation: ps-fade-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; flex: 1; display: flex; flex-direction: column; min-height: 0; will-change: transform, opacity; }\n\n / Welcome /\n .ps-tryon-welcome { text-align: center; padding: 0.5vw 0; }\n .ps-tryon-welcome-hero { margin-bottom: 1.3vw; }\n .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }\n .ps-tryon-welcome-product { width: 9vw; height: 10.5vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); border-radius: 0.9vw; border: 2px solid var(--ps-border-color); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }\n .ps-tryon-welcome-sparkle { position: absolute; top: -0.5vw; right: -0.5vw; width: 1.8vw; height: 1.8vw; background: var(--ps-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }\n .ps-tryon-welcome-sparkle svg { stroke: #111; width: 0.9vw; height: 0.9vw; }\n @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }\n .ps-tryon-welcome-title { font-size: 1.4vw; font-weight: 700; color: var(--ps-text-primary); margin: 1vw 0 0.3vw; letter-spacing: -0.01em; }\n .ps-tryon-welcome-sub { font-size: 0.9vw; color: var(--ps-text-secondary); margin: 0; }\n .ps-tryon-features { display: flex; gap: 0.7vw; margin: 1.3vw 0; }\n .ps-tryon-feature { flex: 1; padding: 1vw 0.7vw; border: 1px solid var(--ps-border-color); border-radius: 0.8vw; text-align: center; transition: border-color 0.2s; }\n .ps-tryon-feature:hover { border-color: #555; }\n .ps-tryon-feature-icon { margin-bottom: 0.4vw; color: var(--ps-accent); display: flex; justify-content: center; }\n .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; width: 1.2vw; height: 1.2vw; }\n .ps-tryon-feature-title { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); margin-bottom: 2px; }\n .ps-tryon-feature-desc { font-size: 0.7vw; color: var(--ps-text-secondary); }\n .ps-tryon-cta {\n width: 100%; padding: 1vw; background: var(--ps-accent); color: #fff; border: none;\n border-radius: 0.8vw; font-size: 1vw; font-weight: 700; cursor: pointer;\n display: flex; align-items: center; justify-content: center; gap: 0.5vw; transition: all 0.2s;\n font-family: var(--ps-modal-font, system-ui, sans-serif);\n }\n .ps-tryon-cta:hover { background: var(--ps-accent-hover); transform: translateY(-1px); }\n .ps-tryon-cta svg { stroke: #111; }\n .ps-tryon-welcome-note { font-size: 0.7vw; color: var(--ps-text-muted); margin-top: 0.7vw; }\n\n / Upload /\n .ps-tryon-upload {\n border: 2px dashed var(--ps-upload-border, var(--ps-border-color)); border-radius: 0.63vw;\n padding: 2.08vw 1.25vw; text-align: center; cursor: pointer; transition: all 0.2s;\n background: var(--ps-upload-bg, transparent); display: flex; flex-direction: column; align-items: center;\n }\n .ps-tryon-upload:hover, .ps-tryon-drag-over { border-color: var(--ps-accent); background: rgba(33,84,239,0.05); }\n .ps-tryon-upload svg { color: var(--ps-upload-icon-color, var(--ps-accent)); margin-bottom: 0.63vw; }\n .ps-tryon-upload-text { font-size: 0.73vw; color: var(--ps-upload-color, var(--ps-text-primary)); margin: 0 0 0.21vw; }\n .ps-tryon-upload-hint { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }\n .ps-tryon-preview {\n position: relative; margin-bottom: 0.21vw;\n height: 20vw; border-radius: 0.63vw;\n overflow: hidden; background: var(--ps-bg-tertiary);\n }\n .ps-tryon-preview-blur {\n position: absolute; inset: -20px; background-size: cover; background-position: center;\n filter: blur(25px) brightness(0.4); transform: scale(1.2);\n }\n .ps-tryon-preview img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }\n .ps-tryon-preview-remove {\n position: absolute; top: 0.42vw; right: 0.42vw; width: 1.46vw; height: 1.46vw;\n border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;\n cursor: pointer; display: flex; align-items: center; justify-content: center;\n font-size: 0.83vw; transition: background 0.15s;\n }\n .ps-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }\n .ps-tryon-submit {\n width: 100%; padding: 0.73vw; margin-top: 0.83vw;\n background: var(--ps-modal-primary-bg, var(--ps-accent)); color: var(--ps-modal-primary-color, #111);\n font-family: var(--ps-modal-font, system-ui, sans-serif);\n font-size: 0.73vw; font-weight: 600; border: none;\n border-radius: var(--ps-modal-primary-radius, 0.52vw);\n cursor: pointer; transition: all 0.2s;\n display: flex; align-items: center; justify-content: center; gap: 0.42vw;\n }\n .ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }\n .ps-tryon-submit svg { stroke: currentColor; }\n\n / Profile bar /\n .ps-tryon-profile-bar { margin-bottom: 0.83vw; }\n .ps-tryon-profile-select {\n width: 100%; padding: 0.52vw 1.88vw 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit;\n appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;\n background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat; background-position: right 0.73vw center;\n }\n .ps-tryon-profile-select:focus { border-color: var(--ps-accent); }\n\n / Sizing \u2014 split layout (product image left, form right) /\n .ps-tryon-sizing-split {\n display: flex; gap: 1.8vw;\n flex: 1; min-height: 0; position: relative;\n height: 30vw;\n }\n .ps-tryon-sizing-img-col {\n flex: 1.15; position: relative;\n background: transparent;\n border-radius: 0.8vw; overflow: hidden;\n }\n .ps-tryon-sizing-img-col > img, .ps-tryon-sizing-img-col > .ps-tryon-sizing-measure-img {\n display: block; width: 100%; height: 100%;\n object-fit: contain; object-position: center center;\n background: transparent;\n border-radius: 1vw;\n transition: opacity 0.3s ease;\n }\n .ps-tryon-sizing-product-img { opacity: 1; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); }\n .ps-tryon-sizing-product-img.ps-tryon-img-hidden { opacity: 0.08; }\n .ps-tryon-sizing-measure-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }\n .ps-tryon-sizing-measure-img.ps-tryon-img-visible { opacity: 1; }\n .ps-tryon-sizing-height-img { position: absolute; inset: 0; object-fit: contain !important; background: #f5f5f5; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }\n .ps-tryon-sizing-height-img.ps-tryon-img-visible { opacity: 1; }\n\n / Model overlay \u2014 positioned on top of the image column /\n .ps-tryon-model-overlay {\n grid-area: 1 / 1; position: relative; opacity: 0; transition: opacity 0.5s ease;\n width: 100%; aspect-ratio: 896 / 1200; overflow: hidden;\n }\n .ps-tryon-model-overlay.ps-tryon-img-visible { opacity: 1; }\n .ps-tryon-model-raw { width: 100%; height: 100%; object-fit: contain; }\n\n / Measurement overlay group \u2014 each measurement is one group /\n .ps-tryon-mline-group { position: absolute; inset: 0; pointer-events: none; }\n\n / Horizontal dashed line /\n .ps-tryon-mline-h {\n position: absolute; height: 0;\n border-top: 2.5px dashed var(--ps-border-color);\n animation: ps-dash-draw 0.5s ease 0.1s both;\n }\n / Vertical dashed line (inseam, sleeve) /\n .ps-tryon-mline-v {\n position: absolute; width: 0;\n border-left: 2.5px dashed var(--ps-border-color);\n animation: ps-vdash-draw 0.5s ease 0.1s both;\n }\n / Tick marks at line endpoints \u2014 vertical ticks for horizontal lines /\n .ps-tryon-mline-tick {\n position: absolute; width: 0;\n border-left: 2.5px solid var(--ps-border-color);\n animation: ps-label-pop 0.3s ease 0.2s both;\n }\n / Horizontal ticks for vertical lines /\n .ps-tryon-mline-htick {\n position: absolute; height: 0;\n border-top: 2.5px solid var(--ps-border-color);\n animation: ps-label-pop 0.3s ease 0.2s both;\n }\n\n / Label box \u2014 matches reference: black title box + left-bordered description /\n .ps-tryon-mline-label {\n position: absolute;\n animation: ps-label-pop 0.35s ease 0.25s both;\n max-width: 33%;\n }\n .ps-tryon-mline-title {\n display: inline-block; background: #222; color: var(--ps-text-primary);\n font-size: 0.55vw; font-weight: 800; letter-spacing: 0.06em;\n padding: 0.12vw 0.35vw; margin-bottom: 0.2vw;\n }\n .ps-tryon-mline-desc {\n font-size: 0.42vw; color: #444; line-height: 1.4;\n font-style: italic;\n border-left: 1.5px solid var(--ps-border-color); padding-left: 0.3vw;\n margin-top: 0.1vw;\n }\n\n / Per-field measurement guide overlay /\n .ps-tryon-measure-overlay {\n position: absolute; inset: 0; z-index: 5; pointer-events: none;\n animation: ps-measure-in 0.3s ease both;\n }\n .ps-tryon-measure-dot {\n position: absolute; width: 0.55vw; height: 0.55vw;\n background: #222;\n border: 2px solid var(--ps-border-color);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 0 2px rgba(0,0,0,0.15);\n z-index: 6;\n }\n .ps-tryon-measure-callout {\n position: absolute; top: 3%; left: 4%; z-index: 7;\n animation: ps-label-pop 0.35s ease 0.15s both;\n max-width: 55%;\n }\n .ps-tryon-measure-title {\n display: inline-block; background: #222; color: var(--ps-text-primary);\n font-size: 1.1vw; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;\n padding: 0.3vw 0.65vw; margin-bottom: 0.35vw;\n }\n .ps-tryon-measure-desc {\n font-size: 0.85vw; color: #222; line-height: 1.55;\n font-style: italic; font-weight: 500;\n border-left: 2.5px solid var(--ps-border-color); padding-left: 0.55vw;\n margin-top: 0.15vw;\n }\n @keyframes ps-dot-pulse {\n 0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }\n 50% { box-shadow: 0 0 0 5px rgba(0,0,0,0.06); }\n }\n\n @keyframes ps-measure-in {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes ps-dash-draw {\n from { clip-path: inset(0 100% 0 0); }\n to { clip-path: inset(0 0 0 0); }\n }\n @keyframes ps-vdash-draw {\n from { clip-path: inset(0 0 100% 0); }\n to { clip-path: inset(0 0 0 0); }\n }\n @keyframes ps-label-pop {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 V2 Redesign \u2014 Editorial luxury \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-tryon-v2 {\n display: flex; gap: 1.2vw; flex: 1; min-height: 0;\n height: 100%; overflow: hidden;\n }\n\n / Left image column \u2014 proper contained display.\n No background \u2014 the product/try-on image sits directly on the modal\n surface without a gray placeholder box behind it. /\n .ps-tryon-v2-bg {\n flex: 0 0 43%; position: relative; min-width: 0;\n border-radius: 0.9vw; overflow: hidden;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-tryon-v2-bg-img {\n width: 100%; height: 100%; object-fit: contain; object-position: center center;\n transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ps-tryon-v2-bg-img.ps-tryon-img-hidden { opacity: 0.06; }\n .ps-tryon-v2-guide {\n position: absolute; inset: 0; width: 100%; height: 100%;\n object-fit: contain; object-position: center center;\n opacity: 0; z-index: 1;\n transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n will-change: opacity;\n }\n .ps-tryon-v2-guide.ps-visible { opacity: 1; }\n\n / Right form panel /\n .ps-tryon-v2-panel {\n flex: 1; min-width: 0;\n display: flex; flex-direction: column;\n padding: 0.2vw 0;\n justify-content: center;\n animation: ps-v2-fade 0.3s ease forwards;\n }\n @keyframes ps-v2-fade {\n 0% { opacity: 0; transform: translateY(0.4vw); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n @keyframes ps-panel-slide {\n from { transform: translateX(2vw); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n }\n\n / Top bar /\n .ps-tryon-v2-top {\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 0.6vw;\n }\n .ps-tryon-v2-title {\n font-size: 1.2vw; font-weight: 300; color: var(--ps-text-primary);\n letter-spacing: 0.2em; text-transform: uppercase; margin: 0;\n font-family: inherit;\n }\n .ps-tryon-v2-subtitle {\n font-size: 0.65vw; font-weight: 400; color: rgba(0,0,0,0.25);\n margin: 0.15vw 0 0; letter-spacing: 0.03em;\n }\n .ps-tryon-v2-unit-toggle {\n display: flex; gap: 0;\n border: 1px solid rgba(0,0,0,0.06); border-radius: 2vw; overflow: hidden;\n }\n .ps-tryon-v2-unit {\n background: none; border: none; padding: 0.22vw 0.7vw;\n font-size: 0.55vw; font-weight: 700; color: rgba(0,0,0,0.2);\n cursor: pointer; font-family: inherit; letter-spacing: 0.1em;\n transition: all 0.25s;\n }\n .ps-tryon-v2-unit.ps-on {\n background: rgba(33,84,239,0.15); color: var(--ps-accent);\n }\n\n / Body type card selector /\n .ps-tryon-bodytype-cards {\n display: flex; gap: 0.35vw; width: 100%;\n overflow-x: auto; padding: 0.15vw 0;\n scrollbar-width: none;\n }\n .ps-tryon-bodytype-cards::-webkit-scrollbar { display: none; }\n .ps-tryon-bodytype-card {\n flex: 1; min-width: 0;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 0.2vw; padding: 0.4vw 0.2vw;\n border: 1.5px solid rgba(0,0,0,0.06); border-radius: 0.35vw;\n background: transparent; color: rgba(0,0,0,0.3);\n cursor: pointer; font-family: inherit; transition: all 0.2s;\n }\n .ps-tryon-bodytype-card:hover {\n border-color: var(--ps-accent); background: rgba(33,84,239,0.06);\n }\n .ps-tryon-bodytype-card.ps-active {\n border-color: var(--ps-accent); background: rgba(33,84,239,0.12);\n color: var(--ps-accent);\n }\n .ps-tryon-bodytype-label {\n font-size: 0.5vw; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;\n }\n\n / Separator /\n .ps-tryon-v2-sep {\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(33,84,239,0.2), transparent);\n margin-bottom: 0.8vw;\n }\n\n / Profile select /\n .ps-tryon-v2-profile {\n width: 100%; padding: 0.3vw 0.5vw; margin-bottom: 0.6vw;\n background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.04);\n border-radius: 0.3vw; color: rgba(0,0,0,0.08);\n font-size: 0.6vw; font-family: inherit; cursor: pointer; outline: none;\n appearance: none; -webkit-appearance: none;\n transition: border-color 0.2s;\n }\n .ps-tryon-v2-profile:focus { border-color: rgba(33,84,239,0.3); }\n\n / Fields container \u2014 scrollable /\n .ps-tryon-v2-fields {\n flex: 1; min-height: 0; overflow-y: auto;\n display: flex; flex-direction: column; gap: 0;\n scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.04) transparent;\n }\n\n / Override float-row for inline look inside v2 /\n .ps-tryon-v2-fields .ps-tryon-sf-float-row {\n width: 100%;\n }\n / Label inline with input line /\n .ps-tryon-v2-fields .ps-tryon-sf-float-field {\n display: flex; align-items: center; gap: 0.8vw;\n width: 100%; padding: 0.9vw 0.8vw;\n }\n .ps-tryon-v2-fields .ps-tryon-sf-float-label {\n flex-shrink: 0;\n font-size: 0.75vw; font-weight: 500;\n color: rgba(0,0,0,0.08);\n letter-spacing: 0.04em;\n margin: 0; white-space: nowrap;\n transition: color 0.25s;\n }\n .ps-tryon-v2-fields .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label {\n color: var(--ps-accent);\n }\n .ps-tryon-v2-fields .ps-tryon-sf-input {\n flex: 1; border: none;\n border-bottom: 1.5px solid rgba(0,0,0,0.1);\n background: none; padding: 0.25vw 0;\n font-size: 1vw; font-weight: 400; color: var(--ps-text-primary);\n font-family: inherit; outline: none;\n -moz-appearance: textfield;\n transition: border-color 0.3s;\n }\n .ps-tryon-v2-fields .ps-tryon-sf-input:focus {\n border-bottom-color: var(--ps-accent);\n }\n .ps-tryon-v2-fields .ps-tryon-sf-input::placeholder {\n color: rgba(0,0,0,0.08);\n }\n .ps-tryon-v2-fields .ps-tryon-sf-input::-webkit-outer-spin-button,\n .ps-tryon-v2-fields .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n\n / CTA button /\n .ps-tryon-v2-cta {\n margin-top: 0.8vw; padding: 0.65vw 1.5vw;\n width: auto; min-width: 12vw; display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n background: var(--ps-accent); color: #fff;\n border: none; border-radius: 0.35vw;\n font-size: 0.72vw; font-weight: 700; font-family: inherit;\n letter-spacing: 0.12em; text-transform: uppercase;\n cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n flex-shrink: 0;\n }\n .ps-tryon-v2-cta svg { width: 0.75vw; height: 0.75vw; }\n .ps-tryon-v2-cta:hover {\n background: var(--ps-accent-hover);\n box-shadow: 0 0.3vw 1.5vw rgba(33,84,239,0.25);\n transform: translateY(-1px);\n }\n .ps-tryon-v2-cta svg { width: 0.8vw; height: 0.8vw; stroke: currentColor; }\n\n / \u2500\u2500 Size result card rows (split layout) \u2500\u2500 /\n .ps-tryon-sr-cards-stack {\n display: flex; flex-wrap: wrap; gap: 0.4vw;\n flex: 1; min-height: 0; justify-content: center;\n }\n / Cards inside stack: 2 per row, compact, dark /\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard {\n flex: 1 1 45%; max-width: 49%; min-height: 0; border-radius: 0.5vw;\n background: #0a0a0a; max-height: 8vw;\n }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard:not(.ps-has-img) {\n min-height: 5vw; padding: 0.4vw; max-height: 8vw;\n }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-bg {\n max-height: 8vw; width: 100%; height: 100%;\n object-fit: contain; object-position: center center;\n }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-overlay {\n height: 100%;\n background: rgba(0,0,0,0.6);\n }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-content {\n padding: 0.4vw;\n }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-name { font-size: 0.5vw; }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-size { font-size: 1.2vw; }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-badge { font-size: 0.35vw; }\n .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-icon { width: 1.8vw; height: 1.8vw; }\n .ps-tryon-sr-card-row {\n display: flex; align-items: center; gap: 0.6vw;\n padding: 0.6vw 0.7vw;\n background: rgba(255,255,255,0.02);\n border: 1px solid rgba(0,0,0,0.04);\n border-radius: 0.5vw;\n cursor: pointer; font-family: inherit;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n animation: ps-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n opacity: 0;\n }\n .ps-tryon-sr-card-row:nth-child(1) { animation-delay: 0s; }\n .ps-tryon-sr-card-row:nth-child(2) { animation-delay: 0.06s; }\n .ps-tryon-sr-card-row:nth-child(3) { animation-delay: 0.12s; }\n .ps-tryon-sr-card-row:nth-child(4) { animation-delay: 0.18s; }\n .ps-tryon-sr-card-row:hover {\n border-color: var(--ps-accent);\n background: rgba(33,84,239,0.04);\n transform: translateX(0.15vw);\n }\n .ps-tryon-sr-card-icon {\n width: 2vw; height: 2vw; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n background: rgba(33,84,239,0.06); border: 1px solid rgba(33,84,239,0.1);\n border-radius: 50%; color: var(--ps-accent);\n }\n .ps-tryon-sr-card-icon svg { stroke: currentColor; }\n .ps-tryon-sr-card-info {\n flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05vw;\n }\n .ps-tryon-sr-card-name {\n font-size: 0.72vw; font-weight: 500; color: var(--ps-text-primary);\n text-transform: capitalize;\n }\n .ps-tryon-sr-card-fit {\n font-size: 0.55vw; color: var(--ps-text-muted); letter-spacing: 0.03em;\n }\n .ps-tryon-sr-card-size {\n font-size: 1.3vw; font-weight: 300; color: var(--ps-accent);\n letter-spacing: -0.01em;\n }\n .ps-tryon-sr-card-row > svg { color: rgba(0,0,0,0.1); flex-shrink: 0; transition: color 0.2s; }\n .ps-tryon-sr-card-row:hover > svg { color: var(--ps-accent); }\n\n / \u2500\u2500 Result cards v2: bold, clear, unmissable \u2500\u2500 /\n .ps-tryon-sr-cards-v2 {\n display: flex; flex-wrap: wrap; gap: 0.4vw;\n flex: 1; min-height: 0;\n }\n .ps-tryon-sr-card-v2 {\n flex: 1 1 45%; max-width: 49%;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n text-align: center;\n background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06);\n border-radius: 0.6vw; padding: 1vw 0.5vw;\n cursor: pointer; font-family: inherit;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n animation: ps-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n opacity: 0; overflow: hidden; position: relative;\n min-height: 7vw;\n }\n .ps-tryon-sr-card-v2.ps-full { flex: 1 1 100%; max-width: 100%; min-height: 5vw; padding: 0.8vw; }\n .ps-tryon-sr-card-v2:hover {\n border-color: var(--ps-accent);\n background: rgba(33,84,239,0.06);\n transform: translateY(-2px);\n box-shadow: 0 0.4vw 1.5vw rgba(0,0,0,0.08);\n }\n .ps-tryon-sr-card-v2-text {\n display: flex; flex-direction: column; align-items: center; gap: 0.15vw; z-index: 1;\n }\n .ps-tryon-sr-card-v2-label {\n font-size: 0.65vw; font-weight: 600; color: var(--ps-text-secondary);\n text-transform: uppercase; letter-spacing: 0.1em;\n display: inline-flex; align-items: center; gap: 0.5vw;\n }\n .ps-tryon-sr-card-v2-label-icon {\n width: 4.8vw; height: 4.8vw; object-fit: contain;\n opacity: 1;\n }\n .ps-tryon-sr-card-v2-value {\n font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);\n line-height: 1; letter-spacing: -0.02em;\n }\n .ps-tryon-sr-card-v2.ps-full .ps-tryon-sr-card-v2-value { font-size: 1.8vw; }\n .ps-tryon-sr-card-v2-value-suffix {\n font-size: 0.75vw; font-weight: 500; color: var(--ps-text-secondary);\n letter-spacing: 0; margin-left: 0.25vw; white-space: nowrap;\n }\n .ps-tryon-sr-card-v2-rec {\n font-size: 0.5vw; font-weight: 600; color: var(--ps-accent);\n text-transform: uppercase; letter-spacing: 0.1em;\n margin-top: 0.15vw;\n border: 1px solid rgba(33,84,239,0.25); border-radius: 2vw;\n padding: 0.1vw 0.5vw;\n }\n .ps-tryon-sr-card-v2-img { display: none; }\n .ps-tryon-sr-card-v2-icon {\n position: absolute; bottom: 0.35vw; right: 0.45vw;\n opacity: 0.1; color: var(--ps-accent);\n pointer-events: none;\n transform: scale(1.5); transform-origin: bottom right;\n }\n\n / \u2500\u2500 Photo guide v2 \u2500\u2500 /\n .ps-tryon-guide-drop-v2 {\n width: 90%; height: 90%; border-radius: 0.6vw;\n border: 1.5px dashed rgba(0,0,0,0.08);\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 0.3vw; cursor: pointer; transition: all 0.25s;\n position: relative; overflow: hidden;\n }\n .ps-tryon-guide-drop-v2:hover, .ps-tryon-guide-drop-v2.ps-drag {\n border-color: var(--ps-accent); background: rgba(33,84,239,0.04);\n }\n .ps-tryon-guide-drop-v2.ps-has { border-style: solid; border-color: rgba(0,0,0,0.06); cursor: default; }\n .ps-tryon-guide-drop-v2 svg { color: rgba(0,0,0,0.2); }\n .ps-tryon-guide-drop-v2-text { font-size: 0.8vw; font-weight: 500; color: rgba(0,0,0,0.5); }\n .ps-tryon-guide-drop-v2-hint { font-size: 0.55vw; color: rgba(0,0,0,0.15); }\n .ps-tryon-guide-drop-v2-img {\n width: 100%; height: 100%; object-fit: contain; border-radius: 0.5vw;\n }\n .ps-tryon-guide-drop-v2-remove {\n position: absolute; top: 0.4vw; right: 0.4vw;\n width: 1.4vw; height: 1.4vw; border-radius: 50%;\n background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.08);\n color: var(--ps-text-muted); font-size: 0.6vw; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: background 0.2s;\n }\n .ps-tryon-guide-drop-v2-remove:hover { background: rgba(239,68,68,0.7); }\n\n .ps-tryon-guide-v2-tips {\n display: flex; flex-direction: column; gap: 0.4vw;\n margin: 0.5vw 0;\n }\n .ps-tryon-guide-v2-tip {\n display: flex; align-items: center; gap: 0.4vw;\n font-size: 0.65vw; color: rgba(0,0,0,0.5);\n }\n .ps-tryon-guide-v2-tip-icon {\n width: 1.2vw; height: 1.2vw; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.55vw; border-radius: 50%;\n background: rgba(74,222,128,0.1); color: #4ade80;\n }\n .ps-tryon-guide-v2-tip.ps-dont .ps-tryon-guide-v2-tip-icon {\n background: rgba(239,68,68,0.1); color: #f87171;\n }\n .ps-tryon-v2-cta:disabled {\n opacity: 0.4; cursor: not-allowed; transform: none;\n box-shadow: none;\n }\n\n / Try-on processing overlay on image /\n .ps-tryon-v2-bg-img.ps-tryon-blur {\n filter: blur(8px) brightness(0.5); transform: scale(1.05);\n transition: filter 0.5s ease, transform 0.5s ease;\n }\n .ps-tryon-v2-processing-label {\n position: absolute; bottom: 1vw; left: 50%; transform: translateX(-50%);\n z-index: 5; font-size: 0.7vw; font-weight: 600;\n color: #fff; letter-spacing: 0.05em;\n background: rgba(0,0,0,0.72); backdrop-filter: blur(10px);\n padding: 0.6vw 0.9vw; border-radius: 0.6vw;\n display: flex; flex-direction: column; align-items: center; gap: 0.5vw;\n min-width: 14vw;\n box-shadow: 0 0.4vw 1.5vw rgba(0,0,0,0.35);\n }\n .ps-tryon-v2-processing-label > span:first-child {\n animation: ps-loading-pulse 2s ease-in-out infinite;\n }\n .ps-tryon-v2-processing-label .ps-tryon-progress-ring-track { stroke: rgba(255,255,255,0.18); }\n .ps-tryon-v2-processing-label .ps-tryon-progress-ring-fill { stroke: var(--ps-accent-light); }\n .ps-tryon-v2-processing-label .ps-tryon-progress-eta { color: #fff; }\n .ps-tryon-v2-processing-label .ps-tryon-progress-bar-wrap { background: rgba(255,255,255,0.18); }\n .ps-tryon-v2-processing-label .ps-tryon-progress-pct { color: var(--ps-accent-light); }\n\n / \"I don't know\" link /\n .ps-tryon-v2-dontknow {\n background: none; border: none;\n color: var(--ps-accent); font-size: 0.72vw; font-weight: 500;\n cursor: pointer; font-family: inherit;\n padding: 0.5vw 0.8vw; text-align: left;\n transition: color 0.2s;\n }\n .ps-tryon-v2-dontknow:hover { color: var(--ps-accent-light); text-decoration: underline; }\n\n / Alternative links /\n .ps-tryon-v2-alt {\n display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n margin-top: 0.5vw; flex-shrink: 0;\n }\n .ps-tryon-v2-alt button {\n background: none; border: none; color: rgba(33,84,239,0.5);\n font-size: 0.58vw; font-weight: 500; cursor: pointer;\n font-family: inherit; letter-spacing: 0.04em;\n transition: color 0.2s; padding: 0;\n }\n .ps-tryon-v2-alt button:hover { color: var(--ps-accent); }\n .ps-tryon-v2-alt span { color: rgba(0,0,0,0.06); font-size: 0.55vw; }\n\n / Active field row highlight (legacy) /\n .ps-tryon-sf-row-active { border-bottom-color: var(--ps-accent); }\n .ps-tryon-sf-row-active .ps-tryon-sf-label { color: var(--ps-accent); }\n .ps-tryon-sizing-form-col {\n flex: 1; display: flex; flex-direction: column; justify-content: flex-start;\n padding: 0.3vw 0; min-height: 0;\n }\n .ps-tryon-sf-title {\n font-size: 1.1vw; font-weight: 300; color: var(--ps-text-primary);\n margin: 0 0 0.8vw; letter-spacing: 0.12em; text-transform: uppercase;\n text-align: left;\n background: linear-gradient(90deg, #fff 0%, rgba(0,0,0,0.5) 100%);\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .ps-tryon-sf-unit-tabs {\n display: inline-flex; gap: 0; border: 1px solid rgba(0,0,0,0.06);\n border-radius: 0.3vw; overflow: hidden; margin-bottom: 1vw; align-self: flex-start;\n }\n .ps-tryon-sf-unit-tab {\n background: none; border: none; padding: 0.3vw 0.9vw;\n font-size: 0.62vw; font-weight: 600; color: rgba(0,0,0,0.25); cursor: pointer;\n font-family: inherit; transition: all 0.25s; letter-spacing: 0.06em; text-transform: uppercase;\n }\n .ps-tryon-sf-unit-tab:hover { color: rgba(0,0,0,0.5); }\n .ps-tryon-sf-unit-tab.ps-active { color: var(--ps-accent); background: rgba(33,84,239,0.08); }\n\n .ps-tryon-sf-profile-bar { margin-bottom: 0.7vw; }\n .ps-tryon-sf-profile-select {\n width: 100%; padding: 0.4vw; background: var(--ps-bg-secondary); color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color); border-radius: 0.4vw;\n font-size: 0.75vw; font-family: inherit; cursor: pointer;\n }\n\n .ps-tryon-sf-scroll {\n flex: 1; min-height: 0; overflow-y: auto;\n scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n }\n .ps-tryon-sf-fields {\n display: flex; flex-direction: column; gap: 0.8vw;\n }\n .ps-tryon-sf-footer {\n flex-shrink: 0; padding-top: 0.6vw;\n display: flex; flex-direction: column; gap: 0.4vw;\n }\n\n / \u2500\u2500 Refined line inputs \u2500\u2500 /\n .ps-tryon-sf-float-row {\n width: 100%;\n }\n .ps-tryon-sf-float-field {\n width: 100%; position: relative;\n }\n\n / Label \u2014 subtle, editorial /\n .ps-tryon-sf-float-label {\n display: block;\n font-size: 0.58vw; font-weight: 500; color: var(--ps-text-secondary);\n letter-spacing: 0.1em; text-transform: uppercase;\n margin-bottom: 0.15vw;\n transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label {\n color: var(--ps-accent);\n }\n\n / Input \u2014 elegant underline /\n .ps-tryon-sf-input {\n width: 100%; box-sizing: border-box;\n background: none; border: none;\n border-bottom: 1.5px solid rgba(0,0,0,0.15);\n color: var(--ps-text-primary);\n font-size: 0.85vw; font-weight: 300; font-family: inherit;\n padding: 0.4vw 0; letter-spacing: 0.02em;\n outline: none;\n -moz-appearance: textfield;\n transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ps-tryon-sf-input:focus {\n border-bottom-color: var(--ps-accent);\n }\n .ps-tryon-sf-input:not(:placeholder-shown) {\n border-bottom-color: rgba(0,0,0,0.1);\n }\n .ps-tryon-sf-input:focus:not(:placeholder-shown) {\n border-bottom-color: var(--ps-accent);\n }\n .ps-tryon-sf-input::placeholder { color: rgba(0,0,0,0.08); }\n .ps-tryon-sf-input::-webkit-outer-spin-button,\n .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n\n .ps-tryon-sf-ft-group {\n display: flex; align-items: stretch; gap: 1vw; width: 100%;\n }\n .ps-tryon-sf-ft-group .ps-tryon-sf-float-field { flex: 1; }\n\n / Legacy (keep for skeleton/review) /\n .ps-tryon-sf-row {\n display: flex; align-items: center; justify-content: center; gap: 1.2vw;\n padding: 1.3vw 0; max-width: 100%; margin: 0 auto;\n }\n .ps-tryon-sf-label {\n font-size: 0.78vw; font-weight: 700; color: var(--ps-text-secondary);\n letter-spacing: 0.1em; text-transform: uppercase;\n flex-shrink: 0; min-width: 5vw;\n }\n .ps-tryon-sf-input-wrap { flex: 1; display: flex; align-items: center; gap: 0.4vw; }\n .ps-tryon-sf-inline { flex: 1; display: flex; align-items: center; gap: 0.4vw; }\n .ps-tryon-sf-unit {\n font-size: 0.73vw; color: var(--ps-text-secondary); font-weight: 500; flex-shrink: 0;\n }\n\n .ps-tryon-sf-optional { border-top: 1px solid var(--ps-border-color); margin-top: 0.52vw; padding-top: 0.52vw; }\n .ps-tryon-sf-optional-toggle {\n display: flex; align-items: center; justify-content: space-between;\n width: 100%; padding: 0.52vw 0.73vw;\n font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); cursor: pointer;\n font-family: inherit;\n border: 1px solid var(--ps-border-color); border-radius: 0.52vw;\n background: #161616; transition: all 0.2s;\n }\n .ps-tryon-sf-optional-toggle:hover { border-color: #555; background: #1a1a1a; }\n .ps-tryon-sf-optional-arrow {\n font-size: 0.83vw; color: var(--ps-text-secondary); transition: transform 0.3s ease; display: inline-block;\n }\n .ps-tryon-sf-optional-arrow.ps-open { transform: rotate(180deg); }\n .ps-tryon-sf-optional-fields {\n display: flex; flex-direction: column; gap: 0.8vw;\n max-height: 0; overflow: hidden; opacity: 0;\n transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;\n padding-top: 0;\n }\n .ps-tryon-sf-optional-fields.ps-open {\n max-height: 30vw; opacity: 1; padding-top: 0.7vw;\n }\n\n / Mode switch \u2014 below button /\n .ps-tryon-sf-mode-switch { margin-top: 0.5vw; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.25vw; }\n .ps-tryon-sf-switch-btn {\n background: none; border: none; color: rgba(33,84,239,0.7); font-size: 0.65vw;\n font-weight: 500; cursor: pointer; font-family: inherit;\n display: inline-flex; align-items: center; gap: 0.2vw;\n transition: color 0.25s; padding: 0.15vw 0; letter-spacing: 0.03em;\n }\n .ps-tryon-sf-switch-btn:hover { color: var(--ps-accent); }\n .ps-tryon-sf-switch-divider { color: rgba(0,0,0,0.08); font-size: 0.65vw; font-weight: 300; }\n .ps-tryon-sf-switch-btn svg { stroke: currentColor; width: 0.8vw; height: 0.8vw; }\n\n / How to measure \u2014 overlaid on product image bottom-left /\n .ps-tryon-sf-measure-overlay {\n position: absolute; bottom: 0.6vw; left: 0.6vw;\n background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);\n border: 1px solid var(--ps-border-color); color: var(--ps-text-secondary); font-size: 0.75vw;\n font-weight: 500; cursor: pointer; font-family: inherit;\n display: inline-flex; align-items: center; gap: 0.35vw;\n padding: 0.4vw 0.8vw; border-radius: 0.45vw; transition: all 0.2s;\n }\n .ps-tryon-sf-measure-overlay:hover { border-color: var(--ps-accent); color: var(--ps-text-primary); }\n .ps-tryon-sf-measure-overlay.ps-active { border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.15); }\n .ps-tryon-sf-measure-overlay svg { stroke: currentColor; }\n\n / Estimation review view /\n .ps-tryon-est-subtitle {\n font-size: 0.7vw; color: var(--ps-text-dim); margin: 0 0 0.8vw; line-height: 1.5; text-align: center;\n }\n .ps-tryon-est-label-group {\n display: flex; flex-direction: column; gap: 0.1vw; flex-shrink: 0; min-width: 5vw;\n }\n .ps-tryon-sf-estimated-badge {\n display: inline-block; font-size: 0.45vw; padding: 0.08vw 0.25vw;\n border-radius: 0.2vw; background: rgba(33,84,239,0.15); color: var(--ps-accent);\n letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; width: fit-content;\n }\n .ps-tryon-sf-edit-icon {\n width: 0.85vw; height: 0.85vw; stroke: #555; flex-shrink: 0; cursor: pointer;\n transition: stroke 0.2s;\n }\n .ps-tryon-sf-edit-icon:hover { stroke: var(--ps-accent); }\n .ps-tryon-est-actions {\n display: flex; align-items: center; gap: 0.8vw; margin-top: 0.6vw;\n }\n .ps-tryon-est-back {\n background: none; border: none; color: var(--ps-text-dim); cursor: pointer; font-size: 0.75vw;\n font-family: inherit; padding: 0; transition: color 0.2s; flex-shrink: 0; white-space: nowrap;\n }\n .ps-tryon-est-back:hover { color: var(--ps-accent); }\n .ps-tryon-est-submit { flex: 1; min-width: 0; }\n\n / Save profile /\n .ps-tryon-sf-save { margin-top: 0.42vw; display: flex; flex-direction: column; gap: 0.36vw; }\n .ps-tryon-sf-save-check {\n display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; color: var(--ps-text-secondary); cursor: pointer; user-select: none;\n }\n .ps-tryon-sf-save-check input[type=\"checkbox\"] { width: 0.83vw; height: 0.83vw; accent-color: var(--ps-accent); cursor: pointer; }\n .ps-tryon-sf-save-name {\n padding: 0.42vw 0.63vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw;\n background: #111; color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none;\n transition: border-color 0.2s; animation: ps-fade-up 0.2s ease both;\n }\n .ps-tryon-sf-save-name:focus { border-color: var(--ps-accent); }\n\n .ps-tryon-sf-error {\n color: var(--ps-error-color); font-size: 0.75vw; text-align: center; margin-top: 0.3vw;\n }\n .ps-tryon-sf-next {\n margin-top: 0.6vw; padding: 0.65vw 2vw;\n width: 100%;\n background: linear-gradient(135deg, var(--ps-accent) 0%, var(--ps-accent-light) 100%);\n color: #0c0c0c; border: none;\n border-radius: 0.4vw; font-size: 0.78vw;\n font-weight: 600; cursor: pointer; font-family: inherit;\n flex-shrink: 0; letter-spacing: 0.06em; text-transform: uppercase;\n transition: background 0.2s ease, opacity 0.2s ease;\n box-shadow: 0 0.2vw 1vw rgba(33,84,239,0.15);\n display: inline-flex; align-items: center; gap: 0.35vw;\n }\n .ps-tryon-sf-next:hover { background: var(--ps-accent-hover); }\n .ps-tryon-sf-next svg { width: 0.85vw; height: 0.85vw; stroke: currentColor; fill: none; }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Height Picker \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-hpk {\n display: flex; flex-direction: column; align-items: center;\n height: 100%; min-height: 26vw;\n }\n .ps-hpk-title {\n font-size: 1.2vw; font-weight: 700; color: var(--ps-text-primary); margin: 0 0 0.2vw;\n }\n .ps-hpk-desc {\n font-size: 0.65vw; color: var(--ps-text-dim); margin: 0 0 0.5vw;\n }\n\n / Shared toggle /\n .ps-hpk-toggle {\n display: inline-flex; border: 1.5px solid var(--ps-border-color); border-radius: 2vw; overflow: hidden;\n margin-bottom: 0.3vw;\n }\n .ps-hpk-toggle button {\n background: transparent; border: none; color: var(--ps-text-dim); font-size: 0.72vw; font-weight: 600;\n padding: 0.3vw 1.4vw; cursor: pointer; font-family: inherit; transition: all 0.15s;\n }\n .ps-hpk-toggle button.ps-on {\n background: var(--ps-accent); color: #fff; border-radius: 2vw;\n }\n\n / Main visual area /\n .ps-hpk-area {\n position: relative; width: 100%; flex: 1; min-height: 18vw;\n cursor: ns-resize; touch-action: none; user-select: none;\n display: flex; align-items: flex-end; justify-content: center;\n }\n\n / Value \u2014 positioned left, floats at indicator height /\n .ps-hpk-val {\n position: absolute; left: 0.5vw; transform: translateY(50%);\n display: flex; align-items: baseline; gap: 0.2vw; z-index: 4;\n pointer-events: none;\n }\n .ps-hpk-num {\n font-size: 2vw; font-weight: 800; color: var(--ps-text-primary); letter-spacing: -0.02em;\n }\n .ps-hpk-unit {\n font-size: 0.85vw; color: var(--ps-text-secondary); font-weight: 500;\n }\n\n / Model \u2014 center /\n .ps-hpk-model {\n display: flex; align-items: flex-end; justify-content: center;\n transition: height 0.1s ease-out; flex-shrink: 0;\n position: relative; z-index: 1;\n }\n .ps-hpk-model img {\n height: 100%; width: auto; max-width: 10vw; object-fit: contain;\n opacity: 0.7;\n border-radius: 0.4vw;\n }\n\n / Ruler \u2014 right side /\n .ps-hpk-ruler {\n position: absolute; right: 0.5vw; top: 0; bottom: 0;\n width: 4vw; z-index: 2;\n }\n .ps-hpk-ruler-line {\n position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: #666;\n }\n .ps-hpk-mark {\n position: absolute; left: 0; display: flex; align-items: center;\n transform: translateY(50%);\n }\n .ps-hpk-mark-tick {\n width: 0.8vw; height: 1.5px; background: #aaa;\n }\n .ps-hpk-mark-label {\n margin-left: 0.35vw; font-size: 0.75vw; color: var(--ps-text-secondary); font-weight: 600;\n white-space: nowrap;\n }\n .ps-hpk-mark-sm {\n position: absolute; left: 0; width: 0.45vw; height: 1px; background: #555;\n transform: translateY(50%);\n }\n\n / Horizontal indicator line \u2014 spans full width /\n .ps-hpk-line {\n position: absolute; left: 0; right: 0; height: 2px;\n background: rgba(33,84,239,0.5); z-index: 3;\n transform: translateY(50%); pointer-events: none;\n box-shadow: 0 0 8px rgba(33,84,239,0.3);\n }\n .ps-hpk-line::before {\n content: ''; position: absolute; left: 50%; top: 50%;\n transform: translate(-50%, -50%);\n width: 10px; height: 10px; border-radius: 50%;\n border: 2px solid var(--ps-accent); background: var(--ps-bg-secondary);\n box-shadow: 0 0 8px rgba(33,84,239,0.6);\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Weight Picker \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-wpk {\n display: flex; flex-direction: column; align-items: center;\n height: 100%; justify-content: center; gap: 0.4vw;\n }\n .ps-wpk-title {\n font-size: 1.2vw; font-weight: 700; color: var(--ps-text-primary); margin: 0 0 0.2vw;\n }\n .ps-wpk-desc {\n font-size: 0.65vw; color: var(--ps-text-dim); margin: 0 0 0.5vw;\n }\n .ps-wpk-val {\n display: flex; align-items: baseline; gap: 0.3vw; margin: 1.5vw 0 1vw;\n }\n .ps-wpk-num {\n font-size: 2.8vw; font-weight: 800; color: var(--ps-text-primary); letter-spacing: -0.02em;\n }\n .ps-wpk-unit {\n font-size: 1vw; color: var(--ps-text-dim); font-weight: 500;\n }\n\n / Scale /\n .ps-wpk-scale-wrap { width: 100%; padding: 0 1vw; }\n .ps-wpk-track {\n position: relative; width: 100%; height: 3.5vw;\n cursor: ew-resize; touch-action: none; user-select: none;\n border-bottom: 1.5px solid var(--ps-border-color);\n }\n .ps-wpk-tick {\n position: absolute; bottom: 0; width: 1px; height: 0.6vw; background: #444;\n }\n .ps-wpk-tick.ps-md { height: 1.1vw; background: #666; }\n .ps-wpk-tick.ps-mj { height: 1.8vw; background: #aaa; }\n\n .ps-wpk-indicator {\n position: absolute; top: 0; bottom: 0; transform: translateX(-50%); z-index: 3;\n display: flex; flex-direction: column; align-items: center; pointer-events: none;\n }\n .ps-wpk-ind-line { flex: 1; width: 2px; background: var(--ps-accent); }\n .ps-wpk-ind-dot {\n width: 10px; height: 10px; border-radius: 50%;\n background: var(--ps-accent); border: 2px solid var(--ps-accent); flex-shrink: 0;\n box-shadow: 0 0 8px rgba(33,84,239,0.7);\n }\n\n .ps-wpk-labels {\n position: relative; width: 100%; height: 1.4vw; margin-top: 0.3vw;\n }\n .ps-wpk-labels span {\n position: absolute; transform: translateX(-50%);\n font-size: 0.65vw; color: #bbb; font-weight: 600; pointer-events: none;\n }\n\n / Mobile: stack vertically /\n @media (max-width: 600px) {\n .ps-tryon-sizing-split { flex-direction: column; }\n .ps-tryon-sizing-img-col { max-height: 280px; }\n .ps-tryon-sf-next { width: 100%; text-align: center; display: flex; justify-content: center; }\n .ps-tryon-sf-measure-overlay { font-size: 12px; padding: 6px 12px; gap: 5px; bottom: 8px; left: 8px; border-radius: 8px; }\n .ps-tryon-sf-mode-switch { margin-top: 8px; }\n .ps-tryon-sf-switch-btn { font-size: 12px; }\n .ps-hpk-title, .ps-wpk-title { font-size: 18px; }\n .ps-hpk-desc, .ps-wpk-desc { font-size: 11px; }\n .ps-hpk-num { font-size: 32px; }\n .ps-hpk-unit { font-size: 14px; }\n .ps-hpk-toggle button { font-size: 13px; padding: 5px 18px; }\n .ps-hpk-area { min-height: 240px; }\n .ps-hpk-model img { max-width: 100px; }\n .ps-hpk-mark-label { font-size: 12px; }\n .ps-hpk-mark-tick { width: 12px; }\n .ps-wpk-num { font-size: 38px; }\n .ps-wpk-unit { font-size: 14px; }\n .ps-wpk-track { height: 50px; }\n .ps-wpk-labels span { font-size: 10px; }\n }\n\n / Keep old class names for backwards compat /\n .ps-tryon-section-title { font-size: 0.95vw; font-weight: 600; color: var(--ps-text-primary); margin: 0 0 0.8vw; }\n .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 2.5vw 1vw; text-align: center; }\n .ps-tryon-sg-checking-icon { color: var(--ps-accent); margin-bottom: 0.8vw; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }\n .ps-tryon-sg-checking-icon svg { stroke: currentColor; fill: none; }\n @keyframes ps-pulse-ruler { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }\n .ps-tryon-sg-checking-bar-wrap { width: 9vw; height: 4px; background: var(--ps-border-color); border-radius: 2px; overflow: hidden; margin-bottom: 1vw; }\n .ps-tryon-sg-checking-bar { height: 100%; width: 40%; background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light)); border-radius: 2px; animation: ps-sg-bar 1.5s ease-in-out infinite; }\n @keyframes ps-sg-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }\n .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: 0.3vw; }\n .ps-tryon-sg-checking-sub { font-size: 0.75vw; color: var(--ps-text-secondary); margin: 0; }\n\n / Back button /\n .ps-tryon-back { display: flex; align-items: center; gap: 0.3vw; background: none; border: none; color: var(--ps-text-secondary); font-size: 0.8vw; cursor: pointer; padding: 0; margin-bottom: 0.7vw; font-family: inherit; transition: color 0.2s; }\n .ps-tryon-back:hover { color: var(--ps-text-primary); }\n .ps-tryon-back svg { stroke: currentColor; fill: none; }\n\n / Sizing form (legacy \u2014 redirect to split view) /\n .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 0.7vw; }\n .ps-tryon-input-row { display: flex; align-items: center; gap: 0.52vw; }\n .ps-tryon-input-row label { font-size: 0.68vw; font-weight: 500; color: var(--ps-text-secondary); min-width: 4.7vw; flex-shrink: 0; }\n .ps-tryon-input-row input {\n flex: 1; padding: 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none;\n transition: border-color 0.2s; -moz-appearance: textfield;\n }\n .ps-tryon-input-row input::-webkit-outer-spin-button,\n .ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-tryon-input-row input:focus { border-color: var(--ps-accent); }\n .ps-tryon-input-unit { font-size: 0.63vw; color: var(--ps-text-muted); flex-shrink: 0; }\n .ps-tryon-height-ft { display: flex; align-items: center; gap: 0.31vw; flex: 1; }\n .ps-tryon-height-ft input { width: 3.13vw; padding: 0.52vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }\n .ps-tryon-height-ft input::-webkit-outer-spin-button, .ps-tryon-height-ft input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-tryon-height-ft input:focus { border-color: var(--ps-accent); }\n .ps-tryon-height-ft span { font-size: 0.63vw; color: var(--ps-text-muted); }\n .ps-tryon-country-select {\n flex: 1; padding: 0.52vw 1.88vw 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit;\n appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;\n background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat; background-position: right 0.73vw center;\n }\n .ps-tryon-country-select:focus { border-color: var(--ps-accent); }\n .ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw; overflow: hidden; }\n .ps-tryon-unit-btn {\n padding: 0.31vw 0.73vw; background: transparent; border: none; color: var(--ps-text-secondary);\n font-size: 0.63vw; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;\n }\n .ps-tryon-unit-btn.ps-active { background: var(--ps-accent); color: #fff; }\n\n / Unit tabs (cm / inches) /\n .ps-tryon-unit-tabs {\n display: flex; gap: 0; background: var(--ps-bg-secondary); border: 1.5px solid var(--ps-border-color);\n border-radius: 0.63vw; overflow: hidden; margin-bottom: 0.83vw;\n }\n .ps-tryon-unit-tab {\n flex: 1; padding: 0.57vw 0.83vw; background: transparent; border: none;\n color: var(--ps-text-muted); font-size: 0.78vw; font-weight: 700; cursor: pointer;\n transition: all 0.2s ease; font-family: inherit; letter-spacing: 0.04em;\n position: relative;\n }\n .ps-tryon-unit-tab:first-child { border-right: 1px solid var(--ps-border-color); }\n .ps-tryon-unit-tab:hover { color: var(--ps-text-secondary); background: rgba(0,0,0,0.02); }\n .ps-tryon-unit-tab.ps-active {\n background: var(--ps-accent); color: #fff;\n }\n .ps-tryon-section-label { font-size: 0.57vw; font-weight: 700; color: var(--ps-accent); text-transform: uppercase; letter-spacing: 0.08em; margin: 0.21vw 0 0.1vw; }\n .ps-tryon-optional-section { border-top: 1px solid var(--ps-border-color); padding-top: 0.52vw; margin-top: 0.31vw; }\n .ps-tryon-optional-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid var(--ps-border-color); border-radius: 0.52vw; padding: 0.52vw 0.73vw; color: var(--ps-text-secondary); font-size: 0.68vw; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }\n .ps-tryon-optional-toggle:hover { border-color: #555; color: var(--ps-text-secondary); }\n .ps-tryon-chevron { transition: transform 0.2s; font-size: 0.73vw; }\n .ps-tryon-optional-fields { display: flex; flex-direction: column; gap: 0.52vw; padding-top: 0.63vw; }\n .ps-tryon-shoe-section { border-top: 1px solid var(--ps-border-color); padding-top: 0.73vw; margin-top: 0.31vw; display: flex; flex-direction: column; gap: 0.52vw; }\n .ps-tryon-shoe-title { font-size: 0.68vw; font-weight: 600; color: var(--ps-text-secondary); }\n .ps-tryon-disclaimer { font-size: 0.57vw; color: var(--ps-text-muted); margin: 0.21vw 0 0; }\n .ps-tryon-form-save-toggle { margin-top: 0.52vw; display: flex; flex-direction: column; gap: 0.42vw; }\n .ps-tryon-form-save-check {\n display: flex; align-items: center; gap: 0.42vw; font-size: 0.68vw; color: var(--ps-text-secondary); cursor: pointer; user-select: none;\n }\n .ps-tryon-form-save-check input[type=\"checkbox\"] {\n width: 0.83vw; height: 0.83vw; accent-color: var(--ps-accent); cursor: pointer;\n }\n .ps-tryon-form-save-name {\n padding: 0.42vw 0.63vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit; outline: none;\n transition: border-color 0.2s;\n }\n .ps-tryon-form-save-name:focus { border-color: var(--ps-accent); }\n\n / Processing /\n .ps-tryon-processing { text-align: center; padding: 1.25vw; display: flex; flex-direction: column; align-items: center; }\n\n .ps-tryon-processing-image-wrap {\n position: relative; width: 11.5vw; height: 14.6vw; margin: 0 auto 1.25vw;\n border-radius: 0.83vw; overflow: hidden; border: 2px solid var(--ps-border-color);\n }\n .ps-tryon-processing-blur {\n position: absolute; inset: -1.04vw; background-size: cover; background-position: center;\n filter: blur(25px) brightness(0.5); transform: scale(1.2);\n }\n .ps-tryon-processing-model {\n position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block;\n }\n .ps-tryon-scan-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(180deg, rgba(33,84,239,0.05) 0%, transparent 40%, transparent 60%, rgba(33,84,239,0.05) 100%);\n pointer-events: none;\n }\n .ps-tryon-scan-line {\n position: absolute; left: 0; right: 0; height: 3px;\n background: linear-gradient(90deg, transparent, #bb945c 20%, var(--ps-accent-light) 50%, #bb945c 80%, transparent);\n box-shadow: 0 0 0.78vw rgba(33,84,239,0.6), 0 0 2.08vw rgba(33,84,239,0.2);\n animation: ps-scan 2.5s ease-in-out infinite;\n pointer-events: none; z-index: 2;\n }\n @keyframes ps-scan {\n 0% { top: 0; opacity: 0; }\n 5% { opacity: 1; }\n 95% { opacity: 1; }\n 100% { top: calc(100% - 3px); opacity: 0; }\n }\n\n / Snap processing step cards /\n .ps-tryon-snap-steps {\n display: flex; flex-direction: column; gap: 1.2vw;\n justify-content: center; padding: 2vw 1.5vw;\n }\n .ps-tryon-snap-step {\n display: flex; align-items: center; gap: 0.8vw;\n padding: 0.8vw 1vw; border-radius: 0.5vw;\n background: var(--ps-bg-secondary);\n border: 1px solid var(--ps-border-subtle);\n color: var(--ps-text-muted);\n font-size: 0.83vw; font-weight: 500; font-family: inherit;\n opacity: 0.4;\n transition: all 0.4s ease;\n }\n .ps-tryon-snap-step.ps-active {\n opacity: 1; color: var(--ps-text-primary);\n border-color: var(--ps-border-color);\n animation: ps-pose-fade 0.4s ease both;\n }\n .ps-tryon-snap-step.ps-done {\n opacity: 0.7; color: var(--ps-text-secondary);\n border-color: rgba(74,222,128,0.2);\n }\n .ps-tryon-snap-step-icon {\n width: 1.4vw; height: 1.4vw;\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n }\n .ps-tryon-snap-check {\n color: var(--ps-success-color); font-size: 0.9vw; font-weight: 700;\n }\n .ps-tryon-snap-num {\n color: var(--ps-text-muted); font-size: 0.7vw; font-weight: 600;\n }\n\n / Pose measurement overlay \u2014 animated SVG rings on result image /\n .ps-tryon-pose-overlay {\n position: absolute; inset: 0; width: 100%; height: 100%;\n pointer-events: none; z-index: 2;\n }\n @keyframes ps-pose-draw {\n to { stroke-dashoffset: 0; }\n }\n @keyframes ps-pose-fade {\n to { opacity: 1; }\n }\n @keyframes ps-dot-pulse {\n 0%, 100% { r: 8; opacity: 0.8; }\n 50% { r: 12; opacity: 1; }\n }\n\n .ps-tryon-progress-section {\n display: flex; align-items: center; gap: 0.63vw; width: 100%; max-width: 18vw; margin-bottom: 0.83vw;\n }\n / Shared progress layout used inside StageCycler (desktop) and\n MobileScanningView \u2014 row of ring + bar + percent, same tokens. /\n .ps-tryon-progress-wrap {\n display: flex; align-items: center; gap: 12px;\n / Fixed width \u2014 the parent StageCycler shrinks to fit its text content,\n so any % width would reflow the bar every 2s when the stage label\n swaps. Hard 320px keeps the ring + bar + % visually stable. /\n width: 320px;\n max-width: calc(100vw - 48px);\n margin-top: 18px;\n }\n .ps-tryon-progress-wrap .ps-tryon-progress-bar-wrap {\n flex: 1; height: 6px; border-radius: 4px; overflow: hidden;\n position: relative; background: var(--ps-border-color);\n }\n .ps-tryon-progress-wrap .ps-tryon-progress-bar-fill {\n height: 100%; width: 0%;\n background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light));\n border-radius: 4px; transition: width 0.3s ease;\n }\n .ps-tryon-progress-wrap .ps-tryon-progress-pct {\n font-size: 13px; font-weight: 700; color: var(--ps-accent);\n min-width: 36px; text-align: right;\n font-variant-numeric: tabular-nums;\n }\n .ps-tryon-progress-bar-wrap {\n flex: 1; height: 0.31vw; background: var(--ps-border-color); border-radius: 3px; overflow: hidden;\n position: relative;\n }\n .ps-tryon-progress-bar-wrap::after {\n content: \"\"; position: absolute; inset: 0;\n background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);\n transform: translateX(-100%);\n animation: ps-progress-shimmer 2s linear infinite;\n pointer-events: none;\n }\n @keyframes ps-progress-shimmer {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n .ps-tryon-progress-bar-fill {\n height: 100%; background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light));\n border-radius: 3px; transition: width 0.3s ease; width: 0%;\n position: relative; z-index: 1;\n }\n .ps-tryon-progress-pct {\n font-size: 0.68vw; font-weight: 700; color: var(--ps-accent); min-width: 1.88vw; text-align: right;\n font-variant-numeric: tabular-nums;\n }\n\n / Circular ETA ring \u2014 64\u00D764 px SVG with a track + progress circle; ETA\n text centered. strokeDashoffset is driven by the ticker in\n PrimeStyleTryonInner, so CSS only styles the appearance. /\n .ps-tryon-progress-ring {\n position: relative; width: 64px; height: 64px; flex: 0 0 64px;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-tryon-progress-ring svg { transform: rotate(-90deg); }\n .ps-tryon-progress-ring-track {\n fill: none; stroke: var(--ps-border-color); stroke-width: 5;\n }\n .ps-tryon-progress-ring-fill {\n fill: none; stroke: var(--ps-accent); stroke-width: 5;\n stroke-linecap: round;\n transition: stroke-dashoffset 0.3s ease;\n }\n .ps-tryon-progress-eta {\n position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;\n font-size: 13px; font-weight: 700; color: var(--ps-accent);\n font-variant-numeric: tabular-nums; letter-spacing: 0.01em;\n pointer-events: none;\n }\n\n @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }\n .ps-tryon-processing-text {\n font-size: 0.73vw; color: var(--ps-text-primary); margin: 0 0 0.21vw;\n opacity: 1; transition: opacity 0.18s ease;\n }\n .ps-tryon-processing-sub { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }\n\n / \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n ProcessingView v2 \u2014 split (image left ~65%,\n panel right ~35%) with engaging cards while\n the user waits 25s for the try-on to complete.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 /\n .ps-tryon-processing-v2 {\n display: flex; gap: 1.2vw;\n padding: 1.2vw;\n width: 100%; height: 100%;\n align-items: stretch;\n }\n .ps-tryon-processing-v2-image {\n flex: 0 0 62%;\n position: relative;\n border-radius: 0.6vw;\n overflow: hidden;\n background: var(--ps-bg-tertiary, #f3f4f6);\n min-height: 28vw;\n }\n .ps-tryon-processing-v2-image .ps-tryon-processing-blur,\n .ps-tryon-processing-v2-image .ps-tryon-processing-model {\n position: absolute; inset: 0;\n width: 100%; height: 100%;\n }\n .ps-tryon-processing-v2-image .ps-tryon-processing-blur {\n background-size: cover; background-position: center;\n filter: blur(40px) brightness(0.8); opacity: 0.65;\n }\n .ps-tryon-processing-v2-image .ps-tryon-processing-model {\n object-fit: contain; z-index: 1;\n }\n .ps-tryon-processing-v2-badge {\n position: absolute; top: 0.8vw; left: 0.8vw; z-index: 3;\n display: inline-flex; align-items: center; gap: 0.4vw;\n padding: 0.4vw 0.7vw;\n background: rgba(33, 84, 239, 0.10);\n color: var(--ps-accent);\n border: 1px solid rgba(33, 84, 239, 0.20);\n border-radius: 999px;\n font-size: 0.6vw; font-weight: 700;\n letter-spacing: 0.12em;\n }\n .ps-tryon-processing-v2-badge-dot {\n width: 6px; height: 6px; border-radius: 50%;\n background: var(--ps-accent);\n animation: ps-pulse-dot 1.4s ease-in-out infinite;\n }\n @keyframes ps-pulse-dot {\n 0%, 100% { opacity: 0.3; transform: scale(0.85); }\n 50% { opacity: 1; transform: scale(1.1); }\n }\n\n .ps-tryon-processing-v2-panel {\n flex: 1 1 38%;\n display: flex; flex-direction: column;\n gap: 0.9vw;\n padding: 0.6vw 0.4vw;\n min-width: 0;\n }\n .ps-tryon-processing-v2-head {\n text-align: center;\n }\n .ps-tryon-processing-v2-title {\n margin: 0;\n font-size: 1.1vw; font-weight: 700;\n color: var(--ps-text-primary);\n line-height: 1.25;\n }\n .ps-tryon-processing-v2-sub {\n margin: 0.3vw 0 0;\n font-size: 0.68vw; line-height: 1.45;\n color: var(--ps-text-secondary);\n }\n\n .ps-tryon-processing-v2-ring-wrap {\n position: relative;\n width: 180px; height: 180px;\n margin: 0.6vw auto 0;\n }\n .ps-tryon-processing-v2-ring-wrap svg {\n transform: rotate(-90deg);\n width: 180px; height: 180px;\n }\n .ps-tryon-processing-v2-ring-wrap .ps-tryon-progress-ring-track {\n fill: none; stroke: var(--ps-border-color); stroke-width: 6;\n }\n .ps-tryon-processing-v2-ring-wrap .ps-tryon-progress-ring-fill {\n fill: none; stroke: var(--ps-accent); stroke-width: 6;\n stroke-linecap: round;\n transition: stroke-dashoffset 0.3s ease;\n }\n .ps-tryon-processing-v2-ring-text {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n pointer-events: none;\n }\n .ps-tryon-processing-v2-pct {\n font-size: 34px; font-weight: 700;\n color: var(--ps-accent);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n }\n .ps-tryon-processing-v2-status {\n display: block;\n font-size: 13px; font-weight: 700;\n letter-spacing: 0.1em; text-transform: uppercase;\n color: var(--ps-text-muted);\n text-align: center;\n margin: 14px auto 0;\n line-height: 1.3;\n }\n\n .ps-tryon-processing-v2-bar-hidden {\n display: none;\n }\n\n .ps-tryon-processing-v2-sep {\n height: 1px; width: 100%;\n background: var(--ps-border-subtle, rgba(0,0,0,0.06));\n margin: 0.4vw 0 0;\n }\n\n .ps-tryon-processing-v2-section-label {\n font-size: 0.6vw; font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-muted);\n margin-bottom: 0.5vw;\n }\n .ps-tryon-processing-v2-cards {\n display: flex; flex-direction: column; gap: 0.5vw;\n }\n .ps-tryon-processing-v2-card {\n display: flex; align-items: flex-start; gap: 0.6vw;\n padding: 0.7vw 0.8vw;\n background: var(--ps-bg-secondary, #f9fafb);\n border: 1px solid var(--ps-border-subtle, rgba(0,0,0,0.06));\n border-radius: 0.55vw;\n }\n .ps-tryon-processing-v2-card-icon {\n width: 1.7vw; height: 1.7vw;\n min-width: 28px; min-height: 28px;\n display: flex; align-items: center; justify-content: center;\n border-radius: 50%;\n flex-shrink: 0;\n }\n .ps-tryon-processing-v2-card-icon.ps-style { background: rgba(33, 84, 239, 0.10); color: var(--ps-accent); }\n .ps-tryon-processing-v2-card-icon.ps-spotlight { background: rgba(168, 85, 247, 0.10); color: #9333ea; }\n .ps-tryon-processing-v2-card-icon.ps-fact { background: rgba(16, 185, 129, 0.10); color: #059669; }\n .ps-tryon-processing-v2-card-text {\n flex: 1; min-width: 0;\n }\n .ps-tryon-processing-v2-card-head {\n font-size: 0.7vw; font-weight: 700;\n color: var(--ps-text-primary);\n margin-bottom: 2px;\n }\n .ps-tryon-processing-v2-card-body {\n font-size: 0.65vw; line-height: 1.5;\n color: var(--ps-text-secondary);\n animation: ps-fade-in 0.4s ease;\n }\n @keyframes ps-fade-in {\n from { opacity: 0; transform: translateY(2px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .ps-tryon-processing-v2-cancel {\n margin-top: auto;\n background: transparent; border: none;\n color: var(--ps-text-muted);\n font-family: inherit;\n font-size: 0.68vw; font-weight: 600;\n cursor: pointer;\n padding: 0.3vw 0;\n text-align: center;\n width: 100%;\n transition: color 0.15s;\n }\n .ps-tryon-processing-v2-cancel:hover { color: var(--ps-text-primary); }\n\n / Result \u2014 split layout /\n .ps-tryon-result-split {\n display: flex; gap: 1.5vw; text-align: left; align-items: flex-start;\n }\n .ps-tryon-result-img-col {\n flex: 0 0 48%; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 0.63vw;\n }\n .ps-tryon-result-img-col img {\n width: 100%; max-height: calc(80vh - 8vw); object-fit: contain; border-radius: 0.73vw;\n box-shadow: 0 0.42vw 1.67vw rgba(0,0,0,0.3); animation: ps-scale-in 0.5s ease both;\n }\n .ps-tryon-result-dl-btn {\n display: inline-flex; align-items: center; gap: 0.31vw;\n padding: 0.36vw 0.83vw; background: transparent; border: 1px solid var(--ps-border-color);\n border-radius: 0.42vw; color: var(--ps-text-secondary); font-size: 0.68vw; font-weight: 600;\n cursor: pointer; font-family: inherit; transition: all 0.2s;\n }\n .ps-tryon-result-dl-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n .ps-tryon-result-dl-btn svg { stroke: currentColor; }\n .ps-tryon-result-info-col {\n flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1vw;\n }\n .ps-tryon-result-fit {\n display: flex; flex-direction: column; gap: 0.36vw;\n }\n .ps-tryon-result-fit-row {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.42vw 0; border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-tryon-result-fit-area { font-size: 0.78vw; font-weight: 600; color: var(--ps-text-secondary); }\n .ps-tryon-result-actions-col {\n display: flex; flex-direction: column; gap: 0.42vw; margin-top: 0.52vw;\n }\n .ps-tryon-result-startover {\n background: none; border: none; color: var(--ps-text-muted); font-size: 0.68vw;\n font-weight: 600; cursor: pointer; font-family: inherit; transition: color 0.2s;\n text-align: center;\n }\n .ps-tryon-result-startover:hover { color: var(--ps-text-secondary); }\n / Legacy result layout /\n .ps-tryon-result-layout { text-align: center; }\n .ps-tryon-result-layout img { width: 100%; border-radius: 0.63vw; margin-bottom: 0.83vw; }\n .ps-tryon-result-actions { display: flex; gap: 0.42vw; margin-top: 0.83vw; }\n .ps-tryon-result-actions button {\n flex: 1; padding: 0.63vw; font-family: var(--ps-modal-font, system-ui, sans-serif);\n font-size: 0.68vw; font-weight: 600; border-radius: 0.52vw; cursor: pointer; transition: all 0.2s; border: none;\n }\n .ps-tryon-btn-download { background: var(--ps-accent); color: #fff; }\n .ps-tryon-btn-download:hover { opacity: 0.9; }\n .ps-tryon-btn-retry { background: rgba(0,0,0,0.06); color: var(--ps-text-primary); border: 1px solid var(--ps-border-color) !important; }\n .ps-tryon-btn-retry:hover { background: rgba(0,0,0,0.08); }\n\n / \u2500\u2500 Size Result \u2500\u2500 /\n .ps-tryon-sr { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }\n .ps-tryon-sr-loading { text-align: center; padding: 3vw 0; }\n .ps-tryon-sr-loading p { font-size: 0.83vw; color: var(--ps-text-muted); margin-top: 0.6vw; }\n .ps-tryon-size-loading-spinner {\n width: 1.8vw; height: 1.8vw; border: 2px solid var(--ps-border-color);\n border-top-color: var(--ps-accent); border-radius: 50%;\n animation: ps-spin 0.7s linear infinite; margin: 0 auto;\n }\n @keyframes ps-spin { to { transform: rotate(360deg); } }\n .ps-tryon-sr-loading-pulse { animation: ps-loading-pulse 2s ease-in-out infinite; }\n @keyframes ps-loading-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }\n\n .ps-tryon-sr-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5vw; flex: 1; min-height: 0; overflow: hidden; }\n\n / Left: product image /\n .ps-tryon-sr-img-col {\n position: relative; border-radius: 0.8vw; overflow: hidden; background: transparent;\n }\n .ps-tryon-sr-product-img {\n width: 100%; height: 100%;\n object-fit: contain; object-position: center center;\n display: block; border-radius: 0.8vw;\n }\n .ps-tryon-sr-chart-btn {\n position: absolute; bottom: 1vw; left: 1vw;\n background: rgba(255,255,255,0.95); color: var(--ps-text-primary); border: none;\n padding: 0.4vw 0.8vw; border-radius: 0.3vw; font-size: 0.7vw; font-weight: 600;\n cursor: pointer; font-family: inherit; transition: all 0.2s;\n }\n .ps-tryon-sr-chart-btn:hover { background: #fff; }\n\n / Right column \u2014 scrolls independently /\n .ps-tryon-sr-right-col {\n display: flex; flex-direction: column; gap: 0.8vw;\n overflow-y: auto; min-height: 0;\n scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n }\n .ps-tryon-sr-right-fixed {\n overflow: hidden;\n }\n .ps-tryon-sr-right-scroll {\n flex: 1; min-height: 0; overflow-y: auto;\n scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n }\n\n / Size hero \u2014 big letter + label /\n .ps-tryon-sr-size-hero { display: flex; align-items: flex-start; gap: 0.8vw; }\n .ps-tryon-sr-size-letter {\n font-size: 3vw; font-weight: 800; color: var(--ps-text-primary); line-height: 1; letter-spacing: -0.02em;\n }\n .ps-tryon-sr-size-meta { display: flex; flex-direction: column; gap: 0.15vw; padding-top: 0.3vw; }\n .ps-tryon-sr-size-label { font-size: 0.65vw; font-weight: 700; color: var(--ps-text-dim); text-transform: uppercase; letter-spacing: 0.1em; }\n .ps-tryon-sr-size-label.ps-not-rec { color: var(--ps-error-color); }\n .ps-tryon-sr-edit-link {\n background: none; border: none; color: var(--ps-accent); font-size: 0.7vw; font-weight: 500;\n cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0; text-align: left;\n }\n .ps-tryon-sr-edit-link:hover { color: var(--ps-accent-light); }\n\n / Size changed /\n .ps-tryon-sr-size-changed {\n display: inline-flex; align-items: center; gap: 0.3vw;\n padding: 0.3vw 0.6vw; border-radius: 0.3vw;\n background: rgba(33,84,239,0.08); border: 1px solid rgba(33,84,239,0.2);\n font-size: 0.7vw; color: var(--ps-accent-light);\n }\n .ps-tryon-sr-size-changed svg { stroke: var(--ps-accent); }\n .ps-tryon-sr-size-changed strong { color: var(--ps-text-primary); }\n\n / Tabs /\n .ps-tryon-sr-tabs { display: flex; border-bottom: 1.5px solid var(--ps-border-color); margin-top: 3.5vh; }\n .ps-tryon-sr-tab {\n background: none; border: none; padding: 0.4vw 0.8vw; margin-bottom: -1.5px;\n font-size: 0.75vw; font-weight: 600; color: var(--ps-text-muted); cursor: pointer;\n font-family: inherit; border-bottom: 2px solid transparent; transition: all 0.2s;\n }\n .ps-tryon-sr-tab:hover { color: var(--ps-text-secondary); }\n .ps-tryon-sr-tab.ps-active { color: var(--ps-text-primary); border-bottom-color: var(--ps-accent); }\n\n / Fit list \u2014 \"Your fit\" tab /\n / \u2500\u2500 Fit table \u2500\u2500 /\n .ps-tryon-sr-fit-table {\n width: 100%; border-collapse: collapse; font-size: 0.85vw; margin-top: 0.8vw;\n }\n .ps-tryon-sr-fit-table thead th {\n font-size: 0.7vw; font-weight: 500; color: #aaa; text-transform: uppercase;\n letter-spacing: 0.05em; padding: 0.3vw 0 0.5vw; text-align: left;\n border-bottom: 1px solid var(--ps-border-color);\n }\n .ps-tryon-sr-fit-table thead th:last-child { text-align: right; }\n .ps-tryon-sr-fit-table tbody tr { border-bottom: 1px solid var(--ps-border-subtle); }\n .ps-tryon-sr-fit-table tbody tr:last-child { border-bottom: none; }\n .ps-tryon-sr-fit-table td { padding: 0.75vw 0; vertical-align: middle; color: var(--ps-text-primary); }\n .ps-tryon-sr-fit-table td:last-child { text-align: right; }\n .ps-tryon-sr-ft-area { font-weight: 600; color: var(--ps-text-primary); }\n .ps-tryon-sr-ft-you { color: var(--ps-text-primary); font-weight: 600; }\n .ps-tryon-sr-ft-garment { color: var(--ps-text-secondary); }\n .ps-tryon-sr-fit-status {\n font-size: 0.65vw; font-weight: 600; padding: 0.18vw 0.45vw; border-radius: 0.25vw;\n white-space: nowrap; display: inline-block;\n }\n .ps-tryon-sr-fit-status.ps-fit-good { color: #4ade80; background: rgba(74,222,128,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-a-bit-tight { color: #f59e0b; background: rgba(245,158,11,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-tight { color: #e87040; background: rgba(232,112,64,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-too-tight { color: #dc2626; background: rgba(220,38,38,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-a-bit-loose { color: #f59e0b; background: rgba(245,158,11,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-loose { color: #e87040; background: rgba(232,112,64,0.12); }\n .ps-tryon-sr-fit-status.ps-fit-too-loose { color: #dc2626; background: rgba(220,38,38,0.12); }\n\n / \u2500\u2500 Size guide fit list (chart tab) \u2500\u2500 /\n .ps-tryon-sr-fit-list { display: flex; flex-direction: column; gap: 0; }\n .ps-tryon-sr-fit-item {\n padding: 0.55vw 0; border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-tryon-sr-fit-item:last-child { border-bottom: none; }\n .ps-tryon-sr-fit-head {\n display: flex; justify-content: space-between; align-items: baseline;\n }\n .ps-tryon-sr-fit-area { font-size: 0.8vw; font-weight: 600; color: var(--ps-text-primary); }\n .ps-tryon-sr-fit-range { font-size: 0.8vw; font-weight: 600; color: var(--ps-text-dim); }\n .ps-tryon-sr-fit-note { font-size: 0.6vw; color: #555; margin-top: 0.5vw; text-align: center; }\n\n / \u2500\u2500 Upload photo modal (inline in size result) \u2500\u2500 /\n .ps-tryon-upload-modal-overlay {\n position: absolute; inset: 0; z-index: 20;\n background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);\n display: flex; align-items: center; justify-content: center;\n border-radius: var(--ps-modal-radius, 0.83vw);\n }\n .ps-tryon-upload-modal {\n background: var(--ps-bg-secondary); border: 1px solid var(--ps-border-color); border-radius: 0.83vw;\n padding: 1.2vw; width: 80%; max-width: 22vw;\n display: flex; flex-direction: column; gap: 0.8vw;\n }\n .ps-tryon-upload-modal-header {\n display: flex; justify-content: space-between; align-items: center;\n }\n .ps-tryon-upload-modal-header h3 {\n font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); margin: 0;\n }\n .ps-tryon-upload-modal-close {\n background: none; border: none; color: var(--ps-text-secondary); font-size: 1.2vw;\n cursor: pointer; line-height: 1; padding: 0;\n }\n .ps-tryon-upload-modal-close:hover { color: var(--ps-text-primary); }\n .ps-tryon-upload-modal-dropzone {\n border: 1.5px dashed #444; border-radius: 0.6vw; padding: 1.5vw;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 0.4vw; cursor: pointer; transition: all 0.2s; min-height: 8vw;\n }\n .ps-tryon-upload-modal-dropzone:hover { border-color: var(--ps-accent); }\n .ps-tryon-upload-modal-dropzone.ps-drag-over { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n .ps-tryon-upload-modal-dropzone svg { color: var(--ps-text-muted); }\n .ps-tryon-upload-modal-dropzone p {\n font-size: 0.75vw; color: var(--ps-text-secondary); margin: 0; font-weight: 500;\n }\n .ps-tryon-upload-modal-dropzone span {\n font-size: 0.6vw; color: var(--ps-text-muted);\n }\n .ps-tryon-upload-modal-preview {\n position: relative; border-radius: 0.6vw; overflow: hidden;\n max-height: 14vw; display: flex; align-items: center; justify-content: center;\n background: #111;\n }\n .ps-tryon-upload-modal-preview img {\n width: 100%; max-height: 14vw; object-fit: contain;\n }\n .ps-tryon-upload-modal-remove {\n position: absolute; top: 0.3vw; right: 0.3vw;\n width: 1.3vw; height: 1.3vw; border-radius: 50%;\n background: rgba(0,0,0,0.7); border: none; color: var(--ps-text-primary);\n font-size: 0.8vw; cursor: pointer; display: flex;\n align-items: center; justify-content: center;\n }\n .ps-tryon-upload-modal-remove:hover { background: #dc2626; }\n\n .ps-tryon-sr-full-chart-btn {\n display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n margin: 0.6vw auto 0; padding: 0.4vw 1vw;\n border: 1.5px solid var(--ps-border-color); border-radius: 0.4vw; background: transparent;\n color: var(--ps-text-secondary); font-size: 0.7vw; font-weight: 600; cursor: pointer;\n font-family: inherit; transition: all 0.2s;\n }\n .ps-tryon-sr-full-chart-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n\n / Chart table \u2014 \"Size guide\" tab /\n / Full-screen overlay inside the modal /\n .ps-tryon-sr-chart-overlay {\n position: absolute; inset: 0; z-index: 50;\n background: var(--ps-modal-bg, #FFFFFF);\n display: flex; flex-direction: column;\n animation: ps-fade-in 0.2s ease;\n overflow: hidden;\n }\n .ps-tryon-sr-chart-modal, .ps-tryon-guide-modal {\n display: flex; flex-direction: column;\n flex: 1; min-height: 0; width: 100%; height: 100%;\n }\n .ps-tryon-sr-chart-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.7vw 1.2vw; border-bottom: 1px solid var(--ps-border-color); flex-shrink: 0;\n }\n .ps-tryon-sr-chart-header h4 { margin: 0; font-size: 0.85vw; font-weight: 700; color: var(--ps-text-primary); }\n .ps-tryon-sr-chart-close {\n background: none; border: none; color: var(--ps-text-muted); font-size: 1.1vw; cursor: pointer; padding: 0.2vw;\n font-family: inherit; transition: color 0.2s;\n }\n .ps-tryon-sr-chart-close:hover { color: var(--ps-text-primary); }\n .ps-tryon-sr-chart-scroll { padding: 1vw 1.2vw; overflow-y: auto; flex: 1; min-height: 0; }\n\n / Photo guide \u2014 side by side /\n .ps-tryon-guide-modal { }\n .ps-tryon-guide-split {\n display: flex; flex: 1; min-height: 0; gap: 0; overflow: hidden;\n }\n .ps-tryon-guide-left {\n flex: 1; display: flex; flex-direction: column; gap: 0.6vw;\n padding: 1vw; border-right: 1px solid #282828;\n justify-content: center; min-height: 0; overflow: hidden;\n }\n .ps-tryon-guide-right {\n flex: 1; display: flex; flex-direction: column; gap: 0.6vw;\n padding: 0.8vw; overflow-y: auto; min-height: 0;\n scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n }\n .ps-tryon-guide-right::-webkit-scrollbar { width: 4px; }\n .ps-tryon-guide-right::-webkit-scrollbar-track { background: transparent; }\n .ps-tryon-guide-right::-webkit-scrollbar-thumb { background: var(--ps-border-color); border-radius: 2px; }\n\n / Upload dropzone /\n .ps-tryon-guide-dropzone {\n border: 1.5px dashed var(--ps-border-color); border-radius: 0.6vw; padding: 1.5vw 1vw;\n display: flex; flex-direction: column; align-items: center; gap: 0.3vw;\n cursor: pointer; transition: all 0.2s; text-align: center;\n }\n .ps-tryon-guide-dropzone:hover, .ps-tryon-guide-dropzone.ps-drag {\n border-color: var(--ps-accent); background: rgba(33,84,239,0.05);\n }\n .ps-tryon-guide-dropzone svg { color: #555; stroke: #555; }\n .ps-tryon-guide-dropzone-text { margin: 0; font-size: 0.9vw; color: var(--ps-text-primary); font-weight: 600; }\n .ps-tryon-guide-dropzone p { margin: 0; font-size: 0.65vw; color: var(--ps-text-secondary); font-weight: 500; }\n .ps-tryon-guide-dropzone span { font-size: 0.52vw; color: var(--ps-text-muted); }\n .ps-tryon-guide-dropzone.ps-has-file { padding: 0; cursor: default; border-style: solid; flex: 1; min-height: 0; overflow: hidden; }\n\n / Preview inside dropzone /\n .ps-tryon-guide-preview { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n .ps-tryon-guide-preview img {\n max-width: 100%; max-height: 100%; object-fit: contain;\n display: block; border-radius: 0.5vw;\n background: var(--ps-modal-bg, #FFFFFF);\n }\n .ps-tryon-guide-preview-remove {\n position: absolute; top: 0.4vw; right: 0.4vw;\n width: 1.4vw; height: 1.4vw; display: flex; align-items: center; justify-content: center;\n background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.1); border-radius: 50%;\n color: var(--ps-text-primary); font-size: 0.65vw; cursor: pointer; font-family: inherit;\n transition: all 0.2s;\n }\n .ps-tryon-guide-preview-remove:hover { background: rgba(239,68,68,0.8); }\n\n\n / Selected file row /\n .ps-tryon-guide-file {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.45vw 0.7vw; background: #222; border-radius: 0.4vw; border: 1px solid var(--ps-border-color);\n }\n .ps-tryon-guide-file-name { font-size: 0.6vw; color: var(--ps-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .ps-tryon-guide-file-remove {\n background: none; border: none; color: #e55; font-size: 0.55vw; cursor: pointer; font-family: inherit;\n padding: 0.1vw 0.3vw; transition: color 0.2s;\n }\n .ps-tryon-guide-file-remove:hover { color: #f77; }\n\n / Tips section /\n .ps-tryon-guide-tips {\n border: 1px solid #282828; border-radius: 0.5vw; overflow: hidden;\n }\n .ps-tryon-guide-tips-header {\n display: flex; align-items: center; gap: 0.4vw;\n padding: 0.5vw 0.7vw; background: #1e1f1e; font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary);\n }\n .ps-tryon-guide-tips-header svg { stroke: var(--ps-accent); }\n .ps-tryon-guide-tips-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 0;\n }\n .ps-tryon-guide-do, .ps-tryon-guide-dont { padding: 0.5vw 0.7vw; }\n .ps-tryon-guide-do { background: rgba(34,197,94,0.06); border-right: 1px solid #282828; }\n .ps-tryon-guide-dont { background: rgba(239,68,68,0.06); }\n .ps-tryon-guide-do-title { font-size: 0.68vw; font-weight: 700; color: #4ade80; display: block; margin-bottom: 0.3vw; }\n .ps-tryon-guide-dont-title { font-size: 0.68vw; font-weight: 700; color: #f87171; display: block; margin-bottom: 0.3vw; }\n .ps-tryon-guide-do ul, .ps-tryon-guide-dont ul {\n margin: 0; padding: 0 0 0 0.8vw; list-style: disc;\n }\n .ps-tryon-guide-do li, .ps-tryon-guide-dont li {\n font-size: 0.58vw; color: #bbb; line-height: 1.7;\n }\n .ps-tryon-guide-do li { color: #a7f3d0; }\n .ps-tryon-guide-dont li { color: #fca5a5; }\n\n / Quick tip /\n .ps-tryon-guide-quicktip {\n display: flex; gap: 0.4vw; padding: 0.5vw 0.7vw;\n background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 0.5vw;\n }\n .ps-tryon-guide-quicktip-icon { font-size: 0.8vw; flex-shrink: 0; }\n .ps-tryon-guide-quicktip-title { font-size: 0.68vw; font-weight: 700; color: #60a5fa; display: block; }\n .ps-tryon-guide-quicktip p { margin: 0.15vw 0 0; font-size: 0.6vw; color: #93c5fd; line-height: 1.5; }\n\n / Privacy note /\n .ps-tryon-guide-privacy {\n display: flex; gap: 0.4vw; padding: 0.5vw 0.7vw;\n background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.15); border-radius: 0.5vw;\n }\n .ps-tryon-guide-privacy-icon { font-size: 0.8vw; flex-shrink: 0; }\n .ps-tryon-guide-privacy-title { font-size: 0.68vw; font-weight: 700; color: #f87171; display: block; }\n .ps-tryon-guide-privacy p { margin: 0.15vw 0 0; font-size: 0.6vw; color: #fca5a5; line-height: 1.5; }\n\n / Section title in full chart /\n .ps-tryon-chart-section { margin-bottom: 1.2vw; }\n .ps-tryon-chart-section:last-child { margin-bottom: 0; }\n .ps-tryon-chart-section-title {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.4vw 0; margin-bottom: 0.4vw;\n border-bottom: 1px solid var(--ps-border-color); font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary);\n }\n .ps-tryon-chart-section-rec {\n font-size: 0.6vw; font-weight: 500; color: var(--ps-text-secondary);\n }\n .ps-tryon-chart-section-rec strong {\n color: var(--ps-accent); font-weight: 700; font-size: 0.7vw;\n }\n .ps-active-row td { color: var(--ps-text-primary) !important; background: rgba(33,84,239,0.1); }\n .ps-active-row .ps-size-col { color: var(--ps-accent) !important; font-weight: 700; }\n\n .ps-tryon-sr-chart-table-wrap { overflow-x: auto; max-height: 14vw; overflow-y: auto; }\n .ps-tryon-sr-chart-table { width: 100%; font-size: 0.7vw; border-collapse: collapse; }\n .ps-tryon-sr-chart-table th {\n text-align: left; padding: 0.35vw 0.5vw; color: var(--ps-text-muted); font-weight: 600;\n border-bottom: 1px solid var(--ps-border-color); position: sticky; top: 0; background: var(--ps-bg-secondary); color: var(--ps-text-primary);\n }\n .ps-tryon-sr-chart-table td { padding: 0.3vw 0.5vw; color: var(--ps-text-secondary); border-bottom: 1px solid var(--ps-border-subtle); }\n .ps-tryon-sr-chart-active td { color: var(--ps-text-primary); background: rgba(33,84,239,0.08); }\n\n / Size chips /\n .ps-tryon-sr-chips { display: flex; flex-wrap: wrap; gap: 0.4vw; justify-content: center; margin-top: 3.5vh; }\n .ps-tryon-sr-chip {\n min-width: 2.2vw; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;\n border: 1.5px solid var(--ps-border-color); border-radius: 0.4vw; background: transparent;\n color: var(--ps-text-secondary); font-size: 0.75vw; font-weight: 600; cursor: pointer;\n font-family: inherit; transition: all 0.2s; padding: 0.3vw 0.8vw; gap: 0.1vw;\n }\n .ps-tryon-sr-chip-hint { font-size: 0.58vw; font-weight: 400; color: var(--ps-text-muted); text-transform: lowercase; }\n .ps-tryon-sr-chip:hover { border-color: #555; color: var(--ps-text-secondary); }\n .ps-tryon-sr-chip.ps-active { background: var(--ps-accent); border-color: var(--ps-accent); color: #fff; }\n .ps-tryon-sr-chip.ps-active .ps-tryon-sr-chip-hint { color: #fff; }\n\n / Multi-section layout (tuxedo, suit, set products) /\n .ps-tryon-sr-split-multi { grid-template-columns: 1fr 1fr; }\n .ps-tryon-sr-img-col-small { }\n .ps-tryon-sr-multi-top {\n display: flex; align-items: center; justify-content: space-between;\n padding-bottom: 0.5vw; margin-bottom: 0.4vw;\n border-bottom: 1px solid rgba(0,0,0,0.03);\n }\n .ps-tryon-sr-multi-title {\n font-size: 0.9vw; font-weight: 300; color: var(--ps-text-primary);\n letter-spacing: 0.15em; text-transform: uppercase;\n }\n\n / \u2500\u2500 Full-width section picker \u2014 redesigned \u2500\u2500 /\n .ps-tryon-sr-picker {\n display: flex; flex-direction: column; gap: 0.6vw;\n padding: 0;\n }\n .ps-tryon-sr-picker-actions {\n display: flex; align-items: center; justify-content: flex-end; gap: 0.8vw;\n }\n\n / Card row /\n .ps-tryon-sec-row {\n display: flex; gap: 0.5vw;\n }\n .ps-tryon-sec-row-compact { flex-wrap: wrap; }\n .ps-tryon-sec-row-compact .ps-tryon-sec-bigcard { min-width: 40%; flex: 1 1 40%; }\n\n .ps-tryon-sec-bigcard {\n position: relative; overflow: hidden;\n display: flex; flex-direction: column;\n background: #0e0e0e; border: 1px solid rgba(0,0,0,0.04); border-radius: 0.7vw;\n cursor: pointer; font-family: inherit;\n text-align: center; flex: 1; min-width: 0; padding: 0;\n transition: border-color 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;\n animation: ps-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n opacity: 0;\n }\n .ps-tryon-sec-bigcard:nth-child(1) { animation-delay: 0s; }\n .ps-tryon-sec-bigcard:nth-child(2) { animation-delay: 0.08s; }\n .ps-tryon-sec-bigcard:nth-child(3) { animation-delay: 0.16s; }\n .ps-tryon-sec-bigcard:nth-child(4) { animation-delay: 0.24s; }\n @keyframes ps-card-in {\n from { opacity: 0; transform: translateY(1vw) scale(0.96); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n .ps-tryon-sec-bigcard:hover {\n border-color: var(--ps-accent);\n transform: translateY(-0.2vw) scale(1.015);\n box-shadow: 0 0.8vw 2.5vw rgba(0,0,0,0.5), 0 0 0 1px rgba(33,84,239,0.1);\n }\n .ps-tryon-sec-bigcard:not(.ps-has-img) {\n align-items: center; justify-content: center;\n padding: 1.2vw 0.8vw; min-height: 14vw; gap: 0.3vw;\n }\n\n / Image /\n .ps-tryon-sec-bigcard-bg {\n width: 100%; height: 100%; max-height: 20vw; display: block;\n object-fit: contain; object-position: center center;\n border-radius: 0.7vw 0.7vw 0 0;\n transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ps-tryon-sec-bigcard:hover .ps-tryon-sec-bigcard-bg {\n transform: scale(1.03);\n }\n\n / Gradient overlay /\n .ps-tryon-sec-bigcard-overlay {\n position: absolute; bottom: 0; left: 0; right: 0;\n height: 65%;\n background: linear-gradient(to top, #0e0e0e 0%, rgba(14,14,14,0.85) 40%, transparent 100%);\n z-index: 1;\n }\n\n / Text content /\n .ps-tryon-sec-bigcard-content {\n position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;\n display: flex; flex-direction: column; align-items: center; gap: 0.15vw;\n padding: 0.8vw 0.5vw;\n }\n\n / Fallback icon (no image) /\n .ps-tryon-sec-bigcard-icon {\n width: 2.8vw; height: 2.8vw;\n display: flex; align-items: center; justify-content: center;\n background: rgba(33,84,239,0.06); border: 1px solid rgba(33,84,239,0.12);\n border-radius: 50%;\n color: var(--ps-accent); transition: all 0.3s;\n }\n .ps-tryon-sec-bigcard:hover .ps-tryon-sec-bigcard-icon {\n background: rgba(33,84,239,0.12); border-color: rgba(33,84,239,0.25);\n transform: scale(1.06);\n }\n .ps-tryon-sec-bigcard-icon svg { stroke: currentColor; }\n\n .ps-tryon-sec-bigcard-name {\n font-size: 0.68vw; font-weight: 400; color: rgba(255,255,255,0.7);\n text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2;\n text-shadow: 0 1px 6px rgba(0,0,0,0.8);\n }\n .ps-tryon-sec-bigcard-size {\n font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);\n text-shadow: 0 2px 8px rgba(0,0,0,0.5);\n line-height: 1; letter-spacing: -0.02em;\n }\n .ps-tryon-sec-bigcard-badge {\n font-size: 0.45vw; font-weight: 600; text-transform: uppercase;\n color: var(--ps-accent); background: none;\n border: 1px solid rgba(33,84,239,0.3);\n padding: 0.12vw 0.45vw; border-radius: 2vw; letter-spacing: 0.08em;\n }\n .ps-tryon-sec-bigcard-fit {\n font-size: 0.52vw; color: rgba(255,255,255,0.45); font-weight: 400;\n letter-spacing: 0.04em;\n }\n\n / \u2500\u2500 Section detail view (drill-down from card) \u2500\u2500 /\n @keyframes ps-sec-detail-in {\n from { opacity: 0; transform: translateX(1vw); }\n to { opacity: 1; transform: translateX(0); }\n }\n .ps-tryon-sec-detail {\n display: flex; flex-direction: column; gap: 0.5vw;\n animation: ps-v2-fade 0.3s ease forwards;\n flex: 1; min-height: 0; overflow: hidden;\n }\n .ps-tryon-sec-detail-back {\n display: inline-flex; align-items: center; gap: 0.25vw;\n background: none; border: none; color: rgba(0,0,0,0.3); cursor: pointer;\n font-size: 0.6vw; font-family: inherit; padding: 0;\n transition: color 0.2s; align-self: flex-start;\n letter-spacing: 0.03em;\n }\n .ps-tryon-sec-detail-back:hover { color: var(--ps-accent); }\n .ps-tryon-sec-detail-back svg { width: 0.7vw; height: 0.7vw; stroke: currentColor; }\n .ps-tryon-sec-detail-header {\n display: flex; align-items: center; gap: 0.5vw;\n padding-bottom: 0.4vw;\n border-bottom: 1px solid rgba(0,0,0,0.04);\n }\n .ps-tryon-sec-detail-icon {\n width: 1.8vw; height: 1.8vw;\n display: flex; align-items: center; justify-content: center;\n background: rgba(33,84,239,0.08); border: 1px solid rgba(33,84,239,0.12);\n border-radius: 50%; color: var(--ps-accent);\n }\n .ps-tryon-sec-detail-icon svg { stroke: currentColor; }\n .ps-tryon-sec-detail-name {\n font-size: 0.8vw; font-weight: 400; color: var(--ps-text-primary);\n text-transform: uppercase; letter-spacing: 0.1em;\n }\n .ps-tryon-sec-detail .ps-tryon-sr-fit-table td { padding: 0.9vw 0; }\n .ps-tryon-sec-detail .ps-tryon-sr-fit-table th { padding: 0.4vw 0 0.6vw; }\n .ps-tryon-sec-detail .ps-tryon-sr-chips { gap: 0.4vw; margin: 0.3vw 0; }\n\n / Length inline selector (inside section detail) /\n .ps-tryon-sec-length-row {\n display: flex; align-items: center; gap: 0.5vw;\n padding: 0.3vw 0; border-top: 1px solid var(--ps-border-color);\n }\n .ps-tryon-sec-length-label {\n font-size: 0.62vw; font-weight: 600; color: var(--ps-text-secondary);\n text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;\n }\n\n / Reasoning /\n .ps-tryon-sr-reasoning { padding: 0.8vw; border: 1px solid var(--ps-border-color); border-radius: 0.6vw; background: var(--ps-bg-secondary); }\n .ps-tryon-sr-reasoning p { font-size: 0.75vw; color: var(--ps-text-secondary); line-height: 1.6; margin: 0; }\n\n / Result actions /\n / Image action icons \u2014 bottom-left of image /\n .ps-tryon-sr-img-actions {\n position: absolute; bottom: 0.6vw; left: 0.6vw; z-index: 3;\n display: flex; flex-direction: column; gap: 0.3vw;\n }\n .ps-tryon-sr-glass-btn {\n background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\n border: 1px solid var(--ps-border-color); border-radius: 0.45vw;\n color: var(--ps-text-primary); font-size: 0.62vw; font-weight: 700; font-family: inherit;\n padding: 0.4vw 0.8vw; cursor: pointer; transition: all 0.2s;\n white-space: nowrap; letter-spacing: 0.02em;\n display: inline-flex; align-items: center;\n }\n / When used standalone on an image (not inside actions container) /\n .ps-tryon-sr-img-col > .ps-tryon-sr-glass-btn {\n position: absolute; bottom: 0.5vw; left: 0.5vw; z-index: 3;\n }\n .ps-tryon-sr-glass-btn:hover {\n background: rgba(255,255,255,1); border-color: var(--ps-accent);\n }\n .ps-tryon-sr-glass-btn svg, .ps-tryon-sr-img-icon svg { width: 0.65vw; height: 0.65vw; }\n .ps-tryon-sr-img-icon {\n display: inline-flex; align-items: center; gap: 0.3vw;\n padding: 0.35vw 0.7vw;\n background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\n border: 1px solid var(--ps-border-color); border-radius: 0.4vw;\n color: var(--ps-text-primary); font-size: 0.6vw; font-weight: 600; font-family: inherit;\n cursor: pointer; transition: all 0.2s; white-space: nowrap;\n }\n .ps-tryon-sr-img-icon:hover { background: #fff; border-color: var(--ps-accent); color: var(--ps-accent); }\n\n / See fit visually \u2014 below size chips /\n .ps-tryon-sr-visual-btn {\n display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n width: 100%; padding: 0.5vw; margin-top: 0.3vw;\n background: transparent; border: 1px solid var(--ps-border-color); border-radius: 0.5vw;\n color: var(--ps-text-secondary); font-size: 0.7vw; font-weight: 600; cursor: pointer;\n font-family: inherit; transition: all 0.2s;\n }\n .ps-tryon-sr-visual-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n .ps-tryon-sr-visual-btn svg { stroke: currentColor; }\n\n / Dark overlay behind SVG lines /\n .ps-tryon-pose-overlay {\n position: absolute; inset: 0; z-index: 1;\n background: rgba(0,0,0,0.35);\n animation: ps-fade-in 0.4s ease both;\n border-radius: inherit;\n }\n\n / SVG pose overlay /\n .ps-tryon-pose-svg {\n position: absolute; inset: 0; width: 100%; height: 100%;\n pointer-events: none; z-index: 2;\n }\n\n / Dotted curved line \u2014 draws in smoothly /\n .ps-tryon-pose-line {\n stroke-dashoffset: 80;\n animation: ps-pose-draw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n / HTML pill labels \u2014 positioned absolutely on the image /\n .ps-tryon-pose-pill {\n position: absolute; z-index: 3; transform: translateY(-50%);\n display: flex; align-items: center; gap: 0.4vw;\n background: rgba(15,15,15,0.85); backdrop-filter: blur(6px);\n border-radius: 0.5vw; padding: 0.35vw 0.6vw;\n opacity: 0;\n animation: ps-pose-pill-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n .ps-tryon-pose-pill-dot {\n width: 0.5vw; height: 0.5vw; border-radius: 50%; flex-shrink: 0;\n }\n .ps-tryon-pose-pill-text { display: flex; flex-direction: column; gap: 0.05vw; }\n .ps-tryon-pose-pill-name {\n font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary); line-height: 1.2;\n font-family: system-ui, -apple-system, sans-serif;\n }\n .ps-tryon-pose-pill-fit {\n font-size: 0.6vw; font-weight: 600; line-height: 1.2;\n font-family: system-ui, -apple-system, sans-serif;\n }\n\n @keyframes ps-pose-draw {\n from { stroke-dashoffset: 80; opacity: 0; }\n 10% { opacity: 1; }\n to { stroke-dashoffset: 0; opacity: 1; }\n }\n @keyframes ps-pose-pill-in {\n from { opacity: 0; transform: translateX(-2px); }\n to { opacity: 1; transform: translateX(0); }\n }\n .ps-tryon-sr-cta {\n width: 100%; padding: 0.7vw;\n background: var(--ps-accent); color: #0a0a0a;\n border: none; border-radius: 0.4vw;\n font-size: 0.75vw; font-weight: 700; cursor: pointer;\n font-family: inherit; letter-spacing: 0.1em; text-transform: uppercase;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-top: auto;\n display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n }\n .ps-tryon-sr-cta:hover {\n background: var(--ps-accent-light);\n box-shadow: 0 0.3vw 1.5vw rgba(33,84,239,0.25);\n transform: translateY(-1px);\n }\n\n / Size chip recommended dot /\n .ps-tryon-sr-chip { position: relative; }\n .ps-tryon-sr-rec-dot {\n position: absolute; bottom: -0.3vw; left: 50%; transform: translateX(-50%);\n width: 0.35vw; height: 0.35vw; border-radius: 50%; background: var(--ps-accent);\n }\n .ps-tryon-sr-chip.ps-active .ps-tryon-sr-rec-dot { background: #fff; }\n .ps-tryon-sr-chip.ps-recommended { border-color: var(--ps-accent); }\n\n / \u2500\u2500 Full Size Chart Overlay \u2500\u2500 /\n .ps-tryon-fc-overlay {\n position: absolute; inset: 0; z-index: 10;\n background: #111211;\n display: flex; flex-direction: column;\n animation: ps-fade-in 0.2s ease;\n }\n @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }\n .ps-tryon-fc-panel {\n background: #111211;\n width: 100%; height: 100%; overflow: hidden;\n display: flex; flex-direction: column;\n }\n .ps-tryon-fc-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.8vw 1.2vw; border-bottom: 1px solid #282828;\n }\n .ps-tryon-fc-title {\n font-size: 0.8vw; font-weight: 700; color: var(--ps-text-primary);\n letter-spacing: 0.12em; margin: 0;\n }\n .ps-tryon-fc-close {\n background: none; border: none; color: var(--ps-text-muted); font-size: 1.4vw;\n cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s;\n }\n .ps-tryon-fc-close:hover { color: var(--ps-text-primary); }\n\n / Your measurements bar /\n .ps-tryon-fc-measures {\n padding: 0.7vw 1.2vw; background: #1a1a1a; border-bottom: 1px solid #282828;\n }\n .ps-tryon-fc-measures-label {\n display: flex; align-items: center; gap: 0.5vw;\n font-size: 0.6vw; font-weight: 700; color: var(--ps-text-dim);\n letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4vw;\n }\n .ps-tryon-fc-measures-vals {\n display: flex; gap: 1.5vw;\n }\n .ps-tryon-fc-measures-val { font-size: 0.9vw; color: var(--ps-text-secondary); }\n .ps-tryon-fc-measures-val strong { font-weight: 700; color: var(--ps-text-primary); margin-right: 0.15vw; }\n .ps-tryon-fc-measures-val span { font-size: 0.65vw; color: var(--ps-text-muted); }\n\n / Full table /\n .ps-tryon-fc-table-wrap {\n flex: 1; overflow: auto; padding: 0.5vw 1.2vw 1.2vw;\n }\n .ps-tryon-fc-table {\n width: 100%; border-collapse: collapse; font-size: 0.75vw;\n }\n .ps-tryon-fc-table th {\n text-align: center; padding: 0.5vw 0.6vw;\n font-size: 0.6vw; font-weight: 700; color: var(--ps-text-muted);\n text-transform: uppercase; letter-spacing: 0.06em;\n border-bottom: 1.5px solid var(--ps-border-color);\n }\n .ps-tryon-fc-table th:first-child { text-align: left; }\n .ps-tryon-fc-table td {\n text-align: center; padding: 0.45vw 0.6vw;\n color: var(--ps-text-secondary); border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-tryon-fc-table td:first-child { text-align: left; font-weight: 600; color: var(--ps-text-secondary); }\n .ps-tryon-fc-rec-row td { color: var(--ps-text-primary); font-weight: 600; background: rgba(33,84,239,0.05); }\n .ps-tryon-fc-rec-pill {\n display: inline-flex; align-items: center; justify-content: center;\n background: #fff; color: var(--ps-text-primary); padding: 0.15vw 0.5vw;\n border-radius: 1vw; font-weight: 800; font-size: 0.7vw;\n }\n\n .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: var(--ps-accent); } .ps-conf-low { color: var(--ps-error-color); }\n .ps-tryon-size-compact { padding: 0.5vw 0; }\n .ps-tryon-size-compact-label { font-size: 0.78vw; color: var(--ps-text-secondary); font-weight: 500; }\n\n / Save profile prompt /\n .ps-tryon-save-prompt { margin-top: 0.73vw; padding: 0.73vw; border: 1px solid var(--ps-border-color); border-radius: 0.63vw; background: var(--ps-bg-secondary); }\n .ps-tryon-save-label { font-size: 0.63vw; color: var(--ps-text-secondary); margin-bottom: 0.52vw; }\n .ps-tryon-save-row { display: flex; gap: 0.42vw; }\n .ps-tryon-save-row input {\n flex: 1; padding: 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n background: #111211; color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit; outline: none;\n }\n .ps-tryon-save-row input:focus { border-color: var(--ps-accent); }\n .ps-tryon-save-row button {\n padding: 0.52vw 1.04vw; background: var(--ps-accent); color: #fff; border: none; border-radius: 0.52vw;\n font-size: 0.68vw; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;\n }\n .ps-tryon-save-row button:hover { opacity: 0.9; }\n .ps-tryon-save-btn-group { display: flex; gap: 0.31vw; }\n .ps-tryon-save-new-btn { background: transparent !important; border: 1.5px solid var(--ps-accent) !important; color: var(--ps-accent) !important; }\n .ps-tryon-save-new-btn:hover { background: rgba(33,84,239,0.1) !important; }\n .ps-tryon-save-done { font-size: 0.63vw; color: #4ade80; margin-top: 0.52vw; display: flex; align-items: center; gap: 0.31vw; justify-content: center; }\n .ps-tryon-save-done svg { stroke: currentColor; }\n\n / Error /\n .ps-tryon-error { text-align: center; padding: 1.25vw; display: flex; flex-direction: column; align-items: center; }\n .ps-tryon-error svg { color: var(--ps-error-color); margin-bottom: 0.63vw; }\n .ps-tryon-error-text { font-size: 0.73vw; color: var(--ps-error-color); margin: 0 0 0.83vw; }\n\n / \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n NoChartView \u2014 empty state when the merchant\n hasn't uploaded a size chart for this product.\n Desktop: split (image left, panel right).\n Mobile: stacked (image top, panel bottom).\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 /\n / Right-column content wrapper \u2014 sits inside the existing\n .ps-tryon-sr-right-col so the modal width/height matches every other\n size-result screen. Only the column content swaps; the modal frame\n does not resize. /\n .ps-tryon-no-chart-right-col {\n align-items: flex-start; justify-content: center;\n gap: 0.8vw;\n }\n .ps-tryon-no-chart-content {\n display: flex; flex-direction: column;\n align-items: flex-start; justify-content: center;\n gap: 0.8vw;\n padding: 0.6vw 1vw;\n min-width: 0;\n }\n .ps-tryon-no-chart-icon {\n width: 3.2vw; height: 3.2vw;\n min-width: 48px; min-height: 48px;\n display: flex; align-items: center; justify-content: center;\n border-radius: 50%;\n background: var(--ps-bg-tertiary, #f3f4f6);\n color: var(--ps-text-secondary);\n }\n .ps-tryon-no-chart-icon svg {\n width: 60%; height: 60%;\n }\n .ps-tryon-no-chart-title {\n font-size: 1.1vw; font-weight: 700;\n color: var(--ps-text-primary);\n margin: 0;\n line-height: 1.25;\n }\n .ps-tryon-no-chart-msg {\n font-size: 0.72vw; line-height: 1.55;\n color: var(--ps-text-secondary);\n margin: 0;\n }\n .ps-tryon-no-chart-actions {\n display: flex; flex-direction: column;\n align-items: stretch; gap: 0.5vw;\n width: 100%; max-width: 22vw;\n margin-top: 0.4vw;\n }\n .ps-tryon-no-chart-cta {\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: 0.5vw;\n padding: 0.8vw 1vw;\n font-family: inherit;\n font-size: 0.78vw; font-weight: 700;\n letter-spacing: 0.04em;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n }\n .ps-tryon-no-chart-cta:active { transform: scale(0.99); opacity: 0.94; }\n .ps-tryon-no-chart-secondary {\n background: transparent; color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color);\n border-radius: 0.5vw;\n padding: 0.7vw 1vw;\n font-family: inherit;\n font-size: 0.7vw; font-weight: 600;\n cursor: pointer;\n transition: background 0.15s;\n }\n .ps-tryon-no-chart-secondary:hover { background: var(--ps-bg-secondary); }\n\n / Footer /\n .ps-tryon-powered { text-align: center; padding: 0.63vw 1.25vw 0.83vw; font-size: 0.57vw; color: var(--ps-text-muted); }\n .ps-tryon-powered a { color: var(--ps-accent); text-decoration: none; }\n .ps-tryon-powered a:hover { text-decoration: underline; }\n\n / Drawer /\n .ps-tryon-drawer {\n position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #FFFFFF);\n overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 1.04vw 1.25vw;\n transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);\n box-sizing: border-box;\n }\n .ps-tryon-drawer-open { transform: translateX(0); }\n .ps-tryon-drawer-header { display: flex; align-items: center; gap: 0.52vw; padding-bottom: 0.73vw; margin-bottom: 0.73vw; border-bottom: 1px solid var(--ps-border-color); }\n .ps-tryon-drawer-back {\n width: 1.67vw; height: 1.67vw; display: flex; align-items: center; justify-content: center;\n border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: transparent;\n cursor: pointer; color: var(--ps-text-secondary); transition: all 0.2s; flex-shrink: 0;\n }\n .ps-tryon-drawer-back:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n .ps-tryon-drawer-title { font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); flex: 1; }\n .ps-tryon-drawer-add-btn {\n width: 1.6vw; height: 1.6vw; display: flex; align-items: center; justify-content: center;\n border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw; background: transparent;\n color: var(--ps-accent); font-size: 1vw; font-weight: 600; cursor: pointer;\n font-family: inherit; transition: all 0.2s; flex-shrink: 0; line-height: 1;\n }\n .ps-tryon-drawer-add-btn:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.1); }\n .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 0.52vw; max-width: 100%; overflow-x: hidden; }\n .ps-tryon-drawer-empty { text-align: center; padding: 1.67vw 0.83vw; color: var(--ps-text-muted); font-size: 0.73vw; }\n\n / Profile items /\n .ps-tryon-profile-item {\n display: flex; align-items: center; gap: 0.63vw; padding: 0.73vw;\n border: 1px solid var(--ps-border-color); border-radius: 0.63vw; cursor: pointer; transition: all 0.2s;\n }\n .ps-tryon-profile-item:hover { border-color: var(--ps-accent); }\n .ps-tryon-profile-avatar {\n width: 2.08vw; height: 2.08vw; border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n background: rgba(33,84,239,0.1); flex-shrink: 0;\n }\n .ps-tryon-profile-avatar svg { stroke: var(--ps-accent); fill: none; }\n .ps-tryon-profile-info { flex: 1; min-width: 0; }\n .ps-tryon-profile-name { font-size: 0.73vw; font-weight: 600; color: var(--ps-text-primary); }\n .ps-tryon-profile-detail { font-size: 0.57vw; color: var(--ps-text-secondary); margin-top: 2px; }\n .ps-tryon-profile-item > svg:last-child { color: var(--ps-text-muted); flex-shrink: 0; transition: color 0.2s; }\n .ps-tryon-profile-item:hover > svg:last-child { color: var(--ps-accent); }\n\n / History items /\n .ps-tryon-history-item {\n display: flex; gap: 0.73vw; padding: 0.73vw;\n border: 1px solid var(--ps-border-color); border-radius: 0.63vw; align-items: flex-start; transition: all 0.2s;\n }\n .ps-tryon-history-item:hover { border-color: var(--ps-accent); box-shadow: 0 0.21vw 0.63vw rgba(33,84,239,0.06); }\n .ps-tryon-history-images { display: flex; gap: 0.42vw; flex-shrink: 0; }\n .ps-tryon-history-thumb { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; }\n .ps-tryon-history-info { flex: 1; min-width: 0; }\n .ps-tryon-history-product { font-size: 0.68vw; font-weight: 600; color: var(--ps-text-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }\n .ps-tryon-history-meta { font-size: 0.57vw; color: var(--ps-text-muted); margin-top: 3px; }\n .ps-tryon-history-sizing { display: flex; align-items: center; gap: 0.42vw; margin-top: 0.31vw; }\n .ps-tryon-history-sizing-reason { font-size: 0.57vw; color: var(--ps-text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }\n .ps-tryon-history-size-badge {\n flex-shrink: 0; width: 2.08vw; height: 2.08vw; border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-light));\n color: #fff; font-size: 0.68vw; font-weight: 700;\n }\n .ps-tryon-history-result-img { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; border: 2px solid var(--ps-accent); }\n .ps-tryon-history-delete {\n width: 1.46vw; height: 1.46vw; display: flex; align-items: center; justify-content: center;\n border: none; background: transparent; cursor: pointer; color: var(--ps-text-muted); border-radius: 0.31vw; transition: all 0.2s; flex-shrink: 0;\n }\n .ps-tryon-history-delete:hover { background: rgba(239,68,68,0.1); color: var(--ps-error-color); }\n .ps-tryon-history-delete svg { stroke: currentColor; fill: none; }\n .ps-tryon-history-clickable { cursor: pointer; }\n .ps-tryon-history-sections { display: flex; flex-wrap: wrap; gap: 0.3vw; margin-top: 0.31vw; }\n .ps-tryon-history-section-chip {\n font-size: 0.55vw; font-weight: 600; color: var(--ps-text-primary); background: rgba(33,84,239,0.18);\n border: 1px solid rgba(33,84,239,0.3); border-radius: 0.3vw; padding: 0.15vw 0.4vw;\n }\n .ps-tryon-history-tryon-badge {\n display: inline-block; font-size: 0.5vw; font-weight: 600; color: var(--ps-accent);\n background: rgba(33,84,239,0.12); border: 1px solid rgba(33,84,239,0.25);\n border-radius: 0.25vw; padding: 0.1vw 0.35vw; margin-top: 0.25vw;\n }\n\n / Quiz view /\n .ps-tryon-quiz-progress { display: flex; gap: 0.4vw; margin-bottom: 1vw; }\n .ps-tryon-quiz-progress-dot {\n width: 1.5vw; height: 0.2vw; border-radius: 0.1vw;\n background: var(--ps-border-color); transition: background 0.3s;\n }\n .ps-tryon-quiz-progress-dot.ps-active { background: var(--ps-accent); }\n .ps-tryon-quiz-basics { display: flex; flex-direction: column; gap: 1.2vw; width: 100%; }\n .ps-tryon-quiz-options { display: flex; flex-direction: column; gap: 0.5vw; width: 100%; }\n .ps-tryon-quiz-options.ps-tryon-quiz-row { flex-direction: row; }\n .ps-tryon-quiz-option {\n display: flex; flex-direction: column; gap: 0.15vw;\n padding: 0.7vw 1vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.5vw;\n background: transparent; color: var(--ps-text-primary); cursor: pointer;\n font-family: inherit; text-align: left; transition: all 0.2s;\n flex: 1;\n }\n .ps-tryon-quiz-option:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n .ps-tryon-quiz-option.ps-active { border-color: var(--ps-accent); background: rgba(33,84,239,0.12); }\n .ps-tryon-quiz-option-label { font-size: 0.8vw; font-weight: 600; }\n .ps-tryon-quiz-option-desc { font-size: 0.6vw; color: var(--ps-text-secondary); }\n\n / Profile edit view /\n .ps-tryon-profile-edit { display: flex; flex-direction: column; gap: 1.2vw; width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; padding: 0.3vw 0.5vw; flex: 1; }\n .ps-tryon-pe-row {\n display: flex; align-items: center; gap: 0.8vw;\n }\n .ps-tryon-pe-pill {\n display: inline-flex; border: 1px solid var(--ps-border-color); border-radius: 1.2vw; overflow: hidden;\n }\n .ps-tryon-pe-pill-btn {\n padding: 0.35vw 0.9vw; background: transparent; border: none;\n color: var(--ps-text-muted); font-size: 0.62vw; font-weight: 600; cursor: pointer;\n font-family: inherit; transition: all 0.15s; white-space: nowrap; line-height: 1.2;\n }\n .ps-tryon-pe-pill-btn.ps-active { background: var(--ps-accent); color: #fff; }\n .ps-tryon-pe-pill-btn:not(.ps-active):hover { color: var(--ps-text-secondary); background: rgba(0,0,0,0.03); }\n .ps-tryon-pe-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw 1.6vw; width: 100%; box-sizing: border-box; }\n .ps-tryon-pe-fields .ps-tryon-sf-float-field {\n min-width: 0; padding: 0.15vw 0.4vw;\n display: flex; align-items: center; gap: 0.6vw;\n }\n .ps-tryon-pe-fields .ps-tryon-sf-float-label {\n flex-shrink: 0; margin: 0; white-space: nowrap;\n font-size: 0.62vw; color: var(--ps-text-secondary);\n }\n .ps-tryon-pe-fields .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label { color: var(--ps-accent); }\n .ps-tryon-pe-fields .ps-tryon-sf-input {\n flex: 1; min-width: 0; padding: 0.3vw 0; font-size: 0.78vw;\n }\n .ps-tryon-pe-error {\n font-size: 0.62vw; color: var(--ps-error-color); font-weight: 500; text-align: center;\n padding: 0.3vw 0.6vw; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);\n border-radius: 0.4vw;\n }\n .ps-tryon-pe-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.8vw; margin-top: auto; padding-top: 1.2vw; }\n .ps-tryon-pe-actions .ps-tryon-est-back { font-size: 0.65vw; }\n .ps-tryon-pe-save {\n padding: 0.45vw 1.2vw; background: var(--ps-accent); color: #fff; border: none;\n border-radius: 0.4vw; font-size: 0.65vw; font-weight: 600; cursor: pointer;\n font-family: inherit; letter-spacing: 0.06em; text-transform: uppercase;\n display: inline-flex; align-items: center; gap: 0.3vw;\n }\n .ps-tryon-pe-save:hover { opacity: 0.85; }\n .ps-tryon-drawer-create {\n width: 100%; padding: 0.6vw; margin-bottom: 0.5vw;\n background: transparent; border: 1.5px dashed var(--ps-border-color);\n border-radius: 0.5vw; color: var(--ps-accent); font-size: 0.73vw;\n font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s;\n display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n }\n .ps-tryon-drawer-create:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n .ps-tryon-drawer-clear {\n background: none; border: none; color: var(--ps-text-muted); font-size: 0.6vw;\n font-weight: 500; cursor: pointer; font-family: inherit; padding: 0.3vw 0;\n transition: color 0.2s; align-self: center;\n }\n .ps-tryon-drawer-clear:hover { color: var(--ps-error-color); }\n\n / Profile detail modal \u2014 portaled to body, sits ABOVE the main modal\n overlay (which has z-index 2147483647). Equal z-index + later DOM\n order means this stacks on top. Same trick as the language dropdown. /\n .ps-tryon-detail-overlay {\n position: fixed; inset: 0; background: rgba(0,0,0,0.55);\n display: flex; align-items: center; justify-content: center;\n z-index: 2147483647; padding: 0.83vw; animation: ps-fade-in 0.2s ease;\n isolation: isolate;\n --ps-accent: #3B82F6;\n --ps-accent-hover: #2563EB;\n --ps-text-primary: #1C1D1E;\n --ps-text-secondary: #454545;\n --ps-text-muted: #84898C;\n --ps-border-color: #E7E7E7;\n --ps-border-subtle: #F0F0F0;\n --ps-bg-primary: #FFFFFF;\n --ps-bg-secondary: #F8FAFF;\n --ps-error-color: #E7000B;\n }\n .ps-tryon-detail-modal {\n background: var(--ps-bg-primary); border-radius: 14px; width: 100%; max-width: 480px; max-height: 85vh;\n overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;\n font-family: var(--ps-modal-font, system-ui, sans-serif); color: var(--ps-text-primary);\n }\n .ps-tryon-detail-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.94vw 1.25vw; border-bottom: 1px solid var(--ps-border-color);\n }\n .ps-tryon-detail-header span { font-size: 0.78vw; font-weight: 600; }\n .ps-tryon-detail-header button { background: none; border: none; color: var(--ps-text-secondary); cursor: pointer; display: flex; align-items: center; border-radius: 0.31vw; padding: 0.21vw; transition: background 0.15s; }\n .ps-tryon-detail-header button:hover { background: rgba(0,0,0,0.06); }\n .ps-tryon-detail-body { padding: 1.04vw 1.25vw; }\n .ps-tryon-detail-gender { display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; font-weight: 600; padding-bottom: 0.73vw; border-bottom: 1px solid var(--ps-border-color); margin-bottom: 0.73vw; }\n .ps-tryon-detail-gender svg { stroke: var(--ps-accent); fill: none; }\n .ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.52vw; margin-bottom: 0.83vw; }\n .ps-tryon-detail-cell { background: var(--ps-bg-secondary); border-radius: 0.52vw; padding: 0.63vw 0.73vw; }\n .ps-tryon-detail-cell-label { font-size: 0.57vw; color: var(--ps-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.21vw; }\n .ps-tryon-detail-cell-value { font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); }\n .ps-tryon-detail-date { font-size: 0.57vw; color: var(--ps-text-muted); text-align: center; margin-top: 0.42vw; }\n .ps-tryon-detail-delete {\n width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.31vw;\n padding: 0.63vw; border: 1px solid var(--ps-border-color); border-radius: 0.52vw; background: none;\n color: var(--ps-error-color); font-size: 0.68vw; font-weight: 500; cursor: pointer; transition: all 0.2s;\n font-family: inherit; margin-top: 0.83vw;\n }\n .ps-tryon-detail-delete:hover { background: rgba(239,68,68,0.06); border-color: var(--ps-error-color); }\n .ps-tryon-detail-delete svg { stroke: currentColor; fill: none; }\n\n / \u2500\u2500 Accessory sizing views (foot / head / face) \u2500\u2500 /\n .ps-acc-diagram { display: flex; justify-content: center; margin: max(10px, 0.8vw) 0; }\n .ps-acc-field { margin: max(8px, 0.7vw) 0; }\n .ps-acc-label {\n display: block;\n font-size: max(11px, 0.72vw);\n font-weight: 600;\n color: var(--ps-text-secondary);\n margin-bottom: max(4px, 0.3vw);\n }\n .ps-acc-input {\n width: 100%;\n padding: max(8px, 0.55vw) max(10px, 0.7vw);\n border: 1.5px solid var(--ps-border-color);\n border-radius: max(6px, 0.42vw);\n font-size: max(14px, 0.9vw);\n background: var(--ps-bg-secondary);\n color: var(--ps-text-primary);\n outline: none;\n transition: border-color 0.15s;\n box-sizing: border-box;\n font-family: inherit;\n }\n .ps-acc-input:focus { border-color: var(--ps-accent); }\n .ps-acc-hint { font-size: max(10px, 0.62vw); color: var(--ps-text-muted); margin-top: max(3px, 0.25vw); }\n .ps-acc-error { font-size: max(10px, 0.65vw); color: var(--ps-error-color); margin-top: max(3px, 0.25vw); font-weight: 500; }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Mobile (\u2264768px) \u2014 full-screen drawer, bigger touch targets,\n px-based sizing (vw becomes sub-pixel and unreadable on phones)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n @media (max-width: 768px) {\n / ProcessingView v2 mobile \u2014 stack: image on top (max 38vh), then\n * the progress + cards panel below. /\n .ps-tryon-processing-v2 {\n flex-direction: column !important;\n gap: 12px !important;\n padding: 12px !important;\n height: auto !important;\n }\n .ps-tryon-processing-v2-image {\n flex: 0 0 auto !important;\n width: 100% !important;\n height: 38vh !important; min-height: 280px !important;\n border-radius: 12px !important;\n }\n .ps-tryon-processing-v2-badge {\n top: 10px !important; left: 10px !important;\n padding: 5px 10px !important; gap: 6px !important;\n font-size: 10px !important;\n }\n .ps-tryon-processing-v2-panel {\n gap: 12px !important; padding: 4px 6px !important;\n }\n .ps-tryon-processing-v2-title { font-size: 17px !important; }\n .ps-tryon-processing-v2-sub { font-size: 12px !important; margin-top: 4px !important; }\n .ps-tryon-processing-v2-ring-wrap { width: 150px !important; height: 150px !important; }\n .ps-tryon-processing-v2-ring-wrap svg { width: 150px !important; height: 150px !important; }\n .ps-tryon-processing-v2-pct { font-size: 28px !important; }\n .ps-tryon-processing-v2-status { font-size: 12px !important; max-width: none !important; margin-top: 12px !important; }\n .ps-tryon-processing-v2-section-label { font-size: 10px !important; margin-bottom: 8px !important; }\n .ps-tryon-processing-v2-cards { gap: 8px !important; }\n .ps-tryon-processing-v2-card { padding: 10px 12px !important; gap: 10px !important; border-radius: 10px !important; }\n .ps-tryon-processing-v2-card-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }\n .ps-tryon-processing-v2-card-head { font-size: 12px !important; }\n .ps-tryon-processing-v2-card-body { font-size: 11px !important; }\n .ps-tryon-processing-v2-cancel { font-size: 12px !important; padding: 8px 0 !important; }\n\n / NoChartView mobile \u2014 content centered, sized like other mobile screens. /\n .ps-tryon-no-chart-right-col,\n .ps-tryon-no-chart-content {\n align-items: center !important; text-align: center !important;\n gap: 12px !important;\n padding: 4px 12px !important;\n }\n .ps-tryon-no-chart-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; }\n .ps-tryon-no-chart-icon svg { width: 28px !important; height: 28px !important; }\n .ps-tryon-no-chart-title { font-size: 18px !important; text-align: center !important; }\n .ps-tryon-no-chart-msg { font-size: 13px !important; text-align: center !important; max-width: 360px !important; margin: 0 auto !important; }\n .ps-tryon-no-chart-actions { max-width: 320px !important; gap: 10px !important; margin-top: 4px !important; }\n .ps-tryon-no-chart-cta { padding: 14px 18px !important; font-size: 13px !important; border-radius: 10px !important; }\n .ps-tryon-no-chart-secondary { padding: 12px 18px !important; font-size: 12px !important; border-radius: 10px !important; }\n\n / \u2500\u2500 Trigger button: minimum 44px touch target, readable text \u2500\u2500 /\n .ps-tryon-btn {\n padding: max(12px, 3vw) max(20px, 5vw); font-size: max(14px, 3.6vw); gap: max(8px, 2vw);\n border-radius: max(8px, 2vw); min-height: 44px;\n }\n .ps-tryon-btn svg { width: var(--ps-btn-icon-size, max(24px, 7vw)); height: var(--ps-btn-icon-size, max(24px, 7vw)); }\n\n / \u2500\u2500 Overlay: full screen, no centering, slide-up drawer feel \u2500\u2500 /\n .ps-tryon-overlay {\n padding: 0 !important;\n align-items: stretch !important; justify-content: stretch !important;\n overflow: hidden !important;\n }\n\n / \u2500\u2500 Modal: occupies entire viewport as a drawer \u2500\u2500 /\n .ps-tryon-modal,\n .ps-tryon-modal-wide {\n max-width: 100vw !important; max-width: 100dvw !important;\n max-height: 100vh !important; max-height: 100dvh !important;\n width: 100vw !important; width: 100dvw !important;\n height: 100vh !important; height: 100dvh !important;\n min-height: 100vh !important; min-height: 100dvh !important;\n border-radius: 0 !important; box-shadow: none !important;\n margin: 0 !important;\n display: flex !important; flex-direction: column !important;\n overflow: hidden !important;\n animation: ps-mobile-slide-up 0.32s cubic-bezier(0.32, 0.72, 0, 1);\n padding-top: env(safe-area-inset-top);\n padding-bottom: env(safe-area-inset-bottom);\n padding-left: env(safe-area-inset-left);\n padding-right: env(safe-area-inset-right);\n }\n .ps-tryon-modal > :last-child { flex: 1; min-height: 0; }\n\n / \u2500\u2500 Header: bigger touch targets, fixed top \u2500\u2500 /\n .ps-tryon-header {\n border-radius: 0 !important;\n padding: 2.5vw 3.6vw !important;\n flex-shrink: 0;\n background: var(--ps-modal-header-bg, rgba(255,255,255,0.95)) !important;\n }\n / Mobile header icons: minimal flat glyphs, vertical hairline separators\n * between adjacent icons (skip the first one). 24 px tap target keeps\n * accessibility while the icon glyph shrinks to 14 px. /\n .ps-tryon-header-icon {\n width: 24px !important; height: 24px !important;\n border: none !important; background: transparent !important;\n border-radius: 0 !important; padding: 0 !important;\n }\n .ps-tryon-header-icon svg { width: 14px !important; height: 14px !important; }\n .ps-tryon-close {\n width: 24px !important; height: 24px !important;\n border: none !important; background: transparent !important;\n border-radius: 0 !important;\n }\n .ps-tryon-close svg { width: 16px !important; height: 16px !important; }\n .ps-tryon-lang-trigger {\n border: none !important; background: transparent !important;\n border-radius: 0 !important;\n padding: 0 6px !important; min-height: 24px !important;\n gap: 3px !important;\n }\n .ps-tryon-lang-trigger:hover, .ps-tryon-lang-trigger.ps-active {\n background: transparent !important;\n }\n .ps-tryon-lang-trigger svg { width: 12px !important; height: 12px !important; }\n .ps-tryon-lang-current { font-size: 11px !important; }\n .ps-tryon-header-actions { gap: 0 !important; align-items: center !important; }\n / Hairline separator between adjacent header icons (skip the very first). /\n .ps-tryon-header-actions > + * {\n position: relative !important;\n padding-left: 8px !important;\n margin-left: 8px !important;\n }\n .ps-tryon-header-actions > * + ::before {\n content: \"\" !important;\n position: absolute !important;\n left: 0 !important; top: 25% !important; bottom: 25% !important;\n width: 1px !important;\n background: var(--ps-border-subtle) !important;\n }\n\n / Mobile body-measurements step \u2014 single-page fit on iPhone (svh).\n * Layout rhythm: title \u2192 3 sliders (compact) \u2192 \"or\" \u2192 upload card \u2192\n * Next (sticky bottom) \u2192 tabs (sticky bottom).\n * No big spacer between upload card and Next: the upload card now feels\n * like the second action in the same group, both reading as primary\n * choices side-by-side vertically. /\n .ps-bpm-title { font-size: 17px !important; line-height: 1.2 !important; margin: 0 !important; }\n .ps-bpm-subtitle { display: none !important; }\n .ps-bpm-header { margin-bottom: 6px !important; padding: 0 !important; }\n .ps-bpm-fields { margin-top: 2px !important; }\n .ps-bpm-row { padding: 10px 0 !important; gap: 8px !important; }\n .ps-bpm-label { font-size: 10.5px !important; letter-spacing: 0.1em !important; }\n .ps-bpm-value-display { font-size: 14px !important; }\n .ps-bpm-slider-row { gap: 10px !important; }\n .ps-bpm-step-btn { width: 28px !important; height: 28px !important; }\n .ps-bpm-step-btn svg { width: 12px !important; height: 12px !important; }\n .ps-bpm-slider { height: 4px !important; }\n / \"or\" divider: tight, no extra margin /\n .ps-bpm-or { margin: 10px 0 8px !important; font-size: 10px !important; letter-spacing: 0.15em !important; }\n / Upload action \u2014 prominent card with dashed accent border + centered\n * icon-over-text layout. Reads as a real \"drop zone\" alternative to the\n * manual sliders above. Larger touch area, accent color cues affordance. /\n .ps-bpm-upload-link {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 6px !important;\n padding: 18px 14px !important;\n width: 100% !important;\n min-height: 92px !important;\n background: rgba(33, 84, 239, 0.04) !important;\n border: 1.5px dashed rgba(33, 84, 239, 0.45) !important;\n border-radius: 12px !important;\n color: var(--ps-accent) !important;\n font-size: 13px !important;\n font-weight: 600 !important;\n letter-spacing: 0 !important;\n text-transform: none !important;\n }\n .ps-bpm-upload-link:hover:not(:disabled) {\n background: rgba(33, 84, 239, 0.08) !important;\n border-color: var(--ps-accent) !important;\n opacity: 1 !important;\n }\n .ps-bpm-upload-link svg { width: 22px !important; height: 22px !important; color: var(--ps-accent) !important; flex-shrink: 0 !important; }\n / Hide the trailing chevron in this taller layout \u2014 direction is implied. /\n .ps-bpm-upload-link svg:last-child:not(:first-of-type) { display: none !important; }\n / Spacer eats remaining vertical space so the bottom block is pushed to\n * the actual viewport bottom (sticky alone doesn't pin shorter content). /\n .ps-bpm-spacer { display: block !important; flex: 1 1 auto !important; min-height: 0 !important; }\n / Bottom group sits at the viewport bottom with a top divider. /\n .ps-bpm-bottom {\n flex-shrink: 0 !important;\n padding: 12px 0 0 !important; gap: 8px !important;\n background: var(--ps-bg-primary) !important;\n border-top: 1px solid var(--ps-border-subtle) !important;\n }\n .ps-bpm-next-btn { height: 44px !important; font-size: 14px !important; border-radius: 10px !important; }\n .ps-bpm-bottom-tab { padding: 8px 6px !important; font-size: 10px !important; letter-spacing: 0.1em !important; }\n .ps-bpm-bottom-tab svg { width: 12px !important; height: 12px !important; }\n\n / iOS-safe modal height: svh (small viewport) is stable when URL bar\n * shows/hides. dvh changes value as user scrolls and causes layout jumps. /\n .ps-tryon-modal,\n .ps-tryon-modal-wide {\n max-height: 100svh !important;\n height: 100svh !important;\n min-height: 100svh !important;\n }\n\n / Photo step layout: stack the two columns vertically on mobile so the\n * upload area gets full width and the body-details column (height /\n * weight / bra / age + \"?\" pill) is fully readable instead of cramped at\n * 50% of viewport. /\n .ps-bp-wrapper > div:first-child {\n flex-direction: column !important;\n padding: 0 !important;\n gap: 16px !important;\n height: auto !important;\n min-height: 0 !important;\n }\n .ps-bp-wrapper > div:first-child > div {\n flex: 1 1 auto !important;\n width: 100% !important;\n }\n / Re-size desktop vw-based body-details typography for mobile. /\n .ps-bp-wrapper h3 { font-size: 16px !important; }\n / \"How to take a good photo\" pill button \u2014 readable size + tap target. /\n .ps-bp-wrapper button[aria-label=\"How to take a good photo\"] {\n padding: 8px 12px !important;\n font-size: 11px !important;\n gap: 6px !important;\n }\n .ps-bp-wrapper button[aria-label=\"How to take a good photo\"] > span:first-child {\n width: 16px !important; height: 16px !important;\n font-size: 11px !important;\n min-width: 16px !important; min-height: 16px !important;\n }\n .ps-bp-wrapper p {\n font-size: 12px !important;\n }\n\n / Body details (height/weight/bra) inputs section on mobile photo step. /\n .ps-pm-body-details {\n display: flex; flex-direction: column;\n gap: 8px;\n padding: 12px 0;\n }\n .ps-pm-body-details-head {\n display: flex; align-items: center; justify-content: space-between;\n gap: 8px;\n }\n .ps-pm-body-details-head h3 {\n margin: 0;\n font-size: 15px; font-weight: 700;\n color: var(--ps-text-primary);\n }\n .ps-pm-body-details-sub {\n margin: 0;\n font-size: 11px;\n color: var(--ps-text-muted);\n }\n .ps-pm-help-pill {\n display: inline-flex; align-items: center; gap: 6px;\n padding: 6px 10px;\n background: transparent; color: var(--ps-accent);\n border: 1.5px solid var(--ps-accent);\n border-radius: 999px;\n cursor: pointer; font-family: inherit;\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.04em; white-space: nowrap;\n flex-shrink: 0;\n transition: background 0.15s, color 0.15s;\n }\n .ps-pm-help-pill.ps-active {\n background: var(--ps-accent); color: #FFFFFF;\n }\n .ps-pm-help-pill-q {\n display: inline-flex; align-items: center; justify-content: center;\n width: 16px; height: 16px;\n border-radius: 50%;\n background: var(--ps-accent); color: #FFFFFF;\n font-size: 11px; font-weight: 700; line-height: 1;\n }\n .ps-pm-help-pill.ps-active .ps-pm-help-pill-q {\n background: #FFFFFF; color: var(--ps-accent);\n }\n / Hide PhotoStepMobile's inline Do/Don't grid on mobile \u2014 content lives\n * in the help drawer now. Keeps the scan step compact. /\n .ps-pm-dodonts-grid, .ps-pm-dodonts-tip { display: none !important; }\n\n / When the visual stepper is rendered above PhotoStepMobile (only the\n * BodyProfileView mobile flow does this), the stepper's \"PHOTO\" /\n * \"DETAILS\" labels already title the step, so PhotoStepMobile's own\n * \"Review your photo\" h2+subtitle header is redundant. Hide it to\n * reclaim vertical space and keep the upload zone uncropped.\n * AccessoryView (no stepper sibling) keeps its header. /\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-header { display: none !important; }\n .ps-bp-scan-progress ~ .ps-pm-root {\n gap: max(10px, 2.6vw) !important;\n padding-top: 0 !important;\n }\n / The \"tall\" upload zone fills all remaining vertical space on\n * mobile Step 1 so the upload area is unmistakably the focal point.\n * .ps-pm-preview-tall is opted in by PhotoStepMobile when caller\n * passes compactAgeGate. Reference design has a dashed border and\n * a slightly lighter fill \u2014 applied here so other usages of\n * .ps-pm-preview (AccessoryView, etc.) aren't affected. /\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-preview.ps-pm-preview-tall {\n flex: 1 1 0% !important;\n height: auto !important;\n min-height: 180px !important;\n background: #F4F5F7 !important;\n border: 2px dashed #D5D8DD !important;\n border-radius: 18px !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-preview-empty-title {\n font-size: 16px !important; font-weight: 600 !important;\n color: var(--ps-text-secondary) !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-preview-empty-hint {\n font-size: 11px !important; color: var(--ps-text-muted) !important;\n letter-spacing: 0.08em; text-transform: uppercase;\n }\n / Single-page layout for the scan flow \u2014 kill the in-root spacer so\n * the preview grows naturally, and let the .ps-pm-root shrink to its\n * parent so total content stays inside the viewport. The bottom CTA\n * + tabs sit naturally pinned at the bottom of the column. /\n .ps-bp-scan-progress ~ .ps-pm-root {\n min-height: 0 !important;\n max-height: 100% !important;\n overflow: hidden !important;\n gap: 8px !important;\n padding: 0 !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-bpm-spacer {\n display: none !important;\n }\n / Same for Step 2 (body details) \u2014 center content, pin the bottom. /\n .ps-bp-wrapper .ps-bp-scan-details-center { min-height: 0 !important; }\n / The bottom block is sticky-style: always visible at the column\n * bottom. flex-shrink: 0 keeps it from collapsing if the upload\n * preview tries to grow past the available space. /\n .ps-bp-wrapper .ps-bpm-bottom {\n flex-shrink: 0 !important;\n margin-top: auto !important;\n background: var(--ps-bg-primary, #FFFFFF) !important;\n }\n / Small-screen pass: tighten everything in the scan flow so the\n * full layout (stepper + help + upload + legal + CTA + tabs) fits\n * on a 568px iPhone-SE-sized viewport without scrolling. /\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-legal-notice {\n margin-top: 8px !important;\n padding: 8px 12px !important;\n gap: 4px !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-legal-notice-body {\n font-size: 11px !important; line-height: 1.4 !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-primary-btn {\n padding: 14px 18px !important;\n font-size: 13px !important;\n margin: 8px 16px 0 !important;\n }\n .ps-bp-scan-progress ~ .ps-pm-root .ps-bpm-bottom {\n padding-bottom: 4px !important;\n }\n / On very short viewports (\u2264 600px tall) collapse the upload zone\n * floor a bit further so the rest of the page still fits. /\n @media (max-height: 600px) {\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-preview.ps-pm-preview-tall {\n min-height: 140px !important;\n }\n .ps-bp-scan-progress { padding: 6px 12px 0 !important; margin-bottom: 16px !important; }\n .ps-bp-scan-help-row { padding-bottom: 6px !important; }\n }\n\n / Prominent \"How to take a good photo\" pill row \u2014 sits between the\n * stepper and the upload zone so the user always sees how to get\n * help. Centered, FILLED light-accent background (matches the\n * reference design), with a darker \"?\" circle badge. /\n .ps-bp-scan-help-row {\n display: flex; justify-content: center;\n padding: 0 4px 12px;\n }\n .ps-bp-scan-help-pill {\n padding: 10px 18px !important;\n font-size: 13px !important;\n letter-spacing: 0.02em !important;\n background: rgba(33, 84, 239, 0.10) !important;\n color: var(--ps-accent) !important;\n border: 1px solid rgba(33, 84, 239, 0.18) !important;\n box-shadow: 0 2px 6px -2px rgba(33, 84, 239, 0.18);\n gap: 8px !important;\n }\n .ps-bp-scan-help-pill .ps-pm-help-pill-q {\n width: 18px !important; height: 18px !important;\n font-size: 12px !important;\n background: var(--ps-accent) !important;\n color: #FFFFFF !important;\n }\n .ps-bp-scan-help-pill.ps-active {\n background: var(--ps-accent) !important;\n color: #FFFFFF !important;\n border-color: var(--ps-accent) !important;\n }\n .ps-bp-scan-help-pill.ps-active .ps-pm-help-pill-q {\n background: #FFFFFF !important;\n color: var(--ps-accent) !important;\n }\n\n / Mobile primary CTA \u2014 gradient purple/blue to match the reference.\n * Applied only when the photo step is rendered through the new\n * 2-step scan flow (i.e. .ps-bp-scan-progress is a sibling). /\n .ps-bp-scan-progress ~ .ps-pm-root .ps-pm-primary-btn,\n .ps-bp-wrapper .ps-bp-scan-details-center ~ .ps-bpm-bottom .ps-bpm-next-btn {\n background: linear-gradient(135deg, #6E76F1 0%, #4F46E5 60%, #4338CA 100%) !important;\n box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.42),\n 0 4px 8px -4px rgba(79, 70, 229, 0.25);\n color: #FFFFFF !important;\n border-radius: 14px !important;\n letter-spacing: 0.16em !important;\n }\n\n / Compact, mobile-only age-gate overlay. Centered chip, tiny blur,\n * subtle white dim \u2014 keeps the upload icon visible behind so the\n * user sees the answer \"yes\" reveals the upload zone. /\n .ps-pm-age-overlay {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n padding: 16px;\n background: rgba(255, 255, 255, 0.45);\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n z-index: 2;\n animation: ps-pm-age-gate-in 0.22s ease-out both;\n }\n .ps-pm-age-overlay-chip {\n width: auto; max-width: 100%;\n padding: 12px 14px;\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: 14px;\n box-shadow: 0 10px 24px -10px rgba(17,24,39,0.20),\n 0 4px 10px -6px rgba(17,24,39,0.10);\n display: flex; flex-direction: column;\n align-items: center; text-align: center;\n gap: 10px;\n }\n .ps-pm-age-overlay-error .ps-pm-age-overlay-chip {\n border-color: rgba(192,38,38,0.40);\n box-shadow: 0 10px 24px -10px rgba(192,38,38,0.22);\n }\n .ps-pm-age-overlay-q {\n font-size: 14px; font-weight: 600;\n color: var(--ps-text-primary); line-height: 1.3;\n }\n .ps-pm-age-overlay-error .ps-pm-age-overlay-q { color: #C02626; }\n .ps-pm-age-overlay-actions {\n display: flex; gap: 8px; justify-content: center;\n }\n .ps-pm-age-overlay-btn {\n padding: 7px 18px;\n border-radius: 999px;\n font-family: inherit;\n font-size: 12px; font-weight: 700;\n cursor: pointer;\n letter-spacing: 0.02em;\n }\n .ps-pm-age-overlay-yes {\n background: var(--ps-accent); color: #FFFFFF;\n border: 1px solid var(--ps-accent);\n }\n .ps-pm-age-overlay-no {\n background: transparent; color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color);\n }\n\n / Spinner overlay for the backend age-check / image-processing flow.\n * Sits on top of the upload zone (absolute, inset 0) while the backend\n * verifies the photo. Disappears the moment processing finishes. /\n .ps-pm-processing-overlay {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n padding: 16px;\n background: rgba(255, 255, 255, 0.78);\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n z-index: 3;\n animation: ps-mobile-fade-in 0.18s ease-out;\n }\n .ps-pm-processing-card {\n display: flex; flex-direction: column;\n align-items: center; gap: 12px;\n padding: 16px 18px;\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: 14px;\n box-shadow: 0 10px 24px -10px rgba(17,24,39,0.18);\n }\n .ps-pm-processing-spinner {\n width: 28px; height: 28px;\n border: 3px solid var(--ps-bg-tertiary);\n border-top-color: var(--ps-accent);\n border-radius: 50%;\n animation: ps-pm-spin 0.85s linear infinite;\n }\n @keyframes ps-pm-spin {\n to { transform: rotate(360deg); }\n }\n .ps-pm-processing-label {\n font-size: 13px; font-weight: 600;\n color: var(--ps-text-primary);\n text-align: center;\n }\n\n / Backend-rejection chip \u2014 same structure as the desktop \"Photo\n * declined\" card: red icon + uppercase title row, then the AI's\n * rejection reason, then a primary \"Try another photo\" CTA. Sits\n * BELOW the upload zone. /\n .ps-pm-photo-rejection {\n display: flex; flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n margin: 10px 0 0;\n padding: 12px 14px;\n background: #FFFFFF;\n border: 1px solid rgba(220, 38, 38, 0.35);\n border-radius: 12px;\n box-shadow: 0 6px 18px -10px rgba(220, 38, 38, 0.20);\n }\n .ps-pm-photo-rejection-head {\n display: flex; align-items: center;\n gap: 6px;\n }\n .ps-pm-photo-rejection-title {\n color: #dc2626;\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.08em; text-transform: uppercase;\n }\n .ps-pm-photo-rejection-msg {\n margin: 0;\n font-size: 12px; line-height: 1.45;\n color: var(--ps-text-secondary);\n }\n .ps-pm-photo-rejection-retry {\n padding: 7px 14px;\n background: var(--ps-accent); color: #FFFFFF;\n border: none;\n border-radius: 8px;\n font-family: inherit;\n font-size: 12px; font-weight: 700;\n cursor: pointer;\n }\n .ps-pm-photo-rejection-retry:active { opacity: 0.92; }\n\n / Compact 2-step stepper \u2014 perfectly centered with numbered dots +\n * labels. Big bottom margin gives clear breathing room before the\n * \"How to take a good photo\" pill below it. /\n .ps-bp-scan-progress {\n display: flex; align-items: center; justify-content: center;\n width: 100%;\n gap: 6px;\n padding: 12px 12px 0;\n margin: 0 0 24px;\n position: relative;\n text-align: center;\n }\n .ps-bp-scan-progress-back {\n position: absolute; left: 4px; top: 12px;\n width: 28px; height: 28px;\n display: inline-flex; align-items: center; justify-content: center;\n border: none; background: transparent;\n color: var(--ps-text-primary);\n font-size: 18px; line-height: 1;\n cursor: pointer; border-radius: 50%;\n padding: 0;\n }\n .ps-bp-scan-progress-back:active { background: var(--ps-bg-tertiary); }\n .ps-bp-scan-progress-spacer { display: none; }\n .ps-bp-scan-progress-track {\n display: inline-flex; align-items: center; justify-content: center;\n gap: 10px;\n margin: 0 auto;\n flex: 0 1 auto;\n }\n .ps-bp-scan-progress-step {\n display: inline-flex; align-items: center; gap: 6px;\n flex-shrink: 0;\n }\n .ps-bp-scan-progress-dot {\n display: inline-flex; align-items: center; justify-content: center;\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--ps-bg-tertiary);\n color: var(--ps-text-muted);\n border: 1px solid var(--ps-border-color);\n font-size: 10px; font-weight: 700;\n flex-shrink: 0;\n }\n .ps-bp-scan-progress-step.ps-active .ps-bp-scan-progress-dot,\n .ps-bp-scan-progress-step.ps-done .ps-bp-scan-progress-dot {\n background: var(--ps-accent); color: #FFFFFF;\n border-color: var(--ps-accent);\n }\n .ps-bp-scan-progress-label {\n display: inline;\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.06em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-bp-scan-progress-step.ps-active .ps-bp-scan-progress-label,\n .ps-bp-scan-progress-step.ps-done .ps-bp-scan-progress-label {\n color: var(--ps-text-primary);\n }\n .ps-bp-scan-progress-line {\n flex: 0 0 28px; height: 2px;\n background: var(--ps-border-color);\n border-radius: 2px;\n }\n .ps-bp-scan-progress-line.ps-active {\n background: var(--ps-accent);\n }\n\n / Step 2 (body details) \u2014 centered single-screen layout. The wrapper\n * is a flex column with a centered content block; the bottom CTA +\n * tabs sit pinned at the bottom (handled by .ps-bpm-bottom). /\n .ps-bp-scan-details-center {\n flex: 1 1 auto;\n display: flex; flex-direction: column;\n align-items: stretch; justify-content: center;\n gap: 12px;\n padding: 8px 16px;\n min-height: 0;\n }\n .ps-bp-scan-details-title {\n margin: 0; text-align: center;\n font-size: 22px; font-weight: 700;\n color: var(--ps-text-primary);\n }\n .ps-bp-scan-details-sub {\n margin: 0; text-align: center;\n font-size: 13px; color: var(--ps-text-muted);\n }\n .ps-bp-scan-details-center .ps-bp-system-toggle { align-self: center; }\n .ps-bp-scan-details-center .ps-bp-inline-fields {\n max-width: 360px; width: 100%; margin: 4px auto 0;\n }\n\n / Desktop-style compact age chip on mobile. Sits BELOW the upload\n * zone (sibling, not overlay) so the upload area stays uncropped.\n * Mirrors desktop's two-state design (pre-answer + error). /\n .ps-pm-age-chip {\n display: flex; align-items: center;\n gap: 8px;\n margin: 8px 0 0;\n padding: 8px 12px;\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: 12px;\n box-shadow: 0 6px 18px -10px rgba(17,24,39,0.18);\n animation: ps-cpw-age-gate-in 0.28s ease-out both;\n }\n .ps-pm-age-chip-error {\n border-color: rgba(192,38,38,0.35);\n box-shadow: 0 6px 18px -10px rgba(192,38,38,0.20);\n }\n .ps-pm-age-chip-q {\n flex: 1;\n font-size: 13px; font-weight: 600;\n color: var(--ps-text-primary);\n line-height: 1.3;\n }\n .ps-pm-age-chip-error .ps-pm-age-chip-q { color: #C02626; }\n .ps-pm-age-chip-btn {\n padding: 6px 14px;\n border-radius: 999px;\n font-family: inherit;\n font-size: 12px; font-weight: 700;\n cursor: pointer;\n flex-shrink: 0;\n }\n .ps-pm-age-chip-yes {\n background: var(--ps-accent); color: #FFFFFF;\n border: 1px solid var(--ps-accent);\n }\n .ps-pm-age-chip-no {\n background: transparent; color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color);\n }\n\n / Photo-help popover on mobile = bottom drawer with backdrop. /\n .ps-bp-photo-help-backdrop {\n display: block !important;\n position: fixed !important; inset: 0 !important;\n background: rgba(15, 23, 42, 0.5) !important;\n z-index: 20 !important;\n animation: ps-mobile-fade-in 0.2s ease;\n }\n .ps-bp-photo-help {\n position: fixed !important;\n left: 0 !important; right: 0 !important; bottom: 0 !important;\n top: auto !important;\n width: 100% !important; max-width: 100% !important;\n border-radius: 18px 18px 0 0 !important;\n padding: 8px 16px 24px !important; padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;\n gap: 12px !important;\n max-height: 80svh !important; overflow-y: auto !important;\n z-index: 21 !important;\n animation: ps-mobile-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);\n box-shadow: 0 -10px 30px -8px rgba(17,24,39,0.2) !important;\n }\n .ps-bp-photo-help-handle {\n display: block !important;\n width: 36px; height: 4px; border-radius: 2px;\n background: var(--ps-border-subtle);\n margin: 0 auto 4px;\n }\n .ps-bp-photo-help-title { font-size: 16px !important; }\n .ps-bp-photo-help-close {\n width: 32px !important; height: 32px !important;\n font-size: 22px !important; border-radius: 50% !important;\n }\n .ps-bp-photo-help-section { border-radius: 10px !important; padding: 10px 12px !important; }\n .ps-bp-photo-help-section-label { font-size: 12px !important; margin-bottom: 6px !important; }\n .ps-bp-photo-help-section-body { font-size: 12px !important; line-height: 1.55 !important; }\n .ps-bp-photo-help-tip { font-size: 12px !important; line-height: 1.55 !important; }\n\n / Mobile step roots are flex columns that fill the modal body \u2014 that\n * gives the spacer something to grow into and the bottom block lands at\n * the actual viewport bottom. Negative margins extend the bottom block\n * (and tabs) edge-to-edge inside the body's padding. /\n .ps-bpm-root, .ps-pm-root, .ps-bp-wrapper {\n display: flex !important; flex-direction: column !important;\n min-height: 100% !important;\n flex: 1 !important;\n }\n .ps-bpm-bottom {\n margin-left: calc(-1 max(16px, 4vw)) !important;\n margin-right: calc(-1 * max(16px, 4vw)) !important;\n padding-left: max(16px, 4vw) !important;\n padding-right: max(16px, 4vw) !important;\n }\n .ps-bpm-bottom-tabs {\n margin-left: calc(-1 * max(16px, 4vw)) !important;\n margin-right: calc(-1 * max(16px, 4vw)) !important;\n }\n\n /* \u2500\u2500 Body: scrollable, comfortable padding, momentum scroll \u2500\u2500 /\n .ps-tryon-body {\n padding: max(16px, 4vw) !important;\n flex: 1 !important; min-height: 0 !important;\n overflow-y: auto !important; overflow-x: hidden !important;\n -webkit-overflow-scrolling: touch;\n }\n\n / \u2500\u2500 Back button: bigger, easier to tap \u2500\u2500 /\n .ps-tryon-back-btn {\n font-size: 14px !important; gap: 6px !important;\n margin-bottom: 12px !important; padding: 6px 0 !important;\n }\n .ps-tryon-back-btn svg { width: 18px !important; height: 12px !important; }\n\n / \u2500\u2500 Preserve existing previews and modal-wide overrides \u2500\u2500 /\n .ps-tryon-preview { height: 320px; }\n\n / \u2500\u2500 Drawer list (history / profiles / settings) \u2500\u2500 /\n / Pure vw gap (0.52vw = ~2 px on mobile) crushed list rows together. /\n .ps-tryon-drawer-list { gap: 12px !important; padding: 0 !important; }\n .ps-tryon-drawer { padding: 16px !important; }\n\n / \u2500\u2500 Profile cards inside the sizing-profiles drawer \u2500\u2500 /\n .ps-msp-card {\n padding: 16px !important;\n border-radius: 14px !important;\n }\n .ps-msp-card-tag { font-size: 11px !important; padding: 4px 8px !important; border-radius: 999px !important; }\n .ps-msp-card-circle { width: 72px !important; height: 72px !important; margin: 8px auto 12px !important; }\n .ps-msp-card-name { font-size: 16px !important; margin-bottom: 6px !important; }\n .ps-msp-meta-row { padding: 6px 0 !important; gap: 8px !important; }\n .ps-msp-card-meta { font-size: 12px !important; }\n .ps-msp-card-actions { gap: 8px !important; margin-top: 10px !important; }\n .ps-msp-card-select { font-size: 13px !important; padding: 10px 12px !important; border-radius: 8px !important; }\n .ps-msp-card-edit, .ps-msp-card-delete { width: 36px !important; height: 36px !important; border-radius: 8px !important; }\n .ps-msp-card-create { min-height: 120px !important; font-size: 14px !important; }\n\n / \u2500\u2500 Language switcher dropdown \u2500\u2500 /\n / Default min(18vw, 280px) collapsed to ~67 px on mobile \u2014 unusable. /\n .ps-tryon-lang-list { max-height: 320px !important; }\n .ps-tryon-lang-item { padding: 10px 14px !important; gap: 10px !important; }\n .ps-tryon-lang-name { font-size: 14px !important; }\n .ps-tryon-lang-code { font-size: 11px !important; }\n }\n\n @keyframes ps-mobile-slide-up {\n from { transform: translateY(100%); opacity: 0.4; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes ps-mobile-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @media (max-width: 720px) {\n .ps-tryon-result-split { flex-direction: column; }\n .ps-tryon-result-image-col { flex: none; }\n }\n @media (max-width: 480px) {\n .ps-tryon-body { padding: 18px; }\n .ps-tryon-header { padding: 14px 18px; }\n .ps-tryon-stepper { padding: 14px 18px 8px; }\n .ps-tryon-stepper-circle { width: 24px; height: 24px; font-size: 10px; }\n .ps-tryon-stepper-label { font-size: 9px; }\n .ps-tryon-features { flex-direction: column; gap: 8px; }\n .ps-tryon-feature { flex-direction: row; gap: 10px; text-align: left; }\n .ps-tryon-feature-icon { margin-bottom: 0; }\n .ps-tryon-input-row { flex-wrap: wrap; }\n .ps-tryon-input-row label { min-width: 100%; margin-bottom: -4px; }\n .ps-tryon-drawer { padding: 16px; }\n .ps-tryon-detail-grid { gap: 8px; }\n .ps-tryon-detail-cell { padding: 10px 12px; }\n .ps-tryon-detail-cell-value { font-size: 14px; }\n .ps-tryon-detail-modal { max-width: 100%; }\n .ps-tryon-header-icon { width: 30px; height: 30px; border-radius: 8px; }\n .ps-tryon-back-btn { font-size: 13px; gap: 6px; margin-bottom: 10px; }\n .ps-tryon-back-btn svg { width: 16px; height: 10px; }\n .ps-tryon-sr-fit-table { font-size: 14px; margin-top: 12px; }\n .ps-tryon-sr-fit-table thead th { font-size: 11px; padding: 4px 0 8px; }\n .ps-tryon-sr-fit-table td { padding: 12px 0; }\n .ps-tryon-sr-fit-status { font-size: 10px; padding: 3px 6px; }\n .ps-tryon-sr-fit-area { font-size: 14px; }\n .ps-tryon-sr-fit-range { font-size: 14px; }\n .ps-tryon-upload-modal { width: 90%; max-width: none; padding: 18px; border-radius: 14px; gap: 12px; }\n .ps-tryon-upload-modal-header h3 { font-size: 15px; }\n .ps-tryon-upload-modal-close { font-size: 22px; }\n .ps-tryon-upload-modal-dropzone { padding: 24px; min-height: 120px; border-radius: 10px; }\n .ps-tryon-upload-modal-dropzone p { font-size: 14px; }\n .ps-tryon-upload-modal-dropzone span { font-size: 11px; }\n .ps-tryon-upload-modal-preview { max-height: 200px; border-radius: 10px; }\n .ps-tryon-upload-modal-preview img { max-height: 200px; }\n .ps-tryon-upload-modal-remove { width: 24px; height: 24px; font-size: 14px; top: 6px; right: 6px; }\n / Multi-section mobile /\n .ps-tryon-sr-split-multi { grid-template-columns: 1fr; }\n .ps-tryon-sr-img-col-small { max-height: 200px; }\n .ps-tryon-sr-multi-title { font-size: 16px; }\n .ps-tryon-sr-picker { gap: 12px; padding: 4px; }\n .ps-tryon-sec-row { gap: 8px; }\n .ps-tryon-sec-bigcard:not(.ps-has-img) { padding: 16px 10px; gap: 6px; min-height: 180px; }\n .ps-tryon-sec-bigcard { border-radius: 10px; }\n .ps-tryon-sec-bigcard-content { padding: 12px 8px; }\n .ps-tryon-sec-bigcard-bg { border-radius: 10px 10px 0 0; }\n .ps-tryon-sec-bigcard-icon { width: 48px; height: 48px; }\n .ps-tryon-sec-bigcard-icon svg { width: 26px; height: 26px; }\n .ps-tryon-sec-bigcard-name { font-size: 13px; }\n .ps-tryon-sec-bigcard-size { font-size: 28px; }\n .ps-tryon-sec-bigcard-badge { font-size: 9px; padding: 2px 6px; }\n .ps-tryon-sec-bigcard-fit { font-size: 10px; }\n .ps-tryon-sec-detail-back { font-size: 13px; gap: 5px; }\n .ps-tryon-sec-detail-back svg { width: 14px; height: 14px; }\n .ps-tryon-sec-detail-header { gap: 10px; padding-bottom: 8px; }\n .ps-tryon-sec-detail-icon { width: 38px; height: 38px; }\n .ps-tryon-sec-detail-icon svg { width: 22px; height: 22px; }\n .ps-tryon-sec-detail-name { font-size: 16px; }\n .ps-tryon-section-name { font-size: 14px; }\n .ps-tryon-section-size { font-size: 18px; gap: 6px; }\n .ps-tryon-section-rec-badge,\n .ps-tryon-section-notrec-badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; }\n .ps-tryon-sec-detail .ps-tryon-sr-size-letter { font-size: 32px; }\n .ps-tryon-sec-detail .ps-tryon-sr-chip { min-width: 36px; height: 36px; font-size: 13px; }\n .ps-tryon-sec-length-row { gap: 8px; padding: 6px 0; }\n .ps-tryon-sec-length-label { font-size: 11px; }\n / Body type cards mobile /\n .ps-tryon-bodytype-cards { gap: 6px; }\n .ps-tryon-bodytype-card { padding: 8px 4px; border-radius: 8px; }\n .ps-tryon-bodytype-label { font-size: 10px; }\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Body Profile Onboarding (ps-bp-)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n\n /* Wrapper for title + split layout /\n .ps-bp-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }\n .ps-bp-shapes-header { flex-shrink: 0; margin-bottom: 0.6vw; text-align: left; }\n .ps-bp-shapes-header .ps-bp-title { font-size: 1vw; font-weight: 600; }\n .ps-bp-shapes-header .ps-bp-subtitle { font-size: 0.55vw; color: var(--ps-text-muted); font-weight: 400; }\n\n / Split layout: product left, form right \u2014 FIXED vh height, never changes /\n .ps-bp-layout {\n display: flex; gap: 1.2vw; flex: 1; min-height: 0;\n overflow: hidden; align-items: center;\n }\n .ps-bp-image {\n flex: 0 0 43%; min-width: 0;\n height: 100%;\n background: var(--ps-bg-primary);\n border-radius: 0.9vw; overflow: hidden;\n display: flex;\n }\n .ps-bp-image-img {\n width: 100%; height: 100%;\n object-fit: contain; object-position: center center;\n flex: 1;\n }\n / Upload zone \u2014 same element as .ps-bp-image, dashed border + centered content, full height /\n .ps-bp-image.ps-bp-upload-zone {\n cursor: pointer; border: 2px dashed var(--ps-border-color);\n align-self: stretch; align-items: center; justify-content: center;\n }\n .ps-bp-upload-zone:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.04); }\n .ps-bp-upload-placeholder {\n display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vw;\n color: var(--ps-text-muted);\n }\n .ps-bp-upload-placeholder svg { width: 2.5vw; height: 2.5vw; stroke: var(--ps-accent); opacity: 0.7; }\n .ps-bp-upload-text { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-secondary); }\n .ps-bp-upload-hint { font-size: 0.68vw; color: var(--ps-text-muted); }\n\n .ps-bp-image-remove {\n position: absolute; top: 0.5vw; right: 0.5vw;\n width: 1.6vw; height: 1.6vw; display: flex; align-items: center; justify-content: center;\n background: rgba(0,0,0,0.6); border: none; border-radius: 50%;\n color: var(--ps-text-primary); font-size: 1vw; cursor: pointer; line-height: 1;\n transition: background 0.15s; z-index: 2;\n }\n .ps-bp-image-remove:hover { background: rgba(0,0,0,0.8); }\n\n .ps-bp-root {\n flex: 1; min-width: 0;\n display: flex; flex-direction: column; gap: 0.6vw; padding: 0.2vw 0.5vw 0.3vw 0;\n height: 100%; max-height: 100%; overflow: hidden;\n justify-content: center;\n }\n\n / Step dots /\n .ps-bp-dots {\n display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n }\n .ps-bp-dot {\n width: 0.42vw; height: 0.42vw; border-radius: 50%; background: var(--ps-border-color);\n transition: all 0.3s ease;\n }\n .ps-bp-dot-done { background: var(--ps-accent); }\n .ps-bp-dot-active {\n background: var(--ps-accent); width: 1.2vw; border-radius: 0.25vw;\n }\n\n / Step container + animation \u2014 fade only, no layout shift /\n .ps-bp-step { display: flex; flex-direction: column; gap: 1vw; flex: 1; min-height: 0; margin-top: 3vw; }\n .ps-bp-step-enter { animation: ps-bp-fade 0.25s ease both; }\n @keyframes ps-bp-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n / Minimal \"Using <profile> \u00B7 start fresh\" hint above the first input /\n .ps-bp-profile-hint {\n margin: 0; padding: 0;\n text-align: center;\n font-size: 11px; font-weight: 400;\n color: var(--ps-text-muted);\n letter-spacing: 0.01em;\n line-height: 1.4;\n }\n .ps-bp-profile-hint strong {\n color: var(--ps-text-secondary); font-weight: 600;\n }\n .ps-bp-profile-hint-link {\n background: none; border: none;\n color: var(--ps-text-muted);\n font-family: inherit; font-size: inherit; font-weight: 400;\n text-decoration: underline; text-underline-offset: 2px;\n cursor: pointer; padding: 0;\n }\n .ps-bp-profile-hint-link:hover { color: var(--ps-text-secondary); }\n\n / Typography /\n .ps-bp-title {\n font-size: 1.25vw; font-weight: 700; color: var(--ps-text-primary);\n margin: 0; letter-spacing: -0.02em; text-align: center;\n }\n .ps-bp-subtitle {\n font-size: 0.78vw; color: var(--ps-text-secondary); margin: -0.4vw 0 0; text-align: center;\n }\n\n / Unit system toggle (Imperial / Metric) /\n .ps-bp-system-toggle {\n display: flex; justify-content: center; gap: 1.5vw; margin: 0.3vw 0;\n }\n .ps-bp-system-btn {\n background: none; border: none; padding: 0.2vw 0;\n font-size: 0.78vw; font-weight: 500; color: var(--ps-text-muted);\n cursor: pointer; font-family: inherit;\n border-bottom: 2px solid transparent; transition: all 0.2s;\n }\n .ps-bp-system-btn:hover { color: var(--ps-text-secondary); }\n .ps-bp-system-active {\n color: var(--ps-text-primary); border-bottom-color: var(--ps-accent);\n }\n\n / Inline field rows (WAIR style) /\n .ps-bp-inline-fields {\n display: flex; flex-direction: column; gap: 0; flex: 1;\n justify-content: center;\n }\n .ps-bp-inline-row {\n display: flex; align-items: center; gap: 1vw;\n padding: 1vw 0;\n }\n .ps-bp-inline-label {\n flex: 0 0 6.5vw; font-size: 0.68vw; font-weight: 700;\n color: var(--ps-text-muted); letter-spacing: 0.08em;\n text-transform: uppercase; white-space: nowrap;\n }\n .ps-bp-inline-input-group {\n flex: 1; display: flex; align-items: center; gap: 0.4vw;\n }\n .ps-bp-inline-input {\n flex: 1; min-width: 0; padding: 0;\n background: transparent; border: none; border-bottom: 1px solid var(--ps-border-color);\n color: var(--ps-text-primary); font-size: 1.1vw; font-weight: 500;\n font-family: inherit; outline: none;\n padding-bottom: 0.2vw; transition: border-color 0.2s;\n }\n .ps-bp-inline-input:focus { border-bottom-color: var(--ps-accent); }\n .ps-bp-inline-input::placeholder { color: var(--ps-text-muted); font-weight: 400; }\n .ps-bp-inline-input::-webkit-outer-spin-button,\n .ps-bp-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-bp-inline-input[type=\"number\"] { -moz-appearance: textfield; }\n .ps-bp-inline-unit {\n font-size: 0.73vw; color: var(--ps-text-muted); font-weight: 500;\n flex-shrink: 0;\n }\n\n / Photo CTA link /\n .ps-bp-photo-cta {\n display: flex; align-items: center; gap: 0.5vw;\n background: none; border: none; padding: 0.6vw 0;\n color: var(--ps-accent); font-size: 0.78vw; font-weight: 600;\n cursor: pointer; font-family: inherit; transition: all 0.2s;\n margin-top: 0.3vw;\n }\n .ps-bp-photo-cta:hover:not(:disabled) { color: var(--ps-accent-hover); }\n .ps-bp-photo-cta:disabled {\n opacity: 0.35;\n cursor: not-allowed;\n }\n .ps-bp-photo-cta svg { width: 1vw; height: 1vw; stroke: currentColor; flex-shrink: 0; }\n .ps-bp-photo-cta-arrow { font-size: 0.9vw; transition: transform 0.2s; }\n .ps-bp-photo-cta:hover:not(:disabled) .ps-bp-photo-cta-arrow { transform: translateX(3px); }\n .ps-bp-photo-cta-hint {\n display: block; text-align: center;\n font-size: 0.6vw; color: var(--ps-text-muted);\n font-style: italic; margin-top: 0.25vw;\n }\n .ps-bp-photo-cta-done { color: var(--ps-success-color); }\n .ps-bp-photo-cta-done:hover { color: var(--ps-text-muted); }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Mobile basics step (BasicsStepMobile.tsx) \u2014 matches the reference\n design: product image at top, big editable numbers, RECOMMENDED\n upload card. NOT a slider \u2014 the values are real number inputs\n styled to look like big plain text, so the OS keyboard pops the\n digit pad on iOS/Android.\n These styles are scoped to .ps-bpm-* so they don't conflict with\n the existing desktop .ps-bp-* layout.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-bpm-root {\n display: flex; flex-direction: column;\n gap: max(10px, 2.6vw); padding: max(8px, 2.1vw) max(4px, 1.0vw) 0;\n flex: 1; min-height: 0;\n }\n .ps-bpm-spacer { flex: 1 1 auto; min-height: max(8px, 2.1vw); }\n .ps-bpm-header { text-align: center; margin: max(4px, 1.0vw) 0 0; }\n .ps-bpm-title {\n font-size: max(18px, 4.6vw); font-weight: 700; color: var(--ps-text-primary);\n margin: 0 0 max(4px, 1.0vw); line-height: 1.3;\n }\n .ps-bpm-subtitle {\n font-size: max(12px, 3.1vw); color: var(--ps-text-muted);\n margin: 0 auto; max-width: max(260px, 66.7vw); line-height: 1.45; font-weight: 400;\n }\n\n / Metric / Imperial pill toggle /\n .ps-bpm-toggle {\n display: flex; justify-content: center; gap: max(24px, 6.2vw);\n margin: 2px 0 max(4px, 1.0vw);\n }\n .ps-bpm-toggle-btn {\n background: none; border: none; padding: max(6px, 1.5vw) max(4px, 1.0vw);\n font-family: inherit; font-size: max(12px, 3.1vw); font-weight: 600;\n letter-spacing: 0.06em;\n color: var(--ps-text-muted); cursor: pointer;\n border-bottom: 1.5px solid transparent;\n transition: all 0.2s;\n }\n .ps-bpm-toggle-btn.ps-active {\n color: var(--ps-accent);\n border-bottom-color: var(--ps-accent);\n }\n\n / Slider rows \u2014 label top-left, value top-right, then [-] [track] [+] /\n .ps-bpm-fields {\n display: flex; flex-direction: column;\n margin-top: max(4px, 1.0vw);\n }\n .ps-bpm-row {\n display: flex; flex-direction: column;\n padding: max(14px, 3.6vw) max(4px, 1.0vw);\n gap: max(12px, 3.1vw);\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-bpm-row:last-child { border-bottom: none; }\n .ps-bpm-row-top {\n display: flex; align-items: center; justify-content: space-between;\n }\n .ps-bpm-label {\n font-size: max(11px, 2.8vw); font-weight: 600;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-bpm-value-display {\n font-size: max(14px, 3.6vw); font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n }\n\n / Slider row container: [-] [track] [+] /\n .ps-bpm-slider-row {\n display: flex; align-items: center; gap: max(12px, 3.1vw);\n }\n .ps-bpm-step-btn {\n flex-shrink: 0;\n width: max(34px, 8.7vw); height: max(34px, 8.7vw); border-radius: 50%;\n background: var(--ps-bg-tertiary); border: none;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n color: var(--ps-text-secondary);\n transition: background 0.15s, transform 0.1s;\n }\n .ps-bpm-step-btn:hover { background: var(--ps-border-color); }\n .ps-bpm-step-btn:active { transform: scale(0.92); }\n\n / The slider \u2014 thicker track, dark navy thumb, monochrome /\n .ps-bpm-slider {\n -webkit-appearance: none; appearance: none;\n flex: 1; min-width: 0;\n height: max(4px, 1.0vw); outline: none;\n background: linear-gradient(\n to right,\n var(--ps-text-primary) 0%,\n var(--ps-text-primary) var(--ps-pct, 0%),\n var(--ps-border-color) var(--ps-pct, 0%),\n var(--ps-border-color) 100%\n );\n border-radius: max(999px, 256.2vw); cursor: pointer;\n margin: 0;\n }\n .ps-bpm-slider::-webkit-slider-thumb {\n -webkit-appearance: none; appearance: none;\n width: max(18px, 4.6vw); height: max(18px, 4.6vw); border-radius: 50%;\n background: var(--ps-text-primary); border: none;\n cursor: grab; transition: transform 0.15s ease;\n box-shadow: 0 1px 3px rgba(0,0,0,0.18);\n }\n .ps-bpm-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }\n .ps-bpm-slider::-moz-range-thumb {\n width: max(18px, 4.6vw); height: max(18px, 4.6vw); border-radius: 50%;\n background: var(--ps-text-primary); border: none; cursor: grab;\n box-shadow: 0 1px 3px rgba(0,0,0,0.18);\n }\n .ps-bpm-slider::-moz-range-track { background: transparent; height: max(4px, 1.0vw); }\n\n / \"or\" divider \u2014 flanked by hairlines /\n .ps-bpm-or {\n display: flex; align-items: center; gap: max(12px, 3.1vw);\n margin: max(14px, 3.6vw) max(4px, 1.0vw) max(4px, 1.0vw);\n }\n .ps-bpm-or::before, .ps-bpm-or::after {\n content: \"\"; flex: 1; height: 1px;\n background: var(--ps-border-subtle);\n }\n .ps-bpm-or span {\n font-size: max(10px, 2.6vw); font-weight: 600;\n text-transform: uppercase; letter-spacing: 0.16em;\n color: var(--ps-text-muted);\n }\n\n / Minimal upload link \u2014 no card, no background, just text + icons /\n .ps-bpm-upload-link {\n display: flex; align-items: center; justify-content: center; gap: max(10px, 2.6vw);\n background: none; border: none;\n padding: max(8px, 2.1vw) max(4px, 1.0vw); margin: 0;\n cursor: pointer; font-family: inherit;\n color: var(--ps-text-primary); font-size: max(13px, 3.3vw); font-weight: 500;\n width: 100%;\n transition: opacity 0.15s;\n }\n .ps-bpm-upload-link:hover:not(:disabled) { opacity: 0.7; }\n .ps-bpm-upload-link:disabled {\n opacity: 0.35;\n cursor: not-allowed;\n }\n .ps-bpm-upload-link svg { color: var(--ps-text-secondary); flex-shrink: 0; }\n / Subtle helper text shown below the disabled upload link. /\n .ps-bpm-upload-link-hint {\n display: block; text-align: center;\n margin-top: max(2px, 0.5vw);\n font-size: max(10px, 2.6vw); color: var(--ps-text-muted);\n font-style: italic;\n }\n\n .ps-bpm-error {\n font-size: max(11px, 2.8vw); color: var(--ps-error-color);\n text-align: center; margin: max(4px, 1.0vw) 0 0;\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PhotoStepMobile (.ps-pm-) \u2014 AI scan / photo upload step.\n Title + subtitle, large photo preview, \"Checklist for accuracy\"\n card, dark primary CTA, outlined RETAKE secondary, bottom tabs.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-pm-root {\n display: flex; flex-direction: column;\n gap: max(14px, 3.6vw); padding: max(8px, 2.1vw) max(4px, 1.0vw) 0;\n flex: 1; min-height: 0;\n }\n .ps-pm-header { margin: max(4px, 1.0vw) 0 0; }\n .ps-pm-title {\n font-size: max(22px, 5.6vw); font-weight: 700; color: var(--ps-text-primary);\n margin: 0 0 max(6px, 1.5vw); line-height: 1.25;\n }\n .ps-pm-subtitle {\n font-size: max(13px, 3.3vw); color: var(--ps-text-muted);\n margin: 0; line-height: 1.45; font-weight: 400;\n }\n\n /* Photo preview / upload zone /\n .ps-pm-preview {\n background: var(--ps-bg-tertiary);\n border-radius: max(10px, 2.6vw);\n height: max(280px, 71.8vw);\n overflow: hidden;\n display: flex; align-items: center; justify-content: center;\n position: relative;\n flex-shrink: 0;\n }\n .ps-pm-preview-img {\n max-width: 100%; max-height: 100%;\n width: auto; height: 100%;\n object-fit: contain; display: block;\n }\n .ps-pm-preview-empty {\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n gap: max(6px, 1.5vw); padding: max(24px, 6.2vw);\n background: none; border: none;\n color: var(--ps-text-muted); cursor: pointer;\n font-family: inherit; width: 100%; height: 100%;\n }\n .ps-pm-preview-empty svg { color: var(--ps-text-muted); }\n .ps-pm-preview-empty-title {\n font-size: max(14px, 3.6vw); font-weight: 600; color: var(--ps-text-secondary);\n margin-top: max(4px, 1.0vw);\n }\n .ps-pm-preview-empty-hint {\n font-size: max(11px, 2.8vw); color: var(--ps-text-muted);\n }\n .ps-pm-preview-remove {\n position: absolute; top: max(10px, 2.6vw); right: max(10px, 2.6vw);\n width: max(28px, 7.2vw); height: max(28px, 7.2vw); border-radius: max(6px, 1.5vw);\n background: rgba(255,255,255,0.9); border: none;\n color: var(--ps-text-primary); cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 1px 4px rgba(0,0,0,0.15);\n transition: background 0.15s;\n }\n .ps-pm-preview-remove:hover { background: #FFFFFF; }\n\n / \u2500\u2500 Mobile age-gate overlay \u2500\u2500 /\n .ps-pm-preview-blurred {\n filter: blur(6px) saturate(0.7);\n pointer-events: none;\n user-select: none;\n }\n .ps-pm-age-gate {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n padding: max(16px, 4vw);\n background: rgba(255, 255, 255, 0.55);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n z-index: 2;\n animation: ps-pm-age-gate-in 0.28s ease-out both;\n }\n @keyframes ps-pm-age-gate-in {\n 0% { opacity: 0; transform: scale(0.97); }\n 100% { opacity: 1; transform: scale(1); }\n }\n .ps-pm-age-gate-card {\n width: 100%; max-width: max(280px, 82vw);\n padding: max(18px, 4.6vw) max(16px, 4.2vw);\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: max(12px, 3vw);\n box-shadow: 0 20px 40px -12px rgba(17, 24, 39, 0.25),\n 0 8px 16px -8px rgba(17, 24, 39, 0.15);\n display: flex; flex-direction: column;\n align-items: center; text-align: center;\n gap: max(8px, 2vw);\n }\n .ps-pm-age-gate-eyebrow {\n font-size: max(10px, 2.6vw); font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-pm-age-gate-eyebrow-blocked { color: #C02626; }\n .ps-pm-age-gate-question {\n font-size: max(14px, 3.8vw); font-weight: 600;\n line-height: 1.35; color: var(--ps-text-primary); margin: 0;\n }\n .ps-pm-age-gate-actions {\n display: flex; flex-direction: column; gap: max(8px, 2vw);\n width: 100%; margin-top: max(4px, 1vw);\n }\n .ps-pm-age-gate-btn {\n width: 100%;\n padding: max(11px, 2.9vw) max(14px, 3.6vw);\n border-radius: 999px;\n font-family: inherit;\n font-size: max(12px, 3.2vw); font-weight: 700;\n letter-spacing: 0.02em;\n cursor: pointer;\n transition: background 0.18s, border-color 0.18s, color 0.18s;\n }\n .ps-pm-age-gate-btn-primary {\n background: var(--ps-accent);\n color: #FFFFFF;\n border: 1.5px solid var(--ps-accent);\n }\n .ps-pm-age-gate-btn-secondary {\n background: transparent;\n color: var(--ps-text-primary);\n border: 1.5px solid var(--ps-border-color);\n }\n .ps-pm-age-gate-btn-secondary:active {\n background: var(--ps-bg-secondary);\n }\n\n / \u2500\u2500 Mobile legal notice \u2500\u2500 /\n .ps-pm-legal-notice {\n margin-top: max(10px, 2.6vw);\n background: rgba(33, 84, 239, 0.04);\n border: 1px solid rgba(33, 84, 239, 0.16);\n border-radius: max(10px, 2.6vw);\n padding: max(10px, 2.6vw) max(12px, 3.1vw);\n display: flex; flex-direction: column;\n gap: max(4px, 1vw);\n }\n .ps-pm-legal-notice-head {\n display: flex; align-items: center;\n gap: max(6px, 1.5vw);\n font-size: max(10px, 2.6vw); font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-pm-legal-notice-head svg { width: max(13px, 3.4vw); height: max(13px, 3.4vw); }\n .ps-pm-legal-notice-body {\n margin: 0;\n font-size: max(11px, 2.9vw);\n line-height: 1.5;\n color: var(--ps-text-secondary);\n }\n\n / Checklist for accuracy card /\n .ps-pm-checklist {\n display: flex; gap: max(12px, 3.1vw);\n padding: max(12px, 3.1vw) max(14px, 3.6vw);\n background: var(--ps-bg-secondary);\n border-radius: max(10px, 2.6vw);\n border: 1px solid var(--ps-border-subtle);\n }\n .ps-pm-checklist-icon {\n flex-shrink: 0;\n width: max(22px, 5.6vw); height: max(22px, 5.6vw);\n color: var(--ps-text-primary);\n display: flex; align-items: center; justify-content: center;\n margin-top: 1px;\n }\n .ps-pm-checklist-body { flex: 1; min-width: 0; }\n .ps-pm-checklist-title {\n font-size: max(12px, 3.1vw); font-weight: 700;\n color: var(--ps-text-primary);\n margin-bottom: max(5px, 1.3vw);\n }\n .ps-pm-checklist-items {\n list-style: none; padding: 0; margin: 0;\n }\n .ps-pm-checklist-items li {\n font-size: max(11px, 2.8vw); color: var(--ps-text-secondary);\n padding: 1px 0 1px max(12px, 3.1vw);\n position: relative; line-height: 1.5;\n }\n .ps-pm-checklist-items li::before {\n content: \"\u2022\"; position: absolute; left: 2px;\n color: var(--ps-text-muted);\n }\n\n / \u2500\u2500 Do / Don't grid (full-body photo step) \u2500\u2500\n Colour scheme mirrors the desktop guidelines in BodyProfileView so\n users see the same visual pattern on both form factors. Stacks to a\n single column on very narrow screens so the five-bullet lists stay\n readable. /\n .ps-pm-dodonts-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: max(8px, 2.1vw);\n }\n @media (max-width: 380px) {\n .ps-pm-dodonts-grid { grid-template-columns: 1fr; }\n }\n .ps-pm-do-card,\n .ps-pm-dont-card {\n border-radius: max(10px, 2.6vw);\n padding: max(10px, 2.6vw) max(12px, 3.1vw);\n min-width: 0;\n }\n .ps-pm-do-card { background: #ddfbe7; }\n .ps-pm-dont-card { background: #ffe2e2; }\n .ps-pm-do-card-head,\n .ps-pm-dont-card-head {\n display: flex; align-items: center; gap: max(6px, 1.5vw);\n font-size: max(11px, 2.8vw); font-weight: 700;\n letter-spacing: 0.08em; text-transform: uppercase;\n margin-bottom: max(6px, 1.5vw);\n }\n .ps-pm-do-card-head { color: #1c9d4c; }\n .ps-pm-dont-card-head { color: #e7000b; }\n .ps-pm-do-card-list,\n .ps-pm-dont-card-list {\n list-style: none; padding: 0; margin: 0;\n }\n .ps-pm-do-card-list li,\n .ps-pm-dont-card-list li {\n position: relative;\n padding-left: max(12px, 3.1vw);\n font-size: max(11px, 2.8vw);\n line-height: 1.5;\n color: #1a1a1a;\n }\n .ps-pm-do-card-list li + li,\n .ps-pm-dont-card-list li + li {\n margin-top: max(3px, 0.8vw);\n }\n .ps-pm-do-card-list li::before {\n content: \"\u2713\"; position: absolute; left: 0; top: 0;\n color: #1c9d4c; font-weight: 700;\n }\n .ps-pm-dont-card-list li::before {\n content: \"\u2717\"; position: absolute; left: 0; top: 0;\n color: #e7000b; font-weight: 700;\n }\n\n / Quick-Tip row below the Do/Don't cards. Surfaces the\n \"simpler = more accurate\" reminder that also lives on desktop. /\n .ps-pm-dodonts-tip {\n display: flex; align-items: flex-start; gap: max(8px, 2.1vw);\n padding: max(10px, 2.6vw) max(12px, 3.1vw);\n background: #c6e1f7;\n border-radius: max(10px, 2.6vw);\n font-size: max(11px, 2.8vw); line-height: 1.5;\n color: #1a1a1a;\n }\n .ps-pm-dodonts-tip-emoji { flex-shrink: 0; font-size: max(14px, 3.6vw); line-height: 1; }\n\n / Compact height input row in the mobile photo step /\n .ps-pm-height-row {\n display: flex; align-items: center; gap: max(8px, 2.1vw);\n padding: 0 max(4px, 1.0vw);\n }\n .ps-pm-height-label {\n font-size: max(12px, 3.1vw); font-weight: 600; color: var(--ps-text-secondary);\n flex-shrink: 0;\n }\n .ps-pm-height-input {\n width: max(70px, 18vw); padding: max(7px, 1.8vw) max(10px, 2.6vw);\n font-size: max(13px, 3.3vw); border-radius: max(6px, 1.5vw);\n border: 1px solid var(--ps-border-color); background: var(--ps-bg-secondary);\n color: var(--ps-text-primary); font-family: inherit;\n }\n .ps-pm-height-unit {\n font-size: max(11px, 2.8vw); color: var(--ps-text-muted); flex-shrink: 0;\n }\n\n / Primary CTA: ANALYZE MY SIZE \u2014 uses the user's brand accent /\n .ps-pm-primary-btn {\n margin: 0 max(16px, 4.1vw); width: calc(100% - max(32px, 8.2vw));\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: max(8px, 2.1vw);\n padding: max(16px, 4.1vw) max(18px, 4.6vw);\n font-family: inherit; font-size: max(13px, 3.3vw); font-weight: 700;\n letter-spacing: 0.1em; text-transform: uppercase;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n }\n .ps-pm-primary-btn:active { transform: scale(0.98); }\n .ps-pm-primary-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n / Outlined secondary: RETAKE PHOTO /\n .ps-pm-secondary-btn {\n margin: max(8px, 2.1vw) max(16px, 4.1vw) max(12px, 3.1vw); width: calc(100% - max(32px, 8.2vw));\n background: transparent; color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color); border-radius: 8px;\n padding: max(13px, 3.3vw) max(18px, 4.6vw);\n font-family: inherit; font-size: max(11px, 2.8vw); font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n cursor: pointer;\n transition: background 0.15s;\n }\n .ps-pm-secondary-btn:hover { background: var(--ps-bg-secondary); }\n\n / When the bottom action area contains the primary button (photo step),\n it needs different padding than the basics step (which has the next btn\n baked in via .ps-bpm-next-btn). Both share .ps-bpm-bottom container. /\n .ps-bpm-bottom .ps-pm-primary-btn { margin: max(14px, 3.6vw) max(16px, 4.1vw) 0; }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MobileScanningView (.ps-msc-) \u2014 AI scan processing screen.\n Dark photo viewfinder with corner brackets, scanning line, pose\n skeleton overlay, cycling stage text below with slide-fade.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-msc-root {\n display: flex; flex-direction: column;\n gap: 18px; padding: 8px 4px 0;\n flex: 1; min-height: 0;\n }\n\n /* Photo container \u2014 transparent, no scanner, no chrome /\n .ps-msc-viewfinder {\n position: relative; flex-shrink: 0;\n background: transparent; border-radius: 12px; overflow: hidden;\n height: 64vh; max-height: 540px; min-height: 360px;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-msc-photo {\n max-width: 100%; max-height: 100%;\n width: auto; height: 100%;\n object-fit: contain; display: block;\n }\n\n / Live feed badge top-left /\n .ps-msc-feed-badge {\n position: absolute; top: 12px; left: 14px; z-index: 4;\n display: flex; align-items: center; gap: 6px;\n color: rgba(255,255,255,0.85);\n font-size: 10px; font-weight: 600;\n letter-spacing: 0.12em;\n font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n }\n .ps-msc-feed-dot {\n width: 7px; height: 7px; border-radius: 50%;\n background: #ef4444;\n box-shadow: 0 0 0 0 rgba(239,68,68,0.6);\n animation: ps-msc-rec 1.4s ease-in-out infinite;\n }\n @keyframes ps-msc-rec {\n 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }\n 50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(239,68,68,0); }\n }\n\n / Corner brackets \u2014 four absolutely positioned L-shapes /\n .ps-msc-corners {\n position: absolute; inset: 28px;\n pointer-events: none; z-index: 3;\n }\n .ps-msc-corner {\n position: absolute;\n width: 22px; height: 22px;\n border: 1.5px solid rgba(255,255,255,0.7);\n }\n .ps-msc-corner.ps-tl { top: 0; left: 0; border-right: none; border-bottom: none; }\n .ps-msc-corner.ps-tr { top: 0; right: 0; border-left: none; border-bottom: none; }\n .ps-msc-corner.ps-bl { bottom: 0; left: 0; border-right: none; border-top: none; }\n .ps-msc-corner.ps-br { bottom: 0; right: 0; border-left: none; border-top: none; }\n\n / Scanning line that sweeps top-to-bottom \u2014 GPU-accelerated.\n Animating the top property caused first-paint stutter; switched\n to translate3d so the browser composites on its own layer\n without re-laying out the viewfinder on every frame. /\n .ps-msc-scanline {\n position: absolute; left: 28px; right: 28px;\n top: 28px; height: 1.5px; z-index: 3;\n background: linear-gradient(\n to right,\n transparent,\n rgba(180,220,255,0.9),\n rgba(180,220,255,0.9),\n transparent\n );\n will-change: transform, opacity;\n transform: translate3d(0, 0, 0);\n animation: ps-msc-scan 2.8s ease-in-out 0.4s infinite;\n }\n @keyframes ps-msc-scan {\n 0% { transform: translate3d(0, 0, 0); opacity: 0; }\n 8% { opacity: 1; }\n 92% { opacity: 1; }\n 100% { transform: translate3d(0, min(calc(64vh - 60px), 480px), 0); opacity: 0; }\n }\n\n / Pose skeleton overlay \u2014 sits over the photo /\n .ps-msc-pose-wrap {\n position: absolute; inset: 0; z-index: 2;\n display: flex; align-items: center; justify-content: center;\n pointer-events: none;\n }\n .ps-msc-pose-overlay {\n width: 100%; height: 100%;\n }\n @keyframes ps-msc-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n / Bottom of viewfinder: stage label + progress bar + sub /\n .ps-msc-vf-bottom {\n position: absolute; left: 28px; right: 28px; bottom: 28px;\n z-index: 4; text-align: center;\n color: #FFFFFF;\n }\n .ps-msc-vf-text {\n font-size: 10px; font-weight: 700;\n letter-spacing: 0.16em;\n color: rgba(255,255,255,0.9);\n margin-bottom: 6px;\n font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n }\n .ps-msc-vf-bar {\n height: 2px; width: 100%;\n background: rgba(255,255,255,0.18);\n border-radius: 2px; overflow: hidden;\n }\n .ps-msc-vf-bar-fill {\n height: 100%; width: 30%;\n background: linear-gradient(to right, rgba(180,220,255,0.6), rgba(255,255,255,0.95));\n border-radius: 2px;\n animation: ps-msc-bar 2.2s ease-in-out infinite;\n }\n @keyframes ps-msc-bar {\n 0% { transform: translateX(-100%); }\n 50% { transform: translateX(150%); }\n 100% { transform: translateX(350%); }\n }\n .ps-msc-vf-sub {\n margin-top: 8px;\n font-size: 9px; font-weight: 600;\n letter-spacing: 0.18em;\n color: rgba(255,255,255,0.55);\n font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n }\n\n / Cycling stage text below the viewfinder \u2014 slides + fades on change /\n .ps-msc-stage {\n text-align: center; padding: 4px 12px;\n min-height: 64px;\n / Lock width so the cycling stage text (shorter/longer strings every\n ~2s) doesn't reflow the sibling TryOnProgress bar. /\n width: 320px;\n max-width: 100%;\n overflow: hidden;\n }\n .ps-msc-stage-slot {\n animation: ps-msc-stage-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n }\n @keyframes ps-msc-stage-in {\n 0% { opacity: 0; transform: translateY(18px); filter: blur(4px); }\n 100% { opacity: 1; transform: translateY(0); filter: blur(0); }\n }\n .ps-msc-stage-title {\n font-size: 16px; font-weight: 700;\n letter-spacing: 0.06em;\n color: var(--ps-text-primary);\n margin-bottom: 6px;\n }\n .ps-msc-stage-desc {\n font-size: 12px; color: var(--ps-text-muted);\n line-height: 1.5; max-width: 300px; margin: 0 auto;\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MultiSectionMobile (.ps-msr-) \u2014 mobile multi-section results\n screen. Eyebrow + product hero + match badge + section list + CTA.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n /* Layout: header (modal-level) \u2192 flex column root \u2192 scroll content\n (flex: 1, overflow-y: auto) \u2192 fixed bottom bar (flex-shrink: 0).\n This is more reliable than position: sticky inside an\n overflow:auto flex column, which was floating mid-screen. /\n .ps-msr-root {\n display: flex; flex-direction: column;\n height: 100%; min-height: 0;\n margin: 0 -16px;\n }\n .ps-msr-scroll {\n flex: 1; min-height: 0;\n overflow-y: auto; -webkit-overflow-scrolling: touch;\n display: flex; flex-direction: column;\n gap: 14px; padding: 8px 16px 24px;\n }\n .ps-msr-eyebrow {\n font-size: 10px; font-weight: 600;\n letter-spacing: 0.16em; text-transform: uppercase;\n color: var(--ps-text-muted);\n text-align: center; margin: 4px 0 -4px;\n }\n\n / Product hero \u2014 big centered image + title /\n .ps-msr-product {\n display: flex; flex-direction: column; align-items: center;\n gap: 14px;\n }\n .ps-msr-product-img-wrap {\n position: relative; flex-shrink: 0;\n width: 100%; max-width: 360px; height: 420px;\n border-radius: 12px; overflow: hidden;\n background: var(--ps-bg-secondary);\n display: flex; align-items: center; justify-content: center;\n }\n / Try-on result keeps the same neutral background as the product hero \u2014\n * no dark backdrop on mobile. /\n .ps-msr-product-img {\n width: 100%; height: 100%;\n object-fit: contain; display: block;\n }\n / Show-Fit / mediapipe overlay toggle pill \u2014 bottom-left of try-on hero /\n .ps-msr-fit-toggle {\n position: absolute; bottom: 10px; left: 10px;\n display: flex; align-items: center; gap: 6px;\n padding: 8px 12px;\n background: rgba(255,255,255,0.92);\n color: var(--ps-text-primary);\n border: none; border-radius: 999px;\n font-family: inherit; font-size: 11px; font-weight: 700;\n letter-spacing: 0.04em;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(0,0,0,0.18);\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n z-index: 2;\n }\n .ps-msr-fit-toggle:active { transform: scale(0.97); }\n .ps-msr-fit-toggle[aria-pressed=\"true\"] {\n background: var(--ps-accent); color: #FFFFFF;\n }\n / Bottom action row when try-on finished \u2014 Try Again + Continue Shopping /\n .ps-msr-bottom-row {\n display: flex; gap: 10px; align-items: stretch;\n }\n .ps-msr-bottom-row .ps-msr-tryon-cta { flex: 1; }\n .ps-msr-tryon-cta.ps-secondary {\n background: transparent;\n color: var(--ps-text-primary);\n border: 1.5px solid var(--ps-border-color);\n }\n .ps-msr-tryon-cta.ps-secondary:active {\n background: var(--ps-bg-secondary);\n }\n .ps-msr-bookmark {\n position: absolute; top: 10px; right: 10px;\n width: 30px; height: 30px; border-radius: 7px;\n background: rgba(255,255,255,0.92); border: none;\n color: var(--ps-text-primary); cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n }\n .ps-msr-product-name {\n font-size: 15px; font-weight: 600;\n color: var(--ps-text-primary);\n text-align: center; margin: 0;\n letter-spacing: -0.005em;\n }\n\n / Match badge row /\n .ps-msr-match-row {\n display: flex; align-items: center; justify-content: center;\n gap: 12px; padding: 4px 4px;\n }\n .ps-msr-match {\n display: flex; align-items: center; gap: 10px;\n }\n .ps-msr-match-circle {\n position: relative;\n width: 44px; height: 44px;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-msr-match-ring {\n position: absolute; inset: 0;\n width: 100%; height: 100%;\n transform: rotate(0deg);\n }\n .ps-msr-match-pct {\n position: relative; z-index: 1;\n font-size: 12px; font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n }\n .ps-msr-match-label {\n font-size: 9px; font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n\n / Section cards \u2014 TALL, label small on top, BIG centered size value /\n .ps-msr-sections {\n display: flex; flex-direction: column;\n margin-top: 8px;\n border-top: 1px solid var(--ps-border-subtle);\n }\n .ps-msr-section-card {\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n gap: 8px;\n background: none; border: none;\n border-bottom: 1px solid var(--ps-border-subtle);\n padding: 16px 20px;\n font-family: inherit; cursor: pointer;\n width: 100%;\n transition: background 0.15s, transform 0.15s;\n }\n .ps-msr-section-card:active { transform: scale(0.99); background: var(--ps-bg-secondary); }\n / Bigger garment icon \u2014 same source as desktop (sizeGuide.sectionImages\n * \u2192 falls back to built-in line-art PNG via garmentIconForSection).\n * No background, no tinting \u2014 exact image asset shown at scale. /\n .ps-msr-section-icon-lg {\n width: 56px; height: 56px;\n object-fit: contain;\n background: none;\n margin: 0 auto 4px;\n display: block;\n }\n .ps-msr-section-name {\n font-size: 11px; font-weight: 600;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-muted);\n text-align: center;\n }\n .ps-msr-section-size {\n font-size: 32px; font-weight: 600;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n line-height: 1.1;\n text-align: center;\n letter-spacing: -0.01em;\n }\n\n / Fixed bottom action bar \u2014 always visible, content scrolls above it /\n .ps-msr-bottom {\n flex-shrink: 0;\n background: var(--ps-bg-primary);\n border-top: 1px solid var(--ps-border-subtle);\n padding: 14px 16px;\n padding-bottom: calc(14px + env(safe-area-inset-bottom));\n }\n .ps-msr-tryon-cta {\n display: flex; align-items: center; justify-content: center; gap: 8px;\n width: 100%;\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: 10px;\n padding: 14px 18px;\n font-family: inherit; font-size: 13px; font-weight: 700;\n letter-spacing: 0.04em;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n }\n .ps-msr-tryon-cta:active { transform: scale(0.98); }\n .ps-msr-tryon-cta:disabled { opacity: 0.4; cursor: not-allowed; }\n .ps-msr-tryon-cta svg { flex-shrink: 0; }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BodyShapeStepMobile (.ps-bsm-) \u2014 vertical stacked option cards\n for body shape questions on mobile (chest / midsection / seat /\n hips). Matches the THE DIGITAL TAILOR reference design themed\n with the user's accent color.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-bsm-root {\n display: flex; flex-direction: column;\n gap: 18px; padding: 8px 4px 24px;\n flex: 1; min-height: 0;\n }\n .ps-bsm-step {\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.16em; text-transform: uppercase;\n color: var(--ps-text-muted);\n margin-bottom: -4px;\n }\n .ps-bsm-question {\n font-size: 26px; font-weight: 800;\n color: var(--ps-text-primary);\n line-height: 1.15;\n letter-spacing: -0.01em;\n margin: 0 0 6px;\n }\n /* Wrapper that vertically centers the cards in whatever space is left\n * between the title at the top and the bottom navigation. /\n .ps-bsm-options-center {\n flex: 1 1 auto; min-height: 0;\n display: flex; flex-direction: column; justify-content: center;\n }\n .ps-bsm-options {\n display: flex; flex-direction: column; gap: 12px;\n }\n .ps-bsm-card {\n display: flex; align-items: center; justify-content: space-between;\n width: 100%;\n padding: 16px 18px;\n background: var(--ps-bg-secondary);\n border: 2px solid transparent;\n border-radius: 14px;\n cursor: pointer; font-family: inherit;\n text-align: left;\n transition: background 0.18s, border-color 0.18s, transform 0.15s;\n }\n .ps-bsm-card:active { transform: scale(0.985); }\n .ps-bsm-card.ps-active {\n background: var(--ps-accent);\n border-color: var(--ps-accent);\n box-shadow: 0 8px 24px rgba(33, 84, 239, 0.22);\n }\n .ps-bsm-card-content {\n display: flex; flex-direction: column; gap: 6px;\n min-width: 0;\n }\n .ps-bsm-card-eyebrow {\n font-size: 10px; font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-bsm-card.ps-active .ps-bsm-card-eyebrow {\n color: rgba(255, 255, 255, 0.7);\n }\n .ps-bsm-card-label {\n font-size: 22px; font-weight: 800;\n color: var(--ps-text-primary);\n letter-spacing: 0.02em;\n }\n .ps-bsm-card.ps-active .ps-bsm-card-label { color: #FFFFFF; }\n .ps-bsm-card-thumb {\n flex-shrink: 0;\n width: 64px; height: 64px;\n border-radius: 10px;\n background: rgba(255, 255, 255, 0.6);\n display: flex; align-items: center; justify-content: center;\n overflow: hidden;\n margin-left: 14px;\n }\n .ps-bsm-card.ps-active .ps-bsm-card-thumb {\n background: rgba(255, 255, 255, 0.18);\n }\n .ps-bsm-card-thumb img {\n max-width: 100%; max-height: 100%;\n width: auto; height: 100%;\n object-fit: contain;\n }\n\n / Mobile bra step fixes \u2014 give grid items breathing room and keep\n the dropdown visible. The desktop layout uses .ps-bp-bra-* but\n it's tight on phones. /\n @media (max-width: 768px) {\n .ps-bp-bra-step { padding: 4px 4px 24px; }\n .ps-bp-bra-step .ps-bp-title {\n font-size: 22px; font-weight: 800;\n text-align: left; margin-bottom: 18px;\n letter-spacing: -0.01em;\n }\n .ps-bp-bra-section { margin-bottom: 22px; }\n .ps-bp-bra-header {\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 12px;\n }\n .ps-bp-bra-label {\n font-size: 11px !important; font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-bp-bra-region-trigger {\n padding: 6px 12px !important; font-size: 12px !important;\n border: 1px solid var(--ps-border-color); border-radius: 999px;\n background: var(--ps-bg-secondary);\n color: var(--ps-text-secondary);\n }\n .ps-bp-bra-region-dropdown {\n position: absolute; right: 0; top: 100%;\n margin-top: 6px;\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-color);\n border-radius: 10px;\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n padding: 6px;\n z-index: 5;\n display: flex; flex-direction: column; gap: 2px;\n min-width: 80px;\n }\n .ps-bp-bra-region-item {\n padding: 8px 12px !important; font-size: 12px !important;\n border-radius: 6px; background: none; border: none;\n cursor: pointer; text-align: left;\n color: var(--ps-text-secondary);\n }\n .ps-bp-bra-region-item.ps-selected {\n background: var(--ps-accent); color: #FFFFFF;\n }\n .ps-bp-bra-grid {\n display: grid !important;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n }\n .ps-bp-bra-btn {\n padding: 12px 4px !important; font-size: 13px !important;\n border-radius: 8px;\n border: 1.5px solid var(--ps-border-color);\n background: var(--ps-bg-primary);\n color: var(--ps-text-primary);\n font-weight: 600;\n cursor: pointer;\n min-height: 44px;\n }\n .ps-bp-bra-btn-selected {\n background: var(--ps-accent) !important;\n border-color: var(--ps-accent) !important;\n color: #FFFFFF !important;\n }\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MobileSectionDetail (.ps-msd-) \u2014 section detail view on mobile.\n Layout: scroll container with rich blueprint rows matching the\n reference (number prefix, description, USER/SIZE labels, badge).\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-msd-root {\n display: flex; flex-direction: column;\n height: 100%; min-height: 0;\n margin: 0 -16px;\n }\n .ps-msd-scroll {\n flex: 1; min-height: 0;\n overflow-y: auto; -webkit-overflow-scrolling: touch;\n display: flex; flex-direction: column;\n gap: 18px; padding: 8px 16px 32px;\n }\n /* Topbar: back arrow + section name in uppercase /\n .ps-msd-topbar {\n display: flex; align-items: center; justify-content: space-between;\n padding: 8px 0 4px;\n margin-bottom: 4px;\n }\n .ps-msd-back {\n background: none; border: none;\n color: var(--ps-text-primary);\n font-family: inherit;\n padding: 6px; cursor: pointer;\n display: flex; align-items: center; gap: 4px;\n transition: opacity 0.15s;\n flex-shrink: 0;\n }\n .ps-msd-back:hover { opacity: 0.7; }\n .ps-msd-back-arrow { font-size: 16px; line-height: 1; }\n .ps-msd-topbar-title {\n font-size: 12px; font-weight: 700;\n letter-spacing: 0.16em; text-transform: uppercase;\n color: var(--ps-text-primary);\n text-align: center;\n flex: 1;\n }\n .ps-msd-topbar-spacer { width: 32px; flex-shrink: 0; }\n\n / Footer paragraph (italic, small, muted) /\n .ps-msd-footer-note {\n font-size: 11px; line-height: 1.6;\n color: var(--ps-text-muted);\n text-align: center; font-style: italic;\n margin: 14px 12px 0;\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MySizingProfilesView (.ps-msp-) \u2014 full profile management screen\n that replaces the old profile drawer. Grid of profile cards\n matching the ATELIER reference design.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-msp-root {\n display: flex; flex-direction: column;\n height: 100%; min-height: 0;\n }\n .ps-msp-scroll {\n flex: 1; min-height: 0;\n overflow-y: auto; -webkit-overflow-scrolling: touch;\n padding: 4px;\n }\n .ps-msp-header { margin-bottom: max(10px, 0.85vw); }\n .ps-msp-title {\n font-size: max(13px, 0.95vw);\n font-weight: 700;\n color: var(--ps-text-primary);\n margin: 0 0 max(2px, 0.2vw);\n letter-spacing: -0.005em;\n }\n .ps-msp-subtitle {\n font-size: max(10px, 0.7vw);\n color: var(--ps-text-muted);\n margin: 0; line-height: 1.5;\n }\n\n /* Card grid \u2014 compact saved profile cards /\n .ps-msp-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(max(140px, 11vw), 1fr));\n gap: max(8px, 0.7vw);\n margin-bottom: max(14px, 1.2vw);\n }\n .ps-msp-card {\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: max(8px, 0.6vw);\n padding: max(8px, 0.7vw);\n display: flex; flex-direction: column;\n transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;\n box-shadow: 0 1px 3px rgba(0,0,0,0.04);\n position: relative;\n }\n .ps-msp-card:hover {\n border-color: var(--ps-accent);\n box-shadow: 0 4px 12px rgba(33, 84, 239, 0.08);\n }\n .ps-msp-card.ps-active {\n border-color: var(--ps-accent);\n box-shadow: 0 4px 16px rgba(33,84,239,0.12);\n }\n\n .ps-msp-card-header {\n display: flex; align-items: center; justify-content: flex-start;\n margin-bottom: 8px;\n }\n .ps-msp-card-tag {\n font-size: 9px; font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n background: var(--ps-bg-secondary);\n color: var(--ps-text-muted);\n padding: 4px 8px; border-radius: 4px;\n border: 1px solid var(--ps-border-subtle);\n }\n .ps-msp-card.ps-active .ps-msp-card-tag {\n background: var(--ps-accent); color: #FFFFFF;\n border-color: var(--ps-accent);\n }\n .ps-msp-avatar { color: var(--ps-accent); border-color: var(--ps-accent); }\n .ps-msp-avatar-tag { background: var(--ps-accent); }\n\n / Compact circular profile avatar \u2014 vw-scaled. /\n .ps-msp-card-circle {\n width: max(56px, 4.5vw);\n height: max(56px, 4.5vw);\n border-radius: 50%;\n background: var(--ps-bg-secondary);\n border: 2px solid var(--ps-accent);\n box-shadow: 0 0.3vw 0.9vw rgba(33, 84, 239, 0.15);\n overflow: hidden;\n display: flex; align-items: center; justify-content: center;\n color: var(--ps-accent);\n margin: max(4px, 0.35vw) auto max(8px, 0.7vw);\n }\n .ps-msp-card-circle img {\n width: 100%; height: 100%; object-fit: cover;\n object-position: 50% 12%;\n }\n .ps-msp-avatar {\n position: relative;\n display: flex; align-items: center; justify-content: center;\n width: 56px; height: 56px;\n border-radius: 50%;\n background: var(--ps-bg-primary);\n color: var(--ps-text-secondary);\n border: 1.5px solid var(--ps-border-subtle);\n }\n .ps-msp-avatar-tag {\n position: absolute; bottom: -2px; right: -2px;\n width: 18px; height: 18px; border-radius: 50%;\n background: var(--ps-accent); color: #FFFFFF;\n font-size: 10px; font-weight: 700;\n display: flex; align-items: center; justify-content: center;\n border: 2px solid var(--ps-bg-primary);\n }\n\n .ps-msp-card-name {\n font-size: max(12px, 0.85vw);\n font-weight: 700;\n color: var(--ps-text-primary);\n margin-bottom: max(4px, 0.4vw);\n }\n .ps-msp-card-meta {\n display: flex; flex-direction: column;\n gap: max(2px, 0.2vw);\n margin-bottom: max(6px, 0.55vw);\n }\n .ps-msp-meta-row {\n display: flex; align-items: center; justify-content: space-between;\n padding: max(2px, 0.2vw) 0;\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-msp-meta-row:last-child { border-bottom: none; }\n .ps-msp-meta-label {\n font-size: max(8px, 0.55vw);\n font-weight: 600;\n letter-spacing: 0.1em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-msp-meta-value {\n font-size: max(10px, 0.7vw);\n font-weight: 600;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n }\n\n .ps-msp-card-actions {\n display: flex; gap: max(4px, 0.4vw);\n margin-top: auto;\n }\n .ps-msp-card-select {\n flex: 1;\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: max(4px, 0.35vw);\n padding: max(6px, 0.55vw);\n font-family: inherit;\n font-size: max(9px, 0.65vw);\n font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n }\n .ps-msp-card-select:hover { opacity: 0.85; }\n .ps-msp-card-select:active { transform: scale(0.97); }\n .ps-msp-card-select.ps-active {\n background: var(--ps-accent);\n box-shadow: 0 0 0 2px rgba(33, 84, 239, 0.18);\n }\n .ps-msp-card-edit {\n width: max(28px, 2.2vw); height: max(28px, 2.2vw);\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: max(4px, 0.35vw);\n display: flex; align-items: center; justify-content: center;\n color: var(--ps-text-secondary); cursor: pointer;\n transition: border-color 0.15s, color 0.15s;\n }\n .ps-msp-card-edit:hover {\n border-color: var(--ps-accent);\n color: var(--ps-accent);\n }\n .ps-msp-card-delete {\n width: max(28px, 2.2vw); height: max(28px, 2.2vw);\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: max(4px, 0.35vw);\n display: flex; align-items: center; justify-content: center;\n color: var(--ps-text-secondary); cursor: pointer;\n transition: border-color 0.15s, color 0.15s;\n }\n .ps-msp-card-delete:hover {\n border-color: #F87171;\n color: #F87171;\n }\n\n / Edit measurements modal /\n .ps-msp-edit-overlay {\n position: absolute; inset: 0; z-index: 100;\n background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);\n display: flex; align-items: center; justify-content: center;\n padding: 16px; animation: ps-fade-in 0.2s ease;\n }\n .ps-msp-edit-modal {\n background: var(--ps-bg-primary); border-radius: max(10px, 0.8vw);\n width: 100%; max-width: max(320px, 26vw);\n max-height: clamp(400px, 70vh, 600px);\n display: flex; flex-direction: column;\n box-shadow: 0 12px 40px rgba(0,0,0,0.15);\n animation: ps-slide-up 0.25s ease;\n overflow: hidden;\n }\n .ps-msp-edit-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: max(12px, 1vw) max(14px, 1.1vw);\n border-bottom: 1px solid var(--ps-border-color);\n flex-shrink: 0;\n }\n .ps-msp-edit-header h3 {\n font-size: max(13px, 0.95vw); font-weight: 600; color: var(--ps-text-primary); margin: 0;\n }\n .ps-msp-edit-close {\n background: none; border: none; color: var(--ps-text-secondary);\n cursor: pointer; padding: max(2px, 0.2vw);\n }\n .ps-msp-edit-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: max(8px, 0.7vw);\n padding: max(12px, 1vw) max(14px, 1.1vw);\n overflow-y: auto; flex: 1;\n }\n .ps-msp-edit-field {\n display: flex; flex-direction: column; gap: max(3px, 0.25vw);\n }\n .ps-msp-edit-label {\n font-size: max(9px, 0.6vw); font-weight: 600; text-transform: uppercase;\n letter-spacing: 0.06em; color: var(--ps-text-muted);\n }\n .ps-msp-edit-input-wrap {\n display: flex; align-items: center;\n border: 1px solid var(--ps-border-color); border-radius: max(5px, 0.4vw);\n overflow: hidden; background: var(--ps-bg-secondary);\n }\n .ps-msp-edit-input {\n flex: 1; border: none; background: transparent; padding: max(6px, 0.5vw) max(7px, 0.6vw);\n font-size: max(12px, 0.85vw); color: var(--ps-text-primary); outline: none;\n min-width: 0; -moz-appearance: textfield;\n }\n .ps-msp-edit-input::-webkit-inner-spin-button,\n .ps-msp-edit-input::-webkit-outer-spin-button { -webkit-appearance: none; }\n .ps-msp-edit-input:focus { box-shadow: inset 0 0 0 1px var(--ps-accent); }\n .ps-msp-edit-unit {\n font-size: max(10px, 0.65vw); color: var(--ps-text-muted);\n padding-right: max(7px, 0.6vw);\n font-weight: 500; flex-shrink: 0;\n }\n .ps-msp-edit-actions {\n display: flex; gap: max(6px, 0.5vw); justify-content: flex-end;\n flex-shrink: 0;\n padding: max(10px, 0.8vw) max(14px, 1.1vw);\n border-top: 1px solid var(--ps-border-color);\n background: var(--ps-bg-primary);\n }\n .ps-msp-edit-cancel {\n padding: max(6px, 0.5vw) max(12px, 1vw);\n font-size: max(11px, 0.78vw); font-weight: 500;\n border: 1px solid var(--ps-border-color); border-radius: max(5px, 0.4vw);\n background: transparent; color: var(--ps-text-secondary); cursor: pointer;\n }\n .ps-msp-edit-save {\n padding: max(6px, 0.5vw) max(14px, 1.2vw);\n font-size: max(11px, 0.78vw); font-weight: 600;\n border: none; border-radius: max(5px, 0.4vw);\n background: var(--ps-accent); color: #fff; cursor: pointer;\n }\n .ps-msp-edit-save:hover { opacity: 0.9; }\n\n / \u2500\u2500 Custom delete confirmation modal (replaces browser confirm()) \u2500\u2500 /\n .ps-confirm-overlay {\n position: absolute; inset: 0; z-index: 200;\n background: rgba(255,255,255,0.04); backdrop-filter: blur(8px);\n display: flex; align-items: center; justify-content: center;\n padding: 1vw; animation: ps-fade-in 0.18s ease;\n border-radius: inherit; overflow: hidden;\n }\n .ps-confirm-modal {\n background: var(--ps-bg-primary); border-radius: max(10px, 0.8vw);\n padding: max(16px, 1.4vw); width: max(220px, 18vw);\n box-shadow: 0 8px 32px rgba(0,0,0,0.18); animation: ps-slide-up 0.2s ease;\n text-align: center;\n }\n .ps-confirm-icon {\n width: max(32px, 2.6vw); height: max(32px, 2.6vw);\n background: #FEE2E2; border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n margin: 0 auto max(8px, 0.6vw);\n color: #EF4444;\n }\n .ps-confirm-modal p {\n font-size: max(12px, 0.85vw); font-weight: 600;\n color: var(--ps-text-primary); margin: 0 0 max(4px, 0.35vw);\n }\n .ps-confirm-modal small {\n font-size: max(10px, 0.65vw); color: var(--ps-text-muted);\n display: block; margin-bottom: max(12px, 1vw);\n }\n .ps-confirm-actions {\n display: flex; gap: max(6px, 0.5vw); justify-content: center;\n }\n .ps-confirm-cancel {\n flex: 1; padding: max(6px, 0.5vw);\n font-size: max(11px, 0.75vw); font-weight: 500;\n border: 1px solid var(--ps-border-color); border-radius: max(5px, 0.4vw);\n background: transparent; color: var(--ps-text-secondary); cursor: pointer;\n transition: background 0.15s;\n }\n .ps-confirm-cancel:hover { background: var(--ps-bg-secondary); }\n .ps-confirm-delete {\n flex: 1; padding: max(6px, 0.5vw);\n font-size: max(11px, 0.75vw); font-weight: 600;\n border: none; border-radius: max(5px, 0.4vw);\n background: #EF4444; color: #fff; cursor: pointer;\n transition: opacity 0.15s;\n }\n .ps-confirm-delete:hover { opacity: 0.88; }\n\n / \"Create New Profile\" empty card \u2014 same compact size as the saved\n profile cards (no min-height forcing it taller). /\n .ps-msp-card-create {\n background: var(--ps-bg-secondary);\n border: 2px dashed var(--ps-border-color);\n align-items: center; justify-content: center;\n text-align: center;\n cursor: pointer;\n min-height: 0;\n transition: border-color 0.15s, background 0.15s;\n }\n .ps-msp-card-create:hover {\n border-color: var(--ps-accent);\n background: rgba(33,84,239,0.04);\n }\n / When create card is the only item (no saved profiles), make it wider /\n .ps-msp-grid > .ps-msp-card-create:only-child {\n grid-column: 1 / -1;\n min-height: max(160px, 12vw);\n max-width: 380px;\n margin: 0 auto;\n }\n .ps-msp-create-icon {\n width: max(32px, 2.6vw);\n height: max(32px, 2.6vw);\n background: var(--ps-accent); color: #FFFFFF;\n border-radius: max(4px, 0.35vw);\n display: flex; align-items: center; justify-content: center;\n margin-bottom: max(6px, 0.55vw);\n }\n .ps-msp-create-title {\n font-size: max(11px, 0.78vw);\n font-weight: 700;\n color: var(--ps-text-primary);\n margin-bottom: max(2px, 0.2vw);\n }\n .ps-msp-create-sub {\n font-size: max(8px, 0.55vw);\n font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n\n / Recent size calculations section /\n .ps-msp-history-section {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid var(--ps-border-subtle);\n }\n .ps-msp-history-title {\n font-size: 13px; font-weight: 700;\n letter-spacing: 0.1em; text-transform: uppercase;\n color: var(--ps-text-primary);\n margin: 0 0 14px;\n }\n .ps-msp-history-list {\n display: flex; flex-direction: column; gap: 8px;\n }\n .ps-msp-history-card {\n display: flex; align-items: center; gap: 12px;\n padding: 12px;\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: 8px;\n }\n .ps-msp-history-thumb {\n width: 48px; height: 48px;\n border-radius: 6px;\n background: var(--ps-bg-secondary);\n overflow: hidden;\n flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-msp-history-thumb img {\n max-width: 100%; max-height: 100%; object-fit: contain;\n }\n .ps-msp-history-info {\n flex: 1; min-width: 0;\n display: flex; flex-direction: column; gap: 2px;\n }\n .ps-msp-history-name {\n font-size: 13px; font-weight: 600;\n color: var(--ps-text-primary);\n overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n }\n .ps-msp-history-profile {\n font-size: 10px;\n color: var(--ps-text-muted);\n }\n .ps-msp-history-meta {\n font-size: 10px;\n color: var(--ps-text-muted);\n display: flex; align-items: center; gap: 4px;\n }\n .ps-msp-history-meta svg { color: var(--ps-text-muted); }\n .ps-msp-history-size {\n display: flex; flex-direction: column; align-items: flex-end;\n flex-shrink: 0;\n }\n .ps-msp-history-size-label {\n font-size: 9px; font-weight: 600;\n letter-spacing: 0.1em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-msp-history-size-value {\n font-size: 22px; font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n line-height: 1;\n }\n\n @media (max-width: 768px) {\n / Profile card grid /\n .ps-msp-grid { grid-template-columns: 1fr; gap: 3vw; }\n .ps-msp-card-create { min-height: 22vw; }\n .ps-msp-header { margin-bottom: 3vw; }\n .ps-msp-title { font-size: 5.6vw; }\n .ps-msp-subtitle { font-size: 3vw; }\n .ps-msp-card { padding: 3.5vw; border-radius: 3vw; }\n .ps-msp-card-tag { font-size: 2.3vw; padding: 1vw 2vw; border-radius: 1vw; }\n .ps-msp-card-circle { width: 18vw; height: 18vw; margin: 2vw auto 3vw; }\n .ps-msp-card-name { font-size: 4.1vw; margin-bottom: 2vw; }\n .ps-msp-meta-label { font-size: 2.5vw; }\n .ps-msp-meta-value { font-size: 3.3vw; }\n .ps-msp-meta-row { padding: 1.5vw 0; }\n .ps-msp-card-actions { gap: 2vw; }\n .ps-msp-card-select { font-size: 2.6vw; padding: 2.5vw; border-radius: 1.5vw; }\n .ps-msp-card-edit, .ps-msp-card-delete { width: 10vw; height: 10vw; border-radius: 2vw; }\n\n / Profile measurements view /\n .ps-pmv-hero { padding: 3vw 0 2vw; }\n .ps-pmv-hero-name { font-size: 6vw; }\n .ps-pmv-hero-eyebrow { font-size: 2.5vw; letter-spacing: 0.1em; }\n .ps-pmv-data { gap: 3vw; }\n .ps-pmv-basics { gap: 1.5vw; }\n .ps-pmv-basic-row { gap: 2.5vw; padding: 2.5vw 0; }\n .ps-pmv-basic-icon { width: 6vw; height: 6vw; }\n .ps-pmv-basic-label { font-size: 2.8vw; }\n .ps-pmv-basic-value { font-size: 3.6vw; }\n .ps-pmv-section-title { font-size: 2.5vw; letter-spacing: 0.12em; }\n .ps-pmv-measure-list { gap: 0; }\n .ps-pmv-measure-row { gap: 2.5vw; padding: 2.5vw 0; }\n .ps-pmv-measure-icon { width: 7vw; height: 7vw; }\n .ps-pmv-measure-label { font-size: 2.8vw; }\n .ps-pmv-measure-value { font-size: 3.3vw; }\n .ps-pmv-measure-input { font-size: 3.3vw; padding: 1.5vw; }\n .ps-pmv-measure-input-unit { font-size: 2.8vw; }\n .ps-pmv-inline-input { font-size: 3.3vw; width: 11vw; }\n .ps-pmv-inline-unit { font-size: 2.6vw; }\n .ps-pmv-inline-select { font-size: 3.3vw; }\n .ps-pmv-actions { gap: 2.5vw; padding-top: 3vw; flex-wrap: wrap; }\n .ps-pmv-actions-right { gap: 2vw; flex-wrap: wrap; }\n .ps-pmv-btn-primary, .ps-pmv-btn-secondary {\n padding: 3.5vw 4vw; font-size: 3vw; border-radius: 2vw;\n }\n .ps-pmv-btn-edit, .ps-pmv-btn-delete {\n padding: 3vw 3.5vw; font-size: 2.8vw; border-radius: 2vw;\n }\n\n / Delete confirmation modal \u2014 mobile sizing /\n .ps-confirm-modal { width: 85vw; padding: 5vw; border-radius: 3vw; }\n .ps-confirm-icon { width: 10vw; height: 10vw; margin-bottom: 3vw; }\n .ps-confirm-modal p { font-size: 4vw; }\n .ps-confirm-modal small { font-size: 3.3vw; margin-bottom: 4vw; }\n .ps-confirm-actions { gap: 2.5vw; }\n .ps-confirm-cancel, .ps-confirm-delete { padding: 3.5vw 4vw; font-size: 3.3vw; border-radius: 2vw; }\n\n / Edit measurements modal \u2014 bottom sheet on mobile /\n .ps-msp-edit-overlay { padding: 0; align-items: flex-end; }\n .ps-msp-edit-modal {\n width: 100%; max-width: 100%;\n border-radius: 4vw 4vw 0 0;\n max-height: 85dvh;\n }\n .ps-msp-edit-header { padding: 3.5vw 4vw; }\n .ps-msp-edit-header h3 { font-size: 4.6vw; }\n .ps-msp-edit-grid { padding: 3vw 4vw; gap: 3vw; }\n .ps-msp-edit-label { font-size: 2.8vw; }\n .ps-msp-edit-input { font-size: 3.3vw; padding: 2vw 2.5vw; }\n .ps-msp-edit-unit { font-size: 3vw; padding-right: 2vw; }\n .ps-msp-edit-actions { padding: 3vw 4vw; gap: 2.5vw; }\n .ps-msp-edit-cancel, .ps-msp-edit-save { padding: 3.5vw 5vw; font-size: 3.3vw; border-radius: 2vw; }\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CreateProfileWizard (.ps-cpw-) \u2014 multi-step profile creation\n wizard matching the ATELIER reference but themed with --ps-accent\n instead of monochrome black.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-cpw-root {\n display: flex; flex-direction: column;\n height: 100%; min-height: 0;\n width: 100%; max-width: 100%;\n box-sizing: border-box;\n overflow-x: hidden;\n }\n\n /* Step header \u2014 single tiny title + a thin progress bar inline.\n All sizing is vw-based with sensible clamps so the wizard scales\n proportionally from a 320px phone all the way up to a 5000px display\n without losing its ratios. /\n .ps-cpw-step-head {\n display: flex; align-items: center; justify-content: space-between;\n gap: clamp(8px, 0.75vw, 16px);\n padding: clamp(4px, 0.4vw, 10px) clamp(12px, 1vw, 22px);\n border-bottom: 1px solid var(--ps-border-subtle);\n flex-shrink: 0;\n }\n .ps-cpw-eyebrow { display: none; }\n .ps-cpw-step-title {\n font-size: clamp(10px, 0.7vw, 14px);\n font-weight: 600;\n color: var(--ps-text-primary);\n letter-spacing: 0.02em;\n margin: 0;\n text-transform: uppercase;\n }\n .ps-cpw-progress {\n display: flex; flex-direction: column; align-items: flex-end;\n gap: 0; flex-shrink: 0;\n min-width: clamp(60px, 5vw, 100px);\n }\n .ps-cpw-progress-track {\n width: 100%; height: clamp(2px, 0.12vw, 3px);\n background: var(--ps-border-color); border-radius: 2px;\n overflow: hidden;\n }\n .ps-cpw-progress-fill {\n height: 100%; background: var(--ps-accent);\n transition: width 0.4s cubic-bezier(0.32, 0.72, 0, 1);\n }\n .ps-cpw-progress-label { display: none; }\n\n .ps-cpw-body {\n display: flex; flex-direction: column;\n gap: max(10px, 0.85vw);\n flex: 1; min-height: 0;\n width: 100%; max-width: 100%;\n box-sizing: border-box;\n overflow-y: auto; overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n padding: max(10px, 0.9vw) max(12px, 1vw);\n }\n\n / Step 1 \u2014 Identity form (compact, vw-scaled) /\n .ps-cpw-identity {\n display: flex; flex-direction: column;\n gap: max(8px, 0.7vw);\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n }\n .ps-cpw-field {\n display: flex; flex-direction: column;\n gap: max(4px, 0.4vw);\n }\n .ps-cpw-field-label {\n font-size: max(9px, 0.62vw);\n font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-cpw-input {\n background: transparent; border: none;\n border-bottom: 1px solid var(--ps-border-color);\n color: var(--ps-text-primary);\n font-family: inherit;\n font-size: max(13px, 0.95vw);\n font-weight: 500;\n padding: max(4px, 0.4vw) 0 max(6px, 0.55vw);\n outline: none;\n transition: border-color 0.15s;\n }\n .ps-cpw-input::placeholder { color: var(--ps-text-muted); font-weight: 500; opacity: 0.7; }\n .ps-cpw-input:focus { border-bottom-color: var(--ps-accent); }\n .ps-cpw-input::-webkit-outer-spin-button,\n .ps-cpw-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-cpw-input[type=\"number\"] { -moz-appearance: textfield; }\n\n .ps-cpw-pill-row {\n display: flex; align-items: center;\n gap: max(6px, 0.5vw);\n flex-wrap: wrap;\n }\n .ps-cpw-pill-group {\n display: flex; align-items: center;\n background: var(--ps-bg-secondary);\n border: 1px solid var(--ps-border-color);\n border-radius: 999px;\n padding: max(2px, 0.15vw);\n }\n .ps-cpw-pill {\n background: none; border: none;\n padding: max(4px, 0.35vw) max(10px, 0.9vw);\n border-radius: 999px;\n font-family: inherit;\n font-size: max(10px, 0.7vw);\n font-weight: 600;\n color: var(--ps-text-secondary); cursor: pointer;\n transition: background 0.15s, color 0.15s;\n }\n .ps-cpw-pill.ps-active {\n background: var(--ps-accent); color: #FFFFFF;\n }\n\n .ps-cpw-field-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(max(140px, 11vw), 1fr));\n gap: max(14px, 1.2vw);\n }\n\n / Two-column split: inputs stacked left, photo right /\n .ps-cpw-split {\n display: grid;\n grid-template-columns: 1fr max(180px, 14vw);\n gap: max(16px, 1.4vw);\n align-items: start;\n }\n .ps-cpw-split-left {\n display: flex; flex-direction: column;\n gap: max(14px, 1.2vw);\n min-width: 0;\n }\n .ps-cpw-split-right {\n display: flex; flex-direction: column;\n gap: max(6px, 0.55vw);\n min-width: 0;\n }\n .ps-cpw-error {\n font-size: max(10px, 0.72vw);\n color: var(--ps-error-color);\n margin-top: calc(max(4px, 0.4vw) -1);\n }\n\n /* Optional photo upload (step 1) /\n .ps-cpw-photo {\n display: flex; flex-direction: column; gap: 8px;\n margin-top: 4px;\n }\n .ps-cpw-photo-upload {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 8px; padding: 38px 18px;\n min-height: 220px;\n background: var(--ps-bg-secondary);\n border: 2px dashed var(--ps-border-color);\n border-radius: 12px;\n color: var(--ps-text-secondary); cursor: pointer;\n font-family: inherit;\n transition: border-color 0.15s, background 0.15s;\n }\n .ps-cpw-photo-upload:hover {\n border-color: var(--ps-accent);\n background: rgba(33, 84, 239, 0.04);\n }\n .ps-cpw-photo-upload:disabled { opacity: 0.5; cursor: wait; }\n .ps-cpw-photo-upload svg { color: var(--ps-accent); }\n .ps-cpw-photo-upload-title {\n font-size: 13px; font-weight: 600;\n color: var(--ps-text-primary);\n }\n .ps-cpw-photo-upload-hint {\n font-size: 11px; font-weight: 400;\n color: var(--ps-text-muted);\n }\n .ps-cpw-photo-preview {\n position: relative;\n width: 100%;\n border-radius: 12px; overflow: hidden;\n background: var(--ps-bg-secondary);\n border: 1px solid var(--ps-border-subtle);\n aspect-ratio: 3 / 4;\n display: flex; align-items: center; justify-content: center;\n }\n .ps-cpw-photo-preview img {\n max-width: 100%; max-height: 100%;\n width: auto; height: 100%;\n object-fit: contain;\n }\n .ps-cpw-photo-remove {\n position: absolute; top: 8px; right: 8px;\n width: 28px; height: 28px; border-radius: 50%;\n background: rgba(0, 0, 0, 0.65); color: #FFFFFF;\n border: none; cursor: pointer;\n font-size: 18px; line-height: 1;\n display: flex; align-items: center; justify-content: center;\n }\n\n / Step 2 \u2014 Silhouette (vw-scaled) /\n .ps-cpw-silhouette {\n display: flex; flex-direction: column;\n gap: clamp(16px, 1.4vw, 32px);\n }\n .ps-cpw-section {\n display: flex; flex-direction: column;\n gap: clamp(8px, 0.7vw, 16px);\n }\n .ps-cpw-section-head {\n display: flex; flex-direction: column;\n gap: clamp(2px, 0.2vw, 6px);\n }\n .ps-cpw-section-title {\n font-size: clamp(10px, 0.72vw, 14px);\n font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-primary);\n }\n .ps-cpw-section-sub {\n font-size: clamp(10px, 0.7vw, 13px);\n font-weight: 400;\n color: var(--ps-text-muted);\n }\n .ps-cpw-card-row {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: clamp(8px, 0.75vw, 16px);\n / Inside a flex parent (ProgressiveStep with flex:1), let the row\n claim leftover vertical space so the cards stretch to fill it. /\n flex: 1; min-height: 0;\n }\n .ps-cpw-bra-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: clamp(8px, 0.75vw, 16px);\n }\n .ps-cpw-bra-field {\n display: flex; flex-direction: column;\n gap: clamp(4px, 0.4vw, 10px);\n }\n .ps-cpw-card {\n display: flex; flex-direction: column; align-items: center;\n background: var(--ps-bg-primary);\n border: 2px solid var(--ps-border-subtle);\n border-radius: clamp(8px, 0.6vw, 14px);\n padding: clamp(10px, 0.85vw, 18px) clamp(6px, 0.5vw, 12px) clamp(8px, 0.65vw, 14px);\n cursor: pointer; font-family: inherit;\n transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;\n / Stretch inside the grid track so all 3 cards in the row fill\n the available height equally. /\n min-width: 0; min-height: 0;\n }\n .ps-cpw-card:hover {\n border-color: rgba(33, 84, 239, 0.35);\n }\n .ps-cpw-card.ps-active {\n border-color: var(--ps-accent);\n box-shadow: 0 0.4vw 1.1vw rgba(33, 84, 239, 0.16);\n transform: translateY(-1px);\n }\n .ps-cpw-card-thumb {\n width: 100%;\n / Fills whatever space the card has \u2014 combined with the card's\n min-height: 0, this lets the thumb image grow with viewport size\n and stretch to fill the wizard body. /\n flex: 1; min-height: 0;\n display: flex; align-items: center; justify-content: center;\n overflow: hidden;\n margin-bottom: clamp(4px, 0.4vw, 10px);\n }\n .ps-cpw-card-thumb img {\n max-width: 100%; max-height: 100%;\n object-fit: contain;\n }\n .ps-cpw-card-label {\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-cpw-card.ps-active .ps-cpw-card-label {\n color: var(--ps-accent);\n }\n\n / Footer actions \u2014 vw-scaled /\n .ps-cpw-footer {\n display: flex; align-items: center; justify-content: space-between;\n gap: clamp(8px, 0.7vw, 14px);\n padding: clamp(6px, 0.55vw, 12px) clamp(12px, 1vw, 22px);\n border-top: 1px solid var(--ps-border-subtle);\n background: var(--ps-bg-primary);\n flex-shrink: 0;\n }\n .ps-cpw-back-btn {\n background: none; border: none;\n color: var(--ps-text-secondary);\n font-family: inherit;\n font-size: clamp(10px, 0.7vw, 13px);\n font-weight: 600;\n cursor: pointer;\n padding: clamp(6px, 0.55vw, 12px) clamp(2px, 0.2vw, 6px);\n transition: color 0.15s;\n }\n .ps-cpw-back-btn:hover { color: var(--ps-text-primary); }\n .ps-cpw-next-btn {\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: clamp(4px, 0.35vw, 8px);\n padding: clamp(8px, 0.7vw, 14px) clamp(16px, 1.4vw, 28px);\n font-family: inherit;\n font-size: clamp(10px, 0.7vw, 13px);\n font-weight: 700;\n letter-spacing: 0.1em; text-transform: uppercase;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;\n box-shadow: 0 0.25vw 0.8vw rgba(33, 84, 239, 0.16);\n }\n .ps-cpw-next-btn:disabled {\n background: var(--ps-border-color);\n color: var(--ps-text-muted);\n box-shadow: none;\n cursor: default;\n }\n .ps-cpw-next-btn:hover { opacity: 0.92; }\n .ps-cpw-next-btn:active { transform: scale(0.98); }\n\n / Gender pill \u2014 used inside the inline-row \"GENDER\" field. Sized to\n match the text inputs (compact, underlined-feel) so it doesn't tower\n over the other rows in the form. /\n .ps-cpw-gender-pill {\n appearance: none;\n background: transparent;\n color: var(--ps-text-secondary);\n border: 1px solid var(--ps-border-color);\n border-radius: clamp(6px, 0.45vw, 10px);\n padding: clamp(4px, 0.35vw, 8px) clamp(10px, 0.85vw, 18px);\n font-family: inherit;\n font-size: clamp(10px, 0.7vw, 13px);\n font-weight: 600;\n cursor: pointer;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n }\n .ps-cpw-gender-pill:hover {\n border-color: var(--ps-accent);\n color: var(--ps-accent);\n }\n .ps-cpw-gender-pill[data-active=\"true\"] {\n background: var(--ps-accent);\n color: #fff;\n border-color: var(--ps-accent);\n }\n\n / When the wizard is on the photo step, suppress the global\n ps-tryon-back-btn rendered by the modal shell \u2014 the wizard's own\n footer Back button is enough, and stacking two looks cluttered. The\n marker class is added by CreateProfileWizard's root and the rule\n reaches up to its preceding sibling via :has(). /\n .ps-tryon-body:has(.ps-cpw-hide-global-back) > .ps-tryon-back-btn {\n display: none;\n }\n\n @keyframes ps-cpw-shake {\n 0%, 100% { transform: translateX(0); }\n 15% { transform: translateX(-5px); }\n 30% { transform: translateX(5px); }\n 45% { transform: translateX(-4px); }\n 60% { transform: translateX(4px); }\n 75% { transform: translateX(-2px); }\n 90% { transform: translateX(2px); }\n }\n .ps-cpw-shake {\n animation: ps-cpw-shake 0.5s ease;\n outline: 1.5px solid var(--ps-error, #ef4444) !important;\n outline-offset: 1px;\n }\n\n / No wizard-specific @media (max-width: 768px) overrides anymore.\n Every ps-cpw-* rule is clamp/vw-driven, so the layout shrinks\n gracefully from 320px \u2192 5000px without a hard breakpoint. /\n\n / \u2500\u2500 Progressive (one-question-at-a-time) flow \u2500\u2500 /\n .ps-cpw-progressive {\n display: flex; flex-direction: column;\n gap: clamp(12px, 1vw, 22px);\n padding: clamp(6px, 0.5vw, 12px) 0;\n / Fills the wizard body so the card row can stretch vertically /\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n }\n .ps-cpw-fade-in {\n animation: ps-cpw-fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);\n }\n @keyframes ps-cpw-fade-up {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n / \u2500\u2500 Method picker (initial step) \u2014 cards stretch to fill body \u2500\u2500 /\n .ps-cpw-method-picker {\n display: flex; flex-direction: column;\n gap: clamp(8px, 0.7vw, 14px);\n padding: clamp(4px, 0.4vw, 10px) 0;\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n }\n .ps-cpw-method-intro { display: none; }\n / Grid claims the picker's leftover height so the cards inside\n stretch vertically to fill it. /\n .ps-cpw-method-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: clamp(8px, 0.75vw, 16px);\n width: 100%; max-width: 100%;\n box-sizing: border-box;\n flex: 1; min-height: 0;\n }\n / \u2500\u2500 Editorial method card \u2014 Stripe / Linear / Notion style \u2500\u2500\n Single-block layout: small icon badge in the top-left, content\n below (eyebrow \u2192 title \u2192 description), corner number watermark in\n the top-right, hover arrow indicator in the bottom-right.\n No big image strip \u2014 minimal, professional. /\n .ps-cpw-method-card {\n position: relative;\n display: flex; flex-direction: column; align-items: flex-start;\n gap: clamp(6px, 0.55vw, 12px);\n min-width: 0; min-height: 0;\n width: 100%; max-width: 100%;\n box-sizing: border-box;\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: clamp(10px, 0.75vw, 16px);\n padding: clamp(16px, 1.3vw, 28px) clamp(16px, 1.3vw, 28px) clamp(20px, 1.6vw, 34px);\n overflow: hidden;\n cursor: pointer; font-family: inherit; text-align: left;\n transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s, background 0.22s;\n box-shadow: 0 0.1vw 0.4vw rgba(20, 30, 60, 0.04);\n }\n .ps-cpw-method-card::before {\n / Thin top accent bar that scales in from the left on hover /\n content: \"\"; position: absolute; top: 0; left: 0; right: 0;\n height: clamp(2px, 0.15vw, 4px);\n background: var(--ps-accent);\n transform: scaleX(0); transform-origin: left center;\n transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 3;\n }\n .ps-cpw-method-card:hover {\n border-color: var(--ps-accent);\n transform: translateY(-2px);\n box-shadow: 0 0.6vw 1.6vw rgba(33, 84, 239, 0.14);\n }\n .ps-cpw-method-card:hover::before { transform: scaleX(1); }\n\n / Big editorial number watermark \u2014 top right /\n .ps-cpw-method-num {\n position: absolute;\n top: clamp(10px, 0.85vw, 18px);\n right: clamp(14px, 1.1vw, 22px);\n z-index: 2;\n font-family: inherit;\n font-size: clamp(22px, 1.8vw, 36px);\n font-weight: 800;\n line-height: 1;\n letter-spacing: -0.04em;\n color: var(--ps-text-primary);\n opacity: 0.08;\n pointer-events: none;\n transition: color 0.22s, opacity 0.22s, transform 0.22s;\n }\n .ps-cpw-method-card:hover .ps-cpw-method-num {\n color: var(--ps-accent);\n opacity: 0.32;\n }\n\n / Small tinted icon badge \u2014 top-left of the card /\n .ps-cpw-method-icon-badge {\n width: clamp(40px, 3.2vw, 60px);\n height: clamp(40px, 3.2vw, 60px);\n border-radius: clamp(8px, 0.65vw, 14px);\n background: rgba(33, 84, 239, 0.08);\n display: flex; align-items: center; justify-content: center;\n padding: clamp(6px, 0.5vw, 10px);\n box-sizing: border-box;\n flex-shrink: 0;\n margin-bottom: clamp(8px, 0.7vw, 14px);\n transition: background 0.22s, transform 0.22s;\n }\n .ps-cpw-method-icon-badge img {\n width: 100%; height: 100%;\n object-fit: contain;\n display: block;\n }\n .ps-cpw-method-card:hover .ps-cpw-method-icon-badge {\n background: rgba(33, 84, 239, 0.14);\n transform: scale(1.05);\n }\n\n / Content typography /\n .ps-cpw-method-eyebrow {\n font-size: clamp(8px, 0.55vw, 11px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-cpw-method-title {\n font-size: clamp(14px, 1vw, 19px);\n font-weight: 700;\n color: var(--ps-text-primary);\n letter-spacing: -0.015em;\n line-height: 1.2;\n }\n .ps-cpw-method-desc {\n font-size: clamp(10px, 0.72vw, 13px);\n line-height: 1.5;\n color: var(--ps-text-muted);\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n / Arrow pill \u2014 bottom right corner /\n .ps-cpw-method-arrow {\n position: absolute;\n right: clamp(14px, 1.1vw, 22px);\n bottom: clamp(14px, 1.1vw, 22px);\n width: clamp(24px, 1.8vw, 34px);\n height: clamp(24px, 1.8vw, 34px);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n background: var(--ps-bg-secondary);\n color: var(--ps-text-secondary);\n transition: background 0.22s, color 0.22s, transform 0.22s;\n }\n .ps-cpw-method-arrow svg {\n width: 55%; height: 55%;\n }\n .ps-cpw-method-card:hover .ps-cpw-method-arrow {\n background: var(--ps-accent);\n color: #FFFFFF;\n transform: translateX(0.2vw);\n }\n / Wizard reuses the SDK basics screen's .ps-bp-inline-* row styles for\n parity. This wrapper just gives them a consistent gap and centers\n them inside the wizard body so all rows fit without scrolling. /\n .ps-cpw-inline-fields {\n width: 100%;\n margin-top: clamp(2px, 0.2vw, 6px);\n display: flex; flex-direction: column;\n gap: clamp(4px, 0.4vw, 10px);\n }\n .ps-cpw-inline-fields .ps-bp-inline-row {\n padding: clamp(10px, 0.9vw, 18px) clamp(1px, 0.1vw, 4px);\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-cpw-inline-fields .ps-bp-inline-row:last-child { border-bottom: none; }\n .ps-cpw-inline-fields .ps-bp-inline-label {\n flex: 0 0 clamp(56px, 4.5vw, 90px);\n font-size: clamp(9px, 0.62vw, 12px);\n font-weight: 700;\n color: var(--ps-text-primary);\n letter-spacing: 0.08em;\n }\n .ps-cpw-inline-fields .ps-bp-inline-input {\n font-size: clamp(12px, 0.85vw, 16px);\n padding-bottom: 0.2vw;\n border-bottom: 1px solid var(--ps-border-color);\n color: var(--ps-text-primary);\n }\n .ps-cpw-inline-fields .ps-bp-inline-unit {\n font-size: clamp(10px, 0.7vw, 13px);\n color: var(--ps-text-muted);\n }\n\n / \u2500\u2500 Image path \u2014 split layout with dropzone + photo guide \u2500\u2500\n Two columns: dropzone with silhouette placeholder on the LEFT,\n gender pills + name input + photo-guide checklist on the RIGHT.\n Collapses to single column on narrow viewports via flex-wrap. /\n .ps-cpw-image-split {\n display: grid;\n grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);\n gap: clamp(14px, 1.2vw, 26px);\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n }\n .ps-cpw-image-left {\n display: flex; flex-direction: column;\n min-width: 0; min-height: 0;\n }\n .ps-cpw-image-right {\n display: flex; flex-direction: column;\n gap: clamp(10px, 0.9vw, 18px);\n min-width: 0; min-height: 0;\n }\n\n / Dropzone \u2014 premium card with a faded body silhouette behind the\n upload prompt. Communicates \"this is where the body photo goes\". /\n .ps-cpw-dropzone {\n position: relative;\n display: flex; align-items: center; justify-content: center;\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n padding: clamp(14px, 1.2vw, 26px);\n border: 1.5px dashed var(--ps-border-color);\n border-radius: clamp(10px, 0.75vw, 16px);\n background:\n radial-gradient(ellipse at 50% 60%, rgba(33, 84, 239, 0.05) 0%, transparent 70%),\n var(--ps-bg-secondary);\n color: var(--ps-text-muted);\n cursor: pointer; font-family: inherit;\n overflow: hidden;\n transition: border-color 0.22s, background 0.22s, transform 0.22s;\n }\n .ps-cpw-dropzone:hover {\n border-color: var(--ps-accent);\n transform: translateY(-1px);\n }\n .ps-cpw-dropzone:disabled { opacity: 0.6; cursor: default; transform: none; }\n / Faded body silhouette behind the upload prompt /\n .ps-cpw-dropzone-silhouette {\n position: absolute;\n left: 50%; top: 50%;\n transform: translate(-50%, -50%);\n width: clamp(140px, 14vw, 260px);\n height: auto;\n object-fit: contain;\n opacity: 0.18;\n pointer-events: none;\n }\n .ps-cpw-dropzone-content {\n position: relative;\n z-index: 1;\n display: flex; flex-direction: column; align-items: center;\n gap: clamp(4px, 0.4vw, 10px);\n }\n .ps-cpw-dropzone-upload-icon {\n width: clamp(28px, 2vw, 40px);\n height: clamp(28px, 2vw, 40px);\n color: var(--ps-accent);\n margin-bottom: clamp(2px, 0.2vw, 6px);\n }\n .ps-cpw-dropzone-title {\n font-size: clamp(11px, 0.78vw, 14px);\n font-weight: 600;\n color: var(--ps-text-primary);\n text-align: center;\n }\n .ps-cpw-dropzone-hint {\n font-size: clamp(9px, 0.62vw, 12px);\n color: var(--ps-text-muted);\n letter-spacing: 0.04em;\n }\n\n / Photo preview frame (after upload) /\n .ps-cpw-photo-preview-frame {\n position: relative;\n flex: 1; min-height: 0;\n width: 100%;\n background: var(--ps-bg-secondary);\n border-radius: clamp(10px, 0.75vw, 16px);\n overflow: hidden;\n border: 1px solid var(--ps-border-subtle);\n display: flex; align-items: center; justify-content: center;\n }\n .ps-cpw-photo-preview-img {\n width: 100%; height: 100%;\n object-fit: contain;\n display: block;\n }\n .ps-cpw-photo-retake-pill {\n position: absolute;\n bottom: clamp(8px, 0.7vw, 14px);\n left: 50%;\n transform: translateX(-50%);\n background: rgba(255,255,255,0.95);\n border: 1px solid var(--ps-border-subtle);\n color: var(--ps-text-primary);\n padding: clamp(6px, 0.55vw, 12px) clamp(12px, 1vw, 20px);\n border-radius: 999px;\n font-family: inherit;\n font-size: clamp(10px, 0.7vw, 13px);\n font-weight: 600;\n cursor: pointer;\n backdrop-filter: blur(6px);\n transition: background 0.22s, color 0.22s;\n }\n .ps-cpw-photo-retake-pill:hover {\n background: var(--ps-accent);\n color: #FFFFFF;\n border-color: var(--ps-accent);\n }\n .ps-cpw-photo-remove {\n position: absolute;\n top: clamp(8px, 0.7vw, 14px);\n right: clamp(8px, 0.7vw, 14px);\n width: clamp(24px, 1.8vw, 34px);\n height: clamp(24px, 1.8vw, 34px);\n border-radius: 50%;\n background: rgba(28, 29, 30, 0.7);\n color: #FFFFFF;\n border: none;\n cursor: pointer;\n font-size: clamp(14px, 1.1vw, 18px);\n font-weight: 600;\n display: flex; align-items: center; justify-content: center;\n backdrop-filter: blur(6px);\n transition: background 0.18s;\n }\n .ps-cpw-photo-remove:hover { background: rgba(28, 29, 30, 0.9); }\n\n / Photo guide checklist \u2014 soft tinted card on the right column /\n .ps-cpw-photo-guide {\n background: var(--ps-bg-secondary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: clamp(10px, 0.75vw, 16px);\n padding: clamp(12px, 1vw, 20px) clamp(14px, 1.1vw, 22px);\n display: flex; flex-direction: column;\n gap: clamp(6px, 0.55vw, 12px);\n margin-top: auto;\n }\n .ps-cpw-photo-guide-title {\n font-size: clamp(9px, 0.62vw, 11px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ps-text-primary);\n }\n .ps-cpw-photo-guide-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex; flex-direction: column;\n gap: clamp(4px, 0.4vw, 10px);\n }\n .ps-cpw-photo-guide-list li {\n display: flex; align-items: flex-start;\n gap: clamp(6px, 0.55vw, 12px);\n font-size: clamp(10px, 0.72vw, 13px);\n line-height: 1.45;\n color: var(--ps-text-secondary);\n }\n .ps-cpw-photo-guide-list li svg {\n flex-shrink: 0;\n width: clamp(12px, 0.9vw, 16px);\n height: clamp(12px, 0.9vw, 16px);\n color: var(--ps-accent);\n margin-top: 0.15em;\n }\n .ps-cpw-photo-frame-img {\n width: 100%; height: 100%;\n object-fit: contain;\n display: block;\n }\n .ps-cpw-photo-retake {\n align-self: center;\n padding: clamp(8px, 0.7vw, 14px) clamp(16px, 1.4vw, 28px);\n border-radius: 999px;\n background: transparent;\n color: var(--ps-accent);\n border: 2px solid var(--ps-accent);\n font-weight: 700;\n font-size: clamp(10px, 0.7vw, 13px);\n text-transform: uppercase; letter-spacing: 0.08em;\n cursor: pointer; font-family: inherit;\n transition: background 0.18s;\n }\n .ps-cpw-photo-retake:hover { background: rgba(33, 84, 239, 0.08); }\n\n / \u2500\u2500 Age-gate overlay on the dropzone \u2500\u2500\n Dropzone stays visible but blurred; overlay shows a premium card\n with the 18+ confirmation question and two pill buttons. /\n .ps-cpw-dropzone-wrap {\n position: relative;\n flex: 1; min-height: 0;\n width: 100%; box-sizing: border-box;\n display: flex; flex-direction: column;\n }\n .ps-cpw-dropzone-blurred {\n filter: blur(6px) saturate(0.7);\n pointer-events: none;\n user-select: none;\n }\n .ps-cpw-age-gate {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n padding: clamp(12px, 1vw, 24px);\n border-radius: clamp(10px, 0.75vw, 16px);\n background: rgba(255, 255, 255, 0.55);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n z-index: 2;\n animation: ps-cpw-age-gate-in 0.28s ease-out both;\n }\n @keyframes ps-cpw-age-gate-in {\n 0% { opacity: 0; transform: scale(0.97); }\n 100% { opacity: 1; transform: scale(1); }\n }\n .ps-cpw-age-gate-card {\n width: 100%; max-width: clamp(240px, 24vw, 420px);\n padding: clamp(16px, 1.4vw, 28px) clamp(18px, 1.6vw, 32px);\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: clamp(10px, 0.9vw, 18px);\n box-shadow: 0 20px 40px -12px rgba(17, 24, 39, 0.25),\n 0 8px 16px -8px rgba(17, 24, 39, 0.15);\n display: flex; flex-direction: column;\n align-items: center; text-align: center;\n gap: clamp(8px, 0.7vw, 14px);\n }\n .ps-cpw-age-gate-eyebrow {\n font-size: clamp(9px, 0.62vw, 11px);\n font-weight: 700;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-cpw-age-gate-eyebrow-blocked { color: #C02626; }\n .ps-cpw-age-gate-question {\n font-size: clamp(13px, 0.95vw, 18px);\n font-weight: 600;\n line-height: 1.35;\n color: var(--ps-text-primary);\n margin: 0;\n }\n .ps-cpw-age-gate-actions {\n display: flex; gap: clamp(8px, 0.65vw, 14px);\n width: 100%;\n margin-top: clamp(4px, 0.35vw, 8px);\n }\n .ps-cpw-age-gate-btn {\n flex: 1;\n padding: clamp(9px, 0.75vw, 14px) clamp(12px, 1vw, 18px);\n border-radius: 999px;\n font-family: inherit;\n font-size: clamp(11px, 0.78vw, 14px);\n font-weight: 700;\n letter-spacing: 0.02em;\n cursor: pointer;\n transition: transform 0.18s, background 0.18s, border-color 0.18s, color 0.18s;\n }\n .ps-cpw-age-gate-btn:hover { transform: translateY(-1px); }\n .ps-cpw-age-gate-btn-primary {\n background: var(--ps-accent);\n color: #FFFFFF;\n border: 1.5px solid var(--ps-accent);\n }\n .ps-cpw-age-gate-btn-primary:hover { background: color-mix(in srgb, var(--ps-accent) 88%, #000); }\n .ps-cpw-age-gate-btn-secondary {\n background: transparent;\n color: var(--ps-text-primary);\n border: 1.5px solid var(--ps-border-color);\n }\n .ps-cpw-age-gate-btn-secondary:hover {\n background: var(--ps-bg-secondary);\n border-color: var(--ps-text-muted);\n }\n .ps-cpw-age-gate-card-blocked { border-color: rgba(192, 38, 38, 0.35); }\n\n / \u2500\u2500 Legal notice card on the right column \u2500\u2500\n Soft neutral card with a small shield icon; matches photo-guide width. /\n .ps-cpw-legal-notice {\n background: rgba(33, 84, 239, 0.04);\n border: 1px solid rgba(33, 84, 239, 0.16);\n border-radius: clamp(10px, 0.75vw, 16px);\n padding: clamp(10px, 0.9vw, 18px) clamp(12px, 1vw, 20px);\n display: flex; flex-direction: column;\n gap: clamp(5px, 0.45vw, 10px);\n }\n .ps-cpw-legal-notice-head {\n display: flex; align-items: center;\n gap: clamp(6px, 0.5vw, 10px);\n font-size: clamp(9px, 0.62vw, 11px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-cpw-legal-notice-head svg {\n width: clamp(12px, 0.85vw, 15px);\n height: clamp(12px, 0.85vw, 15px);\n }\n .ps-cpw-legal-notice-body {\n margin: 0;\n font-size: clamp(10px, 0.7vw, 12.5px);\n line-height: 1.5;\n color: var(--ps-text-secondary);\n }\n\n .ps-cpw-hint {\n font-size: clamp(10px, 0.72vw, 13px);\n line-height: 1.6;\n color: var(--ps-text-muted);\n margin: clamp(4px, 0.4vw, 10px) 0 0;\n padding: clamp(8px, 0.7vw, 14px) clamp(10px, 0.85vw, 16px);\n background: rgba(33, 84, 239, 0.05);\n border-left: 3px solid var(--ps-accent);\n border-radius: clamp(4px, 0.35vw, 8px);\n }\n\n / \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ProfileMeasurementsView (.ps-pmv-) \u2014 minimal monoline-icon\n redesign. Two-column body: silhouette diagram on the left,\n basics + measurements list (each with an inline line-art icon)\n on the right. No avatar, no card boxes \u2014 just typography, icons\n and a body diagram, all vw/clamp scaled.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 /\n .ps-pmv-root {\n display: flex; flex-direction: column;\n gap: clamp(14px, 1.3vw, 28px);\n padding: clamp(2px, 0.25vw, 6px) clamp(2px, 0.25vw, 6px) 0;\n }\n\n /* Hero \u2014 name + eyebrow only, no avatar /\n .ps-pmv-hero {\n display: flex; flex-direction: column;\n gap: clamp(4px, 0.35vw, 10px);\n padding-bottom: clamp(10px, 0.95vw, 20px);\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-pmv-hero-eyebrow {\n font-size: clamp(9px, 0.6vw, 12px); font-weight: 700;\n letter-spacing: 0.18em; text-transform: uppercase;\n color: var(--ps-accent);\n }\n .ps-pmv-hero-name {\n font-size: clamp(18px, 1.5vw, 32px); font-weight: 700;\n color: var(--ps-text-primary);\n margin: 0;\n letter-spacing: -0.01em;\n line-height: 1.1;\n }\n\n / Full-width data column (body diagram removed) /\n .ps-pmv-data {\n display: flex; flex-direction: column;\n gap: max(14px, 1.2vw);\n min-width: 0; width: 100%;\n }\n\n / Basics list \u2014 height / weight / age, inline icon + label + value /\n .ps-pmv-basics {\n display: flex; flex-direction: column;\n gap: clamp(6px, 0.55vw, 14px);\n padding-bottom: clamp(10px, 0.9vw, 18px);\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-pmv-basic-row {\n display: flex; align-items: center;\n gap: max(8px, 0.7vw);\n }\n .ps-pmv-basic-icon {\n flex-shrink: 0;\n width: max(24px, 1.6vw);\n height: max(24px, 1.6vw);\n display: inline-flex; align-items: center; justify-content: center;\n }\n .ps-pmv-basic-icon img {\n width: 100%; height: 100%; object-fit: contain; display: block;\n }\n .ps-pmv-basic-label {\n flex: 1; min-width: 0;\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-pmv-basic-value {\n font-size: clamp(13px, 0.95vw, 18px);\n font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n text-align: right;\n }\n\n / Section blocks (BODY MEASUREMENTS) /\n .ps-pmv-section {\n display: flex; flex-direction: column;\n gap: clamp(8px, 0.7vw, 16px);\n }\n .ps-pmv-section-head {\n display: flex; flex-direction: column; gap: clamp(2px, 0.2vw, 6px);\n }\n .ps-pmv-section-title {\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 700;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n color: var(--ps-text-primary);\n }\n .ps-pmv-section-title-row {\n display: flex; align-items: center; justify-content: space-between;\n gap: clamp(8px, 0.7vw, 14px);\n }\n .ps-pmv-loading-pill {\n display: inline-flex; align-items: center;\n gap: clamp(4px, 0.4vw, 10px);\n padding: clamp(3px, 0.3vw, 7px) clamp(7px, 0.6vw, 14px);\n background: rgba(33, 84, 239, 0.08);\n color: var(--ps-accent);\n border-radius: 999px;\n font-size: clamp(8px, 0.55vw, 11px);\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n }\n .ps-pmv-loading-spinner {\n width: clamp(8px, 0.65vw, 14px);\n height: clamp(8px, 0.65vw, 14px);\n border: 1.5px solid rgba(33, 84, 239, 0.25);\n border-top-color: var(--ps-accent);\n border-radius: 50%;\n animation: ps-pmv-spin 0.8s linear infinite;\n }\n @keyframes ps-pmv-spin {\n to { transform: rotate(360deg); }\n }\n\n / Body measurements list \u2014 single column, icon + label + value rows /\n .ps-pmv-measure-list {\n display: flex; flex-direction: column;\n }\n .ps-pmv-measure-row {\n display: flex; align-items: center;\n gap: clamp(8px, 0.7vw, 16px);\n padding: clamp(8px, 0.7vw, 14px) 0;\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-pmv-measure-row:last-child { border-bottom: none; }\n .ps-pmv-measure-icon {\n flex-shrink: 0;\n width: max(26px, 1.8vw);\n height: max(26px, 1.8vw);\n display: inline-flex; align-items: center; justify-content: center;\n }\n .ps-pmv-measure-icon img {\n width: 100%; height: 100%; object-fit: contain; display: block;\n }\n .ps-pmv-measure-label {\n flex: 1; min-width: 0;\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-pmv-measure-value {\n font-size: clamp(12px, 0.85vw, 16px);\n font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n text-align: right;\n }\n .ps-pmv-measure-value.ps-loading {\n color: var(--ps-border-color);\n animation: ps-pmv-shimmer 1.4s ease-in-out infinite;\n }\n .ps-pmv-measure-row.ps-loading .ps-pmv-measure-icon,\n .ps-pmv-measure-row.ps-loading .ps-pmv-measure-label {\n opacity: 0.55;\n }\n @keyframes ps-pmv-shimmer {\n 0%, 100% { opacity: 0.5; }\n 50% { opacity: 1; }\n }\n\n / Inline measurement edit inputs /\n .ps-pmv-measure-row.ps-editing {\n background: rgba(33, 84, 239, 0.04);\n }\n .ps-pmv-measure-edit {\n display: flex; align-items: baseline;\n gap: clamp(2px, 0.2vw, 6px);\n }\n .ps-pmv-measure-input {\n width: clamp(40px, 3vw, 70px);\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--ps-border-color);\n outline: none;\n font-family: inherit;\n font-size: clamp(12px, 0.85vw, 16px);\n font-weight: 700;\n color: var(--ps-text-primary);\n padding: clamp(2px, 0.15vw, 4px) 0;\n text-align: right;\n font-feature-settings: \"tnum\" 1;\n }\n .ps-pmv-measure-input:focus {\n border-bottom-color: var(--ps-accent);\n }\n .ps-pmv-measure-input::-webkit-outer-spin-button,\n .ps-pmv-measure-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-pmv-measure-input[type=\"number\"] { -moz-appearance: textfield; }\n .ps-pmv-measure-input-unit {\n font-size: clamp(8px, 0.55vw, 11px);\n color: var(--ps-text-muted);\n font-weight: 500;\n }\n\n / Inline-editable value wrapper /\n .ps-pmv-inline-edit {\n display: inline-flex; align-items: baseline;\n gap: clamp(2px, 0.2vw, 5px);\n }\n / Input styled to look like a plain text value \u2014 only a dashed underline\n reveals that it is editable. On focus the underline turns solid/accent. /\n .ps-pmv-inline-input {\n width: clamp(38px, 3vw, 68px);\n background: transparent;\n border: none;\n border-bottom: 1px dashed color-mix(in srgb, var(--ps-border-color) 60%, transparent);\n outline: none;\n font-family: inherit;\n font-size: clamp(12px, 0.85vw, 16px);\n font-weight: 700;\n color: var(--ps-text-primary);\n padding: clamp(1px, 0.1vw, 3px) 0;\n text-align: right;\n font-feature-settings: \"tnum\" 1;\n cursor: text;\n transition: border-color 0.15s;\n }\n .ps-pmv-inline-input:hover {\n border-bottom-style: solid;\n border-bottom-color: var(--ps-border-color);\n }\n .ps-pmv-inline-input:focus {\n border-bottom-style: solid;\n border-bottom-color: var(--ps-accent);\n }\n .ps-pmv-inline-input::-webkit-outer-spin-button,\n .ps-pmv-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n .ps-pmv-inline-input[type=\"number\"] { -moz-appearance: textfield; }\n .ps-pmv-inline-unit {\n font-size: clamp(8px, 0.55vw, 11px);\n color: var(--ps-text-muted);\n font-weight: 500;\n user-select: none;\n }\n / Inline select (bra band/cup) \u2014 same dashed underline as inputs /\n .ps-pmv-inline-select {\n background: transparent;\n border: none;\n border-bottom: 1px dashed color-mix(in srgb, var(--ps-border-color) 60%, transparent);\n outline: none;\n font-family: inherit;\n font-size: clamp(12px, 0.85vw, 16px);\n font-weight: 700;\n color: var(--ps-text-primary);\n padding: clamp(1px, 0.1vw, 3px) 0;\n cursor: pointer;\n transition: border-color 0.15s;\n -webkit-appearance: none;\n appearance: none;\n text-align: right;\n }\n .ps-pmv-inline-select:hover {\n border-bottom-style: solid;\n border-bottom-color: var(--ps-border-color);\n }\n .ps-pmv-inline-select:focus {\n border-bottom-style: solid;\n border-bottom-color: var(--ps-accent);\n }\n\n / Actions \u2014 sticky bottom nav /\n .ps-pmv-actions {\n display: flex; align-items: center; justify-content: space-between;\n gap: clamp(8px, 0.7vw, 14px);\n position: sticky;\n bottom: 0;\n background: var(--ps-bg-primary);\n border-top: 1px solid var(--ps-border-subtle);\n padding-top: clamp(8px, 0.7vw, 14px);\n padding-bottom: clamp(8px, 0.7vw, 14px);\n z-index: 2;\n margin-top: auto;\n }\n .ps-pmv-actions-right {\n display: flex; align-items: center;\n gap: clamp(6px, 0.5vw, 12px);\n }\n .ps-pmv-btn-secondary,\n .ps-pmv-btn-edit,\n .ps-pmv-btn-delete {\n background: none;\n border: 1px solid var(--ps-border-color);\n border-radius: clamp(4px, 0.35vw, 8px);\n padding: clamp(6px, 0.55vw, 12px) clamp(10px, 0.9vw, 20px);\n font-family: inherit;\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 600;\n letter-spacing: 0.08em;\n color: var(--ps-text-secondary);\n cursor: pointer;\n transition: border-color 0.15s, color 0.15s;\n }\n .ps-pmv-btn-secondary:hover,\n .ps-pmv-btn-edit:hover {\n border-color: var(--ps-accent);\n color: var(--ps-accent);\n }\n .ps-pmv-btn-delete:hover {\n border-color: var(--ps-error-color);\n color: var(--ps-error-color);\n }\n .ps-pmv-btn-primary {\n background: var(--ps-accent); color: #FFFFFF;\n border: none;\n border-radius: clamp(4px, 0.35vw, 8px);\n padding: clamp(7px, 0.65vw, 14px) clamp(12px, 1vw, 22px);\n font-family: inherit;\n font-size: clamp(9px, 0.65vw, 12px);\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s, background 0.2s;\n box-shadow: 0 0.3vw 1vw rgba(33, 84, 239, 0.18);\n display: inline-flex; align-items: center;\n gap: clamp(4px, 0.4vw, 10px);\n justify-content: center;\n }\n .ps-pmv-btn-primary:hover:not(:disabled) { opacity: 0.92; }\n .ps-pmv-btn-primary:active:not(:disabled) { transform: scale(0.98); }\n .ps-pmv-btn-primary:disabled {\n background: var(--ps-text-muted);\n cursor: not-allowed;\n box-shadow: none;\n opacity: 0.65;\n }\n .ps-pmv-btn-spinner {\n width: clamp(8px, 0.65vw, 14px);\n height: clamp(8px, 0.65vw, 14px);\n border: 1.5px solid rgba(255, 255, 255, 0.35);\n border-top-color: #FFFFFF;\n border-radius: 50%;\n animation: ps-pmv-spin 0.8s linear infinite;\n }\n\n / Big product / try-on image /\n .ps-msd-image {\n width: 100%; height: 420px;\n border-radius: 12px; overflow: hidden;\n background: var(--ps-bg-secondary);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .ps-msd-image-img {\n width: 100%; height: 100%;\n object-fit: contain; display: block;\n }\n\n / RECOMMENDED SIZE / FIT ACCURACY card /\n .ps-msd-card {\n background: var(--ps-bg-primary);\n border: 1px solid var(--ps-border-subtle);\n border-radius: 12px;\n padding: 22px 22px 18px;\n display: flex; flex-direction: column; gap: 8px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.04);\n }\n .ps-msd-card-eyebrow {\n font-size: 10px; font-weight: 700;\n letter-spacing: 0.16em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-msd-card-size-row {\n display: flex; align-items: baseline; gap: 12px;\n margin-top: 2px;\n }\n .ps-msd-card-size {\n font-size: 56px; font-weight: 700;\n color: var(--ps-text-primary);\n line-height: 1; letter-spacing: -0.02em;\n font-feature-settings: \"tnum\" 1;\n }\n .ps-msd-card-size-meta {\n font-size: 12px; font-weight: 600;\n letter-spacing: 0.05em;\n color: var(--ps-text-muted);\n }\n .ps-msd-card-divider {\n height: 1px; background: var(--ps-border-subtle);\n margin: 6px 0;\n }\n .ps-msd-card-pct-row {\n display: flex; align-items: center; gap: 12px;\n margin-top: 2px;\n }\n .ps-msd-card-pct {\n font-size: 30px; font-weight: 700;\n color: var(--ps-accent);\n line-height: 1; font-feature-settings: \"tnum\" 1;\n }\n .ps-msd-card-bar {\n flex: 1; height: 2px;\n background: var(--ps-border-color); border-radius: 1px;\n overflow: hidden;\n }\n .ps-msd-card-bar-fill {\n height: 100%; background: var(--ps-accent);\n border-radius: 1px;\n }\n .ps-msd-card-note {\n font-size: 11px; color: var(--ps-text-muted);\n line-height: 1.5; margin: 2px 0 0;\n }\n\n / MEASUREMENT BLUEPRINT \u2014 rich rows with number, description, USER/SIZE\n labeled values, status badge with check icon /\n .ps-msd-blueprint {\n display: flex; flex-direction: column; gap: 6px;\n padding-top: 6px;\n }\n .ps-msd-blueprint-title {\n font-size: 13px; font-weight: 800;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-primary);\n margin-bottom: 0;\n }\n .ps-msd-blueprint-underline {\n width: 36px; height: 2px;\n background: var(--ps-text-primary);\n margin-bottom: 8px;\n }\n .ps-msd-rows {\n display: flex; flex-direction: column;\n }\n .ps-msd-row {\n display: flex; flex-direction: column;\n padding: 22px 0 24px;\n border-bottom: 1px solid var(--ps-border-subtle);\n }\n .ps-msd-row:last-child { border-bottom: none; }\n .ps-msd-row-num {\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-primary);\n margin-bottom: 4px;\n }\n .ps-msd-row-desc {\n font-size: 12px; font-weight: 400;\n color: var(--ps-text-muted);\n margin: 0 0 14px;\n line-height: 1.5;\n }\n .ps-msd-row-cells {\n display: flex; justify-content: space-between; align-items: flex-end;\n gap: 16px; margin-bottom: 14px;\n }\n .ps-msd-row-cell {\n display: flex; flex-direction: column; gap: 4px;\n min-width: 0;\n }\n .ps-msd-row-cell.ps-right { text-align: right; }\n .ps-msd-cell-label {\n font-size: 9px; font-weight: 600;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n }\n .ps-msd-cell-value {\n font-size: 18px; font-weight: 700;\n color: var(--ps-text-primary);\n font-feature-settings: \"tnum\" 1;\n line-height: 1.1;\n }\n .ps-msd-row-badge {\n align-self: flex-end;\n display: inline-flex; align-items: center; gap: 5px;\n font-size: 10px; font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n white-space: nowrap;\n }\n .ps-msd-row-badge svg { flex-shrink: 0; }\n .ps-msd-row-badge.ps-good {\n color: var(--ps-accent);\n }\n .ps-msd-row-badge.ps-tight {\n color: #dc2626;\n }\n .ps-msd-row-badge.ps-loose {\n color: #d97706;\n }\n\n / TRY ANOTHER SIZE picker /\n .ps-msd-sizes {\n display: flex; flex-direction: column; gap: 10px;\n padding-top: 18px;\n }\n .ps-msd-sizes-label {\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--ps-text-muted);\n text-align: center;\n }\n .ps-msd-sizes-pills {\n display: flex; flex-wrap: wrap; gap: 8px;\n justify-content: center;\n }\n .ps-msd-size-pill {\n min-width: 48px;\n padding: 10px 16px;\n background: transparent;\n border: 1.5px solid var(--ps-border-color);\n border-radius: 8px;\n font-family: inherit; font-size: 13px; font-weight: 600;\n color: var(--ps-text-primary);\n cursor: pointer;\n transition: all 0.15s;\n }\n .ps-msd-size-pill:hover {\n border-color: var(--ps-accent);\n }\n .ps-msd-size-pill.ps-active {\n background: var(--ps-accent); color: #FFFFFF;\n border-color: var(--ps-accent);\n }\n\n / Bottom action area \u2014 Next button + tab bar grouped together,\n pushed to the bottom of the modal body by .ps-bpm-spacer above. /\n .ps-bpm-bottom {\n display: flex; flex-direction: column;\n margin: 0 -16px;\n border-top: 1px solid var(--ps-border-subtle);\n background: var(--ps-bg-primary);\n flex-shrink: 0;\n padding-bottom: env(safe-area-inset-bottom);\n }\n .ps-bpm-next-btn {\n margin: max(14px, 3.5vw) max(16px, 4.1vw) max(12px, 3vw);\n padding: max(14px, 3.5vw) max(18px, 4.6vw);\n background: var(--ps-accent); color: #FFFFFF;\n border: none; border-radius: max(10px, 2.5vw);\n font-family: inherit; font-size: max(14px, 3.6vw); font-weight: 700;\n cursor: pointer; transition: opacity 0.15s, transform 0.15s;\n letter-spacing: 0.02em;\n }\n .ps-bpm-next-btn:active { transform: scale(0.98); }\n .ps-bpm-next-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n .ps-bpm-bottom-tabs {\n display: flex; align-items: stretch;\n border-top: 1px solid var(--ps-border-subtle);\n background: var(--ps-bg-primary);\n }\n .ps-bpm-bottom-tab {\n flex: 1; background: none; border: none;\n padding: max(14px, 3.5vw) max(8px, 2vw) max(12px, 3vw);\n font-family: inherit; font-size: max(10px, 2.5vw); font-weight: 700;\n letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--ps-text-muted); cursor: pointer;\n border-bottom: 2px solid transparent;\n transition: color 0.15s, border-color 0.15s;\n display: flex; align-items: center; justify-content: center; gap: max(6px, 1.5vw);\n }\n .ps-bpm-bottom-tab.ps-active {\n color: var(--ps-accent);\n border-bottom-color: var(--ps-accent);\n }\n .ps-bpm-bottom-tab svg { width: max(13px, 3.3vw); height: max(13px, 3.3vw); flex-shrink: 0; }\n\n .ps-bp-optional { font-weight: 400; color: var(--ps-text-muted); }\n\n / Bra size step \u2014 vertically centered /\n .ps-bp-bra-step { display: flex; flex-direction: column; justify-content: center; flex: 1; }\n .ps-bp-bra-step .ps-bp-title { text-align: center; margin-bottom: 1.5vw; }\n\n / Bra size selector /\n .ps-bp-bra-section { margin-bottom: 1.2vw; }\n .ps-bp-bra-header {\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 0.5vw;\n }\n .ps-bp-bra-label {\n font-size: 0.6vw; font-weight: 600; color: rgba(255,255,255,0.45);\n letter-spacing: 0.08em; text-transform: uppercase;\n }\n / Region dropdown /\n / \u2500\u2500 Photo upload overlay (shown during compress + age-check) \u2500\u2500 /\n .ps-bp-photo-overlay {\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.92);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.9vw;\n z-index: 10;\n border-radius: inherit;\n backdrop-filter: blur(2px);\n animation: ps-bp-fade 0.18s ease both;\n }\n .ps-bp-photo-overlay-spinner {\n width: 2.2vw;\n height: 2.2vw;\n min-width: 28px;\n min-height: 28px;\n border-radius: 50%;\n border: 2.5px solid rgba(33, 84, 239, 0.18);\n border-top-color: var(--ps-accent);\n animation: ps-bp-spin 0.7s linear infinite;\n }\n @keyframes ps-bp-spin {\n to { transform: rotate(360deg); }\n }\n .ps-bp-photo-overlay-label {\n font-size: max(12px, 0.85vw);\n font-weight: 600;\n color: var(--ps-text-primary);\n letter-spacing: 0.01em;\n }\n\n / \u2500\u2500 Photo-help popover (Do / Don't / Tip) \u2014 desktop default \u2500\u2500 /\n .ps-bp-photo-help-backdrop { display: none; }\n .ps-bp-photo-help {\n position: absolute; top: 2.2vw; right: 0;\n width: min(360px, 22vw);\n background: #FFFFFF;\n border: 1px solid var(--ps-border-subtle);\n border-radius: 0.8vw;\n box-shadow: 0 20px 40px -12px rgba(17,24,39,0.25), 0 8px 16px -8px rgba(17,24,39,0.15);\n padding: 0.8vw 1vw;\n display: flex; flex-direction: column; gap: 0.6vw;\n z-index: 5;\n }\n .ps-bp-photo-help-handle { display: none; }\n .ps-bp-photo-help-header { display: flex; align-items: center; justify-content: space-between; }\n .ps-bp-photo-help-title { font-size: 0.8vw; font-weight: 700; color: var(--ps-text-primary); }\n .ps-bp-photo-help-close {\n width: 1.4vw; height: 1.4vw; border-radius: 50%;\n background: transparent; border: none; color: var(--ps-text-muted);\n cursor: pointer; font-size: 1vw; line-height: 1;\n }\n .ps-bp-photo-help-section { border-radius: 0.5vw; padding: 0.55vw 0.75vw; }\n .ps-bp-photo-help-section-label { font-size: 0.7vw; font-weight: 700; margin-bottom: 0.3vw; }\n .ps-bp-photo-help-section-body { font-size: 0.6vw; color: var(--ps-text-primary); line-height: 1.6; }\n .ps-bp-photo-help-do { background: #ddfbe7; }\n .ps-bp-photo-help-do .ps-bp-photo-help-section-label { color: #1c9d4c; }\n .ps-bp-photo-help-dont { background: #ffe2e2; }\n .ps-bp-photo-help-dont .ps-bp-photo-help-section-label { color: #e7000b; }\n .ps-bp-photo-help-tip {\n background: #c6e1f7; font-size: 0.6vw; line-height: 1.55;\n color: var(--ps-text-primary);\n }\n .ps-bp-photo-help-tip strong { color: #3267c3; }\n\n / \u2500\u2500 MiniSelect: compact animated dropdown for inline bra inputs \u2500\u2500 /\n .ps-bp-mini-select {\n position: relative;\n display: inline-flex;\n width: 100%;\n }\n .ps-bp-mini-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.4vw;\n width: 100%;\n min-width: 4vw;\n padding: 0.45vw 0.7vw;\n background: var(--ps-bg-secondary, #fff);\n border: 1.5px solid rgba(0, 0, 0, 0.12);\n border-radius: 0.4vw;\n color: var(--ps-text-primary);\n font-size: max(11px, 0.78vw);\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n transition: border-color 0.18s, background 0.18s, transform 0.12s;\n }\n .ps-bp-mini-select-trigger:hover {\n border-color: var(--ps-accent);\n }\n .ps-bp-mini-select[data-open=\"true\"] .ps-bp-mini-select-trigger {\n border-color: var(--ps-accent);\n background: rgba(33, 84, 239, 0.04);\n }\n .ps-bp-mini-select-value { display: inline-flex; align-items: center; }\n .ps-bp-mini-select-placeholder {\n color: var(--ps-text-secondary);\n opacity: 0.7;\n font-weight: 500;\n }\n .ps-bp-mini-select-arrow {\n font-size: 0.55vw;\n color: var(--ps-text-secondary);\n transition: transform 0.22s ease;\n }\n .ps-bp-mini-select-arrow.ps-open {\n transform: rotate(180deg);\n color: var(--ps-accent);\n }\n .ps-bp-mini-select-panel {\n position: absolute;\n left: 0;\n right: 0;\n max-height: 9vw;\n overflow-y: auto;\n background: var(--ps-bg-secondary, #fff);\n border: 1.5px solid rgba(0, 0, 0, 0.08);\n border-radius: 0.45vw;\n box-shadow:\n 0 0.25vw 0.55vw rgba(15, 23, 42, 0.08),\n 0 0.85vw 2.0vw rgba(15, 23, 42, 0.14);\n padding: 0.25vw;\n z-index: 250;\n }\n .ps-bp-mini-select[data-dir=\"down\"] .ps-bp-mini-select-panel {\n top: calc(100% + 0.3vw);\n transform-origin: top center;\n animation: ps-bp-mini-slide-down 0.18s cubic-bezier(0.2, 0.8, 0.4, 1) both;\n }\n .ps-bp-mini-select[data-dir=\"up\"] .ps-bp-mini-select-panel {\n bottom: calc(100% + 0.3vw);\n transform-origin: bottom center;\n animation: ps-bp-mini-slide-up 0.18s cubic-bezier(0.2, 0.8, 0.4, 1) both;\n }\n @keyframes ps-bp-mini-slide-down {\n from { opacity: 0; transform: translateY(-0.35vw) scale(0.96); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n @keyframes ps-bp-mini-slide-up {\n from { opacity: 0; transform: translateY(0.35vw) scale(0.96); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n .ps-bp-mini-select-item {\n display: block;\n width: 100%;\n padding: 0.45vw 0.7vw;\n background: transparent;\n border: none;\n border-radius: 0.35vw;\n color: var(--ps-text-secondary);\n font-size: max(11px, 0.78vw);\n font-weight: 600;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: background 0.12s, color 0.12s, transform 0.12s;\n }\n .ps-bp-mini-select-item:hover {\n background: rgba(33, 84, 239, 0.06);\n color: var(--ps-text-primary);\n }\n .ps-bp-mini-select-item.ps-selected {\n background: rgba(33, 84, 239, 0.12);\n color: var(--ps-accent);\n }\n\n .ps-bp-bra-region-wrap { position: relative; z-index: 100; }\n .ps-bp-bra-region-trigger {\n display: flex; align-items: center; gap: 0.35vw;\n padding: 0.45vw 0.9vw; border: 1.5px solid rgba(0,0,0,0.1);\n border-radius: 0.4vw; background: transparent;\n color: var(--ps-text-secondary); font-size: 0.8vw; font-weight: 600;\n cursor: pointer; font-family: inherit; transition: all 0.25s;\n }\n .ps-bp-bra-region-trigger:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n .ps-bp-bra-region-arrow {\n font-size: 0.55vw; transition: transform 0.25s;\n }\n .ps-bp-bra-region-arrow.ps-open { transform: rotate(180deg); }\n .ps-bp-bra-region-dropdown {\n position: absolute; top: calc(100% + 0.3vw); right: 0;\n min-width: 5vw; background: var(--ps-bg-secondary);\n border: 1.5px solid rgba(0,0,0,0.08); border-radius: 0.4vw;\n box-shadow: 0 0.5vw 1.5vw rgba(0,0,0,0.5);\n overflow: hidden; animation: ps-bp-fade 0.2s ease both;\n padding: 0.25vw; z-index: 200;\n }\n .ps-bp-bra-region-item {\n display: block; width: 100%; padding: 0.4vw 0.7vw;\n background: transparent; border: none; border-radius: 0.3vw;\n color: var(--ps-text-secondary); font-size: 0.75vw; font-weight: 600;\n cursor: pointer; font-family: inherit; text-align: left;\n transition: all 0.15s;\n }\n .ps-bp-bra-region-item:hover { background: rgba(0,0,0,0.04); color: var(--ps-text-primary); }\n .ps-bp-bra-region-item.ps-selected { color: var(--ps-accent); background: rgba(33,84,239,0.1); }\n .ps-bp-bra-grid {\n display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35vw;\n }\n .ps-bp-bra-btn {\n padding: 0.4vw 0; text-align: center;\n background: transparent; border: 1px solid rgba(0,0,0,0.08);\n border-radius: 0.35vw; color: var(--ps-text-secondary);\n font-size: 0.65vw; font-weight: 500; cursor: pointer;\n font-family: inherit; transition: all 0.2s;\n }\n .ps-bp-bra-btn:hover { border-color: rgba(0,0,0,0.3); color: var(--ps-text-primary); }\n .ps-bp-bra-btn-selected {\n background: var(--ps-accent) !important; border-color: var(--ps-accent) !important;\n color: #fff !important; font-weight: 700;\n }\n / Bra inline result \u2014 shown in header next to region switcher /\n .ps-bp-bra-inline-result {\n margin-left: auto; font-size: max(11px, 0.75vw); color: var(--ps-accent);\n font-weight: 600; white-space: nowrap;\n }\n .ps-bp-bra-inline-result strong {\n font-weight: 700;\n }\n\n / Profile option rows \u2014 WAIR style stacked list /\n .ps-bp-options {\n display: flex; flex-direction: column; gap: 0.5vw;\n margin-top: 0.8vw;\n }\n .ps-bp-option {\n display: flex; align-items: center; gap: 0.8vw;\n padding: 0.35vw 1vw 0.35vw 0.35vw;\n background: #fff; border: 1.5px solid rgba(0,0,0,0.06);\n border-radius: 0.6vw; cursor: pointer;\n transition: all 0.25s ease; font-family: inherit;\n box-shadow: 0 1px 4px rgba(0,0,0,0.05);\n }\n .ps-bp-option:hover {\n border-color: rgba(33,84,239,0.5);\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n transform: translateY(-1px);\n }\n .ps-bp-option:hover .ps-bp-illust svg { transform: scale(1.05); }\n .ps-bp-option-selected {\n border-color: var(--ps-accent) !important;\n box-shadow: 0 4px 12px rgba(33,84,239,0.18) !important;\n }\n .ps-bp-option-icon {\n width: 6vw; height: 6vw; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n border-radius: 0.4vw; overflow: hidden;\n }\n .ps-bp-illust { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }\n .ps-bp-illust svg { width: 100%; height: 100%; transition: transform 0.25s ease; }\n .ps-bp-option-label {\n flex: 1; font-size: 0.73vw; font-weight: 500;\n color: #555; text-align: center;\n }\n .ps-bp-option-selected .ps-bp-option-label { color: var(--ps-accent); font-weight: 600; }\n .ps-bp-option::after {\n content: \"\u203A\"; font-size: 1.1vw; color: var(--ps-text-secondary); flex-shrink: 0;\n transition: all 0.25s ease;\n }\n .ps-bp-option:hover::after { color: var(--ps-accent); transform: translateX(2px); }\n .ps-bp-option-selected::after { color: var(--ps-accent); }\n\n / Single question step \u2014 3 cards centered /\n .ps-bp-single-q { display: flex; flex-direction: column; flex: 1; justify-content: center; align-items: center; }\n .ps-bp-single-q .ps-bp-title { margin-bottom: 1vw; width: 100%; text-align: center; font-size: 1.05vw; font-weight: 700; letter-spacing: 0.01em; }\n .ps-bp-shape-row-full { width: 100%; margin: 1.5vw auto 0; }\n .ps-bp-shape-row-full .ps-bp-img-card { max-height: 18vw; padding: 0.8vw 0.6vw 0; }\n .ps-bp-shape-row-full .ps-bp-img-card-thumb { height: 13vw; }\n\n / Body shapes screen \u2014 fit all questions without scrolling /\n .ps-bp-shapes-fit { display: flex; flex-direction: column; flex: 1; overflow: hidden; gap: 0.4vw; justify-content: flex-start !important; }\n\n / Body shapes combined screen /\n .ps-bp-shape-section {\n margin-bottom: 0.4vw; flex: 1; display: flex; flex-direction: column; min-height: 0;\n }\n .ps-bp-shape-label {\n font-size: 0.55vw; font-weight: 500; color: rgba(255,255,255,0.7);\n margin-bottom: 0.3vw; display: flex; align-items: center; gap: 0.6vw;\n text-transform: uppercase; letter-spacing: 0.05em;\n }\n .ps-bp-shape-label::after {\n content: \"\"; flex: 1; height: 1px;\n background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);\n }\n .ps-bp-shape-row {\n display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5vw;\n flex: 1; min-height: 0;\n }\n .ps-bp-img-card {\n display: flex; flex-direction: column; align-items: center;\n background: transparent; border: 2px solid rgba(0,0,0,0.08);\n border-radius: 0.5vw; overflow: hidden; cursor: pointer;\n transition: all 0.2s ease; padding: 0; font-family: inherit;\n position: relative;\n }\n .ps-bp-img-card:hover {\n border-color: rgba(33,84,239,0.4);\n transform: translateY(-0.1vw);\n }\n .ps-bp-img-card-selected {\n border-color: var(--ps-accent) !important;\n border-width: 2.5px !important;\n }\n .ps-bp-img-card-selected .ps-bp-img-card-label {\n font-weight: 700; color: var(--ps-accent);\n }\n .ps-bp-img-card-check {\n display: none; position: absolute; top: 0.3vw; right: 0.3vw;\n width: 1.1vw; height: 1.1vw; border-radius: 50%;\n background: var(--ps-accent); align-items: center; justify-content: center;\n z-index: 1;\n }\n .ps-bp-img-card-check svg { width: 0.6vw; height: 0.6vw; }\n .ps-bp-img-card-selected .ps-bp-img-card-check { display: flex; }\n .ps-bp-img-card .ps-bp-img-card-thumb { opacity: 1; }\n .ps-bp-img-card-thumb {\n width: 100%; flex: 1; min-height: 0; overflow: hidden;\n display: flex; align-items: center; justify-content: center;\n background: transparent;\n }\n .ps-bp-img-card-img {\n width: 100%; height: 100%; object-fit: contain;\n }\n .ps-bp-img-card .ps-bp-illust { width: 80%; height: 80%; }\n .ps-bp-img-card .ps-bp-illust svg { width: 100%; height: 100%; }\n .ps-bp-img-card-label {\n padding: 0.3vw 0.2vw; font-size: 0.6vw; font-weight: 600;\n color: var(--ps-text-secondary); text-align: center; width: 100%;\n transition: opacity 0.2s;\n }\n / Hover hint text below cards /\n .ps-bp-hover-hint {\n text-align: center; font-size: 0.8vw; color: rgba(0,0,0,0.45);\n margin: 0.15vw 0 0; min-height: 1em; transition: opacity 0.2s;\n font-weight: 400; letter-spacing: 0.01em;\n }\n\n / Photo upload /\n .ps-bp-photo-upload {\n display: flex; align-items: center; gap: 0.6vw;\n width: 100%; padding: 0.7vw 0.8vw;\n background: transparent; border: 1.5px dashed var(--ps-border-color);\n border-radius: 0.5vw; cursor: pointer;\n transition: all 0.2s; color: var(--ps-text-muted);\n font-family: inherit; text-align: left;\n }\n .ps-bp-photo-upload:hover {\n border-color: var(--ps-accent); background: rgba(33,84,239,0.04);\n color: var(--ps-text-secondary);\n }\n .ps-bp-photo-upload svg { flex-shrink: 0; opacity: 0.6; }\n .ps-bp-photo-upload-text { font-size: 0.78vw; font-weight: 500; }\n .ps-bp-photo-upload-hint { font-size: 0.62vw; color: var(--ps-text-muted); margin-left: auto; }\n\n .ps-bp-photo-preview {\n display: flex; align-items: center; gap: 0.6vw;\n padding: 0.5vw; border: 1.5px solid var(--ps-accent);\n border-radius: 0.5vw; background: rgba(33,84,239,0.06);\n }\n .ps-bp-photo-thumb {\n width: 2.8vw; height: 2.8vw; object-fit: cover;\n border-radius: 0.4vw; flex-shrink: 0;\n }\n .ps-bp-photo-info { display: flex; flex-direction: column; gap: 0.1vw; flex: 1; min-width: 0; }\n .ps-bp-photo-status {\n font-size: 0.73vw; font-weight: 600; color: var(--ps-text-primary);\n display: flex; align-items: center; gap: 0.3vw;\n }\n .ps-bp-photo-hint { font-size: 0.62vw; color: var(--ps-text-muted); }\n .ps-bp-photo-remove {\n width: 1.5vw; height: 1.5vw; display: flex; align-items: center; justify-content: center;\n background: none; border: none; color: var(--ps-text-muted);\n cursor: pointer; font-size: 1vw; line-height: 1; border-radius: 0.25vw;\n transition: all 0.15s; flex-shrink: 0;\n }\n .ps-bp-photo-remove:hover { background: rgba(0,0,0,0.06); color: var(--ps-text-primary); }\n\n / Error /\n .ps-bp-error {\n color: var(--ps-error-color); font-size: 0.73vw; margin: 0;\n }\n\n / Navigation \u2014 back left, next right /\n .ps-bp-nav {\n display: flex; align-items: center; margin-top: auto;\n justify-content: space-between;\n }\n .ps-bp-back-btn {\n background: none; border: none; padding: 0;\n color: var(--ps-text-muted); cursor: pointer;\n font-size: 0.83vw; font-weight: 500; font-family: inherit;\n white-space: nowrap; display: flex; align-items: center; gap: 0.3vw;\n transition: color 0.2s;\n }\n .ps-bp-back-btn:hover { color: var(--ps-text-primary); }\n .ps-bp-back-arrow {\n display: inline-block; font-size: 1.1vw; transition: transform 0.25s ease;\n }\n .ps-bp-back-btn:hover .ps-bp-back-arrow { transform: translateX(-4px); }\n .ps-bp-next-btn {\n display: flex; align-items: center; gap: 0.5vw;\n padding: 0.45vw 1.2vw;\n background: var(--ps-accent); border: none; border-radius: 0.35vw;\n color: #fff; font-size: 0.73vw; font-weight: 700;\n cursor: pointer; transition: all 0.15s; font-family: inherit;\n white-space: nowrap;\n }\n .ps-bp-next-btn svg { width: 0.75vw; height: 0.75vw; }\n .ps-bp-next-btn:hover { background: var(--ps-accent-hover); }\n .ps-bp-btn-disabled {\n opacity: 0.35; cursor: not-allowed; pointer-events: none;\n }\n\n / \u2500\u2500 Mobile responsive \u2500\u2500 /\n @media (max-width: 768px) {\n .ps-bp-layout { flex-direction: column; height: auto; gap: 0; overflow: visible; }\n / Desktop layout's product image \u2014 hidden on mobile because BasicsStepMobile\n has its own minimal layout. The other steps (chest/midsection/hips) don't\n need the giant left-column image on a phone either. /\n .ps-bp-image { display: none !important; }\n .ps-bp-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n .ps-bp-layout { flex: 1; min-height: 0; }\n / Override desktop justify-content:center so BasicsStepMobile can\n stretch to the bottom of the modal \u2014 its bottom action bar (Next +\n tabs) needs to land at the bottom edge, not floating in the middle. /\n .ps-bp-root {\n justify-content: stretch !important;\n height: auto !important;\n max-height: none !important;\n overflow: visible !important;\n flex: 1 !important;\n }\n .ps-bp-upload-placeholder svg { width: 32px; height: 32px; }\n .ps-bp-upload-text { font-size: 14px; }\n .ps-bp-upload-hint { font-size: 11px; }\n .ps-bp-root { padding: 16px; gap: 14px; overflow: visible; }\n .ps-bp-dots { gap: 6px; }\n .ps-bp-dot { width: 6px; height: 6px; }\n .ps-bp-dot-active { width: 18px; border-radius: 4px; }\n .ps-bp-title { font-size: 18px; }\n .ps-bp-subtitle { font-size: 13px; margin-top: -4px; }\n .ps-bp-system-toggle { gap: 20px; margin: 4px 0; }\n .ps-bp-system-btn { font-size: 13px; }\n .ps-bp-inline-row { padding: 14px 0; gap: 12px; }\n .ps-bp-inline-label { flex: 0 0 85px; font-size: 11px; white-space: nowrap; }\n .ps-bp-inline-input { font-size: 18px; }\n .ps-bp-inline-unit { font-size: 12px; }\n .ps-bp-photo-cta { font-size: 13px; gap: 6px; margin-top: 4px; }\n .ps-bp-photo-cta svg { width: 16px; height: 16px; }\n .ps-bp-options { gap: 6px; }\n .ps-bp-option { border-radius: 10px; padding: 6px 12px 6px 6px; gap: 10px; }\n .ps-bp-option-icon { width: 70px; height: 70px; }\n .ps-bp-option-label { font-size: 14px; }\n .ps-bp-option::after { font-size: 18px; }\n .ps-bp-option { padding: 14px 8px; border-radius: 10px; gap: 8px; }\n .ps-bp-option-icon { width: 56px; height: 56px; }\n .ps-bp-option-label { font-size: 13px; }\n .ps-bp-error { font-size: 12px; }\n .ps-bp-shape-section { margin-bottom: 12px; }\n .ps-bp-shape-label { font-size: 13px; margin-bottom: 6px; }\n .ps-bp-shape-row { gap: 6px; }\n .ps-bp-img-card { border-radius: 8px; border-width: 2px; }\n .ps-bp-img-card-label { font-size: 11px; padding: 4px 2px; }\n .ps-bp-hover-hint { font-size: 10px; margin-top: 6px; }\n .ps-bp-single-q .ps-bp-title { font-size: 13px; font-weight: 400; }\n .ps-bp-photo-upload { padding: 10px 12px; gap: 8px; border-radius: 8px; }\n .ps-bp-photo-upload-text { font-size: 13px; }\n .ps-bp-photo-upload-hint { font-size: 10px; }\n .ps-bp-photo-preview { padding: 8px; gap: 8px; border-radius: 8px; }\n .ps-bp-photo-thumb { width: 40px; height: 40px; border-radius: 6px; }\n .ps-bp-photo-status { font-size: 12px; gap: 4px; }\n .ps-bp-photo-hint { font-size: 10px; }\n .ps-bp-photo-remove { width: 22px; height: 22px; font-size: 16px; }\n .ps-bp-nav { padding-top: 6px; }\n .ps-bp-back-btn { font-size: 14px; }\n .ps-bp-back-arrow { font-size: 18px; }\n .ps-bp-next-btn {\n display: flex; align-items: center; gap: 0.5vw; padding: 10px 16px; font-size: 13px; border-radius: 6px; }\n .ps-bp-root { padding: 12px; overflow: hidden; }\n / Accessory sizing inputs \u2014 mobile /\n .ps-acc-input { padding: 3vw; font-size: 3.6vw; border-radius: 2vw; }\n .ps-acc-label { font-size: 2.8vw; margin-bottom: 1.5vw; }\n .ps-acc-field { margin: 3vw 0; }\n .ps-acc-error { font-size: 2.8vw; }\n .ps-acc-hint { font-size: 2.5vw; }\n .ps-tryon-unit-toggle { border-radius: 2vw; }\n .ps-tryon-unit-btn { padding: 2vw 4vw; font-size: 3vw; }\n }\n\n / Upload hover overlay /\n .ps-tryon-upload-hover:hover .ps-tryon-upload-hover-overlay { opacity: 1 !important; }\n\n / \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Unified PhotoUploadZone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .ps-photo-zone {\n flex: 1; min-height: 220px;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n border: 2px dashed var(--ps-border-color);\n border-radius: 0.5vw;\n background: var(--ps-bg-secondary);\n cursor: pointer; position: relative; overflow: hidden;\n transition: border-color 0.18s, background 0.18s, transform 0.18s;\n }\n .ps-photo-zone:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.02); }\n .ps-photo-zone.ps-photo-zone-drag {\n border-color: var(--ps-accent); border-style: solid;\n background: rgba(33,84,239,0.06);\n transform: scale(1.005);\n }\n .ps-photo-zone.ps-photo-zone-has { border: none; cursor: default; padding: 0; }\n .ps-photo-zone.ps-photo-zone-inline { min-height: 100%; height: 100%; }\n\n .ps-photo-zone-empty {\n display: flex; flex-direction: column; align-items: center; gap: 0.4vw;\n padding: 1vw; text-align: center; pointer-events: none;\n }\n .ps-photo-zone-title { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); }\n .ps-photo-zone-hint { font-size: 0.6vw; color: var(--ps-text-muted); line-height: 1.4; max-width: 24vw; }\n\n .ps-photo-zone-img {\n width: 100%; height: 100%; object-fit: contain;\n display: block; cursor: pointer;\n }\n .ps-photo-zone-hover-overlay {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.2s;\n color: #fff; font-size: 0.8vw; font-weight: 600;\n border-radius: 0.5vw; cursor: pointer;\n }\n .ps-photo-zone:hover .ps-photo-zone-hover-overlay { opacity: 1; }\n .ps-photo-zone-remove {\n position: absolute; top: 0.5vw; right: 0.5vw;\n background: rgba(0,0,0,0.55); color: #fff; border: none; border-radius: 50%;\n width: 24px; height: 24px; min-width: 24px;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer; transition: background 0.15s;\n z-index: 2;\n }\n .ps-photo-zone-remove:hover { background: rgba(239,68,68,0.85); }\n\n .ps-photo-zone-processing {\n display: flex; flex-direction: column; align-items: center; gap: 0.5vw;\n padding: 1vw;\n }\n .ps-photo-zone-spinner {\n width: 28px; height: 28px;\n border: 3px solid rgba(33,84,239,0.18);\n border-top-color: var(--ps-accent);\n border-radius: 50%;\n animation: ps-spin 0.7s linear infinite;\n }\n .ps-photo-zone-status { font-size: 0.7vw; color: var(--ps-text-secondary); }\n\n .ps-photo-zone-rejection {\n display: flex; flex-direction: column; align-items: center; gap: 0.5vw;\n padding: 1vw 1.2vw; max-width: 22vw; text-align: center;\n cursor: default;\n }\n .ps-photo-zone-rejection-icon {\n width: 36px; height: 36px; border-radius: 50%;\n background: rgba(239,68,68,0.12); color: #dc2626;\n display: flex; align-items: center; justify-content: center;\n font-size: 18px; font-weight: 700;\n }\n .ps-photo-zone-rejection-title { font-size: 0.85vw; font-weight: 700; color: var(--ps-text-primary); }\n .ps-photo-zone-rejection-msg { font-size: 0.65vw; color: var(--ps-text-secondary); line-height: 1.5; }\n .ps-photo-zone-rejection-cta {\n margin-top: 0.3vw; padding: 0.55vw 1vw;\n background: var(--ps-accent); color: #fff; border: none;\n border-radius: 0.4vw; font-family: inherit;\n font-size: 0.7vw; font-weight: 600; cursor: pointer;\n transition: opacity 0.15s;\n }\n .ps-photo-zone-rejection-cta:hover { opacity: 0.9; }\n\n .ps-photo-zone-error {\n position: absolute; bottom: 0.6vw; left: 0.6vw; right: 0.6vw;\n background: rgba(239,68,68,0.08); color: #dc2626;\n border: 1px solid rgba(239,68,68,0.2); border-radius: 0.4vw;\n padding: 0.4vw 0.6vw; font-size: 0.6vw; line-height: 1.4;\n text-align: center; pointer-events: none;\n }\n\n @media (max-width: 700px) {\n .ps-photo-zone { min-height: 200px; border-radius: 12px; }\n .ps-photo-zone-title { font-size: 14px; }\n .ps-photo-zone-hint { font-size: 11px; max-width: 90%; }\n .ps-photo-zone-hover-overlay { font-size: 13px; }\n .ps-photo-zone-status { font-size: 12px; }\n .ps-photo-zone-rejection { max-width: 90%; gap: 8px; padding: 14px; }\n .ps-photo-zone-rejection-title { font-size: 14px; }\n .ps-photo-zone-rejection-msg { font-size: 12px; }\n .ps-photo-zone-rejection-cta { font-size: 13px; padding: 10px 16px; border-radius: 8px; }\n .ps-photo-zone-error { font-size: 11px; padding: 8px 10px; border-radius: 8px; }\n }\n";