/* Scoped to category buttons; brand filters, inventory and product cards are untouched. */
.category-filter > button:is(.sass-liquid-button,[data-category-filter]) {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  border: 1px solid #707173; border-radius: 999px;
  color: #eeeeee; background: linear-gradient(125deg, #9b9c9e, #303235 28%, #969a9d 54%, #3b3e42 75%, #b7b9bb);
  box-shadow: 0 2px 6px #0005, inset 0 1px 0 #ffffff33;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: #e7d6ac33;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.category-filter > button:is(.sass-liquid-button,[data-category-filter])::before {
  content: ''; position: absolute; z-index: 1; inset: 4px; border-radius: inherit;
  background: linear-gradient(180deg, #242424, #111111);
  box-shadow: inset 0 1px 0 #ffffff12;
}
.category-filter > button:is(.sass-liquid-button,[data-category-filter]).is-active,
.category-filter > button:is(.sass-liquid-button,[data-category-filter])[aria-pressed="true"] {
  color: #211b10; border-color: #e9d8ae;
  background: linear-gradient(125deg, #f9e6bb, #bba16b 28%, #fff1cf 54%, #bba16b 75%, #f7e5ba);
}
.category-filter > button:is(.sass-liquid-button,[data-category-filter]).is-active::before,
.category-filter > button:is(.sass-liquid-button,[data-category-filter])[aria-pressed="true"]::before {
  background: linear-gradient(150deg, #f0e0b9, #e5d3a8);
  box-shadow: inset 0 1px 0 #ffffff77;
}
.category-filter > button:is(.sass-liquid-button,[data-category-filter]):hover {
  transform: translateY(-1px); border-color: #f0dfb7; box-shadow: 0 5px 12px #0006;
}
.category-filter > button:is(.sass-liquid-button,[data-category-filter]):active { transform: translateY(1px); }
.category-filter > button:is(.sass-liquid-button,[data-category-filter]):focus-visible { outline: 2px solid #fff3cf; outline-offset: 4px; }
.category-filter > button:is(.sass-liquid-button,[data-category-filter]):disabled { cursor: not-allowed; opacity: .55; transform: none; }
.category-filter > button:is(.sass-liquid-button,[data-category-filter]) > span:not(.sass-liquid-decoration):not(.sass-liquid-ripple),
.category-filter > button:is(.sass-liquid-button,[data-category-filter]) > small { position: relative; z-index: 3; }
.category-filter > button:is(.sass-liquid-button,[data-category-filter]) > small { color: inherit; font-variant-numeric: tabular-nums; }
.category-filter > button:is(.sass-liquid-button,[data-category-filter]) > .sass-liquid-decoration {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  overflow: hidden; display: block; pointer-events: none;
}
.category-filter > button:is(.sass-liquid-button,[data-category-filter]) > .sass-liquid-decoration canvas {
  position: absolute !important; inset: 0 !important; width: 100% !important;
  height: 100% !important; z-index: 0 !important; display: block !important; border-radius: inherit;
}
/* Native, always-on reflection: stays visible even if the shader cannot run.
   This supplements Paper's liquid-metal border, it does not pretend to be WebGL. */
.category-filter > button:is(.sass-liquid-button,[data-category-filter])::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  top: -50%; left: 0; width: 65%; height: 200%;
  background: linear-gradient(90deg, transparent 8%, #ffffff08 26%, #ffffff22 44%, #ffffff05 54%, #ffffff1c 64%, transparent 85%);
  transform: translateX(-140%) skewX(-20deg);
  animation: sass-metal-reflection 3.4s linear infinite;
}
.category-filter > button:is(.sass-liquid-button,[data-category-filter]).is-active::after,
.category-filter > button:is(.sass-liquid-button,[data-category-filter])[aria-pressed="true"]::after {
  background: linear-gradient(90deg, transparent 8%, #fff9e833 26%, #fffdf4aa 44%, #fff6d922 54%, #fff9eb66 64%, transparent 85%);
}
.category-filter > button:is(.sass-liquid-button,[data-category-filter]):hover::after { animation-duration: 2.4s; }
.category-filter > button:is(.sass-liquid-button,[data-category-filter]).sass-liquid-paused::after,
.category-filter > button:is(.sass-liquid-button,[data-category-filter]):disabled::after { animation-play-state: paused; }
@keyframes sass-metal-reflection {
  from { transform: translateX(-140%) skewX(-20deg); }
  to { transform: translateX(260%) skewX(-20deg); }
}
.category-filter > button:is(.sass-liquid-button,[data-category-filter]) > .sass-liquid-ripple {
  position: absolute; z-index: 2; width: 120px; height: 120px; border-radius: 50%;
  pointer-events: none; background: radial-gradient(circle, #ffffff77, transparent 70%);
  animation: sass-liquid-ripple 600ms ease-out forwards;
}
@keyframes sass-liquid-ripple {
  from { transform: translate(-50%, -50%) scale(.05); opacity: .65; }
  to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .category-filter > button:is(.sass-liquid-button,[data-category-filter]) { transition: none; }
  .category-filter > button:is(.sass-liquid-button,[data-category-filter]):hover,
  .category-filter > button:is(.sass-liquid-button,[data-category-filter]):active { transform: none; }
  .category-filter > button:is(.sass-liquid-button,[data-category-filter]) > .sass-liquid-ripple { display: none; animation: none; }
  .category-filter > button:is(.sass-liquid-button,[data-category-filter])::after { animation: none; opacity: 0; }
}