.product-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 7px;
  padding: 0 10px;
}
.product-search-row .search { width: 100%; margin: 0; }
.refresh-products {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #16181d;
  color: #cdd2dc;
  font-size: 21px;
}
.refresh-products:hover { border-color: var(--blue); color: white; }
.refresh-products.loading { animation: spin .8s linear infinite; }
.product-list-status { padding: 9px 14px 7px; color: var(--muted); font-size: 12px; }
.product {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.product img, .product-image-fallback {
  width: 48px;
  height: 48px;
  border-radius: 7px;
  object-fit: cover;
  background: #252830;
}
.product-image-fallback { display: grid; place-items: center; color: #717987; font-size: 22px; }
.product-copy { min-width: 0; display: grid; gap: 3px; }
.product-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.option-head { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.option-visibility { display: inline-flex; align-items: center; gap: 7px; color: #cbd1dc; white-space: nowrap; }
.option-visibility input { width: 16px; height: 16px; accent-color: var(--blue); }
.load-more-products {
  width: calc(100% - 24px);
  margin: 10px 12px 16px;
  padding: 10px;
  border: 1px dashed #4b515d;
  border-radius: 8px;
  background: transparent;
  color: #c9ced9;
}
.load-more-products:hover { border-color: var(--blue); color: white; }

.value-row {
  grid-template-columns: 30px 48px 32px 96px minmax(180px, 1fr) 160px 38px;
  transition: background .15s, transform .15s;
}
.color-swatch {
  width: 30px;
  height: 30px;
  border: 1px solid #626975;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #0002;
}
.value-color {
  width: 96px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}
.value-color.invalid { border-color: #ff5d67; box-shadow: 0 0 0 2px #ff5d6722; }
.value-row.dragging { opacity: .45; transform: scale(.995); }
.value-row.drag-over { background: #173b68; box-shadow: inset 0 2px #1683ff; }
.drag-handle {
  border: 0;
  background: transparent;
  color: #808795;
  font-size: 22px;
  cursor: grab;
  padding: 5px;
}
.drag-handle:active { cursor: grabbing; }
.image-upload {
  width: 42px;
  height: 42px;
  border: 1px solid #555c68;
  border-radius: 7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #17191e;
  color: #9fa6b3;
  font-size: 20px;
}
.image-upload:hover { border-color: #1683ff; color: #65aaff; }
.image-upload img { width: 100%; height: 100%; object-fit: cover; }
.image-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.image-upload.uploading { pointer-events: none; }
.upload-spinner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff55;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 800px) {
  .value-row { grid-template-columns: 28px 44px 30px 88px minmax(120px,1fr) 105px 30px; }
}