/* The user's photographic transport demo, scoped to the lower product section. */
.zebra-product{width:100%;max-width:710px;margin-inline:auto;color:#102b50}
.zebra-product-viewport{position:relative;overflow:hidden;background:#fff}
.zebra-product-viewport>canvas{display:block;width:100%;height:auto;aspect-ratio:1200/1126}
.zebra-product-viewport>[data-zebra-fallback]{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.zebra-product [hidden]{display:none!important}
.zebra-product-viewport:has(>canvas[hidden]){aspect-ratio:1200/1126}
.zebra-product-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 0 0;border-top:1px solid #d9e3ee}
.zebra-product-controls>button{appearance:none;min-height:44px;padding:10px 13px;border:1px solid #ccd9e8;border-radius:6px;background:transparent;color:#264765;font:inherit;font-size:.875rem;line-height:1.35;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.zebra-product-controls>button:hover{background:#eaf1fb;border-color:#9fb9db}
.zebra-product-controls>.zebra-product-detail{background:#102b50;border-color:#102b50;color:#fff}
.zebra-product-controls>.zebra-product-detail:hover{background:#195bd7;border-color:#195bd7}
.zebra-product-controls>button:focus-visible{outline:3px solid #195bd7;outline-offset:3px}
.zebra-product-controls>button:disabled{opacity:.5;cursor:default}
.zebra-product-caption{display:flex;justify-content:space-between;gap:12px;padding:13px 0 0;font-size:.75rem;line-height:1.5;color:#526781}
.zebra-product-caption>span:first-child{font-weight:600;color:#264765}
.zebra-product-caption>span:first-child>span{font-weight:400;color:#526781}
.zebra-product-caption>[data-zebra-cue]{white-space:nowrap}
.zebra-product noscript p{font-size:.875rem;line-height:1.5}
@media(max-width:480px){.zebra-product-controls{gap:7px}.zebra-product-controls>button{padding:10px 11px}.zebra-product-controls>.zebra-product-detail{flex:1 1 100%}.zebra-product-controls>button:not(.zebra-product-detail){flex:1}.zebra-product-caption{gap:8px}.zebra-product-caption>span:first-child>span{display:block}}
@media(prefers-reduced-motion:reduce){.zebra-product-controls>button{transition:none}}