/* ══════════════════════════════════════════
   PRODUCTS — Card grid with brand gradients
══════════════════════════════════════════ */

#products {
  background: var(--warm-white);
}

/* ── Header (title + "ver colecao" link) ── */
.products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
}

/* ── Product Grid ── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ── Product Card ── */
.product-card {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  cursor: default;
}

/* ── Product Image Container ── */
.product-img {
  height: 280px;
  position: relative;
  overflow: hidden;
}

/* ── Product Image Background (gradient fallback) ── */
.product-img-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease;
}

.product-card:hover .product-img-bg {
  transform: scale(1.05);
}

/* ── Brand gradient variants ── */
.product-img-bg-1 {
  background: linear-gradient(145deg, #b9dcd2 0%, #6fa287 100%);
}

.product-img-bg-2 {
  background: linear-gradient(145deg, #74956c 0%, #00534c 100%);
}

.product-img-bg-3 {
  background: linear-gradient(145deg, #e9cdd0 0%, #b3809d 100%);
}

.product-img-bg-4 {
  background: linear-gradient(145deg, #efb661 0%, #d4a44a 100%);
}

.product-img-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Product Label (category overlay) ── */
.product-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 53, 48, 0.7), transparent);
  padding: 40px 22px 18px;
  color: var(--cream);
  font-family: 'Prompt', sans-serif;
  font-size: 1.1rem;
}

/* ── Product Info ── */
.product-info {
  padding: 20px 22px 22px;
}

.product-info-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* ── Product Name ── */
.product-name {
  font-family: 'Prompt', sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 4px;
}

/* ── Product Type ── */
.product-type {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brown-light);
}

/* ── Product Price ── */
.product-price {
  font-family: 'Prompt', sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--dark);
  white-space: nowrap;
}

/* ── Add to Cart Button (slides up on hover) ── */
.product-add-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--gold);
  border: none;
  cursor: none;
  padding: 13px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), background 0.3s;
}

.product-add-btn:hover {
  background: var(--gold-light);
}

.product-card:hover .product-add-btn {
  transform: translateY(0);
}