.cfkr { margin-block: 1.5em; }
.cfkr .cfkr-fields { display: flex; flex-wrap: wrap; gap: 1.25em 1.5em; }
.cfkr .cfkr-fields > div { flex: 1 1 calc((100% - 1.5em) / 2); min-width: min(100%,22rem); max-width: 100%; }
.cfkr label, .cfkr output { display: block; }
.cfkr input, .cfkr select { width: 100%; max-width: 100%; box-sizing: border-box; }
.cfkr .cfkr-error { display: block; margin-block: .35em; }
.cfkr [aria-invalid="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
.cfkr [hidden] { display: none !important; }
.cfkr .cfkr-results { margin-block: 1.5em; }
.cfkr .cfkr-values { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap: 1em; }
.cfkr .cfkr-values output { font-size: 1.5em; font-weight: 700; }
.cfkr .cfkr-product { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25em; margin-block: 1.25em; }
.cfkr .cfkr-product img { width: 10rem; max-width: 100%; height: auto; }
.cfkr details { margin-block: 1em; }
.cfkr summary { display: flex; align-items: center; gap: .65em; padding-block: .75em; cursor: pointer; list-style: none; border-block: 1px solid currentColor; }
.cfkr summary::-webkit-details-marker { display: none; }
.cfkr summary::before { content: ''; display: block; width: .5em; height: .5em; flex: 0 0 .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.cfkr details[open] > summary::before { transform: rotate(45deg); }
.cfkr summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.cfkr .cfkr-facts { margin: .75em 0; padding-left: 1.25em; }
.cfkr .cfkr-facts li + li { margin-top: .35em; }
/* Keep successful announcements available to screen readers without duplicating the result visually. */
.cfkr .cfkr-status-success { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }