/*
Shared EVCP charger card component.
Used by the catalogue template and homepage latest chargers section.
Change charger card styling here once and it affects both places.
*/

.evcp-charger-card-scope .evcp-card-grid,
.evcp-charger-card-scope .evcp-catalogue-grid{
  display:grid;
  gap:20px;
}
body.evcp-template-home .evcp-charger-card-scope .evcp-card-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
body.evcp-template-catalogue .evcp-charger-card-scope .evcp-catalogue-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.evcp-charger-card-scope .evcp-catalogue-card{
  background:var(--color-surface);
  border:2px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.evcp-charger-card-scope .evcp-charger-image{
  background:var(--color-bg-secondary);
  border-bottom:1px solid var(--color-border);
  border-radius:0;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  overflow:hidden;
  transition:transform .25s ease;
}
.evcp-charger-card-scope 
.evcp-charger-card-scope .evcp-charger-image svg{
  width:100%;
  height:100%;
  display:block;
}
.evcp-charger-card-scope .evcp-catalogue-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:0;
  flex:1;
}
.evcp-charger-card-scope .evcp-manufacturer{
  margin:0 0 4px;
  color:var(--color-primary);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.evcp-charger-card-scope .evcp-manufacturer a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
.evcp-charger-card-scope .evcp-card-title{
  margin:0;
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.evcp-charger-card-scope .evcp-card-title a{
  transition:color .2s ease;
}
.evcp-charger-card-scope .evcp-card-title a:hover{
  color:var(--color-primary);
}
.evcp-charger-card-scope .evcp-sku{
  margin:8px 0 0;
  color:var(--color-text-muted);
  font-size:13px;
  font-weight:850;
}
.evcp-charger-card-scope .evcp-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:auto;
  padding-top:18px;
}
.evcp-charger-card-scope .evcp-tags-five .evcp-tag{
  font-size:11px;
  padding:0 9px;
  min-height:28px;
}
.evcp-charger-card-scope .evcp-tag{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:850;
  letter-spacing:.01em;
  border:2px solid transparent;
}
.evcp-charger-card-scope a.evcp-tag:hover{
  color:var(--charger-pill-color,currentColor);
  text-decoration:none;
  border-width:2px;
}
.evcp-charger-card-scope .evcp-tag-neutral{
  --charger-pill-color:#57606A;
  background:rgba(87,96,106,.12);
  border-color:rgba(87,96,106,.2);
  color:#57606A;
}
.evcp-charger-card-scope .evcp-tag-blue{
  --charger-pill-color:#2563EB;
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.24);
  color:#2563EB;
}
.evcp-charger-card-scope .evcp-tag-purple{
  --charger-pill-color:#7C3AED;
  background:rgba(139,92,246,.14);
  border-color:rgba(139,92,246,.24);
  color:#7C3AED;
}
.evcp-charger-card-scope .evcp-tag-cyan{
  --charger-pill-color:#0891B2;
  background:rgba(56,201,219,.16);
  border-color:rgba(56,201,219,.32);
  color:#0891B2;
}
.evcp-charger-card-scope .evcp-tag-green{
  --charger-pill-color:#15803D;
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.24);
  color:#15803D;
}
[data-theme="dark"] .evcp-charger-card-scope .evcp-tag-neutral{
  --charger-pill-color:#B4BCC4;
  background:rgba(180,188,196,.12);
  border-color:rgba(180,188,196,.2);
  color:#B4BCC4;
}
[data-theme="dark"] .evcp-charger-card-scope .evcp-tag-blue{--charger-pill-color:#93C5FD;color:#93C5FD}
[data-theme="dark"] .evcp-charger-card-scope .evcp-tag-purple{--charger-pill-color:#C4B5FD;color:#C4B5FD}
[data-theme="dark"] .evcp-charger-card-scope .evcp-tag-cyan{--charger-pill-color:#67E8F9;color:#67E8F9}
[data-theme="dark"] .evcp-charger-card-scope .evcp-tag-green{--charger-pill-color:#8CE99A;color:#8CE99A}

@media (max-width:980px){
  body.evcp-template-home .evcp-charger-card-scope .evcp-card-grid,
  body.evcp-template-catalogue .evcp-charger-card-scope .evcp-catalogue-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  body.evcp-template-home .evcp-charger-card-scope .evcp-card-grid,
  body.evcp-template-catalogue .evcp-charger-card-scope .evcp-catalogue-grid{
    grid-template-columns:1fr;
  }
}

.evcp-charger-card-scope a.evcp-tag-neutral:hover{border-color:#3F4650}
.evcp-charger-card-scope a.evcp-tag-blue:hover{border-color:#2563EB}
.evcp-charger-card-scope a.evcp-tag-purple:hover{border-color:#7C3AED}
.evcp-charger-card-scope a.evcp-tag-cyan:hover{border-color:#087D8E}
.evcp-charger-card-scope a.evcp-tag-green:hover{border-color:#15803D}
[data-theme="dark"] .evcp-charger-card-scope a.evcp-tag-neutral:hover{border-color:#E2E8F0}
[data-theme="dark"] .evcp-charger-card-scope a.evcp-tag-blue:hover{border-color:#93C5FD}
[data-theme="dark"] .evcp-charger-card-scope a.evcp-tag-purple:hover{border-color:#C4B5FD}
[data-theme="dark"] .evcp-charger-card-scope a.evcp-tag-cyan:hover{border-color:#67E8F9}
[data-theme="dark"] .evcp-charger-card-scope a.evcp-tag-green:hover{border-color:#8CE99A}

body.evcp-template-manufacturer-profile .evcp-charger-card-scope .evcp-charger-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
@media (max-width:980px){
  body.evcp-template-manufacturer-profile .evcp-charger-card-scope .evcp-charger-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  body.evcp-template-manufacturer-profile .evcp-charger-card-scope .evcp-charger-grid{
    grid-template-columns:1fr;
  }
}

.evcp-charger-image img{width:100%;height:100%;object-fit:contain;display:block;padding:18px;box-sizing:border-box;transition:transform .25s ease}
.evcp-catalogue-card:hover .evcp-charger-image img{transform:scale(1.035)}