/* Etsy-like square product grid (dark theme) */

/* Apply grid to listing and other tabs (not featured which has custom layout) */
#new-arrivals-products,
#top-rated-products,
#all-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

/* Card */
.etsy-card {
  font-family: Karla, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.etsy-card:hover {
  transform: translateY(-2px);
  border-color: #d4af37;
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
}

/* Square thumb */
.etsy-thumb-box { display:block; background:#0f0f0f; }
.etsy-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #0f0f0f;
  display:flex; align-items:center; justify-content:center;
}
.etsy-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop to fill square */
  padding: 0; /* no letterbox */
}
.etsy-badge { position:absolute; top:10px; left:10px; background:#d4af37; color:#000; font-weight:800; font-size:11px; padding:5px 8px; border-radius:6px; }

/* Body */
.etsy-card-body { padding: 12px 14px 14px; }
.etsy-title { color:#eaeaea; font-weight:800; font-size:14px; line-height:1.35; height: 2.7em; overflow: hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2; letter-spacing:.2px; }
.etsy-title a { color:inherit; text-decoration:none; }
.etsy-title a:hover { color:#d4af37; }

.etsy-price { margin-top:8px; display:flex; align-items:center; gap:8px; }
.etsy-price .now { color:#fff; font-weight:900; letter-spacing:.2px; }
.etsy-price .old { color:#999; text-decoration:line-through; font-size:12px; }

.etsy-sub { color:#9aa; font-size:12px; margin-top:6px; letter-spacing:.2px; font-weight:600; }

/* Responsive tweaks */
@media (max-width: 1024px) {
  #new-arrivals-products,
  #top-rated-products,
  #all-products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 600px) {
  #new-arrivals-products,
  #top-rated-products,
  #all-products-grid { grid-template-columns: repeat(2, 1fr); }
}