/* Compact live controls with the supplied Luvia 3D icon identity. */
.chips.chips-badges {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:7px 0 0;
  padding:8px 2px 12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-padding-inline:2px;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
}
.chips.chips-badges>button,.chips.chips-badges>a {
  position:relative;
  isolation:isolate;
  flex:0 0 auto;
  justify-content:flex-start;
  gap:5px;
  min-height:48px;
  margin:0;
  padding:2px 14px 2px 3px;
  border:1px solid #e8e4df;
  border-radius:999px;
  background:#fffdfb;
  color:#363634;
  box-shadow:0 2px 4px #30291f05;
  font-size:12px;
  font-weight:500;
  letter-spacing:-.1px;
  white-space:nowrap;
  scroll-snap-align:start;
  transition:border-color .2s ease,background .2s ease;
}
.chips.chips-badges>button:hover,.chips.chips-badges>a:hover {
  background:#fff7ee;
  border-color:#d9c5ae;
  color:#2c2d2c;
}
.chips.chips-badges>[data-category=all].chip-on {
  background:#2d2e2c;
  color:#fffaf4;
  border-color:#3d3e3b;
  box-shadow:none;
}
.chips.chips-badges>.chip-on:not([data-category=all]) {
  background:#fff2e5;
  color:#3b2e21;
  border-color:#d5b897;
}
.badge-art {
  display:block;
  flex:none;
  width:56px;
  height:56px;
  margin:-6px;
  background-image:url('../assets/2032/badges/luvia-badge-icons-v2.webp');
  background-size:300% 200%;
  background-repeat:no-repeat;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.badge-art--heart {
  background-position:0 0;
  mix-blend-mode:normal;
  clip-path:ellipse(33% 32.5% at 53% 53.5%);
}
.badge-art--spa {background-position:50% 0}
.badge-art--nature {background-position:100% 0}
.badge-art--moon {background-position:0 100%}
.badge-art--nearby {background-position:50% 100%}
.badge-art--filters {background-position:100% 100%;width:44px;height:44px;margin-inline:-3px -4px}
.badge-state {display:none;flex:none;width:6px;height:6px;margin-left:2px;border-radius:50%;background:#f4bd94}
.chip-on>.badge-state {display:block}
.chips.chips-badges #filter-count {display:grid;place-items:center;min-width:18px;height:18px;margin-left:1px;padding:0 4px;border-radius:50%;background:#f4d9bf;color:#3c2a1b;font-size:10px;font-weight:600}
.chips.chips-badges>button:focus-visible,.chips.chips-badges>a:focus-visible {outline:2px solid #c28957;outline-offset:3px}
.chips.chips-badges>button:disabled {cursor:progress}
@media(max-width:900px){
  .chips.chips-badges{justify-content:flex-start}
}
@media(max-width:760px){
  .chips.chips-badges{margin:5px 0 0;padding:7px 2px 10px;gap:7px}
  .chips.chips-badges>button,.chips.chips-badges>a{font-size:11px;min-height:44px;padding:2px 12px 2px 3px;gap:4px}
  .badge-art{width:49px;height:49px;margin:-5px}
  .badge-art--filters{width:39px;height:39px;margin-inline:-3px -4px}
  .badge-state{width:5px;height:5px;margin-left:2px}
}
@media(prefers-reduced-motion:reduce){
  .chips.chips-badges{scroll-behavior:auto}
  .chips.chips-badges>button,.chips.chips-badges>a{transition:none}
}