/* Modal styles */
.modal-outer .modal { display: none; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(33,37,41,0.9); justify-content: center; align-items: center; }
.modal-outer .modal-content { position: relative; padding: 20px; max-width: 100vw; max-height: 100vh; border-radius: 10px; overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; }
.modal-outer .modal-content img.image { max-width: 90%; max-height: 90%; object-fit: contain; transition: transform 0.05s linear; transform-origin: center center; cursor: grab; }
.modal-outer .modal-content img.image:active { cursor: grabbing; }
.modal-outer .close-btn { position: absolute; top: 10px; right: 20px; font-size: 30px; color: #fff; cursor: pointer; }

/* Inline zoom wrapper (thumbnail area) */
.zoom-wrapper { position: relative; overflow: hidden; }
.product-details-img img, .zoom-wrapper img { width: 100%; height: auto; transition: transform 0.15s ease; transform-origin: center center; cursor: crosshair; display: block; }
.zoom-wrapper:hover img { transform: scale(1.7); }
.product-details-img { overflow: hidden; }

/* Responsive touch hint (small overlay) */
.zoom-touch-hint { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.5); color: #fff; font-size: 12px; padding: 6px 8px; border-radius: 6px; display: none; }
@media (pointer: coarse) {
  .zoom-touch-hint { display: block; }
}

/* Prevent image selection while dragging */
img { -webkit-user-drag: none; user-drag: none; user-select: none; -webkit-user-select: none; }