/* WBL fx: card-flip. No JS: front and back both show, one under the other. */
.fx-cf{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.fx-cf-face{background:var(--card,#fff);border:1px solid var(--line,#ddd);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:8px}
.fx-cf-face h3{margin:0}
.fx-cf-face p{margin:0;font-size:15.5px;color:var(--mute,#555)}
.fx-cf-face .fx-cf-k{font:700 12.5px/1 var(--bf);text-transform:uppercase;letter-spacing:.08em;color:var(--ak,#b24a17)}
.fx-cf-back{background:var(--dk,#1f2a3a);color:var(--on-dk,#f5f1ea);border-color:var(--dk,#1f2a3a)}
.fx-cf-back p{color:color-mix(in srgb,var(--on-dk,#fff) 82%,transparent)}
.fx-cf-back .fx-cf-k{color:#f0a072}
.fx-cf-back .fx-cf-price{font:800 48px/1 var(--hf);font-stretch:80%;color:var(--on-dk,#fff)}
.fx-cf-btn{display:none;margin-top:auto;align-self:flex-start;font:600 15px/1 var(--bf);padding:12px 16px;min-height:44px;border-radius:99px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.fx-cf:not(.fx-on) .fx-cf-back{margin-top:8px}
.fx-cf.fx-on .fx-cf-btn{display:inline-flex}
.fx-cf.fx-on .fx-cf-card{perspective:900px}
.fx-cf.fx-on .fx-cf-in{display:grid;height:100%;transform-style:preserve-3d}
.fx-cf.fx-on .fx-cf-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fx-cf.fx-on .fx-cf-back{transform:rotateY(180deg)}