/* Component: ProductCard --------------------------------------------------- */
@layer components {
  .tp-product-card {
    display: block;
  }

  /* Image well: 4:5 as exported (268 × 330 / 224 × 280 / 72vw × 300). */
  .tp-product-card__media {
    display: block;
    position: relative;
    width: 100%;
    background: var(--tp-color-paper-well);
    border: 1px solid var(--tp-color-line-well);
    overflow: hidden;
    transition: border-color var(--tp-dur-fast) ease;
  }

  .tp-product-card__media:hover {
    border-color: var(--tp-color-brass-light);
  }

  .tp-product-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .tp-product-card__no {
    position: absolute;
    left: 0;
    top: 0;
    padding: 6px 10px;
    background: var(--tp-color-badge-bg);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-cta);
    text-transform: uppercase;
    color: var(--tp-color-gold-text-deep);
  }

  .tp-product-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tp-space-3);
    margin-top: 14px;
  }

  .tp-product-card__title {
    font-size: var(--tp-size-card-title-l);
    letter-spacing: var(--tp-track-tight);
    line-height: 1.25;
    color: var(--tp-color-text);
  }

  .tp-product-card__title:hover {
    color: var(--tp-color-cobalt);
  }

  .tp-product-card__line {
    margin: 6px 0 10px;
    font-size: var(--tp-size-body-s);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    line-height: 1.5;
    color: var(--tp-color-text-muted);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .tp-product-card__meta {
    margin: 0 0 10px;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-meta);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
  }

  .tp-product-card__price {
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-xl);
    letter-spacing: var(--tp-track-meta);
    color: var(--tp-color-ink);
  }

  .tp-product-card__price del {
    color: var(--tp-color-text-muted);
    margin-right: 8px;
  }

  .tp-product-card__price ins {
    text-decoration: none;
  }

  /* ---- findings variant: fixed rail widths from the exports -------------- */
  .tp-product-card--findings {
    flex: none;
    width: 268px;
  }

  .tp-product-card--findings .tp-product-card__media {
    height: 330px;
  }

  @media (max-width: 1099px) {
    .tp-product-card--findings {
      width: 224px;
    }

    .tp-product-card--findings .tp-product-card__media {
      height: 280px;
    }
  }

  @media (max-width: 699px) {
    .tp-product-card--findings {
      width: 72vw;
      max-width: 280px;
      scroll-snap-align: center;
    }

    .tp-product-card--findings .tp-product-card__media {
      height: 300px;
    }
  }

  /* ---- grid variant: 4:5 well, catalogue columns ------------------------- */
  .tp-product-card--grid .tp-product-card__media {
    aspect-ratio: 4 / 5;
  }

  /* The ratio is carried by the image itself rather than by a percentage
     height inside the well: a percentage height cannot resolve against a box
     that is sized by aspect-ratio, which left square source images letterboxed.
     Demo photography is square and is cropped here, never distorted; nothing
     is written back to the attachment. */
  .tp-product-card--grid .tp-product-card__img {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
  }

  .tp-product-card--grid .tp-product-card__head {
    margin-top: 13px;
  }

  .tp-product-card--grid .tp-product-card__title {
    font-size: var(--tp-size-card-title);
  }

  .tp-product-card--grid .tp-product-card__meta {
    margin: 5px 0 0;
  }

  .tp-product-card--grid .tp-product-card__price {
    margin-top: 7px;
  }

  /* ---- related variant: photograph, title, price ------------------------ */
  .tp-product-card--related .tp-product-card__media {
    aspect-ratio: 4 / 5;
  }

  .tp-product-card--related .tp-product-card__img {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
  }

  .tp-product-card--related .tp-product-card__head {
    margin-top: var(--tp-space-3);
  }

  .tp-product-card--related .tp-product-card__title {
    font-size: var(--tp-size-card-title);
  }

  .tp-product-card--related .tp-product-card__price {
    margin-top: 5px;
  }
}