.ci-product .ks-hero{gap:clamp(20px,5vw,64px)}
.ci-product .ks-preview{max-width:440px;width:100%;justify-self:center}
.ci-product-media{position:relative;width:100%;aspect-ratio:9/16;max-height:62vh;border-radius:16px;overflow:hidden;background:#f0e9dc}
.ci-product .ci-product-media img,.ci-product .ci-product-media iframe{width:100%;height:100%;object-fit:contain;margin:0}
.ci-product-media iframe{position:absolute;inset:0}
.ci-product [hidden],.ci-product [data-preview-status]:empty{display:none!important}
.ci-product .ks-lead{font-size:clamp(16px,2vw,21px)!important}
.ci-editions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border:0;padding:0;margin:14px 0 8px;min-inline-size:0}
.ci-editions .ks-colour{position:relative;cursor:pointer}
.ci-editions .ks-colour img{object-fit:cover;object-position:center 55%}
.ci-editions input{position:absolute;z-index:1;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ci-editions .ks-colour:has(input:checked){box-shadow:inset 0 0 0 2px var(--ks-accent);background:#f8ece7}
.ci-editions .ks-colour:focus-within{outline:2px solid var(--ks-accent);outline-offset:3px}
.ci-included ul{padding-inline-start:1.25em}
.ci-stationery{display:block;width:100%;height:auto;border-radius:18px;margin-top:20px}
.ci-jump-preview{display:none}
@media(max-width:820px){.ci-jump-preview{display:inline-block}.ci-product .ks-preview{position:static}}
@media(max-width:410px){.ci-editions{grid-template-columns:repeat(2,minmax(0,1fr))}.ci-editions .ks-colour img{aspect-ratio:4/3}}

.ci-product-header nav{display:flex;align-items:center;gap:12px}
.ci-product-actions,.ci-action-shortcuts{display:grid;gap:.65rem}
.ci-action-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:.25rem}
.ci-product-actions .ks-button{text-align:center;border-radius:999px}
.ci-editions .ci-edition-images{position:relative;display:block;padding:0;min-height:0;overflow:hidden;border-radius:7px}
.ci-edition-images .ci-edition-inside{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .55s ease;object-position:center}
.ci-editions .ks-colour:hover .ci-edition-inside,.ci-editions .ks-colour:focus-within .ci-edition-inside{opacity:1}
.ci-sample-screens,.ci-product-faq{margin-top:clamp(2rem,5vw,4rem)}
.ci-screen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,290px));gap:clamp(12px,3vw,32px)}
.ci-screen-grid figure{margin:0;text-align:center}
.ci-screen-grid img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--ks-border)}
.ci-screen-grid figcaption{margin-top:.5rem;color:var(--ks-muted)}
.ci-product-faq details{border-top:1px solid var(--ks-border);padding:1rem 0}
.ci-product-faq summary{cursor:pointer;font-weight:600}
.ci-product-faq details p{margin:.65rem 0 0;color:var(--ks-muted)}
html[data-theme=dark] body:has(.ci-product){background:var(--ks-paper);color:var(--ks-ink)}
html[data-theme=dark] .ci-editions .ks-colour:has(input:checked){background:#43262c}
@media(max-width:470px){.ci-product-header nav{gap:6px}.ci-action-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}.ci-product-header img{width:74px}}
@media(prefers-reduced-motion:reduce){.ci-edition-images .ci-edition-inside{transition:none}}
@media(prefers-reduced-motion:no-preference){
  .ci-edition-inside{animation:ci-edition-reveal 10s ease-in-out infinite}
  .ks-colour:nth-child(2n) .ci-edition-inside{animation-delay:-2s}
  .ci-editions .ks-colour:hover .ci-edition-inside,.ci-editions .ks-colour:focus-within .ci-edition-inside{animation:none}
}
@keyframes ci-edition-reveal{
  0%,39%,100%{opacity:0}
  46%,86%{opacity:1}
}