/* What you're buying: parts, cover, the page viewer, notes. */
.kit-grid { display: grid; gap: var(--s4); }
.kit-copy p + p, .kit-copy .parts + p { margin-top: var(--s2); }
.parts { list-style: none; padding: 0; margin: var(--s3) 0 var(--s3); border-top: 1px solid var(--moulding); max-width: 34em; }
.parts li { position: relative; padding: 12px 0 12px 58px; border-bottom: 1px solid var(--moulding); font-size: var(--step-0); line-height: 1.4; }
.parts b { font-weight: 500; color: var(--green); }
.pt { position: absolute; left: 0; top: 10px; min-width: 44px; padding: 3px 10px 3px 8px; font: 500 1rem var(--serif); font-style: normal; text-align: center; background: var(--pearl); border: 1px solid var(--pearl-shade); border-left: 0; border-radius: 0 6px 6px 0; }
.kit-show { display: grid; gap: var(--s3); align-items: start; }
.cover { padding: 12px; margin: 0 auto; width: min(100%, 200px); background: var(--pearl) url("../img/tex/bookcloth.webp") center / 220px; }
.cover picture, .cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.missing { opacity: 0; }

.vtabs { display: flex; gap: 6px; margin-bottom: -1px; position: relative; z-index: 1; }
.vtab {
  min-width: 52px; min-height: 44px; padding: 0 14px; cursor: pointer;
  background: var(--pearl); color: var(--ink); border: 1px solid var(--pearl-shade); border-bottom: 0; border-radius: 7px 7px 0 0;
  font: 500 1.125rem var(--serif); transition: background-color 200ms ease, color 200ms ease, transform 260ms var(--ease-heavy);
}
.vtab[aria-selected="true"] { background: var(--green); color: var(--pearl); border-color: var(--green); transform: translateY(-3px); padding-bottom: 3px; }
.vtab:active { transform: translateX(2px); }
.vstage { padding: 14px; }
.vpage { margin: 0; }
.vpage + .vpage { margin-top: var(--s3); }
.vopen { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--pearl) url("../img/tex/form-page.webp") center / cover; aspect-ratio: 1000 / 1294; }
.vopen picture, .vopen img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vpage figcaption { margin-top: 8px; }
.hint { margin-top: 10px; font-style: italic; font-size: var(--step--1); color: var(--walnut); }
.more-pages { display: none; }
html:not(.js) .more-pages { display: block; }
html:not(.js) .vpage + .vpage, html:not(.js) .vtabs, html:not(.js) .hint:not(.more-pages) { display: none; }
.js .vstage { display: grid; overflow: hidden; }
.js .vpage { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateX(-24%); transition: transform 520ms var(--ease-heavy), opacity 360ms ease, visibility 0s linear 520ms; }
.js .vpage.on { opacity: 1; visibility: visible; transform: none; z-index: 1; transition: transform 520ms var(--ease-heavy), opacity 360ms ease; }

.js .vstage[data-instant] .vpage { transition-duration: 0ms; transition-delay: 0ms; }
.kit-buy .btn { width: 100%; }
.kit-buy .fine { margin-top: 10px; }
.kit-buy .note { margin-top: var(--s2); }
.kit-buy .note:first-of-type { margin-top: var(--s3); }

.never h2 { font-size: var(--step-3); }
.strip { max-width: none; padding: 14px 0; margin-bottom: var(--s3); border-block: 2px solid var(--green); color: var(--green); font-style: italic; font-weight: 500; font-size: var(--step-1); line-height: 1.3; text-wrap: balance; }
.never-list { display: grid; gap: var(--s3); }
.never-list p { margin: 0 !important; }
.never-list em { font-weight: 500; color: var(--green); }
.never-list .fine { grid-column: 1 / -1; }

.note-grid { display: grid; gap: var(--s4); align-items: center; }
.note-photo { padding: 14px; margin: 0; max-width: 420px; }
.note-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.final .btn { margin-top: var(--s2); }
.final h2 { max-width: 14em; font-size: var(--step-3); }
.plain-checkout { position: relative; z-index: 2; background: var(--pearl); padding-block: var(--s5); border-top: 1px solid var(--moulding); }
.js .plain-checkout { display: none; }

@media (min-width: 900px) {
  .kit-grid { grid-template-columns: 5fr 7fr; column-gap: 64px; row-gap: var(--s3); }
  .kit-copy { grid-column: 1; grid-row: 1; }
  .kit-buy { grid-column: 1; grid-row: 2; }
  .kit-show { grid-column: 2; grid-row: 1 / 3; grid-template-columns: 1fr 1.25fr; gap: 28px; }
  .cover { margin: 0; width: 100%; }
  .kit-buy .btn { width: auto; }
  .note-grid { grid-template-columns: 5fr 6fr; column-gap: 96px; }
  .never-list { grid-template-columns: 1fr 1fr; gap: var(--s3) 64px; }
  .final h2 { font-size: var(--step-4); max-width: 12em; }
  .final p { font-size: var(--step-1); }
}