/* src/main/resources/static/css/products.css */
.hero{padding:2rem 0}
.hero-inner{display:flex;gap:2rem;align-items:center}
.hero-text{flex:1}
.hero-text h1{font-size:2rem;margin:0 0 .5rem}
.hero-image img{max-width:420px;width:100%;border-radius:8px}

.featured{padding:2rem 0}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.product-card{background:var(--surface);border:1px solid #eee;padding:1rem;border-radius:8px;text-align:center}

.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1; /* keep image perfectly square */
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.price-add{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem}
.price{font-weight:600;color:red}
.btn-add{background:var(--accent);color:#fff;padding:.4rem .6rem;border-radius:6px}

.card-title {
  display: -webkit-box;
  display: box;                  /* Fallback (very old spec) */
  -webkit-box-orient: vertical;
  box-orient: vertical;          /* Fallback */
  -webkit-line-clamp: 2;
  line-clamp: 2;                 /* ✅ Standard property */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3em;
  max-height: calc(1.3em * 2);
  min-height: calc(1.3em * 2);
}