.room-page { background:#fff; color:#303034; font-family:var(--nav-sans,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif); }
.room-page main:focus { outline:none; }
.room-skip { position:fixed; left:18px; top:-100px; z-index:100; padding:12px 18px; background:white; color:#202024; border:1px solid #d4d4d7; border-radius:10px; }
.room-skip:focus { top:10px; }
/* Use the homepage's shared image gutters at every screen width. */
.room-story { width:100%; margin:0 auto; padding-left:var(--panel-gap); padding-right:var(--panel-gap); }
/* Share the shop's heading styles; the space navigation uses light outline icons. */
.room-heading { width:100%; border-bottom:0; }
.room-visually-hidden:not(:focus-within) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.room-breadcrumb:focus-within { position:absolute; z-index:3; left:24px; top:8px; display:flex; gap:12px; padding:8px 12px; background:#fff; border-radius:6px; font-size:12px; }
.room-breadcrumb a { color:inherit; }
.room-title-row h1 { margin:0; min-width:0; overflow-wrap:anywhere; }
.room-related { position:relative; width:min(1120px,100%); margin:0 auto; padding:8px 60px 32px; }
.room-rail-arrow { position:absolute; top:28px; width:38px; height:38px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#e8e8ed; color:#55555a; cursor:pointer; transition:background .18s; }
.room-rail-arrow:hover:not(:disabled) { background:#dddde3; }
.room-rail-arrow:disabled { visibility:hidden; pointer-events:none; }
.room-rail-prev { left:12px; }
.room-rail-next { right:12px; }
.room-related-track { display:flex; justify-content:safe center; align-items:flex-start; gap:32px; overflow-x:auto; padding:8px 4px 12px; scrollbar-width:none; scroll-behavior:smooth; scroll-snap-type:x proximity; }
.room-related-track::-webkit-scrollbar { display:none; }
.room-related-track a { flex:0 0 112px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:12px; padding:2px 0 4px; color:#303034; text-decoration:none; font:400 12px/1.45 var(--nav-sans); scroll-snap-align:center; }
.room-related-track a:hover { color:#3976a9; }
.room-related-track svg { display:block; flex:none; width:72px; height:56px; }
.room-related-track span { width:100%; text-align:center; overflow-wrap:anywhere; }
.room-story { padding-top:0; padding-bottom:88px; scroll-margin-top:70px; }
.room-gallery { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:var(--panel-gap); }
.room-scene { position:relative; min-width:0; margin:0; background:#fff; aspect-ratio:1; }
.room-scene:first-child { grid-column:1 / -1; aspect-ratio:auto; }
.room-scene img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; border:0; border-radius:0; }
.room-scene:first-child img { height:auto; object-fit:contain; }
.room-scene.is-unavailable { min-height:200px; display:grid; align-content:center; }
.room-image-unavailable { padding:24px; margin:0; font-size:13px; color:#737377; text-align:center; }
.room-hotspot { position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:white; cursor:pointer; z-index:1; }
.room-hotspot[hidden],.room-scene img[hidden] { display:none; }
.room-hotspot::before { content:""; display:block; width:11px; height:11px; border-radius:50%; background:#fff; box-shadow:0 0 0 9px rgba(22,22,24,.48),0 0 0 10px rgba(255,255,255,.75); transition:box-shadow .18s; }
.room-hotspot:hover::before,.room-hotspot[aria-expanded=true]::before { box-shadow:0 0 0 10px rgba(22,22,24,.7),0 0 0 11px rgba(255,255,255,.95); }
.room-hotspot:focus-visible { outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 5px #45454c; }
.room-hotspot { transition:opacity .18s; text-decoration:none; }
@media (hover:hover) and (pointer:fine) {
  .room-scene .room-hotspot { opacity:0; pointer-events:none; }
  .room-scene:hover .room-hotspot,.room-scene:focus-within .room-hotspot { opacity:1; pointer-events:auto; }
}
.room-credit { margin:18px var(--panel-gap,12px) 0; padding:0 8px; color:#77777c; font:400 11px/1.7 var(--sans); text-align:right; overflow-wrap:anywhere; }
.room-credit a { color:inherit; text-underline-offset:3px; }
/* Pagination shares the shop's controls, spacing and selected-page colour. */
.room-notice,.room-no-script { padding:20px; font-size:14px; color:#727278; text-align:center; }
.room-product-popover { position:fixed; z-index:35; width:300px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 80px); overflow-y:auto; margin:0; padding:25px 24px 22px; background:#fff; color:#29292e; border:1px solid #e9e9ec; border-radius:12px; box-shadow:0 12px 42px rgba(0,0,0,.16); }
.room-product-popover[hidden] { display:none; }
.room-popover-close { position:absolute; top:5px; right:5px; width:40px; height:40px; display:grid; place-items:center; padding:0; background:transparent; color:#6a6a71; border:0; border-radius:50%; cursor:pointer; font:300 25px/1 var(--nav-sans); }
.room-popover-close:hover { background:#f3f3f5; }
.room-product-kind { width:fit-content; max-width:calc(100% - 20px); margin:0 0 16px; padding:4px 8px; background:#f1eee9; border-radius:4px; color:#78634f; font-size:10px; line-height:1.5; }
.room-product-maker { margin:0 0 5px; max-width:calc(100% - 10px); color:#74747a; font-size:10px; letter-spacing:.05em; overflow-wrap:anywhere; }
.room-product-popover h3 { margin:0 0 12px; font:500 18px/1.45 var(--nav-sans); overflow-wrap:anywhere; }
.room-product-price { margin:0 0 6px; font-size:20px; line-height:1.4; font-weight:400; }
.room-product-meta { margin:0; color:#77777e; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.room-popover-actions { display:flex; align-items:center; gap:10px; margin-top:20px; }
.room-detail-link { flex:1; min-height:44px; display:flex; align-items:center; justify-content:center; padding:11px 16px; border:1px solid #dedee2; border-radius:24px; color:#34343a; text-decoration:none; font-size:13px; text-align:center; }
.room-detail-link:hover { border-color:#a5a5ad; background:#f7f7f8; }
.room-add-button { flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; color:#35353a; background:#f1f1f4; cursor:pointer; }
.room-add-button:hover { background:#e5e5e9; }
.room-add-button:disabled { opacity:.35; cursor:default; }
.room-popover-status { margin:12px 0 0; font-size:12px; line-height:1.6; color:#78634f; }
.room-page :is(.room-pagination,.room-related,.room-product-popover) :focus-visible { outline:2px solid #8b735b; outline-offset:3px; }
@media(max-width:760px) {
  .room-related { padding:4px 0 20px; }
  .room-related-track { justify-content:flex-start; gap:16px; padding:8px 20px 10px; scroll-padding-inline:20px; }
  .room-related-track a { flex-basis:92px; gap:10px; }
  .room-related-track svg { width:64px; height:50px; }
  .room-rail-arrow { display:none; }
  .room-story { padding-bottom:64px; }
  .room-gallery { grid-template-columns:minmax(0,1fr); }
  .room-scene,.room-scene:first-child { aspect-ratio:auto; }
  .room-scene img { height:auto; object-fit:contain; }
  .room-hotspot::before { width:8px; height:8px; box-shadow:0 0 0 7px rgba(22,22,24,.48),0 0 0 8px rgba(255,255,255,.75); }
  .room-hotspot:hover::before,.room-hotspot[aria-expanded=true]::before { box-shadow:0 0 0 8px rgba(22,22,24,.7),0 0 0 9px rgba(255,255,255,.95); }
  .room-product-popover { left:12px!important; right:12px; top:auto!important; bottom:max(12px,env(safe-area-inset-bottom)); width:auto; max-width:none; max-height:min(70dvh,430px); padding:24px 24px 20px; border-radius:18px; box-shadow:0 8px 56px rgba(0,0,0,.24); }
  .room-product-kind { margin-bottom:12px; }
}
@media(prefers-reduced-motion:reduce) { .room-hotspot::before,.room-rail-arrow { transition:none; } .room-related-track { scroll-behavior:auto; } }

/* A concise product preview stays open while moving from its point to the card. */
.room-product-popover { width:420px; padding:0; overflow:visible; border:1px solid #e4e4e6; border-radius:2px; box-shadow:0 3px 16px #0002; }
.room-preview-card { display:grid; grid-template-columns:104px minmax(0,1fr) 44px; align-items:center; min-height:164px; color:inherit; text-decoration:none; }
.room-preview-card > img { width:104px; height:112px; padding:12px; object-fit:contain; background:white; }
.room-preview-copy { min-width:0; padding:20px 12px 18px 4px; }
.room-product-popover .room-product-maker { max-width:none; margin:0 0 4px; color:#242426; font-size:15px; line-height:1.3; font-weight:550; letter-spacing:0; }
.room-product-popover h3 { margin:0 0 5px; font-size:14px; font-weight:400; line-height:1.5; }
.room-product-popover .room-product-meta { font-size:11px; line-height:1.4; }
.room-product-popover .room-product-price { margin:10px 0 0; font-size:21px; line-height:1.3; font-weight:550; }
.room-product-popover .room-product-kind { margin:6px 0 0; padding:0; color:#77777e; background:none; font-size:10px; }
.room-preview-arrow { display:grid; place-items:center; align-self:stretch; border-left:1px solid #ededee; }
.room-preview-card:hover .room-preview-arrow { background:#f7f7f9; }
.room-product-popover .room-popover-close { z-index:2; width:28px; height:28px; right:0; top:0; font-size:19px; opacity:0; pointer-events:none; }
.room-product-popover .room-popover-close:focus-visible { opacity:1; pointer-events:auto; background:white; }
.room-preview-card:focus-visible { outline:2px solid #4776a6; outline-offset:3px; }
@media(max-width:760px) {
  .room-product-popover { width:auto; padding:0; border-radius:6px; max-height:70dvh; overflow-y:auto; }
  .room-preview-card { grid-template-columns:88px minmax(0,1fr) 38px; min-height:156px; }
  .room-preview-card > img { width:88px; height:100px; padding:10px; }
  .room-preview-copy { padding:18px 10px 16px 0; }
  .room-product-popover .room-popover-close { opacity:1; pointer-events:auto; }
  .room-product-popover .room-product-price { font-size:20px; }
}

@media (pointer:coarse), (max-width:760px) {
  .room-rail-arrow { width:44px; height:44px; top:25px; }
  .room-product-popover .room-popover-close { width:44px; height:44px; opacity:1; pointer-events:auto; }
}