/* Static art is the fallback; only a successful 3D render replaces it. */
.bagel-scene { position: relative; isolation: isolate; width: 100%; height: auto; aspect-ratio: 460 / 340; }
.bagel-scene-art { display: block; width: 100%; height: 100%; overflow: visible; }
.bagel-scene-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; }
.bagel-scene.is-3d-ready .bagel-scene-canvas { opacity: 1; visibility: visible; }
.bagel-scene.is-3d-ready .bagel-scene-fallback { opacity: 0; visibility: hidden; }

/* The homepage breakfast scene has its own scale; Lunch and Group boxes
   continue to use the compact shared motion layout. */
.browse-intro-with-art > .catering-motion.catering-motion-hero { flex-direction: column; gap: 0; min-height: 0; padding: 0.4rem 0.8rem 0.85rem; border: 1px solid #d8d5c4; border-radius: 20px; background: radial-gradient(ellipse at 60% 30%, #fffaf0, #f1eadc 76%); box-shadow: 0 9px 24px rgb(48 76 59 / 5%); }
.browse-intro-with-art > .catering-motion-hero .catering-motion-stage { display: grid; place-items: center; flex: 0 0 auto; width: 100%; max-width: none; height: auto; aspect-ratio: 460 / 340; }
.browse-intro-with-art > .catering-motion-hero .catering-motion-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; flex: 0 0 auto; gap: 0.45rem 0.9rem; width: 100%; padding: 0 0.35rem; }
.browse-intro-with-art > .catering-motion-hero .catering-motion-line { font-size: 1.2rem; line-height: 1.15; }
.browse-intro-with-art > .catering-motion-hero .catering-motion-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.4rem; max-width: 185px; text-align: right; }
.browse-intro-with-art > .catering-motion-hero .catering-motion-replay { min-width: 84px; margin-top: 0; }
.browse-intro-with-art > .catering-motion-hero .catering-motion-preference { flex-basis: 100%; max-width: 22ch; font-size: 0.65rem; }
.catering-motion-turn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.5rem 0.65rem; border: 1px solid #c3cbb6; border-radius: 99px; background: #fffdf6; color: var(--green, #304c3b); font-family: var(--font-body, sans-serif); font-size: 0.73rem; font-weight: 600; line-height: 1.3; cursor: pointer; }
.catering-motion-turn[hidden] { display: none; }
.catering-motion-turn:hover { border-color: var(--orange, #b64f28); color: var(--orange, #b64f28); }
.catering-motion-turn:focus-visible { outline: 3px solid var(--focus, #28614c); outline-offset: 3px; }
.catering-motion-menu-link { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; margin-top: 0.2rem; padding-top: 0.45rem; border-top: 1px solid #d7d7c6; color: var(--orange, #b64f28); font-family: var(--font-body, sans-serif); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.catering-motion-menu-link:hover { color: var(--orange-hover, #943d1d); text-decoration: underline; }
.catering-motion-menu-link span { font-size: 1.15rem; }
@media (max-width: 1100px) and (min-width: 681px) {
  .browse-intro-with-art > .catering-motion-hero .catering-motion-stage { height: auto; }
  .browse-intro-with-art > .catering-motion-hero .catering-motion-line { font-size: 1.1rem; }
}
@media (max-width: 680px) {
  .browse-intro-with-art > .catering-motion.catering-motion-hero { width: 100%; max-width: 430px; margin-inline: auto; padding: 0 0.85rem 0.7rem; }
  .browse-intro-with-art > .catering-motion-hero .catering-motion-stage { height: auto; aspect-ratio: 460 / 340; }
  .browse-intro-with-art > .catering-motion-hero .catering-motion-caption { gap: 0.3rem 0.75rem; }
  .browse-intro-with-art > .catering-motion-hero .catering-motion-line { font-size: 1.16rem; }
}
@media print {
  .catering-motion-turn { display: none; }
  .bagel-scene-canvas { display: none; }
  .bagel-scene.is-3d-ready .bagel-scene-fallback { opacity: 1; visibility: visible; }
}