/* --- FORCE VISIBLE PRIMARY BUTTON (anchors included) --- */
:root{
  /* brand primary you want for buttons */
  --verona-primary: #D51C29;
  --verona-primary-hover: #b61622;  /* ~15% darker */
  --verona-primary-active: #99131d; /* ~25% darker */
}

/* Ensure Bootstrap’s btn-primary tokens are set even if something upstream cleared them */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--verona-primary);
  --bs-btn-border-color: var(--verona-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--verona-primary-hover);
  --bs-btn-hover-border-color: var(--verona-primary-hover);
  --bs-btn-focus-shadow-rgb: 213, 28, 41; /* matches #D51C29 */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--verona-primary-active);
  --bs-btn-active-border-color: var(--verona-primary-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--verona-primary);
  --bs-btn-disabled-border-color: var(--verona-primary);
}


@keyframes card-appear {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.card-appear {
  opacity: 0;
  animation: card-appear 200ms ease-out forwards;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .card-appear { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Card polish ---------- */
.card {
  border-radius: .75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  overflow: hidden;             /* keep rounded corners clean */
  background-color: #fff;
  position: relative;           /* anchor for stretched-link overlay */
  transform: translateZ(0);
}

/* Subtle hover lift (no scale) */
.card:hover { transform: translate3d(0, -2px, 0); transition: transform 160ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none !important; transition: none !important; }
}

/* ---------- Image reservation (prevents CLS) ---------- */
.card-img-top {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* ---------- Brand badge ---------- */
.brand-badge { border: 1px solid rgba(0,0,0,.06); border-radius: .5rem; }
.brand-badge img { display: block; }

/* ---------- Grid body: title | meta | features(1fr) | price | button ---------- */
.card-body-grid {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  row-gap: .5rem;
  min-height: 0;
}

/* Title clamped to 2 lines so long names don't push price down */
.title-2clamp{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  min-height: 2.5rem; /* ≈ two lines of h6 */
}

/* Meta line height */
.meta-fixed { min-height: 1.25rem; }

/* Features stretch area */
.features-flex { min-height: 0; overflow: hidden; }

/* Feature bullet clamp helper */
.text-truncate-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price coloring via theme */
.price-line .fs-5,
.price-line .fs-4,
.price-line .fs-3 { color: var(--bs-primary) !important; }

/* ---------- Buttons ---------- */
/* Hard guard in case some global rule zeroed backgrounds on .btn */
.card .btn-primary {
  background-color: var(--verona-primary) !important;
  border-color: var(--verona-primary) !important;
  color: #fff !important;
}

/* ---------- CRITICAL FIX ----------
   Put stretched-link overlay behind everything and disable hit testing.
   Bootstrap's ::after normally sits atop the card; that hides the button. */
.card .stretched-link::after {
  position: absolute;
  inset: 0;
  content: "";
  z-index: -1 !important;
  pointer-events: none !important;
  background: transparent;
}


.card .btn-primary { position: relative; z-index: 2; }
.card .stretched-link::after { pointer-events: none; z-index: 1; }

/* ---------- Grid gutters ---------- */
#product-grid .row > [class*="col-"] { margin-bottom: 1.25rem; }

/* ---------- Sticky filter panel ---------- */
@media (min-width: 992px) {
  .product-filter-sticky { position: sticky; top: 1rem; }
}