/**
 * Componente: Product Grid & Product Card
 * Usado em: front-page (seção Últimas Novidades)
 *
 * Agência Upgrade — https://agenciaupgrade.com.br
 * Token-first · @layer · BEM · cnp- prefix · Logical properties
 */

@layer components {

  /* ── WooCommerce loop & single — imagens controladas pelo container, não pelo atributo ── */

  .woocommerce ul.products li.product a img,
  .woocommerce-page ul.products li.product a img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  /* ── Seção Últimas Novidades ── */

  .cnp-recent-products,
  .cnp-popular-products {
    padding-block: var(--cnp-space-2xl);
  }

  .cnp-popular-products {
    background-color: var(--cnp-color-background-alt);
  }

  .cnp-recent-products__header,
  .cnp-popular-products__header {
    text-align: center;
    margin-block-end: var(--cnp-space-xl);
  }

  .cnp-recent-products__title,
  .cnp-popular-products__title {
    font-size: var(--cnp-font-size-2xl);
    color: var(--cnp-color-text);
    margin-block-end: var(--cnp-space-xs);
  }

  .cnp-recent-products__subtitle,
  .cnp-popular-products__subtitle {
    font-size: var(--cnp-font-size-base);
    color: var(--cnp-color-text-light);
    margin-block-end: 0;
  }

  .cnp-recent-products__footer,
  .cnp-popular-products__footer {
    display: flex;
    justify-content: center;
    margin-block-start: var(--cnp-space-xl);
  }

  /* ── Grid
     Mobile-first: 2 colunas → 3 → 4 → 5 via container queries.
     .cnp-container pai já tem container-type: inline-size. ── */

  .cnp-product-grid {
    list-style: none;
    display: grid;
    gap: var(--cnp-space-m);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @container (min-width: 60rem) {
    .cnp-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @container (min-width: 80rem) {
    .cnp-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  @container (min-width: 100rem) {
    .cnp-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  /* Modificador: força 5 colunas a partir de 600px (seção Mais Vistos — sempre 5 itens) */
  @container (min-width: 60rem) {
    .cnp-product-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  /* Orphan fix: quando o último item fica sozinho em uma linha, expande
     para cobrir todas as colunas do grid, evitando card orphan.
     :nth-child(Xn+1):last-child = 1º item de uma nova linha E o último da lista.

     2 colunas (< 60rem): orphan quando total é ímpar → :nth-child(2n+1):last-child
     4 colunas (80–100rem): orphan quando total ≡ 1 (mod 4) → :nth-child(4n+1):last-child */
  @container (max-width: 59.999rem) {
    .cnp-product-grid--5 > li:nth-child(2n+1):last-child,
    .cnp-product-grid > li:nth-child(2n+1):last-child {
      grid-column: 1 / -1;
    }
  }

  @container (min-width: 60rem) and (max-width: 79.999rem) {
    .cnp-product-grid--5 > li:nth-child(3n+1):last-child,
    .cnp-product-grid > li:nth-child(3n+1):last-child {
      grid-column: 1 / -1;
    }
  }

  @container (min-width: 80rem) and (max-width: 99.999rem) {
    .cnp-product-grid--5 > li:nth-child(4n+1):last-child,
    .cnp-product-grid > li:nth-child(4n+1):last-child {
      grid-column: 1 / -1;
    }
  }

  /* ── Card ── */

  .cnp-product-card__inner {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    background-color: var(--cnp-color-background);
    border: 1px solid var(--cnp-color-border);
    border-radius: var(--cnp-radius-s);
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.08);
    overflow: hidden;
    color: var(--cnp-color-text);
    transition:
      box-shadow var(--cnp-transition-base),
      transform var(--cnp-transition-base),
      border-color var(--cnp-transition-fast);
  }

  .cnp-product-card__inner:hover {
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
    transform: translateY(-0.2rem);
    border-color: var(--cnp-color-primary);
    color: var(--cnp-color-text);
  }

  .cnp-product-card__inner:focus-visible {
    outline: 2px solid var(--cnp-color-primary);
    outline-offset: 2px;
  }

  /* ── Imagem ── */

  .cnp-product-card__figure {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0;
    padding: var(--cnp-space-xs);
    border-radius: var(--cnp-radius-s);
  }

  .cnp-product-card__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--cnp-transition-base);
  }

  .cnp-product-card__inner:hover .cnp-product-card__img {
    transform: scale(1.04);
  }

  /* ── Body ── */

  .cnp-product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--cnp-space-xs);
    padding-block: var(--cnp-space-s);
    padding-inline: var(--cnp-space-s);
    flex: 1;
  }

  .cnp-product-card__title {
    font-size: var(--cnp-font-size-base);
    font-weight: var(--cnp-font-weight-medium);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cnp-product-card__price {
    font-size: var(--cnp-font-size-lg);
    font-weight: var(--cnp-font-weight-bold);
    color: var(--cnp-color-primary);
    margin-block-end: 0;
    margin-block-start: auto;
  }

  .cnp-product-card__gate-msg {
    font-size: var(--cnp-font-size-sm);
    color: var(--cnp-color-text-muted);
    margin-block-end: 0;
    margin-block-start: auto;
  }

}

@layer utilities {

  @media (prefers-reduced-motion: reduce) {
    .cnp-product-card__inner {
      transition-duration: 0.01ms !important;
    }

    .cnp-product-card__inner:hover {
      transform: none !important;
    }

    .cnp-product-card__inner:hover .cnp-product-card__img {
      transform: none !important;
    }
  }

}