:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { background: #050505; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #050505; overflow-x: hidden; }
.approved { position: relative; width: 100%; aspect-ratio: 1680 / 941; min-height: 560px; overflow: hidden; background: #050505; }
.approved-layout { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top center; user-select: none; -webkit-user-drag: none; }
.hotspot { position: absolute; z-index: 8; display: block; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.hotspot:focus-visible, .hotspot:hover { outline: none; border-color: #a13429aa; background: #8f211618; }
.hotspot-logo { left: 5.2%; top: 3.4%; width: 17%; height: 9.5%; }
.hotspot-menu { left: 35%; top: 4.8%; width: 5%; height: 4%; }
.hotspot-about { left: 42.4%; top: 4.8%; width: 5%; height: 4%; }
.hotspot-delivery { left: 49.8%; top: 4.8%; width: 6.5%; height: 4%; }
.hotspot-wholesale { left: 58.1%; top: 4.8%; width: 4.2%; height: 4%; }
.hotspot-contact { left: 64.1%; top: 4.8%; width: 6.3%; height: 4%; }
.hotspot-order { right: 5.7%; top: 3.5%; width: 13.3%; height: 7%; }
.hotspot-hero-order { left: 5.8%; top: 48.7%; width: 15.7%; height: 6.1%; }
.hotspot-view-menu { left: 24.6%; top: 49.6%; width: 8.3%; height: 4.8%; }
.hotspot-product { top: 77.2%; height: 19.4%; }
.hotspot-product-1 { left: 5.45%; width: 14.5%; }
.hotspot-product-2 { left: 21.15%; width: 14.5%; }
.hotspot-product-3 { left: 36.85%; width: 14.5%; }
.hotspot-product-4 { left: 52.55%; width: 14.5%; }
.hotspot-gift { right: 7.1%; top: 87.3%; width: 12.7%; height: 6.1%; }
.debug-hotspots .hotspot { border-color: #00ff88 !important; background: #00ff8826 !important; }
.steam { position: absolute; z-index: 5; bottom: 43%; width: 2.3%; height: 20%; pointer-events: none; border-radius: 50%; filter: blur(8px); opacity: 0; background: linear-gradient(to top, transparent, #f2eee141 30%, #e8e3d12e 65%, transparent); transform-origin: 50% 100%; animation: rise 5.8s ease-in-out infinite; mix-blend-mode: screen; }
.steam-a { left: 54%; animation-delay: -1.2s; }
.steam-b { left: 62%; height: 24%; animation-delay: -3.9s; }
.steam-c { left: 71%; height: 19%; animation-delay: -2.5s; }
.steam-d { left: 80%; height: 22%; animation-delay: -.2s; }
.ember { position: absolute; z-index: 6; width: 3px; height: 3px; border-radius: 50%; background: #ef5d33; box-shadow: 0 0 10px 3px #e24823; pointer-events: none; animation: ember 4s linear infinite; }
.ember-a { left: 71%; top: 37%; }
.ember-b { left: 83%; top: 43%; animation-delay: -2s; }
.anchor { position: absolute; pointer-events: none; }
.anchor-products { top: 69%; }.anchor-about { top: 52%; }.anchor-delivery { top: 52%; }.anchor-gift { top: 73%; }
.mobile-note { display: none; }
@keyframes rise {
  0% { opacity: 0; transform: translate(0, 28%) scaleX(.55) rotate(-3deg); }
  18% { opacity: .65; }
  52% { opacity: .45; transform: translate(80%, -40%) scaleX(1.3) rotate(7deg); }
  100% { opacity: 0; transform: translate(-55%, -105%) scaleX(.7) rotate(-5deg); }
}
@keyframes ember { 0% { opacity: 0; transform: translateY(20px); } 25% { opacity: .8; } 100% { opacity: 0; transform: translate(18px, -80px); } }
@media (max-width: 760px) {
  .approved { width: 168vw; margin-left: -34vw; min-height: 610px; aspect-ratio: 1680 / 941; }
  .hotspot { display: none; }
  .steam { filter: blur(5px); }
  .mobile-note { display: flex; position: fixed; z-index: 20; left: 16px; right: 16px; bottom: 14px; align-items: center; justify-content: space-between; padding: 12px 15px; border: 1px solid #3a312d; background: #090908e8; backdrop-filter: blur(12px); color: #e6ddd0; font: 700 12px Georgia, serif; letter-spacing: 1px; }
  .mobile-order { padding: 8px 12px; border: 1px solid #a43a30; color: #e7dfd2; font: 500 10px 'Oswald', sans-serif; letter-spacing: 1.4px; text-decoration: none; text-transform: uppercase; }
  .mobile-order:hover, .mobile-order:focus-visible { background: #8f211618; outline: none; }
}
@media (prefers-reduced-motion: reduce) { .steam, .ember { animation: none; display: none; } }