/* Product detail page (detail.js): hover zoom, 360° view, barcode, comment moderation / report tools */
.ec-gal-main { position: relative; }
.ec-gal-zoom { position: absolute; inset: 0; background-color: #fff; background-repeat: no-repeat; opacity: 0; pointer-events: none; transition: opacity .15s; }
.ec-gal-zoom.ec-on { opacity: 1; }

.ec-pd-360 .ec-modal-box { width: min(760px, 100%); }
.ec-pd-360-stage { text-align: center; }
.ec-pd-360-stage img { max-width: 100%; height: auto; }

.ec-pd-barcode { margin-top: 12px; text-align: center; }
.ec-pd-barcode svg { max-width: 100%; height: auto; border-radius: 6px; }

.ec-cm-tools { display: inline-flex; align-items: center; gap: 2px; margin-inline-end: auto; }
.ec-cm-tool { border: 0; background: none; cursor: pointer; color: var(--ec-muted); padding: 4px 6px; border-radius: 6px; font: inherit; font-size: 12px; line-height: 1; }
.ec-cm-tool:hover, .ec-cm-tool:focus-visible { color: var(--ec-text); background: var(--ec-page); }
.ec-cm-tool.ec-on { color: var(--ec-primary); }
.ec-cm-tool:disabled { opacity: .5; cursor: default; }
.ec-qa-q .ec-cm-tools { margin-inline-start: auto; margin-inline-end: 0; align-self: flex-start; }
.ec-qa-a .ec-cm-tools { margin-inline: 8px 0; }
.ec-cm-state { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 10px; background: var(--ec-page); color: var(--ec-text-2); font-size: 11px; font-weight: 400; white-space: nowrap; }
.ec-cm-state-del { background: var(--ec-primary-soft); color: var(--ec-amazing); }
.ec-qa-q .ec-cm-state, .ec-qa-a .ec-cm-state { margin-inline-start: 8px; align-self: flex-start; }
.ec-cm-off > :not(.ec-cm-actions):not(.ec-cm-head), .ec-cm-off > .ec-qa-q p, .ec-qa-a.ec-cm-off p { opacity: .55; }