/* themes page (views/site/pages/templates.php): Nova and its looks */
.nova { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.nova-copy { display: grid; gap: 16px; }
.nova ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.nova li { display: flex; gap: 10px; color: var(--ink-muted); }
.nova li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--accent); }
.nova-try { font-size: 14px; }
.nova-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.looks { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.looks button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px var(--body); cursor: pointer; }
.looks button i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); }
.looks button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (max-width: 960px) { .nova { grid-template-columns: 1fr; } }
.vars figure { margin: 0; display: grid; gap: 10px; }
.vars figcaption { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.vars figcaption i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; }
.vars figcaption span { color: var(--ink-muted); font-size: 14px; }
.phones { margin-top: 32px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.phones .phone { width: 190px; }
@media (max-width: 600px) { .phones .phone { width: 44%; } }