.wp-block-buttons img {
max-width: 150px;
height: auto;
}
.wp-block-buttons {
justify-content: center !important;
display: flex;
flex-wrap: wrap;
gap: 10px;
}.cl-editor{
border:1px dashed #d6d6d9;
border-radius:12px;
padding:16px;
background:#fafafa;
display:grid;
gap:10px;
}
.cl-ed-imagebtn{ margin-bottom:6px; }
.cl-ed-title{ margin:0; }
.cl-ed-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:700px){ .cl-ed-row{ grid-template-columns:1fr; } }.cl-card{
--radius:16px;
--border:#e6e7ea;
--text:#2b2f38; --muted:#6b7280;  --chip-bg:#eaf7ef;
--chip-text:#236a3d;
--cta:#188b4f;
--cta-hover:#137543;
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:0 4px 18px rgba(21,24,31,.06);
display:grid;
grid-template-columns: 360px 1fr; gap:0;
overflow:hidden;
align-items:stretch;
} .cl-variant-green{
--chip-bg:#eaf7ef;
--chip-text:#236a3d;
--cta:#188b4f;
--cta-hover:#137543;
}
.cl-variant-blue{
--chip-bg:#e9f3ff;
--chip-text:#145ea8;
--cta:#1b6bd6;
--cta-hover:#165bb6;
}
.cl-variant-orange{
--chip-bg:#fff3e6;
--chip-text:#a24a00;
--cta:#f08a24;
--cta-hover:#d97706;
}
.cl-variant-purple{
--chip-bg:#f2e9ff;
--chip-text:#5b2fad;
--cta:#6d3fdc;
--cta-hover:#5931c1;
}  .cl-variant-wine{
background:#2a0b0b;
border-color:transparent;
box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
--text:#ffffff;
--muted:rgba(255,255,255,.78);
--chip-bg:rgba(255,255,255,.12);
--chip-text:#ffffff;
--cta:#e11d48;
--cta-hover:#be123c;
} .cl-variant-navy{
background:#0b1b3a;
border-color:transparent;
box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
--text:#ffffff;
--muted:rgba(255,255,255,.78);
--chip-bg:rgba(255,255,255,.12);
--chip-text:#ffffff;
--cta:#2563eb;
--cta-hover:#1e40af;
} .cl-variant-ocean{
background:#062c2c;
border-color:transparent;
box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
--text:#ffffff;
--muted:rgba(255,255,255,.80);
--chip-bg:rgba(255,255,255,.12);
--chip-text:#e6fffb;
--cta:#14b8a6;
--cta-hover:#0d9488;
} .cl-variant-slate{
background:#111827;
border-color:transparent;
box-shadow:0 8px 28px rgba(0,0,0,.28) inset, 0 10px 28px rgba(0,0,0,.14);
--text:#ffffff;
--muted:rgba(255,255,255,.72);
--chip-bg:rgba(255,255,255,.10);
--chip-text:#ffffff;
--cta:#f59e0b;
--cta-hover:#d97706;
} .cl-variant-emerald{
background:#052e1b;
border-color:transparent;
box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
--text:#ffffff;
--muted:rgba(255,255,255,.78);
--chip-bg:rgba(255,255,255,.12);
--chip-text:#ffffff;
--cta:#10b981;
--cta-hover:#059669;
} .cl-variant-indigo{
background:#1e1b4b;
border-color:transparent;
box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
--text:#ffffff;
--muted:rgba(255,255,255,.78);
--chip-bg:rgba(255,255,255,.12);
--chip-text:#ffffff;
--cta:#7c3aed;
--cta-hover:#6d28d9;
} .cl-variant-brand{
background: var(--cl-brand-bg, #0b1b3a);
border-color:transparent;
box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
--text:#ffffff;
--muted:rgba(255,255,255,.80);
--chip-bg:rgba(255,255,255,.12);
--chip-text:#ffffff;
--cta: var(--cl-brand, var(--wp--preset--color--primary, #2563eb));
--cta-hover: var(--cl-brand-hover, #1e40af);
} .cl-variant-dark{
background:#0f172a; border-color:transparent;
box-shadow:0 8px 28px rgba(0,0,0,.28) inset, 0 10px 28px rgba(0,0,0,.14);
--text:#ffffff;
--muted:rgba(255,255,255,.74);
--chip-bg:rgba(255,255,255,.10);
--chip-text:#ffffff;
--cta:#64748b; --cta-hover:#475569; }  .cl-media{
position:relative;
height:100%;
overflow:hidden;
}
.cl-media img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover; object-position:center;
display:block;
}
.cl-body{ padding:22px 26px; }
.cl-eyebrow{
font:600 11px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:6px;
}
.cl-title{
font:700 26px/1.25 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
color:var(--text);
margin:0 0 6px;
}
.cl-subtitle{
color:var(--text);
opacity:.86;
font-weight:500;
margin-bottom:10px;
}
.cl-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.cl-chip{
background:var(--chip-bg);
color:var(--chip-text);
border:1px solid rgba(0,0,0,.05);
border-radius:9999px;
padding:6px 10px;
font-size:12px;
font-weight:600;
display:inline-flex; align-items:center; gap:6px;
}
.cl-desc{
color:var(--text);
opacity:.92;
line-height:1.6;
margin:10px 0 16px;
}
.cl-cta{
display:inline-block;
background:var(--cta);
color:#fff !important;
padding:12px 18px;
border-radius:8px;
font-weight:700;
text-decoration:none;
box-shadow:0 2px 0 rgba(0,0,0,.08) inset;
transition:background .2s ease, transform .06s ease;
}
.cl-cta:hover{ background:var(--cta-hover); }
.cl-cta:active{ transform:translateY(1px); }
.cl-cta:focus-visible{
outline:2px solid var(--cta-hover);
outline-offset:2px;
}
.cl-footnote{
margin-top:8px;
color:var(--muted);
font-size:12px;
} .cl-link-overlay{ text-decoration:none; } @media (max-width: 860px){ .cl-card{
grid-template-columns:1fr;
grid-auto-rows:auto;
}
.cl-media{
grid-column:1 / -1;
grid-row:1;
height:auto; position:relative; }
.cl-media img{
position:static; width:100%;
height:auto; object-fit:contain; display:block;
}
.cl-body{
grid-column:1 / -1;
grid-row:2;
padding:20px 22px;
}
} .cl-card.cl-variant-wine{  background:#2a0b0b !important; --text:#fff; --muted:rgba(255,255,255,.78); --chip-bg:rgba(255,255,255,.12); --chip-text:#fff; --cta:#e11d48; --cta-hover:#be123c; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12); }
.cl-card.cl-variant-navy{  background:#0b1b3a !important; --text:#fff; --muted:rgba(255,255,255,.78); --chip-bg:rgba(255,255,255,.12); --chip-text:#fff; --cta:#2563eb; --cta-hover:#1e40af; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12); }
.cl-card.cl-variant-ocean{ background:#062c2c !important; --text:#fff; --muted:rgba(255,255,255,.80); --chip-bg:rgba(255,255,255,.12); --chip-text:#e6fffb; --cta:#14b8a6; --cta-hover:#0d9488; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12); }
.cl-card.cl-variant-slate{ background:#111827 !important; --text:#fff; --muted:rgba(255,255,255,.72); --chip-bg:rgba(255,255,255,.10); --chip-text:#fff; --cta:#f59e0b; --cta-hover:#d97706; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.28) inset, 0 10px 28px rgba(0,0,0,.14); }
.cl-card.cl-variant-emerald{ background:#052e1b !important; --text:#fff; --muted:rgba(255,255,255,.78); --chip-bg:rgba(255,255,255,.12); --chip-text:#fff; --cta:#10b981; --cta-hover:#059669; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12); }
.cl-card.cl-variant-indigo{ background:#1e1b4b !important; --text:#fff; --muted:rgba(255,255,255,.78); --chip-bg:rgba(255,255,255,.12); --chip-text:#fff; --cta:#7c3aed; --cta-hover:#6d28d9; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12); }
.cl-card.cl-variant-brand{
background: var(--cl-brand-bg, color-mix(in oklab, var(--cl-brand, var(--wp--preset--color--primary, #2563eb)) 12%, black)) !important;
--text:#fff; --muted:rgba(255,255,255,.80);
--chip-bg: color-mix(in oklab, var(--cl-brand, var(--wp--preset--color--primary, #2563eb)) 18%, white);
--chip-text:#fff; --cta: var(--cl-brand, var(--wp--preset--color--primary, #2563eb));
--cta-hover: color-mix(in oklab, var(--cl-brand, var(--wp--preset--color--primary, #2563eb)) 78%, black);
border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25) inset, 0 10px 28px rgba(0,0,0,.12);
}
.cl-card.cl-variant-dark{  background:#0f172a !important; --text:#fff; --muted:rgba(255,255,255,.74); --chip-bg:rgba(255,255,255,.10); --chip-text:#fff; --cta:#64748b; --cta-hover:#475569; border-color:transparent; box-shadow:0 8px 28px rgba(0,0,0,.28) inset, 0 10px 28px rgba(0,0,0,.14); }  .cl-card .cl-title{
color: var(--text) !important;
}
.cl-card .cl-subtitle,
.cl-card .cl-desc{
color: var(--text) !important;
opacity: .92;
}
.cl-card .cl-eyebrow{
color: var(--muted) !important;
} .cl-card .cl-footnote{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin-top: 10px;
color: var(--muted) !important;
}