/* Keep the original and result grid independent of source image dimensions. */
.image-search-mode #workspace {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 24px;
  overflow: hidden;
  align-content: stretch;
}
.image-search-mode #imageInput {
  grid-column: 1;
  grid-row: 1 / 3;
  margin: 0;
  width: 100%;
  max-width: none;
  min-height: 0;
  overflow: auto;
  padding-right: 12px;
  border-right: 1px solid var(--line);
}
.image-search-mode .image-mode-heading {gap: 6px; margin-bottom: 12px;}
.image-search-mode .image-mode-heading h2 {font-size: 15px;}
.image-search-mode .image-mode-heading button {font-size: 11px; padding: 3px;}
.image-search-mode #notice {grid-column: 2; grid-row: 1; margin: 0 0 8px;}
.image-search-mode #notice:empty {display: none;}
.image-search-mode #results,
.image-search-mode #results:has(.garment-group) {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 8px;
  scrollbar-gutter: stable;
}
.image-search-mode #results[hidden] {display: none;}
.image-search-mode #more {display: none;}
.region-toolbar {display: flex; gap: 4px; margin-bottom: 8px;}
.region-toolbar button, .region-list button {touch-action: manipulation;}
.region-toolbar button {width: 36px; height: 36px; padding: 7px; display: grid; place-items: center;}
.region-toolbar svg {width: 18px; height: 18px;}
.region-toolbar [aria-pressed="true"] {background: #e2eff4; border-color: #147d92; color: #09687b;}
.region-stage {position: relative; height: clamp(200px, calc(100dvh - 440px), 620px); overflow: hidden; background: #f0f2f4; touch-action: none; user-select: none; outline-offset: 2px;}
.region-plane {position: absolute;}
#regionEditor #stagedImage {display: block; width: 100%; height: 100%; max-height: none; pointer-events: none;}
.region-overlay {position: absolute; inset: 0;}
.region-box {position: absolute; border: 2px solid var(--region-color); background: #ffffff08; cursor: move;}
.region-box.active {box-shadow: 0 0 0 1px white, 0 0 0 3px var(--region-color);}
.region-box > span {position: absolute; top: 0; left: 0; min-width: 22px; height: 22px; background: var(--region-color); color: white; font-size: 12px; pointer-events: none;}
.region-box .handle {position: absolute; width: 13px; height: 13px; border: 2px solid var(--region-color); background: white; border-radius: 2px;}
.handle.nw {top: -7px; left: -7px; cursor: nwse-resize;}
.handle.ne {top: -7px; right: -7px; cursor: nesw-resize;}
.handle.sw {bottom: -7px; left: -7px; cursor: nesw-resize;}
.handle.se {bottom: -7px; right: -7px; cursor: nwse-resize;}
.region-list {display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 160px; overflow: auto;}
.region-list > div {display: flex; gap: 4px;}
.region-list button {height: 32px; min-height: 32px; font-size: 12px; padding: 4px 8px;}
.region-list [data-region-select] {flex: 1; display: flex; align-items: center; gap: 7px;}
.region-list [aria-pressed="true"] {border-color: var(--region-color);}
.region-list small {margin-left: auto; color: var(--muted);}
.region-dot {width: 8px; height: 8px; background: var(--region-color);}
.region-list [data-delete] {width: 32px; font-size: 19px;}
#regionEditor.collapsed .region-stage {height: 72px;}
#regionEditor.collapsed .region-list {display: none;}
#regionEditor.collapsed .region-overlay {display: none;}
.image-search-mode .image-stage-actions {justify-content: flex-start; gap: 8px; margin-top: 12px;}
.image-search-mode .image-run {width: 100%; min-height: 40px; justify-content: center;}
.image-search-mode .image-stage-actions .image-run {order: 1;}
.image-search-mode .comparison,
.image-search-mode .garment-group .comparison {display: block; margin-top: 0;}
.image-search-mode .comparison > section:first-child {display: none;}
.image-search-mode .comparison > section:last-child {min-width: 0;}
.image-search-mode .candidates,
.image-search-mode .comparison .candidates,
.image-search-mode .garment-group .candidates,
.image-search-mode #results .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 12px;
  overflow: visible;
  scroll-snap-type: none;
  align-items: start;
}
.image-search-mode #results .product {width: 100%; min-width: 0; border-radius: 6px; overflow: hidden;}
.image-search-mode #results .photo {width: 100%; height: auto; aspect-ratio: 3 / 4; max-height: none; min-height: 0;}
.image-search-mode #results .photo button {height: 100%; width: 100%;}
.image-search-mode #results .photo img {object-fit: contain; width: 100%; height: 100%;}
.image-search-mode #results .product-body {height: 82px; padding: 8px; overflow: hidden; box-sizing: border-box;}
.image-search-mode #results .sku-price {display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0;}
.image-search-mode #results .sku {font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;}
.image-search-mode #results .price {font-size: 11px; flex-shrink: 0;}
.image-search-mode #results .metrics {font-size: 10px;}
.image-search-mode #results .metrics b {font-size: 12px;}
.image-search-mode #results .confirm {height: 34px; min-height: 34px; font-size: 12px;}
.image-search-mode #results .reject-candidate {height: 30px; min-height: 30px; margin: 0;}
.image-search-mode .garment-group,
.image-search-mode .garment-group:not(.active) {display: block; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line);}
.image-search-mode .garment-group[hidden] {display: none;}
.image-search-mode .garment-group h2 {display: flex; font-size: 15px; margin-bottom: 8px;}
.image-search-mode .review-summary {justify-content: flex-start; flex-wrap: wrap;}
.image-search-mode .outfit-summary {position: sticky; top: 0; z-index: 2; background: white; margin: 0 0 16px; padding: 0 0 10px;}
.image-search-mode .outfit-tabs {display: flex; flex-wrap: wrap; gap: 8px;}
.image-search-mode #results > .outfit-summary .outfit-tab {min-width: 0; min-height: 44px; padding: 4px 10px;}
.image-search-mode #results > .outfit-summary .outfit-tab img {display: block; width: 28px; height: 36px; object-fit: contain;}
.image-search-mode .outfit-tab strong {font-size: 12px;}
.image-search-mode .outfit-tab small {font-size: 10px;}
.image-search-mode .candidates > .empty {grid-column: 1 / -1; padding: 28px 16px; text-align: left;}
@media (min-width: 1800px) {
  .image-search-mode .comparison .candidates,
  .image-search-mode .garment-group .candidates,
  .image-search-mode #results .grid {grid-template-columns: repeat(auto-fill, 220px);}
}
@media (max-width: 1100px) and (min-width: 761px) {
  .image-search-mode #workspace {grid-template-columns: 280px minmax(0,1fr); gap: 16px;}
  .image-search-mode .comparison .candidates,
  .image-search-mode .garment-group .candidates,
  .image-search-mode #results .grid {grid-template-columns: repeat(auto-fill, 174px);}
  .region-toolbar {gap: 1px;}
  .region-toolbar button {width: 34px;}
}
@media (max-width: 760px) {
  .image-search-mode #workspace {display: block; overflow: auto;}
  .image-search-mode #imageInput {padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible;}
  .region-stage {height: 260px;}
  .region-toolbar {gap: 6px;}
  .region-toolbar button {width: 38px; height: 38px;}
  .region-box .handle {width: 20px; height: 20px;}
  .image-search-mode #results {overflow: visible; padding: 16px 0 0;}
  .image-search-mode .comparison .candidates,
  .image-search-mode .garment-group .candidates,
  .image-search-mode #results .grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
  .image-search-mode .outfit-summary {position: static;}
  .image-search-mode .outfit-tab small {display: none;}
  .image-search-mode .outfit-tab strong {white-space: nowrap;}
  .image-search-mode .review-summary button {font-size: 11px;}
  .image-search-mode #results .product-body {height: 86px; padding: 6px;}
  .image-search-mode #results .sku-price {display: block; height: 36px;}
  .image-search-mode #results .sku {display: block; max-width: 100%;}
  .image-search-mode #results .price {display: block;}
}