.okrypta-card-grid {
    display:grid;
    gap:var(--ok-gap);
}
.okrypta-card-grid.cols-1 { grid-template-columns:repeat(1,1fr); }
.okrypta-card-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.okrypta-card-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.okrypta-card-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.okrypta-card {
    border:var(--ok-border-width) var(--ok-border-style) var(--ok-border);
    border-radius:var(--ok-radius);
    padding:var(--ok-pad-md);
    background:var(--ok-surface);
    color:var(--ok-text);
    box-shadow:var(--ok-shadow);
    display:flex;
    flex-direction:column;
    gap:var(--ok-gap-sm);
    min-height:100%;
    transition:transform var(--ok-transition), box-shadow var(--ok-transition);
    box-sizing:border-box;
}
.okrypta-card:hover {
    transform:translateY(calc(var(--okp-space-1, 4px) * -1));
    box-shadow:var(--okp-shadow-lg, 0 24px 48px rgba(0,0,0,0.12));
}
.okrypta-card-head {
    display:flex;
    justify-content:space-between;
    gap:var(--ok-gap-sm);
    align-items:flex-start;
    border-bottom:var(--ok-border-width) var(--ok-border-style) var(--ok-border);
    padding-bottom:var(--okp-space-3, 12px);
}
.okrypta-card-title h3 {
    margin:0;
    font-size:var(--okp-h3, 1.5rem);
    font-weight:var(--ok-font-weight-bold);
    letter-spacing:var(--ok-letter-normal);
    color:var(--ok-text);
}
.okrypta-card-subtitle {
    margin:var(--okp-space-1, 4px) 0 0;
    color:var(--ok-muted);
    font-size:var(--okp-text-sm, 0.875rem);
}
.okrypta-card-price .okrypta-price-main {
    font-size:var(--okp-text-lg, 1.125rem);
    color:var(--ok-accent);
}
.okrypta-card-price .okrypta-price-alt {
    display:block;
    font-size:var(--okp-text-sm, 0.875rem);
    color:var(--ok-muted);
    margin-top:var(--okp-space-2, 8px);
}
.okrypta-card-desc {
    color:var(--ok-text);
    font-size:var(--okp-text-sm, 0.875rem);
    line-height:var(--okp-line-height-normal, 1.5);
}
.okrypta-card-options {
    display:flex;
    flex-direction:column;
    gap:var(--ok-gap-sm);
}
.okrypta-card-options .okrypta-card-row:first-child {
    margin-top:var(--okp-space-1, 4px);
    padding-top:var(--okp-space-3, 12px);
    border-top:var(--ok-border-width) var(--ok-border-style) var(--ok-border);
}
.okrypta-card-row {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:var(--ok-gap-sm);
    padding:var(--okp-space-3, 12px) var(--okp-space-4, 16px);
    border-radius:var(--ok-radius);
    background:color-mix(in srgb, var(--ok-bg) 80%, transparent);
    border:var(--ok-border-width) var(--ok-border-style) var(--ok-border);
    box-sizing:border-box;
}
.okrypta-card-option-title {
    font-weight:var(--ok-font-weight-medium);
    font-size:var(--okp-text-sm, 0.875rem);
}
.okrypta-card-status {
    font-weight:var(--ok-font-weight-bold);
    font-size:var(--okp-text-sm, 0.875rem);
    padding:var(--okp-space-2, 8px) var(--okp-space-3, 12px);
    border-radius:var(--ok-radius-full);
    display:inline-flex;
    align-items:center;
    gap:var(--okp-space-2, 8px);
    white-space:nowrap;
}
.okrypta-card-status.okrypta-included {
    background:var(--ok-accent);
    color:var(--ok-accent-contrast);
    border:var(--okp-border-width-2, 2px) var(--ok-border-style) var(--ok-accent);
}
.okrypta-card-status.okrypta-optional {
    background:color-mix(in srgb, var(--ok-accent) 40%, var(--ok-surface));
    color:var(--ok-accent-contrast);
    border:var(--ok-border-width) var(--ok-border-style) color-mix(in srgb, var(--ok-accent) 55%, transparent);
}
.okrypta-card-status.okrypta-excluded {
    background:color-mix(in srgb, var(--ok-border) 80%, var(--ok-surface));
    color:var(--ok-text);
    border:var(--ok-border-width) var(--ok-border-style) color-mix(in srgb, var(--ok-border) 90%, transparent);
}
.okrypta-card-tag {
    background:color-mix(in srgb, var(--ok-accent) 20%, var(--ok-bg));
    padding:calc(var(--okp-space-1, 4px) / 2) var(--okp-space-2, 8px);
    border-radius:var(--ok-radius-full);
    font-size:var(--okp-text-xs, 0.75rem);
    font-weight:var(--ok-font-weight-medium);
    color:var(--ok-text);
    border:var(--ok-border-width) var(--ok-border-style) color-mix(in srgb, var(--ok-accent) 30%, transparent);
}
.okrypta-card-separator {
    font-weight:var(--ok-font-weight-bold);
    text-align:center;
    padding:var(--okp-space-2, 8px) var(--okp-space-3, 12px);
    border-radius:var(--ok-radius);
    background:color-mix(in srgb, var(--ok-bg) 88%, transparent);
    border:var(--ok-border-width) var(--ok-border-style) var(--ok-border);
}
.okrypta-card-textual {
    padding:var(--okp-space-3, 12px);
    border-radius:var(--ok-radius);
    background:color-mix(in srgb, var(--ok-bg) 90%, transparent);
    border:var(--ok-border-width) var(--ok-border-style) var(--ok-border);
}
.okrypta-card-cta {
    margin-top:auto;
}
.okrypta-card-cta .button {
    width:100%;
    text-align:center;
    background:var(--ok-accent);
    color:var(--ok-accent-contrast);
    padding:var(--ok-pad-sm);
    border-radius:var(--ok-radius);
    font-weight:var(--ok-font-weight-bold);
    border:var(--okp-border-width-2, 2px) var(--ok-border-style) var(--ok-accent);
    transition:all var(--ok-transition);
    display:inline-block;
    box-sizing:border-box;
}
.okrypta-card-cta .button:hover {
    background:color-mix(in srgb, var(--ok-accent) 90%, var(--ok-text));
    border-color:var(--ok-accent);
    transform:translateY(calc(var(--okp-border-width-1, 1px) * -1));
    box-shadow:var(--okp-shadow-md, 0 10px 20px rgba(0,0,0,0.12));
}

.okrypta-card-tooltip {
    display:inline-block;
    margin-left:calc(var(--okp-space-1, 4px) * 1.5);
    color:var(--ok-muted);
    font-size:var(--okp-text-sm, 0.875rem);
    font-weight:var(--ok-font-weight-medium);
}

.okrypta-card.is-highlight {
    border-color:color-mix(in srgb, var(--ok-accent) 20%, #0ea5e9);
    box-shadow:0 16px 32px color-mix(in srgb, #0ea5e9 28%, transparent);
}

.okrypta-highlight-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--okp-status-positive, #0ea5e9);
    color:var(--okp-status-positive-contrast, #f8fbff);
    padding:4px 10px;
    border-radius:999px;
    font-size:var(--okp-text-xs, 0.75rem);
    font-weight:var(--ok-font-weight-bold);
    letter-spacing:var(--ok-letter-wide);
    text-transform:uppercase;
}

@media (max-width:960px) {
    .okrypta-card-grid.cols-3,
    .okrypta-card-grid.cols-4 {
        grid-template-columns:repeat(2,1fr);
    }
}
@media (max-width:640px) {
    .okrypta-card-grid {
        grid-template-columns:repeat(1,1fr);
    }
}
