.image-browser{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}.image-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px 16px}.image-result{display:block;min-width:0;border-radius:12px;outline-offset:5px}.image-result-photo{display:flex;background:#144fb5;border-radius:12px;overflow:hidden;aspect-ratio:1.35;align-items:center;justify-content:center}.image-result-photo img{width:100%;height:100%;object-fit:contain;transition:transform .18s}.image-result:hover img{transform:scale(1.04)}.image-result-title{display:block;font-size:.85rem;line-height:1.8;margin-top:10px}.image-result>bdi{font:12px/2 Arial,sans-serif;color:#667389}.image-result[aria-current=true] .image-result-photo{outline:3px solid #3978ee;outline-offset:4px}.image-browser.has-preview{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.image-browser.has-preview .image-results{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}.image-preview{position:sticky;top:18px;border:1px solid #dce3ef;border-radius:18px;overflow:hidden;background:#f5f7fb;box-shadow:0 10px 32px #16284912}.image-preview[hidden]{display:none}.image-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;direction:ltr}.image-controls button,.full-image-stage>button:not(.full-image-zoom){border:0;border-radius:50%;background:#e5eaf3;color:#17243c;width:40px;height:40px;font:26px/1 Arial;cursor:pointer}.image-controls>div{display:flex;gap:8px}.image-controls [data-image-count]{font:13px Arial;color:#59677a}.preview-photo{position:relative;display:block;width:100%;border:0;padding:0;background:#144fb5;cursor:zoom-in}.preview-photo img{width:100%;height:min(43vh,440px);object-fit:contain;display:block}.preview-photo>span{position:absolute;bottom:12px;inset-inline-end:12px;background:#132640dc;color:white;padding:6px 12px;border-radius:20px;font:12px/1.8 inherit}.preview-copy{padding:22px}.preview-copy>bdi{font:12px Arial;color:#576a86}.preview-copy h2{font-size:1.2rem;margin:10px 0;line-height:1.8}.preview-copy p{font-size:.8rem;margin-bottom:18px}.product-image-dialog{box-sizing:border-box;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#10141b;color:#fff}.product-image-dialog::backdrop{background:#10141b}.product-image-dialog .image-controls{height:70px;box-sizing:border-box}.product-image-dialog .image-controls span{font-size:13px}.product-image-dialog .image-controls button,.full-image-stage>button:not(.full-image-zoom){background:#ffffff20;color:#fff;flex-shrink:0}.full-image-stage{display:flex;align-items:center;gap:12px;height:calc(100% - 70px);padding:12px;box-sizing:border-box;direction:ltr}.full-image-zoom{flex:1;min-width:0;height:100%;background:none;border:0;overflow:auto;cursor:zoom-in;padding:0}.full-image-zoom img{width:100%;height:100%;object-fit:contain}.full-image-zoom[aria-pressed=true]{cursor:zoom-out}.full-image-zoom[aria-pressed=true] img{width:200%;max-width:none;height:200%;object-fit:contain}.image-browser button:focus-visible,.image-result:focus-visible{outline:3px solid #649aff;outline-offset:3px}body:has(.product-image-dialog[open]){overflow:hidden}@media(min-width:1400px){.image-browser.has-preview .image-results{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.image-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.image-browser.has-preview{grid-template-columns:minmax(0,1fr)}.image-browser.has-preview .image-results{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:60vh}.image-preview{position:fixed;top:auto;bottom:0;inset-inline:0;z-index:60;max-height:58dvh;overflow:auto;border-radius:18px 18px 0 0}.preview-photo img{height:28dvh}.preview-copy{padding:12px 18px}.preview-copy h2{font-size:1rem;margin:4px 0}.preview-copy p{display:none}.preview-copy .button{min-height:38px;padding:8px 15px}.full-image-stage{gap:4px;padding:5px}.full-image-stage>button:not(.full-image-zoom){width:34px;height:34px}.product-image-dialog .image-controls span{font-size:11px}.product-image-dialog .image-controls{gap:8px}}
.product-search.has-product-suggestions{position:relative;z-index:20}.product-suggestions{position:absolute;top:100%;inset-inline:0;max-height:min(65vh,520px);overflow:auto;background:#fff;border:1px solid #dce3ef;border-radius:0 0 14px 14px;box-shadow:0 14px 34px #15254520}.product-suggestions[hidden]{display:none}.product-suggestion{display:flex;align-items:center;gap:12px;padding:9px 13px;border-bottom:1px solid #edf0f5;color:inherit;text-decoration:none}.product-suggestion:last-child{border-bottom:0}.product-suggestion:hover,.product-suggestion[aria-selected=true]{background:#f1f5fc}.product-suggestion img{width:54px;height:46px;flex:none;object-fit:contain;background:#144fb5;border-radius:6px}.product-suggestion>span{display:grid;gap:3px;min-width:0}.product-suggestion strong{font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-suggestion small{font-size:.72rem;color:#65738a}
.product-suggestions{display:block;width:100%;box-sizing:border-box;overflow-x:hidden}.product-suggestion{display:grid;width:100%;box-sizing:border-box;grid-template-columns:54px minmax(0,1fr);direction:rtl;justify-content:stretch;white-space:normal}.product-suggestion>span{min-width:0}.product-suggestion strong,.product-suggestion small{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-search.has-product-suggestions>.product-suggestions{display:block!important;position:absolute;inset-inline:0;width:100%;box-sizing:border-box}.product-search.has-product-suggestions>.product-suggestions>.product-suggestion{display:grid!important;flex:none;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:54px minmax(0,1fr);direction:rtl}.product-search.has-product-suggestions>.product-suggestions>.product-suggestion>span{min-width:0;width:auto}.product-search.has-product-suggestions>.product-suggestions>.product-suggestion strong,.product-search.has-product-suggestions>.product-suggestions>.product-suggestion small{width:100%;box-sizing:border-box}
