*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f5f2;color:#171717}a{text-decoration:none;color:inherit}.shell{display:flex;min-height:100vh}.side{width:245px;background:#101010;color:#fff;padding:26px 18px;position:fixed;inset:0 auto 0 0}.logo{font-weight:900;font-size:22px;letter-spacing:-1px;margin:0 10px 28px}.logo b{color:#d7ff36}.nav a{display:block;padding:11px 13px;border-radius:10px;margin:4px 0;color:#bbb}.nav a:hover,.nav a.active{background:#242424;color:#fff}.main{margin-left:245px;width:calc(100% - 245px);padding:28px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.btn{border:0;border-radius:10px;padding:11px 16px;background:#111;color:#fff;cursor:pointer;font-weight:700}.btn.accent{background:#d7ff36;color:#111}.card{background:#fff;border:1px solid #e8e8e4;border-radius:16px;padding:20px}.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,1fr)}.stat strong{font-size:28px;display:block;margin-top:8px}.muted{color:#777;font-size:13px}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:13px;border-bottom:1px solid #eee}.badge{padding:5px 8px;border-radius:20px;background:#efffd0;font-size:12px}.field{width:100%;padding:11px;border:1px solid #ddd;border-radius:9px;background:#fff}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.store-head{padding:20px 5vw;display:flex;justify-content:space-between;align-items:center;background:#fff}.hero{min-height:520px;padding:90px 7vw;background:#111;color:white;display:flex;align-items:center}.hero h1{font-size:64px;max-width:700px;line-height:.95;margin:0 0 24px}.hero em{color:#d7ff36;font-style:normal}.products{padding:55px 5vw}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{background:white;border-radius:16px;overflow:hidden}.ph{height:260px;background:linear-gradient(135deg,#eee,#ddd);display:flex;align-items:center;justify-content:center;font-size:50px}.pc{padding:16px}.pos{display:grid;grid-template-columns:1fr 380px;gap:18px}.posgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.positem{cursor:pointer}.cart{position:sticky;top:20px;height:max-content}.cartrow{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eee}@media(max-width:900px){.side{width:72px}.side .txt,.logo span{display:none}.main{margin-left:72px;width:calc(100% - 72px)}.g4,.product-grid{grid-template-columns:repeat(2,1fr)}.pos{grid-template-columns:1fr}.hero h1{font-size:44px}}/* V3 retail polish */
.kpi{font-size:34px;font-weight:900;letter-spacing:-1px}.line{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 0;border-bottom:1px solid #e8e8e8}.pill{display:inline-flex;padding:5px 10px;border-radius:999px;background:#111;color:#fff;font-weight:800}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid #e9e9e9}input,select,textarea{padding:12px;border:1px solid #ddd;border-radius:10px;background:#fff}@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* V4 premium retail layer */
:root{--ink:#111;--soft:#f5f4f1;--line:#e6e3dd;--accent:#111;--radius:18px}body{background:#f6f5f2}.side{background:#0c0c0d;color:#fff;width:250px;padding:26px 18px}.brandmark{width:42px;height:42px;border-radius:13px;background:#fff;color:#111;display:grid;place-items:center;font:900 23px/1 Arial;margin-bottom:12px}.logo{font-weight:900;letter-spacing:.5px}.logo small{display:block;color:#777;font-size:9px;letter-spacing:2px;margin-top:4px}.nav{margin-top:24px}.nav a{border-radius:12px;color:#aaa;margin:3px 0}.nav a:hover,.nav a.active{background:#1d1d1f;color:#fff}.logout{position:absolute;bottom:22px}.main{padding:30px 34px}.top{background:rgba(246,245,242,.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5;padding:4px 0 22px}.top h1{font-size:30px;margin:2px 0}.eyebrow{font-size:10px;letter-spacing:2px;color:#888;font-weight:800}.userpill{display:flex;align-items:center;gap:9px;padding:6px 11px;border:1px solid var(--line);border-radius:14px;background:white}.userpill>span{width:34px;height:34px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-weight:800}.userpill small,.userpill b{display:block;font-size:11px}.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.035);background:#fff}.btn{border-radius:11px}.accent{background:#111!important;color:#fff!important}.ghost{background:#1b1b1d;color:#aaa;border-color:#29292b}.notice{background:#eaf7ef;border:1px solid #ccebd7;padding:12px 15px;border-radius:13px;margin-bottom:16px}.notice.danger{background:#fff0f0;border-color:#ffd4d4}.grid2{display:grid;grid-template-columns:360px 1fr;gap:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid h3,.form-grid button{grid-column:1/-1}label{font-size:12px;font-weight:700}label input{margin-top:6px}small{display:block;color:#888}.spread{justify-content:space-between}.mono{font-family:monospace}@media(max-width:900px){.side{width:76px}.side .logo,.side .txt{display:none}.main{padding:20px}.grid2,.form-grid{grid-template-columns:1fr}.top{position:static}.userpill{display:none}}
/* V5 flagship retail UX */
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.listrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.listrow small{margin-top:4px}.productpic{width:100%;height:130px;object-fit:cover;border-radius:12px;margin-bottom:10px}.mini{width:28px;height:28px;border:1px solid #ddd;background:#fff;border-radius:8px;cursor:pointer}.paybox{padding:14px;border-radius:14px;background:#f7f7f4;border:1px solid var(--line)}.modal{border:0;background:transparent;width:min(700px,90vw)}.modal::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}.modal>.card{max-height:75vh;overflow:auto}.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.thumbs img{width:90px;height:90px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}

/* ==========================================================
   BOUYEZZEM SHOP — RETAIL OS V6
   ========================================================== */

:root{
    --bz-black:#111111;
    --bz-black-2:#181818;
    --bz-black-3:#242424;

    --bz-lime:#d7ff36;
    --bz-lime-soft:#f3ffc4;

    --bz-bg:#f7f7f5;
    --bz-card:#ffffff;
    --bz-line:#e8e8e3;

    --bz-text:#171717;
    --bz-muted:#777770;

    --bz-danger:#dc2626;
    --bz-success:#16834b;

    --sidebar-width:264px;
    --sidebar-small:82px;

    --radius-sm:10px;
    --radius:16px;
    --radius-lg:22px;

    --shadow:0 8px 30px rgba(17,17,17,.045);
}

html,
body{
    width:100%;
    min-height:100%;
}

body{
    margin:0;
    background:var(--bz-bg);
    color:var(--bz-text);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    overflow-x:hidden;
}

button,
input,
select,
textarea{
    font:inherit;
}

a{
    color:inherit;
    text-decoration:none;
}

svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* APP */

.app-shell{
    min-height:100vh;
}

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:100;
    width:var(--sidebar-width);
    display:flex;
    flex-direction:column;
    background:var(--bz-black);
    color:#fff;
    border-right:1px solid rgba(255,255,255,.06);
    transition:width .22s ease,transform .22s ease;
}

.app-main{
    min-height:100vh;
    margin-left:var(--sidebar-width);
    transition:margin-left .22s ease;
}


/* SIDEBAR */

.sidebar-head{
    height:88px;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-icon{
    flex:0 0 44px;
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:#fff;
    color:#111;
    font-size:23px;
    font-weight:950;
    letter-spacing:-1px;
}

.brand-copy{
    min-width:0;
}

.brand-copy strong,
.brand-copy span{
    display:inline;
    font-size:15px;
    font-weight:900;
    letter-spacing:-.3px;
}

.brand-copy span{
    color:var(--bz-lime);
}

.brand-copy small{
    display:block;
    margin-top:4px;
    color:#686868;
    font-size:8px;
    font-weight:800;
    letter-spacing:2px;
}

.sidebar-collapse{
    flex:0 0 30px;
    width:30px;
    height:30px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid #292929;
    border-radius:9px;
    background:#191919;
    color:#858585;
    cursor:pointer;
}

.sidebar-collapse:hover{
    color:#fff;
    border-color:#404040;
}

.sidebar-collapse svg{
    width:15px;
    height:15px;
}

.nav-label{
    padding:5px 22px 8px;
    color:#5e5e5e;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.5px;
}

.nav-label.inner{
    padding:12px 10px 6px;
}

.sidebar-nav{
    flex:1;
    overflow-y:auto;
    padding:0 12px 18px;
    scrollbar-width:none;
}

.sidebar-nav::-webkit-scrollbar{
    display:none;
}

.sidebar-nav a{
    min-height:44px;
    margin:2px 0;
    padding:0 11px;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:11px;
    color:#999;
    font-size:13px;
    font-weight:600;
    transition:.15s ease;
}

.sidebar-nav a:hover{
    background:#191919;
    color:#fff;
}

.sidebar-nav a.active{
    background:#242424;
    color:#fff;
    box-shadow:inset 3px 0 0 var(--bz-lime);
}

.sidebar-nav a.active .nav-icon{
    color:var(--bz-lime);
}

.nav-icon{
    flex:0 0 21px;
    width:21px;
    height:21px;
    display:grid;
    place-items:center;
}

.nav-icon svg{
    width:19px;
    height:19px;
}

.nav-text{
    white-space:nowrap;
}

.nav-hotkey{
    margin-left:auto;
    padding:3px 6px;
    border-radius:6px;
    background:#303030;
    color:#888;
    font-size:8px;
    font-weight:800;
}

.nav-separator{
    height:1px;
    margin:12px 9px 5px;
    background:#242424;
}

.sidebar-bottom{
    padding:14px 14px 18px;
    border-top:1px solid #222;
    background:#101010;
}

.mini-profile{
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 6px 13px;
}

.avatar{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--bz-black);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.sidebar .avatar{
    background:#292929;
}

.mini-profile-copy{
    min-width:0;
}

.mini-profile strong,
.mini-profile small{
    display:block;
}

.mini-profile strong{
    overflow:hidden;
    color:#fff;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.mini-profile small{
    margin-top:2px;
    color:#666;
    font-size:9px;
}

.logout-button{
    width:100%;
    height:38px;
    padding:0 10px;
    display:flex;
    align-items:center;
    gap:10px;
    border:0;
    border-radius:10px;
    background:#191919;
    color:#8b8b8b;
    cursor:pointer;
}

.logout-button:hover{
    background:#222;
    color:#fff;
}

.logout-button svg{
    width:17px;
    height:17px;
}


/* COLLAPSED */

.sidebar-collapsed .sidebar{
    width:var(--sidebar-small);
}

.sidebar-collapsed .app-main{
    margin-left:var(--sidebar-small);
}

.sidebar-collapsed .brand-copy,
.sidebar-collapsed .sidebar-collapse,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-text,
.sidebar-collapsed .nav-hotkey,
.sidebar-collapsed .mini-profile-copy,
.sidebar-collapsed .logout-button span{
    display:none;
}

.sidebar-collapsed .sidebar-head{
    justify-content:center;
}

.sidebar-collapsed .sidebar-nav{
    padding-left:12px;
    padding-right:12px;
}

.sidebar-collapsed .sidebar-nav a{
    justify-content:center;
    padding:0;
}

.sidebar-collapsed .sidebar-nav a.active{
    box-shadow:none;
    background:#242424;
}

.sidebar-collapsed .mini-profile{
    justify-content:center;
    padding-left:0;
    padding-right:0;
}

.sidebar-collapsed .logout-button{
    justify-content:center;
}


/* TOPBAR */

.app-topbar{
    min-height:92px;
    padding:20px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(247,247,245,.93);
    border-bottom:1px solid rgba(232,232,227,.85);
    backdrop-filter:blur(16px);
}

.topbar-left{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.page-eyebrow{
    margin-bottom:4px;
    color:#9a9a94;
    font-size:9px;
    font-weight:850;
    letter-spacing:1.7px;
}

.app-topbar h1{
    margin:0;
    font-size:25px;
    line-height:1.1;
    letter-spacing:-.7px;
}

.top-actions{
    display:flex;
    align-items:center;
    gap:9px;
}

.top-button{
    height:42px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:11px;
    font-size:12px;
    font-weight:750;
}

.top-button svg{
    width:16px;
    height:16px;
}

.top-button.secondary{
    background:#fff;
    border:1px solid var(--bz-line);
}

.top-button.primary{
    background:var(--bz-black);
    color:#fff;
}

.top-button.primary:hover{
    background:#252525;
}

.top-user{
    min-width:150px;
    padding:5px 10px 5px 6px;
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid var(--bz-line);
    border-radius:13px;
    background:#fff;
}

.top-user strong,
.top-user small{
    display:block;
}

.top-user strong{
    font-size:10px;
}

.top-user small{
    margin-top:2px;
    color:var(--bz-muted);
    font-size:9px;
}

.mobile-menu{
    display:none;
}


/* CONTENT */

.page-content{
    width:100%;
    max-width:1700px;
    margin:0 auto;
    padding:28px 30px 50px;
}

.card{
    min-width:0;
    padding:20px;
    border:1px solid var(--bz-line);
    border-radius:var(--radius);
    background:var(--bz-card);
    box-shadow:var(--shadow);
}

.card h2,
.card h3{
    margin-top:0;
}

.card h3{
    font-size:17px;
    letter-spacing:-.3px;
}

.grid{
    display:grid;
    gap:16px;
}

.g4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.grid2{
    display:grid;
    grid-template-columns:minmax(280px,360px) minmax(0,1fr);
    gap:18px;
    align-items:start;
}

.formgrid,
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.stat{
    position:relative;
    min-height:120px;
    overflow:hidden;
}

.stat::after{
    content:"";
    position:absolute;
    right:-25px;
    bottom:-38px;
    width:95px;
    height:95px;
    border-radius:50%;
    background:var(--bz-lime-soft);
}

.stat .muted{
    position:relative;
    z-index:1;
    display:block;
    color:var(--bz-muted);
    font-size:11px;
    font-weight:700;
}

.stat strong{
    position:relative;
    z-index:1;
    display:block;
    margin-top:13px;
    font-size:27px;
    font-weight:850;
    letter-spacing:-1px;
}

.kpi{
    font-size:30px;
    font-weight:900;
    letter-spacing:-1px;
}

.muted{
    color:var(--bz-muted);
}


/* FORMS */

label{
    display:block;
    color:#393936;
    font-size:11px;
    font-weight:750;
}

.field,
input,
select,
textarea{
    width:100%;
    max-width:100%;
    min-height:42px;
    margin-top:6px;
    padding:10px 12px;
    border:1px solid #deded8;
    border-radius:10px;
    outline:none;
    background:#fff;
    color:var(--bz-text);
    transition:border .15s ease,box-shadow .15s ease;
}

textarea{
    min-height:110px;
    resize:vertical;
}

.field:focus,
input:focus,
select:focus,
textarea:focus{
    border-color:#aaa;
    box-shadow:0 0 0 3px rgba(215,255,54,.22);
}

input[type="checkbox"],
input[type="radio"]{
    width:auto;
    min-height:auto;
    margin:0;
}


/* BUTTONS */

.btn{
    min-height:40px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:0;
    border-radius:10px;
    background:var(--bz-black);
    color:#fff;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
}

.btn:hover{
    background:#292929;
}

.btn.accent,
.accent{
    background:var(--bz-lime)!important;
    color:#111!important;
}

.btn.ghost{
    border:1px solid var(--bz-line);
    background:#fff;
    color:#333;
}


/* TABLES */

.table,
table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
}

.table th,
table th{
    padding:11px 13px;
    border-bottom:1px solid var(--bz-line);
    color:#8a8a84;
    background:#fafaf8;
    font-size:10px;
    font-weight:800;
    text-align:left;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.table td,
table td{
    padding:13px;
    border-bottom:1px solid #eeeeea;
    color:#292927;
    font-size:12px;
    text-align:left;
    vertical-align:middle;
}

.table tr:last-child td,
table tr:last-child td{
    border-bottom:0;
}

.table tr:hover td,
table tr:hover td{
    background:#fcfcfa;
}


/* BADGES */

.badge,
.pill{
    width:max-content;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 9px;
    border-radius:999px;
    background:#efffd0;
    color:#263500;
    font-size:10px;
    font-weight:800;
}


/* LIST */

.row{
    display:flex;
    align-items:center;
    gap:10px;
}

.between,
.spread{
    justify-content:space-between;
}

.listrow,
.line{
    min-width:0;
    padding:13px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid var(--bz-line);
}

.listrow:last-child,
.line:last-child{
    border-bottom:0;
}


/* ALERTS */

.alert,
.notice{
    margin-bottom:18px;
    padding:13px 15px;
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid #cdebd8;
    border-radius:12px;
    background:#effaf3;
    color:#175c35;
    font-size:12px;
}

.alert strong{
    font-size:11px;
}

.alert.danger,
.notice.danger{
    border-color:#ffd1d1;
    background:#fff1f1;
    color:#9f2020;
}


/* PRODUCT */

.productpic{
    width:100%;
    height:150px;
    margin-bottom:10px;
    object-fit:cover;
    border-radius:12px;
    background:#f2f2ef;
}

.positem{
    overflow:hidden;
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease;
}

.positem:hover{
    transform:translateY(-2px);
    box-shadow:0 13px 32px rgba(0,0,0,.07);
}


/* POS */

.pos{
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    gap:20px;
    align-items:start;
}

.pos > *{
    min-width:0;
}

.posgrid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:13px;
}

.cart{
    width:100%;
    max-width:390px;
    position:sticky;
    top:116px;
    overflow:hidden;
}

.cart .grid2{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.cart input,
.cart select{
    min-width:0;
}

.cartrow{
    padding:11px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid var(--bz-line);
}

#cart{
    max-height:300px;
    overflow:auto;
}

.paybox{
    padding:14px;
    border:1px solid var(--bz-line);
    border-radius:13px;
    background:#fafaf8;
}


/* MODAL */

.modal{
    width:min(720px,92vw);
    padding:0;
    border:0;
    background:transparent;
}

.modal::backdrop{
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
}

.modal > .card{
    max-height:82vh;
    overflow:auto;
}


/* STORE EXISTING */

.store-head{
    padding:20px 5vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
}

.hero{
    min-height:520px;
    padding:90px 7vw;
    display:flex;
    align-items:center;
    background:#111;
    color:#fff;
}

.hero h1{
    max-width:700px;
    margin:0 0 24px;
    font-size:64px;
    line-height:.95;
}

.hero em{
    color:var(--bz-lime);
    font-style:normal;
}

.products{
    padding:55px 5vw;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}


/* MOBILE */

.sidebar-overlay{
    display:none;
}

@media(max-width:1200px){

    .g4{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .pos{
        grid-template-columns:minmax(0,1fr) 350px;
    }

    .cart{
        max-width:350px;
    }

}

@media(max-width:980px){

    .sidebar{
        width:260px;
        transform:translateX(-100%);
    }

    .app-main,
    .sidebar-collapsed .app-main{
        margin-left:0;
    }

    .sidebar-mobile-open .sidebar{
        transform:translateX(0);
    }

    .sidebar-mobile-open .sidebar-overlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:90;
        background:rgba(0,0,0,.45);
    }

    .mobile-menu{
        width:40px;
        height:40px;
        padding:0;
        display:grid;
        place-items:center;
        border:1px solid var(--bz-line);
        border-radius:10px;
        background:#fff;
        cursor:pointer;
    }

    .mobile-menu svg{
        width:19px;
    }

    .sidebar-collapse{
        display:none;
    }

    .pos{
        grid-template-columns:1fr;
    }

    .cart{
        max-width:none;
        position:static;
    }

    .grid2{
        grid-template-columns:1fr;
    }

}

@media(max-width:720px){

    .app-topbar{
        min-height:76px;
        padding:14px 16px;
    }

    .page-content{
        padding:18px 16px 35px;
    }

    .app-topbar h1{
        font-size:20px;
    }

    .page-eyebrow{
        display:none;
    }

    .top-user,
    .top-button.secondary{
        display:none;
    }

    .top-button.primary{
        width:42px;
        padding:0;
        font-size:0;
    }

    .g4,
    .formgrid,
    .form-grid,
    .product-grid{
        grid-template-columns:1fr;
    }

    .posgrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .card{
        padding:16px;
    }

    .table{
        display:block;
        overflow-x:auto;
    }

}

@media(max-width:420px){

    .posgrid{
        grid-template-columns:1fr;
    }

    .cart .grid2{
        grid-template-columns:1fr;
    }

}