/* V1.3.2: a closer box, visible roll placement and subject-aware photography. */
.box-scene{height:400px;margin:8px auto 4px}
.explorer-art{height:auto;aspect-ratio:1.02;max-height:520px}
.explorer-halo{inset:0;border-radius:48% 48% 12px 12px}
.explorer-image,.explorer-image.portrait{position:absolute;inset:12px 12px 24px;width:auto;height:auto;border-radius:47% 47% 10px 10px;box-shadow:none}
.explorer-image img,.explorer-image.portrait img{position:static;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 45%}
.explorer-image[data-flavour=classic] img{object-position:50% 43%}
.explorer-image[data-flavour=biscoff] img{object-position:50% 44%}
.explorer-image[data-flavour=nutella] img{object-position:50% 44%}
.explorer-image[data-flavour=mocha] img{object-position:50% 44%}
.explorer-image[data-flavour=cookies] img{object-position:50% 44%}
.explorer-image[data-flavour=strawberry] img{object-position:50% 44%}
.explorer-image[data-flavour=nutella-strawberry] img{object-position:50% 44%}
.explorer-image[data-flavour=choco-chunk] img{object-position:50% 44%}
.explorer-image[data-flavour=peanut] img{object-position:50% 64%}
.explorer-navigation{bottom:-16px;left:12px;right:12px;z-index:2}
.explorer-navigation button{width:48px;height:48px;background:var(--paper)}
.explorer-navigation span{padding:6px 10px;background:var(--paper);border:1px solid var(--line);border-radius:100px;font-size:12px}
.explorer-dock strong{overflow-wrap:anywhere;line-height:1.12}
.builder-live-preview{display:none}
.box-scene-placeholder[hidden]{display:none}
body.thumbnails-visible .explorer-dock,body.explorer-copy-visible .explorer-dock{visibility:hidden!important;pointer-events:none!important}
@keyframes box-placed{0%{transform:translateY(-10px) scale(.8);box-shadow:0 0 0 0 #60362440}65%{transform:translateY(2px) scale(1.08)}100%{transform:none;box-shadow:0 0 0 10px transparent}}
@media(max-width:700px){
 .box-scene{height:clamp(300px,88vw,380px);margin:8px auto 0}
 .builder-stage{padding-top:25px;padding-bottom:20px}
 .builder .builder-stage .box-slots{margin-top:3px}
 .explorer-art{height:auto;aspect-ratio:1.02;width:100%;max-width:420px}
 .explorer{gap:46px}
 .explorer-copy h2{font-size:clamp(42px,11vw,56px);line-height:1.04;overflow-wrap:normal}
 .flavour-thumbnails{margin-top:12px;padding-top:28px;padding-bottom:18px}
 body[data-page=rolls].exploring .explorer-dock{gap:12px;padding:12px 14px;max-width:calc(100% - 28px);left:14px;right:14px}
 .explorer-dock>div{flex:1;min-width:0}
 .explorer-dock strong{font-size:22px;line-height:1.12}
 .explorer-dock .button{font-size:12px;padding:11px 14px;gap:8px}
 .builder-live-preview{position:fixed;top:max(8px,env(safe-area-inset-top));left:12px;right:12px;z-index:34;display:none;grid-template-columns:minmax(80px,1fr) minmax(0,2.3fr);align-items:center;gap:0;background:#fcf8f2fa;border:1px solid #d5baa7;border-radius:18px;box-shadow:0 8px 28px #482c231c;overflow:hidden;padding-left:14px;pointer-events:none}
 body.builder-preview-visible .builder-live-preview{display:grid}
 .builder-live-preview .eyebrow{font-size:10px;line-height:1.5}
 .builder-live-preview strong{display:block;font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.1;margin-top:7px}
 #live-box-mount .box-scene{height:176px;min-height:0;width:100%;margin:0}
 #live-box-mount canvas{pointer-events:none}
 #choose-rolls{scroll-margin-top:200px}
 html:has(body.builder-preview-visible){scroll-padding-top:200px}
 body.builder-preview-visible .builder-row{scroll-margin-top:200px}
 body:has(dialog[open]) .builder-live-preview{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){.box-slot{animation:none!important}}