/* A compact catalog layer: one surface, a quiet header, and only the body scrolls. */
dialog.detail-dialog.catalog-dialog {
  --pi-ink: #2e3a4e;
  --pi-muted: #7b879b;
  --pi-line: #eaf0f6;
  --pi-blue: var(--accent, #3765ef);
  position: fixed;
  inset: 0;
  width: min(1040px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  height: fit-content;
  min-height: 0;
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  border: 1px solid #e3e9f2;
  border-radius: 16px;
  background: #fff;
  color: var(--pi-ink);
  box-shadow: 0 18px 72px #1c315926, 0 2px 8px #1c31590a;
  font-size: 13px;
  overflow: hidden;
}

dialog.catalog-dialog[open] { display: flex; flex-direction: column; }
dialog.catalog-dialog::backdrop { background: #26385021; backdrop-filter: none; }
.catalog-dialog > .dialog-top { display: none; }
.catalog-dialog #dialog-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - 66px);
  overflow: hidden;
}
.catalog-dialog :where(button, input, select) { font: inherit; }
.catalog-dialog :where(button, a, input, select, summary):focus-visible {
  outline: 2px solid #94b0ff;
  outline-offset: 3px;
}
.catalog-dialog .icon-button { flex-shrink: 0; width: 30px; height: 30px; border-color: transparent; }
.catalog-dialog .icon-button:hover { border-color: #e5ebf5; background: #f5f7fb; }
.catalog-dialog .button { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.catalog-dialog .row-link { color: #6b80a5; font-size: 12px; }
.catalog-dialog .row-link:hover { color: var(--pi-blue); }
.catalog-dialog .badge { padding: 2px 7px; font-size: 11px; font-weight: 450; }
.catalog-dialog .muted { color: var(--pi-muted); }

.catalog-dialog .catalog-list-view,
.catalog-dialog .product-inspector {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: inherit;
}
.catalog-dialog .catalog-dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-shrink: 0;
  min-height: 54px;
  padding: 12px 22px 8px;
}
.catalog-dialog .catalog-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #72819a;
  font-size: 12px;
  text-align: left;
}
.catalog-dialog .catalog-back:hover { color: var(--pi-blue); }
.catalog-dialog .catalog-back .icon { width: 14px; height: 14px; }
.catalog-dialog .catalog-context { min-width: 0; color: var(--pi-muted); font-size: 12px; overflow-wrap: anywhere; }
.catalog-dialog .catalog-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 22px;
  flex-shrink: 0;
  min-width: 0;
  padding: 5px 26px 20px;
}
.catalog-dialog h2.catalog-title {
  min-width: 0;
  margin: 0;
  color: var(--pi-ink);
  font: 600 18px/1.5 var(--font);
  overflow-wrap: anywhere;
}
.catalog-dialog .catalog-count { flex-shrink: 0; color: var(--pi-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.catalog-dialog .catalog-count strong { color: #526580; font-weight: 550; }
.catalog-dialog .catalog-list-body {
  min-width: 0;
  min-height: 0;
  max-height: 480px;
  margin: 0 26px;
  border-top: 1px solid var(--pi-line);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d4deed transparent;
}
.catalog-dialog .catalog-list-body .table-wrap {
  min-width: 0;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.catalog-dialog .catalog-list-body table { min-width: 640px; table-layout: fixed; font-size: 12px; }
.catalog-dialog .catalog-list-body th { position: sticky; top: 0; z-index: 2; height: 36px; padding: 8px 12px; border-top: 0; background: #f8fafc; color: #7d8ba0; font-size: 11px; }
.catalog-dialog .catalog-list-body td { height: 68px; padding: 11px 12px; color: #53647c; }
.catalog-dialog .catalog-list-body th:first-child { width: 54%; }
.catalog-dialog .catalog-list-body th:nth-child(2) { width: 17%; text-align: right; }
.catalog-dialog .catalog-list-body th:nth-child(3) { width: 8%; text-align: right; }
.catalog-dialog .catalog-list-body th:nth-child(4) { width: 11%; }
.catalog-dialog .catalog-list-body th:last-child { width: 10%; }
.catalog-dialog .catalog-list-body td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.catalog-dialog .catalog-list-body td:last-child { text-align: right; }
.catalog-dialog .catalog-list-body .table-main { gap: 12px; }
.catalog-dialog .catalog-list-body .table-main > div { min-width: 0; flex: 1; }
.catalog-dialog .catalog-list-body .product-title {
  display: -webkit-box;
  width: 100%;
  max-width: 100%;
  padding: 0;
  color: #3c4d66;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalog-dialog .catalog-list-body .product-title:hover { color: var(--pi-blue); }
.catalog-dialog .catalog-list-body .product-photo,
.catalog-dialog .catalog-list-body .product-photo-fallback { width: 40px; height: 46px; border-radius: 5px; }
.catalog-dialog .catalog-list-body .product-photo { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.catalog-dialog .catalog-list-body .product-photo > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.catalog-dialog .catalog-list-body .cell-secondary { margin-top: 3px; color: #8b98ab; font-size: 11px; }
.catalog-dialog .catalog-list-body .cell-price { color: #425674; font-size: 12px; }
.catalog-dialog .catalog-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
  padding: 13px 26px 17px;
  color: var(--pi-muted);
  font-size: 12px;
}
.catalog-dialog .catalog-list-footer .pagination { margin-left: auto; gap: 7px; }
.catalog-dialog .catalog-list-footer .pagination .button { min-height: 29px; padding: 4px 9px; font-size: 12px; }

/* The product summary gives image, identity, and current values equal priority. */
.catalog-dialog .pi-hero {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  flex-shrink: 0;
  min-width: 0;
  padding: 3px 26px 20px;
}
.catalog-dialog .pi-media { min-width: 0; width: 120px; }
.catalog-dialog .pi-image,
.catalog-dialog .pi-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 140px;
  padding: 7px;
  border: 1px solid #edf0f5;
  border-radius: 9px;
  background: #f8fafc;
  overflow: hidden;
}
.catalog-dialog img.pi-image { object-fit: contain; }
.catalog-dialog .pi-image > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.catalog-dialog .pi-image .product-photo-fallback { width: 100%; height: 100%; min-height: 0; padding: 8px; border: 0; background: transparent; color: #96a4b9; font-size: 11px; line-height: 1.6; }
.catalog-dialog .pi-image [hidden] { display: none !important; }
.catalog-dialog .pi-no-image { flex-direction: column; gap: 8px; color: #a0abbd; font-size: 11px; text-align: center; }
.catalog-dialog .pi-no-image .icon { width: 28px; height: 28px; stroke-width: 1; }
.catalog-dialog .pi-thumbs { display: flex; align-items: center; gap: 5px; max-width: 120px; margin-top: 7px; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #dbe3ef transparent; }
.catalog-dialog .pi-thumb { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 33px; padding: 2px; border: 1px solid #e5eaf2; border-radius: 4px; background: #fff; overflow: hidden; }
.catalog-dialog .pi-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.catalog-dialog .pi-thumb:hover,
.catalog-dialog .pi-thumb.active,
.catalog-dialog .pi-thumb[aria-pressed='true'],
.catalog-dialog .pi-thumb[aria-selected='true'] { border-color: #799bf4; box-shadow: 0 0 0 1px #3765ef17; }
.catalog-dialog .pi-identity { min-width: 0; }
.catalog-dialog h2.pi-title {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  color: #2f3d53;
  font: 550 18px/1.55 var(--font);
  letter-spacing: -.15px;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalog-dialog h2.pi-title.expanded,
.catalog-dialog h2.pi-title.is-expanded,
.catalog-dialog h2.pi-title[data-expanded='true'] { display: block; -webkit-line-clamp: unset; }
.catalog-dialog .pi-title-toggle { display: inline-flex; align-items: center; padding: 2px 0; margin-top: 2px; border: 0; background: transparent; color: #7a8ca9; font-size: 11px; }
.catalog-dialog .pi-title-toggle:hover { color: var(--pi-blue); }
.catalog-dialog .pi-title-toggle .icon { width: 12px; height: 12px; margin-left: 4px; }
.catalog-dialog .pi-subline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; color: #7e8ca1; font-size: 12px; }
.catalog-dialog .pi-subline strong { color: #63758e; font-weight: 500; }
.catalog-dialog .pi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin-top: 5px; color: #8b98ab; font-size: 11px; overflow-wrap: anywhere; }
.catalog-dialog .pi-meta:empty { display: none; }
.catalog-dialog .pi-metrics { display: grid; grid-template-columns: minmax(280px, 2fr) repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; margin-top: 19px; }
.catalog-dialog .pi-metric { min-width: 0; font-variant-numeric: tabular-nums; }
.catalog-dialog .pi-metric > :is(small, dt, .pi-metric-label) { display: block; margin: 0 0 4px; color: #8a96a8; font-size: 11px; font-weight: 400; }
.catalog-dialog .pi-metric > :is(strong, dd, .pi-metric-value) { display: block; margin: 0; color: #3a4b64; font: 550 19px/1.5 var(--display); overflow-wrap: anywhere; }
.catalog-dialog .pi-metric > :is(strong, dd) small { color: #8b98ac; font: 11px var(--font); }
.catalog-dialog .pi-price { color: #315fe5; font: 600 22px/1.4 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.catalog-dialog .pi-metric .pi-price { color: #315fe5; font-size: 22px; }
.catalog-dialog .pi-status { display: inline-flex; align-items: center; gap: 6px; color: #268573; font: 500 14px/1.8 var(--font); }
.catalog-dialog .pi-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.catalog-dialog .pi-status[data-state='out_of_stock'] { color: #c57373; }
.catalog-dialog .pi-status[data-state='unknown'] { color: #8995a8; }

/* Tabs are navigation, not another card around the content. */
.catalog-dialog .pi-tabs { display: flex; align-items: center; flex-shrink: 0; gap: 25px; min-width: 0; padding: 0 26px; border-bottom: 1px solid var(--pi-line); }
.catalog-dialog .pi-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 1px 11px; border: 0; background: transparent; color: #7a889e; font-size: 13px; white-space: nowrap; }
.catalog-dialog .pi-tab:hover { color: #425d88; }
.catalog-dialog .pi-tab.active,
.catalog-dialog .pi-tab[aria-selected='true'] { color: var(--pi-blue); font-weight: 550; }
.catalog-dialog .pi-tab.active::after,
.catalog-dialog .pi-tab[aria-selected='true']::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--pi-blue); }
.catalog-dialog .pi-tab :is(small, .pi-tab-count) { color: #9aa6ba; font-size: 10px; font-weight: 400; }
.catalog-dialog .pi-panel { min-width: 0; min-height: 0; max-height: 520px; padding: 23px 26px 26px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d5dfed transparent; }
.catalog-dialog .pi-section { min-width: 0; margin: 0 0 23px; }
.catalog-dialog .pi-section:last-child { margin-bottom: 0; }
.catalog-dialog .pi-section > h3,
.catalog-dialog .pi-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; color: #465a76; font-size: 12px; font-weight: 550; }
.catalog-dialog .pi-section > header h3 { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }
.catalog-dialog .pi-section h3 > small { color: #94a0b3; font-size: 11px; font-weight: 400; }
.catalog-dialog .pi-section > .pi-spaced-heading { margin-top: 18px; }
.catalog-dialog .pi-section > .pi-spaced-heading:first-child { margin-top: 0; }
.catalog-dialog .pi-section > button.pi-spaced-heading { margin-top: 15px; }
.catalog-dialog .pi-overview-footer { margin-top: 1px; padding-top: 17px; border-top: 1px solid var(--pi-line); }
.catalog-dialog .pi-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
.catalog-dialog .pi-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 28px; min-width: 0; margin: 0; }
.catalog-dialog .pi-overview-grid .pi-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.catalog-dialog .pi-fact { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: baseline; gap: 10px; min-width: 0; margin: 0; line-height: 1.7; }
.catalog-dialog .pi-fact > :first-child { margin: 0; color: #8b97aa; font-size: 12px; font-weight: 400; }
.catalog-dialog .pi-fact > :last-child { min-width: 0; margin: 0; color: #51647f; font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.catalog-dialog .pi-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; min-width: 0; }
.catalog-dialog .pi-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border: 1px solid #e7edf5; border-radius: 5px; background: #fafbfe; color: #697d9b; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.catalog-dialog .pi-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; min-width: 0; margin-bottom: 14px; }
.catalog-dialog .pi-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.catalog-dialog .pi-select { min-width: 0; max-width: 190px; min-height: 32px; padding: 5px 25px 5px 9px; border: 1px solid #e4eaf3; border-radius: 6px; background-color: #fff; color: #60738f; font-size: 12px; }
.catalog-dialog .pi-search { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; min-height: 32px; padding: 5px 9px; border: 1px solid #e4eaf3; border-radius: 6px; background: #fff; color: #647995; font-size: 12px; }
.catalog-dialog .pi-search input { min-width: 0; width: 174px; max-width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #50657f; font-size: 12px; }
.catalog-dialog .pi-search .icon { width: 14px; height: 14px; color: #9aa7ba; }
.catalog-dialog .pi-search::placeholder,
.catalog-dialog .pi-search input::placeholder { color: #9aa7ba; }
.catalog-dialog .pi-search:focus-within { border-color: #94aff6; box-shadow: 0 0 0 2px #3765ef0b; }
.catalog-dialog .pi-table-wrap { min-width: 0; max-width: 100%; max-height: 360px; border: 1px solid #e9edf4; border-radius: 7px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d4deed transparent; }
.catalog-dialog .pi-table { min-width: 610px; width: 100%; table-layout: fixed; font-size: 12px; font-variant-numeric: tabular-nums; }
.catalog-dialog .pi-table th { position: sticky; top: 0; z-index: 1; height: 35px; padding: 8px 12px; border-top: 0; background: #f8fafc; color: #8190a6; font-size: 11px; font-weight: 400; }
.catalog-dialog .pi-table th:first-child { width: 36%; }
.catalog-dialog .pi-table th:nth-child(2) { width: 28%; }
.catalog-dialog .pi-table th:nth-child(3) { width: 22%; }
.catalog-dialog .pi-table th:nth-child(4) { width: 14%; }
.catalog-dialog .pi-table:has(th:nth-child(5)) th:nth-child(2) { width: 12%; }
.catalog-dialog .pi-table:has(th:nth-child(5)) th:nth-child(3) { width: 23%; }
.catalog-dialog .pi-table:has(th:nth-child(5)) th:nth-child(4) { width: 17%; }
.catalog-dialog .pi-table:has(th:nth-child(5)) th:nth-child(5) { width: 12%; }
.catalog-dialog .pi-table td { height: 43px; padding: 9px 12px; color: #586d8b; font-size: 12px; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.catalog-dialog .pi-table .cell-price { color: #47618a; font-size: 12px; }
.catalog-dialog .pi-sku-details { min-width: 0; max-width: 100%; white-space: normal; }
.catalog-dialog .pi-sku-details > summary { width: fit-content; max-width: 100%; color: #587398; font-size: 12px; line-height: 1.65; cursor: pointer; overflow-wrap: anywhere; }
.catalog-dialog .pi-sku-details > summary::marker { color: #9cafcb; font-size: 9px; }
.catalog-dialog .pi-sku-details > summary:hover { color: var(--pi-blue); }
.catalog-dialog .pi-sku-details[open] > summary { color: #3863a2; }
.catalog-dialog .pi-sku-extra { min-width: 0; max-width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e9eef5; color: #7a8da9; white-space: normal; overflow-wrap: anywhere; }
.catalog-dialog .pi-sku-extra .pi-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.catalog-dialog .pi-sku-extra .pi-facts + .pi-facts { margin-top: 10px; }
.catalog-dialog .pi-sku-extra .pi-fact { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
.catalog-dialog .pi-sku-extra .pi-fact > :first-child { font-size: 10px; overflow-wrap: anywhere; }
.catalog-dialog .pi-sku-extra .pi-fact > :last-child { font-size: 11px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.catalog-dialog .pi-sku-extra .pi-link { margin-top: 9px; font-size: 11px; }
.catalog-dialog .pi-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 13px; color: #8e9ab0; font-size: 11px; }
.catalog-dialog .pi-pagination > div { display: flex; align-items: center; gap: 8px; }
.catalog-dialog .pi-pagination .button { min-height: 28px; padding: 4px 8px; font-size: 11px; }
.catalog-dialog .pi-chart { min-width: 0; margin: 2px 0 0; padding: 8px 0; }
.catalog-dialog .pi-chart svg { display: block; width: 100%; height: auto; max-height: 200px; overflow: visible; }
.catalog-dialog .pi-chart .snapshot-chart { height: 166px; padding: 10px 1px; border: 0; border-radius: 0; background: transparent; }
.catalog-dialog .pi-chart .snapshot-chart svg { height: 100%; }
.catalog-dialog .pi-chart-range,
.catalog-dialog .pi-chart .snapshot-range { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 5px; color: #91a0b7; font-size: 11px; }
.catalog-dialog .pi-description { max-width: 100%; margin: 0; color: #627691; font-size: 12px; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; }
.catalog-dialog .pi-content-specifications .pi-fact { grid-template-columns: minmax(80px, .7fr) minmax(0, 1fr); }
.catalog-dialog .pi-content-specifications dd { white-space: pre-line; }
.catalog-dialog .pi-review-summary { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.catalog-dialog .pi-review { padding: 22px 0; border-top: 1px solid #e9eef6; }
.catalog-dialog .pi-review-heading { display: flex; align-items: center; gap: 16px; }
.catalog-dialog .pi-review-rating { color: #4265d8; font-variant-numeric: tabular-nums; }
.catalog-dialog .pi-review-meta { margin-top: 8px; color: #8493aa; font-size: 12px; overflow-wrap: anywhere; }
.catalog-dialog .pi-review-text { margin: 14px 0; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.catalog-dialog .pi-review-images { display: flex; flex-wrap: wrap; gap: 10px; }
.catalog-dialog .pi-review-images img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; }
.catalog-dialog .pi-content-status { margin: 0 0 14px; padding-left: 10px; border-left: 2px solid #ddc597; color: #938267; font-size: 11px; line-height: 1.8; }
.catalog-dialog .pi-content-no-specs { margin: 0 0 14px; }
.catalog-dialog .pi-description-body { min-width: 0; max-width: 100%; color: #627691; font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; }
.catalog-dialog .pi-description-body > * { margin: 0 0 16px; }
.catalog-dialog .pi-description-body > :last-child { margin-bottom: 0; }
.catalog-dialog .pi-description-heading { color: #465a76; font-size: 13px; font-weight: 550; line-height: 1.7; white-space: pre-line; }
.catalog-dialog .pi-description-body > .pi-description-heading:not(:first-child) { margin-top: 24px; }
.catalog-dialog .pi-description-list { padding-left: 20px; }
.catalog-dialog .pi-description-list li { padding-left: 2px; white-space: pre-line; }
.catalog-dialog .pi-description-list li + li { margin-top: 5px; }
.catalog-dialog .pi-content-table-wrap { min-width: 0; max-width: 100%; border: 1px solid var(--pi-line); border-radius: 6px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #d4deed transparent; }
.catalog-dialog .pi-content-table { min-width: 440px; width: 100%; border-collapse: collapse; table-layout: auto; font-size: 12px; }
.catalog-dialog .pi-content-table :is(th, td) { position: static; min-width: 70px; padding: 9px 12px; border: 1px solid var(--pi-line); color: #627691; font-size: 12px; text-align: left; vertical-align: top; white-space: pre-line; overflow-wrap: anywhere; }
.catalog-dialog .pi-content-table th { background: #f8fafc; color: #526783; font-weight: 550; }
.catalog-dialog .pi-description-figure { min-width: 0; max-width: 720px; }
.catalog-dialog .pi-description-figure > a { display: block; width: fit-content; max-width: 100%; }
.catalog-dialog .pi-description-figure img { display: block; width: auto; max-width: 100%; height: auto; }
.catalog-dialog .pi-description-figure .product-photo-fallback { display: block; min-height: 70px; padding: 24px; background: #f8fafc; color: #96a4b9; text-align: center; font-size: 11px; }
.catalog-dialog .pi-description-figure [hidden] { display: none !important; }
.catalog-dialog .pi-description-figure figcaption { margin-top: 5px; color: #93a0b4; font-size: 11px; line-height: 1.7; }
.catalog-dialog .pi-disclosure { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--pi-line); }
.catalog-dialog .pi-disclosure > summary { width: fit-content; padding: 3px 0; color: #7c8da6; font-size: 12px; cursor: pointer; }
.catalog-dialog .pi-disclosure[open] > summary { margin-bottom: 12px; color: #516c95; }
.catalog-dialog .pi-disclosure > summary::marker { color: #9baac0; font-size: 10px; }
.catalog-dialog .pi-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 116px; padding: 23px 12px; color: #8e9cb1; font-size: 12px; text-align: center; }
.catalog-dialog .pi-empty .icon { width: 23px; height: 23px; margin-bottom: 3px; color: #b5c0d2; stroke-width: 1.25; }
.catalog-dialog .pi-empty strong { color: #7285a3; font-size: 12px; font-weight: 450; }
.catalog-dialog .pi-empty p { max-width: 390px; color: #9aa8bd; font-size: 11px; line-height: 1.7; }
.catalog-dialog .pi-error { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; padding: 13px 15px; border: 1px solid #f0e5d6; border-radius: 6px; background: #fffcf7; color: #9b815c; font-size: 12px; }
.catalog-dialog .pi-note { margin-top: 9px; color: #93a0b4; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.catalog-dialog .pi-link { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0; border: 0; background: transparent; color: #6985bd; font-size: 12px; overflow-wrap: anywhere; }
.catalog-dialog .pi-link:hover { color: var(--pi-blue); }
.catalog-dialog .pi-link .icon { width: 12px; height: 12px; }
.catalog-dialog .pi-media > .pi-meta { justify-content: space-between; margin-top: 2px; font-size: 10px; }
.catalog-dialog .pi-original-link { margin-left: auto; font-size: 10px; }
.catalog-dialog .pi-original-link .icon { width: 10px; height: 10px; }
.catalog-dialog .pi-compare-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 5px 9px; border: 1px solid #e3eafa; border-radius: 6px; background: #f6f8fe; color: #647fac; font-size: 12px; }
.catalog-dialog .pi-compare-action:hover { border-color: #b7c9f5; background: #f1f5ff; color: var(--pi-blue); }
.catalog-dialog :is(.loading-state, .error-state, .empty-state) { min-width: 0; padding: 40px 24px; }
.catalog-dialog :is(.loading-state, .error-state, .empty-state) h2 { font-size: 15px; }

@media (min-width: 701px) and (max-width: 850px) {
  .catalog-dialog .pi-metrics { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px 18px; margin-top: 13px; }
  .catalog-dialog .pi-metric .pi-price { font-size: 19px; }
}

@media (max-width: 700px) {
  dialog.detail-dialog.catalog-dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 28px); border-radius: 13px; }
  .catalog-dialog #dialog-content { max-height: calc(100dvh - 30px); }
  .catalog-dialog .catalog-dialog-top { min-height: 45px; padding: 9px 13px 4px; }
  .catalog-dialog .catalog-heading { align-items: flex-start; flex-direction: column; gap: 5px; padding: 6px 17px 15px; }
  .catalog-dialog h2.catalog-title { font-size: 16px; }
  .catalog-dialog .catalog-list-body { max-height: 480px; margin-inline: 17px; }
  .catalog-dialog .catalog-list-footer { padding: 12px 17px 15px; }
  .catalog-dialog .pi-hero { grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 3px 14px; padding: 5px 17px 17px; }
  .catalog-dialog .pi-media { grid-column: 1; grid-row: 1 / 4; width: 100px; }
  .catalog-dialog .pi-identity { display: contents; }
  .catalog-dialog .pi-identity > .pi-title { grid-column: 2; grid-row: 1; }
  .catalog-dialog .pi-identity > .pi-title-toggle { grid-column: 2; grid-row: 2; justify-self: start; }
  .catalog-dialog .pi-identity > .pi-subline { grid-column: 2; grid-row: 3; align-self: start; }
  .catalog-dialog .pi-identity > .pi-metrics { grid-column: 1 / -1; grid-row: 4; }
  .catalog-dialog .pi-image,
  .catalog-dialog .pi-no-image { width: 100px; height: 120px; border-radius: 7px; }
  .catalog-dialog .pi-thumbs { max-width: 100px; gap: 4px; margin-top: 5px; }
  .catalog-dialog .pi-thumb { flex-basis: 29px; width: 29px; height: 31px; }
  .catalog-dialog h2.pi-title { font-size: 15px; line-height: 1.5; }
  .catalog-dialog .pi-subline { gap: 4px 9px; margin-top: 5px; font-size: 11px; }
  .catalog-dialog .pi-meta { gap: 3px 7px; font-size: 10px; }
  .catalog-dialog .pi-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 13px; margin-top: 13px; }
  .catalog-dialog .pi-metric:first-child { grid-column: 1 / -1; }
  .catalog-dialog .pi-metric > :is(small, dt, .pi-metric-label) { margin-bottom: 2px; font-size: 10px; }
  .catalog-dialog .pi-metric > :is(strong, dd, .pi-metric-value),
  .catalog-dialog .pi-metric .pi-price { font-size: 18px; line-height: 1.45; }
  .catalog-dialog .pi-metric:first-child > small:last-child:not(:first-child) { margin-top: 2px; }
  .catalog-dialog .pi-metric .pi-status { font-size: 12px; }
  .catalog-dialog .pi-tabs { justify-content: space-between; gap: 0; padding: 0 17px; }
  .catalog-dialog .pi-tab { gap: 4px; min-height: 41px; padding: 8px 5px 10px; font-size: 12px; }
  .catalog-dialog .pi-tab :is(small, .pi-tab-count) { font-size: 9px; }
  .catalog-dialog .pi-panel { max-height: 520px; padding: 18px 17px 21px; }
  .catalog-dialog .pi-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .catalog-dialog .pi-facts { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .catalog-dialog .pi-fact { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
  .catalog-dialog .pi-section { margin-bottom: 21px; }
  .catalog-dialog .pi-toolbar { gap: 8px; }
  .catalog-dialog .pi-toolbar > div { gap: 7px; }
  .catalog-dialog .pi-search { flex: 1 1 100%; width: 100%; }
  .catalog-dialog .pi-search input { width: 100%; }
  .catalog-dialog .pi-select { flex: 1 1 125px; max-width: 100%; font-size: 11px; }
  .catalog-dialog .pi-table-wrap { max-height: 325px; }
  .catalog-dialog .pi-table th,
  .catalog-dialog .pi-table td { padding-inline: 10px; }
  .catalog-dialog .pi-chart svg { max-height: 160px; }
  .catalog-dialog .pi-chart .snapshot-chart { height: 142px; }
  .catalog-dialog .pi-chart-range,
  .catalog-dialog .pi-chart .snapshot-range { gap: 8px; font-size: 10px; }
}

@media (max-width: 380px) {
  .catalog-dialog .pi-hero { gap: 3px 11px; padding-inline: 14px; }
  .catalog-dialog h2.pi-title { font-size: 14px; }
  .catalog-dialog .pi-metrics { gap: 8px; }
  .catalog-dialog .pi-metric > :is(strong, dd, .pi-metric-value),
  .catalog-dialog .pi-metric .pi-price { font-size: 14px; }
  .catalog-dialog .pi-metric .pi-status { font-size: 11px; }
  .catalog-dialog .pi-tabs { padding-inline: 14px; }
  .catalog-dialog .pi-tab { padding-inline: 3px; }
  .catalog-dialog .pi-panel { padding-inline: 14px; }
  .catalog-dialog .catalog-list-footer { font-size: 11px; }
  .catalog-dialog .catalog-list-footer .pagination .button { padding: 4px 7px; font-size: 11px; }
}

@media (prefers-reduced-motion: no-preference) {
  dialog.catalog-dialog[open] { animation: catalog-open .16s ease-out; }
  .catalog-dialog :is(.pi-thumb, .pi-tab, .catalog-back, .pi-link) { transition: color .12s, border-color .12s, background-color .12s; }
  @keyframes catalog-open { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
}