/* WEMMS album section preview V1; isolated from existing app styles. */
.catalog-card .wm-preview-thumb { cursor: zoom-in; transition: filter .18s ease, transform .18s ease; }
.catalog-card .wm-preview-thumb:hover { filter: brightness(.94); transform: scale(1.015); }
.catalog-card .wm-preview-thumb:focus-visible { outline: 3px solid #e58b51; outline-offset: 3px; }
.catalog-card .wm-preview-trigger {
  display: inline-flex; align-items: center; border: 0; background: transparent;
  padding: 6px 0; margin: 2px 0 4px; color: #305546; cursor: pointer;
  font: 600 11px/1.35 Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px;
}
.catalog-card .wm-preview-trigger:hover { color: #183e2e; }
.wm-preview-modal {
  width: min(1080px, calc(100vw - 28px)); max-width: min(1080px, calc(100vw - 28px));
  max-height: min(920px, calc(100dvh - 28px)); padding: 0; border: 1px solid #cddad0;
  border-radius: 20px; background: #f7f4ed; color: #293e33; box-shadow: 0 26px 95px #12291d60;
  overflow: auto; font-family: Arial, Helvetica, sans-serif;
}
.wm-preview-modal::backdrop { background: rgba(19,38,29,.70); backdrop-filter: blur(5px); }
.wm-preview-top { padding: 16px 22px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #d8e1d9; gap: 12px; }
.wm-preview-kicker { font: 700 11px/1.3 Arial, sans-serif; letter-spacing: .15em; color: #688173; }
.wm-preview-close { width: 38px; height: 38px; flex: none; border: 1px solid #ced9d0; background: white;
  border-radius: 50%; color: #305546; cursor: pointer; font-size: 17px; }
.wm-preview-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr);
  align-items: start; gap: 24px; padding: 24px; }
.wm-preview-image-wrap { min-width: 0; min-height: 280px; max-height: min(730px, 72dvh); overflow: auto;
  background: #e9e7df; border: 1px solid #d6ddd5; border-radius: 12px; padding: 10px;
  display: flex; align-items: flex-start; justify-content: center; }
.wm-preview-image { display: block; width: auto; max-width: 100%; height: auto;
  max-height: calc(min(730px, 72dvh) - 22px); object-fit: contain; box-shadow: 0 3px 14px #223a2924; }
.wm-preview-zoomed .wm-preview-image { width: auto; max-width: none; max-height: none; min-width: 720px; }
.wm-preview-info { padding: 10px 2px; }
.wm-preview-info h2 { font: 400 clamp(26px, 3vw, 40px)/1.13 Georgia, serif;
  color: #263e32; margin: 0 0 14px; }
.wm-preview-info h3 { font: 400 23px/1.25 Georgia, serif; margin: 32px 0 10px; color: #2f5342; }
.wm-preview-subtitle { color: #87988d; font: 13px/1.6 Arial, sans-serif; margin: 0; }
.wm-preview-description { color: #4e6257; font: 15px/1.75 Arial, sans-serif; margin: 0; }
.wm-preview-hint { font: 12px/1.55 Arial, sans-serif; color: #819087; margin: 18px 0 0; }
.wm-preview-actions { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.wm-preview-actions button { min-height: 46px; border-radius: 100px; padding: 11px 17px;
  font: 700 12px/1.3 Arial, sans-serif; cursor: pointer; }
.wm-preview-add { background: #305546; color: white; border: 1px solid #305546; }
.wm-preview-add:hover { background: #224635; }
.wm-preview-zoom { color: #305546; border: 1px solid #b9cabc; background: #fffdf8; }
.wm-preview-modal button:focus-visible { outline: 3px solid #e58b51; outline-offset: 3px; }
@media(max-width:760px) {
  .wm-preview-modal { max-height: calc(100dvh - 16px); width: calc(100vw - 16px); max-width: calc(100vw - 16px); border-radius: 14px; }
  .wm-preview-layout { grid-template-columns: 1fr; padding: 14px; gap: 8px; }
  .wm-preview-top { padding: 10px 14px; }
  .wm-preview-image-wrap { max-height: 56dvh; min-height: 160px; }
  .wm-preview-image { max-height: calc(56dvh - 22px); }
  .wm-preview-info { padding: 14px 4px 18px; }
  .wm-preview-info h3 { margin-top: 20px; }
  .wm-preview-actions { margin-top: 20px; }
  .wm-preview-actions button { flex: 1 1 140px; }
  .wm-preview-zoomed .wm-preview-image { min-width: 600px; max-height: none; }
}