/* ==========================================================================
   BHARATPOS DEDICATED RESPONSIVE STYLESHEET (MOBILE & TABLET ONLY)
   ==========================================================================
   CRITICAL NOTE:
   All rules in this file are strictly enclosed within @media queries capped
   at 1024px maximum width. Desktop view (> 1024px) is NEVER touched or affected.
   ========================================================================== */

/* Hide mobile-specific navigation controls on any screen by default */
.sidebar-toggle-btn,
.sidebar-backdrop,
.pos-mobile-nav,
.pos-mobile-cart-bar,
.pos-mobile-back-btn,
.pos-mobile-back-bar,
.pos-mobile-salesman-bar {
    display: none !important;
}

/* ==========================================================================
   1. TABLET & MOBILE SHARED FOUNDATION (<= 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* Touch optimization */
    html, body {
        -webkit-overflow-scrolling: touch;
        touch-action: manipulation;
    }

    /* Form Controls Touch Minimum */
    .form-control,
    .btn,
    select,
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="search"] {
        font-size: 14px;
    }

    /* Modal Responsive Sizing */
    .pos-modal-card {
        width: 94vw !important;
        max-width: 650px !important;
        max-height: 92vh !important;
        border-radius: 14px !important;
        margin: 1rem auto !important;
    }

    .pos-modal-card.modal-lg,
    .pos-modal-card.modal-xl {
        max-width: 94vw !important;
    }

    .pos-modal-body {
        max-height: calc(92vh - 120px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem !important;
    }

    /* Universal Responsive Tables */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px;
    }

    .table th, .table td {
        padding: 0.65rem 0.75rem !important;
        white-space: nowrap;
    }

    /* Stack In-line 2-Column Grids */
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns: 3fr 1fr"],
    [style*="grid-template-columns: 1fr 2fr"],
    .dashboard-two-col-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Proforma & Receipt Preview Container */
    .receipt-container {
        max-width: 100% !important;
    }

    /* Universal Confirm Modal */
    #pos-universal-confirm-modal .pos-modal-card {
        width: 90vw !important;
        max-width: 440px !important;
    }
}

/* ==========================================================================
   2. TABLET SPECIFIC LAYOUT (769px to 1024px)
   ========================================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Compact Sidebar */
    .sidebar {
        width: 210px !important;
    }

    .sidebar-header {
        padding: 1rem !important;
        gap: 0.5rem !important;
    }

    .brand-title-text {
        font-size: 0.95rem !important;
    }

    .brand-badge {
        font-size: 0.65rem !important;
    }

    .nav-item {
        padding: 0.55rem 0.75rem !important;
        font-size: 0.8rem !important;
    }

    /* Main Content */
    .page-content {
        padding: 1.25rem !important;
    }

    .top-navbar {
        padding: 0 1.25rem !important;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* POS Terminal Side-by-Side Proportions */
    .pos-catalog-panel {
        flex: 56 !important;
    }

    .pos-cart-panel {
        flex: 44 !important;
    }

    .pos-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
    }

    .pos-product-card {
        min-height: 195px !important;
        padding: 0.75rem !important;
    }

    .pos-card-media {
        height: 75px !important;
    }

    .pos-topbar-left {
        gap: 0.65rem !important;
    }

    .pos-live-clock {
        display: none !important;
    }

    .pos-shortcuts-strip {
        gap: 0.75rem !important;
        padding: 0.2rem 0.5rem !important;
    }
}

/* ==========================================================================
   3. MOBILE SMARTPHONE SPECIFIC LAYOUT (<= 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Base Scale adjustments */
    html {
        font-size: 13.5px;
    }

    /* App Container & Off-Canvas Navigation Drawer */
    .app-container {
        display: block !important;
        position: relative !important;
        min-height: 100vh;
        width: 100%;
        overflow-x: hidden;
    }

    /* Off-Canvas Sliding Sidebar */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 285px !important;
        max-width: 86vw !important;
        height: 100% !important;
        z-index: 9999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease !important;
        box-shadow: none !important;
        background-color: var(--bg-surface) !important;
        border-right: 1px solid var(--border-strong) !important;
    }

    .sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 10px 0 35px rgba(0, 0, 0, 0.5) !important;
    }

    /* Dark Blur Backdrop for Mobile Sidebar */
    .sidebar-backdrop {
        display: none;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 9990 !important;
        opacity: 0;
        transition: opacity 0.25s ease !important;
    }

    .sidebar-backdrop.active {
        display: block !important;
        opacity: 1 !important;
    }

    /* Main Wrapper */
    .main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden;
    }

    /* Top Navbar */
    .top-navbar {
        height: 56px !important;
        padding: 0 0.85rem !important;
        gap: 0.5rem !important;
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: var(--bg-surface) !important;
    }

    /* Mobile Hamburger Button */
    .sidebar-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--bg-surface-alt);
        color: var(--text-primary);
        font-size: 1.1rem;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.15s ease;
    }

    .sidebar-toggle-btn:active {
        background: var(--bg-hover);
        transform: scale(0.95);
    }

    .navbar-left {
        gap: 0.5rem !important;
        min-width: 0;
    }

    .navbar-left .company-pill {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar-left .env-badge {
        display: none !important;
    }

    .navbar-right {
        gap: 0.4rem !important;
    }

    /* Hide text in POS Launch Button on mobile */
    .navbar-right .btn-emerald span {
        display: none;
    }
    .navbar-right .btn-emerald {
        padding: 0.4rem 0.65rem !important;
        font-size: 0.9rem !important;
    }

    /* Compact Theme Selector in Navbar */
    .navbar-right label[for="header-theme-selector"] {
        display: none !important;
    }
    .navbar-right .theme-selector-input {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.725rem !important;
        max-width: 78px;
    }

    /* Hide User Role Text */
    .navbar-right div[style*="display: flex; flex-direction: column"] {
        display: none !important;
    }

    /* Page Content */
    .page-content {
        padding: 0.85rem !important;
    }

    /* Page Header */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        margin-bottom: 1.25rem !important;
    }

    .page-header .page-title {
        font-size: 1.4rem !important;
    }

    .page-header .page-subtitle {
        font-size: 0.8rem !important;
    }

    .page-header > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    .page-header > div:last-child .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .stat-card {
        padding: 1rem 1.15rem !important;
    }

    .stat-value {
        font-size: 1.55rem !important;
    }

    /* Card Padding on Mobile */
    .card {
        padding: 1rem !important;
        border-radius: 12px !important;
        margin-bottom: 1rem !important;
    }

    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        margin-bottom: 0.85rem !important;
    }

    /* Filters Bar on Mobile */
    .card form {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .card form > div {
        min-width: 100% !important;
        width: 100% !important;
    }

    .card form .btn {
        width: 100% !important;
        justify-content: center;
    }

    /* Products Bulk Actions Bar */
    #product-bulk-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
        padding: 0.75rem !important;
    }

    #product-bulk-bar > div:last-child {
        display: flex !important;
        width: 100% !important;
    }

    #product-bulk-bar > div:last-child .btn {
        flex: 1 !important;
        justify-content: center;
    }

    /* Settings Tabs Horizontal Scroll */
    .settings-nav-tabs,
    .nav-tabs,
    [style*="display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border);"] {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Form Inputs & Grid Overrides */
    [style*="grid-template-columns: repeat(2, 1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns: 460px 1fr"],
    [style*="grid-template-columns: 1fr 340px"],
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .form-row [style*="grid-column: span"],
    [style*="grid-column: span 2"],
    [style*="grid-column: span 3"],
    [style*="grid-column: span 4"] {
        grid-column: span 1 !important;
    }

    .container-fluid {
        padding: 0.85rem !important;
    }

    .payslip-container {
        padding: 1.25rem !important;
        margin: 0.5rem !important;
    }

    .payslip-actions-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .payslip-actions-bar .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Authentication & Login Screen on Mobile */
    [style*="grid-template-columns: repeat(auto-fit, minmax(360px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }

    /* Hide long marketing hero paragraphs on small phone screens so login form is immediately visible */
    [style*="background: linear-gradient(145deg, #1e1b4b 0%, var(--brand-primary, #4f46e5) 55%"] {
        padding: 1.5rem 1.25rem !important;
    }

    [style*="background: linear-gradient(145deg, #1e1b4b 0%, var(--brand-primary, #4f46e5) 55%"] h1 {
        font-size: 1.45rem !important;
        margin-bottom: 0.4rem !important;
    }

    [style*="background: linear-gradient(145deg, #1e1b4b 0%, var(--brand-primary, #4f46e5) 55%"] > div > p {
        display: none !important;
    }

    [style*="background: linear-gradient(145deg, #1e1b4b 0%, var(--brand-primary, #4f46e5) 55%"] [style*="display: flex; flex-direction: column; gap: 1rem;"] {
        display: none !important;
    }

    [style*="background: linear-gradient(145deg, #1e1b4b 0%, var(--brand-primary, #4f46e5) 55%"] [style*="margin-top: 2.5rem;"] {
        margin-top: 0.75rem !important;
        padding-top: 0.75rem !important;
    }

    /* ======================================================================
       POS BILLING TERMINAL MOBILE PHONE SYSTEM
       ====================================================================== */
    .pos-terminal-layout {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    /* Hide keyboard shortcuts strip on phone - not relevant for touch screens */
    .pos-shortcuts-strip {
        display: none !important;
    }

    /* Compact POS Topbar */
    .pos-topbar {
        height: 50px !important;
        padding: 0 0.65rem !important;
        gap: 0.35rem !important;
    }

    .pos-topbar-left {
        gap: 0.4rem !important;
        min-width: 0;
        flex: 1;
    }

    .pos-logo-badge {
        font-size: 0.9rem !important;
        gap: 0.4rem !important;
    }

    .pos-logo-badge span:first-child {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.8rem !important;
    }

    .pos-logo-badge span:last-child {
        max-width: 105px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pos-live-clock {
        display: none !important;
    }

    .pos-topbar-left .company-pill {
        display: none !important;
    }

    .pos-topbar-right {
        gap: 0.35rem !important;
    }

    .pos-topbar-right .theme-selector-input {
        display: none !important;
    }

    /* Compact icon buttons in POS Topbar */
    .pos-topbar-right .btn-sm {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    .pos-topbar-right .btn-sm span:not(.badge) {
        display: none !important;
    }

    .pos-topbar-right .btn-sm kbd {
        display: none !important;
    }

    /* POS Mobile Segmented Navigation Switcher */
    .pos-mobile-nav {
        display: flex !important;
        background: var(--bg-surface) !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 0.35rem 0.5rem !important;
        gap: 0.4rem !important;
        z-index: 40 !important;
        flex-shrink: 0 !important;
    }

    .pos-mobile-nav-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.55rem 0.4rem;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--bg-surface-alt);
        color: var(--text-secondary);
        font-weight: 700;
        font-size: 0.825rem;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .pos-mobile-nav-btn.active {
        background: var(--brand-primary) !important;
        color: #ffffff !important;
        border-color: var(--brand-primary) !important;
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
    }

    .mobile-cart-total-badge {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.78rem;
        background: rgba(255, 255, 255, 0.22);
        padding: 0.1rem 0.35rem;
        border-radius: 4px;
        margin-left: 0.2rem;
    }

    /* POS Mobile Salesman Selection Bar */
    .pos-mobile-salesman-bar {
        display: flex !important;
        background: var(--bg-surface) !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 0.35rem 0.65rem !important;
        align-items: center !important;
        z-index: 39 !important;
        flex-shrink: 0 !important;
    }

    .pos-mobile-salesman-inner {
        display: flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        width: 100% !important;
        background: var(--bg-surface-alt) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
        padding: 0.25rem 0.5rem !important;
    }

    .pos-mobile-salesman-select {
        flex: 1 !important;
        height: 32px !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        padding: 0.2rem 0.45rem !important;
        border: 1px solid var(--border) !important;
        border-radius: 6px !important;
        background: var(--bg-surface) !important;
        color: var(--text-primary) !important;
        min-width: 0 !important;
    }

    /* Mobile Catalog vs Cart View Switching */
    .pos-main {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* Default View on Mobile: Catalog Active, Cart Hidden */
    .pos-catalog-panel,
    body.pos-view-catalog .pos-catalog-panel {
        display: flex !important;
        flex: 1 !important;
        width: 100% !important;
        border-right: none !important;
        overflow: hidden !important;
    }

    .pos-cart-panel,
    body.pos-view-catalog .pos-cart-panel {
        display: none !important;
    }

    /* Cart Active: Catalog Hidden, Cart Full Screen */
    body.pos-view-cart .pos-catalog-panel {
        display: none !important;
    }

    body.pos-view-cart .pos-cart-panel {
        display: flex !important;
        flex: 1 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* Mobile Back Button inside Cart Panel */
    .pos-mobile-back-btn {
        display: flex !important;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.75rem;
        background: var(--bg-surface-alt);
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--brand-primary);
        font-weight: 700;
        font-size: 0.8rem;
        cursor: pointer;
    }

    /* Search Bar in Mobile Catalog */
    .pos-search-bar {
        padding: 0.6rem 0.65rem 0.35rem !important;
        gap: 0.4rem !important;
    }

    .pos-search-input {
        padding: 0.65rem 2rem 0.65rem 2.4rem !important;
        font-size: 0.875rem !important;
    }

    .pos-search-kbd {
        display: none !important;
    }

    .barcode-scanner-pill span {
        display: none !important;
    }
    .barcode-scanner-pill {
        padding: 0 0.65rem !important;
    }

    /* Category Pills in Mobile Catalog */
    .pos-categories-wrap {
        padding: 0.35rem 0.65rem !important;
        gap: 0.35rem !important;
    }

    .category-tab {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.78rem !important;
        border-radius: 6px !important;
    }

    /* Product Grid on Phone */
    .pos-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.55rem !important;
        padding: 0.55rem 0.65rem 5rem !important; /* Extra bottom padding for floating cart bar */
    }

    .pos-product-card {
        min-height: 175px !important;
        padding: 0.65rem !important;
        border-radius: 10px !important;
    }

    .pos-card-media {
        height: 70px !important;
        margin-bottom: 0.35rem !important;
    }

    .pos-prod-name {
        font-size: 0.8rem !important;
        min-height: 2.2em !important;
        margin-bottom: 0.15rem !important;
    }

    .pos-prod-sku {
        font-size: 0.68rem !important;
        margin-bottom: 0.4rem !important;
    }

    .pos-prod-price {
        font-size: 0.95rem !important;
    }

    .pos-card-bottom .btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Floating Quick-Cart Bar in Mobile Catalog */
    .pos-mobile-cart-bar {
        display: none;
        position: fixed !important;
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        height: 52px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, var(--brand-primary), #4338ca) !important;
        color: #ffffff !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 1.15rem !important;
        box-shadow: 0 10px 25px rgba(79, 70, 229, 0.45) !important;
        z-index: 99 !important;
        cursor: pointer !important;
        user-select: none !important;
        animation: mobileBarPulse 0.3s ease-out;
    }

    body.pos-view-catalog .pos-mobile-cart-bar.has-items {
        display: flex !important;
    }

    @keyframes mobileBarPulse {
        0% { transform: translateY(20px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }

    .cart-bar-left {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-weight: 700;
        font-size: 0.9rem;
    }

    .cart-bar-right {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .cart-bar-right span:first-child {
        font-family: 'JetBrains Mono', monospace;
        font-weight: 800;
        font-size: 1.05rem;
        letter-spacing: -0.02em;
    }

    .cart-bar-action {
        background: rgba(255, 255, 255, 0.2);
        padding: 0.3rem 0.65rem;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    /* Cart Panel inside Mobile View */
    .pos-cart-panel {
        border-left: none !important;
    }

    .pos-mobile-back-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0.45rem 0.75rem !important;
        background: var(--bg-surface-alt) !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .pos-cart-customer-bar {
        padding: 0.6rem 0.75rem !important;
        gap: 0.35rem !important;
    }

    /* Cart Items on Mobile */
    .pos-cart-items-wrapper {
        padding: 0.4rem 0.75rem !important;
    }

    .pos-cart-item {
        padding: 0.65rem 0 !important;
        gap: 0.5rem !important;
    }

    .cart-item-title {
        font-size: 0.825rem !important;
    }

    .cart-qty-ctrl {
        border-radius: 6px !important;
    }

    .cart-qty-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }

    .cart-qty-val {
        width: 28px !important;
        font-size: 0.85rem !important;
    }

    .cart-item-total {
        font-size: 0.9rem !important;
        min-width: 62px !important;
    }

    /* Cart Summary & Actions */
    .pos-cart-summary {
        padding: 0.75rem 0.85rem !important;
    }

    .summary-row {
        font-size: 0.8rem !important;
        margin-bottom: 0.3rem !important;
    }

    .summary-row.grand-total {
        font-size: 1.25rem !important;
    }

    .pos-cart-actions {
        padding: 0.75rem 0.85rem !important;
        gap: 0.5rem !important;
    }

    .pos-cart-actions .btn-secondary span,
    .pos-cart-actions .btn-secondary kbd {
        display: none !important;
    }

    .pos-cart-actions .btn-secondary {
        padding: 0 0.85rem !important;
        height: 46px !important;
    }

    .pos-cart-actions .btn-emerald {
        height: 46px !important;
        font-size: 1rem !important;
    }

    .pos-cart-actions .btn-emerald kbd {
        display: none !important;
    }

    /* Payment Modal Responsive Form on Mobile */
    .payment-method-selector {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .quick-cash-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem !important;
    }

    /* POS Screen Lock Keypad on Mobile */
    .pos-lock-box {
        width: 92vw !important;
        max-width: 350px !important;
        padding: 1.5rem 1.15rem !important;
        border-radius: 16px !important;
    }

    .pos-keypad-grid {
        gap: 0.4rem !important;
    }

    .pos-key-btn {
        height: 50px !important;
        font-size: 1.3rem !important;
    }

    .pos-lock-avatar {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.4rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Toast Container on Mobile */
    .pos-toast-container {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
    }

    .pos-toast {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   4. EXTRA SMALL PHONES (<= 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
    .pos-product-grid {
        gap: 0.45rem !important;
        padding: 0.45rem 0.5rem 5rem !important;
    }

    .pos-product-card {
        padding: 0.55rem !important;
    }

    .pos-card-media {
        height: 62px !important;
    }

    .pos-prod-price {
        font-size: 0.88rem !important;
    }

    .pos-card-bottom .btn-sm {
        padding: 0.2rem 0.45rem !important;
        font-size: 0.72rem !important;
    }
}

/* ==========================================================================
   5. RESPONSIVE PAGINATION CONTROLS
   ========================================================================== */
@media screen and (max-width: 768px) {
    .pagination-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.85rem !important;
    }

    .pagination-info {
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.8rem !important;
    }

    .pagination-per-page {
        justify-content: center !important;
        font-size: 0.8rem !important;
    }

    .pagination-nav {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }

    .pagination-btn {
        min-width: 30px !important;
        height: 30px !important;
        padding: 0 0.45rem !important;
        font-size: 0.8rem !important;
    }
}