.catalogue-item-form[hidden] {
  display: none !important;
}


.item-catalogue-screen {
  width: min(100%, 1180px);
  display: none;
  background: #ffffff;
}

.item-catalogue-screen:target {
  display: block;
}

body:has(.item-catalogue-screen:target) .dashboard {
  display: none;
}

#item-catalogue .customer-header > .utility-actions.customer-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  position: absolute;
  top: 8px;
  right: 24px;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
}

#item-catalogue .search-fields {
  grid-template-columns: minmax(200px, 420px) auto auto;
}

#item-catalogue .customer-header .utility-actions.customer-actions .exit-button {
  position: relative;
  top: auto;
  right: auto;
}


.catalogue-layout {
  grid-template-columns: minmax(300px, 0.8fr) minmax(520px, 1.4fr);
}

.catalogue-sidebar {
  min-height: 560px;
}

.catalogue-style-list {
  max-height: 560px;
  overflow-y: auto;
}

.catalogue-style-button {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #dbe7ed;
  padding: 4px 12px;
  background: #fff;
  color: #17242d;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.catalogue-style-button.active {
  font-weight: 800;
  background: #f2f9fa;
  box-shadow: inset 3px 0 0 #1f6f8b;
}

.catalogue-style-button::after {
  content: "\203a";
  color: #a8a8a8;
  font-size: 24px;
  font-weight: 300;
}

.catalogue-main {
  min-width: 0;
}

.catalogue-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #eef7f7;
  border-bottom: 1px solid #dbe7ed;
}

.catalogue-panel-header h2 {
  margin: 0;
}

.catalogue-style-info {
  display: grid;
  grid-template-columns: 64px minmax(220px, 1fr);
  gap: 6px 12px;
  margin: 10px 14px 8px;
  font-size: 14px;
}

.catalogue-style-info label {
  font-size: 14px;
}

.catalogue-style-info input,
.catalogue-style-info textarea {
  width: min(100%, 680px);
  padding: 6px 10px;
  border: 1px solid #9fb9c4;
  border-radius: 6px;
  font: inherit;
  line-height: 1.35;
}

.catalogue-style-info textarea {
  min-height: 90px;
  resize: vertical;
}

.catalogue-save-status {
  min-height: 18px;
  color: #1f6f4a;
  font-size: 13px;
  font-weight: 700;
}

.catalogue-save-status.error {
  color: #c80020;
}

.catalogue-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.catalogue-picker {
  position: relative;
  width: 300px;
}

.catalogue-picker .ts-wrapper {
  width: 100%;
}

.catalogue-picker .ts-control {
  min-height: 40px;
  border-color: #b9d2dc;
  border-radius: 9px;
}

.catalogue-picker .ts-dropdown small {
  display: block;
  color: #5e7182;
  font-size: 12px;
}

.catalogue-picker-button {
  min-width: 128px;
  text-align: left;
  padding-inline: 10px 28px;
}

.catalogue-picker-button::after {
  content: "\25be";
  position: absolute;
  right: 10px;
}

.catalogue-picker-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  width: 280px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #b9d2dc;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 36, 58, 0.16);
}

.catalogue-picker-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 6px;
  border-radius: 4px;
  font-size: 13px;
}

.catalogue-picker-option:hover {
  background: #eef7f7;
}

.catalogue-picker-option input {
  margin-top: 2px;
}

.catalogue-picker-option strong,
.catalogue-picker-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalogue-picker-empty {
  padding: 8px;
  color: #687790;
  font-size: 13px;
}

.catalogue-item-form {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 12px;
  margin: 16px 40px;
  padding: 16px 20px;
  background: #f6f9fc;
  border: 1px solid #d6e0eb;
  border-radius: 10px;
  align-items: center;
}

.catalogue-item-form label {
  font-size: 13px;
  font-weight: 600;
  color: #1f3a5f;
  text-align: right;
}

.catalogue-item-form input,
.catalogue-item-form textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #bac8d9;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}

.catalogue-item-form input:focus,
.catalogue-item-form textarea:focus {
  border-color: #6b8fc7;
  box-shadow: 0 0 0 2px rgba(23, 67, 108, 0.1);
}

.catalogue-item-form textarea {
  min-height: 64px;
  resize: vertical;
}

.catalogue-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 6px;
}

.catalogue-grid {
  min-height: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start;
  gap: 14px;
  margin: 0;
  padding: 10px 18px 18px;
  border: 0;
  border-top: 1px solid #dbe7ed;
  overflow: auto;
}

.catalogue-grid > div {
  padding: 0;
  color: #10243a;
  font-size: 16px;
}

.catalogue-dashboard {
  padding: 18px;
  border-top: 1px solid #dbe7ed;
}

.catalogue-dashboard-page {
  margin: 18px;
  border: 1px solid #c8d4e1;
  background: #fff;
}

.catalogue-dashboard-page .catalogue-dashboard {
  border-top: 0;
}

.catalogue-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.catalogue-dashboard-metrics div {
  min-height: 76px;
  padding: 12px;
  border: 1px solid #cfe0e8;
  border-radius: 8px;
  background: #f7fbfc;
}

.catalogue-dashboard-metrics strong {
  display: block;
  color: #07384c;
  font-size: 24px;
  line-height: 1.1;
}

.catalogue-dashboard-metrics span {
  display: block;
  margin-top: 6px;
  color: #526575;
  font-size: 12px;
  line-height: 1.2;
}

.catalogue-dashboard-sections {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 14px;
}

.catalogue-dashboard-sections section {
  min-width: 0;
  border: 1px solid #cfe0e8;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.catalogue-dashboard-sections h3 {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #dbe7ed;
  background: #eef7f7;
  color: #07384c;
  font-size: 14px;
}

.catalogue-usage-table {
  max-height: 310px;
  overflow-y: auto;
}

.catalogue-usage-head,
.catalogue-usage-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) 110px 56px minmax(140px, 1fr);
  gap: 10px;
  align-items: center;
}

.catalogue-usage-head {
  padding: 8px 12px;
  color: #526575;
  font-size: 12px;
  font-weight: 700;
}

.catalogue-usage-row {
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid #edf2f5;
  background: #fff;
  color: #17242d;
  text-align: left;
  cursor: pointer;
}

.catalogue-usage-row:hover,
.catalogue-dashboard-list button:hover {
  background: #f3fafb;
}

.catalogue-usage-row span,
.catalogue-dashboard-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalogue-usage-row strong,
.catalogue-usage-row small,
.catalogue-dashboard-list strong,
.catalogue-dashboard-list span {
  display: block;
}

.catalogue-usage-row small,
.catalogue-dashboard-list span {
  color: #5e7182;
  font-size: 12px;
}

.catalogue-dashboard-list,
.catalogue-dashboard-types {
  max-height: 230px;
  overflow-y: auto;
}

.catalogue-dashboard-list button,
.catalogue-dashboard-types div {
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid #edf2f5;
  background: #fff;
  color: #17242d;
  text-align: left;
}

.catalogue-dashboard-types div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.catalogue-dashboard-types strong {
  color: #07384c;
}

.catalogue-dashboard-empty {
  padding: 12px;
  color: #667085;
  font-size: 14px;
}

.catalogue-card {
  min-width: 0;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  position: relative;
}

.catalogue-card-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #d0d5dd;
  border-radius: 50%;
  background: #fff;
  color: #b42318;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.catalogue-card-remove:hover {
  background: #fef3f2;
  border-color: #b42318;
}

.catalogue-card img {
  width: 128px;
  height: 150px;
  object-fit: contain;
  background: #fafafa;
}

.catalogue-card-placeholder {
  width: 128px;
  height: 150px;
  display: grid;
  place-items: center;
  background: #f4f7f8;
  color: #687790;
  font-size: 13px;
}

.catalogue-photo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.catalogue-photo-strip img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid #d1e2ea;
}

.catalogue-card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.catalogue-card h3 {
  margin: 0;
  color: #10243a;
  font-size: 14px;
}

.catalogue-card p {
  margin: 0;
  color: #27394b;
  white-space: pre-line;
}

.catalogue-all-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
}

.catalogue-all-list {
  max-height: 650px;
  overflow-y: auto;
  border: 1px solid #c8d4e1;
  background: #fff;
}

.catalogue-all-row {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #dbe7ed;
  background: #fff;
  color: #17242d;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.catalogue-all-row strong {
  font-size: 13px;
  line-height: 1.12;
}

.catalogue-all-row.active {
  background: #f0f8fb;
  box-shadow: inset 3px 0 0 #1f6f8b;
}

.catalogue-all-row img,
.catalogue-all-row span {
  width: 48px;
  height: 48px;
  margin-left: 8px;
  object-fit: contain;
  background: #f7fbfc;
}

.catalogue-all-row small {
  padding-right: 12px;
  color: #5e7182;
  font-size: 12px;
}

.catalogue-all-detail {
  min-height: 600px;
  padding: 18px;
  border: 1px solid #c8d4e1;
  background: #fff;
}

.catalogue-all-detail-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 280px);
  gap: 16px 32px;
  margin-bottom: 18px;
}

.catalogue-all-detail-head div {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
  align-items: start;
}

.catalogue-all-detail-head p {
  margin: 0;
  white-space: pre-line;
}

.catalogue-all-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.catalogue-all-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}

.catalogue-photo-item {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.catalogue-photo-item img {
  width: 260px;
  height: 330px;
  object-fit: contain;
  background: #fafafa;
}

.catalogue-photo-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #ffffff;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  justify-items: center;
  padding: 20px;
}

.catalogue-photo-zoom-toolbar {
  display: flex;
  gap: 8px;
  justify-self: center;
  margin-bottom: 8px;
}

.catalogue-photo-zoom-btn,
.catalogue-photo-zoom-close {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #bfd6e3;
  background: #ffffff;
  color: #072b3a;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.catalogue-photo-zoom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10002;
}

.catalogue-photo-zoom-stage {
  width: min(96vw, 1400px);
  height: calc(100vh - 84px);
  display: grid;
  place-items: center;
  overflow: auto;
}

.catalogue-photo-zoom-image {
  max-width: 96vw;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.1s ease-out;
}

.catalogue-photo-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.photo-zoom-stage {  
  display: flex;  
  justify-content: center;  
  align-items: flex-start;  
  width: 100%;  
  min-height: calc(100vh - 120px);  
  overflow: auto;  
  padding: 12px;  
  background: #0d1117;  
} 
.photo-zoom-stage .catalogue-photo-zoom-image {  
  max-width: none;  
  max-height: none;  
  transform-origin: top center;  
  transition: transform 0.15s ease;  
  display: block;  
}  
#photo-zoom .customer-header {  
  background: #111827;  
  padding: 10px 16px;  
  gap: 16px;  
} 
.photo-zoom-stage {  
  background: #fff;  
  display: flex;  
  justify-content: center;  
  align-items: flex-start;  
  padding: 16px;  
  overflow: auto;  
  min-height: 0;  
  flex: 1 1 auto;  
}  
.photo-zoom-stage .catalogue-photo-zoom-image {  
  max-width: 100%;  
  max-height: calc(100vh - 80px);  
  width: auto;  
  height: auto;  
  object-fit: contain;  
  transform-origin: top center;  
  display: block;  
}  
#photo-zoom {  
  display: none;  
  flex-direction: column;  
  height: 100vh;  
  background: #fff;  
}  
#photo-zoom:target {  
  display: flex;  
}  
#photo-zoom .customer-header {  
  background: #f5f6fa;  
  border-bottom: 1px solid #dde1e7;  
  padding: 10px 16px;  
  flex-shrink: 0;  
  display: flex;  
  align-items: center;  
  gap: 12px;  
} 
#photo-zoom.item-catalogue-screen {  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  z-index: 1000;  
  display: none;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  background: #fff;  
  margin: 0;  
  padding: 0;  
}  
#photo-zoom.item-catalogue-screen:target {  
  display: flex;  
}  
#photo-zoom .catalogue-photo-zoom-toolbar {  
  display: flex;  
  gap: 8px;  
  align-items: center;  
}  
#photo-zoom .customer-header {  
  width: 100%;  
  flex-shrink: 0;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  gap: 12px;  
  padding: 8px 16px;  
  background: #f5f6fa;  
  border-bottom: 1px solid #dde1e7;  
  position: relative;  
}  
#photo-zoom .customer-header .exit-button {  
  position: absolute;  
  right: 12px;  
  top: 50%;  
  transform: translateY(-50%);  
}  
#photo-zoom .photo-zoom-stage {  
  flex: 1 1 auto;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  width: 100%;  
  overflow: auto;  
  background: #fff;  
  padding: 16px;  
  min-height: 0;  
}  
#photo-zoom .photo-zoom-stage .catalogue-photo-zoom-image {  
  max-width: 100%;  
  max-height: 100%;  
  width: auto;  
  height: auto;  
  object-fit: contain;  
  transform-origin: center center;  
  display: block;  
} 
#photo-zoom.item-catalogue-screen {  
  position: fixed;  
  inset: 0;  
  z-index: 2000;  
  display: none;  
  align-items: center;  
  justify-content: center;  
  background: rgba(0,0,0,0.45);  
  padding: 24px;  
  flex-direction: row;  
  width: auto;  
  height: auto;  
  margin: 0;  
}  
#photo-zoom.item-catalogue-screen:target {  
  display: flex;  
}  
#photo-zoom .photo-zoom-card {  
  background: #fff;  
  border-radius: 10px;  
  box-shadow: 0 8px 40px rgba(0,0,0,0.28);  
  display: flex;  
  flex-direction: column;  
  max-width: 90vw;  
  max-height: 90vh;  
  min-width: 320px;  
  overflow: hidden;  
}  
#photo-zoom .photo-zoom-toolbar-bar {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  padding: 8px 12px;  
  border-bottom: 1px solid #e5e7eb;  
  background: #f9fafb;  
  flex-shrink: 0;  
  gap: 8px;  
}  
#photo-zoom .photo-zoom-stage {  
  flex: 1 1 auto;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  overflow: auto;  
  padding: 16px;  
  background: #fff;  
  min-height: 0;  
}  
#photo-zoom .photo-zoom-stage .catalogue-photo-zoom-image {  
  max-width: 80vw;  
  max-height: 80vh;  
  width: auto;  
  height: auto;  
  object-fit: contain;  
  transform-origin: center center;  
  display: block;  
} 



#catalogue-host { display: contents; }
#catalogue-host .item-catalogue-screen.catalogue-fragment-active { display: block !important; }
#catalogue-host #photo-zoom.item-catalogue-screen.catalogue-fragment-active { display: flex !important; }
body:has(#catalogue-host #item-catalogue.catalogue-fragment-active) .dashboard { display: none; }
.catalogue-fragment-error { padding: 18px; color: #b42318; }

/* ==========================================================================
   Catalogue — mobile layout (module-scoped, <=640px). Stacks the sidebar/main
   two-column layout and reduces the dashboard metric columns so nothing forces
   page-level horizontal scroll. Desktop unchanged.
   ========================================================================== */
@media (max-width: 640px) {
  .catalogue-layout {
    grid-template-columns: 1fr;
  }
  .catalogue-sidebar {
    min-height: 0;
  }
  .catalogue-style-list {
    max-height: 300px;
  }
  .catalogue-dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalogue-panel-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .catalogue-toolbar {
    flex-wrap: wrap;
    width: 100%;
  }
  .catalogue-style-info {
    grid-template-columns: 1fr;
    gap: 2px 12px;
  }
  .catalogue-style-info input,
  .catalogue-style-info textarea {
    width: 100%;
  }
}