/* Register real photograph crops to the wooden shelf planes. Original JPGs
   remain unchanged; no generated product or label pixels are used. */
.scene-stage{background-image:url('/assets/general-store-refined.png')}
.room-canvas .placed-soap{top:auto;height:auto;min-width:0;min-height:0;transform:none!important;filter:none;bottom:61.75%;isolation:isolate}
.placed-soap:before{content:"";position:absolute;z-index:-1;left:7%;right:7%;height:9%;bottom:-3%;border-radius:50%;background:#100803b3;filter:blur(3px);transform:scaleX(1.08)}
.room-canvas .soap-silhouette{height:100%;width:100%;position:absolute;inset:0;overflow:visible;filter:drop-shadow(2px 3px 2px #170e0780)}
.room-canvas .soap-silhouette img{object-fit:fill;transform:none;filter:brightness(.91) saturate(.85)}
.room-canvas .slot-0{left:36.7%;width:8.8%;aspect-ratio:1.305}
.room-canvas .slot-1{left:49.4%;width:8%;aspect-ratio:1.086}
.room-canvas .slot-2{left:60.6%;width:9.1%;aspect-ratio:1.312}
.room-canvas .slot-3{left:35.7%;width:6.7%;aspect-ratio:1.046;bottom:42.35%}
.room-canvas .slot-4{left:46.8%;width:5%;aspect-ratio:.844;bottom:42.35%}
.room-canvas .slot-5{left:64.5%;width:5.6%;aspect-ratio:.867;bottom:42.35%}
.room-canvas .slot-0 img{left:-2.3%;top:-50%;width:114.94%;height:200%}
.room-canvas .slot-1 img{left:-9.524%;top:-29.31%;width:119.048%;height:172.414%}
.room-canvas .slot-2 img{left:-1.02%;top:-42.857%;width:102.041%;height:178.571%}
.room-canvas .slot-3 img{left:-46.667%;top:-97.674%;width:166.667%;height:232.558%;clip-path:polygon(28% 58%,30% 50%,34% 52%,42% 47%,47% 43%,51% 42%,59% 46%,68% 45%,77% 46%,80% 45%,86% 51%,88% 56%,83% 80%,80% 82%,36% 85%,32% 80%,30% 69%)}
.room-canvas .slot-4 img{left:-50%;top:-53.125%;width:277.778%;height:312.5%;clip-path:polygon(18% 23%,20% 21%,34% 18%,47% 17%,51% 21%,52% 28%,53% 39%,54% 48%,47% 49%,20% 49%,18% 44%)}
.room-canvas .slot-5 img{left:-75.676%;top:-193.75%;width:270.27%;height:312.5%}
.room-canvas .soap-tag{top:calc(100% + 8px);bottom:auto;z-index:2}
.room-canvas .placed-soap:hover .soap-silhouette{filter:drop-shadow(0 0 5px #efd1a180)}
.room-canvas .placed-soap:focus-visible{outline-offset:6px}
@media(max-width:760px){
 /* Keep the shelf geometry registered at every phone height, instead of a
    cover crop moving shelf planes behind independently positioned products. */
 .room-art{width:238.095%;left:-76.19%;height:100%;object-fit:fill;object-position:center}
 .room-canvas .slot-0{left:11.19%;width:20.95%}
 .room-canvas .slot-1{left:41.43%;width:19.05%}
 .room-canvas .slot-2{left:68.1%;width:21.67%}
 .room-canvas .slot-3{left:8.81%;width:15.95%}
 .room-canvas .slot-4{display:block;left:35.24%;width:11.9%}
 .room-canvas .slot-5{display:block;left:77.38%;width:13.33%}
 .room-canvas .soap-tag{opacity:0;font-size:10px;white-space:normal;min-width:70px;text-align:center}
 .room-canvas .placed-soap:hover .soap-tag,.room-canvas .placed-soap:focus-visible .soap-tag{opacity:1}
 .room-barrel{background-image:url('/assets/general-store-refined.png')!important}
 .counter-sign{top:70%}
}
/* Invisible hit area never moves the registered photo/shelf contact point. */
.placed-soap:after{content:"";position:absolute;inset:-5px;min-width:44px;min-height:44px;left:50%;transform:translateX(-50%)}
/* A readable slate sign mounted on the counter front, not floating type.
   Layered native CSS keeps lettering crisp and accessible at every size. */
.room-canvas{container-type:inline-size}
.counter-sign.chalkboard{left:37%;top:71%;width:32%;padding:16px 12px 15px;box-sizing:border-box;transform:rotate(-1deg);color:#eeeadd;border:8px solid #755033;border-radius:2px;background:radial-gradient(ellipse at 25% 80%,#d1d3c516,transparent 47%),radial-gradient(ellipse at 70% 15%,#e5e7dd12,transparent 55%),repeating-linear-gradient(173deg,#ffffff03 0 1px,transparent 1px 5px),#25302d;box-shadow:inset 0 0 0 2px #0d1513,inset 0 0 15px #0007,0 2px 0 #b58a59,0 7px 9px #120a08a6;outline:1px solid #392416;text-shadow:0 0 1px #fff8,1px 1px 0 #ffffff15}
.counter-sign.chalkboard:before,.counter-sign.chalkboard:after{content:"";position:absolute;top:-5px;width:3px;height:3px;background:#37291d;border-radius:50%;box-shadow:0 1px 0 #bd9674}
.counter-sign.chalkboard:before{left:3px}.counter-sign.chalkboard:after{right:3px}
.counter-sign.chalkboard strong{display:block;font:italic 500 clamp(15px,2.2cqw,30px)/1.15 Georgia,serif;letter-spacing:.02em}
.counter-sign.chalkboard span{font:italic clamp(11px,1.25cqw,17px)/1.4 Georgia,serif;letter-spacing:.03em;margin:10px 0 0}
@media(max-width:760px){
 .counter-sign.chalkboard{left:28.5%;top:69%;width:43%;border-width:5px;padding:12px 6px 11px}
 .counter-sign.chalkboard strong{font-size:clamp(13px,4.3cqw,18px);line-height:1.25}
 .counter-sign.chalkboard span{font-size:clamp(10px,3.1cqw,12px);margin-top:8px;letter-spacing:0}
}
/* The right barrel is fully inside the art; its button follows the actual
   paper label at83–94% x64–76%, not the old clipped outer edge. */
.scene-stage{background-image:url('/assets/general-store-barrel.png')}
.room-canvas .barrel-right{left:83.5%;right:auto;top:65%;width:9.8%;height:10.5%}
.room-canvas .barrel-right span{font-size:clamp(12px,1.9cqw,22px);transform:none}
.room-canvas .barrel-right small{font-size:clamp(8px,.85cqw,11px);max-width:95%;margin-top:5px;line-height:1.2}
@media(max-width:760px){
 .room-canvas .barrel-right{left:auto;right:2%;top:auto;bottom:8%;width:25%;height:26%;background-image:url('/assets/general-store-barrel.png')!important;background-size:588.235% 250%!important;background-position:96.386% 86.667%!important;clip-path:polygon(10% 0,88% 0,98% 10%,100% 80%,92% 99%,8% 99%,0 80%,2% 12%)}
 .room-canvas .barrel-right span{top:31%;left:18%;width:65%;padding:4px 0;font-size:12px;line-height:1.15;background:none;border:0;box-shadow:none;color:#422c17}
 .room-canvas .barrel-right small{display:none}
}