html { scroll-behavior: smooth; }
.food-menu { --card: clamp(340px, 34vw, 490px); position: relative; isolation: isolate; overflow: hidden; background: #fff3d9; background-position: center; background-size: cover; padding: 64px 0 28px; }
.food-menu.is-near { background-image: url('./assets/optimized/menu-background-1280.webp'); }
.food-menu__heading { position: relative; z-index: 5; text-align: center; padding: 0 20px; }
.food-menu h2 { font: 700 clamp(46px, 7.8vw, 112px)/1 'Bystander Serif', serif; text-transform: uppercase; color: var(--red); margin: 0 0 28px; }
.food-menu__categories { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.food-menu__categories button { min-height: 58px; min-width: 150px; border: 1px solid white; border-radius: 50px; padding: 12px 26px; background: #fff8e9c9; color: var(--red-dark); font-family: inherit; font-size: 20px; line-height: 1.2; font-weight: 700; cursor: pointer; }
.food-menu__categories button[aria-pressed='true'] { background: linear-gradient(#ff4c2c,#ec2415); color: white; }
.food-menu__categories button:disabled { cursor: default; color: #785448; background: #fff8e9a8; }
.food-menu__categories small { display: block; font-size: 12px; font-weight: 500; margin-top: 2px; }
.food-carousel { position: relative; width: min(1440px,100%); margin: 8px auto 0; height: calc(var(--card) * 1.4); touch-action: pan-y pinch-zoom; user-select: none; cursor: grab; }
.food-carousel.is-dragging { cursor: grabbing; }
.food-carousel__stage { position: absolute; inset: 0 16% 0 0; }
.food-slide { --shift: 0%; --scale: 1; position: absolute; width: var(--card); height: 100%; left: 50%; top: 0; transform: translateX(calc(-50% + var(--shift) + var(--drag, 0px))) scale(var(--scale)); transform-origin: center 76%; transition: transform 650ms cubic-bezier(.22,.8,.2,1), filter 650ms, opacity 650ms; z-index: 3; pointer-events: none; }
.food-slide[data-position='left'] { --shift: -95%; --scale: .56; filter: blur(2px); opacity: .8; z-index: 1; }
.food-slide[data-position='right'] { --shift: 95%; --scale: .56; filter: blur(2px); opacity: .8; z-index: 1; }
.is-dragging .food-slide { transition: none; }
.food-slide__product { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 2; filter: drop-shadow(0 22px 14px #8c341529); }
.food-slide__pedestal { position: absolute; top: calc(var(--card) * .18); left: -20%; width: 140%; height: auto; z-index: 1; }
.food-carousel__caption { position: absolute; top: calc(var(--card) * .96); left: 50%; transform: translateX(-50%); width: var(--card); text-align: center; z-index: 6; cursor: default; }
.food-carousel__caption h3 { font: 700 clamp(32px,4vw,54px)/1 'Bystander Serif',serif; margin: 0 0 14px; }
.food-detail { min-height: 48px; padding: 10px 28px; width: auto; font-size: 18px; gap: 16px; border: none; cursor: pointer; }
.food-carousel__dots { display: flex; justify-content: center; margin-top: 4px; }
.food-carousel__dots button { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.food-carousel__dots button::after { content: ''; width: 12px; height: 12px; background: #b97442; border-radius: 50%; transition: transform 200ms; }
.food-carousel__dots button[aria-current='true']::after { background: var(--red); transform: scale(1.25); }
.food-menu__mascot { position: absolute; right: 0; bottom: 10%; width: 27%; max-height: 90%; object-fit: contain; z-index: 4; pointer-events: none; }
.carousel-arrow { position: absolute; top: 38%; z-index: 7; border: 1px solid white; background: #fff8e8ed; box-shadow: 0 8px 24px #8c341515; color: var(--red-dark); width: 64px; height: 64px; border-radius: 50%; font: 48px/1 system-ui; cursor: pointer; transition: transform 200ms; }
.carousel-arrow:hover { transform: scale(1.07); }
.carousel-arrow--prev { left: 3%; }
.carousel-arrow--next { right: 3%; }
.menu-garnish { position: absolute; z-index: 4; width: 11%; pointer-events: none; }
.menu-garnish--pineapple { left: 25%; top: 20%; transform: rotate(-20deg); }
.menu-garnish--cilantro { right: 24%; top: 12%; width: 9%; transform: rotate(22deg); }
.food-menu__hint { text-align: center; font-size: 14px; margin: 0; }
.food-dialog { width: min(460px,calc(100% - 32px)); max-height: 90svh; overflow: auto; border: 1px solid #fff; border-radius: 28px; background: #fff4de; color: var(--red-dark); padding: 28px; text-align: center; }
.food-dialog::backdrop { background: #40130bb3; backdrop-filter: blur(6px); }
.food-dialog__image { width: 100%; height: auto; max-height: 42svh; object-fit: contain; }
.food-dialog h2 { font: 700 42px/1.1 'Bystander Serif',serif; margin: 0; }
.food-dialog p { font-size: 16px; line-height: 1.5; }
.food-dialog__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--red); color: white; font-size: 28px; cursor: pointer; }
@media(max-width: 1000px) { .food-menu { --card: clamp(340px,49vw,460px); } .food-carousel__stage { right: 10%; } .food-menu__mascot { width: 25%; right: 0; bottom: 4%; } .food-menu__categories button { min-width: 130px; } }
@media(max-width: 600px) {
  .food-menu { --card: min(84vw,360px); padding: 40px 0 24px; background-position: center bottom; }
  .food-menu h2 { font-size: clamp(36px,10vw,58px); margin-bottom: 20px; }
  .food-menu__categories { gap: 8px; }
  .food-menu__categories button { min-width: 0; flex: 1 1 40%; max-width: 180px; min-height: 48px; padding: 8px 14px; font-size: 16px; }
  .food-carousel { height: calc(var(--card) * 1.55); margin-top: 18px; }
  .food-carousel__stage { right: 0; }
  .food-slide[data-position='left'] { --shift: -83%; --scale: .48; }
  .food-slide[data-position='right'] { --shift: 83%; --scale: .48; }
  .food-menu__mascot { width: 26%; right: 0; bottom: -2%; }
  .food-carousel__caption { top: calc(var(--card) * .94); }
  .food-carousel__caption h3 { font-size: 34px; margin-bottom: 10px; }
  .food-detail { font-size: 16px; padding: 10px 22px; min-height: 46px; }
  .carousel-arrow { width: 46px; height: 46px; font-size: 36px; top: 35%; }
  .carousel-arrow--prev { left: 10px; } .carousel-arrow--next { right: 10px; }
  .menu-garnish--pineapple { left: 10%; } .menu-garnish--cilantro { right: 12%; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .food-menu *, .food-menu *::after { transition: none !important; animation: none !important; } }

@media(max-width:600px){.food-menu.is-near{background:url('./assets/optimized/menu-background-640.webp') center bottom / cover no-repeat}}