/* ─── PRODUCT DETAIL MODAL ─── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-overlay.open { display: flex }
.modal {
  background: var(--bg-white); border-radius: var(--radius);
  max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); position: relative;
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: var(--bg-white); border: 1px solid var(--line);
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; z-index: 1;
}
.modal-img {
  aspect-ratio: 16/9; background: linear-gradient(135deg, #f5f0e8, #ede8dd);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); position: relative;
}
.modal-img img { width: 100%; height: 100%; object-fit: cover }
.modal-body { padding: 28px }
.modal-body h2 { font-size: 1.5rem; margin-bottom: 4px }
.modal-body .modal-cat {
  font-size: 0.78rem; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px;
}
.modal-body .modal-desc { margin-bottom: 20px; font-size: 0.95rem }
.modal-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 24px;
}
.modal-spec {
  padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm);
}
.modal-spec .spec-label { font-size: 0.72rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px }
.modal-spec .spec-value { font-size: 0.92rem; font-weight: 600; color: var(--ink) }
.modal-actions { display: flex; gap: 12px; align-items: center }
.qty-control {
  display: flex; align-items: center; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.qty-control button {
  width: 40px; height: 40px; border: none; background: var(--bg);
  cursor: pointer; font-size: 1.1rem; font-weight: 600; color: var(--ink);
}
.qty-control button:hover { background: #eee }
.qty-control input {
  width: 52px; height: 40px; border: none; text-align: center;
  font-size: 0.92rem; font-weight: 600; font-family: inherit;
  border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line);
}
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none }