/* EXID – Variant Cards (v7) */
:root{
  --exid-red:#ea3324;
  --exid-green:#50b150;
  --exid-ink:#0f0f0f;
  --exid-ink-2:#1c2733;
  --exid-ink-3:#495464;
  --exid-bg:#ffffff;
  --exid-br:#e5e8ef;
  --exid-sf:rgba(12,22,44,.06);
}
.ex-hidden{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.ex-variants{margin-top:16px}
.ex-variants__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}

.ex-card{
  position:relative;display:block;width:100%;text-align:left;background:var(--exid-bg);
  border:1px solid var(--exid-br);border-radius:18px;padding:18px;cursor:pointer;
  transition:box-shadow .2s,transform .06s,border-color .2s,background .2s;
  box-shadow:0 10px 26px var(--exid-sf)
}
.ex-card:hover{box-shadow:0 14px 34px rgba(12,22,44,.12);transform:translateY(-2px)}
.ex-card.-active{border-color:var(--exid-ink-2);background:linear-gradient(180deg,#f9fbff 0%,#fff 100%);box-shadow:0 16px 44px rgba(12,22,44,.18)}

.ex-ribbon{
  position:absolute;top:-12px;left:-12px;background:var(--exid-red);color:#fff;
  font-size:11px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;
  padding:6px 10px;border-top-left-radius:14px;border-bottom-right-radius:14px;
  box-shadow:0 8px 18px rgba(234,51,36,.28)
}
.ex-ribbon.-green{background:var(--exid-green);box-shadow:0 8px 18px rgba(80,177,80,.28)}

.ex-card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ex-card__title{margin:0;font-size:18px;line-height:1.28;font-weight:900;color:var(--exid-ink);letter-spacing:-.2px}
.ex-card__subtitle{margin:3px 0 0;font-size:13px;color:var(--exid-ink-3)}

.ex-badge{
  background:#eef2f9;color:var(--exid-ink-2);border-radius:999px;padding:6px 11px;
  font-size:11px;font-weight:900;letter-spacing:.35px;text-transform:uppercase
}
.ex-badge.-primary{background:var(--exid-red);color:#fff}
.ex-badge.-green{background:var(--exid-green);color:#fff}

.ex-price{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.ex-amount{font-size:24px;font-weight:900;color:var(--exid-ink)}
.ex-note{font-size:12px;color:var(--exid-ink-3)}

.ex-features{margin:12px 0 0;padding-left:18px;color:var(--exid-ink-2);font-size:13px}
.ex-features li{margin:3px 0}

.ex-hint{margin-top:6px;color:var(--exid-ink-3);font-size:13px;text-align:center}

@media (max-width:640px){
  .ex-card{padding:16px;border-radius:16px}
  .ex-amount{font-size:22px}
}