/* Rotina360 R187 — Estoque do E-commerce
   Segunda proposta visual. Somente CSS: preserva DOM, eventos, React, queries, RPCs e regras existentes. */

/* ============================================================
   1) CONTEXTO DA PÁGINA
   ============================================================ */
.page:has(.ecommerce-stock-page){
  --ec-navy:#0b1f38;
  --ec-navy-2:#102b4d;
  --ec-blue:#155eef;
  --ec-blue-soft:#edf4ff;
  --ec-green:#138a53;
  --ec-green-soft:#ebf8f1;
  --ec-amber:#c77700;
  --ec-amber-soft:#fff6e8;
  --ec-red:#c43d4d;
  --ec-red-soft:#fff0f2;
  --ec-violet:#7157d9;
  --ec-violet-soft:#f3f0ff;
  --ec-border:#dce5ef;
  --ec-border-soft:#e9eef5;
  --ec-bg:#f4f7fb;
  --ec-surface:#ffffff;
  --ec-text:#17263b;
  --ec-muted:#6e7d91;
  --ec-shadow:0 10px 30px rgba(23,43,77,.07);
  --ec-shadow-soft:0 4px 14px rgba(23,43,77,.045);
}

.page:has(.ecommerce-stock-page) .page-header{
  align-items:flex-end;
  gap:20px;
  margin-bottom:14px;
  padding:0 2px;
}
.page:has(.ecommerce-stock-page) .page-header h1{
  margin-bottom:4px;
  color:var(--ec-navy);
  font-size:24px;
  letter-spacing:-.025em;
}
.page:has(.ecommerce-stock-page) .page-header p{
  max-width:760px;
  color:var(--ec-muted);
  line-height:1.45;
}
.page:has(.ecommerce-stock-page) .page-header::before{
  content:"OPERACIONAL  /  E-COMMERCE";
  position:absolute;
  margin-top:-18px;
  color:#5b7fb5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
}

.ecommerce-stock-page-actions{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.ecommerce-stock-page-actions>button{
  min-height:38px;
  padding:8px 12px;
  border-color:#d7e0ec;
  border-radius:10px;
  background:#fff;
  color:#31445e;
  box-shadow:0 1px 2px rgba(15,23,42,.025);
}
.ecommerce-stock-page-actions>button:hover{
  border-color:#bccbe0;
  background:#f8fbff;
}
.ecommerce-stock-selector{
  display:grid;
  min-width:min(300px,100%);
  gap:4px;
}
.ecommerce-stock-selector span{
  color:#718095!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
}
.ecommerce-stock-selector select{
  min-height:38px;
  border:1px solid #d7e0ec;
  border-radius:10px;
  background:#fff;
  color:#1f334d;
  font-weight:700;
}

/* ============================================================
   2) SHELL OPERACIONAL
   ============================================================ */
.ecommerce-stock-page{
  --ec-accent:var(--ec-blue);
  --ec-accent-soft:var(--ec-blue-soft);
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  gap:14px 18px;
  width:100%;
  min-width:0;
  align-items:start;
}
.ecommerce-stock-page:has(.ecommerce-stock-tabs button:nth-child(2).active){
  --ec-accent:var(--ec-green);
  --ec-accent-soft:var(--ec-green-soft);
}
.ecommerce-stock-page:has(.ecommerce-stock-tabs button:nth-child(3).active){
  --ec-accent:var(--ec-violet);
  --ec-accent-soft:var(--ec-violet-soft);
}
.ecommerce-stock-page:has(.ecommerce-stock-tabs button:nth-child(4).active){
  --ec-accent:var(--ec-red);
  --ec-accent-soft:var(--ec-red-soft);
}
.ecommerce-stock-page:has(.ecommerce-stock-tabs button:nth-child(5).active){
  --ec-accent:#52647b;
  --ec-accent-soft:#f1f4f7;
}

/* ============================================================
   3) RESUMO DO PEDIDO — HERO DE VERDADE
   ============================================================ */
.ecommerce-stock-summary{
  grid-column:1/-1;
  display:grid!important;
  grid-template-columns:285px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #d4dfec!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:var(--ec-shadow)!important;
}
.ecommerce-stock-order-info{
  grid-column:1;
  grid-row:1/3;
  position:relative;
  display:flex!important;
  min-height:150px;
  flex-direction:column;
  justify-content:center;
  gap:4px!important;
  padding:22px 24px!important;
  overflow:hidden;
  background:linear-gradient(145deg,var(--ec-navy) 0%,var(--ec-navy-2) 100%);
  color:#fff;
}
.ecommerce-stock-order-info::after{
  content:"";
  position:absolute;
  right:-42px;
  bottom:-58px;
  width:150px;
  height:150px;
  border:28px solid rgba(255,255,255,.045);
  border-radius:50%;
}
.ecommerce-stock-order-info::before{
  content:"PEDIDO EM OPERAÇÃO";
  position:relative;
  z-index:1;
  width:max-content;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#cfe0ff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
}
.ecommerce-stock-kicker{
  position:relative;
  z-index:1;
  margin-top:6px;
  color:#8fb8ff!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}
.ecommerce-stock-order-info>strong{
  position:relative;
  z-index:1;
  color:#fff!important;
  font-size:26px!important;
  line-height:1.08;
  letter-spacing:-.03em;
}
.ecommerce-stock-order-info>small{
  position:relative;
  z-index:1;
  max-width:230px;
  margin-top:3px;
  color:#bdd0e9!important;
  font-size:11px;
  line-height:1.4;
}

.ecommerce-stock-kpis{
  grid-column:2;
  grid-row:1;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  padding:14px 14px 8px;
  background:#fff;
}
.ecommerce-stock-kpis>div{
  position:relative;
  display:grid!important;
  min-width:0;
  gap:4px!important;
  padding:13px 14px 13px 16px!important;
  border:0!important;
  border-right:1px solid var(--ec-border-soft)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
.ecommerce-stock-kpis>div:last-child{border-right:0!important}
.ecommerce-stock-kpis>div::before{
  content:"";
  position:absolute;
  top:15px;
  left:0;
  width:4px;
  height:32px;
  border-radius:999px;
  background:#a7b3c4;
}
.ecommerce-stock-kpis>div:nth-child(1)::before{background:#70839d}
.ecommerce-stock-kpis>div:nth-child(2)::before{background:#2b73df}
.ecommerce-stock-kpis>div:nth-child(3)::before{background:var(--ec-green)}
.ecommerce-stock-kpis>div:nth-child(4)::before{background:var(--ec-navy)}
.ecommerce-stock-kpis strong{
  color:var(--ec-text)!important;
  font-size:27px!important;
  line-height:1!important;
  letter-spacing:-.035em;
}
.ecommerce-stock-kpis span{
  color:#718095!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}

.ecommerce-stock-progress-grid{
  grid-column:2;
  grid-row:2;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:16px!important;
  padding:9px 18px 16px!important;
  border-top:1px solid #edf1f6;
  background:#fbfcfe;
}
.ecommerce-stock-progress-grid>div{
  display:grid;
  gap:7px!important;
}
.ecommerce-stock-progress-grid>div>span{
  color:#506078!important;
  font-size:10px!important;
  font-weight:800;
}
.ecommerce-stock-progress-grid>div>span strong{
  color:#1e385c;
  font-size:11px;
}
.ecommerce-stock-progress{
  height:9px!important;
  overflow:hidden;
  border-radius:999px!important;
  background:#e7edf4!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
}
.ecommerce-stock-progress i{
  border-radius:999px!important;
  background:linear-gradient(90deg,#2f72df,#155eef)!important;
}
.ecommerce-stock-progress.storage i{
  background:linear-gradient(90deg,#22a366,#138a53)!important;
}

/* ============================================================
   4) FLUXO LATERAL — ORGANIZAÇÃO PRINCIPAL
   ============================================================ */
.ecommerce-stock-tabs{
  grid-column:1;
  position:sticky;
  top:66px;
  z-index:4;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  margin:0!important;
  padding:52px 9px 10px!important;
  overflow:hidden;
  border:1px solid #d6e0ec!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:var(--ec-shadow-soft)!important;
}
.ecommerce-stock-tabs::before{
  content:"FLUXO DO ESTOQUE";
  position:absolute;
  inset:0 0 auto 0;
  height:42px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-bottom:1px solid #e8eef5;
  background:#f8fafc;
  color:#607089;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
}
.ecommerce-stock-tabs button{
  position:relative;
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr);
  grid-template-rows:auto auto;
  min-height:58px!important;
  align-items:center!important;
  justify-items:start;
  gap:1px 9px!important;
  padding:9px 10px!important;
  overflow:hidden;
  border:1px solid transparent!important;
  border-radius:11px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#33465f!important;
  text-align:left!important;
  line-height:1.15!important;
}
.ecommerce-stock-tabs button::before{
  grid-column:1;
  grid-row:1/3;
  content:"";
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:9px;
  background:#eef2f6;
  color:#617188;
  font-size:11px;
  font-weight:900;
}
.ecommerce-stock-tabs button:nth-child(1)::before{content:"01"}
.ecommerce-stock-tabs button:nth-child(2)::before{content:"02"}
.ecommerce-stock-tabs button:nth-child(3)::before{content:"03"}
.ecommerce-stock-tabs button:nth-child(4)::before{content:"04"}
.ecommerce-stock-tabs button:nth-child(5)::before{content:"05"}
.ecommerce-stock-tabs button::after{
  grid-column:2;
  grid-row:2;
  display:block;
  overflow:hidden;
  color:#8a98aa;
  font-size:8px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ecommerce-stock-tabs button:nth-child(1)::after{content:"Conferir e receber peças"}
.ecommerce-stock-tabs button:nth-child(2)::after{content:"Guardar no endereço correto"}
.ecommerce-stock-tabs button:nth-child(3)::after{content:"Transferir e consultar saldo"}
.ecommerce-stock-tabs button:nth-child(4)::after{content:"Tratar divergências"}
.ecommerce-stock-tabs button:nth-child(5)::after{content:"Ver toda a rastreabilidade"}
.ecommerce-stock-tabs button:hover{
  border-color:#e1e8f1!important;
  background:#f9fbfd!important;
}
.ecommerce-stock-tabs button.active{
  border-color:color-mix(in srgb,var(--ec-accent) 25%,#dbe4ef)!important;
  background:var(--ec-accent-soft)!important;
  color:var(--ec-accent)!important;
  box-shadow:none!important;
}
.ecommerce-stock-tabs button.active::before{
  background:var(--ec-accent)!important;
  color:#fff!important;
  box-shadow:0 4px 10px color-mix(in srgb,var(--ec-accent) 22%,transparent);
}
.ecommerce-stock-tabs button.active::after{
  color:color-mix(in srgb,var(--ec-accent) 72%,#6b7280)!important;
}

/* ============================================================
   5) ÁREA DE TRABALHO — GRANDE, ÚNICA E DESTACADA
   ============================================================ */
.ecommerce-stock-page>.panel:not(.ecommerce-stock-summary),
.ecommerce-stock-page>.ecommerce-stock-scanner,
.ecommerce-stock-page>.ecommerce-stock-storage-form,
.ecommerce-stock-page>.ecommerce-stock-list,
.ecommerce-stock-page>.ecommerce-stock-history{
  grid-column:2;
  min-width:0;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid #d7e1ed!important;
  border-top:4px solid var(--ec-accent)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:var(--ec-shadow-soft)!important;
}
.ecommerce-stock-scanner,
.ecommerce-stock-storage-form,
.ecommerce-stock-list,
.ecommerce-stock-history{
  padding:0!important;
}
.ecommerce-stock-scanner>header,
.ecommerce-stock-storage-form>header,
.ecommerce-stock-list>header,
.ecommerce-stock-history>header{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:17px 18px 15px!important;
  border-bottom:1px solid #e9eef5;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
}
.ecommerce-stock-scanner>header::before,
.ecommerce-stock-storage-form>header::before,
.ecommerce-stock-list>header::before,
.ecommerce-stock-history>header::before{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:38px;
  border-radius:999px;
  background:var(--ec-accent);
}
.ecommerce-stock-scanner>header>div,
.ecommerce-stock-storage-form>header>div,
.ecommerce-stock-list>header>div,
.ecommerce-stock-history>header>div{
  flex:1;
  min-width:0;
}
.ecommerce-stock-scanner h2,
.ecommerce-stock-storage-form h2,
.ecommerce-stock-list h2,
.ecommerce-stock-history h2{
  margin:0 0 4px!important;
  color:var(--ec-navy)!important;
  font-size:19px!important;
  letter-spacing:-.02em;
}
.ecommerce-stock-scanner p,
.ecommerce-stock-storage-form p,
.ecommerce-stock-list>header small,
.ecommerce-stock-history>header>span{
  margin:0!important;
  color:var(--ec-muted)!important;
  font-size:11px!important;
  line-height:1.45;
}

/* Conteúdo interno recebe respiro sem criar novos wrappers */
.ecommerce-stock-scanner>.ecommerce-stock-receipt-actions,
.ecommerce-stock-scanner>.ecommerce-stock-scan-row,
.ecommerce-stock-scanner>.ecommerce-stock-feedback,
.ecommerce-stock-scanner>.ecommerce-stock-mobile-workbench,
.ecommerce-stock-storage-form>.ecommerce-stock-storage-grid,
.ecommerce-stock-storage-form>.ecommerce-stock-feedback,
.ecommerce-stock-storage-form>.ecommerce-stock-mobile-workbench,
.ecommerce-stock-list>.ecommerce-stock-table-wrap,
.ecommerce-stock-list>.ecommerce-stock-mobile-list,
.ecommerce-stock-history>.ecommerce-stock-history-list{
  margin-left:18px!important;
  margin-right:18px!important;
}
.ecommerce-stock-scanner>.ecommerce-stock-receipt-actions{margin-top:15px!important}
.ecommerce-stock-scanner>.ecommerce-stock-scan-row{margin-top:12px!important}
.ecommerce-stock-scanner>.ecommerce-stock-feedback{margin-top:12px!important;margin-bottom:16px!important}
.ecommerce-stock-list>.ecommerce-stock-table-wrap{margin-top:16px!important;margin-bottom:18px!important}
.ecommerce-stock-list>.ecommerce-stock-mobile-list{margin-top:14px!important;margin-bottom:16px!important}
.ecommerce-stock-history>.ecommerce-stock-history-list{margin-top:14px!important;margin-bottom:16px!important}
.ecommerce-stock-storage-form>.ecommerce-stock-storage-grid{margin-top:16px!important;margin-bottom:16px!important}

/* ============================================================
   6) RECEBIMENTO — SCANNER COMO ELEMENTO DOMINANTE
   ============================================================ */
.ecommerce-stock-receipt-actions{
  display:flex!important;
  gap:7px!important;
  flex-wrap:wrap;
}
.ecommerce-stock-receipt-actions button{
  min-height:36px;
  border-color:#d9e2ed;
  border-radius:9px;
  background:#fff;
  color:#3d5069;
  font-size:11px;
}
.ecommerce-stock-scan-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 132px!important;
  gap:10px!important;
  padding:16px!important;
  border:1px solid #c9d9ef;
  border-radius:14px;
  background:linear-gradient(145deg,#f7fbff,#edf5ff);
}
.ecommerce-stock-scan-row input{
  min-height:58px!important;
  padding:11px 15px!important;
  border:2px solid #8fb0e6!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#10233e!important;
  font-size:19px!important;
  font-weight:850!important;
  letter-spacing:.01em;
  box-shadow:0 2px 6px rgba(21,94,239,.05);
}
.ecommerce-stock-scan-row input:focus{
  border-color:var(--ec-blue)!important;
  box-shadow:0 0 0 4px rgba(21,94,239,.12)!important;
}
.ecommerce-stock-scan-row button{
  min-width:0!important;
  min-height:58px!important;
  border:0!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,#216bf2,#155eef)!important;
  color:#fff!important;
  font-weight:850!important;
  box-shadow:0 7px 16px rgba(21,94,239,.19);
}
.ecommerce-stock-feedback{
  padding:13px 14px!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
.ecommerce-stock-feedback strong{font-size:13px!important}
.ecommerce-stock-feedback span{font-size:11px!important;line-height:1.4}

/* ============================================================
   7) ARMAZENAMENTO / FORMULÁRIOS
   ============================================================ */
.ecommerce-stock-storage-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:10px!important;
}
.ecommerce-stock-storage-grid label{
  display:grid;
  gap:5px;
  min-width:0;
}
.ecommerce-stock-storage-grid label>span{
  color:#687991!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
}
.ecommerce-stock-storage-grid input,
.ecommerce-stock-storage-grid select{
  min-height:44px;
  border:1px solid #d4dfeb;
  border-radius:9px;
  background:#fbfcfe;
  color:#203650;
}
.ecommerce-stock-storage-grid input:focus,
.ecommerce-stock-storage-grid select:focus{
  border-color:#73aa8d;
  background:#fff;
  box-shadow:0 0 0 3px rgba(19,138,83,.08);
}
.ecommerce-stock-storage-submit{
  grid-column:1/-1;
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-top:4px;
  padding-top:13px!important;
  border-top:1px solid #e9eef4;
}
.ecommerce-stock-storage-submit small{
  margin-right:auto;
  color:#748398!important;
}
.ecommerce-stock-storage-submit button{
  min-height:42px;
  border-radius:9px;
}
.ecommerce-stock-location-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px!important;
}
.ecommerce-stock-location-list span{
  padding:5px 8px!important;
  border:1px solid #d9e5de;
  border-radius:8px!important;
  background:#f3faf6!important;
  color:#236446!important;
  font-weight:800!important;
}

/* ============================================================
   8) TABELAS / LISTAS
   ============================================================ */
.ecommerce-stock-table-wrap{
  overflow:auto;
  border:1px solid #d9e3ee!important;
  border-radius:12px!important;
  background:#fff;
}
.ecommerce-stock-table{
  width:100%;
  min-width:860px;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.ecommerce-stock-table th{
  position:sticky;
  top:0;
  z-index:2;
  height:40px;
  padding:9px 11px!important;
  border-bottom:1px solid #dce5ef!important;
  background:#f4f7fb!important;
  color:#6f7f94!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
}
.ecommerce-stock-table td{
  padding:11px!important;
  border-bottom:1px solid #edf1f6!important;
  color:#2b3e57;
}
.ecommerce-stock-table tbody tr:hover{background:#f8fbff!important}
.ecommerce-stock-table tbody tr.completed{background:#f3fbf6!important}
.ecommerce-stock-table tbody tr.started{background:#fffaf1!important}
.ecommerce-stock-table td.sku{
  color:#154eaa!important;
  font-weight:900!important;
}
.ecommerce-stock-table td.received{color:#138a53!important}
.ecommerce-stock-table td.pending{color:#b76a00!important}
.ecommerce-stock-status{
  min-height:24px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  font-size:9px!important;
  font-weight:900!important;
}

.ecommerce-stock-history-list{
  display:grid!important;
  gap:8px!important;
}
.ecommerce-stock-history-list article{
  padding:12px 13px!important;
  border:1px solid #e0e7f0!important;
  border-left:4px solid var(--ec-accent)!important;
  border-radius:10px!important;
  background:#fbfcfe!important;
  box-shadow:none!important;
}

/* ============================================================
   9) ESTADOS VAZIOS
   ============================================================ */
.ecommerce-stock-locked,
.ecommerce-stock-empty{
  min-height:230px;
  align-content:center;
  justify-items:center;
  padding:34px 22px!important;
  border:1px dashed #cdd9e6;
  border-radius:13px;
  background:#f9fbfd;
  text-align:center;
}
.ecommerce-stock-empty>div{font-size:36px!important}
.ecommerce-stock-locked p,
.ecommerce-stock-empty p{
  max-width:610px;
  color:#748398!important;
}

/* ============================================================
   10) MOBILE / COLETOR
   ============================================================ */
@media(max-width:980px){
  .ecommerce-stock-page{
    grid-template-columns:minmax(0,1fr);
    gap:11px;
  }
  .ecommerce-stock-summary,
  .ecommerce-stock-tabs,
  .ecommerce-stock-page>.panel:not(.ecommerce-stock-summary),
  .ecommerce-stock-page>.ecommerce-stock-scanner,
  .ecommerce-stock-page>.ecommerce-stock-storage-form,
  .ecommerce-stock-page>.ecommerce-stock-list,
  .ecommerce-stock-page>.ecommerce-stock-history{
    grid-column:1;
  }
  .ecommerce-stock-summary{
    grid-template-columns:235px minmax(0,1fr);
  }
  .ecommerce-stock-order-info{min-height:138px;padding:18px!important}
  .ecommerce-stock-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ecommerce-stock-kpis>div:nth-child(2){border-right:0!important}
  .ecommerce-stock-kpis>div:nth-child(-n+2){border-bottom:1px solid var(--ec-border-soft)!important}
  .ecommerce-stock-tabs{
    position:static;
    display:flex!important;
    width:100%;
    gap:5px!important;
    padding:6px!important;
    overflow-x:auto;
    border-radius:13px!important;
    scrollbar-width:none;
  }
  .ecommerce-stock-tabs::before{display:none}
  .ecommerce-stock-tabs::-webkit-scrollbar{display:none}
  .ecommerce-stock-tabs button{
    flex:0 0 auto;
    grid-template-columns:24px auto;
    min-width:150px;
    min-height:48px!important;
    padding:7px 9px!important;
  }
  .ecommerce-stock-tabs button::before{
    width:24px;
    height:24px;
    border-radius:8px;
    font-size:9px;
  }
  .ecommerce-stock-tabs button::after{display:none}
}

@media(max-width:760px){
  .page:has(.ecommerce-stock-page) .page-header{
    gap:10px;
    margin-bottom:10px;
  }
  .page:has(.ecommerce-stock-page) .page-header::before{display:none}
  .page:has(.ecommerce-stock-page) .page-header h1{font-size:19px}
  .page:has(.ecommerce-stock-page) .page-header p{font-size:11px}
  .ecommerce-stock-page-actions{
    width:100%;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  .ecommerce-stock-selector{grid-column:1/-1!important;min-width:0}
  .ecommerce-stock-page-actions>button{width:100%;min-height:38px;font-size:10px}

  .ecommerce-stock-summary{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    border-radius:14px!important;
  }
  .ecommerce-stock-order-info{
    grid-column:1;
    grid-row:1;
    min-height:auto;
    padding:15px 16px!important;
  }
  .ecommerce-stock-order-info::after{display:none}
  .ecommerce-stock-order-info>strong{font-size:21px!important}
  .ecommerce-stock-kpis{
    grid-column:1;
    grid-row:2;
    padding:8px!important;
  }
  .ecommerce-stock-kpis>div{padding:10px 11px 10px 14px!important}
  .ecommerce-stock-kpis strong{font-size:22px!important}
  .ecommerce-stock-progress-grid{
    grid-column:1;
    grid-row:3;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:10px 12px 13px!important;
  }
  .ecommerce-stock-tabs button{
    min-width:128px;
    font-size:10px!important;
  }

  .ecommerce-stock-scanner>header,
  .ecommerce-stock-storage-form>header,
  .ecommerce-stock-list>header,
  .ecommerce-stock-history>header{
    padding:13px 14px 12px!important;
  }
  .ecommerce-stock-scanner>header::before,
  .ecommerce-stock-storage-form>header::before,
  .ecommerce-stock-list>header::before,
  .ecommerce-stock-history>header::before{
    width:5px;
    height:32px;
  }
  .ecommerce-stock-scanner h2,
  .ecommerce-stock-storage-form h2,
  .ecommerce-stock-list h2,
  .ecommerce-stock-history h2{font-size:16px!important}

  .ecommerce-stock-scanner>.ecommerce-stock-receipt-actions,
  .ecommerce-stock-scanner>.ecommerce-stock-scan-row,
  .ecommerce-stock-scanner>.ecommerce-stock-feedback,
  .ecommerce-stock-scanner>.ecommerce-stock-mobile-workbench,
  .ecommerce-stock-storage-form>.ecommerce-stock-storage-grid,
  .ecommerce-stock-storage-form>.ecommerce-stock-feedback,
  .ecommerce-stock-storage-form>.ecommerce-stock-mobile-workbench,
  .ecommerce-stock-list>.ecommerce-stock-table-wrap,
  .ecommerce-stock-list>.ecommerce-stock-mobile-list,
  .ecommerce-stock-history>.ecommerce-stock-history-list{
    margin-left:12px!important;
    margin-right:12px!important;
  }

  .ecommerce-stock-scan-row{
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:10px!important;
  }
  .ecommerce-stock-scan-row input{min-height:52px!important;font-size:17px!important}
  .ecommerce-stock-scan-row button{min-height:46px!important}
  .ecommerce-stock-storage-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
}

@media(max-width:520px){
  .ecommerce-stock-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ecommerce-stock-kpis span{font-size:8px!important}
  .ecommerce-stock-storage-grid{grid-template-columns:1fr!important}
  .ecommerce-stock-storage-grid .wide{grid-column:auto!important}
  .ecommerce-stock-storage-submit{
    display:grid!important;
    grid-template-columns:1fr;
    justify-items:stretch;
  }
  .ecommerce-stock-storage-submit small{margin-right:0!important}
  .ecommerce-stock-storage-submit button{width:100%}
  .ecommerce-stock-receipt-actions{display:grid!important;grid-template-columns:1fr 1fr}
  .ecommerce-stock-receipt-actions button{width:100%}
}