.theme-products {
  background-color: #f0f7ff;
}

/* ========== Input Fields ========== */

#productInputs {
  margin-left: 0;
  padding-left: 12px; /* or try 0 if you want edge-to-edge */
}

.productInputRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 12px;
  margin-left: 0;
}

.lookup-inline-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.metadata-toggle {
  padding: 4px 8px;
  font-size: 0.85em;
  white-space: nowrap;
}

/* ============================= */
/* Retail Metadata Panel Layout */
/* ============================= */

#retailMetaPanel {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 16px; /* ← breathing room before Notes */
  padding-top: 12px;
  padding-bottom: 6px; /* subtle bottom padding */
  border-top: 1px solid #ccc;

  display: none;
  gap: 60px;
  align-items: flex-start;
}

#retailMetaPanel {
  margin-left: 500px; /* aligns under button/input area */
}

/* When JS opens panel, it sets display to flex */
#retailMetaPanel[style*='flex'] {
  display: flex;
}

.meta-left,
.meta-right {
  display: grid;
  grid-template-columns: 90px 160px;
  row-gap: 8px;
  column-gap: 10px;
}

/* Override global 120px label width */
.meta-left label,
.meta-right label {
  width: auto;
  text-align: right;
  font-weight: normal;
}

/* Metadata input sizing */
.meta-left input,
.meta-right input,
.meta-right select {
  width: 150px;
  padding: 4px 6px;
  font-size: 0.9em;
}

label.spacer {
  width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  color: transparent; /* hides the 'm' without removing it */
}

.productInputRow label {
  width: 120px;
  text-align: right;
  font-weight: normal;
}

.productInputRow input,
.productInputRow select,
.productInputRow textarea {
  width: 150px;
  padding: 4px 6px;
  font-size: 0.95em;
}

/* Group the checkbox and limit number input together */
.inline-limit-group {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin: 0;
  white-space: nowrap; /* keep label text from wrapping */
}

.inline-limit-group label {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin: 0;
}

/* Optional: make the number input smaller */
#inpProductLimitNumber {
  width: 60px;
  padding: 4px;
  font-size: 0.9em;
}

#inpProductIsLimited {
  transform: scale(1.1); /* slightly enlarge checkbox */
  margin-top: 2px; /* fine-tune vertical alignment */
}

#inpProductLookupURL {
  width: 240px; /* smaller base width */
  flex: 0 0 240px; /* do NOT grow */
  font-size: 0.85em; /* subtle de-emphasis */
  background-color: #f7f7f7;
}

#btnProductLookup {
  padding: 5px 10px;
  font-size: 0.9em;
  white-space: nowrap;
}

#productsSection h2 {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

#inpProductNotes {
  width: 600px;
  min-height: 2.5em;
  resize: vertical;
  font-size: 1.2em;
  line-height: 1.4;
}

#productsSection .section-subheading {
  margin-top: 0;
  margin-bottom: 0.25em;
}

/* ========== Filters ========== */
.product-filter-controls fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px; /* row-gap, column-gap */
  border: none;
  padding: 0;
  margin: 0;
}

/* ========== Product Table Wrapper (Scrollable) ========== */
.product-table-wrapper {
  max-height: calc(100vh - 260px); /* tune this */
  overflow-y: auto;
  border: 1px solid #ccc;
  margin-top: 10px;
}

/* ========== Product Table ========== */
#productTable {
  width: 100%;
  table-layout: fixed; /* predictable columns */
  border-collapse: collapse;
  font-size: 0.9em;
}

/* Cells */
#productTable th,
#productTable td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header */
#productTable thead th {
  background-color: #f0f0f0;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Row Hover */
#productTable tbody tr:hover {
  background-color: #eef;
  cursor: pointer;
}

/* Selected Row */
#productTable tbody tr.selected-row {
  background-color: #ffffcc !important;
}

/* Action Buttons */
.product-action-buttons {
  display: flex;
  gap: 0.5em;
}

/* Products Displayed Message */
.products-displayed-msg {
  margin-top: 6px;
  font-style: italic;
  font-size: 0.95em;
  color: #444;
}