/**
 * HotDuk shared UI components (TASK-0249).
 * Canonical implementations for pieces that had drifted into 3+ slightly
 * different per-page copies. Requires css/hotduk-tokens.css to be loaded
 * first (uses the r, gray, chip and mint token families).
 */

/* ---- Chip (category / platform / shipping) ----
   Base = detail.html hero row size. --sm = grid/list card size
   (home/search/category grids, my-activity product cards). */
.hd-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  padding: 3px 10px;
}
.hd-chip--category { background: var(--chip-category-bg); color: var(--chip-category-fg); }
.hd-chip--platform { background: var(--chip-platform-bg); color: var(--chip-platform-fg); }
.hd-chip--ship      { background: var(--gray-100); color: var(--gray-600); }
.hd-chip--ship-free { background: var(--mint-50); color: var(--mint-700); }
a.hd-chip--ship {
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
a.hd-chip--ship:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}
.hd-chip--sm {
  font-size: 11px;
  font-weight: 400;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  line-height: 1.25;
}

/* ---- Tab (category filter pill) ----
   Selected/unselected paint only — layout stays on the existing
   Tailwind utility classes (rounded-full/px-4/h-[40px]/etc) so this
   is a drop-in swap for the old inline style="" toggling. */
.hd-tab--on  { background: var(--gray-900); color: #fff; border: 1px solid var(--gray-900); }
.hd-tab--off { background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-strong); }

/* ---- Grid-card badges (list/search/category cards) ----
   Sizes match detail.html's own badges are separate/larger (.hd-hot-badge
   etc, hero context) — these are the small overlay badges on card
   thumbnails, previously duplicated inline across 7 renderCard() copies. */
.bg-hot {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  background: var(--grad-hot); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  padding: 3px 8px; border-radius: var(--r-sm);
  box-shadow: var(--shadow-hot-sm);
}
.bg-lowest {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  background: var(--deal-best); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  padding: 3px 8px; border-radius: var(--r-sm);
}
.bg-discount {
  background: var(--hot-50); color: var(--price);
  font-size: 13px; font-weight: 800; line-height: 1;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.bg-expired {
  background: rgba(17, 17, 17, .7); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1;
  padding: 4px 12px; border-radius: var(--r-sm);
}