/* Shared record and value preview cards opt in with .data-card.
   Catalog drawer groups retain their original field-directory styling. */
:root{
  --data-tag-ink: #1f2733;
  --data-card-surface: #fff;
  --data-card-heading: #f3f7fd;
  --data-card-border: #dce5f0;
  --data-card-line: #edf1f6;
  --data-card-shadow: 0 3px 14px rgba(40, 65, 100, .045), 0 1px 3px rgba(40, 65, 100, .025);
  --data-card-radius: 14px;
  --data-card-gap: 14px;
  --data-readonly-bg: #f1f2f4;
  --data-readonly-border: #dfe1e5;
  --data-readonly-text: #747982;
}
[data-theme="b"]{
  --data-tag-ink: #e6edf7;
  --data-readonly-bg: #282c33;
  --data-readonly-border: #3a4049;
  --data-readonly-text: #a7adb6;
  --data-card-surface: #162033;
  --data-card-heading: #1a2840;
  --data-card-border: #2b3c54;
  --data-card-line: #24334a;
  --data-card-shadow: 0 3px 14px rgba(0, 0, 0, .12);
}
html[data-theme="f"][data-color-theme="blue"]{ --data-tag-ink: #101f3c; }
/* ID specificity retires old theme material rules without changing their layout. */
html body .data-card, html body :is(#panel, #dashboardDrawer, #fieldPreviewCard, .modal-mask, .governance-mask, .geo-correction-drawer, .store-delete-dialog, .store-history-dialog) .data-card, html body .data-card#fieldPreviewCard{
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--data-card-border) !important;
  border-radius: var(--data-card-radius) !important;
  corner-shape: round;
  background: var(--data-card-surface) !important;
  background-image: none !important;
  box-shadow: var(--data-card-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body .data-card:is(.record-section, .store-info-card, .field-preview-card){
  overflow: hidden;
  padding: 0 !important;
}
html body :is(.record-sections, .store-info-main){ gap: var(--data-card-gap); }
html body .data-card > :is(.record-section-title, header, h3, h4, .field-preview-head, .anomaly-file-section-heading, .data-source-card-head, .store-delete-record-heading, .duplicate-toolbar){
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  margin: 0 !important;
  padding: 11px 16px !important;
  border: 0;
  border-bottom: 1px solid var(--data-card-line) !important;
  border-radius: 0;
  background: var(--data-card-heading) !important;
  background-image: none !important;
  color: var(--text);
}
html body .data-card > :is(h3, h4), html body .data-card > :is(.record-section-title, header, .field-preview-head, .anomaly-file-section-heading) :is(h3, h4){
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}
html body .data-card .record-section-title > span, html body .data-card .store-info-kicker{
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--data-card-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--data-card-surface));
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
html body .data-card :is(.record-section-title p, header p){
  margin: 3px 0 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}
html body .data-card > .record-fields{ padding: 3px 5px 7px; }
/* Reusable location workspace: details on the left, interactive fence on the right. */
.record-geo-workspace{ display: grid; grid-template-columns: minmax(0, 1fr) min(40%, 480px); gap: 16px; align-items: start; }
html body .data-card .record-geo-workspace > .record-fields{ grid-template-columns: minmax(0, 1fr); align-content: start; padding: 3px 5px 7px; }
html body .data-card .record-geo-workspace > .record-fields > *{ grid-column: 1 / -1; }
.record-geo-fence{ min-width: 0; padding: 15px 16px 16px 0; }
.record-geo-fence > label{ display: block; margin-bottom: 5px; color: var(--text-2); font-size: 12px; line-height: 1.5; }
.record-geo-workspace textarea{ width: 100%; overflow-wrap: anywhere; }
html body .data-card.record-geo-section > .record-geo-map{ margin: 12px 16px 16px 0; }
#panel .data-card .store-geo-map-column{ padding: 12px 16px 16px 0; }
html body .data-card > :is(.record-fields, .store-info-fields, .store-geo-content){
  background: transparent !important;
}
html body .data-card :is(.record-value, .record-fields > .form-row, .store-info-field){
  box-sizing: border-box;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--data-card-line);
  background: transparent;
}
html body .data-card :is(.record-value, .record-fields > .form-row, .store-info-field) > label, html body .data-card :is(.field-preview-table > div > span, .anomaly-file-reference dt, .data-source-card dt){
  display: block;
  margin-bottom: 5px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
html body .data-card :is(.record-value > div, .store-info-field > strong, .field-preview-table b, .anomaly-file-reference dd, .data-source-card dd){
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
html body .data-card :is(.is-empty > div, .is-empty > strong, .field-preview-table b.empty, .mall-readonly-empty){ color: var(--text-3); }
/* Opt-in stable geometry: switching mode only replaces content inside each slot. */
html body .record-layout-stable .record-fields > :is(.record-value, .form-row) > label{ height: 24px; margin-bottom: 5px; display: flex; align-items: center; }
html body .record-layout-stable :is(.data-field-value, .record-field-control){ box-sizing: border-box; height: 36px; min-height: 36px; overflow: auto; }
html body .record-layout-stable .data-field-value{ display: flex; align-items: center; }
/* Controls own their overflow; the wrapper must not add a second scrollbar. */
html body .record-layout-stable .record-field-control{ overflow: visible; }
html body .record-layout-stable .record-field-control > :is(input, select, textarea, .data-readonly-surface){ display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 100%; min-height: 0; max-height: 100%; margin: 0; font-size: 13px; line-height: 1.5; }
html body .record-layout-stable .record-field-control > textarea{ padding: 7px 10px; overflow: auto; }
html body .record-layout-stable .record-field-control:has(.precision-date-control){ overflow: visible; }
html body .record-layout-stable .record-slot-multiline :is(.data-field-value, .record-field-control){ height: 96px; }
html body .record-layout-stable .record-slot-multiline .data-field-value{ display: block; }
html body .record-layout-stable .record-geo-workspace .record-slot-multiline :is(.data-field-value, .record-field-control){ height: 58px; }
/* Project positioning values are tags, not multiline text inputs. Keep the
   locked editor surface compact while still allowing a dense tag set to wrap
   and scroll when it genuinely needs more room. */
html body .record-layout-stable .record-slot-tags :is(.data-field-value, .record-field-control){
  height: auto;
  min-height: 36px;
  max-height: 58px;
  overflow: auto;
}
html body .record-layout-stable .record-slot-tags .mall-tag-readonly{
  min-height: 36px;
  height: auto;
  padding: 5px 8px !important;
  align-items: flex-start;
}
html body .record-layout-stable .record-slot-tags .mall-tag-readonly .multi-value-tags{
  gap: 4px;
}
html body .record-layout-stable textarea{ resize: none; }
html body .record-layout-stable .data-readonly-reason{ display: none; }
html body .record-layout-stable .record-region-inputs{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; }
html body .record-layout-stable .record-region-inputs :is(input, select){ box-sizing: border-box; width: 100%; min-width: 0; height: 36px; }
html body .data-card :is(.value-tag, .store-enum-tag){
  box-sizing: border-box;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: none;
}
/* Mall foot traffic is selected by reporting month and remains read-only in
   both view and edit modes, matching the protected system-data contract. */
html body .record-layout-stable .mall-traffic-panel{
  grid-column: 1 / -1;
  min-width: 0;
  padding: 12px 14px 10px;
}
html body .mall-traffic-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 10px;
}
html body .mall-traffic-panel-head > div{ display: grid; gap: 3px; min-width: 0; }
html body .mall-traffic-panel-head b{ color: var(--text); font-size: 13px; font-weight: 550; }
html body .mall-traffic-panel-head span{ color: var(--text-3); font-size: 11px; }
html body .mall-traffic-panel-head label{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
}
html body .mall-traffic-panel-head select{
  box-sizing: border-box;
  width: 150px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
html body .mall-traffic-panel-head select:disabled{ opacity: .72; cursor: default; }
html body .mall-traffic-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
html body .mall-traffic-metric{
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 75px;
  padding: 12px 14px;
  border: 1px solid var(--data-card-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--data-card-heading) 38%, var(--data-card-surface));
}
html body .mall-traffic-metric > span{ color: var(--text-2); font-size: 12px; line-height: 1.45; }
html body .mall-traffic-metric > strong{ color: var(--text); font-size: 18px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
html body .mall-traffic-metric.is-empty > strong{ color: var(--text-3); font-size: 13px; font-weight: 400; }
html body .mall-traffic-note{ min-height: 16px; margin: 9px 2px 0; color: var(--text-3); font-size: 11px; line-height: 1.45; }
/* Annual sales uses the same full-width field rhythm as the surrounding
   mall fields. Keep the year/value columns stable so editing never shifts
   the section or makes labels collide with values. */
html body .record-fields > .mall-sales-panel{
  grid-column: 1 / -1;
  min-width: 0;
  padding: 12px 14px 10px;
  border-top: 1px solid var(--data-card-line);
  background: transparent;
}
html body .mall-sales-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 36px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--data-card-line);
}
html body .mall-sales-panel-head > div{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 12px;
  min-width: 0;
}
html body .mall-sales-panel-head b{
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
html body .mall-sales-panel-head span, html body .mall-sales-note{
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}
html body .mall-sales-panel-head .mall-sales-add{
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 11px;
  white-space: nowrap;
}
html body .mall-sales-rows{ display: grid; gap: 0; }
html body .mall-sales-row{
  display: grid;
  grid-template-columns: 150px minmax(150px, 260px) 32px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid var(--data-card-line);
}
html body .mall-sales-row[hidden]{ display: none !important; }
html body .mall-sales-row > :is(select, input){
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
html body .mall-sales-row > input::placeholder{ color: var(--text-3); }
html body .mall-sales-year, html body .mall-sales-value{
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
html body .mall-sales-year{ color: var(--text-2); }
html body .mall-sales-value{ font-variant-numeric: tabular-nums; }
html body .mall-sales-row-legacy .mall-sales-year, html body .mall-sales-row-legacy .mall-sales-value{ color: var(--text-3); }
html body .mall-sales-remove{
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
html body .mall-sales-remove:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
html body .mall-sales-empty{ padding: 11px 0; color: var(--text-3); font-size: 12px; }
html body .mall-sales-note{ min-height: 17px; margin: 8px 0 0; }
html body .mall-sales-expand{
  display: block;
  margin: 8px auto 0;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
html body .mall-sales-expand[hidden]{ display: none !important; }
html body .mall-sales-expand:hover{ background: var(--accent-soft); }
@media (max-width: 720px) {
  html body .mall-traffic-panel-head{ align-items: flex-start; flex-direction: column; }
  html body .mall-traffic-panel-head label{ justify-content: space-between; width: 100%; }
  html body .mall-traffic-panel-head select{ width: min(190px, 62%); }
  html body .mall-traffic-metrics{ grid-template-columns: 1fr; gap: 7px; }
  html body .mall-traffic-metric{ min-height: 0; padding: 10px 12px; }
  html body .mall-sales-panel-head{ align-items: flex-start; flex-direction: column; gap: 8px; }
  html body .mall-sales-panel-head .mall-sales-add{ align-self: flex-start; }
  html body .mall-sales-row{ grid-template-columns: minmax(112px, .8fr) minmax(120px, 220px) 32px; gap: 8px; }
}
html body .data-card:is(.bq-card, .data-source-card, .data-lineage-card, .anomaly-file-reference, .coordinate-reference, .store-delete-record){ padding: 16px; }
html body .data-card:is(.bq-card, .data-source-card, .data-lineage-card, .anomaly-file-reference, .coordinate-reference, .store-delete-record) > :is(header, h3, h4, .anomaly-file-section-heading, .data-source-card-head, .store-delete-record-heading){
  margin: -16px -16px 14px !important;
  border-radius: 12px 12px 0 0;
}
html body .governance-detail-grid > .data-card{ padding: 16px; }
html body .governance-detail-grid > .data-card > h4{ margin: -16px -16px 14px !important; border-radius: 12px 12px 0 0; }
html body .data-card > :is(.record-snapshots, .record-empty-note){ padding: 14px 16px; }
.field-record-actions{ display: flex; gap: 8px; padding-top: 16px; }
html body .data-card.geo-original-address{ padding: 12px 14px; }
html body .data-card.geo-correction-summary{ padding: 12px 14px; }

/* One locked-field surface; readonly date pickers opt out with data-picker-input.
   Disabled buttons and temporary dependent selects are separate UI states. */
/* Important state declarations in this layer outrank unlayered theme rules, including their !important declarations, without page-specific selectors. */
@layer data-field-state{
html body :is(.data-readonly-surface, input[readonly]:not([data-picker-input]):not([type="hidden"]), textarea[readonly]) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  height: auto;
  padding: 7px 10px !important;
  border: 1px solid var(--data-readonly-border) !important;
  border-radius: 8px !important;
  background: var(--data-readonly-bg) !important;
  background-image: none !important;
  color: var(--data-readonly-text) !important;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  opacity: 1;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: not-allowed !important;
  caret-color: transparent;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
html body .data-readonly-surface { display: flex; align-items: center; overflow-wrap: anywhere; cursor: not-allowed !important; }
html body :is(.data-readonly-surface, input[readonly]:not([data-picker-input]), textarea[readonly]):is(:hover, :focus) {
  border-color: var(--data-readonly-border) !important;
  background: var(--data-readonly-bg) !important;
  box-shadow: none !important;
  outline: none;
}
html body :is(.data-readonly-surface, input[readonly]:not([data-picker-input]), textarea[readonly]):focus-visible {
  outline: 2px solid var(--text-3) !important;
  outline-offset: 2px;
}
html body .data-readonly-content { display: block; width: 100%; min-width: 0; color: inherit; overflow-wrap: anywhere; }
html body .data-readonly-surface * { user-select: none !important; -webkit-user-select: none !important; cursor: not-allowed !important; }
}

/* Required labels share one marker in every record editor and dialog. */
html body .data-required-mark{
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
}
html body .data-readonly-content:empty::before{ content: '—'; color: var(--text-3); }
html body .data-readonly-reason{ display: block; margin-top: 4px; color: var(--text-3); font-size: 11px; line-height: 1.45; }
html body .data-readonly-surface .multi-value-tags, html body .data-readonly-surface .mall-composition-tags{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
html body .data-readonly-surface .mall-readonly-empty{ color: var(--text-3); }
#panel .data-card .mall-composition-readonly{
  align-self: stretch;
}
#panel .data-card .mall-composition-summary{ padding-bottom: 8px; border-bottom: 1px solid var(--data-card-line); }
#panel .data-card .mall-composition-summary > strong{ font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  html body .data-card > :is(.record-section-title, header, h3, h4){ padding-inline: 12px !important; }
  html body .data-card :is(.record-value, .record-fields > .form-row, .store-info-field){ padding: 11px 12px; }
}
@media (max-width: 900px) {
  .record-geo-workspace{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .record-geo-fence{ padding: 12px 16px 16px; }
  html body .data-card.record-geo-section > .record-geo-map{ margin: 0 16px 16px; }
}
@media (max-width: 720px) {
  #panel .data-card .store-geo-map-column{ padding: 0 12px 12px; }
}

/* Semantic values have one owner across cards, lists, previews and dialogs. */
html body .data-value, html body .data-card .data-value{ color: var(--text); font: inherit; font-weight: 400; overflow-wrap: anywhere; }
/* List values follow the store table's body typography; tags and empty states
   retain their semantic colours and sizing. Detail cards keep their own rhythm. */
html body :is(.data-record-table,.brand-store-table) td > .data-value{ color:inherit; line-height:inherit; }
html body .data-value-numeric{ font-variant-numeric: tabular-nums; }
html body .data-value-multiline{ white-space: pre-wrap; line-height: 1.6; }
html body .data-empty{ color: var(--text-3) !important; font-weight: 400 !important; }
html body .data-tags{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; }
html body .data-tag, html body .data-card .data-tag{
  --data-tag-tone: #438aee;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  height: auto;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--data-tag-tone) 28%, var(--data-card-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--data-tag-tone) 10%, var(--data-card-surface));
  color: color-mix(in srgb, var(--data-tag-tone) 78%, var(--data-tag-ink));
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  box-shadow: none;
}
html body .data-tag[data-tone="province"], html body .data-tag[data-tone="blue"]{ --data-tag-tone: #438aee; }
html body .data-tag[data-tone="city"], html body .data-tag[data-tone="purple"]{ --data-tag-tone: #8a65ce; }
html body .data-tag[data-tone="district"], html body .data-tag[data-tone="teal"]{ --data-tag-tone: #299b96; }
html body .data-tag[data-tone="green"]{ --data-tag-tone: #2d8a70; }
html body .data-tag[data-tone="red"]{ --data-tag-tone: #c45b5b; }
html body .data-tag[data-tone="amber"]{ --data-tag-tone: #b77718; }
html body .data-tag[data-tone="neutral"]{ --data-tag-tone: #748397; }
html body .data-region .data-tag{ white-space: nowrap; }
html body .data-value[data-value-kind="status"] > .data-tag, html body .data-tag.store-coordinate-quality, html body .data-card .data-tag.store-coordinate-quality{
  white-space: nowrap;
  overflow-wrap: normal;
  flex-shrink: 0;
  max-width: none;
}
html body .data-field .data-field-value{ min-width: 0; color:var(--text); font-size:13px; line-height:1.6; font-weight:400; }
html body .brand-store-region-tags.data-region{ flex-wrap: nowrap; gap: 4px; }

.region-select-error:not([hidden]){ display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--danger, #b9473e); font-size: 12px; }

/* Sticky headers must occlude rows even when the surrounding theme uses glass. */
html body #panel table thead th{
  background: var(--data-card-heading) !important;
  background-image: none !important;
}
/* Object context stays fixed while related datasets switch in place. */
.mall-related-record [data-mall-panel][hidden]{ display:none !important; }
.mall-data-tabs{ display:flex; flex-wrap:wrap; gap:6px; padding:12px 0; border-bottom:1px solid var(--border); }
.mall-data-tabs button{ padding:7px 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-2); font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background-color .15s ease,border-color .15s ease,color .15s ease; }
.mall-data-tabs button:hover{ background:color-mix(in srgb,var(--accent) 5%,var(--panel)); border-color:color-mix(in srgb,var(--accent) 12%,var(--border)); color:var(--text); }
.mall-data-tabs button[aria-selected=true]{ border-color:color-mix(in srgb,var(--accent) 28%,var(--border)); color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,var(--panel)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--panel) 55%,transparent); }
.mall-data-tabs button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .mall-data-tabs button{ transition:none; } }
.mall-related-record .mall-definition-button{ margin-left:auto; flex-shrink:0; font-size:12px; }
.mall-indicator-scope{ margin:0; padding:0 16px 16px; color:var(--text-3); font-size:12px; line-height:1.6; }
.mall-related-empty{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:42px 20px; text-align:center; }
.mall-related-empty b{ color:var(--text); font-size:14px; font-weight:600; }
.mall-related-empty p{ margin:0; color:var(--text-2); font-size:13px; }
.mall-related-empty span{ color:var(--text-3); font-size:12px; }
.mall-related-empty .btn{ margin-top:6px; }