*{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;
    }

}

/* =========================================================
   BOUYEZZEM — PRODUCT VARIANTS V3
   ========================================================= */

.variant-v3{
    margin-top:28px;
}

.v3-kicker{
    display:inline-block;
    margin-bottom:6px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
    color:#777;
}

.variant-generator{
    margin-top:18px;
    padding:20px;
    border:1px solid #e5e5e5;
    border-radius:16px;
    background:#fafafa;
}

.generator-title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.generator-title strong{
    display:block;
    font-size:16px;
}

.generator-title small{
    display:block;
    margin-top:4px;
    color:#777;
}

.generator-count{
    white-space:nowrap;
    background:#111;
    color:#fff;
    padding:8px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
}

.generator-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.generator-block{
    min-width:0;
}

.generator-label{
    margin-bottom:10px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.generator-label span{
    color:#999;
}

.pill-list,
.color-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.size-pill,
.color-pill{
    min-height:38px;
    border:1px solid #ddd;
    background:#fff;
    border-radius:10px;
    padding:0 13px;
    cursor:pointer;
    font-weight:800;
    transition:.15s ease;
}

.size-pill:hover,
.color-pill:hover{
    border-color:#111;
}

.size-pill.active,
.color-pill.active{
    background:#111;
    border-color:#111;
    color:#fff;
    box-shadow:0 0 0 2px #d7ff36;
}

.color-pill{
    display:flex;
    align-items:center;
    gap:8px;
}

.color-dot{
    width:16px;
    height:16px;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.18);
    flex:0 0 auto;
}

.custom-size-row{
    display:flex;
    gap:8px;
    margin-top:12px;
}

.custom-size-row .field{
    flex:1;
}

.color-picker{
    width:46px;
    min-width:46px;
    height:42px;
    padding:4px;
    border:1px solid #ddd;
    border-radius:9px;
    background:#fff;
}

.mini-action{
    border:0;
    border-radius:9px;
    background:#222;
    color:#fff;
    padding:0 14px;
    font-weight:800;
    cursor:pointer;
}

.generator-settings{
    display:grid;
    grid-template-columns:180px 180px 1fr;
    gap:10px;
    align-items:end;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #e2e2e2;
}

.generator-settings label{
    font-size:11px;
    font-weight:800;
}

.generator-settings .field{
    margin-top:6px;
}

.generate-button{
    min-height:44px;
    border:0;
    border-radius:10px;
    background:#d7ff36;
    color:#111;
    font-weight:950;
    letter-spacing:.03em;
    cursor:pointer;
}

.generate-button:hover{
    background:#111;
    color:#fff;
}

.variant-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:14px;
}

.summary-card{
    padding:14px 16px;
    border:1px solid #e7e7e7;
    border-radius:12px;
    background:#fff;
}

.summary-card span{
    display:block;
    color:#999;
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.summary-card strong{
    display:block;
    margin-top:4px;
    font-size:22px;
}

.variant-bulk{
    margin-top:14px;
    padding:14px;
    border:1px solid #e7e7e7;
    border-radius:12px;
    background:#fff;
}

.variant-bulk > strong{
    display:block;
    margin-bottom:10px;
    font-size:12px;
}

.bulk-controls{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.bulk-field{
    display:flex;
    gap:6px;
}

.bulk-field .field{
    width:110px;
}

.bulk-field button,
.bulk-secondary{
    border:1px solid #ddd;
    background:#f7f7f7;
    border-radius:9px;
    padding:0 12px;
    font-weight:800;
    cursor:pointer;
}

.bulk-field button:hover,
.bulk-secondary:hover{
    border-color:#111;
    background:#111;
    color:#fff;
}

.variant-rows-v3{
    margin-top:14px;
}

.variant-row-actions{
    display:flex;
    gap:5px;
    align-self:end;
    padding-bottom:2px;
}

.variant-copy,
.variant-remove{
    width:38px;
    height:42px;
    border-radius:9px;
    cursor:pointer;
    font-size:18px;
}

.variant-copy{
    border:1px solid #ddd;
    background:#fff;
}

.variant-copy:hover{
    background:#111;
    color:#fff;
}

.variant-empty{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:100px;
    margin-top:14px;
    border:1px dashed #ccc;
    border-radius:12px;
    color:#888;
}

.variant-empty strong{
    color:#111;
}

@media(max-width:900px){

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

    .generator-settings{
        grid-template-columns:1fr 1fr;
    }

    .generate-button{
        grid-column:1/-1;
    }

    .variant-summary{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:600px){

    .variant-generator{
        padding:14px;
    }

    .generator-title{
        flex-direction:column;
    }

    .generator-settings{
        grid-template-columns:1fr;
    }

    .generate-button{
        grid-column:auto;
    }

    .variant-summary{
        grid-template-columns:1fr 1fr;
    }

    .bulk-field{
        width:100%;
    }

    .bulk-field .field{
        flex:1;
        width:auto;
    }
}


/* =========================================================
   BOUYEZZEM — PRODUCT MEDIA MANAGER
   ========================================================= */

.product-media-manager{
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid #e8e8e8;
}

.media-manager-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.media-kicker{
    display:block;
    margin-bottom:4px;
    color:#999;
    font-size:9px;
    font-weight:900;
    letter-spacing:.18em;
}

.media-manager-head h3{
    margin:0;
    font-size:19px;
}

.media-manager-head p{
    margin:5px 0 0;
    color:#888;
    font-size:12px;
}

.media-count{
    padding:8px 11px;
    border-radius:999px;
    background:#111;
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

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

.media-card{
    overflow:hidden;
    border:1px solid #e5e5e5;
    border-radius:14px;
    background:#fff;
    transition:
        transform .15s ease,
        border-color .15s ease;
}

.media-card:hover{
    transform:translateY(-2px);
    border-color:#bbb;
}

.media-card.is-primary{
    border:2px solid #111;
}

.media-photo{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:#f3f3f1;
}

.media-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.primary-badge{
    position:absolute;
    left:10px;
    top:10px;
    padding:7px 9px;
    border-radius:999px;
    background:#d7ff36;
    color:#111;
    font-size:9px;
    font-weight:950;
    letter-spacing:.05em;
}

.media-card-info{
    padding:10px;
}

.media-file{
    margin-bottom:9px;
    color:#999;
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.media-actions{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.media-actions form{
    margin:0;
}

.media-btn{
    min-height:31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    color:#111;
    padding:0 9px;
    font-size:10px;
    font-weight:850;
    text-decoration:none;
    cursor:pointer;
}

.media-btn:hover{
    background:#111;
    border-color:#111;
    color:#fff;
}

.media-btn.danger{
    color:#c92828;
}

.media-btn.danger:hover{
    background:#c92828;
    border-color:#c92828;
    color:#fff;
}

.media-empty{
    min-height:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:1px dashed #ccc;
    border-radius:14px;
    color:#888;
}

.media-empty strong{
    color:#111;
}

.media-upload{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:14px;
    padding:15px;
    border:1px dashed #bbb;
    border-radius:14px;
    background:#fafafa;
}

.upload-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#111;
    color:#d7ff36;
    font-size:24px;
}

.upload-copy{
    min-width:0;
    flex:1;
}

.upload-copy strong{
    display:block;
    font-size:13px;
}

.upload-copy span{
    display:block;
    margin-top:3px;
    color:#888;
    font-size:10px;
}

.upload-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    border-radius:9px;
    background:#111;
    color:#fff;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.upload-button:hover{
    background:#d7ff36;
    color:#111;
}

.new-image-preview{
    display:grid;
    grid-template-columns:
        repeat(6,minmax(0,1fr));
    gap:8px;
    margin-top:10px;
}

.new-preview-card{
    overflow:hidden;
    border:1px solid #e5e5e5;
    border-radius:10px;
    background:#fff;
}

.new-preview-card img{
    width:100%;
    aspect-ratio:1;
    display:block;
    object-fit:cover;
    background:#eee;
}

.new-preview-card div{
    padding:7px;
}

.new-preview-card strong{
    display:block;
    color:#67a000;
    font-size:8px;
    letter-spacing:.1em;
}

.new-preview-card span{
    display:block;
    margin-top:2px;
    overflow:hidden;
    color:#777;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* Danger Zone */

.product-danger-zone{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    max-width:none;
    margin:18px 0 30px;
    padding:18px;
    border:1px solid #f0caca;
    border-radius:14px;
    background:#fffafa;
}

.product-danger-zone span{
    display:block;
    margin-bottom:4px;
    color:#c92828;
    font-size:9px;
    font-weight:950;
    letter-spacing:.16em;
}

.product-danger-zone strong{
    display:block;
    font-size:15px;
}

.product-danger-zone p{
    margin:4px 0 0;
    color:#888;
    font-size:11px;
}

.delete-product-button{
    min-height:42px;
    padding:0 16px;
    border:1px solid #c92828;
    border-radius:9px;
    background:#fff;
    color:#c92828;
    font-size:10px;
    font-weight:950;
    cursor:pointer;
}

.delete-product-button:hover{
    background:#c92828;
    color:#fff;
}


@media(max-width:1000px){

    .media-gallery{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

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


@media(max-width:700px){

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

    .media-upload{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .upload-copy{
        flex:
            1 1 calc(100% - 60px);
    }

    .upload-button{
        width:100%;
    }

    .new-image-preview{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .product-danger-zone{
        align-items:stretch;
        flex-direction:column;
    }

    .delete-product-button{
        width:100%;
    }
}


/* =========================================================
   BOUYEZZEM MEDIA MANAGER — FINAL OVERRIDE
   ========================================================= */

.product-media-manager{
    display:block !important;
    width:100% !important;
    margin:28px 0 0 !important;
    padding:24px 0 0 !important;
    border-top:1px solid #e5e5e5 !important;
}

.product-media-manager .media-manager-head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:20px !important;
    margin:0 0 18px !important;
}

.product-media-manager .media-manager-head h3{
    margin:0 !important;
    font-size:18px !important;
    line-height:1.2 !important;
}

.product-media-manager .media-manager-head p{
    margin:6px 0 0 !important;
    color:#888 !important;
    font-size:11px !important;
}

.product-media-manager .media-kicker{
    display:block !important;
    margin:0 0 5px !important;
    color:#999 !important;
    font-size:9px !important;
    font-weight:900 !important;
    letter-spacing:.16em !important;
}

.product-media-manager .media-count{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px 11px !important;
    border-radius:999px !important;
    background:#111 !important;
    color:#fff !important;
    font-size:9px !important;
    font-weight:900 !important;
}


/* Gallery */

.product-media-manager .media-gallery{
    display:grid !important;
    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.product-media-manager .media-card{
    display:block !important;
    min-width:0 !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid #e5e5e5 !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:none !important;
}

.product-media-manager .media-card.is-primary{
    border:2px solid #111 !important;
}


/* IMPORTANT: force images to thumbnail size */

.product-media-manager .media-card .media-photo{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:4 / 4.6 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#f2f2f0 !important;
}

.product-media-manager .media-card .media-photo img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:100% !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center !important;
    border:0 !important;
    border-radius:0 !important;
    background:#f2f2f0 !important;
}


/* Primary badge */

.product-media-manager .primary-badge{
    position:absolute !important;
    top:9px !important;
    left:9px !important;
    z-index:2 !important;
    display:inline-flex !important;
    padding:6px 8px !important;
    border-radius:999px !important;
    background:#d7ff36 !important;
    color:#111 !important;
    font-size:8px !important;
    font-weight:950 !important;
    letter-spacing:.06em !important;
}


/* Card bottom */

.product-media-manager .media-card-info{
    display:block !important;
    padding:10px !important;
    background:#fff !important;
}

.product-media-manager .media-file{
    display:block !important;
    margin:0 0 8px !important;
    color:#999 !important;
    font-size:8px !important;
    font-weight:900 !important;
    letter-spacing:.1em !important;
}


/* Buttons */

.product-media-manager .media-actions{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:5px !important;
}

.product-media-manager .media-actions form{
    display:inline-flex !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
}

.product-media-manager .media-btn{
    appearance:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    min-height:32px !important;
    margin:0 !important;
    padding:0 10px !important;
    border:1px solid #ddd !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#111 !important;
    font-family:inherit !important;
    font-size:9px !important;
    font-weight:850 !important;
    line-height:1 !important;
    text-decoration:none !important;
    cursor:pointer !important;
}

.product-media-manager .media-btn:hover{
    border-color:#111 !important;
    background:#111 !important;
    color:#fff !important;
}

.product-media-manager .media-btn.danger{
    border-color:#f0caca !important;
    color:#c62828 !important;
}

.product-media-manager .media-btn.danger:hover{
    border-color:#c62828 !important;
    background:#c62828 !important;
    color:#fff !important;
}


/* Upload */

.product-media-manager .media-upload{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    width:100% !important;
    margin:14px 0 0 !important;
    padding:14px !important;
    border:1px dashed #bbb !important;
    border-radius:14px !important;
    background:#fafafa !important;
}

.product-media-manager .upload-icon{
    display:grid !important;
    place-items:center !important;
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    border-radius:10px !important;
    background:#111 !important;
    color:#d7ff36 !important;
    font-size:22px !important;
}

.product-media-manager .upload-copy{
    flex:1 !important;
    min-width:0 !important;
}

.product-media-manager .upload-copy strong{
    display:block !important;
    font-size:12px !important;
}

.product-media-manager .upload-copy span{
    display:block !important;
    margin-top:3px !important;
    color:#888 !important;
    font-size:9px !important;
}

.product-media-manager .upload-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    margin:0 !important;
    padding:0 14px !important;
    border-radius:9px !important;
    background:#111 !important;
    color:#fff !important;
    font-size:9px !important;
    font-weight:900 !important;
    cursor:pointer !important;
}


/* Preview new uploads */

.product-media-manager .new-image-preview{
    display:grid !important;
    grid-template-columns:
        repeat(6,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:10px !important;
}

.product-media-manager .new-preview-card{
    min-width:0 !important;
    overflow:hidden !important;
    border:1px solid #e5e5e5 !important;
    border-radius:10px !important;
    background:#fff !important;
}

.product-media-manager .new-preview-card img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 !important;
    object-fit:contain !important;
    background:#f2f2f0 !important;
}


/* =========================================================
   DANGER ZONE FINAL
   ========================================================= */

.product-danger-zone{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:20px !important;
    width:100% !important;
    margin:20px 0 32px !important;
    padding:18px !important;
    border:1px solid #efcaca !important;
    border-radius:14px !important;
    background:#fff8f8 !important;
}

.product-danger-zone > div{
    min-width:0 !important;
}

.product-danger-zone span{
    display:block !important;
    margin-bottom:4px !important;
    color:#c62828 !important;
    font-size:8px !important;
    font-weight:950 !important;
    letter-spacing:.16em !important;
}

.product-danger-zone strong{
    display:block !important;
    color:#111 !important;
    font-size:14px !important;
}

.product-danger-zone p{
    margin:5px 0 0 !important;
    color:#888 !important;
    font-size:10px !important;
}

.delete-product-button{
    appearance:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    padding:0 16px !important;
    border:1px solid #c62828 !important;
    border-radius:9px !important;
    background:#fff !important;
    color:#c62828 !important;
    font-family:inherit !important;
    font-size:9px !important;
    font-weight:950 !important;
    cursor:pointer !important;
}

.delete-product-button:hover{
    background:#c62828 !important;
    color:#fff !important;
}


/* Responsive */

@media(max-width:1100px){

    .product-media-manager .media-gallery{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

}

@media(max-width:700px){

    .product-media-manager .media-gallery{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .product-media-manager .media-upload{
        flex-wrap:wrap !important;
    }

    .product-media-manager .upload-button{
        width:100% !important;
    }

    .product-media-manager .new-image-preview{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

    .product-danger-zone{
        align-items:stretch !important;
        flex-direction:column !important;
    }

    .delete-product-button{
        width:100% !important;
    }

}


/* =====================================================
   BOUYEZZEM — CATEGORY MANAGER V2
   ===================================================== */

.category-page{
    width:100%;
}

.category-alert{
    margin-bottom:14px;
    padding:12px 14px;
    border-radius:10px;
    font-size:12px;
    font-weight:700;
}

.category-alert.success{
    background:#efffd0;
    border:1px solid #d7ff36;
}

.category-alert.danger{
    background:#fff1f1;
    border:1px solid #efc1c1;
    color:#a51f1f;
}

.category-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:14px;
}

.category-stat{
    padding:17px;
    border:1px solid #e6e6e6;
    border-radius:13px;
    background:#fff;
}

.category-stat span{
    display:block;
    color:#999;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.category-stat strong{
    display:block;
    margin-top:4px;
    font-size:26px;
    line-height:1;
}

.category-stat small{
    display:block;
    margin-top:6px;
    color:#999;
    font-size:9px;
}

.category-layout{
    display:grid;
    grid-template-columns:330px minmax(0,1fr);
    gap:14px;
    align-items:start;
}

.category-create,
.category-list{
    border:1px solid #e6e6e6;
    border-radius:14px;
    background:#fff;
}

.category-create{
    position:sticky;
    top:20px;
    padding:18px;
}

.category-list{
    padding:18px;
}

.category-section-head span,
.category-list-head > div > span{
    display:block;
    margin-bottom:4px;
    color:#999;
    font-size:8px;
    font-weight:950;
    letter-spacing:.16em;
}

.category-section-head h2,
.category-list-head h2{
    margin:0;
    font-size:18px;
}

.category-section-head p{
    margin:6px 0 18px;
    color:#888;
    font-size:10px;
    line-height:1.5;
}

.category-label{
    display:block;
    margin-bottom:14px;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}

.category-label .field{
    margin-top:6px;
}

.category-active-control{
    display:flex;
    align-items:center;
    gap:10px;
    margin:15px 0;
    cursor:pointer;
}

.category-active-control input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.category-switch{
    position:relative;
    width:38px;
    height:22px;
    flex:0 0 38px;
    border-radius:999px;
    background:#ddd;
    transition:.15s ease;
}

.category-switch:after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    transition:.15s ease;
}

.category-active-control input:checked
+ .category-switch{
    background:#111;
}

.category-active-control input:checked
+ .category-switch:after{
    left:19px;
    background:#d7ff36;
}

.category-active-control strong{
    display:block;
    font-size:11px;
}

.category-active-control small{
    display:block;
    margin-top:2px;
    color:#999;
    font-size:9px;
}

.category-create-button{
    width:100%;
    min-height:43px;
    border:0;
    border-radius:9px;
    background:#d7ff36;
    color:#111;
    font-weight:950;
    cursor:pointer;
}

.category-create-button:hover{
    background:#111;
    color:#fff;
}

.category-list-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:15px;
}

.category-search{
    display:flex;
    gap:5px;
}

.category-search input{
    width:190px;
    min-height:36px;
    border:1px solid #ddd;
    border-radius:8px;
    padding:0 10px;
    outline:none;
}

.category-search input:focus{
    border-color:#111;
}

.category-search button,
.category-search a{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    color:#111;
    padding:0 10px;
    font-size:9px;
    font-weight:850;
    text-decoration:none;
    cursor:pointer;
}

.category-cards{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.category-card{
    overflow:hidden;
    border:1px solid #e7e7e7;
    border-radius:12px;
    background:#fff;
}

.category-card.inactive{
    background:#fafafa;
    opacity:.72;
}

.category-card-main{
    display:flex;
    gap:12px;
    padding:13px;
}

.category-card-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#111;
    color:#d7ff36;
    font-size:17px;
    font-weight:950;
}

.category-card-copy{
    flex:1;
    min-width:0;
}

.category-card-title{
    display:flex;
    align-items:center;
    gap:8px;
}

.category-card-title h3{
    margin:0;
    font-size:13px;
}

.category-status{
    padding:4px 6px;
    border-radius:999px;
    font-size:7px;
    font-weight:950;
}

.category-status.active{
    background:#eaffaf;
    color:#4b6900;
}

.category-status.inactive{
    background:#eee;
    color:#777;
}

.category-card-copy p{
    margin:5px 0;
    color:#888;
    font-size:9px;
}

.category-meta{
    display:flex;
    gap:12px;
    color:#999;
    font-size:8px;
}

.category-meta b{
    color:#111;
}

.category-card-actions{
    display:flex;
    gap:5px;
    padding:0 13px 13px 69px;
}

.category-card-actions form{
    margin:0;
}

.category-action{
    min-height:31px;
    border:1px solid #ddd;
    border-radius:7px;
    background:#fff;
    padding:0 9px;
    font-size:8px;
    font-weight:850;
    cursor:pointer;
}

.category-action:hover{
    border-color:#111;
    background:#111;
    color:#fff;
}

.category-action.delete{
    color:#c62828;
}

.category-action.delete:hover{
    border-color:#c62828;
    background:#c62828;
    color:#fff;
}

.category-action:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.category-edit{
    display:none;
    padding:14px;
    border-top:1px solid #eee;
    background:#fafafa;
}

.category-edit.open{
    display:block;
}

.category-edit-grid{
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:10px;
}

.category-edit-grid label{
    font-size:9px;
    font-weight:800;
}

.category-edit-grid .field{
    margin-top:5px;
}

.category-active-control.compact{
    margin:10px 0;
}

.category-edit-actions{
    display:flex;
    justify-content:flex-end;
    gap:6px;
}

.category-edit-actions button{
    min-height:34px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    padding:0 12px;
    font-size:8px;
    font-weight:900;
    cursor:pointer;
}

.category-edit-actions button.save{
    border-color:#111;
    background:#111;
    color:#fff;
}

.category-edit-actions button.save:hover{
    background:#d7ff36;
    border-color:#d7ff36;
    color:#111;
}

.category-empty{
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#999;
}

.category-empty strong{
    color:#111;
}

@media(max-width:1000px){

    .category-layout{
        grid-template-columns:1fr;
    }

    .category-create{
        position:static;
    }
}

@media(max-width:650px){

    .category-stats{
        grid-template-columns:1fr;
    }

    .category-list-head{
        align-items:stretch;
        flex-direction:column;
    }

    .category-search{
        width:100%;
    }

    .category-search input{
        flex:1;
        width:auto;
    }

    .category-card-actions{
        padding-left:13px;
        flex-wrap:wrap;
    }

    .category-edit-grid{
        grid-template-columns:1fr;
    }
}

/* BOUYEZZEM — FINAL ADMIN LAYOUT */

.app-shell {
    display:block;
    width:100%;
    min-height:100vh;
}

.app-main {
    display:block;
    width:calc(100% - var(--sidebar-width));
    min-width:0;
    margin-left:var(--sidebar-width);
    overflow-x:clip;
}

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

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

@media (max-width:980px) {
    .app-main,
    .sidebar-collapsed .app-main {
        width:100%;
        margin-left:0;
    }

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


/* BOUYEZZEM PRODUCT EDITOR — LAYOUT FIX V3 */

@media (min-width:981px) {
    body:has(.product-media-manager) .app-shell {
        display:block !important;
    }

    body:has(.product-media-manager) .app-main {
        display:block !important;
        position:relative !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
        flex:none !important;
        width:calc(100% - var(--sidebar-width)) !important;
        max-width:none !important;
        margin-left:var(--sidebar-width) !important;
        overflow-x:visible !important;
    }

    body.sidebar-collapsed:has(.product-media-manager) .app-main {
        width:calc(100% - var(--sidebar-small)) !important;
        margin-left:var(--sidebar-small) !important;
    }
}

body:has(.product-media-manager) .page-content {
    width:100% !important;
    min-width:0 !important;
    max-width:1700px !important;
}

body:has(.product-media-manager) .formgrid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
}

body:has(.product-media-manager) .formgrid > * {
    min-width:0 !important;
    max-width:100% !important;
}

body:has(.product-media-manager) .formgrid input,
body:has(.product-media-manager) .formgrid select,
body:has(.product-media-manager) .formgrid textarea {
    min-width:0;
    max-width:100%;
}

@media (max-width:980px) {
    body:has(.product-media-manager) .app-main {
        width:100% !important;
        margin-left:0 !important;
    }
}

@media (max-width:700px) {
    body:has(.product-media-manager) .formgrid {
        grid-template-columns:minmax(0,1fr) !important;
    }
}


/* BOUYEZZEM — PRODUCT PAGE OVERFLOW FIX */

html,
body {
    max-width:100%;
    overflow-x:hidden;
}

body:has(.product-media-manager) .app-main,
body:has(.product-media-manager) .page-content {
    min-width:0 !important;
    max-width:100% !important;
}

body:has(.product-media-manager) .formgrid,
body:has(.product-media-manager) .generator-grid,
body:has(.product-media-manager) .variant-section,
body:has(.product-media-manager) .product-media-manager {
    min-width:0 !important;
    max-width:100% !important;
}

body:has(.product-media-manager) .formgrid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

body:has(.product-media-manager) .generator-grid > *,
body:has(.product-media-manager) .formgrid > * {
    min-width:0 !important;
}

@media(max-width:760px) {
    body:has(.product-media-manager) .formgrid,
    body:has(.product-media-manager) .generator-grid {
        grid-template-columns:minmax(0,1fr) !important;
    }
}


/* BOUYEZZEM — SIDEBAR COLLAPSE / EXPAND FIX */

@media (min-width: 769px) {

    body.sidebar-collapsed .sidebar .sidebar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 20px;
        right: 5px;
        width: 28px;
        height: 28px;
        z-index: 50;
        cursor: pointer;
        opacity: 1;
        visibility: visible;
    }

    body.sidebar-collapsed .sidebar .sidebar-head {
        position: relative;
        overflow: visible;
    }

    body.sidebar-collapsed .sidebar .sidebar-collapse svg {
        transform: rotate(180deg);
        width: 16px;
        height: 16px;
    }

    body.sidebar-collapsed .sidebar .brand-icon {
        margin-right: 0;
    }

}


/* BOUYEZZEM — SIDEBAR COLLAPSE / EXPAND FIX */

@media (min-width: 769px) {

    body.sidebar-collapsed .sidebar .sidebar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 20px;
        right: 5px;
        width: 28px;
        height: 28px;
        z-index: 50;
        cursor: pointer;
        opacity: 1;
        visibility: visible;
    }

    body.sidebar-collapsed .sidebar .sidebar-head {
        position: relative;
        overflow: visible;
    }

    body.sidebar-collapsed .sidebar .sidebar-collapse svg {
        transform: rotate(180deg);
        width: 16px;
        height: 16px;
    }

    body.sidebar-collapsed .sidebar .brand-icon {
        margin-right: 0;
    }

}


/* BOUYEZZEM RETAIL OS BRANDING */
.sidebar .brand-copy small {
    display: block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #a3a3a3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 4px !important;
}

@media (min-width: 769px) {
    body:not(.sidebar-collapsed) .sidebar .brand-copy {
        display: flex !important;
        flex-direction: column;
    }
}

.sidebar .brand-copy small {
    display: block;
    color: #a3a3a3 !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
    margin-top: 3px;
}