@import url("staple-art.css");

/* Plant Table containment, generated staple artwork and packshot fixes.
   Loaded after unified.css so cards remain stable regardless of source image size. */

.staple-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.staple-card,
.staple-card:nth-child(even),
.staple-card:nth-child(odd) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 28px !important;
  direction: ltr !important;
  min-width: 0 !important;
  min-height: 340px !important;
  padding: 20px !important;
  overflow: hidden !important;
}

.staple-card > * {
  min-width: 0 !important;
}

.staple-art,
.staple-card:nth-child(even) .staple-art,
.staple-card:nth-child(odd) .staple-art {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: start !important;
  order: 0 !important;
  flex: none !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 319 / 450 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  transform: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
}

.staple-art.purple { background-position: 0% 0% !important; }
.staple-art.green  { background-position: 50% 0% !important; }
.staple-art.blue   { background-position: 100% 0% !important; }
.staple-art.peach  { background-position: 0% 100% !important; }
.staple-art.yellow { background-position: 50% 100% !important; }
.staple-art.coral  { background-position: 100% 100% !important; }

.staple-art span {
  display: none !important;
}

.staple-card > div:last-child,
.staple-card:nth-child(even) > div:last-child,
.staple-card:nth-child(odd) > div:last-child {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  order: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px 8px 12px 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.staple-card small {
  display: block !important;
  margin: 0 0 12px !important;
}

.staple-card h3 {
  margin: 0 0 16px !important;
  font-size: clamp(31px, 2.4vw, 43px) !important;
  line-height: .98 !important;
  overflow-wrap: anywhere !important;
}

.staple-card p {
  margin: 0 0 20px !important;
  max-width: 48ch !important;
  line-height: 1.45 !important;
}

.staple-card b {
  display: block !important;
  line-height: 1.5 !important;
}

.product-pool {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

.product-card {
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

.product-image {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  padding: 18px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #f7f0e3, #fffdf8) !important;
}

.product-image img {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

.product-rank {
  z-index: 2 !important;
}

.product-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
}

.product-body h4,
.product-brand,
.product-evidence,
.product-links,
.product-meta {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.product-evidence {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
}

.product-actions {
  margin-top: auto !important;
}

.place-select {
  min-width: 0 !important;
  width: 100% !important;
}

.modal-image {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.modal-image img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 1180px) {
  .product-pool {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .staple-grid {
    grid-template-columns: 1fr !important;
  }

  .staple-card,
  .staple-card:nth-child(even),
  .staple-card:nth-child(odd) {
    grid-template-columns: 180px minmax(0, 1fr) !important;
  }

  .staple-art,
  .staple-card:nth-child(even) .staple-art,
  .staple-card:nth-child(odd) .staple-art {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }

  .product-pool {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .staple-card,
  .staple-card:nth-child(even),
  .staple-card:nth-child(odd) {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 18px !important;
    min-height: 0 !important;
  }

  .staple-art,
  .staple-card:nth-child(even) .staple-art,
  .staple-card:nth-child(odd) .staple-art {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: min(100%, 260px) !important;
    min-width: 0 !important;
    max-width: 260px !important;
  }

  .staple-card > div:last-child,
  .staple-card:nth-child(even) > div:last-child,
  .staple-card:nth-child(odd) > div:last-child {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0 4px 8px !important;
  }

  .product-pool {
    grid-template-columns: 1fr !important;
  }

  .product-image {
    height: 300px !important;
    min-height: 300px !important;
  }
}