/* Shop page — catalogue grid. Reuses the home carousel's .card exactly; only
   the layout around it is new. Tokens only. */
@layer components {
  .shop {
    background-color: var(--cream-100);
    padding-block: var(--section-pad);
    min-height: 60vh;
  }

  .shop__intro {
    max-width: 52ch;
    margin: var(--space-4) auto 0;
    text-align: center;
  }

  .shop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 276px);
    justify-content: center;
    gap: 26px;
    margin-top: var(--space-7);

    & .card {
      flex: none;
    }
  }

  /* Card pieces the carousel doesn't have: linked image and linked name. */
  .card__media {
    display: block;
  }

  .card__name a {
    color: inherit;
    text-decoration: none;
  }

  .card:is(:hover, :focus-within) .card__name a {
    text-decoration: underline;
    text-decoration-color: var(--gold-400);
    text-underline-offset: 4px;
  }

  .card__body button.btn {
    background-color: var(--cream-50);
  }
}