/* SurgiFacts – instrument guides and catalogue products (enqueued by snippet 15 after sf.css).
   Product image frames are white, centred and contain the whole instrument. */

/* ---- Detail page hero image: fixed white 4:3 frame, image contained (no crop, no blend) */
.sf-ihero__img{padding:14px}
.sf-ihero__frame{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:#fff;border-radius:8px;overflow:hidden;padding:14px;box-sizing:border-box}
html body .sf-ihero__frame img{width:100%!important;height:100%!important;max-width:100%!important;max-height:none!important;object-fit:contain!important;object-position:center;display:block;margin:0;mix-blend-mode:normal!important;filter:none!important;transform:none!important}
.sf-ihero__img figcaption{margin-top:10px}

/* ---- No licensed image: compact "at a glance" panel instead of an empty picture box */
html body .sf-ihero__grid--noimg{grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);align-items:start}
.sf-iglance{background:var(--sfc-white,#fff);border:1px solid var(--sfc-border);border-radius:10px;padding:18px 20px;font-size:14.5px;line-height:1.45}
.sf-iglance__h{margin:0 0 10px;font:700 12.5px/1.2 var(--sf-head);letter-spacing:.07em;text-transform:uppercase;color:var(--sfc-muted)}
.sf-iglance dl{margin:0;display:grid;gap:0}
.sf-iglance dl>div{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--sfc-border)}
.sf-iglance dl>div:first-child{border-top:0;padding-top:2px}
.sf-iglance dt{color:var(--sfc-muted)}
.sf-iglance dd{margin:0;color:var(--sfc-heading);font-weight:600;overflow-wrap:anywhere}
html body .sf-iglance a{color:var(--sfc-secondary)}
.sf-iglance__note{margin:12px 0 0;font-size:12.5px;color:var(--sfc-muted)}
@media(max-width:900px){html body .sf-ihero__grid--noimg{grid-template-columns:1fr}}

/* ---- Editor-only notes */
.sf-admin-flag{margin:18px 0 0;padding:10px 14px;border:1px dashed #d63638;border-radius:8px;background:#fcf0f1;color:#50575e;font-size:13.5px;line-height:1.45}
.sf-admin-flag a{color:#2271b1}

/* ---- Cards: white 4:3 box, padding, whole instrument visible (no zoom that clips the tips) */
html body .sf-icard__img{background:#fff!important;aspect-ratio:4/3}
html body .sf-igrid--show .sf-icard__img{aspect-ratio:1/1}
html body .sf-icard__img--orig img{object-fit:contain!important;object-position:center;padding:12px}
html body .sf-icard:hover .sf-icard__img--orig img{transform:none}

/* ---- Category tiles / type list thumbnails: white, contained */
.sf-ctile__ic,.sf-itype__img{background:#fff!important}
html body .sf-ctile__ic img,html body .sf-itype__img img{object-fit:contain;mix-blend-mode:normal}

/* ---- Further reading */
.sf-iread{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sf-iread li{padding:12px 14px;border:1px solid var(--sfc-border);border-radius:8px;background:var(--sfc-white,#fff)}
html body .sf-iread a{font-weight:600;color:var(--sfc-secondary)}
.sf-iread span{display:block;margin-top:4px;font-size:14px;color:var(--sfc-muted)}

/* ---- FAQ block inside the guide / product layout */
.sf-iprofile .sf-pagefaq,.sf-catitem .sf-pagefaq{margin-top:8px}
.sf-faq__a ul{margin:6px 0 10px;padding-left:20px}
.sf-faq__a li{margin:4px 0}

/* ---- Catalogue product page */
.sf-catitem__main{display:grid;gap:24px;min-width:0}
.sf-catitem__main>.sf-pagefaq{margin:0!important;background:var(--sfc-white,#fff);border:1px solid var(--sfc-border);border-radius:12px;padding:20px 22px}
.sf-catitem__side>.sf-panel+.sf-panel{margin-top:16px}
.sf-catitem__brand{font:700 16px/1.3 var(--sf-head);margin:8px 0 6px}
html body .sf-catitem__brand a,html body .sf-catitem__guide a{color:var(--sfc-secondary)}
.sf-pagehead--cat .sf-eyebrow a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:900px){.sf-catitem__main>.sf-pagefaq{padding:16px}}
.sf-iprofile .sf-pagefaq{border-top:0;padding-top:0}
/* Contain reliably whatever the image proportions (tall drawings/photos): the image fills the padded box absolutely,
   so a percentage height never falls back to the intrinsic height and overflows the frame. */
html body .sf-icard__img--orig,.sf-ihero__frame{position:relative}
html body .sf-icard__img--orig img{position:absolute!important;inset:12px;width:calc(100% - 24px)!important;height:calc(100% - 24px)!important;max-width:none!important;padding:0!important}
html body .sf-ihero__frame img{position:absolute!important;inset:14px;width:calc(100% - 28px)!important;height:calc(100% - 28px)!important}