/* =======================
   PLP: Active Filter Chips
   ======================= */
.plp-active{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
}

.plp-active__chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

/* チップ（pill） */
.plp-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  border-radius: 9999px;
  background: #f4f6f8;
  color: var(--c-fg);
  border: 1px solid #e5e9ef;
  text-decoration:none;
  font-size: var(--fs-sm);   /* 13px */
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.plp-chip:hover{
  background:#eef2f6;
  border-color:#dbe3ec;
}
.plp-chip__text{ white-space:nowrap; }

/* × ボタン風 */
.plp-chip__close{
  inline-size: 18px;
  block-size: 18px;
  border-radius: 9999px;
  display:grid;
  place-items:center;
  font-size: 12px;
  background:#e0e6ee;
  color:#5b6672;
  transition: background-color .15s ease, color .15s ease;
}
.plp-chip:hover .plp-chip__close{
  background:#d3dce6;
  color:#333b44;
}

/* すべてクリア */
.plp-active__clear{
  margin-left:auto;
  font-size: var(--fs-sm);
  color: var(--c-fg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plp-active__clear:hover{
  color: var(--c-fg);
}

@media (max-width: 640px){
  .plp-active{ flex-direction:column; align-items:flex-start; gap:10px; }
  .plp-active__clear{ margin-left:0; }
}