/* Mobile-specific styles to improve sticky behavior and ensure first product visibility */ 
@media (max-width: 768px) {
    /* General mobile layout improvements */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        min-height: 100vh !important;
        height: auto !important;
        scroll-behavior: smooth !important;
        overflow-anchor: none !important; /* Prevent browser from auto-adjusting scroll */
    }

    /* Mobile-specific layout for product list */
    #PosItems {
        display: block;
        padding-top: 130px !important; /* Add padding to avoid overlap with sticky header */
        padding-left: 10px !important;
        padding-right: 10px !important;
        position: relative !important; /* Use relative to stabilize layout */
        min-height: 100vh !important;  /* Cover full viewport */
    }

    .posItem {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        padding: 10px;
        box-sizing: border-box;
    }

    /* Improved styling for sticky elements */
    .sticky-top {
        position: fixed !important;     /* Keep it fixed at the top */
        top: 0 !important;
        width: 100% !important;         /* Make it span the full width */
        z-index: 10000 !important;      /* Ensure it stays on top */
        margin: 0;
    }
    #CartClose {
        margin-right: 10px !important; 
        padding: 5px 10px !important;   /* Adjust padding for a cleaner look */
    }
    /* Hide sticky element when the cart screen is active */
    #cart:target ~ .sticky-top,
    #cart.open ~ .sticky-top,
    .cart-open .sticky-top,
    #CartToggle:checked ~ #cart .sticky-top {
        display: none !important;  /* Hide sticky header when cart is visible */
    }
    /* Ensure cart container has correct padding to avoid overlap */
    #cart {
        position: fixed !important;
        top: 0 !important;
        height: 100vh !important;
        overflow-y: hidden !important; /* Disable vertical scrolling to remove scrollbar */
        z-index: 20000 !important;  /* Ensure it stays above other elements */
        padding-top: 60px !important; /* Add padding to ensure items are below the "Cart" title */
    }
    /* Adjust the CartItems container */
    #CartItems {
        margin-top: 30px !important; /* Increase top padding for better spacing */ 
        position: relative !important;   /* Ensure items are positioned within the container */
        top: 0 !important;               /* Reset any potential offset */
        overflow-y: hidden !important;  /* Ensure cart items are fully visible without scrollbar */
    }
    /* Ensure product name and quantity for all items are visible */
    .cart-item {
        display: block !important;       /* Ensure all cart items are displayed */
        position: relative !important;   /* Keep position stable within the cart */
        top: 0 !important;               /* Reset top offset */
        margin-bottom: 15px;             /* Add spacing between items */
        padding: 10px;                   /* Add some padding to cart items */
        border-radius: 5px;              /* Add some border radius for better layout */
    }
    /* Adjust visibility and position of product name */
    .cart-item .product-name {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;     /* Remove height restrictions */
        overflow: visible !important;
        margin-top: 12px !important;     /* Increase margin-top to move the product name further below */
    }

    /* Ensure visibility of product quantity */
    .cart-item .product-quantity {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;     /* Remove height restrictions */
        overflow: hidden !important;
        margin-bottom: 5px !important;   /* Maintain spacing below */
    }

    /* Prevent CartItems from rendering outside the visible section */
    #CartItems {
        max-height: calc(100vh - 120px) !important; /* Ensure it doesn't overflow the cart */
        overflow-y: hidden !important; /* Remove the scrollbar */
    }
   
    .align-middle{
        margin-top: 30px !important;
    }  
    .store-footer {
    display: none;
    }
}