/* v22: a full portrait room with a rising, independently scrollable gift drawer. */
html,body{height:100%;overflow:hidden}
body{padding:0!important;min-height:100svh;align-items:center}
.experience{height:100svh;min-height:0!important;align-self:center;border-radius:0;--drawer-peek:min(42svh,360px);--drawer-height:var(--drawer-peek);--scene-bottom:0px}
.hero{height:100%;overflow:hidden}
.scene{bottom:var(--scene-bottom);transition:bottom .58s cubic-bezier(.22,.7,.2,1)}
.experience[data-state="explore"],.experience[data-state="focus"]{--scene-bottom:calc(var(--drawer-height) - 20px)}
.experience[data-drawer="expanded"]{--drawer-height:min(76svh,640px)}
.experience[data-state="explore"][data-drawer="expanded"]{--scene-bottom:calc(var(--drawer-peek) - 20px)}
.experience[data-state="focus"]{--drawer-height:clamp(285px,40svh,340px)}
.experience[data-drawer="collapsed"]{--drawer-height:calc(64px + env(safe-area-inset-bottom,0px));--scene-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
.experience[data-state="closed"],.experience[data-state="opening"]{--scene-bottom:0px}
.topbar{top:calc(12px + env(safe-area-inset-top,0px));left:6cqw;right:6cqw}
.header-actions{gap:8px}
.header-actions .icon-button{width:44px;height:44px;min-width:44px;min-height:44px;padding:11px;background:#fff6e9dd}
.intro{top:calc(78px + env(safe-area-inset-top,0px))}
.intro .subtitle{font-size:clamp(12px,3cqw,15px);letter-spacing:.07em}
.vertical-note{top:calc(108px + env(safe-area-inset-top,0px));font-size:clamp(10px,2.5cqw,13px);letter-spacing:1.35cqw}
.tap-label{font-size:clamp(12px,3.1cqw,15px);padding:8px 14px}
.scene-tools,.experience[data-state="focus"] .scene-tools{left:5cqw;right:5cqw;bottom:calc(var(--scene-bottom) + 32px);transition:bottom .58s cubic-bezier(.22,.7,.2,1);gap:8px;font-size:clamp(10px,2.65cqw,13px);letter-spacing:0}
.scene-tools>span{padding:8px 10px;white-space:nowrap}
.scene-tools>div{gap:5px}
.scene-tools button{width:44px;height:44px;min-width:44px;min-height:44px;padding:12px}
.hotspot{min-height:32px;height:auto;padding:6px 10px;font-size:clamp(11px,2.8cqw,14px);letter-spacing:.03em}
.hotspot::before{inset:-6px}
.opening-message{bottom:12svh}
.collection,.experience:not([data-state="focus"]) .collection{position:absolute;left:0;right:0;bottom:0;margin:0;padding:0!important;height:var(--drawer-height);max-height:calc(100svh - 72px - env(safe-area-inset-top,0px));z-index:10;display:flex;flex-direction:column;pointer-events:auto;overflow:hidden;isolation:isolate;border:1px solid #d8c6ad;border-bottom:0;border-radius:24px 24px 0 0;background:#f5ecdf;box-shadow:0 -10px 36px #4c321d20;transform:translateY(calc(100% + 28px));transition:transform .58s cubic-bezier(.22,.7,.2,1),height .32s ease}
.experience .collection[data-revealed="true"]{transform:translateY(0)}
.collection::after,.paper-edge{display:none}
.drawer-handle{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:64px;padding:23px 18px 11px;background:transparent;border:0;touch-action:none;text-align:left}
.drawer-indicator{position:absolute;top:9px;left:50%;width:36px;height:4px;border-radius:3px;background:#b8a48b;transform:translateX(-50%)}
.drawer-title{font-size:clamp(15px,4cqw,20px);font-weight:500;line-height:1.5;letter-spacing:.02em;white-space:nowrap;color:#3a2b20}
.drawer-hint{font-family:GiftSerif,serif;font-size:11px;line-height:1.4;color:#866849;white-space:nowrap}
.drawer-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:7px 5cqw calc(18px + env(safe-area-inset-bottom,0px));scrollbar-width:thin;scrollbar-color:#c4b297 transparent;touch-action:pan-y}
.collection-content{padding:0}
.product-cards{gap:3cqw}
.product-card-caption{padding:10px 12px}
.card-name{font-size:clamp(13px,3.6cqw,17px)}
.footer{padding-top:16px}
.footer button{min-height:44px}
.focus-panel{min-height:0;padding:5px 5px 2px}
.focus-top{position:absolute;top:-4px;right:-2px;z-index:2}
.focus-top button{width:44px;height:44px;padding:12px}
.focus-panel h2{font-size:22px;letter-spacing:.12em;line-height:1.35;margin:2px 42px 8px}
.focus-panel>p:not(.prototype-note){font-size:13px;line-height:1.5;letter-spacing:.04em;margin:0 0 12px}
.model-action{min-height:44px;font-size:14px;letter-spacing:.08em;padding:8px 22px;margin:0 auto 12px}
.detail-actions{gap:10px}
.detail-actions>button{height:44px;padding:10px}
.detail-actions>button:first-child,.detail-actions>button:last-child{width:44px}
.detail-actions>button img{width:20px}
.detail-actions>#back-to-scene{flex:1;width:auto;font-size:14px;letter-spacing:.1em}
@media(max-width:350px){.drawer-hint{font-size:10px}.drawer-handle{padding-left:14px;padding-right:14px}.scene-tools{left:3cqw;right:3cqw;gap:5px}.scene-tools>span{font-size:10px;padding:7px}.scene-tools button{width:44px;height:44px;min-width:44px}.scene-tools>div{gap:3px}.drawer-title{font-size:14px}}
@media(prefers-reduced-motion:reduce){.collection,.scene,.scene-tools{transition:none}}

/* Keep the product view clear while the drawer occupies the lower screen. */
.experience[data-state="explore"]:not([data-drawer="collapsed"]) .intro{top:calc(74px + env(safe-area-inset-top,0px))}
.experience[data-state="explore"]:not([data-drawer="collapsed"]) .intro .theme-name{font-size:clamp(24px,6cqw,30px);line-height:1.2;letter-spacing:.12em}
.experience[data-state="explore"]:not([data-drawer="collapsed"]) .intro .theme-line,.experience[data-state="explore"]:not([data-drawer="collapsed"]) .intro .subtitle{display:none}
.experience[data-state="explore"]:not([data-drawer="collapsed"]) .vertical-note{opacity:0}