/* ============================================================
   CORRECTO WMS
   PRODUCTS / KATALOG ARTIKALA

   Jedini page-specific stylesheet za products.html.

   Princip:
   - dense business data grid
   - desktop-first katalog
   - sticky header
   - compact rows
   - right-side product detail drawer
   - mobile cards
   - bez duplih override slojeva
   ============================================================ */


/* ============================================================
   01. PAGE
   ============================================================ */

.products-page{
  min-height:100%;
  background:var(--wms-bg);
  color:var(--wms-text);
}

.products-page .wrap{
  width:100%;
  max-width:none;
  padding:14px 16px 22px;
}


/* ============================================================
   02. HEADER
   ============================================================ */

.products-header-card{
  margin:0 0 10px;
  padding:13px 15px;
  border:1px solid var(--wms-line);
  border-radius:10px;
  background:var(--wms-surface);
  box-shadow:none;
}

.products-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.products-title-row>div:first-child{
  min-width:0;
}

.products-title-row .eyebrow{
  margin:0 0 3px;
  font-size:10px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wms-muted);
}

.products-title-row h1{
  margin:0;
  font-size:21px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.02em;
}

.products-title-row p{
  margin:3px 0 0;
  font-size:12px;
  color:var(--wms-muted);
}

.products-title-row .actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.products-title-row .actions button{
  min-height:36px;
  padding:7px 12px;
  border-radius:7px;
  font-size:12px;
  font-weight:700;
}

.products-title-row .actions #syncBizProducts{
  min-width:145px;
}


/* ============================================================
   03. SYNC STATUS
   ============================================================ */

.products-sync-health{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;

  margin-top:11px;
  padding:9px 11px;

  border:1px solid var(--wms-line);
  border-radius:8px;
  background:var(--wms-surface-2);
}

.products-sync-icon{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:7px;
  background:var(--wms-hover);

  font-size:15px;
  font-weight:900;
}

.products-sync-health strong{
  display:block;
  font-size:12px;
}

.products-sync-health p{
  margin:2px 0 0;
  color:var(--wms-muted);
  font-size:11px;
  line-height:1.3;
}

.products-sync-percent{
  min-width:65px;
  text-align:right;
}

.products-sync-percent strong{
  display:block;
  font-size:16px;
  line-height:1;
}

.products-sync-percent span{
  display:block;
  margin-top:2px;

  color:var(--wms-muted);
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}


/* ============================================================
   04. KPI
   ============================================================ */

.products-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;

  margin-top:9px;
}

.products-kpis article{
  min-width:0;
  padding:8px 10px;

  border:1px solid var(--wms-line);
  border-radius:7px;
  background:var(--wms-surface-2);
}

.products-kpis span,
.products-kpis small{
  display:block;

  color:var(--wms-muted);
  font-size:10px;
  line-height:1.25;
}

.products-kpis strong{
  display:block;

  margin-top:3px;

  font-size:17px;
  line-height:1.1;
  font-weight:800;
}

.products-kpi-wide{
  grid-column:auto;
}

.products-kpi-wide strong{
  font-size:13px;
}


/* ============================================================
   05. SEARCH / FILTER
   ============================================================ */

.products-filter-card{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 170px auto;
  align-items:end;
  gap:8px;

  margin:0 0 10px;
  padding:10px 12px;

  border:1px solid var(--wms-line);
  border-radius:9px;

  background:var(--wms-surface);
}

.products-filter-card label{
  display:grid;
  gap:4px;

  color:var(--wms-muted);
  font-size:10px;
  font-weight:700;
}

.products-search-main{
  min-width:0;
}

.products-filter-card input,
.products-filter-card select{
  width:100%;
  min-height:36px;

  padding:7px 10px;

  border:1px solid var(--wms-line);
  border-radius:6px;

  background:var(--wms-input,var(--wms-surface-2));
  color:var(--wms-text);

  font:inherit;
  font-size:12px;

  outline:none;
}

.products-filter-card input:focus,
.products-filter-card select:focus{
  border-color:var(--wms-line-strong);
}

.products-filter-card button{
  min-height:36px;
  padding:7px 12px;

  border-radius:6px;

  font-size:12px;
  font-weight:700;
}


/* ============================================================
   06. TABLE SHELL
   ============================================================ */

.products-table-card{
  overflow:hidden;

  margin:0;

  border:1px solid var(--wms-line);
  border-radius:9px;

  background:var(--wms-surface);

  box-shadow:none;
}

.products-toolbar{
  min-height:45px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:8px 10px;

  border-bottom:1px solid var(--wms-line);

  background:var(--wms-surface);
}

.products-toolbar h2{
  margin:0;

  font-size:15px;
  font-weight:800;
}

.products-toolbar .muted,
#resultInfo{
  font-size:10px;
  color:var(--wms-muted);
}

.products-page-size{
  display:flex;
  align-items:center;
  gap:6px;

  color:var(--wms-muted);

  font-size:10px;
  font-weight:700;
}

.products-page-size select{
  min-width:68px;
  min-height:30px;

  padding:4px 7px;

  border:1px solid var(--wms-line);
  border-radius:5px;

  background:var(--wms-input,var(--wms-surface-2));
  color:var(--wms-text);

  font-size:11px;
}


/* ============================================================
   07. DESKTOP DATA GRID
   ============================================================ */

.products-desktop-table{
  width:100%;
  overflow:auto;

  max-height:calc(100vh - 285px);
  min-height:300px;
}

.products-clean-table{
  width:100%;
  min-width:1080px;

  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;

  font-size:11px;
}

.products-clean-table thead{
  position:relative;
  z-index:4;
}

.products-clean-table th{
  position:sticky;
  top:0;
  z-index:5;

  height:34px;

  padding:6px 8px;

  border:0;
  border-bottom:1px solid var(--wms-line);
  border-right:1px solid var(--wms-line);

  background:var(--wms-surface-2);
  color:var(--wms-muted);

  text-align:left;

  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.025em;
  white-space:nowrap;
}

.products-clean-table th:last-child{
  border-right:0;
}

.products-clean-table td{
  height:44px;

  padding:4px 8px;

  border:0;
  border-bottom:1px solid var(--wms-line);

  background:var(--wms-surface);

  color:var(--wms-text);

  vertical-align:middle;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.products-clean-table tbody tr{
  transition:
    background .12s ease,
    box-shadow .12s ease;
}

.products-clean-table tbody tr:hover td{
  background:var(--wms-hover);
}

.products-clean-table tbody tr:last-child td{
  border-bottom:0;
}


/* column widths */

.products-clean-table .c-sku{
  width:88px;
}

.products-clean-table .c-name{
  width:auto;
  min-width:320px;
}

.products-clean-table .c-barcode{
  width:145px;
}

.products-clean-table .c-stock{
  width:82px;
  text-align:right;
}

.products-clean-table .c-location{
  width:155px;
}

.products-clean-table .c-weight{
  width:82px;
  text-align:right;
}

.products-clean-table .c-price{
  width:110px;
  text-align:right;
}

.products-clean-table .c-pack{
  width:105px;
  text-align:right;
}


/* ============================================================
   08. SKU
   ============================================================ */

.product-sku-button{
  display:inline;

  margin:0;
  padding:0;

  border:0;
  border-radius:0;

  background:transparent;

  color:var(--wms-link,#60a5fa);

  font:inherit;
  font-size:11px;
  font-weight:900;

  cursor:pointer;

  text-align:left;
}

.product-sku-button:hover{
  text-decoration:underline;
}

.product-sku-button:focus-visible{
  outline:2px solid var(--wms-line-strong);
  outline-offset:3px;
}

.mono-cell{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}


/* ============================================================
   09. PRODUCT NAME + THUMB
   ============================================================ */

.products-name-compact,
.products-name{
  min-width:0;

  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:8px;
}

.products-thumb{
  display:block;

  width:30px;
  height:30px;

  object-fit:contain;

  border:1px solid var(--wms-line);
  border-radius:5px;

  background:var(--wms-surface-2);
}

.products-thumb-empty{
  display:grid;
  place-items:center;

  width:30px;
  height:30px;

  border:1px solid var(--wms-line);
  border-radius:5px;

  color:var(--wms-muted);
  background:var(--wms-surface-2);

  font-size:10px;
}

.products-name-compact>span:last-child,
.products-name>span:last-child,
.products-name>div{
  min-width:0;
}

.products-name-compact b,
.products-name b{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:11px;
  line-height:1.2;
  font-weight:750;
}

.products-name-compact small,
.products-name small{
  display:block;

  margin-top:2px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--wms-muted);

  font-size:9px;
  line-height:1.1;
}


/* ============================================================
   10. STOCK
   ============================================================ */

.stock-value{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;

  min-width:34px;

  padding:3px 6px;

  border-radius:5px;

  background:var(--wms-surface-2);

  font-weight:850;
  font-variant-numeric:tabular-nums;
}

.stock-value.positive,
.product-mobile-card .positive{
  color:var(--wms-success,#22c55e);
}

.stock-value.zero,
.product-mobile-card .zero{
  color:var(--wms-danger,#ef4444);
}


/* ============================================================
   11. LOCATIONS
   ============================================================ */

.location-mini-wrap{
  display:flex;
  align-items:center;
  gap:4px;

  min-width:0;

  overflow:hidden;
}

.location-mini{
  display:inline-flex;
  align-items:center;

  max-width:110px;

  padding:3px 6px;

  border:1px solid var(--wms-line);
  border-radius:4px;

  background:var(--wms-surface-2);

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:9px;
  line-height:1;
  font-weight:750;
}

.location-more{
  flex:0 0 auto;

  color:var(--wms-muted);

  font-size:9px;
  font-weight:800;
}

.location-empty{
  color:var(--wms-muted);

  font-size:9px;
  font-weight:700;
}


/* ============================================================
   12. SORT
   ============================================================ */

.product-sort{
  cursor:pointer;
  user-select:none;
}

.product-sort:hover{
  color:var(--wms-text);
}


/* ============================================================
   13. PAGINATION
   ============================================================ */

.products-pagination{
  min-height:42px;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;

  padding:7px 10px;

  border-top:1px solid var(--wms-line);

  background:var(--wms-surface);
}

.products-pagination span{
  margin-right:auto;

  color:var(--wms-muted);

  font-size:10px;
}

.products-pagination button{
  min-height:29px;

  padding:4px 9px;

  border-radius:5px;

  font-size:10px;
  font-weight:750;
}


/* ============================================================
   14. MOBILE CATALOG
   ============================================================ */

.products-mobile-list{
  display:none;
}

.product-mobile-card{
  padding:11px;

  border:1px solid var(--wms-line);
  border-radius:9px;

  background:var(--wms-surface);
}

.product-mobile-card header{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:10px;

  margin:0;
  padding:0;

  background:transparent;
}

.product-mobile-image{
  width:46px;
  height:46px;

  object-fit:contain;

  border:1px solid var(--wms-line);
  border-radius:6px;

  background:var(--wms-surface-2);
}

.product-mobile-sku{
  display:block;

  color:var(--wms-link,#60a5fa);

  font-size:10px;
  font-weight:900;
}

.product-mobile-card h3{
  margin:3px 0 2px;

  font-size:13px;
  line-height:1.25;
}

.product-mobile-card header small{
  color:var(--wms-muted);

  font-size:10px;
}

.product-mobile-primary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;

  margin-top:9px;
}

.product-mobile-primary>div{
  padding:7px;

  border:1px solid var(--wms-line);
  border-radius:6px;

  background:var(--wms-surface-2);
}

.product-mobile-primary span{
  display:block;

  color:var(--wms-muted);

  font-size:9px;
}

.product-mobile-primary strong{
  display:block;

  margin-top:2px;

  font-size:12px;
}

.product-mobile-card dl{
  display:grid;
  gap:5px;

  margin:8px 0 0;
}

.product-mobile-card dl>div{
  display:flex;
  justify-content:space-between;
  gap:10px;

  padding-top:5px;

  border-top:1px solid var(--wms-line);
}

.product-mobile-card dt{
  color:var(--wms-muted);

  font-size:10px;
}

.product-mobile-card dd{
  margin:0;

  text-align:right;

  font-size:10px;
  font-weight:700;
}

.product-mobile-card>a{
  display:block;

  margin-top:9px;

  text-align:center;
}


/* ============================================================
   15. PRODUCT DETAIL
   BizniSoft-inspired right information panel
   ============================================================ */

.product-detail-modal[hidden]{
  display:none!important;
}

.product-detail-modal{
  position:fixed;
  inset:0;
  z-index:12000;

  display:block;
}

.product-detail-backdrop{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.46);
}

.product-detail-dialog{
  position:absolute;
  top:0;
  right:0;
  bottom:0;

  width:min(560px,94vw);
  max-width:none;
  max-height:none;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:0;
  border-left:1px solid var(--wms-line);
  border-radius:0;

  background:var(--wms-surface);

  box-shadow:-18px 0 45px rgba(0,0,0,.20);
}

.product-detail-head{
  position:relative;

  flex:0 0 auto;

  display:grid;
  grid-template-columns:minmax(0,1fr) 34px;
  gap:10px;

  padding:13px 14px 11px;

  border-bottom:1px solid var(--wms-line);

  background:var(--wms-surface);
}

.product-detail-head h2{
  margin:0;

  font-size:16px;
  line-height:1.25;
}

.product-detail-head p{
  margin:3px 0 0;

  color:var(--wms-muted);

  font-size:10px;
}

.product-detail-close{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  padding:0;

  border:1px solid var(--wms-line);
  border-radius:6px;

  background:var(--wms-surface-2);
  color:var(--wms-text);

  font-size:17px;
}

.product-detail-actions{
  flex:0 0 auto;

  display:flex;
  gap:6px;

  padding:7px 14px;

  border-bottom:1px solid var(--wms-line);

  background:var(--wms-surface);
}

.product-detail-actions button{
  min-height:30px;

  padding:5px 9px;

  border-radius:5px;

  font-size:10px;
  font-weight:750;
}


/* ============================================================
   16. DETAIL TABS
   ============================================================ */

.product-detail-tabs{
  flex:0 0 auto;

  display:flex;
  gap:0;

  overflow-x:auto;

  padding:0 14px;

  border-bottom:1px solid var(--wms-line);

  background:var(--wms-surface);
}

.product-detail-tabs button{
  min-height:34px;

  padding:5px 9px;

  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;

  background:transparent;
  color:var(--wms-muted);

  white-space:nowrap;

  font-size:10px;
  font-weight:750;
}

.product-detail-tabs button.active{
  border-bottom-color:var(--wms-text);

  color:var(--wms-text);
}


/* ============================================================
   17. DETAIL BODY
   ============================================================ */

.product-detail-body{
  flex:1 1 auto;

  min-height:0;

  overflow:auto;

  padding:12px 14px 24px;
}

.product-detail-summary{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:10px;

  margin-bottom:12px;
}

.product-detail-summary>div{
  min-width:0;
}

.product-detail-summary>div:nth-child(n+3){
  grid-column:1/-1;
}

.product-detail-summary>div:last-child{
  grid-column:1/-1;
}

.product-detail-image{
  width:56px;
  height:56px;

  object-fit:contain;

  border:1px solid var(--wms-line);
  border-radius:7px;

  background:var(--wms-surface-2);
}

.product-detail-summary span,
.product-api-field span{
  display:block;

  color:var(--wms-muted);

  font-size:9px;
}

.product-detail-summary strong{
  display:block;

  margin-top:2px;

  font-size:12px;
  line-height:1.25;
}


/* ============================================================
   18. DETAIL BLOCKS
   ============================================================ */

.detail-block{
  margin-top:10px;
  padding:10px;

  border:1px solid var(--wms-line);
  border-radius:8px;

  background:var(--wms-surface-2);
}

.detail-block-head,
.product-detail-section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;

  margin:0 0 8px;
}

.detail-block-head h3,
.product-detail-section-title h3{
  margin:0;

  font-size:12px;
}

.detail-block-head small,
.product-detail-section-title small{
  color:var(--wms-muted);

  font-size:9px;
}


/* ============================================================
   19. DETAIL FIELD GRID
   ============================================================ */

.product-field-grid,
.product-api-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
}

.product-field-card,
.product-api-field{
  min-width:0;

  padding:7px 8px;

  border:1px solid var(--wms-line);
  border-radius:6px;

  background:var(--wms-surface);
}

.product-field-card span{
  display:block;

  color:var(--wms-muted);

  font-size:8px;
  line-height:1.15;
}

.product-field-card strong,
.product-api-field strong{
  display:block;

  margin-top:3px;

  overflow-wrap:anywhere;

  font-size:10px;
  line-height:1.25;
}

.product-field-card.yes strong{
  color:var(--wms-success,#22c55e);
}

.product-field-card.no strong{
  color:var(--wms-muted);
}

.product-field-grid.all-fields{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.compact-notes .product-field-card strong{
  max-height:64px;
  overflow:auto;
}


/* ============================================================
   20. STOCK DETAIL
   ============================================================ */

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

.product-stock-grid article{
  padding:8px;

  border:1px solid var(--wms-line);
  border-radius:6px;

  background:var(--wms-surface);
}

.product-stock-grid span{
  display:block;

  color:var(--wms-muted);

  font-size:8px;
}

.product-stock-grid strong{
  display:block;

  margin-top:3px;

  font-size:14px;
  font-variant-numeric:tabular-nums;
}

.product-stock-grid .available strong{
  color:var(--wms-success,#22c55e);
}


/* ============================================================
   21. LOCATION DETAIL
   ============================================================ */

.product-location-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;

  margin:7px 0 10px;
}

.product-location-chips span{
  display:inline-flex;
  align-items:center;

  min-height:26px;

  padding:4px 7px;

  border:1px solid var(--wms-line);
  border-radius:5px;

  background:var(--wms-surface);

  font-size:9px;
  font-weight:750;
}

.location-detail-grid{
  display:grid;
  gap:5px;
}

.location-detail-grid article{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:7px 8px;

  border:1px solid var(--wms-line);
  border-radius:6px;

  background:var(--wms-surface);
}

.location-detail-grid article>div{
  min-width:0;
}

.location-detail-grid strong{
  display:block;

  font-size:11px;
}

.location-detail-grid article>span{
  color:var(--wms-muted);

  font-size:9px;
}

.primary-location{
  font-weight:900;
}


/* ============================================================
   22. LOCATION HISTORY
   ============================================================ */

.location-history-table{
  border:1px solid var(--wms-line);
  border-radius:6px;

  overflow:hidden;
}

.location-history-table>div{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);

  gap:8px;

  padding:6px 8px;

  border-bottom:1px solid var(--wms-line);

  font-size:9px;
}

.location-history-table>div:last-child{
  border-bottom:0;
}

.location-history-table time,
.location-history-table small{
  color:var(--wms-muted);
}


/* ============================================================
   23. LOADING / ERROR / EMPTY
   ============================================================ */

.product-detail-loading,
.product-detail-empty,
.product-detail-error,
.products-empty{
  padding:24px 14px;

  text-align:center;

  color:var(--wms-muted);

  font-size:11px;
}

.product-detail-error{
  display:grid;
  gap:8px;
}

.product-detail-error strong{
  color:var(--wms-danger,#ef4444);
}

.product-modal-open{
  overflow:hidden;
}


/* ============================================================
   24. SKELETON
   ============================================================ */

.products-skeleton td{
  height:44px;
}

.products-skeleton span,
.products-skeleton-card span{
  display:block;

  min-height:9px;

  border-radius:4px;

  background:var(--wms-hover);
}

.products-skeleton-card{
  display:grid;
  gap:7px;

  padding:11px;

  border:1px solid var(--wms-line);
  border-radius:8px;
}

.products-skeleton-card span:nth-child(1){
  width:30%;
}

.products-skeleton-card span:nth-child(2){
  width:75%;
}

.products-skeleton-card span:nth-child(3){
  width:55%;
}


/* ============================================================
   25. TABLET
   ============================================================ */

@media(max-width:1180px){

  .products-page .wrap{
    padding:10px;
  }

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

  .products-clean-table{
    min-width:1000px;
  }

  .products-desktop-table{
    max-height:calc(100vh - 300px);
  }
}


/* ============================================================
   26. MOBILE
   ============================================================ */

@media(max-width:760px){

  .products-page .wrap{
    padding:8px;
  }

  .products-header-card,
  .products-filter-card,
  .products-table-card{
    border-radius:8px;
  }

  .products-title-row{
    display:grid;
    gap:9px;
  }

  .products-title-row .actions{
    display:grid;
    grid-template-columns:1fr 1fr;

    width:100%;
  }

  .products-title-row .actions button{
    width:100%;
  }

  .products-sync-health{
    grid-template-columns:30px minmax(0,1fr);
  }

  .products-sync-percent{
    grid-column:2;
    text-align:left;
  }

  .products-kpis{
    grid-template-columns:1fr 1fr;
  }

  .products-filter-card{
    grid-template-columns:1fr;
  }

  .products-filter-card button{
    width:100%;
  }

  .products-toolbar{
    align-items:flex-start;
  }

  .products-desktop-table{
    display:none;
  }

  .products-mobile-list{
    display:grid;
    gap:7px;

    padding:8px;
  }

  .products-pagination{
    position:sticky;
    bottom:0;
    z-index:10;

    justify-content:space-between;
  }

  .products-pagination span{
    margin:0;
  }

  .product-detail-dialog{
    width:100%;
  }

  .product-detail-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .product-field-grid,
  .product-api-grid,
  .product-field-grid.all-fields{
    grid-template-columns:1fr 1fr;
  }

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


/* ============================================================
   27. VERY SMALL MOBILE
   ============================================================ */

@media(max-width:430px){

  .products-kpis{
    grid-template-columns:1fr 1fr;
  }

  .products-title-row .actions{
    grid-template-columns:1fr;
  }

  .product-mobile-primary{
    grid-template-columns:1fr 1fr;
  }

  .product-field-grid,
  .product-api-grid,
  .product-field-grid.all-fields{
    grid-template-columns:1fr;
  }

  .product-stock-grid{
    grid-template-columns:1fr 1fr;
  }

  .location-history-table>div{
    grid-template-columns:1fr;
  }
}