/* ------------------------------------------------------------------
   Car Parts Marketplace – storefront tweaks
   (Bootstrap 5 compatible)
-------------------------------------------------------------------*/

/* ========== Brand colours ====================================== */
:root {
  --brand-primary: #0066cc;      /* link / CTA colour              */
  --brand-primary-dark: #004a91;
  --brand-neutral: #f8f9fa;     /* very light grey background      */
  --brand-radius: 0.5rem;       /* card / button rounding          */
}

/* ========== Global ============================================= */
body {
  background-color: var(--brand-neutral);
}

/* ========== Cards ============================================== */
.card {
  border-radius: var(--brand-radius);
  box-shadow: 0 2px 4px rgba(0,0,0,0.07);
  transition: transform .1s ease-out, box-shadow .1s ease-out;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
.card-img-top {
  /* fixed height crop for uniform grids */
  height: 180px;
  object-fit: cover;
  border-top-left-radius: var(--brand-radius);
  border-top-right-radius: var(--brand-radius);
}

/* ========== Product name (single-line ellipsis) ================ */
.line-clamp-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ========== Buttons & form controls ============================ */
.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
.form-control,
.form-select {
  border-radius: var(--brand-radius);
}

/* ========== Mobile spacing tweaks ============================== */
@media (max-width: 576px) {
  .row.g-3 > [class*=col-] {
    margin-bottom: 0.75rem;
  }
}

/* ========== Utility helpers ==================================== */
/* fade-in for images loaded with JS */
.fade-in {
  opacity: 0;
  transition: opacity .3s ease-in;
}
.fade-in.loaded {
  opacity: 1;
}