.bf-garan { margin: .5rem 0; display: flex; align-items: flex-start; flex-direction: column; gap: 6px; }
.bf-garan__trigger { display: inline-block; max-width: 100%; line-height: 0; cursor: zoom-in; }
.bf-garan__trigger img { display: block; width: 156px; max-width: 100%; height: auto; background: #fff; }
.bf-garan__terms { font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.bf-garan__dialog { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); margin: 0; box-sizing: border-box; width: min(430px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; border: 0; border-radius: 12px; padding: 28px 18px 18px; background: #fff; color: #111; box-shadow: 0 18px 60px rgba(0,0,0,.3); }
.bf-garan__dialog::backdrop { background: rgba(0,0,0,.7); }
.bf-garan__dialog img { display: block; width: 100%; max-width: 350px; max-height: calc(100vh - 72px); height: auto; object-fit: contain; margin: 0 auto; }
@supports (height: 100dvh) { .bf-garan__dialog { max-height: calc(100dvh - 24px); } .bf-garan__dialog img { max-height: calc(100dvh - 72px); } }
.bf-garan__close { position: absolute; top: 0; right: 5px; border: 0; background: transparent; font-size: 27px; line-height: 1; cursor: pointer; }