/* Component: ProductDetail ------------------------------------------------- */
@layer components {
  .tp-product__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tp-space-3);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-nav-header);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
  }

  .tp-product__crumb {
    color: var(--tp-color-gold-text);
  }

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

  .tp-product__crumb--current {
    color: var(--tp-color-text);
  }

  .tp-product__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 58px;
    margin-top: var(--tp-space-7);
    align-items: start;
  }

  .tp-product__no {
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-label);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
  }

  .tp-product__title {
    margin-top: var(--tp-space-3);
    font-weight: var(--tp-weight-regular);
    font-size: var(--tp-size-h1-product);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tp-color-ink);
    text-wrap: pretty;
  }

  .tp-product__price {
    margin-top: 14px;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-input);
    letter-spacing: var(--tp-track-h);
    color: var(--tp-color-text);
  }

  .tp-product__price del {
    color: var(--tp-color-text-muted);
    margin-right: var(--tp-space-2);
  }

  .tp-product__price ins {
    text-decoration: none;
  }

  .tp-product__body {
    margin-top: var(--tp-space-5);
    max-width: var(--tp-measure-product);
    font-size: var(--tp-size-body-m);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    line-height: 1.62;
    color: var(--tp-color-text-body);
    text-wrap: pretty;
  }

  .tp-product__body > * + * {
    margin-top: var(--tp-space-4);
  }

  /* ---- Particulars ------------------------------------------------------ */
  .tp-product__particulars {
    margin-top: var(--tp-space-7);
    padding-top: var(--tp-space-6);
    border-top: var(--tp-border);
  }

  .tp-particulars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 34px;
  }

  .tp-particulars__row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--tp-space-3);
    padding: 9px 0;
    border-bottom: var(--tp-border-soft);
  }

  .tp-particulars__label {
    padding-top: 3px;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-chip);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
  }

  .tp-particulars__value {
    margin: 0;
    font-size: var(--tp-size-note);
    color: var(--tp-color-text);
  }

  @media (max-width: 1099px) {
    .tp-product__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--tp-space-7);
      margin-top: var(--tp-space-6);
    }

    .tp-product__title {
      font-size: 28px;
    }

    .tp-particulars {
      grid-template-columns: 1fr;
      gap: 0;
    }
  }

  @media (max-width: 699px) {
    .tp-product__layout {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--tp-space-6);
      margin-top: 22px;
    }

    .tp-product__title {
      font-size: 25px;
      line-height: 1.18;
      letter-spacing: 0.03em;
    }
  }
}