/* Desktop deliberately inherits the verified live flavor-canvas.css unchanged.
   Regions and cards remain in two independent absolute-positioned layers. */
.canvas-arrangement{display:none}
@media(max-width:720px){
 .demo-embedded main,main{padding:0 12px}
 .atlas-scroll{overflow:visible;padding:0 0 26px}
 .atlas-frame{width:100%;min-width:0;padding:0}
 .atlas-frame .canvas{height:auto;min-height:0;padding:18px 8px 28px;background:#f2efe6;border:1px solid #183c2b20;border-radius:22px;overflow:visible}
 .atlas-frame #regions{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px;margin:0}
 .atlas-frame .region{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-width:0;padding:28px 12px 34px;background:transparent!important;border-radius:0!important;isolation:isolate;order:2}
 .atlas-frame .region:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--color);border-radius:var(--mobile-shape,29% 36% 22% 32% / 18% 14% 25% 19%);pointer-events:none}
 .atlas-frame .region.has-beans{grid-column:1/-1;order:1;padding:40px 16px 60px;--mobile-shape:18% 27% 12% 23% / 6% 9% 5% 8%}
 .atlas-frame .region[data-region=fruity]{--mobile-shape:24% 12% 23% 11% / 5% 4% 6% 3%}
 .atlas-frame .region[data-region=fermented]{--mobile-shape:12% 28% 14% 25% / 8% 12% 7% 11%}
 .atlas-frame .region.dim{opacity:1;filter:none}.atlas-frame .region.active{outline:0;box-shadow:none}
 .atlas-frame .region.active:before{outline:2px solid var(--ink);outline-offset:3px}
 .atlas-frame .region .region-title,.atlas-frame .region[data-region] .region-title{position:relative;inset:auto;max-width:none;margin:0 4px 30px}
 .atlas-frame .region-title>button{font-size:22px;min-height:44px}
 .atlas-frame .region:not(.has-beans) .region-title{margin-bottom:0}
 .atlas-frame .region:not(.has-beans) .region-title>button{font-size:18px}
 .atlas-frame .region-children,.atlas-frame .region[data-region] .region-children{display:flex;max-width:none;gap:7px}
 .atlas-frame .flavor-button{min-height:36px;padding:7px 9px;font-size:11px}
 .region-beans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px;align-items:start}
 .atlas-frame .bean-card{position:relative;inset:auto;width:100%;height:auto;min-height:245px;padding:18px 12px 14px;min-width:0;border-radius:5px;transform:rotate(calc(var(--rotate)*.55));box-shadow:3px 9px 18px #35211d26}
 .atlas-frame .bean-card:nth-child(2n){margin-top:24px}
 .atlas-frame .region[data-region=floral] .bean-card:first-child{grid-column:1;grid-row:1;margin-left:8%}
 .atlas-frame .region[data-region=floral] .bean-card:nth-child(2){grid-column:2;grid-row:2;margin-top:0}
 .atlas-frame .region[data-region=floral] .bean-card:nth-child(3){grid-column:1;grid-row:2;margin-top:48px}
 .atlas-frame .region[data-region=fruity] .bean-card:nth-child(3){grid-column:2;grid-row:2;margin-top:10px}
 .atlas-frame .region[data-region=fruity] .bean-card:nth-child(4){grid-column:1;grid-row:3;margin-top:0}
 .atlas-frame .region[data-region=fruity] .bean-card:nth-child(5){grid-column:2;grid-row:3;margin-top:40px}
 .atlas-frame .region[data-region=fruity] .bean-card:nth-child(6){grid-column:1;grid-row:4;margin-left:12%}
 .atlas-frame .region[data-region=fermented] .bean-card:only-child{margin-left:34%;margin-top:6px}
 .atlas-frame .bean-card h3{font-size:18px;line-height:1.35;overflow-wrap:anywhere;hyphens:auto}
 .atlas-frame .card-farm{font-size:11px;line-height:1.55;margin-bottom:22px}
 .atlas-frame .card-tags{max-height:none;overflow:visible;font-size:10px}
 .atlas-frame .card-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:10px;line-height:1.55}
 .atlas-frame .card-index{font-size:9px;gap:5px;flex-wrap:wrap}.atlas-frame .card-index small{font-size:8px}
 .atlas-frame .card-swatches{margin-top:auto}.atlas-frame .bean-card.dim{display:none}
 .atlas-frame #bean-cards:empty{display:none}
 .mobile-flavor-filters{display:flex;flex-wrap:wrap;overflow:visible;gap:7px;margin:0 0 16px;padding:3px 1px}
 .mobile-flavor-filters .flavor-button{min-height:38px;padding:8px 12px;font-size:11px}
 .canvas-arrangement{display:block;font-size:11px;line-height:1.7;color:#617468;margin:0 4px 16px}
 .canvas-toolbar:after{display:none!important}.canvas-toolbar{font-size:11px;flex-wrap:wrap}.canvas-hint{display:none}
 .intro-aside{display:none}.intro{margin:24px 4px}.intro h1{letter-spacing:0;line-height:1.3!important}
 .atlas-frame #regions.is-filtered{display:block}.atlas-frame #regions.is-filtered .region .bean-card{grid-column:auto;grid-row:auto;margin-left:0}
}
@media(max-width:360px){
 .region.has-beans .region-beans{grid-template-columns:minmax(0,1fr);gap:30px}
 .atlas-frame .region[data-region] .bean-card:nth-child(n){grid-column:auto;grid-row:auto;width:76%;margin:0 0 0 3%;min-height:235px}
 .atlas-frame .region[data-region] .bean-card:nth-child(even){margin-left:20%}
}
@media(prefers-reduced-motion:reduce){.bean-card,.region{transition:none}}

@media(max-width:720px){.atlas-frame .empty-message{position:relative;inset:auto;min-height:230px;margin-top:22px}.atlas-frame .region-children{flex-wrap:wrap}}