/*
 * Fair Africa ERP Product Cards — Light Luxury v6.2
 * Fully scoped to prevent Astra / Elementor typography and link styles
 * from changing the cards.
 */
.fa-products{
  --fa-ink:#102a43;
  --fa-ink-soft:#334e68;
  --fa-muted:#718096;
  --fa-line:#e6edf3;
  --fa-surface:#ffffff;
  --fa-soft:#f7fafc;
  --fa-accent:#c58a20;
  --fa-accent-dark:#946414;
  width:100%;
  padding:18px 0 34px;
  color:var(--fa-ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-size:16px;
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.fa-products *,
.fa-products *::before,
.fa-products *::after{box-sizing:border-box}

.fa-products a,
.elementor .fa-products a,
.ast-container .fa-products a{
  text-decoration:none!important;
  text-decoration-line:none!important;
  box-shadow:none!important;
}

.fa-products__head{
  max-width:760px;
  margin:0 auto 34px;
  text-align:center;
}

.fa-products__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  color:var(--fa-accent-dark);
  font-size:12px!important;
  font-weight:750!important;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.fa-products__eyebrow::before,
.fa-products__eyebrow::after{
  content:"";
  width:24px;
  height:1px;
  background:#d8b467;
}

.fa-products__head h2,
.elementor .fa-products__head h2{
  margin:0!important;
  color:var(--fa-ink)!important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-size:clamp(32px,4vw,52px)!important;
  font-weight:750!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
  text-transform:none!important;
}

.fa-products__grid{
  display:grid;
  align-items:stretch;
  gap:24px;
}
.fa-products__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fa-products__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fa-products__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fa-products__grid--1{grid-template-columns:1fr}

.fa-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  overflow:hidden;
  background:var(--fa-surface);
  border:1px solid #e5ebf0;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(16,42,67,.07);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.fa-card:hover{
  transform:translateY(-6px);
  border-color:#d9c08b;
  box-shadow:0 20px 52px rgba(16,42,67,.13);
}

.fa-card__media,
.elementor .fa-card__media{
  position:relative;
  display:block;
  height:260px;
  overflow:hidden;
  background:#eaf0f4;
}

.fa-card__media img,
.fa-card__fallback{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.75,.2,1);
}

.fa-card:hover .fa-card__media img{transform:scale(1.055)}

.fa-card__fallback{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f3f6f8,#dce8ef);
  color:var(--fa-ink);
}
.fa-card__fallback:not([hidden]){display:flex}
.fa-card__fallback span{
  font-family:inherit!important;
  font-size:22px!important;
  font-weight:780!important;
  letter-spacing:-.02em;
}
.fa-card__fallback small{
  margin-top:5px;
  color:#657b8c;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.fa-card__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(10,29,45,0) 52%,rgba(10,29,45,.62) 100%);
  pointer-events:none;
}

.fa-card__badge{
  position:absolute;
  z-index:2;
  top:16px;
  left:16px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  color:#7e5712;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.09em;
  text-transform:uppercase;
  box-shadow:0 5px 16px rgba(15,35,50,.12);
}

.fa-card__place{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:16px;
  color:#fff!important;
  font-size:12px!important;
  font-weight:650!important;
  letter-spacing:.01em;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

.fa-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:21px 21px 20px;
}

.fa-card__rating{
  display:flex;
  align-items:center;
  gap:6px;
  color:#617487;
  font-size:12px!important;
  font-weight:650!important;
}
.fa-card__rating>span{
  color:#d39a22;
  font-size:12px;
  letter-spacing:.06em;
}
.fa-card__rating small{font-size:11px;font-weight:500}

.fa-card h3,
.elementor .fa-card h3,
.ast-container .fa-card h3{
  margin:10px 0 9px!important;
  padding:0!important;
  color:var(--fa-ink)!important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-size:22px!important;
  font-weight:760!important;
  line-height:1.24!important;
  letter-spacing:-.028em!important;
  text-transform:none!important;
}

.fa-card h3 a,
.elementor .fa-card h3 a,
.ast-container .fa-card h3 a{
  display:block;
  color:var(--fa-ink)!important;
  font:inherit!important;
  line-height:inherit!important;
  text-decoration:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background-image:none!important;
  transition:color .22s ease;
}
.fa-card:hover h3 a{color:var(--fa-accent-dark)!important}

.fa-card__facts{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 12px;
}
.fa-card__facts span{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 9px;
  border:1px solid #e5ebf0;
  border-radius:999px;
  background:#f8fafc;
  color:#5e7182!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.025em;
  text-transform:uppercase;
}

.fa-card__body>p,
.elementor .fa-card__body>p{
  display:-webkit-box;
  min-height:48px;
  margin:0!important;
  overflow:hidden;
  color:#66788a!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:1.65!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.fa-card__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--fa-line);
}

.fa-card__price{display:grid;gap:0}
.fa-card__price small,
.fa-card__price span{
  color:#7c8b99!important;
  font-size:9px!important;
  font-weight:750!important;
  line-height:1.3!important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.fa-card__price strong{
  color:var(--fa-ink)!important;
  font-family:inherit!important;
  font-size:21px!important;
  font-weight:780!important;
  line-height:1.2!important;
  white-space:nowrap;
}

.fa-card__actions{display:flex;align-items:center;gap:8px}
.fa-btn,
.elementor .fa-btn,
.ast-container .fa-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:0 15px!important;
  border-radius:10px!important;
  font-family:inherit!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease!important;
}
.fa-btn--ghost{
  border:1px solid #d9e1e7!important;
  background:#fff!important;
  color:var(--fa-ink)!important;
}
.fa-btn--solid{
  border:1px solid var(--fa-ink)!important;
  background:var(--fa-ink)!important;
  color:#fff!important;
}
.fa-btn:hover{transform:translateY(-2px)}
.fa-btn--ghost:hover{border-color:#b7c3cc!important;background:#f8fafc!important}
.fa-btn--solid:hover{border-color:#1c4769!important;background:#1c4769!important;color:#fff!important}

.fa-filter{
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  gap:12px;
  margin:0 0 26px;
  padding:14px;
  background:#fff;
  border:1px solid var(--fa-line);
  border-radius:16px;
  box-shadow:0 8px 26px rgba(16,42,67,.06);
}
.fa-filter label{display:grid;gap:6px}
.fa-filter label>span{
  color:#6b7d8d!important;
  font-size:10px!important;
  font-weight:750!important;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.fa-filter input,
.fa-filter select{
  width:100%;
  height:46px;
  padding:0 13px;
  border:1px solid #dce5eb;
  border-radius:10px;
  outline:0;
  background:#fff;
  color:var(--fa-ink);
  font:500 14px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
}
.fa-filter input:focus,
.fa-filter select:focus{
  border-color:#c9a256;
  box-shadow:0 0 0 3px rgba(197,138,32,.11);
}

.fa-products__empty{
  display:grid;
  gap:6px;
  padding:44px 20px;
  text-align:center;
  background:#fff;
  border:1px solid var(--fa-line);
  border-radius:18px;
  color:var(--fa-muted);
}
.fa-products__empty strong{
  color:var(--fa-ink)!important;
  font-family:inherit!important;
  font-size:23px!important;
  font-weight:750!important;
}
.fa-card[hidden]{display:none!important}

@media(max-width:1150px){
  .fa-products__grid--4,
  .fa-products__grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .fa-products{padding:10px 0 24px}
  .fa-products__grid--4,
  .fa-products__grid--3,
  .fa-products__grid--2{grid-template-columns:1fr;gap:20px}
  .fa-filter{grid-template-columns:1fr}
  .fa-card__media{height:250px}
  .fa-products__head{margin-bottom:25px}
  .fa-card__body{padding:19px}
}

@media(max-width:430px){
  .fa-card__foot{align-items:flex-start;flex-direction:column}
  .fa-card__actions{width:100%}
  .fa-btn{flex:1}
  .fa-card h3{font-size:21px!important}
}