/* ─── CATALOG / PRODUCT CARDS / BADGES ─── */
.catalog { background: var(--bg-white); padding-top: 50px }
.cat-filters {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.cat-filter {
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--bg-white); font-size: 0.84rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s; color: var(--ink-soft);
}
.cat-filter:hover { border-color: var(--ink-soft); color: var(--ink) }
.cat-filter.active {
  background: var(--bg-dark); color: #fff; border-color: var(--bg-dark);
}

.products-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
}
.product-card {
  background: var(--bg-white); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.25s; display: flex; flex-direction: column;
  cursor: pointer;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px) }
.product-img {
  aspect-ratio: 1; background: linear-gradient(135deg, #f5f0e8, #ede8dd); overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.product-img img { width: 100%; height: 100%; object-fit: cover }
.product-img .placeholder-text {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--ink-muted);
}
.product-img .placeholder-text svg { opacity: 0.2 }

/* ─── PRODUCT BADGES (freeze, sale, promo) ─── */
.product-img .badge-freeze,
.product-img .badge-sale,
.product-img .badge-promo {
  position: absolute; top: 10px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600;
}
.product-img .badge-freeze {
  right: 10px;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(6px);
  color: var(--ink-soft);
}
.product-img .badge-sale {
  left: 10px;
  background: #e53935; color: #fff;
}
.product-img .badge-promo {
  left: 10px;
  background: var(--accent); color: var(--bg-dark);
}
.product-img .badge-sale + .badge-promo {
  left: auto; right: 10px; top: 40px;
}

.product-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column }
.product-cat {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
}
.product-body h3 { margin-bottom: 6px; font-size: 1rem; font-weight: 600 }
.product-body .desc { font-size: 0.84rem; color: var(--ink-soft); margin-bottom: 12px; flex: 1; line-height: 1.45 }
.product-specs {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--ink-muted);
  margin-bottom: 14px;
}
.product-specs .spec {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg); padding: 4px 10px; border-radius: 6px;
}
.product-specs .spec strong { color: var(--ink); font-weight: 600 }
.product-price {
  font-size: 1rem; font-weight: 700; color: var(--ink);
  margin-bottom: 12px;
}
.product-price.no-price { font-size: 0.9rem; font-weight: 600; color: var(--ink-muted); font-style: italic }

/* Old price for sale items */
.product-price .old-price {
  font-size: 0.82rem; font-weight: 400; color: var(--ink-muted);
  text-decoration: line-through; margin-left: 8px;
}

.add-to-cart {
  width: 100%; padding: 11px; border-radius: var(--radius-sm);
  background: var(--bg-dark); color: #fff; border: none;
  font-weight: 600; font-size: 0.84rem; cursor: pointer;
  transition: all 0.2s;
  background-size: 200% 100%; background-position: 0% 0%;
  background-image: linear-gradient(90deg, var(--bg-dark) 0%, #444 50%, var(--bg-dark) 100%);
}
.add-to-cart:hover { background-position: 100% 0% }
.add-to-cart.in-cart {
  background-image: linear-gradient(90deg, var(--accent) 0%, #f5e6a3 50%, var(--accent) 100%);
  color: var(--bg-dark);
}