/* Template details pages (/templates/<slug>/). Built on case.css (hero, body, next link) and ds.css tokens. */

.tp .cs-cover { border-radius: 14px; overflow: hidden; }
.tp .cs-fig .media { border-radius: 12px; overflow: hidden; }
.tp .cs-fig img { display: block; width: 100%; height: auto; }

/* ways to get it: the store's options with their prices */
.tp-opts { margin-top: var(--s8); }
.tp-h { margin: 0; font-family: var(--title); font-weight: 400; font-size: var(--fs-l, 28px); line-height: 1.15; letter-spacing: -0.8px; color: var(--fg); }
.tp-opts ul { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tp-opts li { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tp-opts li b { font-weight: 500; font-size: var(--fs-m); color: var(--fg); }
.tp-opts li p { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--mut); max-width: 520px; }
.tp-pr { flex: none; font-family: var(--dm); font-size: 14px; letter-spacing: 0.2px; color: var(--fg); font-variant-numeric: tabular-nums; }
.tp-note { margin: 14px 0 0; font-size: 13px; color: var(--dim); }

/* closing call to action */
.tp-cta { margin-top: var(--s8); padding: 28px 0 0; border-top: 1px solid var(--line); }
.tp-cta .btns { margin-top: 18px; }

@media (max-width: 640px) {
  .tp-opts li { flex-direction: column; gap: 8px; }
}