/* Black-on storefront styles.
   Kept centralized so future UI changes do not bloat index.html. */

* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  ::selection { background: #c7e0c4; color: #163A28; }
  input, button, textarea, select { font-family: inherit; }
  input::placeholder, textarea::placeholder { color: #9bb29f; }
  :focus-visible { outline: 3px solid #CA8A04; outline-offset: 3px; }
  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-thumb { background: #cfe0cd; border-radius: 9px; }
  ::-webkit-scrollbar-track { background: transparent; }
  @keyframes qcFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @keyframes qcUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes qcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes qcPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
  :root { --bo-ink:#171412; --bo-cream:#FFF8EF; --bo-coral:#FF5A36; --bo-gold:#E7A51A; --bo-violet:#7C3AED; --bo-mint:#CFF7DF; }
  @keyframes boGlow { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(12px,-10px,0) scale(1.06)} }
  .bo-hero{position:relative;isolation:isolate;background:radial-gradient(circle at 8% 18%,rgba(255,90,54,.16),transparent 34%),radial-gradient(circle at 88% 82%,rgba(124,58,237,.12),transparent 32%),var(--bo-cream);overflow:hidden}
  .bo-hero::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:linear-gradient(135deg,var(--bo-coral),var(--bo-gold));filter:blur(90px);opacity:.18;left:-90px;bottom:-110px;z-index:-1;animation:boGlow 8s ease-in-out infinite}
  .bo-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(23,20,18,.1);box-shadow:0 8px 26px rgba(23,20,18,.07);border-radius:999px;padding:9px 14px}
  .bo-dot{width:8px;height:8px;border-radius:50%;background:var(--bo-coral);box-shadow:0 0 0 5px rgba(255,90,54,.14)}
  .bo-primary{background:linear-gradient(135deg,var(--bo-coral),#EF3E20)!important;color:#fff!important;box-shadow:0 14px 32px rgba(255,90,54,.25);border:none!important}
  .bo-primary:hover{background:linear-gradient(135deg,#EF3E20,#D92D13)!important;box-shadow:0 16px 36px rgba(255,90,54,.34)}
  .bo-header-action{border-radius:30px;padding:9px 15px;font-size:12px;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;white-space:nowrap}
  .bo-header-lang{border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.08);color:#fff}
  .bo-header-lang:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.7)}
  .bo-header-dashboard{border:1px solid #E7A51A;background:#E7A51A;color:#171412;box-shadow:0 7px 20px rgba(231,165,26,.2)}
  .bo-header-dashboard:hover{background:#F5BB38;border-color:#F5BB38;box-shadow:0 9px 24px rgba(231,165,26,.3)}
  .bo-header-action:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .bo-advisor{background:#171412;color:#fff;border-radius:28px;padding:clamp(26px,5vw,56px);position:relative;overflow:hidden}
  .bo-advisor::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--bo-violet);filter:blur(100px);opacity:.3;right:-80px;top:-100px;pointer-events:none}
  .bo-concerns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;position:relative;z-index:1}
  .bo-recs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;position:relative;z-index:1}
  .bo-rec{background:#fff;color:var(--bo-ink);border-radius:18px;padding:14px;display:grid;grid-template-columns:76px 1fr;gap:13px;align-items:center;box-shadow:0 16px 36px rgba(0,0,0,.16)}
  .bo-rec img{width:76px;height:92px;object-fit:contain;background:#FFF8EF;border-radius:12px}
  #qc-story>div{background:linear-gradient(125deg,#171412,#3A211D)!important}
  #qc-collection>div:last-child button{border-color:#171412!important;color:#171412!important}
  .bo-mobile-nav{display:none}
  @media(max-width:768px){.bo-recs{grid-template-columns:1fr}.bo-advisor{border-radius:20px}.bo-rec{grid-template-columns:68px 1fr}.bo-rec img{width:68px;height:82px}.bo-hero{border-radius:0!important;margin-top:0!important}.bo-mobile-nav{display:grid;grid-template-columns:1fr auto;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:70;background:rgba(23,20,18,.94);backdrop-filter:blur(14px);padding:10px;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.3)}main{padding-bottom:86px}}
  /* ============================
   RESPONSIVE DESIGN
============================ */

/* Images */
img{
    max-width:100%;
    height:auto;
    display:block;
}

/* Prevent Horizontal Scroll */
html,
body{
    width:100%;
    overflow-x:hidden;
}

/* Responsive Containers */
section,
header,
footer,
main{
    width:100%;
}

/* ============================
   TABLET
============================ */

@media (max-width:1024px){

    header > div{
        padding:0 20px !important;
    }

    section{
        padding-left:20px !important;
        padding-right:20px !important;
    }

}

/* ============================
   MOBILE
============================ */

@media (max-width:768px){

    /* Header */

    header > div{
        flex-wrap:wrap !important;
        height:auto !important;
        padding:18px !important;
        gap:18px !important;
    }

    nav{
        order:3;
        width:100%;
        justify-content:center !important;
        flex-wrap:wrap !important;
        gap:14px !important;
    }

    /* Hero */

    section:first-of-type{
        display:flex !important;
        flex-direction:column !important;
        gap:35px !important;
        min-height:auto !important;
        padding-top:40px !important;
    }

    section:first-of-type > div{
        width:100% !important;
    }

    section:first-of-type img{
        object-fit:cover !important;
    }

    h1{
        font-size:38px !important;
        line-height:1.2 !important;
    }

    /* Story */

    #qc-story > div{

        display:flex !important;

        flex-direction:column !important;

    }

    /* Collection */

    #qc-collection > div:last-child{

        grid-template-columns:repeat(2,1fr) !important;

    }

    /* Footer */

    footer > div{

        flex-direction:column !important;

    }

    /* Admin */

    #qc-admin-form{

        display:flex !important;

        flex-direction:column !important;

    }

}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* ============================
   SMALL MOBILE
============================ */

@media (max-width:576px){

    h1{
        font-size:32px !important;
    }

    h2{
        font-size:28px !important;
    }

    button{

        width:100%;

    }

    .hero-buttons{

        flex-direction:column;

    }

    #qc-collection > div:last-child{

        grid-template-columns:1fr !important;

    }

    aside{

        width:100% !important;

        max-width:100% !important;

    }

}

/* ============================
   EXTRA SMALL DEVICES
============================ */

@media (max-width:400px){

    h1{

        font-size:28px !important;

    }

    h2{

        font-size:24px !important;

    }

    p{

        font-size:14px !important;

    }

}


/* ============================
   ADMIN DASHBOARD — STAGE 3
============================ */
.bo-admin-shell{
  max-width:1280px;
  margin:0 auto;
  padding:46px 28px 80px;
}
.bo-admin-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:26px;
}
.bo-admin-eyebrow{
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#2E7D4F;
  margin-bottom:14px;
}
.bo-admin-title{
  font-family:'Playfair Display','Cairo',serif;
  font-weight:500;
  font-size:clamp(28px,3.4vw,42px);
  margin:0;
}
.bo-admin-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.bo-admin-user{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:#7a887c;
}
.bo-admin-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2E7D4F;
}
.bo-admin-logout{
  border:1px solid rgba(20,53,34,.2);
  background:transparent;
  color:#1F1D1A;
  border-radius:30px;
  padding:9px 18px;
  font-size:12px;
  letter-spacing:.1em;
  cursor:pointer;
}
.bo-admin-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:22px;
}
.bo-admin-card{
  background:#fff;
  border:1px solid rgba(20,53,34,.08);
  border-radius:18px;
  padding:22px;
  box-shadow:0 18px 44px -34px rgba(23,20,18,.45);
}
.bo-admin-card.is-primary{
  background:linear-gradient(135deg,#171412,#2b241f);
  color:#fff;
}
.bo-admin-card.is-alert{
  border-color:#f3c9bd;
  background:#fff7f4;
}
.bo-admin-card-label{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a988b;
  margin-bottom:14px;
}
.bo-admin-card.is-primary .bo-admin-card-label{color:#d6d3d1}
.bo-admin-card-value{
  font-family:'Playfair Display',serif;
  font-size:34px;
  line-height:1;
}
.bo-admin-card-note{
  font-size:12px;
  color:#7a887c;
  margin-top:12px;
}
.bo-admin-card.is-primary .bo-admin-card-note{color:#cfc9c4}
.bo-admin-panel-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:start;
  margin-bottom:24px;
}
.bo-admin-panel{
  background:#fff;
  border:1px solid rgba(20,53,34,.08);
  border-radius:18px;
  padding:24px;
  box-shadow:0 18px 44px -38px rgba(23,20,18,.5);
}
.bo-admin-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}
.bo-admin-panel-title{
  font-family:'Playfair Display','Cairo',serif;
  font-weight:500;
  font-size:21px;
  margin:0;
}
.bo-admin-muted{
  font-size:12px;
  color:#8a988b;
}
.bo-admin-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bo-admin-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(20,53,34,.06);
  border-radius:14px;
  padding:13px;
  background:#fff;
}
.bo-admin-row-main{
  min-width:0;
}
.bo-admin-row-title{
  font-size:14px;
  color:#1F1D1A;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bo-admin-row-sub{
  font-size:11px;
  color:#a3b0a4;
  margin-top:4px;
}
.bo-admin-money{
  font-size:13px;
  font-weight:600;
}
.bo-admin-badge{
  border-radius:999px;
  padding:6px 10px;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:#F7FAF5;
  color:#2E7D4F;
  border:1px solid #d9e4d6;
}
.bo-admin-badge.is-warning{
  background:#fff7ed;
  color:#c2410c;
  border-color:#fed7aa;
}
.bo-admin-badge.is-danger{
  background:#fef2f2;
  color:#b91c1c;
  border-color:#fecaca;
}
.bo-admin-empty{
  border:1px dashed #d9e4d6;
  border-radius:14px;
  padding:22px;
  text-align:center;
  color:#8a988b;
  font-size:13px;
  background:#F7FAF5;
}
.bo-admin-status-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:10px;
}
.bo-admin-status{
  border:1px solid rgba(20,53,34,.08);
  border-radius:14px;
  padding:14px;
  background:#F7FAF5;
}
.bo-admin-status strong{
  display:block;
  font-size:22px;
  margin-bottom:6px;
}
.bo-admin-status span{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#7a887c;
}
.bo-admin-products-shell{
  display:grid;
  grid-template-columns:0.92fr 1.08fr;
  gap:24px;
  align-items:start;
}
@media(max-width:1024px){
  .bo-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bo-admin-panel-grid,
  .bo-admin-products-shell{grid-template-columns:1fr}
}
@media(max-width:640px){
  .bo-admin-shell{padding:30px 16px 72px}
  .bo-admin-grid{grid-template-columns:1fr}
  .bo-admin-card,.bo-admin-panel{padding:18px;border-radius:14px}
  .bo-admin-row{grid-template-columns:1fr;align-items:start}
  .bo-admin-actions{width:100%}
  .bo-admin-logout{width:100%}
}


/* ============================
   ORDER OPERATIONS — STAGE 4
============================ */
.bo-orders-board{
  margin-top:24px;
  background:#fff;
  border:1px solid rgba(20,53,34,.08);
  border-radius:18px;
  padding:24px;
  box-shadow:0 18px 44px -38px rgba(23,20,18,.5);
}
.bo-orders-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.bo-orders-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.bo-orders-filter{
  border:1px solid #d9e4d6;
  background:#F7FAF5;
  color:#1F1D1A;
  border-radius:999px;
  padding:9px 13px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.bo-orders-filter.is-active{
  background:#171412;
  border-color:#171412;
  color:#fff;
}
.bo-orders-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:20px;
  align-items:start;
}
.bo-orders-table{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bo-order-card{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:14px;
  align-items:center;
  border:1px solid rgba(20,53,34,.08);
  border-radius:16px;
  padding:14px;
  background:#fff;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bo-order-card:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px -24px rgba(23,20,18,.55);
  border-color:#cbd8c7;
}
.bo-order-card.is-selected{
  border-color:#171412;
  box-shadow:0 18px 36px -28px rgba(23,20,18,.7);
}
.bo-order-main{min-width:0}
.bo-order-number{
  font-size:14px;
  color:#171412;
  font-weight:600;
  margin-bottom:4px;
}
.bo-order-meta{
  font-size:11px;
  color:#8a988b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bo-order-total{
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.bo-order-detail{
  border:1px solid rgba(20,53,34,.08);
  border-radius:18px;
  background:#F7FAF5;
  padding:20px;
  position:sticky;
  top:96px;
}
.bo-order-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.bo-order-detail-title{
  margin:0;
  font-family:'Playfair Display','Cairo',serif;
  font-size:22px;
  font-weight:500;
}
.bo-order-detail-sub{
  font-size:12px;
  color:#8a988b;
  margin-top:5px;
}
.bo-order-detail-block{
  background:#fff;
  border:1px solid rgba(20,53,34,.06);
  border-radius:14px;
  padding:14px;
  margin-top:12px;
}
.bo-order-detail-label{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8a988b;
  margin-bottom:8px;
}
.bo-order-detail-text{
  font-size:13px;
  color:#1F1D1A;
  line-height:1.55;
}
.bo-order-items{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bo-order-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  font-size:12px;
  border-bottom:1px solid rgba(20,53,34,.06);
  padding-bottom:8px;
}
.bo-order-item:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.bo-order-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}
.bo-order-action{
  border:1px solid #d9e4d6;
  background:#fff;
  color:#171412;
  border-radius:12px;
  padding:10px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.bo-order-action.is-primary{
  background:#171412;
  border-color:#171412;
  color:#fff;
}
.bo-order-action.is-danger{
  background:#fef2f2;
  border-color:#fecaca;
  color:#b91c1c;
}
.bo-order-timeline{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.bo-order-step{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#8a988b;
}
.bo-order-step-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#d9e4d6;
  border:2px solid #fff;
  box-shadow:0 0 0 1px #d9e4d6;
}
.bo-order-step.is-done{color:#1F1D1A}
.bo-order-step.is-done .bo-order-step-dot{
  background:#2E7D4F;
  box-shadow:0 0 0 1px #2E7D4F;
}
.bo-order-step.is-cancelled{color:#b91c1c}
.bo-order-step.is-cancelled .bo-order-step-dot{
  background:#b91c1c;
  box-shadow:0 0 0 1px #b91c1c;
}
@media(max-width:1024px){
  .bo-orders-layout{grid-template-columns:1fr}
  .bo-order-detail{position:static}
}
@media(max-width:640px){
  .bo-orders-board{padding:18px;border-radius:14px}
  .bo-order-card{grid-template-columns:1fr}
  .bo-order-total{text-align:start}
  .bo-order-actions{grid-template-columns:1fr}
  .bo-orders-filter{flex:1}
}


/* ============================
   CUSTOMER CRM — STAGE 5
============================ */
.bo-crm-board{
  margin-top:24px;
  background:#fff;
  border:1px solid rgba(20,53,34,.08);
  border-radius:18px;
  padding:24px;
  box-shadow:0 18px 44px -38px rgba(23,20,18,.5);
}
.bo-crm-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.bo-crm-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}
.bo-crm-stat{
  background:#F7FAF5;
  border:1px solid #e1eadf;
  border-radius:14px;
  padding:14px;
}
.bo-crm-stat strong{
  display:block;
  font-size:24px;
  line-height:1;
  margin-bottom:7px;
  color:#171412;
}
.bo-crm-stat span{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#7a887c;
}
.bo-crm-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:20px;
  align-items:start;
}
.bo-crm-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bo-customer-card{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:14px;
  align-items:center;
  border:1px solid rgba(20,53,34,.08);
  border-radius:16px;
  padding:14px;
  background:#fff;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bo-customer-card:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px -24px rgba(23,20,18,.55);
  border-color:#cbd8c7;
}
.bo-customer-card.is-selected{
  border-color:#171412;
  box-shadow:0 18px 36px -28px rgba(23,20,18,.7);
}
.bo-customer-main{min-width:0}
.bo-customer-name{
  font-size:14px;
  font-weight:700;
  color:#171412;
  margin-bottom:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bo-customer-meta{
  font-size:11px;
  color:#8a988b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bo-customer-spend{
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
}
.bo-crm-profile{
  border:1px solid rgba(20,53,34,.08);
  border-radius:18px;
  background:#F7FAF5;
  padding:20px;
  position:sticky;
  top:96px;
}
.bo-crm-profile-title{
  margin:0;
  font-family:'Playfair Display','Cairo',serif;
  font-size:22px;
  font-weight:500;
}
.bo-crm-profile-sub{
  font-size:12px;
  color:#8a988b;
  margin-top:5px;
  line-height:1.5;
}
.bo-crm-kpis{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.bo-crm-kpi{
  background:#fff;
  border:1px solid rgba(20,53,34,.06);
  border-radius:14px;
  padding:13px;
}
.bo-crm-kpi strong{
  display:block;
  font-size:20px;
  margin-bottom:6px;
}
.bo-crm-kpi span{
  color:#8a988b;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.bo-crm-block{
  background:#fff;
  border:1px solid rgba(20,53,34,.06);
  border-radius:14px;
  padding:14px;
  margin-top:12px;
}
.bo-crm-block-label{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8a988b;
  margin-bottom:9px;
}
.bo-crm-mini-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bo-crm-mini-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  font-size:12px;
  border-bottom:1px solid rgba(20,53,34,.06);
  padding-bottom:8px;
}
.bo-crm-mini-row:last-child{
  border-bottom:0;
  padding-bottom:0;
}
@media(max-width:1024px){
  .bo-crm-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bo-crm-layout{grid-template-columns:1fr}
  .bo-crm-profile{position:static}
}
@media(max-width:640px){
  .bo-crm-board{padding:18px;border-radius:14px}
  .bo-crm-summary{grid-template-columns:1fr}
  .bo-customer-card{grid-template-columns:1fr}
}

/* ============================
   STAGE 7 — CLIENT-FIRST DASHBOARD UX
   Clear layout inspired by the approved reference: sidebar, KPIs, quick actions.
============================ */
.bo-admin-shell{
  max-width:none;
  padding:18px 18px 28px;
  background:linear-gradient(180deg,#fff 0%,#fffaf4 52%,#fff8ef 100%);
}
.bo-admin-layout{
  max-width:1480px;
  margin:0 auto;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:34px;
  align-items:start;
}
.bo-admin-sidebar{
  position:sticky;
  top:94px;
  min-height:calc(100vh - 120px);
  background:rgba(255,255,255,.84);
  border:1px solid rgba(17,17,17,.08);
  border-radius:16px;
  padding:18px;
  box-shadow:0 22px 70px -50px rgba(17,17,17,.32);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
}
.bo-side-menu{display:flex;flex-direction:column;gap:12px}
.bo-side-item{
  width:100%;
  border:0;
  background:transparent;
  color:#111827;
  border-radius:11px;
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:13px;
  text-align:start;
  cursor:pointer;
  font-family:'Jost','Cairo',sans-serif;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.bo-side-item span{
  width:24px;height:24px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#475569;border:1px solid rgba(71,85,105,.16);font-size:13px;
}
.bo-side-item strong{font-size:14px;font-weight:500}
.bo-side-item:hover{background:#fff7e6;transform:translateX(2px)}
.bo-side-item.is-active{
  background:linear-gradient(135deg,#111,#2d261e);
  color:#fff;
  box-shadow:0 14px 28px -18px rgba(17,17,17,.75);
}
.bo-side-item.is-active span{background:rgba(232,173,29,.18);border-color:rgba(232,173,29,.32);color:#F2B619}
.bo-side-help{
  border:1px solid rgba(17,17,17,.08);
  border-radius:16px;
  padding:18px;
  background:#fff;
}
.bo-side-help strong{display:block;color:#147a45;font-size:14px;margin-bottom:8px}
.bo-side-help p{font-size:12.5px;line-height:1.55;color:#667085;margin:0 0 14px}
.bo-side-help button{width:100%;border:1px solid #e5e7eb;background:#fff;border-radius:9px;padding:11px 12px;font-weight:600;cursor:pointer}
.bo-admin-main{min-width:0}
.bo-admin-hero{
  padding:8px 0 4px;
  margin-bottom:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.bo-admin-welcome{font-size:16px;color:#334155;margin-bottom:6px}
.bo-admin-title{
  font-family:'Jost','Cairo',sans-serif;
  font-weight:700;
  letter-spacing:-.045em;
  font-size:clamp(38px,4vw,58px);
  line-height:.98;
  margin:0;
}
.bo-admin-subtitle{margin:12px 0 0;color:#334155;font-size:15px}
.bo-admin-actions{align-self:center;gap:14px}
.bo-admin-user{background:transparent;border:0;box-shadow:none;color:#667085;padding:0}
.bo-admin-logout{
  min-height:44px;
  border-radius:12px;
  border:1px solid rgba(17,17,17,.08);
  background:#fff;
  color:#111;
  padding:0 20px;
  box-shadow:0 12px 30px -24px rgba(17,17,17,.7);
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
}
.bo-admin-actions .bo-admin-logout:last-child{background:#111;color:#fff;border-color:#111}
.bo-admin-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}
.bo-admin-card{
  min-height:162px;
  border-radius:20px;
  padding:28px 28px 22px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(17,17,17,.08);
  box-shadow:0 18px 60px -45px rgba(17,17,17,.55);
}
.bo-admin-card.is-primary{background:linear-gradient(135deg,#111,#2a241d)}
.bo-admin-card.is-alert{background:#fff;border-color:rgba(244,63,94,.13)}
.bo-kpi-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  background:rgba(242,182,25,.18);
  color:#f2b619;
  font-size:22px;
}
.bo-kpi-icon.is-green{background:#dff7e8;color:#16834e}
.bo-kpi-icon.is-blue{background:#dbeafe;color:#2563eb}
.bo-kpi-icon.is-red{background:#ffe0e0;color:#ef4444}
.bo-admin-card-label{position:absolute;left:90px;top:40px;color:#111827;font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}
.bo-admin-card.is-primary .bo-admin-card-label{color:#fff}
.bo-admin-card-value{font-family:'Jost','Cairo',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.03em;margin-top:2px}
.bo-admin-card-note{font-size:14px;color:#667085;margin-top:8px}
.bo-admin-card.is-primary .bo-admin-card-note{color:#fff}
.bo-admin-panel,
.bo-orders-board,
.bo-crm-board,
.bo-admin-products-shell > div{
  border-radius:20px !important;
  border:1px solid rgba(17,17,17,.08) !important;
  box-shadow:0 22px 70px -52px rgba(17,17,17,.42) !important;
}
.bo-admin-panel-title,
.bo-order-detail-title,
.bo-crm-profile-title{
  font-family:'Jost','Cairo',sans-serif;
  font-weight:700;
  letter-spacing:-.025em;
  font-size:22px;
}
.bo-admin-panel-grid{grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.bo-admin-empty{min-height:72px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fbfffb,#fff);border-color:#cfe6d6;color:#667085}
.bo-admin-row{border-radius:14px;padding:16px 18px}
.bo-pipeline-panel{margin-bottom:18px}
.bo-admin-status-grid{display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;padding:14px 12px}
.bo-admin-status-grid::before{content:'';position:absolute;left:8%;right:8%;top:50%;height:1px;background:#e5e7eb;z-index:0}
.bo-admin-status{position:relative;z-index:1;min-width:90px;border:0;background:transparent;text-align:center;padding:0}
.bo-admin-status strong{
  width:54px;height:54px;border-radius:999px;background:#fff3d8;color:#111;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
  border:1px solid rgba(242,182,25,.18);font-size:18px;
}
.bo-admin-status:nth-child(2) strong{background:#e5f0ff;color:#2563eb}
.bo-admin-status:nth-child(3) strong{background:#efe7ff;color:#7c3aed}
.bo-admin-status:nth-child(4) strong{background:#e4f8eb;color:#16834e}
.bo-admin-status:nth-child(5) strong{background:#ffe3e3;color:#ef4444}
.bo-admin-status span{font-size:12px;text-transform:none;letter-spacing:0;color:#111827;font-weight:600}
.bo-quick-actions{margin-bottom:18px}
.bo-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bo-quick-grid button{
  min-height:128px;border:1px solid #e5e7eb;background:#fff;border-radius:16px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bo-quick-grid button:hover{transform:translateY(-2px);box-shadow:0 18px 34px -28px rgba(17,17,17,.55);border-color:#d6d6d6}
.bo-quick-grid span{width:42px;height:42px;border-radius:12px;background:#eef6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:22px}
.bo-quick-grid span.is-green{background:#dcfce7;color:#16a34a}
.bo-quick-grid span.is-blue{background:#e5f0ff;color:#2563eb}
.bo-quick-grid span.is-purple{background:#f3e8ff;color:#7c3aed}
.bo-quick-grid strong{font-size:14px;color:#111827}
.bo-quick-grid em{font-style:normal;font-size:12px;line-height:1.35;color:#667085}
.bo-admin-products-shell{grid-template-columns:1fr 1fr;gap:24px}
#qc-admin-form input,
#qc-admin-form textarea,
#qc-admin-form select{border-radius:9px !important;background:#fff !important;border-color:#e5e7eb !important}
#qc-admin-form button{border-radius:10px !important;background:#111 !important;color:#fff !important}
@media(max-width:1180px){
  .bo-admin-layout{grid-template-columns:1fr}.bo-admin-sidebar{position:static;min-height:auto}.bo-side-menu{display:grid;grid-template-columns:repeat(4,1fr)}.bo-side-help{display:none}.bo-admin-grid{grid-template-columns:repeat(2,1fr)}.bo-quick-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .bo-admin-shell{padding:12px}.bo-side-menu{grid-template-columns:1fr 1fr}.bo-admin-hero{align-items:flex-start;flex-direction:column}.bo-admin-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.bo-admin-user{grid-column:1/-1}.bo-admin-grid,.bo-admin-panel-grid,.bo-admin-products-shell,.bo-quick-grid{grid-template-columns:1fr}.bo-admin-card-label{position:static;margin-bottom:12px}.bo-kpi-icon{margin-bottom:12px}.bo-admin-status-grid{display:grid;grid-template-columns:repeat(2,1fr)}.bo-admin-status-grid::before{display:none}
}

/* ============================
   STAGE 8 — DASHBOARD INFORMATION ARCHITECTURE
   Makes the dashboard understandable in the first 5 seconds:
   1) Start-here strip, 2) readable sidebar labels, 3) stronger visual hierarchy.
============================ */
.bo-admin-shell{
  background:
    radial-gradient(circle at top left, rgba(242,182,25,.10), transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#fffaf4 60%,#fff7ec 100%);
}
.bo-admin-layout{gap:26px;grid-template-columns:250px minmax(0,1fr)}
.bo-admin-sidebar{border-radius:22px;padding:16px;top:96px}
.bo-side-menu{gap:8px}
.bo-side-item{min-height:58px;padding:8px 12px;align-items:center;position:relative}
.bo-side-item span{width:34px;height:34px;border-radius:12px;flex:0 0 auto}
.bo-side-item strong{display:block;font-size:14px;line-height:1.1}
.bo-side-item small{display:block;font-size:11px;color:#8a94a3;margin-top:3px;font-weight:400;line-height:1.1}
.bo-side-item.is-active small{color:rgba(255,255,255,.68)}
.bo-admin-hero{
  background:rgba(255,255,255,.76);
  border:1px solid rgba(17,17,17,.06);
  border-radius:24px;
  padding:24px 26px;
  box-shadow:0 20px 80px -62px rgba(17,17,17,.45);
}
.bo-admin-title{font-size:clamp(34px,3.35vw,52px)}
.bo-admin-subtitle{max-width:520px}
.bo-focus-strip{
  display:grid;
  grid-template-columns:minmax(280px,1.15fr) repeat(3,minmax(150px,.7fr));
  gap:14px;
  margin:0 0 18px;
}
.bo-focus-copy,
.bo-focus-card{
  min-height:112px;
  border-radius:20px;
  border:1px solid rgba(17,17,17,.08);
  background:#fff;
  box-shadow:0 20px 65px -50px rgba(17,17,17,.50);
}
.bo-focus-copy{padding:22px 24px;display:flex;flex-direction:column;justify-content:center}
.bo-focus-copy span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#16834e;font-weight:700;margin-bottom:8px}
.bo-focus-copy strong{font-size:21px;letter-spacing:-.02em;color:#111827}
.bo-focus-copy em{font-style:normal;color:#667085;font-size:13px;margin-top:6px}
.bo-focus-card{
  cursor:pointer;
  padding:18px;
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:auto auto;
  column-gap:14px;
  text-align:left;
  align-items:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bo-focus-card:hover{transform:translateY(-2px);border-color:rgba(242,182,25,.38);box-shadow:0 24px 74px -48px rgba(17,17,17,.55)}
.bo-focus-icon{grid-row:1/3;width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#f6edd0;color:#ad7800;font-size:20px}
.bo-focus-icon.is-blue{background:#e5f0ff;color:#2563eb}
.bo-focus-icon.is-red{background:#ffe3e3;color:#ef4444}
.bo-focus-icon.is-green{background:#dcfce7;color:#16a34a}
.bo-focus-card strong{font-size:23px;line-height:1;color:#111827}
.bo-focus-card em{font-style:normal;color:#667085;font-size:12.5px;margin-top:4px}
.bo-admin-grid{margin-bottom:18px}
.bo-admin-card{min-height:148px;border-radius:22px}
.bo-admin-panel{padding:24px !important}
.bo-admin-panel-head{margin-bottom:18px}
.bo-admin-panel-title{font-size:21px}
.bo-admin-empty{border-style:dashed;border-radius:15px;min-height:96px;text-align:center;padding:18px}
.bo-quick-actions{order:6}
.bo-quick-grid button{min-height:112px}
@media(max-width:1180px){
  .bo-admin-layout{grid-template-columns:1fr}
  .bo-focus-strip{grid-template-columns:1fr 1fr}
  .bo-side-item small{display:none}
}
@media(max-width:720px){
  .bo-admin-hero{padding:20px;border-radius:18px}
  .bo-focus-strip{grid-template-columns:1fr}
  .bo-focus-card{min-height:92px}
  .bo-admin-layout{gap:16px}
}

/* ============================
   STAGE 9 — FULL ADMIN UX ORGANIZATION
   Unifies Products, Orders, CRM, Settings, and Users into one clear dashboard language.
============================ */
.bo-section-kicker{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#16834e;font-weight:800;margin-bottom:8px}
.bo-orders-board,.bo-crm-board,.bo-settings-board{
  margin-top:24px;background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:24px;padding:26px;box-shadow:0 22px 70px -58px rgba(17,17,17,.55)
}
.bo-orders-toolbar,.bo-crm-toolbar,.bo-settings-hero,.bo-team-head{
  background:linear-gradient(135deg,#fff 0%,#fffaf1 100%);border:1px solid rgba(17,17,17,.06);border-radius:20px;padding:20px 22px;margin-bottom:20px
}
.bo-orders-toolbar h3,.bo-crm-toolbar h3,.bo-team-head h3,.bo-settings-hero h3{font-family:Inter,'Cairo',sans-serif;font-weight:800;letter-spacing:-.03em;font-size:24px}
.bo-orders-filters button{border-radius:999px;padding:9px 14px;font-weight:700}
.bo-orders-layout,.bo-crm-layout{gap:20px}
.bo-order-card,.bo-customer-card{border-radius:16px;border:1px solid #edf0ed;background:#fff;padding:16px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.bo-order-card:hover,.bo-customer-card:hover,.bo-order-card.is-selected,.bo-customer-card.is-selected{transform:translateY(-1px);border-color:rgba(242,182,25,.5);box-shadow:0 18px 46px -36px rgba(17,17,17,.55)}
.bo-order-detail,.bo-crm-profile{border-radius:20px;background:#fbfcfb;border:1px solid #edf0ed;padding:20px;position:sticky;top:108px}
.bo-crm-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px}
.bo-crm-stat{border:1px solid #edf0ed;border-radius:16px;background:#fff;padding:16px;text-align:center}
.bo-crm-stat strong{display:block;font-size:24px;color:#111827;margin-bottom:4px}.bo-crm-stat span{font-size:12px;color:#667085}
.bo-admin-products-shell>div{border-radius:24px!important;border-color:rgba(17,17,17,.08)!important;box-shadow:0 22px 70px -58px rgba(17,17,17,.55)}
.bo-admin-products-shell h3{font-family:Inter,'Cairo',sans-serif!important;font-weight:800!important;letter-spacing:-.03em!important}
.bo-settings-board{scroll-margin-top:110px}
.bo-settings-hero{display:flex;align-items:center;justify-content:space-between;gap:20px}
.bo-settings-hero p,.bo-team-head p{margin:8px 0 0;color:#667085;font-size:14px;line-height:1.55}
.bo-settings-health{min-width:230px;background:#111;color:#fff;border-radius:18px;padding:16px;display:grid;gap:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.bo-settings-health .bo-admin-status-dot{display:inline-block}.bo-settings-health strong{font-size:15px}.bo-settings-health em{font-style:normal;font-size:12px;color:rgba(255,255,255,.68)}
.bo-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.bo-settings-card{border:1px solid #edf0ed;border-radius:18px;background:#fff;padding:18px;display:grid;gap:9px;min-height:150px}
.bo-settings-card strong{font-size:16px;color:#111827}.bo-settings-card p{margin:0;color:#667085;font-size:13px;line-height:1.55}
.bo-settings-icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#dcfce7;color:#16a34a;font-weight:800}.bo-settings-icon.is-gold{background:#fff3d8;color:#ad7800}.bo-settings-icon.is-blue{background:#e5f0ff;color:#2563eb}
.bo-team-board{border:1px solid #edf0ed;border-radius:22px;padding:20px;background:#fbfcfb}.bo-team-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;background:#fff;margin-bottom:18px}.bo-team-count{background:#111;color:#fff;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:800;white-space:nowrap}
.bo-team-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}.bo-team-form{background:#fff;border:1px solid #edf0ed;border-radius:20px;padding:18px;display:grid;gap:12px}.bo-form-title{display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:center;margin-bottom:4px}.bo-form-title span{grid-row:1/3;width:42px;height:42px;border-radius:14px;background:#dcfce7;color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:20px}.bo-form-title span.is-gold{background:#fff3d8;color:#ad7800}.bo-form-title strong{font-size:17px}.bo-form-title em{font-style:normal;color:#667085;font-size:12px}
.bo-team-form label{display:grid;gap:7px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#667085;font-weight:700}.bo-team-form input,.bo-team-form select{width:100%;border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:12px 13px;font-size:14px;color:#111827;outline:none;text-transform:none;letter-spacing:0}.bo-team-form input:focus,.bo-team-form select:focus{border-color:rgba(242,182,25,.65);box-shadow:0 0 0 4px rgba(242,182,25,.12)}
.bo-team-form button{border:0;border-radius:12px;background:#111;color:#fff;padding:13px 15px;font-weight:800;cursor:pointer}.bo-team-form button.is-gold{background:#eab308;color:#111}.bo-permission-box{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:1px dashed #d9e4d6;border-radius:16px;padding:12px;background:#fbfcfb;max-height:220px;overflow:auto}.bo-permission-box label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:12px;color:#374151;font-weight:600}.bo-permission-box input{width:16px;height:16px;accent-color:#111;padding:0}.bo-staff-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:16px}.bo-staff-chip{border:1px solid #edf0ed;border-radius:16px;background:#fff;padding:12px;display:grid;grid-template-columns:38px 1fr;column-gap:10px;align-items:center}.bo-staff-chip span{grid-row:1/3;width:38px;height:38px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}.bo-staff-chip strong{font-size:14px}.bo-staff-chip em{font-style:normal;font-size:12px;color:#667085}
.bo-quick-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.bo-quick-grid span.is-gold{background:#fff3d8;color:#ad7800}
@media(max-width:1180px){.bo-settings-grid{grid-template-columns:1fr}.bo-team-layout{grid-template-columns:1fr}.bo-quick-grid{grid-template-columns:repeat(2,1fr)}.bo-settings-hero{align-items:flex-start;flex-direction:column}.bo-settings-health{width:100%}.bo-crm-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.bo-orders-board,.bo-crm-board,.bo-settings-board{padding:16px;border-radius:18px}.bo-orders-toolbar,.bo-crm-toolbar,.bo-settings-hero,.bo-team-head{padding:16px;border-radius:16px}.bo-team-head{flex-direction:column}.bo-permission-box{grid-template-columns:1fr}.bo-crm-summary{grid-template-columns:1fr}.bo-quick-grid{grid-template-columns:1fr}}

/* ============================
   STAGE 10 — ADMIN INFORMATION ARCHITECTURE
   The dashboard is now organized like a real store OS: Catalog, Sales,
   Customers, Marketing, Reports, and System. These styles improve clarity
   without changing working backend behavior.
============================ */
.bo-stage10-sidebar{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(17,17,17,.08);
  box-shadow:0 24px 80px -60px rgba(17,17,17,.52);
}
.bo-side-brand-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  margin-bottom:14px;
  border-radius:18px;
  background:linear-gradient(135deg,#111,#2b241c);
  color:#fff;
}
.bo-side-brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f2b619,#8a5a00);
  color:#111;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.bo-side-brand-card strong{display:block;font-size:14px;letter-spacing:.01em}
.bo-side-brand-card small{display:block;margin-top:3px;color:rgba(255,255,255,.65);font-size:11px}
.bo-nav-group{display:grid;gap:7px;margin-bottom:14px}
.bo-nav-group-title{
  padding:0 9px;
  font-size:10px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9aa3af;
  font-weight:900;
}
.bo-stage10-sidebar .bo-side-item{
  border-radius:14px;
  background:transparent;
  border:1px solid transparent;
}
.bo-stage10-sidebar .bo-side-item:hover{
  background:#fffaf0;
  border-color:rgba(242,182,25,.18);
  transform:translateX(2px);
}
.bo-stage10-sidebar .bo-side-item.is-active{
  background:linear-gradient(135deg,#111,#2b241c);
  border-color:#111;
}
.bo-admin-command-center{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:18px;
  margin:0 0 18px;
}
.bo-command-copy,
.bo-command-map{
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  border-radius:24px;
  box-shadow:0 20px 70px -54px rgba(17,17,17,.5);
}
.bo-command-copy{
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.bo-command-copy span,
.bo-workspace-label span{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#16834e;
  font-weight:900;
  margin-bottom:8px;
}
.bo-command-copy strong,
.bo-workspace-label strong{
  display:block;
  color:#111827;
  font-size:22px;
  line-height:1.16;
  letter-spacing:-.03em;
  font-weight:850;
}
.bo-command-copy em,
.bo-workspace-label em{
  display:block;
  margin-top:8px;
  color:#667085;
  font-style:normal;
  font-size:13.5px;
  line-height:1.55;
}
.bo-command-map{
  padding:14px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.bo-command-map button{
  min-height:124px;
  border:1px solid #edf0ed;
  background:linear-gradient(180deg,#fff,#fffdf9);
  border-radius:18px;
  cursor:pointer;
  padding:16px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bo-command-map button:hover{
  transform:translateY(-2px);
  border-color:rgba(242,182,25,.48);
  box-shadow:0 20px 50px -42px rgba(17,17,17,.65);
}
.bo-command-map span{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef6ff;
  color:#2563eb;
  font-size:19px;
  font-weight:900;
}
.bo-command-map span.is-gold{background:#fff3d8;color:#ad7800}
.bo-command-map span.is-blue{background:#e5f0ff;color:#2563eb}
.bo-command-map span.is-green{background:#dcfce7;color:#16a34a}
.bo-command-map span.is-purple{background:#f3e8ff;color:#7c3aed}
.bo-command-map span.is-red{background:#ffe3e3;color:#ef4444}
.bo-command-map strong{font-size:15px;color:#111827;line-height:1.1}
.bo-command-map em{font-style:normal;font-size:12px;color:#667085;line-height:1.35}
.bo-workspace-label{
  margin:26px 0 14px;
  padding:20px 22px;
  border-radius:22px;
  border:1px solid rgba(17,17,17,.08);
  background:linear-gradient(135deg,#fff,#fff8ea);
  box-shadow:0 18px 60px -52px rgba(17,17,17,.45);
}
.bo-admin-products-shell,
.bo-orders-board,
.bo-crm-board,
.bo-settings-board{
  scroll-margin-top:110px;
}
.bo-admin-panel-head a,
.bo-command-map button,
.bo-side-item{
  -webkit-tap-highlight-color:transparent;
}
@media(max-width:1180px){
  .bo-side-brand-card{display:none}
  .bo-nav-group{margin-bottom:8px}
  .bo-nav-group-title{grid-column:1/-1;margin-top:5px}
  .bo-admin-command-center{grid-template-columns:1fr}
  .bo-command-map{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .bo-command-copy,.bo-command-map,.bo-workspace-label{border-radius:18px}
  .bo-command-map{grid-template-columns:1fr 1fr}
  .bo-command-map button{min-height:108px;padding:14px}
  .bo-workspace-label{padding:16px}
}
@media(max-width:480px){
  .bo-command-map{grid-template-columns:1fr}
}

/* ===================== STAGE 11: CATALOG UX ===================== */
.bo-section-kicker{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a988b;font-weight:800;margin-bottom:8px}
.bo-catalog-command{display:grid;grid-template-columns:1.35fr .9fr;gap:18px;margin:0 0 18px;scroll-margin-top:110px}
.bo-catalog-brief,.bo-catalog-categories,.bo-catalog-editor,.bo-catalog-products{background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:24px;box-shadow:0 22px 70px -58px rgba(17,17,17,.55)}
.bo-catalog-brief{padding:24px}
.bo-catalog-brief h2,.bo-catalog-headline h3,.bo-catalog-card-head h3{font-family:Inter,'Cairo',sans-serif!important;font-weight:900!important;letter-spacing:-.045em;color:#111827;margin:0}
.bo-catalog-brief h2{font-size:28px;line-height:1.05;margin-bottom:10px}
.bo-catalog-brief p,.bo-catalog-card-head p{margin:0;color:#667085;line-height:1.6;font-size:14px}
.bo-catalog-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bo-catalog-stat{border:1px solid rgba(17,17,17,.08);background:#fff;border-radius:22px;padding:18px;text-align:left;cursor:pointer;box-shadow:0 18px 55px -48px rgba(17,17,17,.5)}
.bo-catalog-stat span{width:42px;height:42px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:#fff3d8;color:#ad7800;font-weight:900;margin-bottom:14px}.bo-catalog-stat span.is-red{background:#ffe4e6;color:#e11d48}.bo-catalog-stat span.is-green{background:#dcfce7;color:#16a34a}
.bo-catalog-stat strong{display:block;font-size:25px;color:#111827;margin-bottom:4px}.bo-catalog-stat em{font-style:normal;font-size:12px;color:#667085}
.bo-catalog-categories{padding:22px;margin-bottom:18px}.bo-catalog-headline{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:16px}.bo-catalog-headline small{color:#8a988b}
.bo-category-card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.bo-category-card{border:1px solid rgba(17,17,17,.08);border-radius:18px;background:#fbfcfa;padding:16px;text-align:left;cursor:pointer;transition:.2s ease}.bo-category-card:hover{transform:translateY(-2px)}.bo-category-card.is-active{background:#171412;color:#fff;box-shadow:0 20px 50px -38px rgba(0,0,0,.6)}
.bo-category-card span{width:36px;height:36px;border-radius:13px;background:#fff3d8;color:#ad7800;display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:12px}.bo-category-card.is-active span{background:#f2b619;color:#171412}.bo-category-card strong{display:block;font-size:14px}.bo-category-card em{display:block;font-style:normal;font-size:12px;color:#667085;margin-top:4px}.bo-category-card.is-active em{color:#e8e2d4}
.bo-catalog-grid{display:grid;grid-template-columns:minmax(360px,.85fr) minmax(520px,1.15fr);gap:18px;scroll-margin-top:110px}.bo-catalog-editor,.bo-catalog-products{padding:22px}.bo-catalog-card-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px;align-items:flex-start}.bo-count-pill{border:1px solid rgba(17,17,17,.08);border-radius:999px;padding:8px 12px;background:#fbfcfa;color:#667085;font-size:12px;font-weight:800;white-space:nowrap}.bo-catalog-secondary{border:1px solid rgba(17,17,17,.1);background:#fff;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:800;cursor:pointer}.bo-catalog-primary{width:100%;background:#111;color:#fff;border:0;border-radius:14px;padding:15px 18px;font-weight:900;letter-spacing:.02em;cursor:pointer;margin-top:16px}.bo-catalog-primary:hover{background:#1B5E3A}
.bo-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.bo-form-grid.is-one{grid-template-columns:1fr}.bo-form-grid.is-three{grid-template-columns:repeat(3,1fr)}.bo-field{display:flex;flex-direction:column;gap:7px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a988b;font-weight:800}.bo-field input,.bo-field select,.bo-field textarea{border:1px solid #d9e4d6;background:#f7faf5;border-radius:12px;padding:12px 13px;font-size:14px;color:#111827;outline:none;letter-spacing:0;text-transform:none;font-weight:500}.bo-field textarea{resize:vertical;line-height:1.55}.bo-field input:focus,.bo-field select:focus,.bo-field textarea:focus{border-color:#1B5E3A;box-shadow:0 0 0 3px rgba(27,94,58,.08)}.bo-field.is-area{margin-bottom:12px}
.bo-upload-row{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:stretch;margin:12px 0}.bo-upload-preview{border:1px solid #d9e4d6;background:#f7faf5;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}.bo-upload-preview img{width:100%;height:100%;object-fit:contain;padding:6px}.bo-upload-preview span{font-size:11px;color:#a3b0a4;letter-spacing:.14em}.bo-upload-drop{border:1px dashed #c2d4be;border-radius:16px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;color:#5d6b5f;cursor:pointer;background:#fbfcfa}.bo-upload-drop small{color:#98a2b3}.bo-upload-drop input{display:none}.bo-checkbox-line{display:flex;gap:10px;align-items:center;color:#5d6b5f;font-size:13px;margin-top:8px}.bo-checkbox-line input{accent-color:#1B5E3A}.bo-form-error{background:#fef2f2;color:#b42318;border:1px solid #fee4e2;border-radius:12px;padding:11px 13px;font-size:13px;margin-top:12px}
.bo-catalog-toolbar{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-bottom:14px}.bo-search-box{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a988b;font-weight:800}.bo-search-box input{border:1px solid #d9e4d6;background:#f7faf5;border-radius:14px;padding:13px 14px;font-size:14px;min-width:260px;outline:none}.bo-line-filters{display:flex;gap:8px;flex-wrap:wrap}.bo-line-filter{border:1px solid rgba(17,17,17,.1);background:#fff;border-radius:999px;padding:10px 13px;font-size:12px;font-weight:800;cursor:pointer;color:#344054}.bo-line-filter.is-active{background:#111;color:#fff;border-color:#111}
.bo-product-table{border:1px solid rgba(17,17,17,.08);border-radius:18px;overflow:hidden}.bo-product-table-head,.bo-product-table-row{display:grid;grid-template-columns:minmax(230px,1.5fr) .8fr .75fr .65fr .8fr;gap:12px;align-items:center}.bo-product-table-head{background:#fbfcfa;padding:13px 16px;color:#667085;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:900}.bo-product-table-row{padding:14px 16px;border-top:1px solid rgba(17,17,17,.06)}.bo-product-name-cell{display:flex;align-items:center;gap:12px;min-width:0}.bo-product-name-cell strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111827}.bo-product-name-cell em{display:block;font-style:normal;color:#98a2b3;font-size:12px;margin-top:3px}.bo-product-thumb{width:48px;height:48px;border-radius:14px;background:#f4f7f2;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.bo-product-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}.bo-soft-pill,.bo-stock-pill{display:inline-flex;align-items:center;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900}.bo-soft-pill{background:#f2f4f7;color:#344054}.bo-stock-pill.is-good{background:#dcfce7;color:#15803d}.bo-stock-pill.is-low{background:#fff3d8;color:#ad7800}.bo-stock-pill.is-out{background:#ffe4e6;color:#e11d48}.bo-product-price{font-weight:900;color:#111827}.bo-product-actions{display:flex;gap:8px;justify-content:flex-end}.bo-product-actions button{border:1px solid rgba(17,17,17,.1);background:#fff;border-radius:10px;padding:9px 10px;font-size:12px;font-weight:900;cursor:pointer}.bo-product-actions button.is-danger{background:#fff1f2;color:#e11d48;border-color:#ffe4e6}.bo-table-empty{padding:28px;text-align:center;color:#667085;background:#fbfcfa}
@media(max-width:1180px){.bo-catalog-command,.bo-catalog-grid{grid-template-columns:1fr}.bo-category-card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.bo-catalog-stat-grid,.bo-category-card-grid,.bo-form-grid,.bo-form-grid.is-three{grid-template-columns:1fr}.bo-catalog-toolbar{grid-template-columns:1fr}.bo-product-table-head{display:none}.bo-product-table-row{grid-template-columns:1fr;gap:10px}.bo-product-actions{justify-content:flex-start}.bo-catalog-card-head,.bo-catalog-headline{flex-direction:column;align-items:flex-start}.bo-search-box input{min-width:0;width:100%}}

/* ============================
   STAGE 12 — SALES & CRM OPERATING UX
   Makes Orders and Customers understandable in the first 5 seconds.
============================ */
.bo-stage12-command{
  margin-top:22px;
  background:linear-gradient(135deg,#171412 0%,#24201c 68%,#3b301f 100%);
  color:#fff;
  border-radius:28px;
  padding:24px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 28px 70px -50px rgba(17,17,17,.75);
}
.bo-stage12-command.is-crm{
  background:linear-gradient(135deg,#0f2a1b 0%,#1b3b28 70%,#2d4a31 100%);
}
.bo-stage12-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.bo-stage12-head h3{
  margin:5px 0 6px;
  font-family:Inter,'Cairo',sans-serif;
  font-size:28px;
  line-height:1.1;
  letter-spacing:-.04em;
  font-weight:850;
}
.bo-stage12-head p{
  margin:0;
  color:rgba(255,255,255,.72);
  max-width:720px;
  font-size:14px;
  line-height:1.6;
}
.bo-stage12-primary{
  border:0;
  border-radius:16px;
  background:#F2B619;
  color:#171412;
  padding:13px 18px;
  font-weight:850;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 18px 34px -24px rgba(242,182,25,.9);
}
.bo-stage12-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.bo-stage12-metrics.is-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.bo-stage12-metric{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:88px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:16px;
  backdrop-filter:blur(10px);
}
.bo-stage12-metric > span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#fff;
  color:#171412;
  font-weight:900;
}
.bo-stage12-metric > span.is-gold{background:#F2B619;color:#171412}
.bo-stage12-metric > span.is-green{background:#DCFCE7;color:#166534}
.bo-stage12-metric > span.is-blue{background:#DBEAFE;color:#1D4ED8}
.bo-stage12-metric > span.is-red{background:#FEE2E2;color:#B91C1C}
.bo-stage12-metric strong{
  display:block;
  color:#fff;
  font-size:24px;
  line-height:1;
  font-weight:900;
}
.bo-stage12-metric em{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.64);
  font-size:11px;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.bo-stage12-pipeline{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.bo-stage12-step{
  position:relative;
  min-height:104px;
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.96);
  color:#171412;
  border:1px solid rgba(255,255,255,.28);
}
.bo-stage12-step.is-active{outline:3px solid rgba(242,182,25,.45)}
.bo-stage12-step span{
  display:block;
  font-size:22px;
  margin-bottom:10px;
}
.bo-stage12-step strong{
  display:block;
  font-size:13px;
  margin-bottom:6px;
}
.bo-stage12-step em{
  font-size:22px;
  font-style:normal;
  font-weight:900;
}
.bo-stage12-note{
  margin-top:10px;
  border:1px dashed rgba(46,125,79,.24);
  background:#F7FAF5;
  color:#566458;
  border-radius:14px;
  padding:10px 12px;
  font-size:12px;
  line-height:1.55;
}
.bo-stage12-journey{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.bo-stage12-journey article{
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.25);
  color:#171412;
}
.bo-stage12-journey strong{
  display:block;
  font-size:14px;
  margin-bottom:7px;
}
.bo-stage12-journey em{
  color:#6b766d;
  font-size:12px;
  line-height:1.5;
  font-style:normal;
}
.bo-orders-board,.bo-crm-board{
  border-radius:26px;
  border-color:#edf0ed;
}
.bo-orders-toolbar,.bo-crm-toolbar{
  padding:4px 2px 18px;
  border-bottom:1px solid #eef2ee;
}
.bo-order-card,.bo-customer-card{
  min-height:76px;
}
.bo-order-detail,.bo-crm-profile{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
@media(max-width:1100px){
  .bo-stage12-metrics,.bo-stage12-metrics.is-five,.bo-stage12-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bo-stage12-journey{grid-template-columns:1fr}
}
@media(max-width:640px){
  .bo-stage12-command{padding:18px;border-radius:20px}
  .bo-stage12-head h3{font-size:22px}
  .bo-stage12-metrics,.bo-stage12-metrics.is-five,.bo-stage12-pipeline{grid-template-columns:1fr}
  .bo-stage12-metric{min-height:auto}
  .bo-stage12-primary{width:100%}
}

/* ===================== Stage 13: Settings, Users, Roles, Security ===================== */
.bo-stage13-system{display:flex;flex-direction:column;gap:22px;margin-top:18px}
.bo-stage13-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px;border-radius:28px;background:linear-gradient(135deg,#17251d 0%,#22382b 52%,#f4efe5 52%,#fffaf0 100%);color:#fff;box-shadow:0 24px 70px rgba(16,38,24,.14)}
.bo-stage13-hero h3{margin:8px 0 8px;font-size:30px;line-height:1.05;font-family:'Playfair Display','Cairo',serif;font-weight:600}
.bo-stage13-hero p{margin:0;max-width:720px;color:rgba(255,255,255,.78);font-size:14px;line-height:1.7}
.bo-stage13-health{min-width:210px;background:rgba(255,255,255,.92);color:#1f1d1a;border:1px solid rgba(255,255,255,.45);border-radius:22px;padding:18px;box-shadow:0 16px 40px rgba(0,0,0,.12)}
.bo-stage13-health strong{display:block;text-transform:capitalize;font-size:18px;margin:7px 0 3px}.bo-stage13-health em{font-style:normal;color:#657468;font-size:12px}
.bo-stage13-grid.is-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bo-stage13-card{background:#fff;border:1px solid #edf0ed;border-radius:22px;padding:20px;min-height:160px;box-shadow:0 16px 45px rgba(16,38,24,.05)}
.bo-stage13-card span{display:grid;place-items:center;width:42px;height:42px;border-radius:16px;margin-bottom:16px;background:#f3f7f2}.bo-stage13-card span.is-green{background:#eaf5ed;color:#2e7d4f}.bo-stage13-card span.is-blue{background:#edf5ff;color:#2d639b}.bo-stage13-card span.is-gold{background:#fff5df;color:#b8860b}.bo-stage13-card span.is-red{background:#fff0ed;color:#ba4d38}
.bo-stage13-card strong{display:block;font-size:15px;color:#1f1d1a;margin-bottom:7px}.bo-stage13-card p{margin:0 0 14px;color:#6f7c71;font-size:13px;line-height:1.55}.bo-stage13-card em{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#9aa69c}
.bo-stage13-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.bo-stage13-layout.is-wide-right{grid-template-columns:.85fr 1.15fr}.bo-stage13-layout.is-wide-left{grid-template-columns:1.2fr .8fr}
.bo-stage13-panel{background:#fff;border:1px solid #edf0ed;border-radius:26px;padding:22px;box-shadow:0 18px 55px rgba(16,38,24,.055)}
.bo-stage13-panel-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:18px}.bo-stage13-panel-head h4{margin:6px 0 0;color:#1f1d1a;font-size:20px;font-family:'Playfair Display','Cairo',serif}.bo-stage13-panel-head small{color:#9ba89d;text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.bo-stage13-settings-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bo-stage13-settings-map article{border:1px solid #eef2ee;background:#fbfcfa;border-radius:18px;padding:16px}.bo-stage13-settings-map strong{display:block;color:#1f1d1a;margin-bottom:5px}.bo-stage13-settings-map span{font-size:12px;color:#7a867c;line-height:1.5}
.bo-stage13-checklist{display:flex;flex-direction:column;gap:10px}.bo-stage13-check{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;border:1px solid #eef2ee;border-radius:16px;padding:12px;background:#fbfcfa}.bo-stage13-check span{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;font-weight:700}.bo-stage13-check span.is-ok{background:#eaf5ed;color:#2e7d4f}.bo-stage13-check span.is-warn{background:#fff0ed;color:#ba4d38}.bo-stage13-check strong{font-size:13px;color:#1f1d1a}.bo-stage13-check em{font-style:normal;font-size:11px;color:#7e8a80}
.bo-stage13-form{display:grid;gap:12px}.bo-stage13-form label{display:flex;flex-direction:column;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8a988b}.bo-stage13-form input,.bo-stage13-form select{border:1px solid #d9e4d6;background:#f7faf5;border-radius:13px;padding:12px 13px;font-size:14px;color:#1f1d1a;outline:none;text-transform:none;letter-spacing:0}.bo-stage13-form button{border:0;border-radius:15px;padding:13px 16px;background:#1f2e24;color:#fff;font-weight:700;cursor:pointer}.bo-stage13-form button.is-gold{background:#b8860b}
.bo-stage13-staff-table{display:flex;flex-direction:column;gap:9px}.bo-stage13-table-head,.bo-stage13-staff-table article{display:grid;grid-template-columns:1.4fr .7fr .45fr;gap:12px;align-items:center}.bo-stage13-table-head{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#a0aaa2;padding:0 8px}.bo-stage13-staff-table article{padding:12px;border:1px solid #eef2ee;background:#fbfcfa;border-radius:18px}.bo-stage13-staff-table div{display:grid;grid-template-columns:38px 1fr;column-gap:10px}.bo-stage13-staff-table b{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:14px;background:#eaf5ed;color:#2e7d4f}.bo-stage13-staff-table strong{font-size:13px;color:#1f1d1a}.bo-stage13-staff-table em{font-style:normal;font-size:11px;color:#8b978e}.bo-stage13-staff-table span{font-size:12px;color:#5e6b61}.bo-stage13-staff-table small{justify-self:start;border-radius:999px;padding:5px 10px;background:#eaf5ed;color:#2e7d4f;font-weight:700}
.bo-stage13-permissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:4px 0}.bo-stage13-permissions label{display:flex;flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;border:1px solid #edf1ed;border-radius:14px;padding:10px;background:#fbfcfa;color:#445047}.bo-stage13-permissions input{width:auto}.bo-stage13-permissions span{font-size:12px;line-height:1.4}
.bo-stage13-backup{display:grid;gap:12px}.bo-stage13-backup article{display:flex;gap:12px;border:1px solid #eef2ee;background:#fbfcfa;border-radius:18px;padding:14px}.bo-stage13-backup span{display:grid;place-items:center;min-width:34px;height:34px;border-radius:999px;background:#fff5df;color:#b8860b;font-weight:800}.bo-stage13-backup strong{display:block;color:#1f1d1a;font-size:13px}.bo-stage13-backup em{font-style:normal;color:#7e897f;font-size:12px;line-height:1.5}
.bo-stage13-activity{display:flex;flex-direction:column;gap:9px}.bo-stage13-activity article{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;border:1px solid #eef2ee;background:#fbfcfa;border-radius:16px;padding:12px}.bo-stage13-activity span{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:#edf5ff;color:#2d639b}.bo-stage13-activity strong{display:block;color:#1f1d1a;font-size:13px}.bo-stage13-activity em{font-style:normal;color:#818d84;font-size:11px}.bo-stage13-activity time{color:#9aa69c;font-size:11px}
@media(max-width:1100px){.bo-stage13-grid.is-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.bo-stage13-layout,.bo-stage13-layout.is-wide-right,.bo-stage13-layout.is-wide-left{grid-template-columns:1fr}.bo-stage13-hero{background:linear-gradient(135deg,#17251d,#22382b);align-items:flex-start;flex-direction:column}.bo-stage13-health{width:100%;box-sizing:border-box}.bo-stage13-staff-table article,.bo-stage13-table-head{grid-template-columns:1fr}}
@media(max-width:640px){.bo-stage13-grid.is-cards,.bo-stage13-settings-map,.bo-stage13-permissions{grid-template-columns:1fr}.bo-stage13-hero{padding:20px;border-radius:22px}.bo-stage13-hero h3{font-size:24px}.bo-stage13-panel{padding:16px;border-radius:20px}.bo-stage13-panel-head{flex-direction:column}.bo-stage13-activity article{grid-template-columns:30px 1fr}.bo-stage13-activity time{grid-column:2}}

/* ===================== STAGE 14 · FINAL PRODUCTION POLISH ===================== */
.bo-stage14-launch-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 20px}.bo-stage14-launch-strip article{position:relative;overflow:hidden;border:1px solid rgba(31,46,36,.08);background:linear-gradient(180deg,#ffffff,#fbfcfa);border-radius:22px;padding:18px;box-shadow:0 16px 38px rgba(31,46,36,.06)}.bo-stage14-launch-strip article:before{content:"";position:absolute;inset:auto -30px -40px auto;width:110px;height:110px;border-radius:50%;background:rgba(184,134,11,.08)}.bo-stage14-launch-strip span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:14px;background:#17251d;color:#f7f4ea;font-size:11px;font-weight:800;letter-spacing:.08em;margin-bottom:12px}.bo-stage14-launch-strip strong{display:block;color:#1f1d1a;font-size:14px;margin-bottom:6px}.bo-stage14-launch-strip em{display:block;font-style:normal;color:#748078;font-size:12px;line-height:1.55}.bo-admin-sidebar{scrollbar-width:thin}.bo-admin-main input,.bo-admin-main select,.bo-admin-main textarea{min-height:42px}.bo-admin-main button{touch-action:manipulation}.bo-admin-panel,.bo-stage13-panel,.bo-stage13-card,.bo-admin-card{backface-visibility:hidden}.bo-admin-empty{line-height:1.7}.bo-product-table,.bo-order-table,.bo-customer-list{overflow-wrap:anywhere}html[dir="rtl"] .bo-admin-sidebar,html[dir="rtl"] .bo-admin-main{text-align:right}html[dir="rtl"] .bo-stage13-activity article,html[dir="rtl"] .bo-stage13-check,html[dir="rtl"] .bo-stage13-staff-table article{direction:rtl}@media(max-width:1180px){.bo-stage14-launch-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.bo-admin-shell{padding-bottom:24px}.bo-admin-layout{display:block}.bo-admin-main{padding:16px!important}.bo-stage14-launch-strip{grid-template-columns:1fr}.bo-admin-hero,.bo-stage13-hero{border-radius:20px}.bo-admin-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.bo-admin-command-center,.bo-stage13-grid.is-cards{gap:10px}.bo-admin-card,.bo-stage13-card,.bo-stage13-panel{box-shadow:0 12px 28px rgba(31,46,36,.06)}.bo-stage13-staff-table article,.bo-stage13-activity article{font-size:13px}.bo-stage13-form input,.bo-stage13-form select,.bo-stage13-form button{width:100%;box-sizing:border-box}}

/* ===================== STAGE 16 · RESPONSIVE ADMIN UX CLARITY =====================
   Goal: make every admin section readable in the first 5 seconds on desktop,
   tablet, and mobile without changing working backend behavior.
===================== */
:root{
  --bo-admin-bg:#fffaf2;
  --bo-admin-card:#ffffff;
  --bo-admin-border:rgba(17,17,17,.085);
  --bo-admin-soft:#f8faf7;
  --bo-admin-text:#111827;
  --bo-admin-muted:#667085;
  --bo-admin-green:#173b27;
  --bo-admin-gold:#f2b619;
}
html{scroll-behavior:smooth;scroll-padding-top:110px}
.bo-admin-shell{background:linear-gradient(180deg,#fff 0%,#fffaf2 48%,#fff7ea 100%)!important}
.bo-admin-layout{grid-template-columns:260px minmax(0,1fr)!important;gap:28px!important;max-width:1540px!important}
.bo-admin-main{min-width:0;overflow:hidden}
.bo-admin-sidebar{top:96px!important;border-radius:26px!important;padding:18px!important;max-height:calc(100vh - 112px);overflow:auto}
.bo-side-menu{gap:10px!important}.bo-nav-group{gap:8px!important;margin-bottom:16px!important}.bo-nav-group-title{margin:6px 0 2px}
.bo-side-item{min-height:54px!important;border:1px solid transparent!important}.bo-side-item strong{white-space:nowrap}.bo-side-item small{display:block;color:#98a2b3;font-size:11px;line-height:1.15}.bo-side-item.is-active small{color:rgba(255,255,255,.62)}
.bo-admin-hero,.bo-admin-command-center,.bo-focus-strip,.bo-catalog-command,.bo-catalog-categories,.bo-catalog-editor,.bo-catalog-products,.bo-orders-board,.bo-crm-board,.bo-stage13-panel,.bo-stage13-card,.bo-admin-panel{border-color:var(--bo-admin-border)!important;box-shadow:0 24px 70px -58px rgba(17,17,17,.48)!important}
.bo-admin-hero{background:#fff;border:1px solid var(--bo-admin-border);border-radius:26px;padding:30px!important;align-items:center!important}.bo-admin-title{font-size:clamp(34px,4vw,56px)!important}.bo-admin-subtitle{max-width:680px;line-height:1.65!important}.bo-admin-actions{display:flex!important;align-items:center!important}.bo-admin-user{white-space:nowrap}.bo-admin-logout{white-space:nowrap;min-width:98px;text-align:center}
.bo-command-map button,.bo-focus-card,.bo-quick-grid button,.bo-catalog-stat,.bo-category-card{border-color:var(--bo-admin-border)!important}.bo-command-map button,.bo-focus-card,.bo-quick-grid button{min-height:104px}.bo-command-map button strong,.bo-quick-grid strong{line-height:1.2}.bo-command-map button em,.bo-quick-grid em{line-height:1.35}
.bo-admin-grid,.bo-stage12-metrics,.bo-stage12-metrics.is-five,.bo-stage14-launch-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:14px!important}.bo-admin-card{min-height:136px!important}.bo-admin-card-label{position:static!important;margin-top:-42px;margin-left:64px;display:block}.bo-admin-card-value{margin-top:22px!important}
.bo-catalog-command{grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr)!important}.bo-catalog-grid{grid-template-columns:minmax(360px,.82fr) minmax(560px,1.18fr)!important}.bo-category-card-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important}.bo-catalog-stat-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important}.bo-catalog-card-head,.bo-catalog-headline{align-items:flex-start!important}.bo-catalog-toolbar{grid-template-columns:minmax(240px,1fr) auto!important;align-items:end!important}
.bo-product-table{overflow-x:auto;-webkit-overflow-scrolling:touch}.bo-product-table-head,.bo-product-table-row{grid-template-columns:minmax(250px,1.7fr) minmax(120px,.8fr) minmax(110px,.65fr) minmax(95px,.55fr) minmax(142px,.72fr)!important;min-width:760px}.bo-product-actions{justify-content:flex-start!important;flex-wrap:nowrap!important}.bo-product-actions button{min-width:58px!important;padding:10px 12px!important;white-space:nowrap!important;word-break:normal!important;line-height:1.1!important;text-align:center!important}.bo-product-name-cell strong{max-width:260px}.bo-soft-pill,.bo-stock-pill{white-space:nowrap}
.bo-orders-layout,.bo-crm-layout{grid-template-columns:minmax(0,1fr) minmax(320px,390px)!important}.bo-order-card,.bo-customer-card{grid-template-columns:minmax(0,1fr) auto auto!important}.bo-stage12-pipeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}.bo-stage12-metric,.bo-stage12-step{min-width:0}.bo-orders-filters,.bo-crm-toolbar .bo-orders-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.bo-orders-filter{white-space:nowrap;flex:0 0 auto}
.bo-stage13-hero{overflow:hidden}.bo-stage13-grid.is-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}.bo-stage13-layout,.bo-stage13-layout.is-wide-right,.bo-stage13-layout.is-wide-left{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}.bo-stage13-panel{min-width:0}.bo-stage13-settings-map{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}.bo-stage13-check{grid-template-columns:42px minmax(0,1fr)!important}.bo-stage13-check strong,.bo-stage13-check em{overflow-wrap:anywhere}.bo-stage13-staff-table{overflow-x:auto}.bo-stage13-table-head,.bo-stage13-staff-table article{grid-template-columns:minmax(220px,1.3fr) minmax(120px,.7fr) minmax(90px,.45fr)!important;min-width:520px}.bo-stage13-permissions{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}.bo-stage13-activity article{grid-template-columns:34px minmax(0,1fr) auto!important}.bo-stage13-activity time{white-space:nowrap}
.bo-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.bo-form-grid.is-three{grid-template-columns:repeat(3,minmax(0,1fr))!important}.bo-field input,.bo-field select,.bo-field textarea,.bo-stage13-form input,.bo-stage13-form select{font-size:16px;min-width:0}.bo-catalog-primary,.bo-stage13-form button,.bo-admin-logout,.bo-stage12-primary,.bo-order-action{min-height:46px}
@media(max-width:1280px){
  .bo-admin-layout{grid-template-columns:220px minmax(0,1fr)!important;gap:20px!important}.bo-catalog-grid,.bo-catalog-command,.bo-orders-layout,.bo-crm-layout,.bo-stage13-layout,.bo-stage13-layout.is-wide-right,.bo-stage13-layout.is-wide-left{grid-template-columns:1fr!important}.bo-order-detail,.bo-crm-profile{position:static!important}.bo-stage13-health{width:100%}.bo-stage13-hero{background:linear-gradient(135deg,#17251d,#22382b)!important;flex-direction:column;align-items:flex-start!important}.bo-stage13-hero p{max-width:none}.bo-stage13-staff-table article,.bo-stage13-table-head{min-width:0!important}
}
@media(max-width:960px){
  .bo-admin-shell{padding:12px!important}.bo-admin-layout{display:block!important}.bo-admin-sidebar{position:sticky!important;top:0!important;z-index:60;min-height:auto!important;max-height:none!important;margin:0 0 14px!important;border-radius:20px!important;padding:12px!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(16px)}.bo-side-brand-card,.bo-side-help{display:none!important}.bo-side-menu{display:flex!important;flex-direction:row!important;gap:8px!important;overflow-x:auto!important;padding-bottom:4px;scroll-snap-type:x mandatory}.bo-nav-group{display:flex!important;flex-direction:row!important;gap:8px!important;margin:0!important;scroll-snap-align:start}.bo-nav-group-title{display:none!important}.bo-side-item{flex:0 0 auto!important;width:auto!important;min-height:44px!important;padding:0 12px!important;border-radius:14px!important}.bo-side-item span{width:26px!important;height:26px!important}.bo-side-item small{display:none!important}.bo-side-item strong{font-size:13px!important}.bo-admin-main{padding:0!important;overflow:visible}.bo-admin-hero{padding:22px!important;border-radius:22px!important}.bo-admin-actions{width:100%;justify-content:space-between!important}.bo-admin-user{width:100%;order:-1}.bo-admin-logout{flex:1}.bo-command-map{grid-template-columns:repeat(2,minmax(0,1fr))!important}.bo-focus-strip{grid-template-columns:1fr!important}.bo-focus-card{min-height:88px}.bo-product-table-head,.bo-product-table-row{min-width:720px}.bo-stage13-activity article{grid-template-columns:34px minmax(0,1fr)!important}.bo-stage13-activity time{grid-column:2;white-space:normal}.bo-stage13-table-head{display:none!important}.bo-stage13-staff-table article{grid-template-columns:1fr!important;min-width:0!important}.bo-stage13-staff-table small{justify-self:start}.bo-stage13-checklist{max-height:none!important}
}
@media(max-width:720px){
  html{scroll-padding-top:92px}.bo-admin-shell{padding:10px!important}.bo-admin-hero{gap:16px!important}.bo-admin-title{font-size:34px!important;line-height:1.04!important}.bo-admin-welcome,.bo-admin-subtitle{font-size:14px!important}.bo-admin-actions{gap:10px!important}.bo-admin-logout{width:auto!important;min-width:0;padding:0 14px!important}.bo-admin-command-center,.bo-catalog-categories,.bo-catalog-editor,.bo-catalog-products,.bo-orders-board,.bo-crm-board,.bo-stage13-panel,.bo-stage13-card,.bo-admin-panel{border-radius:20px!important;padding:16px!important}.bo-command-map,.bo-catalog-stat-grid,.bo-category-card-grid,.bo-admin-grid,.bo-stage12-metrics,.bo-stage12-metrics.is-five,.bo-stage14-launch-strip{grid-template-columns:1fr!important}.bo-command-map button{min-height:86px}.bo-catalog-brief h2,.bo-stage12-head h3{font-size:24px!important}.bo-catalog-toolbar{grid-template-columns:1fr!important}.bo-line-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.bo-line-filter{flex:0 0 auto}.bo-form-grid,.bo-form-grid.is-three,.bo-stage13-settings-map,.bo-stage13-permissions{grid-template-columns:1fr!important}.bo-upload-row{grid-template-columns:64px 1fr!important}.bo-product-table{border:0!important;overflow:visible}.bo-product-table-head{display:none!important}.bo-product-table-row{display:grid!important;grid-template-columns:1fr!important;min-width:0!important;border:1px solid var(--bo-admin-border)!important;border-radius:18px!important;margin-bottom:12px;background:#fff}.bo-product-name-cell strong{max-width:none;white-space:normal}.bo-product-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}.bo-product-actions button{width:100%!important;min-width:0!important}.bo-order-card,.bo-customer-card{grid-template-columns:1fr!important}.bo-stage12-command{border-radius:22px!important;padding:18px!important}.bo-stage12-primary{width:100%}.bo-stage13-hero{border-radius:22px!important;padding:20px!important}.bo-stage13-hero h3{font-size:25px!important}.bo-stage13-panel-head{flex-direction:column}.bo-stage13-backup article{align-items:flex-start}.bo-stage13-check{align-items:start}.bo-admin-main button{max-width:100%}
}
@media(max-width:420px){
  .bo-admin-title{font-size:30px!important}.bo-side-item{padding:0 10px!important}.bo-side-item strong{font-size:12px!important}.bo-admin-actions{display:grid!important;grid-template-columns:1fr 1fr}.bo-admin-user{grid-column:1/-1}.bo-admin-logout{width:100%!important}.bo-upload-row{grid-template-columns:1fr!important}.bo-upload-preview{min-height:84px}.bo-stage13-card{min-height:auto}.bo-stage13-panel-head h4{font-size:19px!important}.bo-catalog-primary,.bo-stage13-form button{width:100%!important}
}


/* ===================== STAGE 17 · MOBILE-FIRST ADMIN REPAIR =====================
   Repairs the production mobile layout after restoring the complete base stylesheet.
=============================================================================== */
@media (max-width: 720px) {
  body { overflow-x: hidden; }
  .bo-admin-shell, .bo-admin-layout, .bo-admin-main { width: 100% !important; max-width: 100% !important; }
  .bo-admin-main { overflow: visible !important; }

  .bo-catalog-editor,
  .bo-catalog-products,
  .bo-catalog-categories,
  .bo-stage13-panel,
  .bo-stage13-card,
  .bo-orders-board,
  .bo-crm-board {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .bo-form-grid,
  .bo-form-grid.is-one,
  .bo-form-grid.is-three,
  .bo-stage13-form,
  .bo-stage13-permissions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .bo-field,
  .bo-stage13-form label {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .bo-field input,
  .bo-field select,
  .bo-field textarea,
  .bo-stage13-form input,
  .bo-stage13-form select,
  .bo-stage13-form textarea,
  .bo-catalog-search input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    border-radius: 12px !important;
  }

  .bo-field textarea,
  .bo-stage13-form textarea {
    min-height: 140px !important;
    resize: vertical;
  }

  .bo-upload-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .bo-upload-preview,
  .bo-upload-control {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .bo-upload-preview img {
    width: 100% !important;
    max-height: 220px !important;
    object-fit: contain !important;
  }

  .bo-catalog-primary,
  .bo-catalog-secondary,
  .bo-stage13-form button,
  .bo-product-actions button,
  .bo-order-action,
  .bo-stage12-primary {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    white-space: normal !important;
    word-break: normal !important;
    line-height: 1.25 !important;
    font-size: 15px !important;
  }

  .bo-line-filters,
  .bo-orders-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .bo-line-filter,
  .bo-orders-filter {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  .bo-product-table {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .bo-product-table-head { display: none !important; }

  .bo-product-table-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 14px !important;
    margin: 0 0 14px !important;
    border: 1px solid var(--bo-admin-border) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .bo-product-name-cell {
    display: grid !important;
    grid-template-columns: 82px minmax(0,1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
  }

  .bo-product-name-cell img {
    width: 82px !important;
    height: 82px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #f8faf7 !important;
  }

  .bo-product-name-cell strong,
  .bo-product-name-cell small {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .bo-product-table-row > *:not(.bo-product-name-cell):not(.bo-product-actions) {
    width: 100% !important;
    min-width: 0 !important;
  }

  .bo-product-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .bo-stage13-permissions label {
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .bo-stage13-permissions input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
  }

  .bo-stage13-backup article {
    display: grid !important;
    grid-template-columns: 40px minmax(0,1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  .bo-stage13-backup strong,
  .bo-stage13-backup em {
    display: block !important;
    overflow-wrap: anywhere !important;
  }

  .bo-stage13-layout,
  .bo-stage13-layout.is-wide-left,
  .bo-stage13-layout.is-wide-right {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .bo-category-card-grid {
    grid-template-columns: 1fr !important;
  }

  .bo-category-card {
    width: 100% !important;
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: start !important;
  }

  .bo-category-card strong,
  .bo-category-card em { margin: 0 !important; }

  .bo-catalog-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .bo-admin-panel,
  .bo-stage13-panel,
  .bo-catalog-editor,
  .bo-catalog-products {
    padding: 16px !important;
  }
}

@media (max-width: 420px) {
  .bo-admin-shell { padding: 8px !important; }
  .bo-product-actions { grid-template-columns: 1fr !important; }
  .bo-line-filters, .bo-orders-filters { grid-template-columns: 1fr !important; }
  .bo-product-name-cell { grid-template-columns: 68px minmax(0,1fr) !important; }
  .bo-product-name-cell img { width: 68px !important; height: 68px !important; }
}

/* BLACK-ON premium responsive footer */
.bo-footer{background:#050505;color:#fff;margin:0;padding:0 max(24px,calc((100vw - 1224px)/2));border-top:1px solid rgba(255,255,255,.12)}
.bo-footer__inner{padding:68px 0 30px}
.bo-footer__grid{display:grid;grid-template-columns:minmax(260px,1.45fr) repeat(3,minmax(150px,1fr));gap:56px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:52px}
.bo-footer__brand{max-width:360px}
.bo-footer__logo{display:inline-flex;align-items:center;gap:3px;font-family:'Jost',sans-serif;font-weight:600;font-size:25px;line-height:1;letter-spacing:-.02em;margin-bottom:18px}
.bo-footer__logo span:last-child{color:#CA8A04}
.bo-footer__note{font-size:13px;line-height:1.85;color:#a8a29e;margin:0 0 24px;max-width:340px}
.bo-footer__trust{display:flex;flex-wrap:wrap;gap:8px}
.bo-footer__trust span{display:inline-flex;align-items:center;min-height:29px;padding:5px 10px;border:1px solid rgba(202,138,4,.28);border-radius:999px;color:#d6d3d1;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.bo-footer__heading{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#CA8A04;margin:2px 0 18px}
.bo-footer__links{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.bo-footer__link{appearance:none;border:0;background:none;padding:0;color:#b8b5b1;text-decoration:none;font:inherit;font-size:13px;line-height:1.5;cursor:pointer;transition:color .2s ease,transform .2s ease}
.bo-footer__link:hover,.bo-footer__link:focus-visible{color:#fff;transform:translateX(3px);outline:none}
[dir="rtl"] .bo-footer__link:hover,[dir="rtl"] .bo-footer__link:focus-visible{transform:translateX(-3px)}
.bo-footer__contact{display:flex;gap:10px;align-items:flex-start;color:#b8b5b1;text-decoration:none;font-size:13px;line-height:1.55;transition:color .2s ease}
.bo-footer__contact:hover,.bo-footer__contact:focus-visible{color:#fff;outline:none}
.bo-footer__contact svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;color:#CA8A04}
.bo-footer__company{font-size:12px;line-height:1.65;color:#77736f;margin:16px 0 0}
.bo-footer__socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.bo-footer__social{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#fff;text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.bo-footer__social:hover,.bo-footer__social:focus-visible{background:#CA8A04;border-color:#CA8A04;transform:translateY(-2px);outline:none}
.bo-footer__social svg{width:17px;height:17px}
.bo-footer__bottom{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#77736f;font-size:11px;letter-spacing:.055em}
.bo-footer__bottom-links{display:flex;flex-wrap:wrap;gap:18px}
.bo-footer__bottom-links a{color:#8f8b86;text-decoration:none;transition:color .2s ease}
.bo-footer__bottom-links a:hover,.bo-footer__bottom-links a:focus-visible{color:#fff;outline:none}
@media (max-width:980px){.bo-footer__grid{grid-template-columns:1.3fr 1fr;gap:44px 52px}.bo-footer__brand{max-width:420px}}
@media (max-width:640px){.bo-footer{padding:0 20px}.bo-footer__inner{padding:48px 0 22px}.bo-footer__grid{grid-template-columns:1fr;gap:34px;padding-bottom:38px}.bo-footer__brand{max-width:none}.bo-footer__heading{margin-bottom:14px}.bo-footer__bottom{align-items:flex-start;flex-direction:column;padding:24px 0;min-height:auto;gap:14px}.bo-footer__bottom-links{gap:12px 18px}.bo-footer__social{width:42px;height:42px}}
@media (max-width:380px){.bo-footer{padding:0 16px}.bo-footer__trust span{font-size:9px}.bo-footer__contact,.bo-footer__link{font-size:12.5px}}

/* BLACK-ON approved logo + final responsive header/footer — v19 */
.bo-site-logo{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  width:clamp(118px,10vw,154px);
  height:58px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  cursor:pointer;
}
.bo-site-logo img{
  width:100%;
  height:auto;
  max-height:54px;
  object-fit:contain;
  object-position:left center;
}
.bo-footer__logo{
  display:inline-flex;
  width:clamp(132px,12vw,176px);
  min-height:48px;
  align-items:center;
  text-decoration:none;
}
.bo-footer__logo img{
  display:block;
  width:100%;
  height:auto;
  max-height:64px;
  object-fit:contain;
  object-position:left center;
}
[dir="rtl"] .bo-site-logo img,
[dir="rtl"] .bo-footer__logo img{object-position:right center}

@media (max-width:1024px){
  .bo-site-logo{width:124px;height:52px}
}
@media (max-width:768px){
  header > div{
    display:grid!important;
    grid-template-columns:minmax(100px,1fr) auto!important;
    align-items:center!important;
    padding:12px 16px!important;
    gap:10px 12px!important;
  }
  .bo-site-logo{width:112px;height:46px;justify-self:start}
  .bo-site-logo img{max-height:44px}
  header > div > nav{
    grid-column:1 / -1;
    order:initial!important;
    width:100%;
    display:flex!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:22px!important;
    overflow-x:auto;
    scrollbar-width:none;
    padding:5px 0 2px;
  }
  header > div > nav::-webkit-scrollbar{display:none}
  header > div > div:last-child{
    justify-self:end;
    gap:7px!important;
  }
  .bo-header-action{padding:8px 11px;font-size:11px}
  header > div > div:last-child > button:last-child{padding:8px 12px!important}
  .bo-footer__logo{width:145px;min-height:52px}
}
@media (max-width:520px){
  header > div{grid-template-columns:1fr!important}
  .bo-site-logo{justify-self:center;width:128px}
  header > div > div:last-child{
    justify-self:stretch;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
  }
  header > div > div:last-child > button{
    width:100%!important;
    min-width:0;
    justify-content:center;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  header > div > nav{justify-content:flex-start!important;font-size:11.5px!important;gap:20px!important}
  .bo-footer__logo{width:138px}
}

/* =====================================================
   BLACK-ON — FULL SITE RESPONSIVE SYSTEM v20
   ===================================================== */
:root{
  --bo-container:1280px;
  --bo-page-pad:clamp(16px,3vw,28px);
  --bo-section-y:clamp(52px,7vw,88px);
  --bo-radius-xl:clamp(20px,2.4vw,30px);
  --bo-shadow-soft:0 24px 60px -38px rgba(23,20,18,.38);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-width:320px}
body,button,input,select,textarea{font-synthesis:none}
button,a{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
main,section,header,footer,aside,article,nav{min-width:0}
p,h1,h2,h3{overflow-wrap:anywhere}

/* Header */
.bo-main-header{width:100%;isolation:isolate}
.bo-header-inner{width:min(100%,var(--bo-container));min-width:0}
.bo-main-nav span{position:relative;white-space:nowrap;transition:opacity .2s ease,color .2s ease}
.bo-main-nav span::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:#E7A51A;transform:scaleX(0);transition:transform .2s ease}
.bo-main-nav span:hover{opacity:1!important;color:#fff}
.bo-main-nav span:hover::after{transform:scaleX(1)}
.bo-header-tools{min-width:0}

/* Hero */
.bo-hero{width:min(calc(100% - (var(--bo-page-pad) * 2)),var(--bo-container));padding-inline:clamp(22px,4vw,54px)!important;gap:clamp(28px,4vw,54px)!important;min-height:min(760px,74vh)!important}
.bo-hero>div{min-width:0}
.bo-hero-media{height:clamp(420px,47vw,560px)!important}
.bo-hero-media img{object-position:center}

/* Shared storefront sections */
#bo-advisor,#qc-collection,#qc-story{width:min(100%,var(--bo-container));padding-inline:var(--bo-page-pad)!important}
#bo-advisor{margin-top:var(--bo-section-y)!important}
#qc-collection{padding-top:var(--bo-section-y)!important;padding-bottom:clamp(32px,5vw,56px)!important}
#qc-story{margin-top:clamp(32px,5vw,64px)!important;margin-bottom:clamp(48px,7vw,84px)!important}
.bo-section-head>div{min-width:0}
.bo-filter-strip{scrollbar-width:none}
.bo-filter-strip::-webkit-scrollbar{display:none}
.bo-filter-strip button{min-height:42px;white-space:nowrap}

/* Product system */
.bo-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(14px,2vw,22px)!important}
.bo-product-card{min-width:0;border-radius:16px!important;box-shadow:var(--bo-shadow-soft);contain:layout paint}
.bo-product-card>div:first-child{height:clamp(220px,22vw,280px)!important}
.bo-product-card h3{min-height:2.5em!important}
.bo-product-card button{min-height:44px}

/* Story */
.bo-story-grid{border-radius:var(--bo-radius-xl)!important;box-shadow:var(--bo-shadow-soft)}
.bo-story-grid>div:first-child{padding:clamp(34px,5vw,64px) clamp(24px,4.5vw,56px)!important}
.bo-story-grid>div:last-child{min-height:clamp(320px,38vw,460px)!important}
.bo-story-grid img{border-radius:0!important}

/* Forms, drawers and overlays */
input,select,textarea{max-width:100%;font-size:16px}
aside{max-width:100vw}
[role="dialog"]{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}

/* Large tablet */
@media (max-width:1100px){
  .bo-header-inner{gap:14px!important}
  .bo-main-nav{gap:20px!important}
  .bo-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .bo-hero{grid-template-columns:minmax(0,1fr) minmax(360px,.9fr)!important}
}

/* Tablet */
@media (max-width:900px){
  .bo-main-header{position:sticky!important}
  .bo-header-inner{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;height:auto!important;padding:12px var(--bo-page-pad)!important}
  .bo-site-logo{grid-column:1;grid-row:1}
  .bo-header-tools{grid-column:2;grid-row:1;justify-self:end}
  .bo-main-nav{grid-column:1/-1;grid-row:2;width:100%;justify-content:flex-start!important;overflow-x:auto;overscroll-behavior-inline:contain;padding:8px 2px 4px;scrollbar-width:none}
  .bo-main-nav::-webkit-scrollbar{display:none}
  .bo-hero{grid-template-columns:1fr!important;min-height:auto!important;margin-top:12px!important;padding-top:clamp(36px,6vw,58px)!important}
  .bo-hero-media{height:clamp(380px,62vw,560px)!important}
  .bo-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bo-story-grid{grid-template-columns:1fr!important}
  .bo-story-grid>div:last-child{min-height:420px!important}
}

/* Mobile */
@media (max-width:640px){
  :root{--bo-page-pad:16px}
  .bo-header-inner{grid-template-columns:1fr!important;padding-block:10px!important}
  .bo-site-logo{grid-column:1;grid-row:1;justify-self:center;width:122px!important;height:42px!important}
  .bo-header-tools{grid-column:1;grid-row:2;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px!important}
  .bo-header-tools>button{width:100%!important;min-width:0!important;min-height:42px;justify-content:center;padding-inline:8px!important;overflow:hidden;text-overflow:ellipsis}
  .bo-main-nav{grid-row:3;font-size:11px!important;gap:20px!important;padding-top:6px}
  .bo-main-nav span{min-height:38px;display:inline-flex;align-items:center}
  .bo-hero{width:100%;border-radius:0!important;padding-inline:var(--bo-page-pad)!important;margin-top:0!important}
  .bo-hero h1{font-size:clamp(34px,11vw,46px)!important;line-height:1.04!important}
  .bo-hero p{font-size:15px!important}
  .bo-hero>div:first-child>div:nth-last-child(1){gap:22px!important;margin-top:34px!important}
  .bo-hero-media{height:min(116vw,500px)!important;border-radius:18px!important}
  .bo-hero-media>div:last-child{left:14px!important;right:14px;bottom:14px!important;max-width:none!important}
  .bo-advisor{padding:28px 18px!important}
  .bo-concerns{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  .bo-concerns button{width:100%!important;min-height:46px;padding:10px 12px!important}
  .bo-section-head{align-items:flex-start!important;flex-direction:column}
  .bo-section-head p{max-width:100%!important}
  .bo-filter-strip{flex-wrap:nowrap!important;overflow-x:auto;margin-inline:calc(var(--bo-page-pad) * -1);padding-inline:var(--bo-page-pad);padding-bottom:6px}
  .bo-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .bo-product-card>div:first-child{height:52vw!important;min-height:180px;max-height:230px}
  .bo-product-card>div:last-child{padding:14px 12px 16px!important}
  .bo-product-card h3{font-size:16px!important;margin-bottom:10px!important;min-height:2.6em!important}
  .bo-product-card button{font-size:10px!important;padding:10px 8px!important}
  .bo-story-grid>div:last-child{min-height:78vw!important}
  .bo-mobile-nav{left:10px!important;right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important}
}

/* Small phones */
@media (max-width:390px){
  .bo-header-tools{grid-template-columns:1fr 1fr}
  .bo-header-tools>button:last-child{grid-column:1/-1}
  .bo-product-grid{grid-template-columns:1fr!important}
  .bo-product-card>div:first-child{height:78vw!important;max-height:300px}
  .bo-product-card h3{min-height:auto!important}
  .bo-concerns{grid-template-columns:1fr}
}

/* Wide desktops */
@media (min-width:1440px){
  .bo-hero{min-height:720px!important}
  .bo-product-grid{gap:24px!important}
}