.theme-image-viewer-trigger { margin: 0; padding: 0; display: block; border: 0; background: transparent; cursor: zoom-in; }
.theme-image-viewer-trigger:focus-visible { outline: 4px solid #e4a269; outline-offset: -4px; }
.theme-image-viewer-backdrop { position: fixed; z-index: 1000; inset: 0; padding: 18px; display: grid; place-items: center; background: rgba(40,24,21,.84); backdrop-filter: blur(11px); }
.theme-image-viewer-shell { width: min(1180px,100%); height: min(94dvh,980px); min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 22px; background: #fff9ef; box-shadow: 0 30px 90px rgba(0,0,0,.38); }
.theme-image-viewer-toolbar { min-height: 68px; padding: 10px 12px 10px 20px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 16px; align-items: center; border-bottom: 1px solid #eadbc8; background: rgba(255,251,244,.98); }
.theme-image-viewer-title { min-width: 0; display: grid; gap: 3px; }
.theme-image-viewer-title > span { color: #bd5a50; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.theme-image-viewer-title > strong { overflow: hidden; color: var(--navy,#43211f); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.theme-image-viewer-zoom-controls { display: grid; grid-template-columns: 44px 60px 44px; gap: 5px; }
.theme-image-viewer-zoom-controls button { min-width: 0; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid #e2cdb7; border-radius: 11px; background: white; color: #713b33; font-family: inherit; font-size: 20px; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 3px 9px rgba(99,52,45,.06); }
.theme-image-viewer-zoom-controls button:hover:not(:disabled),.theme-image-viewer-close:hover { border-color: #cc9273; background: #fff5e8; }
.theme-image-viewer-zoom-controls button:focus-visible,.theme-image-viewer-close:focus-visible { outline: 3px solid #e4a269; outline-offset: 2px; }
.theme-image-viewer-zoom-controls button:disabled { background: #f5eee5; color: #8b756e; opacity: 1; cursor: default; }
.theme-image-viewer-zoom-value > span { color: inherit; }
.theme-image-viewer-zoom-controls .theme-image-viewer-zoom-value { font-size: 12px; letter-spacing: -.02em; }
.theme-image-viewer-close { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid #e2cdb7; border-radius: 14px; background: white; color: #6b3933; font-size: 27px; font-weight: 400; line-height: 1; cursor: pointer; box-shadow: 0 5px 13px rgba(99,52,45,.08); }
.theme-image-viewer-viewport { min-width: 0; min-height: 0; padding: 14px 22px 22px; overflow: auto; overscroll-behavior: contain; touch-action: none; overflow-anchor: none; }
.theme-image-viewer-viewport.is-pannable { cursor: grab; }
.theme-image-viewer-viewport.is-dragging { cursor: grabbing; user-select: none; }
.theme-image-viewer-zoom-hint { width: fit-content; max-width: 100%; margin: 0 auto 12px; padding: 5px 10px; border: 1px solid #eadbc8; border-radius: 999px; background: rgba(255,255,255,.78); color: #7b655f; font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center; word-break: keep-all; }
.theme-image-viewer-canvas { position: relative; display: block; min-width: 0; margin: 0 auto; }
.theme-image-viewer-canvas:has(.shami-image-feedback) { min-height: 280px; }
.theme-image-viewer-canvas > img { width: 100%; max-width: none; height: auto; display: block; border-radius: 14px; background: white; box-shadow: 0 14px 42px rgba(66,39,29,.16); pointer-events: none; user-select: none; -webkit-user-drag: none; }
@media (max-width:680px) {
  .theme-image-viewer-backdrop { padding: 0; place-items: stretch; }
  .theme-image-viewer-shell { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .theme-image-viewer-toolbar { min-height: calc(66px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 8px 8px 12px; gap: 7px; }
  .theme-image-viewer-title > span { display: none; }
  .theme-image-viewer-title > strong { font-size: 13px; }
  .theme-image-viewer-zoom-controls { grid-template-columns: 44px 52px 44px; gap: 4px; }
  .theme-image-viewer-viewport { padding: 8px 9px calc(18px + env(safe-area-inset-bottom)); }
  .theme-image-viewer-zoom-hint { margin-bottom: 8px; }
  .theme-image-viewer-canvas > img { border-radius: 11px; }
}