/* Modal — design.md §15: centered, max 560px, radius.2xl, shadow.modal,
   backdrop rgba ink 0.5 + blur(4px). Quick View variant is wider. */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(27, 24, 21, var(--opacity-overlay));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--easing-standard);
}

.modal-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--surface-background);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-modal);
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--space-8);
  position: relative;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--duration-base) var(--easing-entrance);
}

.modal-backdrop--open .modal { transform: none; }

.modal--wide { max-width: 920px; }

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--text-primary);
  z-index: 1;
}

.modal__close:hover { color: var(--accent-gold); }

/* Quick View layout — image left, details right (§11) */
.quick-view {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .quick-view { grid-template-columns: 1fr 1fr; }
}

.quick-view__img {
  aspect-ratio: 4 / 5;
  background: var(--color-neutral-50);
  overflow: hidden;
}

.quick-view__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}