.dwx-block { margin: 1rem 0; }
.dwx-heading { margin: 0 0 .5rem 0; font-size: 1.5rem; line-height: 1.3; }

/* ---- Slider mode ---- */
.dwx-wrap[data-mode="slider"] .dwx-scroll {
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding:.5rem .25rem;
  scrollbar-width:none;
  -ms-overflow-style: none;
  scroll-behavior:auto;
  -webkit-overflow-scrolling: touch;
}
.dwx-wrap[data-mode="slider"] .dwx-scroll::-webkit-scrollbar { display:none; height:0; width:0; }

/* ---- Grid mode (responsive) ---- */
.dwx-wrap[data-mode="grid"] .dwx-grid {
  display:grid;
  grid-template-columns: repeat(var(--dwx-cols, 3), minmax(0, 1fr));
  gap:.75rem;
  padding:.25rem 0;
}

/* Tablets and down: clamp to 2 cols */
@media (max-width: 768px) {
  .dwx-wrap[data-mode="grid"] .dwx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: single column */
@media (max-width: 480px) {
  .dwx-wrap[data-mode="grid"] .dwx-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Chip ---- */
.dwx-chip {
  white-space:nowrap;
  border:1px solid #e5e7eb;
  padding:.6rem .85rem;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:.95rem;
  line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .06s ease, background .2s ease, color .2s ease;
  background:#fff;
  color:#111;
}
.dwx-chip:hover { transform:translateY(-1px); background:#fafafa; color:#000; }

/* In grid, let chips expand nicely */
.dwx-chip--grid { width:100%; text-align:center; white-space:normal; }

@media (prefers-reduced-motion: reduce) {
  .dwx-chip { transition:none; }
}