.knbh{max-width:1120px;margin:36px auto;padding:0 20px;color:#403a33}.knbh [hidden]{display:none!important}.knbh-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.knbh-list button{background:#fff;border:1px solid #d7cec1;padding:10px;text-align:left}.knbh-list button[aria-pressed=true]{outline:3px solid #9b5549}.knbh-list img{width:100%;aspect-ratio:3/4;object-fit:contain}.knbh-list strong,.knbh-list span{display:block}.knbh-list span{font-size:13px}.knbh-selection{margin-top:28px;border-top:1px solid #d7cec1;padding-top:24px}.knbh select{display:block;width:100%;min-height:48px;font-size:16px;margin:8px 0 20px}.knbh-real{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.knbh figure{margin:0}.knbh-real img{width:100%;height:300px;object-fit:contain}.knbh-preview{max-width:600px;margin:20px auto!important}.knbh-preview img{width:100%;max-height:680px;object-fit:contain}.knbh-preview figcaption{text-align:center;font-size:16px;margin:8px}.knbh-preview p,.knbh-status{font-size:14px;line-height:1.8}.knbh-request{font-size:14px}.knbh-consult{min-height:48px}.knbh button:focus-visible,.knbh select:focus-visible{outline:3px solid #9b5549;outline-offset:3px}@media(max-width:760px){.knbh-list,.knbh-real{grid-template-columns:repeat(2,minmax(0,1fr))}.knbh{padding:0 16px}.knbh-real img{height:220px}.knbh figcaption{font-size:13px}.knbh-consult{width:100%}}
.knbh-outfit-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-height:420px;overflow:auto;padding:6px;margin:12px 0 24px;border:1px solid #ded6cb}.knbh-outfit-grid button{background:#fff;border:1px solid #d7cec1;padding:8px;cursor:pointer;color:inherit}.knbh-outfit-grid img{display:block;width:100%;height:140px;object-fit:contain}.knbh-outfit-grid span,.knbh-outfit-grid small{display:block}.knbh-outfit-grid small{font-size:12px;color:#805f31}.knbh-outfit-grid button[aria-pressed=true]{outline:3px solid #9b5549;outline-offset:0}.knbh-preview-note{background:#fff4dc;padding:12px}.knbh-selection,.knbh-status{scroll-margin-top:110px}.knbh-list button{cursor:pointer}.knbh-preview img{background:#fff}@media(max-width:760px){.knbh-outfit-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:340px}.knbh-outfit-grid img{height:110px}}

.knbh-filters{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 10px}.knbh-filters>span{flex-basis:100%;font-weight:600}.knbh-filters button{min-height:44px;padding:8px 14px;border:1px solid #d7cec1;border-radius:4px;background:#fff;color:#403a33;font:inherit;cursor:pointer}.knbh-filters button[aria-pressed=true]{background:#805f45;color:#fff;border-color:#805f45}.knbh-count{font-weight:600;margin:12px 0 6px}.knbh-color-note{font-size:13px;margin:0 0 18px}@media(max-width:760px){.knbh-filters button{font-size:14px;padding:8px 12px}}
.knbh-comparison{margin:24px 0;padding:20px;background:#f8f5ef;border:1px solid #ded6cb;scroll-margin-top:120px}.knbh-comparison h3{margin:0 0 8px}.knbh-comparison p{font-size:14px;line-height:1.7}.knbh-compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.knbh-compare-grid article{min-width:0;background:#fff;border:1px solid #ded6cb;padding:12px}.knbh-compare-grid h4{font-size:14px;margin:0 0 10px}.knbh-compare-photos{display:flex;height:280px}.knbh-compare-photos img{width:100%;min-width:0;object-fit:contain}.knbh-compare-real img{width:50%}.knbh-compare-grid button,.knbh-save{min-height:44px;padding:9px 12px;border:1px solid #9b7960;color:#654b37;background:#fff;cursor:pointer;font:inherit;border-radius:4px}.knbh-compare-grid button{display:block;width:100%;margin-top:8px;font-size:14px}.knbh-save{background:#805f45;color:#fff;margin:8px 0 16px}.knbh-compare-grid button:last-child{border-color:#ddd;color:#666}@media(max-width:760px){.knbh-comparison{padding:14px}.knbh-compare-grid{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x proximity;padding:3px 3px 12px}.knbh-compare-grid article{flex:0 0 78%;scroll-snap-align:start}.knbh-compare-photos{height:250px}.knbh-save{width:100%}}
.knbh-comparison.is-empty{padding:10px 14px;margin:14px 0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px}.knbh-comparison.is-empty h3{font-size:14px;margin:0}.knbh-comparison.is-empty p{font-size:13px;margin:0}.knbh-comparison.is-empty .knbh-compare-grid{display:none}
.knbh-selection-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}.knbh-selected-photo{width:60px;height:80px;object-fit:contain;background:#fff;border:1px solid #ded6cb}.knbh-selection-header h3{flex:1;margin:0;font-size:18px}.knbh-change{min-height:44px;padding:10px 14px;background:#fff;border:1px solid #9b7960;color:#654b37;cursor:pointer;font:inherit}.knbh-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}.knbh-picker,.knbh-result{min-width:0}.knbh-picker{position:sticky;top:170px}.knbh-picker .knbh-outfit-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:500px}.knbh-result .knbh-status{margin-top:0}.knbh-result .knbh-preview{margin:12px auto!important}.knbh-result .knbh-preview img{max-height:540px}.knbh-filters button{display:inline-flex;align-items:center;gap:7px}.knbh-filters i{width:15px;height:15px;border-radius:50%;border:1px solid #0002;flex-shrink:0}.knbh-list button{scroll-margin-top:170px}@media(max-width:760px){.knbh-workspace{grid-template-columns:1fr;gap:12px}.knbh-picker{position:static}.knbh-selection-header{flex-wrap:wrap;gap:10px}.knbh-selection-header h3{font-size:16px}.knbh-change{width:100%}.knbh-picker .knbh-outfit-grid{max-height:180px;margin-bottom:8px}.knbh-picker .knbh-outfit-grid img{height:95px}.knbh-picker select{margin-bottom:10px}.knbh-result .knbh-preview img{max-height:480px}}

/* Three coordination examples per hakama — 2026-11-03 */
.knbh-examples{margin:0 0 30px;padding:22px;background:#fff;border:1px solid #e4dcd1}
.knbh-examples>h3{margin:0 0 8px;font-size:22px}.knbh-examples>p{margin:0 0 18px}
.knbh-examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.knbh-examples-grid article{display:flex;flex-direction:column;min-width:0}
.knbh-examples-grid img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:#fff}
.knbh-examples-grid h4{font-size:15px;line-height:1.7;margin:12px 0 6px}
.knbh-examples-grid p{font-size:14px;line-height:1.85;margin:0 0 14px}
.knbh-examples-grid button{margin-top:auto;min-height:44px;padding:10px;border:1px solid #8b6e55;background:#fff;color:#654b37;cursor:pointer;font:inherit}
.knbh-examples-grid button[aria-pressed=true]{background:#755b45;color:#fff}
@media(max-width:760px){.knbh-examples{padding:14px;margin-bottom:22px}.knbh-examples>h3{font-size:20px}.knbh-examples-grid{grid-template-columns:1fr;gap:24px}.knbh-examples-grid img{max-height:420px}.knbh-examples-grid h4{font-size:16px}.knbh-examples-grid p{font-size:15px}}
@media(max-width:760px){.knbh-examples-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px}.knbh-examples-grid article{flex:0 0 86%;scroll-snap-align:start}.knbh-examples-grid img{max-height:360px}.knbh-examples>p{font-size:13px;line-height:1.8}}

/* Collapsible hakama list and concise example captions */
.knbh-list-area[hidden]{display:none!important}
.knbh-list-close{min-height:44px;margin:0 0 16px;padding:10px 18px;border:1px solid #8b6e55;background:#fff;color:#654b37;font:inherit;cursor:pointer}
.knbh-selection-header{scroll-margin-top:170px}
.knbh-examples-grid h4{font-size:19px;margin:12px 0 4px;line-height:1.5}
.knbh-examples-grid .knbh-example-sku{font-size:12px;color:#766b60;margin:0 0 8px;line-height:1.5}
@media(max-width:760px){.knbh-selection-header{scroll-margin-top:95px}.knbh-examples-grid h4{font-size:18px}}

/* Compact selection actions, modal image and mobile example navigation */
.knbh-actions{border:1px solid #ded6cb;background:#f8f5ef;padding:18px;margin:0 0 28px;scroll-margin-top:170px}
.knbh-actions .knbh-request{font-size:17px;font-weight:600;margin:0 0 6px}.knbh-actions .knbh-status{margin:0 0 12px;scroll-margin-top:200px}
.knbh-action-buttons{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.knbh-action-buttons button{min-height:48px;margin:0;padding:10px 18px;font:inherit;cursor:pointer;border:1px solid #8b6e55;background:#fff;color:#654b37}.knbh-action-buttons .knbh-consult{background:#755b45;color:#fff}
.knbh-examples-grid article.is-selected{outline:2px solid #9b7960;outline-offset:3px}.knbh-examples-grid .knbh-example-zoom{margin-top:8px;background:#faf8f4;color:#654b37;border-color:#ded6cb;font-size:14px}
.knbh-swipe{display:none}.knbh-lightbox{max-width:min(720px,94vw);width:720px;max-height:90dvh;box-sizing:border-box;border:1px solid #ded6cb;padding:20px;background:#fff;color:#403a33;overflow:auto}.knbh-lightbox::backdrop{background:#0009}.knbh-lightbox h3{font-size:18px;margin:0 70px 12px 0}.knbh-lightbox .knbh-preview{margin:0 auto!important}.knbh-lightbox .knbh-preview img{max-height:62dvh;width:100%;object-fit:contain}.knbh-zoom-close{position:sticky;top:0;float:right;min-height:44px;padding:8px 16px;border:1px solid #9b7960;background:#fff;color:#654b37;cursor:pointer;font:inherit}
@media(max-width:760px){.knbh-swipe{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;margin-bottom:8px}.knbh-swipe p{font-size:12px;margin:0}.knbh-dots{display:flex}.knbh-dots button{min-width:44px;min-height:44px;background:transparent;border:0;color:#d6cbbd;cursor:pointer;font-size:14px}.knbh-dots button[aria-current=true]{color:#755b45}.knbh-actions{padding:14px;scroll-margin-top:100px}.knbh-actions .knbh-request{font-size:15px}.knbh-action-buttons{display:grid;grid-template-columns:1fr;width:100%}.knbh-actions .knbh-status{scroll-margin-top:150px}.knbh-lightbox{padding:14px}.knbh-lightbox h3{font-size:16px}.knbh-lightbox .knbh-preview p{font-size:12px;line-height:1.7}}