/*
  v13 MOBILE-FIRST LOCK
  This file is intentionally loaded last.
  Any future desktop styles must not break these mobile behaviors.
*/

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

button,
a,
input,
textarea,
select {
  touch-action: manipulation;
}

/* Customer mobile layout */
@media (max-width: 920px) {
  body {
    width: 100%;
    overflow-x: hidden !important;
  }

  .shop-page {
    padding-bottom: 92px;
  }

  .shop-header {
    width: 100%;
    max-width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px !important;
  }

  .brand-lockup {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }

  .brand-lockup strong,
  .brand-lockup span {
    max-width: calc(100vw - 92px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shop-nav {
    width: 100%;
    display: flex;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
  }

  .shop-nav::-webkit-scrollbar {
    display: none;
  }

  .shop-nav a {
    flex: 0 0 auto;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
  }

  .mode-switch {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .mode-btn,
  .mode-btn.link {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }

  .premium-hero {
    width: calc(100% - 24px) !important;
    margin: 12px !important;
    padding: 26px 20px !important;
    border-radius: 24px !important;
    min-height: 260px !important;
  }

  .hero-copy h1 {
    font-size: clamp(32px, 10vw, 42px) !important;
    line-height: 1 !important;
  }

  .hero-copy p {
    font-size: 15px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .primary-cta,
  .secondary-cta {
    width: 100%;
    text-align: center;
  }

  .shop-shell {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 12px 42px !important;
    display: block !important;
  }

  .menu-column,
  .menu-grid {
    width: 100%;
    max-width: 100%;
  }

  .menu-toolbar {
    display: block !important;
  }

  .menu-toolbar h2 {
    font-size: 30px !important;
  }

  .search-box {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 14px;
  }

  .category-strip {
    width: calc(100% + 24px);
    max-width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .menu-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .premium-food-card {
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: 98px minmax(0, 1fr) !important;
    gap: 12px !important;
    border-radius: 22px !important;
  }

  .food-media {
    width: 98px;
    height: 108px !important;
    border-radius: 18px !important;
  }

  .food-info,
  .food-title-row,
  .food-info p {
    min-width: 0;
  }

  .food-title-row h3 {
    font-size: 16px !important;
  }

  .food-info p {
    font-size: 13px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .food-footer strong {
    font-size: 17px !important;
  }

  .add-btn {
    min-height: 42px;
    min-width: 62px;
    padding: 9px 13px !important;
  }

  .fulfillment-required {
    width: 100%;
    display: block !important;
    border-radius: 22px !important;
  }

  .fulfillment-required.selected {
    display: none !important;
  }

  .fulfillment-required div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .fulfillment-required button {
    min-height: 48px;
    width: 100%;
  }

  /* Mobile cart bottom sheet */
  .order-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    z-index: 900 !important;
    border-radius: 28px 28px 0 0 !important;
    transform: translate3d(0, 115%, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .28s ease, opacity .2s ease !important;
  }

  .order-panel.mobile-open {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-cart-button {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 16px !important;
    z-index: 800 !important;
    height: 60px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg,var(--brand),#ea580c) !important;
    color: white !important;
    font-weight: 950 !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 18px !important;
    box-shadow: 0 18px 44px rgba(249,115,22,.38) !important;
  }

  .mobile-cart-button[style*="flex"] {
    display: flex !important;
  }

  .mobile-cart-backdrop.visible {
    display: block !important;
  }

  .mobile-cart-close {
    display: grid !important;
  }

  .checkout-form input,
  .checkout-form textarea,
  .pretty-form input,
  .pretty-form textarea,
  .admin-form input,
  .admin-form textarea,
  .admin-form select {
    font-size: 16px !important;
    max-width: 100%;
  }

  .premium-modal {
    align-items: end !important;
    padding: 0 !important;
  }

  .premium-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 28px 28px 0 0 !important;
  }

  .modal-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    position: sticky;
    bottom: 0;
    background: white;
  }

  /* Staff/Admin mobile */
  .admin-app {
    display: block !important;
  }

  .admin-sidebar {
    position: relative !important;
    height: auto !important;
    padding: 14px !important;
  }

  .admin-sidebar a {
    display: inline-flex !important;
    margin: 4px !important;
  }

  .admin-main {
    padding: 14px !important;
  }

  .admin-top,
  .admin-actions {
    display: block !important;
  }

  .stat-grid,
  .admin-grid,
  .staff-form-grid,
  .staff-role-help,
  .ticket-board {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .admin-card {
    border-radius: 22px !important;
    padding: 18px !important;
  }

  .assign-row,
  .admin-table-row {
    display: block !important;
  }

  .admin-table-row form {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px;
  }

  /* Kitchen mobile/tablet */
  .kds-header {
    display: block !important;
    padding: 18px !important;
  }

  .kds-header h1 {
    font-size: 32px !important;
  }

  .ticket-board {
    padding: 14px !important;
  }

  .kds-ticket {
    border-radius: 22px !important;
    padding: 18px !important;
  }
}

@media (min-width: 921px) {
  .mobile-cart-button,
  .mobile-cart-backdrop,
  .mobile-cart-close {
    display: none !important;
  }

  .order-panel {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 420px) {
  .premium-food-card {
    grid-template-columns: 90px minmax(0, 1fr) !important;
  }

  .food-media {
    width: 90px !important;
    height: 102px !important;
  }

  .mode-switch {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* v15 mobile-first KDS lock */
@media (max-width: 920px) {
  .kds-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .kds-tools {
    display: block !important;
    padding: 14px !important;
  }

  .kitchen-board-v15,
  .ticket-board {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  .ticket-workflow {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .workflow-btn {
    width: 100% !important;
    min-height: 56px !important;
  }

  .ticket-secondary {
    grid-template-columns: 1fr !important;
  }
}


/* v16 Premium KDS mobile lock */
@media (max-width: 920px) {
  .kds-premium-header {
    display: block !important;
    padding: 16px !important;
  }

  .kds-header-actions {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .kds-premium-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 14px !important;
  }

  .kds-kanban {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 0 14px 24px !important;
  }

  .kds-column {
    min-width: 0 !important;
  }

  .kds-ticket-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .kds-ticket-secondary {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}


/* v17 reservation/table manager mobile lock */
@media (max-width: 920px) {
  .res-header {
    display: block !important;
    padding: 14px !important;
  }

  .res-nav {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .res-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 12px !important;
  }

  .res-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
  }

  .res-filter,
  .reservation-update-form,
  .table-add-form,
  .table-edit-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .reservation-update-form .wide {
    grid-column: auto !important;
  }
}


/* v18 reservation UI mobile lock */
@media (max-width: 920px) {
  .res-app-v18 {
    display: block !important;
  }

  .res-sidebar-v18 {
    position: relative !important;
    min-height: auto !important;
    padding: 14px !important;
  }

  .res-sidebar-v18 nav {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .res-sidebar-v18 nav a {
    flex: 0 0 auto;
  }

  .res-main-v18 {
    padding: 14px !important;
  }

  .res-grid-v18,
  .res-filter-v18,
  .reservation-form-v18,
  .table-add-v18,
  .table-form-v18 {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .res-stats-v18 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .reservation-form-v18 .wide {
    grid-column: auto !important;
  }
}


/* v20 checkout mobile lock */
@media (max-width: 920px) {
  .cart-qty-v20 {
    display: inline-grid !important;
  }

  .confirmation-card-v20 {
    width: 100% !important;
  }
}

@media (max-width: 920px) {
  body.qr-app-v21 { display: block !important; }
  .qr-sidebar-v21 { position: relative !important; min-height: auto !important; padding: 14px !important; }
  .qr-sidebar-v21 nav { display: flex !important; overflow-x: auto !important; flex-wrap: nowrap !important; }
  .qr-sidebar-v21 nav a { flex: 0 0 auto; }
  .qr-main-v21 { padding: 14px !important; }
  .qr-info-v21, .qr-grid-v21 { display: grid !important; grid-template-columns: 1fr !important; }
}