.ocf-charging-memberships { background: var(--ocf-bg-alt); }
.ocf-charging-memberships .charging-offers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ocf-grid-gap, 24px); }
.ocf-charging-memberships .charging-offer { display: flex; flex-direction: column; overflow: hidden; min-width: 0; border: 1px solid var(--ocf-border-light); border-radius: var(--card-radius, 28px); background: var(--ocf-bg); }
.ocf-charging-memberships .charging-offer-image { display: block; width: 100%; height: auto; aspect-ratio: 2.3 / 1; object-fit: cover; }
.ocf-charging-memberships .charging-offer-body { display: flex; flex-direction: column; flex: 1; gap: 16px; padding: 26px; }
.ocf-charging-memberships .charging-offer h3 { margin: 0; color: var(--ocf-heading); font-size: clamp(20px, 1.65vw, 23px); line-height: 1.3; overflow-wrap: anywhere; }
.ocf-charging-memberships .charging-offer p { margin: 0 0 12px; color: var(--ocf-body); font-size: 16px; line-height: 1.6; }
.ocf-charging-memberships .charging-offer-pay { display: inline-flex; align-self: flex-start; justify-content: center; align-items: center; min-width: 150px; min-height: 48px; margin-top: auto; padding: 12px 24px; border-radius: var(--button-radius, 999px); background: var(--ocf-primary); color: var(--ocf-primary-text, var(--ocf-heading)); font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.ocf-charging-memberships .charging-offer-pay:hover { background: var(--ocf-primary-hover); }
.ocf-charging-memberships .charging-offer-pay:focus-visible { outline: 3px solid var(--ocf-heading); outline-offset: 4px; }
@media (max-width: 900px) { .ocf-charging-memberships .charging-offers-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } .ocf-charging-memberships .charging-offer-body { padding: 24px; } .ocf-charging-memberships .charging-offer h3 { font-size: 22px; } }
@media (max-width: 480px) { .ocf-charging-memberships .charging-offer-body { padding: 20px; } .ocf-charging-memberships .charging-offer-pay { width: 100%; } }