/* Casa Pizza LTS79 — slideshow moved to Home + fully reachable mobile Menu controls. */

/* The Menu control zone is now the first content under the Menu header. Keep the
   entire control shell within the phone viewport; only the category strip itself
   scrolls horizontally. */
@media (max-width: 720px) {
  body[data-page="menu"] .menu-control-zone,
  body[data-page="menu"] .menu-control-shell,
  body[data-page="menu"] .menu-toolbar,
  body[data-page="menu"] .menu-category-rail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page="menu"] .menu-control-shell {
    overflow: hidden !important;
  }

  body[data-page="menu"] .menu-search-large,
  body[data-page="menu"] .menu-search-large input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page="menu"] .menu-category-rail {
    display: block !important;
    overflow: hidden !important;
  }

  body[data-page="menu"] .menu-category-tabs {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 12px 4px 1px !important;
    scroll-padding-inline: 1px 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
  }

  /* Side arrows remain a desktop/tablet affordance. Phones use native swipe. */
  body[data-page="menu"] .menu-category-arrow {
    display: none !important;
  }
}

/* The promotional slideshow now belongs to Գլխավոր. Its phone pagination stays
   compact just like LTS78's Menu version, and touch users swipe between slides. */
@media (max-width: 720px) {
  body[data-page="home"] .menu-slideshow__pagination {
    min-height: 20px !important;
    padding: 4px 7px !important;
    gap: 4px !important;
    bottom: 12px !important;
  }
  body[data-page="home"] .menu-slideshow__dot {
    width: 6px !important;
    height: 6px !important;
  }
  body[data-page="home"] .menu-slideshow__dot[aria-current="true"] {
    width: 17px !important;
  }
}