/* ===========================
   Page container
=========================== */
.tags-page {
  padding: 60px 0 2rem;  /* only top/bottom, no side padding */
  background: #fff;
  color: #000;
  max-width: 1400px;
  margin: 0 auto;
  display: block;       /* make sure it isn’t a flex/grid that centers */

}


/* ===========================
   Sticky filter toolbar
=========================== */
.tags-toolbar {
  top: 10px;                    
  z-index: 5;
  background: #fff;
  padding: .75rem 0;
  margin-bottom: 1rem;
}

/* ===========================
   Chips with sliding effect
=========================== */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0 1rem;   /* 👈 now consistent left + right padding */
}


.chip {
  position: relative;
  appearance: none;
  border: 1px solid #ccc;
  background: #f7f7f7;
  color: #222;
  padding: .45rem .8rem;
  border-radius: 999px;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition: color .25s, border-color .25s;
  z-index: 1;
  left: 15px;
  font-family: inherit;
}

/* sliding background layer */
.chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFD700;
  transform: translateY(100%);
  transition: transform .28s ease;
  z-index: 0;
}

/* keep text above sliding background */
.chip > * {
  position: relative;
  z-index: 1;
  left: 0;
}

/* hover + pressed states */
.chip:hover,
.chip[aria-pressed="true"] {
  border-color: #d1b000;
  color: #fff;
}

.chip:hover::after,
.chip[aria-pressed="true"]::after {
  transform: translateY(0);
}

/* ===========================
   Utility / States
=========================== */
.hidden { display: none !important; }

/* Keep the empty message aligned under the chips, not centered */
.empty {
  text-align: center;     /* was: center */
  color: #666;
  margin-top: 1rem;     /* was: 5rem */
  padding: 0 1rem;      /* matches your chips side padding */
}