/* layout_max_350.css */

/* Apply only for devices up to 350px width */
*{margin:0;padding:0}
@media (max-width: 500px) {

    /* Container padding */
    .container {
        padding-left: 8px;
        padding-right: 8px;
    }
    

    /* Topbar adjustments */
    .topbar{
        display: none;
    }

    
    .header-account-icons {
        display: none;
    }

    .site-header{padding:0 !important}
    .header-logo{
        width: 100%;
        background-color: rgb(55, 61, 89);
        padding:10px; 
        float: left;
        display: block;
    }

    /* Header logo */
    .header-logo .logo {
        width: 80px !important;
        float: left;
    }

    .header-logo span{
        float:right;
    }

    .header-menus-toggles{
        display: block; 
        color: white;
        width:30px; 
        margin-left:20px;
        
    }
    .header-search-box{
        padding-bottom: 10px;
        margin-top:0px !important;
    }


    /* Search bar */
    .searchbar input {
        font-size: 13px;
        padding: 6px 8px;
    }
    .btn-search {
        padding: 5px 8px;
    }
    #searchResults li {
        font-size: 12px;
        padding: 5px;
    }

    /* Account & Cart icons */
    .account-icons a {
        font-size: 12px;
        display: block;
        margin-bottom: 5px;
    }
    #cart-counter {
        font-size: 10px;
        top: -8px;
        right: -10px;
    }

    /* Navbar / Header row */
    .site-header .row.align-items-center {
        flex-direction: column;
        gap: 8px;
    }

    /* Buttons */
    .btn, .btn-search {
        font-size: 12px;
        padding: 5px 8px;
    }

    /* Footer */
    .footer h6 {
        font-size: 12px;
    }
    .footer ul li a {
        font-size: 11px;
    }
    .footer .small {
        font-size: 10px;
    }

    /* Product cards */
    .product-card {
        padding: 5px;
    }
    .product-card img {
        height: auto;
        width: 100%;
    }

    /* Tables for order/invoice */
    table {
        font-size: 12px;
    }
    table th, table td {
        padding: 4px;
    }

    /* Input fields & forms */
    input.form-control, textarea.form-control {
        font-size: 12px;
        padding: 4px 6px;
    }

    /* Buttons full width */
    .btn.w-100 {
        font-size: 12px;
        padding: 6px 0;
    }

    /* Cards */
    .card-body {
        padding: 10px !important;
    }

    /* Alerts / Toast */
    #toast-container {
        top: 10px;
        right: 10px;
        font-size: 12px;
    }
}