/* ================================================================
   SEC-PRODUCTS v3.3 — Fonte Única (CPT-driven)
   Design Tokens Contract v3.6

   v3.2 → v3.3:
     - var(--motion-fast) → var(--transition-fast)
     - var(--color-border) → var(--color-border-strong) (hover)
     - padding: .35rem .6rem → var(--space-1) var(--space-2)
================================================================ */

.products{ display:block; }

.products-grid{
  display:grid;
  gap: var(--space-6);
  grid-template-columns: 1fr; /* mobile */
}

/* Tablet */
@media (min-width: 768px){
  .products-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Desktop */
@media (min-width: 1024px){
  .products-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Wide: se data-columns=4, libera 4 colunas */
@media (min-width: 1440px){
  .products-grid[data-columns="4"]{ grid-template-columns: repeat(4, 1fr); }
}

/* Card */
.product-card{
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.product-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.product-card__media{
  display:block;
  position:relative;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-3);
}

.product-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.product-card__placeholder{
  display:block;
  width:100%;
  height:100%;
}

.product-card__body{ padding: var(--space-6); }

.product-card__title{
  margin:0;
  color: var(--color-heading);
  letter-spacing: -0.02em;
}

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

.product-card__excerpt{
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.product-card__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.product-card__badge{
  display:inline-flex;
  align-items:center;
  padding: var(--space-1) var(--space-2);  /* ~4px 8px */
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.product-card__price{
  color: var(--color-heading);
  font-weight: var(--fw-semibold);
}

.product-card__actions{ margin-top: var(--space-5); }