/* Grid layout */
.container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Individual card styles */
.container-row {
  background-color: var(--global-palette3, #1A202C);
  color: #fff;
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  height: 100%;
}

/* Optional: inner layout can be stacked or two-column */
.container-column.container-images {
  margin-bottom: 1.5rem;
}

.container-slider {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
}

.container-slide img {
  max-width: 100%;
  border-radius: 10px;
}

/* Content */
.container-availability {
  margin-bottom: -1rem;
z-index:10;
}

.availability-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  background-color: #f17e21;
  color: #fff;
  text-transform: capitalize;
}
.availability-badge.sold {
  background-color: #800080; /* purple */
}

.container-title h3 {
    font-size: 1.8rem;
  margin: 0.5rem 0;
      color: white;

}


.container-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ff9800;
  margin: 0.75rem 0 1rem;
}

.container-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #fff;
  opacity: 0.95;
  margin-bottom: 1.5rem;
}

/* Button layout (reuse your existing) */
.container-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: auto;
}

.button {
  padding: 0.75rem 1.5rem;
  background: var(--global-palette4, #2D3748)!important;
  color: #fff;
  border-radius: 50px;
  font-size: var(--global-kb-font-size-md, 1.25rem);
  font-weight: 500!important;
  text-decoration: none;
  font-family: var(--global-body-font-family);
  transition: background 0.2s ease, color 0.2s ease;
}

.button:hover {
  background: #ff9800;
  color: #fff;
}

.button.secondary {
  background: transparent;
  text-decoration: underline;
}

.container-image img {
border-radius:20px;
max-height:200px;
width:auto;
}

/* Responsive tweaks (optional if you're using auto-fit/minmax) */
@media (max-width: 768px) {
  .container-grid {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
}