.room{--rm-gold:var(--bld-gold);--rm-gold-ink:var(--bld-gold-ink);--rm-wall:#0F1E33;--rm-wall-2:#0A1524;--rm-panel:#162A45;--rm-text:#F4F1E8;--rm-muted:#B9C6D8;--rm-line:rgba(231,184,75,.38);--rm-light:rgba(255,236,170,.55);--rm-glass:rgba(190,215,255,.16);--rm-table:#1C3354;
  max-width:1280px;margin:0 auto;background:linear-gradient(180deg,var(--rm-wall),var(--rm-wall-2));color:var(--rm-text);border-radius:var(--radius);position:relative;padding-bottom:var(--space-4)}
.room.theme-wood{--rm-wall:#2B1C12;--rm-wall-2:#1E130C;--rm-panel:#3B2718;--rm-text:#F6EDE0;--rm-muted:#D9C7B1;--rm-line:rgba(227,176,75,.4);--rm-light:rgba(255,224,160,.55);--rm-glass:rgba(255,236,200,.14);--rm-table:#4A3220}
.room.theme-marble{--rm-gold-ink:#6B4E0E;--rm-wall:#EDEBE6;--rm-wall-2:#DCD9D2;--rm-panel:#F8F6F1;--rm-text:#1B2230;--rm-muted:#4A5568;--rm-line:rgba(120,90,20,.45);--rm-light:rgba(255,250,225,.9);--rm-glass:rgba(90,120,160,.12);--rm-table:#CFCBC2}
.room a{color:inherit}
.room a:focus-visible,.room summary:focus-visible{outline:3px solid var(--rm-gold);outline-offset:3px;border-radius:6px}
.room .muted{color:var(--rm-muted)}
.room h1,.room h2{color:var(--rm-text)}
.skip-room{position:absolute;left:-999px;top:0}
.skip-room:focus{left:var(--space-2);top:var(--space-2);background:var(--surface);color:var(--text);padding:var(--space-2) var(--space-3);z-index:40;border-radius:var(--radius-sm)}
.room-preview{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)}
.room-preview .btn{margin-top:0}

/* ---- the slim bar that replaces the cover words while scrolling: it takes no room of its own (negative margin) */
.room-bar{position:sticky;top:0;z-index:20;height:48px;margin-bottom:-48px;display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-4);background:var(--rm-wall-2);border-bottom:2px solid var(--rm-gold);border-radius:var(--radius) var(--radius) 0 0;font-family:var(--font-serif);opacity:0;transform:translateY(-100%);pointer-events:none;transition:opacity .25s,transform .25s}
.room-bar.show{opacity:1;transform:none}
.bar-name{font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rm-gold-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-bar .plaque{margin:0;font-size:.66rem;flex:none}
.plate-s{flex:none;padding:2px 9px;border-radius:3px;border:1px solid var(--bld-brass);background:var(--bld-plate);color:var(--bld-plate-text);font-size:.7rem;font-weight:var(--weight-strong);letter-spacing:.06em;font-family:var(--font-sans,inherit)}
.plate-s.open::before,.room .plate.open::before{background:var(--bld-open)}
.plate-s.closed::before,.room .plate.closed::before{background:var(--bld-closed)}
.plate-s::before,.room .plate::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

/* ---- the cover */
.cover{position:relative;min-height:clamp(220px,40vw,400px);display:flex;align-items:flex-end;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;background:var(--rm-wall-2)}
.cover-img,.cover-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cover.tinted{background:linear-gradient(135deg,var(--rm-gold),var(--rm-wall-2));background:linear-gradient(135deg,var(--rm-gold),color-mix(in srgb,var(--rm-gold) 30%,#0A1524))}
.cover-badge{display:block;width:clamp(64px,16vw,96px);height:clamp(64px,16vw,96px);border-radius:50%;object-fit:cover;background:var(--rm-panel);border:3px solid var(--rm-gold);box-shadow:0 4px 14px rgba(0,0,0,.35);margin-bottom:var(--space-2)}
#room.accented .btn:not(.secondary){background:var(--rm-gold);color:var(--rm-on-gold);border-color:var(--rm-gold)}
.tinted::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,18,.12),rgba(6,10,18,.5))}
.has-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,18,.35),rgba(6,10,18,.78))}
.cv-wall{fill:var(--rm-wall)}.cv-arch{fill:none;stroke:var(--rm-gold);stroke-width:3;opacity:.7}.cv-light{stroke:var(--rm-light);stroke-width:30;opacity:.35;stroke-linecap:round}.cv-floor{fill:var(--rm-panel)}
.cover-words{position:relative;z-index:2;padding:var(--space-5) var(--space-4) var(--space-4);width:100%;opacity:calc(1 - var(--fade,0));transition:opacity .1s}
.has-image .cover-words,.tinted .cover-words{color:#F4F1E8}
.room .cover-words .backrow{margin:var(--space-3) 0 var(--space-4)}
.room .cover-words .backlink{background:var(--rm-panel);border-color:var(--rm-line);color:var(--rm-text)}
.has-image .cover-words .backlink,.tinted .cover-words .backlink{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.room .cover-words .backlink:hover,.room .cover-words .backlink:focus-visible{border-color:var(--rm-gold)}
.shop-name{margin:var(--space-2) 0;font-family:var(--font-serif);font-weight:700;font-size:clamp(1.6rem,6vw,3rem);line-height:1.1;letter-spacing:.12em;text-transform:uppercase;color:var(--rm-gold-ink);overflow-wrap:anywhere}
.has-image .shop-name,.tinted .shop-name{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.plates{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin:var(--space-2) 0 0}
.plates .plaque{margin:0}
.opens-note{font-weight:var(--weight-strong);font-size:.85rem;color:inherit}
.room .plate{position:static;display:inline-flex;align-items:center;padding:4px 12px;border-radius:3px;border:1px solid var(--bld-brass);background:var(--bld-plate);color:var(--bld-plate-text);font-weight:var(--weight-strong);font-size:.8rem;letter-spacing:.08em;font-family:var(--font-sans,inherit)}
.room-info{padding:var(--space-4)}
.room-info .badge{background:transparent;color:var(--rm-text);border-color:var(--rm-line)}
.room .notice.info{background:var(--rm-panel);color:var(--rm-text);border-color:var(--rm-line)}
.room-info p{margin:0 0 var(--space-2)}

/* ---- labels in gold serif capitals */
.gold-label{font-family:var(--font-serif);font-size:clamp(.78rem,2.6vw,.95rem);letter-spacing:.16em;text-transform:uppercase;color:var(--rm-gold-ink);margin:0 0 var(--space-3);padding-bottom:6px;border-bottom:1px solid var(--rm-line)}

/* ---- the wall: lit niches */
.room-grid{display:flex;flex-direction:column;gap:var(--space-5);padding:0 var(--space-4)}
.room-wall{order:1}.room-table{order:2}.room-dome{order:3}.room-doors{order:4}
.niches{list-style:none;margin:0;padding:0;display:grid;align-items:start;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(min-width:1024px){.niches{gap:20px}}
.wide-only{display:none}
.dome-glass img{width:100%;height:100%;object-fit:cover;display:block}
.niche-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.6em;line-height:1.3;font-weight:var(--weight-strong);font-size:var(--text-sm);overflow-wrap:anywhere;color:var(--rm-text)}
.niches>li:not(.wide-only),.glass-top>li:not(.wide-only){display:flex}
.niche-price{margin-top:auto}
.niche-price{font-family:var(--font-serif);color:var(--rm-gold-ink);font-weight:700}
.nshape{display:block;margin:18% auto 0;width:46%;aspect-ratio:3/5;border-radius:12px;background:linear-gradient(160deg,var(--rm-gold),var(--rm-line))}
.nshape.dress{clip-path:polygon(35% 0,65% 0,58% 30%,100% 100%,0 100%,42% 30%);aspect-ratio:1/1.3;width:56%;border-radius:0}
.nshape.vase{border-radius:40% 40% 46% 46%/30% 30% 60% 60%;aspect-ratio:4/5;width:50%}
.nshape.neutral{aspect-ratio:1;width:48%;border-radius:10px}

/* ---- the glass table */
.glass-top{list-style:none;margin:0;padding:var(--space-4) var(--space-3) var(--space-3);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;background:linear-gradient(180deg,var(--rm-glass),transparent),var(--rm-table);border:1px solid var(--rm-line);border-radius:14px;position:relative}
.glass-top::after{content:"";position:absolute;left:8%;right:8%;bottom:-14px;height:14px;background:linear-gradient(180deg,var(--rm-glass),transparent);border-radius:0 0 50% 50%;filter:blur(2px)}
@media(min-width:768px){.glass-top{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- the dome */
.room-dome{text-align:center}
.dome-link{display:inline-flex;flex-direction:column;gap:6px;text-decoration:none;max-width:min(100%,340px);width:100%;padding:6px}
.dome-glass{position:relative;display:block;aspect-ratio:200/230;width:100%}
.dome-glass svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.dome-shell{fill:var(--rm-glass);stroke:var(--rm-gold);stroke-width:3}
.dome-shine{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.5;animation:rm-shine 6s ease-in-out infinite alternate}
@keyframes rm-shine{from{opacity:.25}to{opacity:.7}}
.dome-base{fill:var(--rm-gold)}
.dome-glass img,.dome-glass .nshape{position:absolute;left:18%;top:22%;width:64%;height:62%;object-fit:cover;border-radius:10px;margin:0;aspect-ratio:auto}

/* ---- the arched doors */
.doors{list-style:none;margin:0;padding:0 0 var(--space-2);display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.doors>li{flex:0 0 auto;scroll-snap-align:start}
.door{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;text-decoration:none;width:clamp(84px,24vw,116px);min-height:44px;padding:4px}
.door svg{width:100%;height:auto;display:block}
.door svg path{fill:var(--rm-panel);stroke:var(--rm-gold);stroke-width:3}
.door[aria-current=page] svg path{fill:var(--rm-gold)}
.door span{font-weight:var(--weight-strong);font-size:var(--text-sm);text-align:center;overflow-wrap:anywhere}
.door[aria-current=page] span{color:var(--rm-gold-ink);text-decoration:underline;text-underline-offset:4px}
.more-doors summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 var(--space-3);font-weight:var(--weight-strong);color:var(--rm-gold-ink)}
.more-doors ul{list-style:none;margin:0;padding:0 var(--space-2)}
.more-doors a{display:block;padding:10px 4px;min-height:44px}

/* ---- the plain grid: everything can be bought from here */
.room-all{padding:var(--space-5) var(--space-4) 0}
.room-all h2{margin:0 0 var(--space-3)}
.shelf-tools{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-3)}
.shelf-tools input[type=search]{flex:1 1 180px;width:auto}
.shelf-tools select{flex:0 1 180px;width:auto}
.shelf-tools .btn{margin-top:0}
.room .mcard,.room .mcard-main{color:var(--rm-text)}
.room .mcard .amount{color:var(--rm-gold-ink)}
.room .mcard .muted,.room .mcard .oldprice,.room .mcard .pshop .shopname,.room .mcard .pstock.out{color:var(--rm-muted)}
.room .pager .btn.secondary{background:var(--rm-panel);color:var(--rm-text);border-color:var(--rm-line)}
/* "What customers say" (the reviews section has no class of its own, because the classic shop page shares it): the same side padding as the other room sections, and the review cards run the full width. The seller's reply uses the room's own text colour, which is light on the navy and wood interiors and dark on the marble one, so it is always readable on the panel. */
.room>section:not([class]){padding:var(--space-5) var(--space-4) 0}
.room>section:not([class]) h2{margin:0 0 var(--space-3)}
.room>section:not([class]) .card{width:100%;box-sizing:border-box}
.room blockquote{color:var(--rm-text);border-left-color:var(--rm-gold)}
.room blockquote p,.room blockquote strong{color:var(--rm-text)}
.room .card{background:var(--rm-panel);border-color:var(--rm-line);color:var(--rm-text)}

/* ---- tablet */
@media(min-width:768px){
.niches{grid-template-columns:repeat(3,minmax(0,1fr))}
.room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"wall wall" "table dome" "doors doors";gap:var(--space-5) var(--space-5)}
.room-grid:not(.with-dome){grid-template-areas:"wall wall" "table table" "doors doors"}
.room-wall{grid-area:wall}.room-table{grid-area:table}.room-dome{grid-area:dome}.room-doors{grid-area:doors}
.room-grid .glass-top{grid-template-columns:repeat(2,minmax(0,1fr))}
.room-grid:not(.with-dome) .glass-top{grid-template-columns:repeat(4,minmax(0,1fr))}
.room-info{max-width:70ch}
}
/* ---- laptop and desktop: the wall across the full width (the dome beside it when there is one), the doors in a row under it, then the table */
@media(min-width:1024px){
.room-grid{grid-template-columns:minmax(0,1fr) clamp(260px,24vw,320px);grid-template-areas:"wall dome" "doors doors" "table table"}
.room-grid:not(.with-dome){grid-template-columns:minmax(0,1fr);grid-template-areas:"wall" "doors" "table"}
.niches{grid-template-columns:repeat(4,minmax(0,1fr))}
.wide-only{display:block}.niches>li.wide-only,.glass-top>li.wide-only{display:flex}
.room-grid .glass-top,.room-grid:not(.with-dome) .glass-top{grid-template-columns:repeat(4,minmax(0,1fr))}
.doors{flex-wrap:wrap;overflow:visible;gap:var(--space-4)}
.door{width:clamp(96px,10vw,130px)}
}

/* ---- a shop with too few photos: only the cover and the plain grid */
.room.bare .room-grid{display:none}

/* ---- motion stops for reduced motion and while the tab is hidden */
@media(prefers-reduced-motion:reduce){.dome-shine{animation:none}.room-bar,.cover-words{transition:none}}
html[data-paused] .room *,html[data-paused] .room *::before,html[data-paused] .room *::after{animation-play-state:paused!important}

/* ---- the seller's settings: layout choice, themes, cover, shop-front photo and its crop screen */
.layout-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-4);margin:var(--space-3) 0}
.layout-card{border:2px solid var(--line);border-radius:var(--radius);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.layout-card.current{border-color:var(--primary)}
.layout-card h3{margin:0}
.mini{width:100%;height:auto;border-radius:6px;display:block}
.mini-bg{fill:var(--surface-2)}.mini-bar{fill:var(--line-strong)}.mini-card{fill:var(--surface);stroke:var(--line)}
.mini-wall{fill:#0F1E33}.mini-gold{fill:var(--bld-gold)}.mini-niche{fill:#223A5C;stroke:var(--bld-gold);stroke-width:1.5}.mini-dome{fill:rgba(190,215,255,.25);stroke:var(--bld-gold);stroke-width:1.5}.mini-glass{fill:rgba(190,215,255,.3)}
.themes{border:0;padding:0;margin:var(--space-3) 0;display:flex;flex-wrap:wrap;gap:var(--space-3)}
.themes legend{font-weight:var(--weight-strong);padding:0;margin-bottom:var(--space-2)}
.theme-pick{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);margin:0}
.swatch-chip{width:24px;height:24px;border-radius:50%;border:2px solid var(--bld-gold);flex:none}
.swatch-navy .swatch-chip{background:#0F1E33}.swatch-wood .swatch-chip{background:#2B1C12}.swatch-marble .swatch-chip{background:#EDEBE6}
.accent-input{display:block;width:64px;height:44px;padding:2px;margin:var(--space-2) 0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface)}
.brand-crop{margin:var(--space-3) 0}
.brand-stage{position:relative;width:100%;overflow:hidden;background:#0B1626;border:2px solid var(--bld-gold);border-radius:6px;touch-action:none;cursor:grab;margin:var(--space-2) 0}
.brand-stage.square{max-width:280px;aspect-ratio:1/1}
.brand-stage.wide{max-width:640px;aspect-ratio:8/3}
.brand-stage img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.brand-stage.square::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(11,22,38,.55);pointer-events:none}
.brand-stage:focus-visible{outline:3px solid var(--bld-gold);outline-offset:3px}
.brand-zoomrow{display:flex;align-items:center;gap:var(--space-3);max-width:640px}
.brand-zoomrow input{flex:1;min-height:44px}
.cover-preview,.front-preview{max-width:100%;height:auto;border-radius:var(--radius-sm);display:block;margin:var(--space-2) 0}
.crop-stage{position:relative;width:100%;max-width:640px;aspect-ratio:4/3;overflow:hidden;background:#0B1626;border:2px solid var(--bld-gold);border-radius:6px;touch-action:none;cursor:grab;margin:0 auto}
.crop-stage img{position:absolute;left:50%;top:50%;max-width:none;width:auto;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none;transform-origin:center}
.crop-stage.blurring{cursor:crosshair}
#crop-blurs .blur-box{position:absolute;border:2px dashed #fff;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.crop-controls{margin:var(--space-3) 0}
.crop-controls input[type=range]{width:100%;min-height:44px}
.front-preview-cell{--u:220px;list-style:none;margin:0;padding:0;max-width:280px}
.front-preview-cell a.front{pointer-events:none}
.fp-frame .fp-img.moving{object-fit:none;width:auto;height:auto;max-width:none;position:absolute;left:50%;top:50%;transform-origin:center}