@layer components {
  /* "Gode kjøp akkurat nå": ordinary product cards for products at their
     60-day low; the cards' own indicators carry the price story. No
     frame - the strip and the full listing are told apart by their
     section headings, the same way the rest of the site separates
     sections. Unpadded, so its cards line up column for column with the
     grid below. */
  .good-deals {
    margin-block-end: var(--block-space-double);
  }

  .good-deals__heading,
  .listing-heading {
    display: flex;
    align-items: center;
    gap: var(--block-space-half);
    margin-block-end: var(--block-space);
    font-size: var(--text-2xl);
    font-weight: 700;
  }

  .good-deals__heading .icon {
    font-size: var(--text-xl);
    color: var(--color-positive);
  }

  /* Links every visible root's tile grid on the /kategorier hub. */
  .category-directory__heading-link {
    color: inherit;
    text-decoration: none;
  }

  .category-directory__heading-link:hover {
    color: var(--color-primary);
  }

  /* Subcategory directory on root and hub category pages: narrow product cards. */
  .category-tiles {
    --grid-layout-gap: var(--block-space);
    --grid-column-count: 5;
    --grid-item-min-width: 160px;

    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    display: grid;
    gap: var(--grid-layout-gap);
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr));
    margin-block-end: var(--block-space-double);
  }

  .category-tile {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    color: var(--color-ink);
    text-decoration: none;
    transition: box-shadow 200ms;
  }

  .category-tile:hover {
    box-shadow: var(--shadow);

    .category-tile__image {
      transform: scale(1.05);
    }

    .category-tile__name {
      color: var(--color-primary-hover);
    }
  }

  .category-tile__image {
    width: 100%;
    padding: var(--block-space);
    aspect-ratio: 4/3;
    border-block-end: 1px solid var(--color-border);
    object-fit: contain;
    transition: transform 300ms;
  }

  .category-tile__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-tag-bg);
  }

  .category-tile__image--placeholder .material-symbols-outlined {
    color: var(--color-muted);
    font-size: 4rem;
  }

  .category-tile__content {
    display: flex;
    flex-direction: column;
    padding: var(--block-space);
    gap: var(--block-space-quarter);
  }

  .category-tile__name {
    font-weight: 600;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .category-tile__count {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  /* Category tree in the filter sidebar, matching the /produkter facets.
     Indent with margin: .filter__list-item's padding-inline shorthand loads
     after this file and would override a padding-inline-start here. */
  .category-tree__child {
    margin-inline-start: var(--block-space-double);
  }

  .category-tree__link {
    display: flex;
    flex: 1;
    align-items: center;
    color: var(--color-ink);
    font-size: var(--text-sm);
    gap: var(--inline-space-half);
    min-inline-size: 0;
    text-decoration: none;
  }

  .category-tree__link:hover {
    color: var(--color-primary);
  }

  .category-tree__link--active {
    color: var(--color-primary);
    font-weight: 600;
  }
}