/* BomWidgets — Category Picker */

*:has(> .bomwidgets-cats) {
  container-type: inline-size;
}

.bomwidgets-cats {
  display: grid;
  gap: 16px;
  width: 100%;
}

.bomwidgets-cats[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.bomwidgets-cats[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.bomwidgets-cats[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

/* Card */
.bomwidgets-cats__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  text-decoration: none;
  color: #1e293b;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}

.bomwidgets-cats__card:hover,
.bomwidgets-cats__card:focus-visible {
  border-color: #007ce4;
  box-shadow: 0 4px 16px rgba(0, 124, 228, 0.15);
  transform: translateY(-2px);
  text-decoration: none;
  color: #1e293b;
}

.bomwidgets-cats__card:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 124, 228, 0.1);
}

.bomwidgets-cats__card.is-active {
  border-color: #007ce4;
  background: #f0f7ff;
}

/* Icon */
.bomwidgets-cats__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.bomwidgets-cats__icon svg,
.bomwidgets-cats__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Label */
.bomwidgets-cats__label {
  font-size: 15px;
  font-family: "GreycliffCF-Bold.woff"; font-weight: 400;
  text-align: center;
  line-height: 1.3;
  color: inherit;
}

/* Compact style */
.bomwidgets-cats--compact .bomwidgets-cats__card {
  flex-direction: row;
  padding: 16px 20px;
  gap: 16px;
}

.bomwidgets-cats--compact .bomwidgets-cats__icon {
  width: 56px;
  height: 56px;
}

.bomwidgets-cats--compact .bomwidgets-cats__label {
  text-align: left;
  font-size: 14px;
}

/* Mini style — small cards, icon + text side by side */
.bomwidgets-cats--mini {
  gap: 10px;
}

.bomwidgets-cats--mini[data-columns] {
  grid-template-columns: repeat(4, minmax(0, 220px));
  justify-content: start;
}

.bomwidgets-cats--mini .bomwidgets-cats__card {
  flex-direction: row;
  padding: 10px 14px;
  gap: 10px;
  border-radius: 8px;
  border-width: 1px;
}

.bomwidgets-cats--mini .bomwidgets-cats__icon {
  width: 36px;
  height: 36px;
}

.bomwidgets-cats--mini .bomwidgets-cats__label {
  font-size: 13px;
  text-align: left;
  overflow-wrap: break-word;
  min-width: 0;
}

/* Pills style — minimal pill-shaped buttons */
.bomwidgets-cats--pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bomwidgets-cats--pills .bomwidgets-cats__card {
  flex-direction: row;
  padding: 6px 14px 6px 8px;
  gap: 8px;
  border-radius: 999px;
  border-width: 1px;
}

.bomwidgets-cats--pills .bomwidgets-cats__icon {
  width: 28px;
  height: 28px;
}

.bomwidgets-cats--pills .bomwidgets-cats__label {
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}

/* Scroll style — horizontal swipeable row */
.bomwidgets-cats--scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.bomwidgets-cats--scroll::-webkit-scrollbar {
  display: none;
}

.bomwidgets-cats--scroll .bomwidgets-cats__card {
  flex: 0 0 auto;
  width: 140px;
  scroll-snap-align: start;
  padding: 16px 12px;
  gap: 10px;
}

.bomwidgets-cats--scroll .bomwidgets-cats__icon {
  width: 56px;
  height: 56px;
}

.bomwidgets-cats--scroll .bomwidgets-cats__label {
  font-size: 13px;
}

@container (max-width: 768px) {
  .bomwidgets-cats--scroll .bomwidgets-cats__card {
    width: 120px;
    padding: 14px 10px;
    gap: 8px;
  }

  .bomwidgets-cats--scroll .bomwidgets-cats__icon {
    width: 48px;
    height: 48px;
  }

  .bomwidgets-cats--scroll .bomwidgets-cats__label {
    font-size: 12px;
  }
}

/* Responsive (grid styles only — not scroll/mini) */
@container (max-width: 768px) {
  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini)[data-columns="3"],
  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini)[data-columns="4"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini) .bomwidgets-cats__card {
    padding: 20px 12px;
    gap: 10px;
  }

  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini) .bomwidgets-cats__icon {
    width: 64px;
    height: 64px;
  }

  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini) .bomwidgets-cats__label {
    font-size: 13px;
  }

  .bomwidgets-cats--mini[data-columns] {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .bomwidgets-cats--mini .bomwidgets-cats__card {
    padding: 8px 10px;
    gap: 8px;
  }

  .bomwidgets-cats--mini .bomwidgets-cats__icon {
    width: 28px;
    height: 28px;
  }

  .bomwidgets-cats--mini .bomwidgets-cats__label {
    font-size: 12px;
  }
}

@container (max-width: 480px) {
  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini)[data-columns="2"],
  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini)[data-columns="3"],
  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini)[data-columns="4"] {
    grid-template-columns: 1fr;
  }

  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini) .bomwidgets-cats__card {
    flex-direction: row;
    padding: 16px 20px;
    gap: 16px;
  }

  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini) .bomwidgets-cats__icon {
    width: 48px;
    height: 48px;
  }

  .bomwidgets-cats:not(.bomwidgets-cats--scroll):not(.bomwidgets-cats--mini) .bomwidgets-cats__label {
    text-align: left;
    font-size: 14px;
  }

  .bomwidgets-cats--mini[data-columns] {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .bomwidgets-cats--mini .bomwidgets-cats__card {
    padding: 6px 8px;
    gap: 6px;
  }

  .bomwidgets-cats--mini .bomwidgets-cats__icon {
    width: 24px;
    height: 24px;
  }

  .bomwidgets-cats--mini .bomwidgets-cats__label {
    font-size: 11px;
  }
}