.wkk-root{border:1px solid #ddd;border-radius:12px;padding:20px;margin:22px 0}.wkk-root #wkk_size{display:block;width:100%;margin:8px 0 18px}.wkk-block{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid #eee}.wkk-block>img{width:64px;height:64px;object-fit:cover;border-radius:7px}.wkk-block-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.wkk-block-info small{color:#777}.wkk-block-info span{font-size:13px}.wkk-unavailable,.wkk-error{color:#b42318}.wkk-total{font-weight:700;margin:20px 0}.wkk-dialog[hidden]{display:none}.wkk-dialog{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center}.wkk-backdrop{position:absolute;inset:0;background:#0009}.wkk-modal{position:relative;background:#fff;color:#222;width:min(680px,94vw);max-height:88vh;overflow:auto;border-radius:14px;padding:24px;box-shadow:0 15px 55px #0003}.wkk-close{position:absolute;right:15px;top:10px;border:0;background:transparent;font-size:30px;cursor:pointer}.wkk-variations{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px}.wkk-color{border:1px solid #ddd;border-radius:8px;padding:8px;background:white;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:5px}.wkk-color img{width:100%;aspect-ratio:1;object-fit:cover}.wkk-color small{color:#666}.wkk-color:disabled{opacity:.35;cursor:not-allowed}.wkk-submit{width:100%}@media(max-width:540px){.wkk-block{flex-wrap:wrap}.wkk-block .button{width:100%}}

/* v0.1.4: isolate variation cards from theme button rules and prevent overflow */
.wkk-modal{box-sizing:border-box;overflow-x:hidden;max-width:calc(100vw - 24px)}
.wkk-modal *, .wkk-modal *::before,.wkk-modal *::after{box-sizing:border-box}
.wkk-variations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-width:0;width:100%;align-items:stretch}
.wkk-variations .wkk-color{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;max-width:100%;width:100%;height:auto;white-space:normal;overflow:hidden;gap:6px;padding:9px;text-align:left;line-height:1.35;letter-spacing:normal;word-break:normal;overflow-wrap:anywhere}
.wkk-variations .wkk-color img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;flex:none;margin:0;border-radius:4px}
.wkk-variations .wkk-color strong,.wkk-variations .wkk-color small{display:block;position:static;float:none;width:100%;max-width:100%;height:auto;margin:0;padding:0;white-space:normal;overflow-wrap:anywhere;line-height:1.35;text-align:left;text-transform:none;letter-spacing:normal}
.wkk-variations .wkk-color strong{font-size:13px;font-weight:600;color:inherit}
.wkk-variations .wkk-color small{font-size:12px;color:#666}
@media(max-width:620px){.wkk-variations{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:430px){.wkk-variations{grid-template-columns:repeat(2,minmax(0,1fr))}.wkk-modal{padding:16px}}

.wkk-root .wkk-subheading{font-size:.875em;line-height:1.55;margin:.25em 0 1em;opacity:.85}

.wkk-root #wkk_size.wkk-size-select-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.wkk-size-buttons{display:flex;flex-wrap:wrap;gap:9px;margin:8px 0 18px}.wkk-root .wkk-size-button{appearance:none;border:1px solid #c9c9c9;border-radius:6px;padding:9px 15px;background:transparent;color:inherit;cursor:pointer;font:inherit;line-height:1.3;min-width:48px;text-align:center}.wkk-root .wkk-size-button:hover{border-color:currentColor}.wkk-root .wkk-size-button.is-active{background:#242424;color:#fff;border-color:#242424}.wkk-root .wkk-size-button:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.wkk-pattern-preview{display:flex;gap:12px;align-items:center;margin:15px 0;padding:12px;border:1px solid #ddd;border-radius:5px}.wkk-pattern-preview img{width:66px;height:66px;object-fit:cover;flex:none}.wkk-pattern-preview strong,.wkk-pattern-preview small{display:block}.wkk-pattern-preview small{margin-top:5px;opacity:.75}

/* Per-kit image sizes for selected yarns; existing 64px size is Small. */
.wkk-root.wkk-images-small .wkk-block>img{width:64px;height:64px;flex:0 0 64px}
.wkk-root.wkk-images-medium .wkk-block>img{width:96px;height:96px;flex:0 0 96px}
.wkk-root.wkk-images-large .wkk-block>img{width:128px;height:128px;flex:0 0 128px}
@media(max-width:540px){.wkk-root.wkk-images-large .wkk-block>img{width:112px;height:112px;flex-basis:112px}}

/* Give the yarn details room to breathe, especially with large thumbnails. */
.wkk-root .wkk-block{display:grid;grid-template-columns:var(--wkk-thumb,64px) minmax(0,1fr) 112px;column-gap:12px;align-items:center}
.wkk-root.wkk-images-small .wkk-block{--wkk-thumb:64px}
.wkk-root.wkk-images-medium .wkk-block{--wkk-thumb:96px}
.wkk-root.wkk-images-large .wkk-block{--wkk-thumb:128px}
.wkk-root .wkk-block-info{min-width:0;overflow-wrap:break-word}
.wkk-root .wkk-block>img{max-width:100%;justify-self:start}
.wkk-root .wkk-block>.wkk-color-choice{box-sizing:border-box;width:112px;min-width:0;max-width:100%;padding:10px 6px;white-space:normal;line-height:1.45;text-align:center;overflow-wrap:normal;letter-spacing:normal}
@media(max-width:540px){.wkk-root .wkk-block{grid-template-columns:minmax(0,var(--wkk-thumb)) minmax(0,1fr) 94px;column-gap:8px}.wkk-root.wkk-images-large .wkk-block{--wkk-thumb:112px}.wkk-root .wkk-block>.wkk-color-choice{width:94px;font-size:11px;padding:8px 4px}}
@media(max-width:380px){.wkk-root .wkk-block{grid-template-columns:minmax(0,var(--wkk-thumb)) minmax(0,1fr)}.wkk-root .wkk-block>.wkk-color-choice{grid-column:2;width:100%;max-width:160px}}