.catalogue-actions {
  margin-bottom: 18px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--app-line, rgba(255,255,255,.12));
  border-radius: 14px;
  background: var(--app-panel, #111116);
}
.catalogue-actions h3 { margin: 5px 0 6px; font-size: 24px; letter-spacing: -.04em; }
.catalogue-actions p { margin: 0; color: var(--app-muted, #92929d); font-size: 12px; }
.catalogue-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.catalogue-action-buttons button { min-height: 42px; white-space: nowrap; }
.table-tools > span { color: var(--app-muted, #92929d); font-size: 11px; }

/* The product / stock / orders strip is intentionally the only horizontal
   scroller in the manager. Keep every tab reachable without leaking width
   into the application shell. */
.store-ops-tabs {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto !important;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}
.store-ops-tabs::-webkit-scrollbar { display: none; }
.store-ops-tabs > * { flex: 0 0 auto; }

/* App surfaces should never widen the page; the scoped tab strip above is the
   deliberate exception. */
html, body, .app-shell, .workspace, .workspace > main {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
@media (max-width: 720px) {
  .catalogue-actions { align-items: stretch; flex-direction: column; padding: 18px; }
  .catalogue-action-buttons { display: grid; grid-template-columns: 1fr; }
  .catalogue-action-buttons button { width: 100%; }
}

/* Product and stock lists are cards on small screens, never a clipped table or
   horizontal scroller. Keep the image, details, values and action together. */
@media (max-width: 760px) {
  #storeOpsContent { min-width: 0; overflow-x: hidden; }
  #storeOpsContent .data-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px 12px;
    margin: 8px 0;
    padding: 14px 12px;
    border: 1px solid var(--app-line, rgba(255,255,255,.12));
    border-radius: 12px;
    background: var(--app-panel, #111116);
  }
  #storeOpsContent .data-row .data-thumb { grid-row: 1 / span 6; align-self: start; }
  #storeOpsContent .data-row .data-main { min-width: 0; }
  #storeOpsContent .data-row > span:not(.data-thumb) {
    display: block;
    grid-column: 2;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }
  #storeOpsContent .data-row > span:not(.data-thumb)::before {
    content: "";
  }
  #storeOpsContent .data-row .row-action {
    grid-column: 2;
    justify-self: start;
    min-height: 36px;
    padding: 7px 12px;
  }
  #storeOpsContent .table-tools { gap: 10px; flex-wrap: wrap; }
}

/* Final layout pass: dialogs and editors stay inside the viewport. */
#appDialog,
#appDialog .dialog-body,
#storeOpsContent,
#productForm,
.product-editor-form {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.product-editor-form {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.product-editor-form > *,
.product-editor-section,
.product-editor-more,
.product-editor-section label,
.product-editor-form input,
.product-editor-form select,
.product-editor-form textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.product-editor-form input,
.product-editor-form select,
.product-editor-form textarea { width: 100%; }
.product-editor-form .dialog-actions { min-width: 0; flex-wrap: wrap; }

/* Credit controls line up with their labels on desktop and stack cleanly on
   narrow screens instead of pushing the manager wider than the viewport. */
.customer-credit { min-width: 0; }
.customer-credit form {
  min-width: 0;
  grid-template-columns: minmax(0,1fr) minmax(100px,130px) minmax(0,1fr) auto;
  align-items: end;
}
.customer-credit form label { min-width: 0; }
.customer-credit form input { width: 100%; box-sizing: border-box; }
.customer-credit form button {
  align-self: end;
  min-width: 120px;
  min-height: 44px;
}

/* Announcements must retain readable contrast even when a saved block carries
   an accidental white background/text pair. */
.grid-item.type-announcement {
  color: #fff !important;
  background: #17131f !important;
  border-color: rgba(141,124,255,.28) !important;
}
.grid-item.type-announcement .grid-announcement,
.grid-item.type-announcement [contenteditable] {
  color: #fff !important;
  background: transparent !important;
}

/* Close controls use a quiet hit area, never a stark white square outline. */
:where(.dialog-close,#dialogClose,#closeSelection,#closeCanvasSettings,.ticket-close,.product-dialog-close,.support-dialog-close,#closeBag) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
:where(.dialog-close,#dialogClose,#closeSelection,#closeCanvasSettings,.ticket-close,.product-dialog-close,.support-dialog-close,#closeBag):focus-visible {
  outline: 2px solid rgba(141,124,255,.65) !important;
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .customer-credit form { grid-template-columns: 1fr 1fr; gap: 10px; }
  .customer-credit form label:nth-child(3),
  .customer-credit form button { grid-column: 1 / -1; }
  .customer-credit form button { width: 100%; }
}