/* ABOTRIX 10.3 responsive POS: no overlap, no clipped checkout, full catalog use */
.pos-shell{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(360px,31vw,470px)!important;gap:14px!important;align-items:stretch!important;min-height:calc(100dvh - 190px)}
.pos-catalog{min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pos-products{grid-template-columns:repeat(auto-fit,minmax(clamp(132px,12vw,190px),1fr))!important;align-content:start;overflow:auto;max-height:calc(100dvh - 310px);padding-right:4px}
.pos-product{min-width:0;min-height:158px!important}
.pos-cart{position:sticky!important;top:10px!important;max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain;min-width:0;z-index:2}
.cart-lines{max-height:min(30dvh,300px)!important}.checkout-grid{padding-bottom:8px}.pay-now{position:sticky;bottom:0;z-index:4;width:100%;box-shadow:0 -8px 18px rgba(255,255,255,.95)}
@media(max-width:1180px){.pos-shell{grid-template-columns:minmax(0,1fr) 380px!important}.pos-products{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important}}
@media(max-width:900px){.pos-shell{grid-template-columns:1fr!important;min-height:auto}.pos-cart{position:static!important;max-height:none;overflow:visible}.pos-products{max-height:none;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}.cart-lines{max-height:300px!important}}
@media(max-width:640px){.pos-search-row{display:grid!important;grid-template-columns:repeat(3,1fr)}.pos-search-row input{grid-column:1/-1}.pos-products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.pos-product{padding:10px!important;min-height:145px!important}.field-pair,.payment-box{grid-template-columns:1fr!important}.order-toggle{grid-template-columns:repeat(2,1fr)!important}.pos-catalog,.pos-cart{padding:10px!important}.pay-now{min-height:54px;font-size:16px!important}}
@media(max-width:390px){.pos-products{grid-template-columns:1fr!important}.pos-search-row{grid-template-columns:1fr 1fr}.pos-search-row input{grid-column:1/-1}.pos-search-row button:last-child{grid-column:1/-1}}
@media(hover:none) and (pointer:coarse){.pos-product,.pos-search-row button,.qty-pad button,.pay-now{min-height:44px}.qty-pad button{min-width:40px}.pos-categories button{min-height:42px}}

/* ============================================================
   ABOTRIX V11.0.1 — CASHIER POS / PAYMENT PANEL LAYOUT HOTFIX
   Keeps the checkout panel readable and prevents clipping.
   ============================================================ */

.pos-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(410px, 470px) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

.pos-shell > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.pos-catalog {
    width: 100% !important;
    min-width: 0 !important;
}

.pos-cart {
    position: sticky !important;
    top: 12px !important;
    width: 100% !important;
    min-width: 410px !important;
    max-width: 470px !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.pos-cart *,
.pos-cart *::before,
.pos-cart *::after {
    box-sizing: border-box !important;
}

.pos-cart .checkout-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 12px !important;
    padding-bottom: 8px !important;
}

.pos-cart .checkout-grid > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.pos-cart .field-pair {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
}

.pos-cart .payment-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}

.pos-cart input,
.pos-cart select,
.pos-cart textarea,
.pos-cart button {
    min-width: 0 !important;
    max-width: 100% !important;
}

.pos-cart input,
.pos-cart select,
.pos-cart textarea {
    width: 100% !important;
    font-size: 14px !important;
}

.pos-cart textarea {
    min-height: 82px !important;
    resize: vertical !important;
}

.pos-cart .order-toggle {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
}

.pos-cart .order-toggle label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.pos-cart .order-toggle input[type="radio"] {
    width: auto !important;
    flex: 0 0 auto !important;
}

.pos-cart .cart-lines {
    width: 100% !important;
    max-height: min(240px, 25vh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.pos-cart .totals-box {
    width: 100% !important;
}

.pos-cart .totals-box > div {
    gap: 12px !important;
}

.pos-cart .totals-box span,
.pos-cart .totals-box b,
.pos-cart .totals-box strong {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.pos-cart .pay-now {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 15px 12px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    box-shadow: 0 -8px 18px rgba(255,255,255,.96) !important;
}

@media (max-width: 1250px) {
    .pos-shell {
        grid-template-columns: minmax(0, 1fr) 410px !important;
    }

    .pos-cart {
        min-width: 410px !important;
        max-width: 410px !important;
    }
}

@media (max-width: 1050px) {
    .pos-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pos-cart {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

@media (max-width: 640px) {
    .pos-cart .field-pair,
    .pos-cart .order-toggle {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}