<style>
/* Grid */
.puppies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1024px) { .puppies-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .puppies-grid { grid-template-columns: 1fr; } }

/* Card */
.puppy-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.puppy-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.12);
}
.puppy-thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.puppy-body {
  padding: 16px;
  text-align: center;
  flex: 1;
}
.puppy-title { font-size: 1.05rem; margin: 6px 0; color: #222; }
.puppy-meta { color: #666; font-size: 0.95rem; margin-bottom: 12px; }
.puppy-actions { display:flex; justify-content:center; gap:10px; padding-bottom:16px; }
.puppy-actions button {
  background:#ff6f61; color:#fff; border:0; padding:10px 16px; border-radius:24px; cursor:pointer;
}
.puppy-actions button:hover { background:#ff8b7a; }

/* Modal overlay */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 30px 16px;
}
.modal.active { display: flex; }

/* Modal box */
.modal-box {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  display:flex;
  flex-direction: column;
  position: relative;
}

/* Top carousel area */
.modal-carousel {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 70vh; /* prevents images from overflowing vertically */
  background:#000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media(max-width:640px){ .modal-carousel { max-height: 50vh; } }

.modal-carousel img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display: none;
}

/* carousel controls */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: #fff;
  background: rgba(0,0,0,0.35);
  border-radius: 50%;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }

/* content below */
.modal-content {
  padding: 18px 20px 26px;
  overflow: auto;
}
.modal-content h2 { margin: 0 0 8px; color:#222; }
.modal-content .meta { color:#666; font-size:0.95rem; margin-bottom:8px; }
.modal-content p { margin:8px 0; color:#333; line-height:1.5; }

/* close button */
.modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:20px; color:#333;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* ensure images visible when active */
.modal-carousel img.visible { display:block; }

/* small tweaks */
.puppy-price { color:#FF6F61; font-weight:700; margin-bottom:8px; }
</style>