/* assets/css/store-product-card.css — shared product card (Phase 5, 2026-07).
 *
 * Used by both the homepage sections and the category/search grid via the
 * single includes/store_product_card.php renderer — replaces the two
 * near-identical .store-home-product-card / .store-card rule sets that
 * used to live in store-home.css / store-listing.css (both removed there).
 *
 * Equal card height in a row comes from the existing Bootstrap-subset grid
 * (.row-cols-*, each .col stretches full height) plus flex-column here —
 * no JS height-matching needed. Fixed-ratio image + object-fit:contain
 * (matches the real product photography, which is on plain/white
 * backgrounds — contain avoids cropping products, unlike cover) means the
 * image box never changes size on hover, so hover (a border/shadow
 * change only) causes no layout shift.
 */

.store-product-card {
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--color-background);
  border:1px solid var(--color-border);
  border-radius:var(--radius-medium);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.store-product-card:hover {
  border-color:var(--color-primary-border-subtle);
  box-shadow:var(--shadow-medium);
}
/* White, not var(--color-surface) (2026-07-26 correction): the contain-fit
   product photo rarely fills its box edge-to-edge, so a gray backdrop
   here showed through as visible letterboxing around every photo,
   reading as "the card has a gray panel" rather than a clean white card
   with a photo on it. */
.store-product-card-image-link { display:block; background:#fff; }
.store-product-card-image {
  width:100%;
  height:210px;
  display:block;
  object-fit:contain;
  object-position:center;
}
.store-product-card-body {
  min-width:0;
  padding:1.1rem 1rem;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.store-product-card-badges { margin-bottom:.5rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem; }
.store-product-card-title {
  margin:0 0 .6rem;
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
  display:-webkit-box;
  overflow:hidden;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  min-height:2.65em;
}
.store-product-card-title a { color:var(--color-text); text-decoration:none; }
.store-product-card-title a:hover,
.store-product-card-title a:focus-visible { color:var(--color-primary-dark); }
.store-product-card-file-meta { margin:0 0 .5rem; color:var(--color-text-muted); font-size:.875rem; }
.store-product-card-footer {
  margin-top:auto;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
}
.store-product-card-cta,
.store-product-card-cta-form {
  width:100%;
}
.store-product-card-cta {
  display:block;
  width:100%;
  padding:.5rem .75rem;
  border:0;
  border-radius:var(--radius-small);
  background:var(--color-primary-dark);
  color:#fff;
  font-size:.925rem;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  min-height:40px;
  transition:background-color .15s ease;
}
.store-product-card-cta:hover,
.store-product-card-cta:focus-visible { background:var(--color-primary-darker); color:#fff; }
.store-product-card-cta:focus-visible { outline:2px solid var(--color-primary-dark); outline-offset:2px; }

/* Image link + title link together already act as the low-key "secondary"
   route to the product page — no separate "View" button is rendered next
   to the primary Add-to-cart action, per the "one primary CTA, no
   competing buttons" requirement. */

@media (max-width:575.98px) {
  .store-product-card-image { height:190px; }
}