/* Final mobile layout override: reliable app-sized menu and POS navigation. */
@media (max-width: 760px) {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { max-width: 100%; overflow-x: hidden !important; }

  /* Customer menu: fixed app frame, four readable products per swipe page. */
  body:has(.site-header) {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  body:has(.site-header) .site-header {
    position: fixed !important; inset: 0 0 auto !important; height: 56px !important;
    min-height: 56px !important; z-index: 300 !important;
  }
  body:has(.site-header) .header-inner { height: 56px !important; min-height: 56px !important; }
  body:has(.site-header) .main-nav { display: none !important; }
  body:has(.site-header) main { display: contents !important; }
  body:has(.site-header) :is(.hero, .benefits, .story-section, .contact-section, .site-footer) { display: none !important; }
  body:has(.site-header) #thuc-don {
    position: fixed !important; inset: 56px 0 calc(60px + env(safe-area-inset-bottom)) !important;
    display: flex !important; flex-direction: column !important; gap: 0 !important;
    width: 100% !important; height: auto !important; min-height: 0 !important;
    max-width: none !important; margin: 0 !important; padding: 8px 10px 6px !important;
    overflow: hidden !important; scroll-margin: 0 !important;
  }
  body:has(.site-header) #thuc-don .menu-heading {
    flex: 0 0 48px !important; min-height: 48px !important; height: 48px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 8px !important; margin: 0 !important; padding: 0 2px 6px !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .menu-heading h2 { font-size: clamp(17px, 4.5vw, 21px) !important; line-height: 1.1 !important; }
  body:has(.site-header) #thuc-don .menu-search { flex: 0 1 44% !important; min-width: 86px !important; max-width: 44% !important; height: 34px !important; margin: 0 !important; }
  body:has(.site-header) #thuc-don .menu-category-rail {
    position: static !important; inset: auto !important; z-index: 1 !important;
    flex: 0 0 42px !important; width: 100% !important; height: 42px !important; min-height: 42px !important;
    display: flex !important; margin: 0 0 5px !important; padding: 2px 0 !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .mobile-category-picker { display: block !important; width: 100% !important; height: 36px !important; min-height: 36px !important; }
  body:has(.site-header) #thuc-don .mobile-category-picker select { width: 100% !important; height: 36px !important; min-height: 36px !important; }
  body:has(.site-header) #thuc-don .menu-layout,
  body:has(.site-header) #thuc-don .menu-main,
  body:has(.site-header) #thuc-don #product-grid {
    display: flex !important; flex: 1 1 0 !important; flex-direction: column !important;
    width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 0 !important;
    margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .menu-layout { gap: 0 !important; }
  body:has(.site-header) #thuc-don .featured-menu { display: none !important; }
  body:has(.site-header) #thuc-don .product-menu-app-page {
    display: flex !important; flex: 1 1 0 !important; flex-direction: column !important;
    width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .product-category-heading {
    flex: 0 0 28px !important; height: 28px !important; min-height: 28px !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
    margin: 0 !important; padding: 2px 3px !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .product-category-heading::after { content: "Vuốt ngang để xem món tiếp theo" !important; font-size: 9px !important; white-space: nowrap !important; }
  body:has(.site-header) #thuc-don .product-category-products {
    display: flex !important; flex: 1 1 0 !important; flex-flow: row nowrap !important; align-items: stretch !important;
    width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 0 !important;
    gap: 0 !important; margin: 0 !important; padding: 4px 0 1px !important;
    overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important;
    overscroll-behavior-x: contain !important; -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important; scrollbar-width: none !important;
  }
  body:has(.site-header) #thuc-don .product-category-products::-webkit-scrollbar { display: none !important; }
  body:has(.site-header) #thuc-don .product-category-products > .product-menu-page {
    display: grid !important; flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important;
    height: 100% !important; min-height: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; padding: 0 1px !important;
    overflow: hidden !important; scroll-snap-align: start !important; scroll-snap-stop: always !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card {
    display: flex !important; flex: none !important; flex-direction: column !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important;
    margin: 0 !important; overflow: hidden !important; border-radius: 10px !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card > .product-art {
    display: block !important; flex: 1 1 58% !important; width: 100% !important; height: auto !important;
    min-height: 0 !important; aspect-ratio: auto !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card > .product-art img {
    display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card > .product-info {
    display: flex !important; flex: 0 0 42% !important; flex-direction: column !important; gap: 3px !important;
    width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 6px !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page .product-card :is(.product-category,.product-desc,.product-detail-trigger,.product-controls,.quantity-control,.product-purchase-actions) { display: none !important; }
  body:has(.site-header) #thuc-don .product-menu-page .product-title-row { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; margin: 0 !important; }
  body:has(.site-header) #thuc-don .product-menu-page .product-title-row h3 {
    display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important;
    overflow: hidden !important; margin: 0 !important; font-size: clamp(12px, 3.5vw, 15px) !important; line-height: 1.15 !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page .product-price { display: block !important; margin: 0 !important; font-size: 12px !important; line-height: 1.1 !important; font-weight: 800 !important; }
  body:has(.site-header) #thuc-don .mobile-product-select {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important;
    flex: 0 0 32px !important; width: 100% !important; min-height: 32px !important; margin: auto 0 0 !important;
    padding: 3px !important; border-radius: 7px !important; font-size: 10px !important; font-weight: 800 !important;
  }
  body:has(.site-header) .customer-app-nav {
    position: fixed !important; z-index: 350 !important; inset: auto 0 0 !important;
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important; height: calc(60px + env(safe-area-inset-bottom)) !important;
    padding: 4px 12px calc(4px + env(safe-area-inset-bottom)) !important; gap: 6px !important;
  }
  body:has(.site-header) .customer-app-nav [data-customer-nav="account"] { display: none !important; }
  body:has(.site-header) .customer-app-nav button {
    width: 100% !important; min-width: 0 !important; min-height: 48px !important; height: 48px !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 2px !important; padding: 3px !important; font: 700 11px/1.1 Arial, sans-serif !important;
  }
  body:has(.site-header) .customer-app-nav button > span { width: 26px !important; height: 25px !important; display: grid !important; place-items: center !important; }
  body:has(.site-header) .customer-app-nav button svg { display: block !important; width: 23px !important; height: 23px !important; }

  /* Admin app shell: one compact header and isolated, non-overlapping controls. */
  body.admin-page { min-height: 100dvh !important; padding: 0 0 calc(64px + env(safe-area-inset-bottom)) !important; overflow-x: hidden !important; }
  body.admin-page .admin-topbar {
    position: sticky !important; top: 0 !important; z-index: 300 !important; box-sizing: border-box !important;
    width: 100% !important; min-height: 52px !important; height: 52px !important; padding: 5px 9px !important;
    display: flex !important; flex-flow: row nowrap !important; align-items: center !important; gap: 6px !important; overflow: hidden !important;
  }
  body.admin-page .admin-brand { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
  body.admin-page .admin-brand > span:last-child { min-width: 0 !important; overflow: hidden !important; }
  body.admin-page .admin-brand b { display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  body.admin-page .admin-top-actions {
    flex: 0 0 auto !important; width: auto !important; max-width: 42% !important; margin: 0 0 0 auto !important;
    display: flex !important; flex-flow: row nowrap !important; align-items: center !important; gap: 4px !important; overflow: hidden !important;
  }
  body.admin-page .admin-top-actions > a, body.admin-page #admin-user-name { display: none !important; }
  body.admin-page .admin-top-actions button:not([hidden]) { min-height: 32px !important; height: 32px !important; padding: 4px 7px !important; white-space: nowrap !important; font-size: 10px !important; }
  body.admin-page .admin-shell { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 10px 9px calc(14px + env(safe-area-inset-bottom)) !important; }
  body.admin-page .admin-tabs { display: none !important; }
  body.admin-page .admin-app-nav[hidden] { display: none !important; }
  body.admin-page .app-bottom-nav {
    position: fixed !important; z-index: 350 !important; inset: auto 0 0 !important;
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important; height: calc(62px + env(safe-area-inset-bottom)) !important;
    padding: 4px 7px calc(4px + env(safe-area-inset-bottom)) !important; gap: 4px !important;
  }
  body.admin-page .app-bottom-nav > button {
    position: relative !important; width: 100% !important; min-width: 0 !important; min-height: 50px !important; height: 50px !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 2px !important; margin: 0 !important; padding: 3px 1px !important; border: 0 !important;
    font: 700 10px/1.1 Arial, sans-serif !important; text-align: center !important; white-space: nowrap !important;
  }
  body.admin-page .app-bottom-nav > button > span { position: relative !important; width: 25px !important; height: 25px !important; display: grid !important; place-items: center !important; }
  body.admin-page .app-bottom-nav > button > span svg { display: block !important; width: 22px !important; height: 22px !important; }
  body.admin-page .app-bottom-nav > button small { display: block !important; margin: 0 !important; font: inherit !important; line-height: 1.1 !important; }

  /* POS counter: 4 products in a 2x2 page, horizontal paging only. */
  body.admin-page.pos-mode #admin-pos-panel:not([hidden]) {
    position: fixed !important; inset: 52px 0 calc(62px + env(safe-area-inset-bottom)) !important; z-index: 80 !important;
    box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 6px !important;
    margin: 0 !important; padding: 8px 9px 6px !important; overflow: hidden !important;
  }
  body.admin-page.pos-mode .pos-topline { flex: 0 0 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 2px 4px !important; }
  body.admin-page.pos-mode .pos-topline h2 { font-size: 18px !important; margin: 0 !important; }
  body.admin-page.pos-mode .pos-topline button { min-height: 30px !important; height: 30px !important; padding: 4px 7px !important; font-size: 10px !important; }
  body.admin-page.pos-mode .pos-toolbar {
    flex: 0 0 auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 4px 7px !important; margin: 0 !important; padding: 0 !important;
  }
  body.admin-page.pos-mode .pos-toolbar label { min-width: 0 !important; font-size: 10px !important; }
  body.admin-page.pos-mode .pos-toolbar :is(select,input) { width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; padding: 4px 7px !important; font-size: 12px !important; }
  body.admin-page.pos-mode .pos-paging { grid-column: 1 / -1 !important; min-height: 32px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; }
  body.admin-page.pos-mode .pos-paging span { flex: 1 1 auto !important; font-size: 10px !important; }
  body.admin-page.pos-mode .pos-paging button { width: 38px !important; min-width: 38px !important; min-height: 30px !important; height: 30px !important; padding: 0 !important; }
  body.admin-page.pos-mode .pos-menu-viewport {
    position: relative !important; flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important;
    height: 0 !important; margin: 0 !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important; overscroll-behavior-x: contain !important; touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.admin-page.pos-mode .pos-menu-track { display: flex !important; flex-flow: row nowrap !important; width: max-content !important; min-width: 100% !important; height: 100% !important; }
  body.admin-page.pos-mode .pos-page {
    flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; height: 100% !important; min-height: 0 !important;
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important; padding: 5px !important; overflow: hidden !important; scroll-snap-align: start !important;
  }
  body.admin-page.pos-mode .pos-tile { display: flex !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; }
  body.admin-page.pos-mode .pos-tile > img { display: block !important; flex: 1 1 58% !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; object-fit: cover !important; }
  body.admin-page.pos-mode .pos-tile-copy { flex: 0 0 42% !important; display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; min-height: 0 !important; padding: 5px !important; overflow: hidden !important; }
  body.admin-page.pos-mode .pos-tile-copy h3 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; margin: 0 !important; font-size: 12px !important; line-height: 1.15 !important; }
  body.admin-page.pos-mode .pos-tile-copy button { flex: 0 0 30px !important; min-height: 30px !important; height: 30px !important; margin-top: auto !important; padding: 3px !important; font-size: 10px !important; }
  body.admin-page.pos-mode .pos-bottom-bar { position: relative !important; inset: auto !important; z-index: 2 !important; flex: 0 0 48px !important; min-height: 48px !important; margin: 0 !important; padding: 4px 6px !important; gap: 6px !important; }
  body.admin-page.pos-mode .pos-bottom-bar button { min-height: 38px !important; height: 38px !important; padding: 4px 8px !important; font-size: 10px !important; }
  body.admin-page.pos-mode .pos-message { display: none !important; }
}

/* Vela/Huynh Long POS: reliable compact app layout on phones and handheld POS screens. */
@media (max-width: 1100px), (pointer: coarse) {
  html, body { max-width: 100%; overflow-x: hidden !important; }

  /* Customer menu: four full cards per horizontal page; never shrink pages into strips. */
  body:has(.site-header) #thuc-don {
    position: fixed !important; z-index: 40 !important; inset: 54px 0 calc(58px + env(safe-area-inset-bottom)) !important;
    display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important;
    min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 7px 9px 5px !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .menu-heading { flex: 0 0 42px !important; min-height: 42px !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; margin: 0 !important; padding: 0 2px 4px !important; overflow: hidden !important; }
  body:has(.site-header) #thuc-don .menu-heading h2 { margin: 0 !important; font-size: clamp(17px,4vw,21px) !important; }
  body:has(.site-header) #thuc-don .menu-search { flex: 0 1 42% !important; min-width: 82px !important; max-width: 42% !important; height: 32px !important; margin: 0 !important; }
  body:has(.site-header) #thuc-don .menu-layout,
  body:has(.site-header) #thuc-don .menu-main,
  body:has(.site-header) #thuc-don #product-grid { display: flex !important; flex: 1 1 0 !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
  body:has(.site-header) #thuc-don .menu-category-rail { position: static !important; flex: 0 0 38px !important; width: 100% !important; height: 38px !important; min-height: 38px !important; margin: 0 0 4px !important; padding: 0 !important; }
  body:has(.site-header) #thuc-don .menu-category-rail > :not(.mobile-category-picker) { display: none !important; }
  body:has(.site-header) #thuc-don .mobile-category-picker { display: block !important; width: 100% !important; height: 34px !important; min-height: 34px !important; }
  body:has(.site-header) #thuc-don .mobile-category-picker select { width: 100% !important; height: 34px !important; min-height: 34px !important; }
  body:has(.site-header) #thuc-don .featured-menu { display: none !important; }
  body:has(.site-header) #thuc-don .product-category-section.product-menu-app-page {
    display: flex !important; flex-direction: column !important; width: 100% !important;
    min-width: 0 !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .product-category-products {
    display: flex !important; flex: 1 1 0 !important; flex-flow: row nowrap !important;
    width: 100% !important; min-width: 100% !important; height: auto !important; min-height: 0 !important;
    overflow-x: auto !important; overflow-y: hidden !important; gap: 0 !important;
    scroll-snap-type: x mandatory !important; touch-action: pan-x !important;
  }
  body:has(.site-header) #thuc-don .product-category-products > .product-menu-page {
    box-sizing: border-box !important; display: grid !important; flex: 0 0 100% !important; flex-shrink: 0 !important;
    width: 100% !important; min-width: 100% !important; max-width: 100% !important;
    height: 100% !important; min-height: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
    scroll-snap-align: start !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card {
    box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 55%) minmax(0, 45%) !important; width: 100% !important; min-width: 0 !important;
    max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important;
    writing-mode: horizontal-tb !important; transform: none !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card > .product-art { grid-area: 1 / 1 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card > .product-info { grid-area: 2 / 1 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; }
  body:has(.site-header) .customer-app-nav [data-customer-nav="account"] { display: none !important; }
  body:has(.site-header) .customer-app-nav { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* Admin header: keep the title; feature navigation lives in the POS-style app bar. */
  body.admin-page .admin-topbar { height: 52px !important; min-height: 52px !important; padding: 5px 10px !important; overflow: hidden !important; }
  body.admin-page .admin-brand { flex: 1 1 auto !important; min-width: 0 !important; }
  body.admin-page .admin-brand .admin-mark { flex: 0 0 38px !important; width: 38px !important; height: 38px !important; font-size: 21px !important; }
  body.admin-page .admin-brand b { font-size: 12px !important; letter-spacing: 1.5px !important; }
  body.admin-page .admin-brand small { font-size: 8px !important; }
  body.admin-page .admin-top-actions { display: none !important; }
  body.admin-page .admin-shell { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 6px 8px calc(76px + env(safe-area-inset-bottom)) !important; }
  body.admin-page .admin-welcome { gap: 8px !important; margin: 0 0 8px !important; }
  body.admin-page .admin-welcome h1 { margin: 3px 0 !important; font-size: 22px !important; }
  body.admin-page .admin-welcome p { font-size: 11px !important; }
  body.admin-page .admin-welcome > button { min-height: 34px !important; padding: 6px 9px !important; }
  body.admin-page .admin-tabs { display: none !important; }

  /* App-like navigation: four small launch buttons, extra tools in the existing More grid. */
  body.admin-page .app-bottom-nav {
    position: fixed !important; z-index: 500 !important; inset: auto 0 0 !important;
    display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    height: calc(62px + env(safe-area-inset-bottom)) !important; padding: 4px 8px calc(4px + env(safe-area-inset-bottom)) !important;
    gap: 5px !important; overflow: hidden !important;
  }
  body.admin-page .app-bottom-nav > button { min-width: 0 !important; min-height: 50px !important; height: 50px !important; padding: 2px !important; gap: 2px !important; }
  body.admin-page .app-bottom-nav > button > span { width: 24px !important; height: 24px !important; }
  body.admin-page .app-bottom-nav > button > span svg { width: 21px !important; height: 21px !important; }
  body.admin-page .app-bottom-nav > button small { display: block !important; max-width: 100% !important; font-size: 9px !important; line-height: 1.05 !important; white-space: nowrap !important; }
  body.admin-page .app-more-dialog { width: min(94vw, 520px) !important; max-height: 82dvh !important; padding: 16px !important; overflow: auto !important; }
  body.admin-page .app-more-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 10px !important; }
  body.admin-page .app-more-grid > button { min-width: 0 !important; min-height: 84px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 8px 4px !important; text-align: center !important; }
  body.admin-page .app-more-grid > button > span { width: 36px !important; height: 36px !important; display: grid !important; place-items: center !important; border-radius: 12px !important; font-size: 22px !important; }
  body.admin-page .app-more-grid > button > b { font-size: 10px !important; line-height: 1.15 !important; }
  body.admin-page .admin-tabs [data-tab="accounts"], body.admin-page .app-more-grid [data-tab="accounts"], body.admin-page #admin-accounts-panel { display: none !important; }

  /* POS: compact toolbar and a true 2x2 product canvas with useful card height. */
  body.admin-page.pos-mode #admin-pos-panel:not([hidden]) {
    position: fixed !important; z-index: 100 !important; inset: 52px 0 calc(62px + env(safe-area-inset-bottom)) !important;
    display: flex !important; flex-direction: column !important; box-sizing: border-box !important;
    width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
    padding: 6px 8px !important; gap: 5px !important; overflow: hidden !important;
  }
  body.admin-page.pos-mode .pos-topline { flex: 0 0 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 2px !important; }
  body.admin-page.pos-mode .pos-topline h2 { margin: 0 !important; font-size: 17px !important; }
  body.admin-page.pos-mode .pos-topline button { height: 28px !important; min-height: 28px !important; padding: 3px 7px !important; font-size: 10px !important; }
  body.admin-page.pos-mode .pos-toolbar { flex: 0 0 auto !important; display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 3px 6px !important; margin: 0 !important; }
  body.admin-page.pos-mode .pos-toolbar label { min-width: 0 !important; font-size: 9px !important; }
  body.admin-page.pos-mode .pos-toolbar select, body.admin-page.pos-mode .pos-toolbar input { width: 100% !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 3px 6px !important; font-size: 11px !important; }
  body.admin-page.pos-mode .pos-paging { grid-column: 1 / -1 !important; min-height: 30px !important; height: 30px !important; display: flex !important; align-items: center !important; gap: 5px !important; }
  body.admin-page.pos-mode .pos-paging span { flex: 1 1 auto !important; font-size: 10px !important; }
  body.admin-page.pos-mode .pos-paging button { width: 34px !important; min-width: 34px !important; height: 28px !important; min-height: 28px !important; padding: 0 !important; }
  body.admin-page.pos-mode .pos-menu-viewport { flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; touch-action: pan-x !important; }
  body.admin-page.pos-mode .pos-menu-track { display: flex !important; flex-flow: row nowrap !important; width: max-content !important; min-width: 100% !important; height: 100% !important; }
  body.admin-page.pos-mode .pos-page { box-sizing: border-box !important; display: grid !important; flex: 0 0 100% !important; flex-shrink: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-template-rows: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; padding: 4px !important; overflow: hidden !important; }
  body.admin-page.pos-mode .pos-tile { display: grid !important; grid-template-columns: minmax(0,1fr) !important; grid-template-rows: minmax(0,54%) minmax(0,46%) !important; min-width: 0 !important; min-height: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; }
  body.admin-page.pos-mode .pos-tile > img { grid-area: 1 / 1 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; object-fit: cover !important; }
  body.admin-page.pos-mode .pos-tile-copy { grid-area: 2 / 1 !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; padding: 5px !important; gap: 2px !important; overflow: hidden !important; }
  body.admin-page.pos-mode .pos-tile-copy > span { font-size: 8px !important; line-height: 1 !important; }
  body.admin-page.pos-mode .pos-tile-copy h3 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; margin: 0 !important; overflow: hidden !important; font-size: 11px !important; line-height: 1.15 !important; }
  body.admin-page.pos-mode .pos-tile-copy strong { font-size: 11px !important; line-height: 1 !important; }
  body.admin-page.pos-mode .pos-tile-copy button { flex: 0 0 28px !important; min-height: 28px !important; height: 28px !important; margin-top: auto !important; padding: 2px !important; font-size: 10px !important; }
  body.admin-page.pos-mode .pos-bottom-bar { flex: 0 0 44px !important; min-height: 44px !important; position: relative !important; inset: auto !important; margin: 0 !important; padding: 3px 5px !important; gap: 5px !important; }
  body.admin-page.pos-mode .pos-bottom-bar strong, body.admin-page.pos-mode .pos-bottom-bar small { font-size: 10px !important; }
  body.admin-page.pos-mode .pos-bottom-bar button { min-height: 36px !important; height: 36px !important; padding: 3px 7px !important; font-size: 10px !important; }
  body.admin-page.pos-mode .pos-message { display: none !important; }
}

/* Mobile regression guard: keep the menu pages and bottom controls from
   inheriting the older single-card rail and native image sizing rules. */
@media (max-width: 760px) {
  body:has(.site-header) #thuc-don,
  body:has(.site-header) #thuc-don * { box-sizing: border-box !important; }
  body:has(.site-header) #thuc-don .product-category-products {
    display: flex !important; flex: 1 1 0 !important; flex-flow: row nowrap !important;
    width: 100% !important; min-width: 0 !important; height: 0 !important; min-height: 0 !important;
    gap: 0 !important; margin: 0 !important; padding: 4px 0 !important;
    overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important;
    touch-action: pan-x !important; -webkit-overflow-scrolling: touch !important;
  }
  body:has(.site-header) #thuc-don .product-category-products > .product-menu-page {
    display: grid !important; position: relative !important; flex: 0 0 100% !important; flex-shrink: 0 !important;
    width: 100% !important; min-width: 100% !important; max-width: 100% !important;
    height: 100% !important; min-height: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important;
    padding: 0 1px !important; overflow: hidden !important; scroll-snap-align: start !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card {
    display: grid !important; position: relative !important; flex: initial !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    height: 100% !important; min-height: 0 !important; grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 54%) minmax(0, 46%) !important; margin: 0 !important; padding: 0 !important;
    overflow: hidden !important; transform: none !important; writing-mode: horizontal-tb !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card > .product-art {
    display: block !important; grid-column: 1 !important; grid-row: 1 !important;
    width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important;
    margin: 0 !important; aspect-ratio: auto !important; overflow: hidden !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card > .product-art > img {
    display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important;
    min-height: 0 !important; max-width: none !important; object-fit: cover !important;
  }
  body:has(.site-header) #thuc-don .product-menu-page > .product-card > .product-info {
    display: flex !important; grid-column: 1 !important; grid-row: 2 !important;
    width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important;
    flex-direction: column !important; padding: 6px !important; overflow: hidden !important;
  }
  body:has(.site-header) .customer-app-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body:has(.site-header) .customer-app-nav [data-customer-nav="account"] { display: none !important; }
  body:has(.site-header) .customer-app-nav button svg { width: 22px !important; height: 22px !important; }
  body:has(.site-header) .floating-contact { right: 8px !important; bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  body:has(.site-header) .floating-contact .contact-action { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; }

  body.admin-page .admin-top-actions { display: none !important; }
  body.admin-page .app-bottom-nav > button { white-space: normal !important; overflow: hidden !important; }
  body.admin-page .app-bottom-nav > button small { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  body.admin-page.pos-mode #admin-pos-panel:not([hidden]) .pos-menu-viewport { min-height: 0 !important; }
  body.admin-page.pos-mode #admin-pos-panel:not([hidden]) .pos-page {
    flex-shrink: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  }
  body.admin-page.pos-mode #admin-pos-panel:not([hidden]) .pos-tile {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 54%) minmax(0, 46%) !important; width: 100% !important; height: 100% !important;
  }
  body.admin-page.pos-mode #admin-pos-panel:not([hidden]) .pos-tile > img {
    grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: 100% !important;
    min-width: 0 !important; min-height: 0 !important; max-width: none !important; object-fit: cover !important;
  }
  body.admin-page.pos-mode #admin-pos-panel:not([hidden]) .pos-tile-copy {
    grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; height: 100% !important;
    min-width: 0 !important; min-height: 0 !important;
  }
}

/* Shared HL storefront identity: supplied store illustration for page and app marks. */
.brand-symbol[data-store-logo-mark],
body.admin-page .admin-brand .admin-mark {
  box-sizing: border-box !important;
  flex: 0 0 45px !important;
  width: 45px !important;
  height: 45px !important;
  border: 1px solid #c69b5f !important;
  border-radius: 12px !important;
  background: #38241b url("assets/hl-store-logo.jpg") center / cover no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px #21130d40 !important;
}
.brand-symbol[data-store-logo-mark] > span { visibility: hidden !important; }
.store-logo-image { border-radius: 12px !important; object-fit: cover !important; }
@media (max-width: 1100px), (pointer: coarse) {
  .brand-symbol[data-store-logo-mark], body.admin-page .admin-brand .admin-mark {
    flex-basis: 38px !important; width: 38px !important; height: 38px !important;
    border-radius: 10px !important;
  }
  body:has(.site-header) #thuc-don .product-category-heading { min-height: 31px !important; }
}