[data-region-builder] { position: relative; width: min(100%, 240px); aspect-ratio: 1; margin: 0 auto 1rem; isolation: isolate; }
[data-region-builder] > .region-builder__base { width: 100%; height: 100%; object-fit: contain; }
[data-region-builder] [data-builder-region] { position: absolute; inset: 0; pointer-events: none; }
[data-region-builder] [data-builder-slot] { position: absolute; }
[data-region-builder] .region-builder__ingredient { display: block; width: 100%; height: 100%; object-fit: contain; animation: region-builder-appear .18s ease-out; }
[data-region-builder].region-builder--sushi [data-builder-region="sides"] { z-index: 2; }
[data-region-builder].region-builder--sushi [data-builder-region="center"] { z-index: 5; }
[data-region-builder].region-builder--sushi [data-builder-region="top"] { z-index: 4; }
.region-builder-popup .region-builder__heading { text-align: center; }
.region-builder-popup .pages { min-height: 30vh; }
.region-builder-popup .pages > .page:not(.active) { display: none; }
.region-builder-popup .pages > .page.active { display: block; }
.region-builder-popup .steps { display: flex; justify-content: center; gap: .75rem; margin: 1rem 0; }
.region-builder-popup .step { padding: .4rem .7rem; border-radius: 2rem; background: #eee; }
.region-builder-popup .step.active { font-weight: bold; background: #ddd; }
.region-builder-popup .region-builder__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.region-builder-strip .region-builder__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: .75rem; }
.region-builder-strip label { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; cursor: pointer; }
.region-builder-strip label img { width: 64px; height: 64px; object-fit: contain; }
.region-builder-strip label:has(input:disabled) { opacity: .5; cursor: default; }
.region-builder-strip input:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@keyframes region-builder-appear { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { [data-region-builder] .region-builder__ingredient { animation: none; } }