/* /styles/filter-notice.css
 * "N hidden by your preferences" notice — rendered by /utils/filterNotice.js.
 *
 * Deliberately quiet. This is an explanation, not a warning: the filtering it
 * describes is something the shopper asked for, so it must not read as an error
 * state. Muted surface, no red, no icon-shout.
 *
 * Colours read --leif-* tokens (styles/theme.css) with literal fallbacks so the
 * notice still renders correctly if it is ever dropped onto a page that loads
 * this file without the theme.
 */

.leif-filter-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;

  margin: 0 0 16px;
  padding: 10px 14px;

  background: var(--leif-cream, #f6f4ee);
  border: 1px solid var(--leif-border, #e3ded2);
  border-radius: 12px;

  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--leif-text-secondary, #4a4a44);
}

.leif-filter-notice__text {
  min-width: 0; /* let long counts wrap instead of forcing the row wide */
}

.leif-filter-notice__link {
  flex: none;
  color: var(--leif-action-blue, #1c4b82);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.leif-filter-notice__link:hover,
.leif-filter-notice__link:focus-visible {
  color: var(--leif-action-blue-dark, #14375f);
}

/* Phones: stack, and let the link sit left-aligned under the text rather than
   stranded on its own line to the right. */
@media (max-width: 560px) {
  .leif-filter-notice {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}