/* Phone menu: one large portrait dish per swipe, centered snap; categories remain a separate filter. */
@media (max-width: 700px) {
  /* The document scrolls vertically; each category owns a separate horizontal dish rail. */
  body #thuc-don #product-grid {
    display:block !important; width:auto !important; height:auto !important; min-height:0 !important;
    margin:0 !important; padding:0 !important; overflow:visible !important; scroll-snap-type:none !important;
  }
  body #thuc-don .product-category-section { display:block !important; width:100% !important; }
  body #thuc-don .product-category-heading { display:grid !important; }
  body #thuc-don .product-category-products {
    display:flex !important; flex-flow:row nowrap !important; align-items:stretch !important;
    width:auto !important; height:auto !important; min-height:0 !important; margin:0 -16px 12px !important;
    padding:8px 7vw 16px !important; overflow-x:auto !important; overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important; scroll-padding-inline:7vw !important;
    -webkit-overflow-scrolling:touch !important; overscroll-behavior-x:contain !important;
    touch-action:pan-x pan-y !important; scrollbar-width:none !important;
  }
  body .menu-category-rail > .category-tabs { display: none !important; }
  body .menu-category-rail > .mobile-category-picker { display: block !important; }
  body .mobile-category-picker { min-height: 48px !important; }
  body .mobile-category-picker select {
    width: 100% !important; min-height: 46px !important; border: 1px solid #8c6d4b !important;
    border-radius: 12px !important; background: #d9c09f !important; color: #302319 !important;
    font-size: 14px !important; font-weight: 750 !important;
  }
  body .product-category-heading {
    display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 3px 8px !important;
    align-items: center !important; margin-bottom: 8px !important; padding: 7px 0 !important;
  }
  body .product-category-heading::after {
    content: "Vuốt nhẹ để chuyển từng món  ·  thẻ tự căn giữa"; grid-column: 1 / -1;
    color: #40563d !important; font-size: 11px !important; font-weight: 750 !important;
  }
  body .product-category-products {
    display: flex !important; flex-flow: row nowrap !important; align-items: stretch !important; gap: 14px !important;
    width: auto !important; margin: 0 -16px 12px !important; padding: 8px 7vw 16px !important;
    overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 7vw !important; scrollbar-width: none !important; touch-action: pan-x pan-y !important;
  }
  body .product-category-products::-webkit-scrollbar { display: none !important; }
  body .product-category-products > .product-card {
    display: grid !important; flex: 0 0 86vw !important; grid-template-columns: minmax(0,1fr) !important;
    align-content: start !important; width: 86vw !important; min-width: 86vw !important; max-width: 86vw !important;
    margin: 0 !important; overflow: hidden !important; scroll-snap-align: center !important; scroll-snap-stop: always !important;
    background: #ead7c0 !important; color: #302319 !important; border-color: #8d704e !important;
  }
  body .product-category-products > .product-card > .product-art {
    grid-column: 1 !important; grid-row: 1 !important; width: 100% !important;
    height: clamp(300px, 108vw, 430px) !important; min-height: 0 !important; aspect-ratio: 4 / 5 !important;
  }
  body .product-category-products > .product-card > .product-art img {
    display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover !important;
  }
  body .product-category-products > .product-card > .product-info {
    grid-column: 1 !important; grid-row: 2 !important; min-width: 0 !important; padding: 14px !important; color: #302319 !important;
  }
  body .product-category-products .product-card :is(.product-title-row h3,.product-price) { opacity: 1 !important; }
  body .product-category-products .product-card .product-category { color: #40563d !important; font-weight: 750 !important; }
  body .product-category-products .product-card .product-desc { color: #493b2e !important; opacity: 1 !important; }
  body .product-category-products .product-card .product-detail-trigger { color: #40563d !important; text-decoration-color: #40563d !important; opacity: 1 !important; }
  body .featured-products { grid-template-columns: 1fr !important; }
  body .featured-card { grid-template-columns: 112px minmax(0,1fr) !important; }
  body .featured-card img { width: 112px !important; height: 100px !important; }
}

/* Keep phone category selector visible while browsing the menu. */
@media (max-width:700px) {
  body .site-header { position:sticky !important; top:0 !important; z-index:120 !important; }
  body .menu-category-rail {
    position:sticky !important; top:64px !important; z-index:110 !important;
    display:grid !important; grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important; gap:8px !important; overflow:visible !important;
    max-height:none !important; min-height:58px !important; margin:0 -14px 12px !important;
    padding:7px 12px !important; background:#4b3625 !important;
    border-bottom:2px solid #a58a54 !important; box-shadow:0 5px 12px #20150d55 !important;
  }
  body .menu-category-rail > .category-tabs { display:none !important; }
  body .menu-category-rail > .mobile-category-picker {
    display:block !important; position:relative !important; min-width:0 !important;
    min-height:44px !important; z-index:1 !important;
  }
  body .mobile-category-picker select {
    min-height:44px !important; color:#2d241a !important; font-weight:800 !important;
  }
}