/* SOREVUA V10 aesthetics adapted to V54 data/model (no changes to the makeup engine). */
:root { --sv-bg: #f9f5f3; --sv-card: #fff; --sv-sub: #f6e8e9; --sv-accent:#c9828d; --sv-accent-deep:#b76d7a; --sv-ink:#292123; --sv-line:#e9dddc; --sv-line-2:#decfd0; --top-h:calc(var(--safe-top) + 102px); --bar-h:calc(var(--safe-bottom) + 64px); --sheet-h:52svh; }
html,body {background:#f9f5f3;color:var(--sv-ink)}
.app {background:#f9f5f3}
.topbar{border:0!important;outline:0!important;box-shadow:none!important;background:#fff!important;padding-bottom:5px!important}
.topbar-row{height:44px!important;min-height:44px!important}
.brand-logo{height:44px;max-width:52%}
.brand-logo img{max-height:43px;max-width:100%;object-fit:contain}
.lang-row{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin-top:6px!important}
#modeSwitch.mode-switch{width:100%;max-width:620px;display:flex!important;gap:0!important;padding:0!important;background:#fff!important;border:1px solid #e6dfe1!important;border-radius:10px!important;box-shadow:none!important;overflow:hidden!important;outline:0!important}
#modeSwitch .mode-btn{flex:1 1 0!important;min-width:0!important;min-height:42px!important;margin:0!important;padding:7px 3px!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;font-weight:650!important;font-size:clamp(11px,3.1vw,15px)!important;white-space:nowrap!important}
#modeSwitch .mode-btn + .mode-btn{border-left:1px solid var(--sv-line)!important}
#modeSwitch .mode-btn[aria-pressed="true"]{background:#c8808a!important;color:#fff!important;border-radius:0!important;box-shadow:none!important}
.stage{left:0!important;right:0!important;top:var(--top-h)!important;bottom:var(--bar-h)!important;border-radius:0!important;box-shadow:none!important}
/* Keep the video in place; panels overlay it instead of shrinking the camera view. */
body.palette-open:not(.layout-pc) .stage,body.lip-sheet-open:not(.layout-pc) .stage{bottom:var(--bar-h)!important}
.stage-tags{top:calc(var(--top-h) + 10px)}
/* The original makeup palette remains accessible for all areas other than lip. */
.dock{box-sizing:border-box;max-height:min(46dvh,410px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:12px!important;border-radius:23px 23px 0 0!important;background:#fff!important;color:var(--sv-ink)!important;box-shadow:0 -4px 18px #39232a16!important}
.dock .actions{display:none!important}
body:not(.palette-open):not(.layout-pc) .dock{display:none!important}
body.lip-sheet-open:not(.layout-pc) .dock{display:none!important}
.dock::before{background:#d6c6c8!important}
.dock #recBar{display:flex;gap:8px;align-items:center}
.dock #recBar .pill{white-space:normal}
.dock .area-ctrls{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dock .area-ctrls .chip{min-width:0;white-space:normal;padding:8px 9px}
.dock .area-ctrls #compareBtn{font-size:12px;padding:8px 12px;border-radius:999px}
/* Product picker: same height as the design, with list scrolling and the full national catalog untouched. */
.lip-sheet{z-index:40!important;bottom:var(--bar-h)!important;height:min(53dvh,510px)!important;min-height:250px;max-height:calc(100dvh - var(--top-h) - var(--bar-h))!important;padding:8px 14px 0!important;background:#fff!important;border-radius:24px 24px 0 0!important;box-shadow:0 -8px 28px #37222a21!important;overflow:hidden!important}
.ls-tabs{gap:6px;display:grid;grid-template-columns:repeat(3,1fr);border:0}
.ls-tab{border:1px solid #e9dbdd;border-radius:20px;min-height:38px;font-size:12px;white-space:normal;padding:5px 2px;background:#fff}
.ls-tab.on{background:#c9828d;color:#fff;border-color:#c9828d}
.ls-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;gap:4px;background:transparent}
.ls-seg-btn{min-width:0;border:1px solid #e9dbdd;border-radius:9px;background:#fff;font-size:11px;padding:4px 2px}
.ls-seg-btn[aria-pressed="true"]{background:#f5e3e5;color:#a35866;border-color:#c9828d}
.ls-body{flex:1 1 auto;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
.ls-row{border:0;border-bottom:1px solid var(--sv-line);border-radius:0;min-height:62px;padding:8px 5px;background:#fff}
.ls-row-main{font-size:14px}
.ls-prod-img{border-radius:11px}
.ls-foot{padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
.area-bar{background:#fff!important;border-top:1px solid #e9dddc!important;box-shadow:none!important}
.ab-btn.on{background:#f4e5e7!important;color:#a65364!important}
/* Hide the old below-camera analysis cards without deleting nodes/event listeners. */
body:not(.layout-pc) #detailsArea{position:fixed!important;top:auto!important;left:-100000px!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden!important;pointer-events:none!important}
/* Optional menu + functional analysis overlay. */
#svOverlayScrim{position:fixed;inset:0;z-index:71;background:#2b1e246b}
#svOverlayScrim[hidden],#svMainDrawer[hidden],#svAnalysisModal[hidden]{display:none!important}
#svMainDrawer{position:fixed;inset:0 auto 0 0;width:min(350px,88vw);z-index:72;background:white;color:#302328;padding:calc(var(--safe-top) + 18px) 19px 24px;overflow-y:auto;box-shadow:15px 0 50px #140b101f;border-radius:0 20px 20px 0}
.sv-menu-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:24px}
.sv-menu-top img{width:170px;max-width:72%;height:65px;object-fit:contain}
.sv-menu-top button,#svMainDrawer button{border:0;background:transparent;color:inherit;cursor:pointer}
.sv-menu-top button{font-size:27px}
#svMainDrawer>button{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;padding:17px 5px;border-bottom:1px solid var(--sv-line);font-size:15px;font-weight:650}
#svMainDrawer>button span{font-size:21px;color:#b87583}
#svAnalysisModal{position:fixed;left:0;right:0;bottom:0;max-height:min(82dvh,800px);overflow:auto;z-index:73;background:#fff;color:#302328;border-radius:23px 23px 0 0;padding:18px 16px calc(20px + var(--safe-bottom));box-shadow:0 -15px 45px #25121a29}
.sv-modal-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sv-modal-heading h2{margin:0;font-size:19px}
.sv-modal-heading button{background:transparent;border:0;font-size:27px;color:#36272d}
#svAnalysisActions button{background:#c8808a;color:#fff;border:0;border-radius:10px;min-height:42px;padding:8px 14px;margin-bottom:12px;font-weight:700}
body #svAnalysisContent #detailsArea{position:static!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important;visibility:visible!important;pointer-events:auto!important;padding:0!important}
#svAnalysisContent #detailsArea .det-item[data-sv-active="false"]{display:none!important}
#svAnalysisContent #detailsArea .det-head{display:none!important}
#svAnalysisContent #detailsArea .det-body:not([hidden]){display:block!important}
#svAnalysisContent #detailsArea>h2,#svAnalysisContent #detailsArea>.det-foot{display:none!important}
#svCameraActionTop{position:absolute;z-index:17;top:calc(var(--top-h) + 12px);right:13px;display:flex;flex-direction:column;gap:10px;align-items:center}
#svCameraActionTop button{border:1px solid #fff8;border-radius:999px;display:grid;place-items:center;width:45px;height:45px;background:#51464bc9;color:#fff;box-shadow:0 3px 14px #23151c27;cursor:pointer}
#svCameraActionTop #svCompareTop{font-size:12px;font-weight:700}
#svCameraOff svg{width:23px;height:23px}
#svCameraStart{position:absolute;z-index:19;top:50%;left:50%;transform:translate(-50%,-50%);min-height:49px;min-width:148px;padding:12px 22px;border-radius:999px;background:#c8808a;color:#fff;font-size:16px;font-weight:700;border:1px solid #fff9;box-shadow:0 10px 30px #0003}
#svCameraStart[hidden],#svCameraActionTop button[hidden]{display:none!important}
/* Keep the native camera control and its listeners in DOM, but don't render duplicate controls. */
.dock #cameraBtn{display:none!important}
body.layout-pc #svCameraStart{position:fixed;top:52%;left:50%}
body.layout-pc #svCameraActionTop{position:fixed;right:calc(var(--right-w) + 25px)}
body.layout-pc #detailsArea{position:relative!important}
body.layout-pc #svAnalysisContent #detailsArea{position:static!important}
@media(max-width:420px){:root{--top-h:calc(var(--safe-top) + 101px)}.brand-logo{max-width:55%}.mode-btn{font-size:12px}.lang-toggle{font-size:12px;padding:0 6px}.menu-btn{width:36px}}

/* Hotfix 2026-11-05: keep the product recommendation access visible below comparison in live camera. */
body:not(.layout-pc) .side-btn.right,
body.lip-sheet-open:not(.layout-pc) .side-btn.right {
  display:flex!important;position:absolute!important;z-index:19!important;
  top:calc(var(--top-h) + 122px)!important;right:13px!important;left:auto!important;
  width:45px!important;height:45px!important;min-height:45px!important;padding:0!important;
  border:1px solid rgba(255,255,255,.5)!important;border-radius:50%!important;
  align-items:center!important;justify-content:center!important;
  background:rgba(73,61,68,.82)!important;color:#fff!important;
}
body:not(.layout-pc) .side-btn.right .side-label{
  position:static!important;clip:auto!important;width:auto!important;height:auto!important;
  overflow:visible!important;font-size:11px!important;white-space:nowrap!important;
}
body:not(.layout-pc) .side-btn.right .side-icon{display:none!important}
/* Don't show inactive controls for other areas while lip-only validation is underway. */
.area-bar .sv-locked-area{opacity:.4!important;filter:grayscale(1);cursor:not-allowed!important}

/* 2026-11-05: mobile brand/catalog UX, preserving the original LipPicker logic */
.topbar-row{overflow:visible!important}
.topbar-row .sv-version-mark{position:absolute;left:49px;top:50%;transform:translateY(-50%);z-index:2;font-size:11px;font-weight:750;letter-spacing:.02em;color:#796d70;background:#fff;border:1px solid #eee3e3;border-radius:6px;padding:4px 5px;line-height:1.1;white-space:nowrap}
.lang-row .badge{display:none!important}
@media (max-width:420px){.topbar-row .sv-version-mark{left:38px;font-size:10px;padding:3px 4px}.brand-logo{max-width:44%!important}}
/* Product navigation tabs now form two consistent segmented rows in a single container. */
.lip-sheet .ls-filter-stack{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.lip-sheet .ls-filter-stack .ls-tabs,
.lip-sheet .ls-filter-stack .ls-seg{width:100%;margin:0!important;padding:0!important;border:1px solid #e4d6d8!important;border-radius:12px!important;display:grid!important;overflow:hidden!important;gap:0!important;background:#fff!important;box-shadow:none!important}
.lip-sheet .ls-filter-stack .ls-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.lip-sheet .ls-filter-stack .ls-seg{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.lip-sheet .ls-filter-stack .ls-tab,
.lip-sheet .ls-filter-stack .ls-seg-btn{min-width:0!important;min-height:42px!important;padding:9px 2px!important;margin:0!important;border:0!important;border-radius:0!important;border-right:1px solid #eadedf!important;box-shadow:none!important;background:#fff!important;color:#66545a!important;font-size:clamp(11px,3.15vw,14px)!important;font-weight:650!important;white-space:nowrap!important;line-height:1.2!important}
.lip-sheet .ls-filter-stack .ls-tab:last-child,
.lip-sheet .ls-filter-stack .ls-seg-btn:last-child{border-right:0!important}
.lip-sheet .ls-filter-stack .ls-tab.on,
.lip-sheet .ls-filter-stack .ls-seg-btn[aria-pressed="true"]{background:#f2dfe3!important;color:#9e4f60!important;border-bottom:0!important}
/* Only ls-body scrolls. The two filter rows and the fixed bottom selection area do not create a second scroll region. */
.lip-sheet{overflow:hidden!important}
.lip-sheet .ls-body{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;overscroll-behavior-y:contain!important}
.ls-row.ls-brand{justify-content:flex-start!important}
.ls-row.ls-brand .ls-row-sub{margin-left:auto;white-space:nowrap;text-align:right}
.ls-brand-logo{width:70px!important;height:44px!important;flex:0 0 70px;object-fit:contain;display:block;border-radius:8px;background:#fffaf9;box-shadow:0 0 0 1px #f2e8e8}
.ls-product .ls-brand-logo{width:55px!important;height:36px!important;flex-basis:55px}
.ls-product .ls-dots{flex:0 0 auto}
.ls-prod-text .ls-brand-logo{height:30px!important;width:100px!important;flex-basis:auto;margin-bottom:3px}
@media(max-width:390px){.ls-brand-logo{width:57px!important;flex-basis:57px}.ls-product .ls-brand-logo{width:45px!important;flex-basis:45px}.ls-row{gap:8px!important}}