/* Social proof (Connector C16, approved docs/roadmap/design/C16/ "Product page", "Category page", "Elementor widget").
   Inside .dsec-ui only, colours from the --dsec-* tokens; the Elementor widget sets --dsec-mk-text, --dsec-mk-icon
   and the font. Quiet lines, no popups (D3), nothing drawn under the minimums. */

.dsec-ui.dsec-mk { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 16px; container-type: normal; }
.dsec-ui .dsec-mk__line { display: flex; align-items: center; gap: 8px; font: 400 14px/1.45 var(--dsec-mk-font, var(--dsec-font)); color: var(--dsec-mk-text, var(--dsec-text)); }
.dsec-ui .dsec-mk__line.is-strong { color: var(--dsec-mk-strong, var(--dsec-ink)); font-weight: 600; }
.dsec-ui .dsec-mk__icon { display: inline-flex; flex: 0 0 auto; color: var(--dsec-mk-icon, var(--dsec-gold-text)); }
.dsec-ui .dsec-mk__icon .dsec-ic { width: 16px; height: 16px; }
.dsec-ui .dsec-mk__pv {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 10px;
  border-radius: 999px; background: var(--dsec-warning-tint); color: var(--dsec-warning-text); font: 500 12px/1.6 var(--dsec-font);
}
.dsec-ui .dsec-mk__pv .dsec-ic { width: 14px; height: 14px; }

/* The category grid's tag on the photo (top left; under the Sale badge when the piece is on sale). */
li.product:has(> .dsec-mk-tag) { position: relative; }
.dsec-ui.dsec-mk-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 9px; border: 1px solid var(--dsec-line);
  border-radius: 999px; background: #fff; color: var(--dsec-ink); font: 600 11px/1.4 var(--dsec-font); pointer-events: none;
  container-type: normal; white-space: nowrap;
}
.dsec-ui.dsec-mk-tag--low { top: 44px; }

.dsec-mk-attr { font-size: 13px; color: #6b7280; }