/* Product catalogue: filter bar, live results and product cards. */
@layer components {
  search { display: block; }

  .filter-bar {
    margin-block-end: var(--space-3);

    & input[type="search"]:not([data-multiselect-search]) { flex: 2 1 18rem; }
    & .multiselect { flex: 1 1 14rem; max-inline-size: 22rem; }
    & .multiselect-panel { inline-size: max(100%, min(20rem, 100vw - 2rem)); }
    & [hidden] { display: none; }
  }

  .results-count {
    margin-block: 0 var(--space-4);
    color: var(--color-text-muted);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
  }

  #product-results {
    transition: opacity var(--duration);

    &[aria-busy="true"] { opacity: .55; }
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16.5rem, 100%), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    block-size: 100%;
    padding: var(--space-4) var(--space-5) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    transition: border-color var(--duration), box-shadow var(--duration), translate var(--duration);

    & p { margin: 0; }

    &:hover {
      border-color: color-mix(in oklab, var(--color-accent) 45%, var(--color-line));
      box-shadow: var(--shadow-raised);

      @media (prefers-reduced-motion: no-preference) { translate: 0 -2px; }
    }

    &:has(.product-card-title a:focus-visible) {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }

    & .badge {
      display: inline-block;
      max-inline-size: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .product-card-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: pretty;
    overflow-wrap: anywhere;

    & a {
      color: var(--color-text);
      text-decoration: none;

      &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
      &:focus-visible { outline: none; }
    }
  }

  .product-card:hover .product-card-title a { color: var(--color-accent); }

  .product-card-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: .875rem;
  }

  .product-card .product-card-price {
    margin-block-start: auto;
    padding-block-start: var(--space-2);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;

    & .muted { font-size: .9375rem; font-weight: 500; letter-spacing: 0; }
  }

  .product-card-foot {
    display: flex;
    align-items: center;
    min-block-size: 2rem;
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--color-line);
  }

  .product-card-code {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: .8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-card-foot:has(.product-card-sales) {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
  }

  .product-card-sales {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .period-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-l);

    & a {
      padding: var(--space-1) var(--space-3);
      border-radius: calc(var(--radius-l) - 3px);
      color: var(--color-text-muted);
      font-size: .875rem;
      text-decoration: none;
      white-space: nowrap;
      transition: background-color var(--duration), color var(--duration);

      &:hover { color: var(--color-text); }
      &[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-text); font-weight: 600; }
    }

    @media (width < 30rem) {
      flex-wrap: nowrap;
      inline-size: 100%;

      & a { flex: 1 1 auto; padding-inline: var(--space-1); font-size: .8125rem; text-align: center; }
    }
  }

  .chart-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    gap: var(--space-5);
    margin-block-end: var(--space-5);

    & > .card { margin-block-end: 0; min-inline-size: 0; }
  }

  :is(button, .button) > .icon { inline-size: 1rem; block-size: 1rem; flex: none; }

  .field input[readonly] {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    cursor: default;
  }

  .product-info {
    display: grid;
    gap: var(--space-1);

    & dt { color: var(--color-text-muted); font-size: .875rem; }
    & dd { margin-block-end: var(--space-3); white-space: pre-line; overflow-wrap: anywhere; }
    & dd:last-child { margin-block-end: 0; }
  }

  .badge.warn {
    background: color-mix(in oklab, #f79009 14%, var(--color-surface));
    color: light-dark(#93370d, #fec84b);
    border-color: transparent;
  }
}