/* ══════════════════════════════════════════════════════════════════════════════
   ViyaBook — Checkout, MOBILE ONLY  (Task 097)
   ────────────────────────────────────────────────────────────────────────────
   EVERY rule in this file lives inside @media (max-width: 767px).
   Tablet (768–1024) and desktop (1025+) are not touched by a single declaration.

   This file is loaded LAST on pages/checkout.html so it wins the cascade over
   the ~30 media queries already stacked in that page. Selectors are escalated to
   `html body …` where an existing rule uses the same specificity.

   NO markup was redesigned: the existing product-card DOM
     .prod-card > .prod-img + .prod-info(.prod-name/.prod-cat/.prod-footer)
   already maps 1:1 onto the requested shopping-app card, so the whole product
   grid is a pure restyle. The cart screen re-presents the EXISTING .cart-panel
   (same #orderList, same #totalText, same payment buttons, same handlers).
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Page shell ──────────────────────────────────────────────────────────
     The bottom nav is already force-hidden on checkout (4 separate rules in
     checkout.html), so the floating bars sit at 16px, not 78px — otherwise they
     would hover over empty space. */
  html body .pos-body {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  html body .products-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body .prod-grid-wrap {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px !important;
  }

  /* Mobile checkout toolbar: one compact row, no page-level horizontal scroll. */
  html body .prod-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 6px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: #fff !important;
  }

  html body .prod-toolbar::-webkit-scrollbar { display: none !important; }

  html body .prod-toolbar .view-toggle {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid #dbe5f1 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  html body .prod-toolbar .view-toggle button,
  html body .prod-toolbar .scan-btn,
  html body .prod-toolbar #addProductButton,
  html body .prod-toolbar .cat-manage-btn {
    flex: 0 0 auto !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .prod-toolbar .view-toggle button {
    border: 0 !important;
    border-radius: 0 !important;
    color: #64748b !important;
    background: #fff !important;
  }

  html body .prod-toolbar .view-toggle button.active {
    color: #fff !important;
    background: var(--primary, #185FA5) !important;
  }

  html body .prod-toolbar .scan-btn,
  html body .prod-toolbar .cat-manage-btn {
    border: 1px solid #dbe5f1 !important;
    background: #fff !important;
    color: var(--primary, #185FA5) !important;
  }

  html body .prod-toolbar #addProductButton {
    border: 1px solid var(--primary, #185FA5) !important;
    background: var(--primary, #185FA5) !important;
    color: #fff !important;
  }

  html body .prod-toolbar svg,
  html body .prod-toolbar .vapb-ic,
  html body .prod-toolbar .ti {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }

  html body .prod-toolbar .toolbar-label,
  html body .prod-toolbar #shortcutsHelpBtn {
    display: none !important;
  }

  @media (max-width: 340px) {
    html body .prod-toolbar {
      gap: 4px !important;
      padding-inline: 6px !important;
    }
    html body .prod-toolbar .view-toggle button,
    html body .prod-toolbar .scan-btn,
    html body .prod-toolbar #addProductButton,
    html body .prod-toolbar .cat-manage-btn {
      width: 34px !important;
      min-width: 34px !important;
      height: 34px !important;
      min-height: 34px !important;
      max-height: 34px !important;
    }
  }

  /* ── 2-column product grid ───────────────────────────────────────────── */
  html body #productArea {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  html body #productArea .prod-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;              /* equal-height cards */
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  }

  html body #productArea .prod-card.in-cart {
    border-color: #009b4d !important;
    box-shadow: 0 4px 16px rgba(0, 155, 77, 0.18) !important;
  }

  html body #productArea .prod-img {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 0.8;
    height: auto !important;
    overflow: hidden !important;
    background: #eefbf4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 40px !important;           /* emoji fallback when no image */
  }

  html body #productArea .prod-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  html body #productArea .prod-info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  /* Long names wrap to 2 lines, then clamp. The full name stays on title/aria. */
  html body #productArea .prod-name {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
  }

  html body #productArea .prod-cat {
    margin-top: 3px !important;
    font-size: 12px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body #productArea .prod-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: auto !important;          /* pins footer to card bottom */
    padding-top: 10px !important;
  }

  html body #productArea .prod-price {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body #productArea .prod-mini-actions {
    flex: 0 0 auto !important;
  }

  html body #productArea .prod-add {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #009b4d !important;
    color: #fff !important;
    font-size: 25px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body #productArea .prod-add:active { transform: scale(0.92); }

  html body #productArea .prod-stock {
    margin-top: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  /* Deal badge — styled and ready, but NOT injected: the project has no deal /
     offer field on products, and inventing one would be new business logic. */
  html body #productArea .prod-img .vb-deal-badge {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ff3b5c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
  }

  /* ── Sticky "View Cart" bar ──────────────────────────────────────────── */
  html body .vb-mcart-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1250;
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    background: var(--primary, #185FA5);   /* View Cart bar → ViyaBook blue (white text/icon kept) */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 10px 28px rgba(24, 95, 165, 0.28);
    cursor: pointer;
  }

  /* Hidden when the cart is empty, and while the cart screen itself is open. */
  html body .vb-mcart-bar[hidden],
  html body.vb-mcart-open .vb-mcart-bar { display: none !important; }

  html body .vb-mcart-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-weight: 800;
    font-size: 15px;
  }

  html body .vb-mcart-count {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 9px;
    background: #fff;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    /* Numbers stay LTR inside Dhivehi RTL. */
    direction: ltr;
    unicode-bidi: isolate;
  }

  html body .vb-mcart-total {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
  }

  /* ══ MOBILE CART SCREEN ═══════════════════════════════════════════════
     The existing .cart-panel becomes a full-screen sheet. Same DOM, same IDs,
     same event handlers — only its presentation changes. */
  html body .cart-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    z-index: 1200 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility .28s;
  }

  html body.vb-mcart-open .cart-panel {
    transform: none;
    visibility: visible;
  }

  html body.vb-mcart-open { overflow: hidden; }

  /* Cart screen header: Back to Shop · Your Cart · business name */
  html body .vb-mcart-head {
    padding: 14px 0 10px;
    background: #f8fafc;
  }

  html body .vb-mcart-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px 0 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  html body .vb-mcart-title {
    margin: 10px 0 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
  }

  html body .vb-mcart-biz {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
  }
  html body .vb-mcart-biz:empty { display: none; }

  /* The desktop cart chrome that the mobile screen replaces. */
  html body .cart-panel .cart-header,
  html body .cart-panel .cart-table-head { display: none !important; }

  /* White cart card wrapping the items */
  html body .cart-panel .cart-items-wrap {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  /* ── Cart item row ──────────────────────────────────────────────────────
     Text-only (no product thumbnail). Existing children, re-placed with grid
     areas — no wrapper divs added:
       name        | line-total
       unit-price  | delete
       qty control | (delete)                                                */
  html body .cart-panel .cart-item-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "name  total"
      "price del"
      "qty   del" !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
    padding: 16px !important;
    border-bottom: 1px solid #eef2f7 !important;
    background: #fff !important;
  }
  html body .cart-panel .cart-item-row:last-child { border-bottom: 0 !important; }

  /* Thumbnails are no longer injected; hard-hide any legacy node just in case. */
  html body .cart-panel .vb-mcart-thumb { display: none !important; }

  html body .cart-panel .cart-item-name {
    grid-area: name;
    align-self: end;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    min-width: 0 !important;
    /* Fully visible name — wrap to as many lines as needed, never clamp/ellipsis. */
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Unit price — still contenteditable, still #priceIndex, still editable. */
  html body .cart-panel .editable-price {
    grid-area: price;
    justify-self: start;
    margin-top: 2px !important;
    font-size: 12px !important;
    color: #64748b !important;
    direction: ltr;
    unicode-bidi: isolate;
  }

  html body .cart-panel .qty-control {
    grid-area: qty;
    justify-self: start;
    display: inline-grid !important;
    grid-template-columns: 34px 34px 34px !important;
    align-items: center !important;
    margin-top: 8px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  html body .cart-panel .qty-control button,
  html body .cart-panel .qty-control span {
    height: 34px !important;
    width: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    direction: ltr;
    unicode-bidi: isolate;
  }
  html body .cart-panel .qty-control button { color: #009b4d !important; }

  html body .cart-panel .cart-item-price {
    grid-area: total;
    align-self: end;
    justify-self: end;
    white-space: nowrap !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: end !important;
    direction: ltr;
    unicode-bidi: isolate;
  }

  html body .cart-panel .delete-btn {
    grid-area: del;
    align-self: center;
    justify-self: end;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fef2f2 !important;
    color: #ef4444 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Empty cart */
  html body .cart-panel .empty-cart {
    padding: 40px 16px !important;
    text-align: center !important;
    color: #64748b !important;
  }

  html body .vb-mcart-continue {
    display: none;
    width: 100%;
    margin-top: 14px;
    min-height: 50px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
  }
  html body.vb-mcart-empty .vb-mcart-continue { display: block; }

  /* ── Summary card ───────────────────────────────────────────────────────
     Reuses .cart-totals — same #subtotalText / #discountText / #gstText /
     #totalText nodes updated by the existing updateOrderSummary(). */
  html body .cart-panel .cart-totals {
    margin-top: 16px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
  }

  /* The panel ships collapsed (.co-collapsed) on desktop. On the mobile cart
     screen the money rows are the whole point, so force them visible. Note,
     auto-print, received/change stay behind the existing Order Details toggle. */
  html body.vb-mcart-open .cart-panel.co-collapsed .cart-totals .total-line,
  html body.vb-mcart-open .cart-panel.co-collapsed .discount-line {
    display: flex !important;
  }

  html body .cart-panel .cart-totals .total-line,
  html body .cart-panel .cart-totals .qty-line {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 7px 0 !important;
    font-size: 14px !important;
  }

  html body .cart-panel .cart-totals .total-line strong,
  html body .cart-panel .cart-totals .qty-line strong {
    direction: ltr;
    unicode-bidi: isolate;
  }

  html body .cart-panel .grand-total-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 10px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e5e7eb !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  html body .cart-panel .grand-total-value {
    font-size: 18px !important;
    font-weight: 800 !important;
    direction: ltr;
    unicode-bidi: isolate;
  }

  /* Note / discount input / payment section keep their existing behaviour but
     sit in cards so the screen reads cleanly. */
  html body .cart-panel .pay-section {
    margin-top: 16px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
  }

  html body .cart-panel .order-details-toggle-row {
    margin-top: 12px !important;
    padding: 0 !important;
  }

  /* ── Sticky checkout button ─────────────────────────────────────────────
     .cart-actions holds the EXISTING #printButton, #pdfButton and
     #mainActionButton (Save / Pay Later / Cash / Transfer — chosen by the
     existing payment logic). Only its position and skin change. */
  html body .cart-panel .cart-actions {
    position: fixed !important;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1300;
    display: none;                        /* only while the cart screen is open */
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html body.vb-mcart-open .cart-panel .cart-actions { display: flex !important; }

  html body .cart-panel .cart-actions-top {
    display: flex !important;
    gap: 8px !important;
  }

  html body .cart-panel .cart-actions-top button {
    flex: 1 !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid #e5e7eb !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10) !important;
  }

  html body .cart-panel .cart-actions-main { display: block !important; }

  html body .cart-panel .btn-main-action {
    width: 100% !important;
    min-height: 56px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--primary, #185FA5) !important;   /* Save button → ViyaBook blue */
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 28px rgba(24, 95, 165, 0.28) !important;
  }

  /* ── Dhivehi ───────────────────────────────────────────────────────────
     RTL flips the grid automatically (grid-template-areas mirror in RTL, and
     inset-inline-start is direction-aware). Money, quantities and invoice
     numbers are pinned LTR above via direction/unicode-bidi on each node. */
  html[lang="dv"] body .vb-mcart-title,
  body.lang-dv .vb-mcart-title { line-height: 1.6; }

  html[lang="dv"] body .vb-mcart-back svg,
  body.lang-dv .vb-mcart-back svg { transform: scaleX(-1); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHECKOUT - Task 110 additions.  Still 100% inside @media (max-width: 767px)
   plus one tablet band. Calculations, cart state and handlers untouched.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* -- BOTTOM NAVIGATION ---------------------------------------------------
     checkout.html hides the shared bottom nav (4 display:none !important rules),
     so the bars sit at 16px. But if a nav IS ever painted, checkout-mobile.js
     flags the body and the bars lift above it instead of overlapping. One rule,
     both worlds - no assumption baked into the CSS. */
  html body.vb-has-bottomnav .vb-mcart-bar {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  html body.vb-has-bottomnav .cart-panel .cart-actions {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  html body.vb-has-bottomnav .products-panel {
    padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body.vb-has-bottomnav .cart-panel {
    padding-bottom: calc(222px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* -- CART / PAYMENT BUTTONS / SAVE BUTTON: shrink guards ------------------
     .payment-grid, .cart-actions-top and .line are declared with a bare 1fr.
     A grid child defaults to min-width:auto and refuses to shrink below its
     content, so "Bank Transfer" or a long MVR total can force its column wider
     than the track and push the page sideways at 320px. Guard the CHILDREN -
     no column count, size or breakpoint changes. */
  html body .payment-grid > *,
  html body .cart-actions-top > *,
  html body .cart-totals .line > *,
  html body .cart-totals .total-line > *,
  html body .modal-grid > * { min-width: 0; }

  html body .pay-method,
  html body .cart-actions-top button,
  html body .btn-main-action {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* -- TABLET (768-1024): same shrink guards ---------------------------------
   The tablet POS keeps its own two-column split (untouched). It shares the same
   bare-1fr payment grid and action row, so it needs the same child guard. */
@media (min-width: 768px) and (max-width: 1024px) {
  html body .payment-grid > *,
  html body .cart-actions-top > *,
  html body .cart-totals .total-line > * { min-width: 0; }

  html body .pay-method { overflow-wrap: anywhere; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ≥768px — keep the mobile cart shell fully INERT.
   checkout-mobile.js injects the "Back to Shop / Your Cart" header, the
   "Continue Shopping" button and (formerly) row thumbnails into the DOM at every
   width; they are only meant to be seen on the ≤767 full-screen cart screen. All
   of their styling lives inside @media(max-width:767px), so on tablet/desktop
   they leaked in unstyled — an extra header, a stray button, and thumbnails that
   broke the cart's column grid (Qty/Price/Total overlap). Hide them here so the
   desktop/tablet cart is the plain .cart-header layout with no pictures.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  html body .vb-mcart-head,
  html body .vb-mcart-continue,
  html body .vb-mcart-bar,
  html body .vb-mcart-thumb { display: none !important; }
}

/* Mobile checkout compact pass: phones only. Tablet/desktop remain untouched. */
@media (min-width: 360px) and (max-width: 599px) {
  html body .products-panel {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body .prod-grid-wrap {
    padding: 10px !important;
  }

  html body #productArea {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 132px !important;
    gap: 7px !important;
  }

  html body #productArea .prod-card {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  }

  html body #productArea .prod-img {
    height: 42px !important;
    min-height: 42px !important;
    aspect-ratio: auto !important;
    padding: 4px !important;
    font-size: 23px !important;
    background: #f8fbff !important;
  }

  html body #productArea .prod-img .vi,
  html body #productArea .prod-img svg {
    width: 24px !important;
    height: 24px !important;
  }

  html body #productArea .prod-info {
    padding: 7px 8px 8px !important;
  }

  html body #productArea .prod-name {
    font-size: 11.5px !important;
    line-height: 1.18 !important;
    min-height: 2.36em !important;
    font-weight: 750 !important;
  }

  html body #productArea .prod-cat {
    margin-top: 2px !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
  }

  html body #productArea .prod-footer {
    padding-top: 4px !important;
  }

  html body #productArea .prod-price {
    font-size: 13.5px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 599px) {
  html body .vb-mcart-bar,
  html body .cart-panel .btn-main-action {
    background: #185FA5 !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(24, 95, 165, 0.28) !important;
  }

  html body .vb-mcart-bar {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    padding: 0 14px !important;
  }

  html body .cart-panel {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 14px calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body .vb-mcart-head {
    padding: 10px 0 8px !important;
  }

  html body .vb-mcart-title {
    margin-top: 8px !important;
    font-size: 24px !important;
  }

  html body .cart-panel .cart-items-wrap {
    border-radius: 16px !important;
  }

  html body .cart-panel .cart-item-row {
    grid-template-columns: minmax(62px, 1fr) 46px 76px 70px 24px !important;
    grid-template-areas: "name price qty total del" !important;
    column-gap: 5px !important;
    row-gap: 0 !important;
    min-height: 46px !important;
    padding: 7px 8px !important;
  }

  html body .cart-panel .cart-item-name {
    align-self: center !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html body .cart-panel .editable-price {
    justify-self: stretch !important;
    align-self: center !important;
    width: 46px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 3px !important;
    font-size: 11.5px !important;
    line-height: 24px !important;
    border-radius: 8px !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body .cart-panel .qty-control {
    justify-self: center !important;
    grid-template-columns: 24px 26px 24px !important;
    margin: 0 !important;
    border-radius: 9px !important;
  }

  html body .cart-panel .qty-control button,
  html body .cart-panel .qty-control span {
    width: 24px !important;
    height: 28px !important;
    font-size: 13px !important;
  }

  html body .cart-panel .qty-control span {
    width: 26px !important;
  }

  html body .cart-panel .qty-control button {
    color: #185FA5 !important;
  }

  html body .cart-panel .cart-item-price {
    align-self: center !important;
    justify-self: end !important;
    width: 70px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body .cart-panel .delete-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }

  html body .cart-panel .cart-totals {
    margin-top: 10px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  html body .cart-panel .cart-totals .total-line,
  html body .cart-panel .cart-totals .qty-line {
    padding: 5px 0 !important;
    font-size: 13px !important;
  }

  html body .cart-panel .grand-total-row {
    margin-top: 6px !important;
    padding-top: 10px !important;
  }

  html body .cart-panel .grand-total-label,
  html body .cart-panel .grand-total-value {
    font-size: 17px !important;
  }

  html body .cart-panel .pay-section {
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  html body .cart-panel .payment-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 6px 0 !important;
  }

  html body .cart-panel .pay-method {
    height: 42px !important;
    min-height: 42px !important;
    padding: 4px 3px !important;
    border-radius: 12px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    flex-direction: column !important;
    gap: 2px !important;
    background: #fff !important;
    color: #334155 !important;
    border: 1.5px solid #dbe4f0 !important;
    box-shadow: none !important;
  }

  html body .cart-panel .pay-method .pay-icon {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  html body .cart-panel .pay-method > span:not(.pay-icon) {
    font-size: 0 !important;
  }

  html body .cart-panel .pay-method[data-payment="Pay Later"] > span:not(.pay-icon)::after { content: "Pay Later"; }
  html body .cart-panel .pay-method[data-payment="Cash"] > span:not(.pay-icon)::after { content: "Cash"; }
  html body .cart-panel .pay-method[data-payment="Bank Transfer"] > span:not(.pay-icon)::after { content: "Transfer"; }

  html body .cart-panel .pay-method > span:not(.pay-icon)::after {
    font-size: 10.5px !important;
    font-weight: 750 !important;
  }

  html body .cart-panel .pay-method.active,
  html body .cart-panel .pay-method[data-payment="Cash"].active,
  html body .cart-panel .pay-method[data-payment="Bank Transfer"].active,
  html body .cart-panel .pay-method[data-payment="Pay Later"].active {
    background: #185FA5 !important;
    border-color: #185FA5 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(24, 95, 165, 0.22) !important;
  }

  html body .cart-panel .cart-actions {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  html body .cart-panel .cart-actions-top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  html body .cart-panel .cart-actions-top button {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  html body .cart-panel .btn-main-action {
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }

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

/* ══════════════════════════════════════════════════════════════════════════════
   TASK: POS product grid — 3 compact cards per row from ~360px up (was 2).
   Appended LAST so it wins the cascade. Layout only — product selection, totals,
   payment logic, invoice saving and Firebase are untouched. minmax(0,1fr) + the
   existing overflow/clamp guards keep cards equal-size and prevent any page
   horizontal scroll. Very small phones (<360px) fall back to a safe 2 columns.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 360px) and (max-width: 767px) {
  html body #productArea {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* Compact the card internals so 3 fit cleanly at ~110px wide (req: reduce card
     height, padding, icon, category, name and price sizes; name stays 2 lines). */
  html body #productArea .prod-info { padding: 8px !important; }
  html body #productArea .prod-img { font-size: 26px !important; }   /* emoji fallback */
  html body #productArea .prod-name { font-size: 11.5px !important; line-height: 1.2 !important; -webkit-line-clamp: 2 !important; }
  html body #productArea .prod-cat { font-size: 9.5px !important; margin-top: 2px !important; }
  html body #productArea .prod-footer { padding-top: 6px !important; gap: 5px !important; }
  html body #productArea .prod-price { font-size: 12.5px !important; }
  html body #productArea .prod-add {
    width: 30px !important; height: 30px !important; min-width: 30px !important;
    border-radius: 9px !important; font-size: 20px !important;
  }
  html body #productArea .prod-stock { font-size: 9.5px !important; margin-top: 4px !important; }
}
/* <360px: safe 2-column grid so nothing is crushed on very narrow phones. */
@media (max-width: 359px) {
  html body #productArea {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}