.ip-viewer {width:max-content; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:14px; margin:auto; border:1px solid #7894a5; border-radius:15px; background:#f6fafc; color:#12364a; overscroll-behavior:contain}
.ip-viewer::backdrop {background:#071c2bce}
.ip-view-bar {display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:10px}
.ip-view-bar h2 {font-size:18px; line-height:1.25; margin:0}
.ip-view-bar button, .ip-view-original {font:700 15px/1.4 'Nunito Sans',Arial,sans-serif; min-height:44px}
.ip-view-bar button {border:1px solid #acc2d0; background:#fff; color:#12364a; border-radius:8px; padding:7px 14px}
.ip-view-image {overflow:auto; max-height:calc(100dvh - 155px); border-radius:8px}
.ip-view-image img {display:block; width:min(400px,calc(100vw - 56px)); height:auto; margin:auto}
.ip-view-original {display:inline-flex; align-items:center; color:#15588f; text-decoration:underline; text-underline-offset:3px}
html:has(.ip-viewer[open]) {overflow:hidden}

/* Shared product branding and directional icons. */
.ip-brands,.ip-brands a {display:inline-flex;align-items:center;flex-shrink:0}
.ip-brands {gap:14px;color:#15251f}
.ip-brands a {min-height:44px}
.ip-brands img {display:block;object-fit:contain}
.ip-brands a + a {position:relative;gap:8px;padding-left:14px;font-size:25px;font-weight:850;letter-spacing:-.055em}
.ip-brands a + a::before {content:'';position:absolute;left:0;height:22px;border-left:1px solid #aab8b0}
.ip-arrow {display:inline-block;width:1.12em;height:1.12em;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ip-arrow-out {transform:rotate(-45deg)}
.ip-arrow-down {transform:rotate(90deg)}
@media(max-width:680px){
  .ip-brands {gap:9px}
  .ip-brands a:first-child img {width:72px}
  .ip-brands a + a {padding-left:9px;font-size:21px}
  .ip-brands a + a img {width:25px;height:25px}
}