/* Multi-photo tray (mm-photos.js) */
#mm-tray { margin-top: 18px; }
#mm-tray[hidden] { display: none; }
.mm-tray-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.mm-tray-title { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 15px; color: #1F1C18; }
.mm-tray-count { font-size: 12px; color: #7A736B; font-weight: 600; }
.mm-tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 12px; }
.mm-thumb {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px; background: #fff; padding: 5px;
  border: 1px solid #DDD5C7; box-shadow: 0 4px 10px -4px rgba(60, 40, 20, .25); cursor: pointer;
  transition: transform 200ms cubic-bezier(.22,1,.36,1), box-shadow 200ms cubic-bezier(.22,1,.36,1), border-color 200ms;
}
.mm-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.mm-thumb.is-active { border: 2px solid #C85A32; padding: 4px; }
.mm-thumb:focus-visible { outline: 3px solid #C85A32; outline-offset: 2px; }
@media (hover: hover) { .mm-thumb:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -8px rgba(60, 40, 20, .35); } }
.mm-thumb-num {
  position: absolute; left: 8px; bottom: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: rgba(255, 255, 255, .92); color: #1F1C18; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.mm-thumb-x {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
  background: #2D2A26; color: #fff; font-size: 17px; line-height: 1; border: 2px solid #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.mm-thumb-x:hover { background: #C85A32; }
.mm-thumb-add {
  border: 2px dashed #D9CEBF; background: #FAF7F2; box-shadow: none; color: #7C5A37; font-size: 12px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: inherit;
}
.mm-thumb-add:hover { border-color: #C85A32; color: #C85A32; }
.mm-plus { font-size: 26px; line-height: 1; font-weight: 400; }
.mm-tray-msg { margin-top: 12px; font-size: 13px; color: #5A534B; background: #FAF7F2; border: 1px solid #EFE5D5; border-radius: 10px; padding: 9px 12px; }
.mm-tray-msg.is-warn { background: #FFF4E5; border-color: #F3D2A2; color: #7A4B12; }