.media-gallery{margin-block:32px}
.media-primary{margin:0}
.media-image-surface{border:1px solid var(--line);border-radius:12px;background:var(--soft);overflow:hidden;padding:0;aspect-ratio:var(--media-ratio)}
.media-image-surface>img{display:block;width:100%;height:100%;object-fit:contain;margin:auto}
.media-primary figcaption{display:flex;justify-content:space-between;align-items:start;gap:24px;padding:16px 0}
.media-primary figcaption strong{font-size:16px;font-weight:600;line-height:1.45}
.media-primary figcaption p{color:var(--muted);font-size:14px;line-height:1.55;margin:6px 0 0;max-width:760px}
.media-enlarge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;gap:9px;border:1px solid #b8c2d1;border-radius:7px;background:white;min-height:44px;font-size:14px;line-height:1.4;padding:10px 14px;transition:background-color .18s,border-color .18s,color .18s}
.media-enlarge svg{flex:0 0 18px}.media-enlarge:hover{background:#edf3ff;border-color:var(--blue);color:var(--blue)}
.media-selectors{display:flex;flex-wrap:wrap;gap:8px}
.media-selector{display:flex;align-items:center;justify-content:center;padding:10px 15px;min-height:44px;max-width:100%;background:white;border:1px solid var(--line);border-radius:7px;text-align:left;font-size:14px;line-height:1.4;transition:background-color .18s,border-color .18s}
.media-selector[aria-pressed=true]{border-color:var(--blue);background:#edf3ff;color:var(--navy)}
.media-selector:hover{border-color:var(--blue)}
.media-context{font-size:13px;line-height:1.5;color:var(--muted);margin-top:16px;max-width:760px}
.media-gallery--compact .media-context{margin-top:0}
.media-viewer{width:calc(100vw - 40px);max-width:1900px;height:calc(100vh - 40px);height:calc(100dvh - 40px);max-height:none;margin:auto;border:1px solid #bac7db;border-radius:12px;padding:0;background:white;color:var(--navy);box-shadow:0 20px 100px #0006}
.media-viewer::backdrop{background:#09162fd9}
.media-viewer[open]{animation:media-viewer-enter .18s ease-out}
@keyframes media-viewer-enter{from{opacity:.85;transform:translateY(3px)}to{opacity:1;transform:none}}
.media-viewer-layout{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.media-viewer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 24px;border-bottom:1px solid var(--line)}
.media-viewer-product{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.media-viewer-top h2{font-size:22px;line-height:1.3;letter-spacing:-.015em;margin-top:3px}
.media-viewer-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.media-viewer-close,.media-viewer-zoom{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:8px 14px;background:#f5f6f8;border:1px solid var(--line);border-radius:7px;font-size:14px;flex-shrink:0}
.media-viewer-zoom[aria-pressed=true]{border-color:var(--blue);background:#edf3ff}
.media-viewer-close>span{font-size:24px;line-height:1}
.media-viewer-image{min-height:0;min-width:0;padding:12px;background:#f5f6f8;overflow:auto;overscroll-behavior:contain;display:flex;align-items:center;justify-content:center}
.media-viewer-image>img{width:100%;height:100%;object-fit:contain;display:block}
.media-viewer-image.is-zoomed{display:block}
.media-viewer-image.is-zoomed>img{width:auto;height:auto;max-width:none;max-height:none}
.media-viewer-image:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
.media-viewer-bottom{display:flex;gap:24px;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--line)}
.media-viewer-bottom>p{font-size:14px;line-height:1.5;color:var(--muted);max-width:900px}
.media-viewer-navigation{display:flex;align-items:center;gap:20px;flex-shrink:0}
.media-viewer-navigation>button{background:white;border:1px solid var(--line);border-radius:7px;min-height:44px;padding:9px 14px;display:flex;gap:10px;align-items:center;font-size:14px}
.media-viewer-navigation>span{font-size:13px;color:var(--muted);min-width:44px;text-align:center}
.media-viewer-is-open{overflow:hidden}
@media(max-width:700px){
.media-primary figcaption{display:block;padding:16px 0}.media-enlarge{width:100%;min-height:46px;margin-top:14px}.media-selector{font-size:13px;padding:10px 12px}.media-context{font-size:12px;margin-top:14px}.media-viewer{width:calc(100vw - 16px);height:calc(100vh - 16px);height:calc(100dvh - 16px);border-radius:12px}.media-viewer-top{padding:12px;gap:12px}.media-viewer-top h2{font-size:17px;line-height:1.3}.media-viewer-product{font-size:11px}.media-viewer-close{gap:8px;padding:8px 10px}.media-viewer-image{padding:4px}.media-viewer-bottom{display:block;padding:12px}.media-viewer-navigation{margin-top:12px;justify-content:space-between;gap:12px}.media-viewer-navigation>button{font-size:13px}.media-viewer-bottom>p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.media-gallery *{scroll-behavior:auto;transition:none;animation:none!important}}
@media(max-width:700px){.media-viewer-tools{flex-direction:column;align-items:stretch;gap:6px}.media-viewer-close,.media-viewer-zoom{font-size:13px;padding:8px 10px}.media-viewer-top>div:first-child{min-width:0}}