@media (max-width: 767px) {
  .card {
    padding: 14px;
  }

  .topbar {
    padding: 12px;
    border-radius: 20px;
  }

  .brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 20px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-actions .btn {
    padding: 10px 12px;
  }

  .main-nav {
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-pill {
    padding: 10px 14px;
    flex: 0 0 auto;
  }

  .dashboard-grid,
  .content-grid,
  .split-grid,
  .catalog-grid {
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .page-pos .app-main {
    padding-bottom: 78px !important;
  }

  .page-pos .compact-pos-head,
  .page-pos .toolbar-stats,
  .page-pos .pos-bottom-grid {
    display: none !important;
  }

  .page-pos .pos-toolbar {
    padding: 14px !important;
  }

  .page-pos .quick-tools-grid {
    gap: 10px !important;
  }

  .page-pos .pos-layout-priority {
    gap: 14px !important;
  }

  .page-pos .pos-catalog-panel {
    padding: 12px !important;
    overflow: visible !important;
  }

  .page-pos .pos-head-sticky {
    position: static !important;
    top: auto !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .page-pos .pos-products-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .page-pos .product-tile {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 10px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .page-pos .product-tile-topline {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  .page-pos .product-tile-thumb {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;
  }

  .page-pos .product-tile-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .page-pos .product-tile-body {
    min-width: 0 !important;
    gap: 6px !important;
    align-content: start !important;
  }

  .page-pos .product-tile-body strong {
    font-size: 1.8rem !important;
    line-height: 1.08 !important;
    word-break: break-word !important;
  }

  .page-pos .product-tile-body small {
    font-size: .88rem !important;
    line-height: 1.25 !important;
  }

  .page-pos .product-tile-price {
    font-size: 1.8rem !important;
    line-height: 1 !important;
  }

  .page-pos .cart-panel {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(-2px, env(safe-area-inset-bottom, 0px) - 2px) !important;
    z-index: 40 !important;
    padding: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.98) !important;
  }

  .page-pos .cart-mobile-bar {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border: 0 !important;
    background: #0f172a !important;
    color: #fff !important;
    cursor: pointer !important;
  }

  .page-pos .cart-mobile-bar-copy {
    display: grid !important;
    gap: 2px !important;
    text-align: left !important;
  }

  .page-pos .cart-mobile-bar-copy strong {
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }

  .page-pos .cart-mobile-bar-copy small {
    font-size: .82rem !important;
    opacity: .9 !important;
  }

  .page-pos .cart-mobile-bar-arrow {
    font-size: 1rem !important;
    line-height: 1 !important;
    transition: transform .18s ease !important;
  }

  .page-pos .cart-panel.cart-collapsed .cart-head,
  .page-pos .cart-panel.cart-collapsed .cart-list,
  .page-pos .cart-panel.cart-collapsed .checkout-form {
    display: none !important;
  }

  .page-pos .cart-panel.cart-collapsed .cart-mobile-bar-arrow {
    transform: rotate(180deg) !important;
  }

  .page-pos .cart-panel.cart-expanded {
    max-height: 72vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .page-pos .cart-panel.cart-expanded .cart-head,
  .page-pos .cart-panel.cart-expanded .checkout-form {
    display: block !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .page-pos .cart-panel.cart-expanded .cart-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-top: 12px !important;
    margin-bottom: 8px !important;
  }

  .page-pos .cart-head-actions {
    display: flex !important;
    gap: 8px !important;
  }

  .page-pos .cart-collapse-btn {
    display: inline-flex !important;
  }

  .page-pos .cart-panel.cart-expanded .cart-list {
    display: grid !important;
    gap: 8px !important;
    overflow: auto !important;
    max-height: 26vh !important;
    padding: 0 12px !important;
    margin-bottom: 10px !important;
  }

  .page-pos .cart-head .section-title {
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }

  .page-pos .cart-head .section-subtitle {
    font-size: .82rem !important;
    line-height: 1.2 !important;
  }

  .page-pos .btn.btn-secondary.btn-sm[data-clear-cart],
  .page-pos .cart-collapse-btn {
    padding: 8px 10px !important;
    min-height: auto !important;
    font-size: .88rem !important;
  }

  .page-pos .modern-cart-summary {
    margin-bottom: 8px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  .page-pos .modern-cart-summary .cart-summary-row {
    min-height: 22px !important;
  }

  .page-pos .modern-cart-summary span,
  .page-pos .modern-cart-summary strong {
    font-size: .95rem !important;
  }

  .page-pos .modern-cart-summary .total strong {
    font-size: 1.18rem !important;
  }

  .page-pos .modern-payment-grid {
    gap: 6px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .page-pos .payment-btn {
    min-height: 56px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
  }

  .page-pos .payment-btn span {
    font-size: .84rem !important;
    line-height: 1.05 !important;
  }

  .page-pos .payment-btn small {
    font-size: .66rem !important;
    line-height: 1.1 !important;
  }
}


@media (max-width: 767px) {
  .page-pos .cart-panel.cart-collapsed {
    padding: 0 !important;
    max-height: none !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .page-pos .cart-panel.cart-collapsed .cart-head,
  .page-pos .cart-panel.cart-collapsed .cart-list,
  .page-pos .cart-panel.cart-collapsed .modern-cart-summary,
  .page-pos .cart-panel.cart-collapsed .checkout-form {
    display: none !important;
  }

  .page-pos .cart-panel.cart-collapsed .cart-mobile-bar {
    display: flex !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18) !important;
  }

  .page-pos .cart-panel.cart-expanded {
    padding: 0 !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid #eadfce !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden !important;
  }

  .page-pos .cart-panel.cart-expanded .modern-cart-summary,
  .page-pos .cart-panel.cart-expanded .checkout-form {
    display: block !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .page-pos .cart-panel.cart-expanded .modern-cart-summary {
    margin: 0 12px 10px !important;
    padding: 10px 12px !important;
  }

  .page-pos .cart-panel.cart-expanded .checkout-form {
    padding-bottom: 12px !important;
  }

  .page-pos .product-tile {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .page-pos .product-tile-topline {
    grid-column: 1 / -1 !important;
    margin-bottom: 0 !important;
  }

  .page-pos .product-tile-thumb {
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    border-radius: 18px !important;
  }

  .page-pos .product-tile-body {
    align-content: start !important;
  }
}


@media (max-width: 767px) {
  body.page-pos {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.page-pos.has-mobile-cart-fixed .cart-panel {
    position: fixed !important;
    inset: auto 8px calc(env(safe-area-inset-bottom, 0px) + 0px) 8px !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0px) !important;
    left: 8px !important;
    right: 8px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    z-index: 9999 !important;
  }

  body.page-pos.has-mobile-cart-fixed .cart-panel.cart-collapsed .cart-mobile-bar {
    margin: 0 !important;
  }
}

/* FoodFlow_29 mobile width containment hardening */
@media (max-width: 767px) {
  html, body.page-pos {
    overflow-x: hidden !important;
  }

  .page-pos .app-shell,
  .page-pos .app-main,
  .page-pos .pos-layout-priority,
  .page-pos .pos-first-panel,
  .page-pos .pos-catalog-panel,
  .page-pos .pos-panel,
  .page-pos .pos-products-grid,
  .page-pos .product-tile,
  .page-pos .product-tile-thumb,
  .page-pos .product-tile-thumb img,
  .page-pos .product-tile-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .page-pos .pos-catalog-panel,
  .page-pos .product-tile {
    overflow: hidden !important;
  }

  .page-pos .product-tile {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .page-pos .product-tile-thumb {
    height: 180px !important;
    min-height: 180px !important;
    aspect-ratio: auto !important;
  }

  .page-pos .product-tile-body {
    height: auto !important;
    min-height: 0 !important;
    gap: 6px !important;
    align-content: start !important;
  }

  .page-pos .product-tile-body strong {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .page-pos .product-tile-body small {
    font-size: .76rem !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  .page-pos .product-tile-price {
    font-size: 1.05rem !important;
    line-height: 1.05 !important;
  }
}


@media (max-width: 767px) {
  .page-pos .product-tile-body strong {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
  }

  .page-pos .product-tile-price {
    font-size: 1.05rem !important;
  }

  .report-chart-head {
    gap: 12px !important;
  }

  .report-chart-switch {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .report-switch-btn {
    padding: 10px 8px !important;
    font-size: .88rem !important;
  }

  .report-chart-stack {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .report-bars.active {
    grid-auto-columns: minmax(62px, 1fr) !important;
    gap: 10px !important;
    min-height: 280px !important;
  }

  .report-bar-track {
    min-height: 190px !important;
  }

  .report-bar-value {
    font-size: .72rem !important;
    min-height: 30px !important;
  }

  .report-bar-label {
    font-size: .78rem !important;
  }
}

@media (max-width: 767px) {
  .page-pos .cart-notice-badge {
    min-width: 28px !important;
    height: 28px !important;
    font-size: .86rem !important;
  }
}