/* Category page (marketplace-style) — lightweight custom CSS.
   Tailwind is the main styling; this file only adds a few polish rules. */

/* Sticky toolbar shadow when pinned */
#category-toolbar {
  backdrop-filter: blur(10px);
}

/* Range input nicer thumb (works in most browsers) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #4f46e5; /* indigo-600 */
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #4f46e5;
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}

/* Product grid skeleton */
.product-skeleton {
  background: linear-gradient(90deg, rgba(229, 231, 235, 0.55), rgba(243, 244, 246, 0.95), rgba(229, 231, 235, 0.55));
  background-size: 240% 100%;
  animation: productSkeleton 1.2s ease-in-out infinite;
}
@keyframes productSkeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -120% 0; }
}

/* Make product cards feel clickable even when nested in <a> */
.product-card {
  cursor: pointer;
}

/* Active filter chips */
.af-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.18); /* indigo-500 */
  background: rgba(99, 102, 241, 0.08);
  color: #3730a3; /* indigo-800 */
  font-size: 12px;
  font-weight: 700;
}
.af-chip__x {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.16);
  color: #312e81;
  line-height: 1;
}