.p-image-wrap {
  position: relative;
  display: inline-block;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='0,0 16,0 16,16' fill='%23000000'/%3E%3C/svg%3E") 16 0, auto;
  z-index: 10;
  touch-action: pan-y pan-x pinch-zoom;
}

.p-image-wrap img {
  touch-action: pan-y pan-x pinch-zoom; 
  display: block;
}

/* Наследует стили от .p-image-wrap */
.p-image-wrap::before,
.p-image-wrap::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-color: rgba(0, 150, 255, 0.8);
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 10;
  box-sizing: border-box;
}

.p-image-wrap.hover-lines::before,
.p-image-wrap.hover-lines::after {
  opacity: 1 !important;
  z-index: 10;
  pointer-events: none; 
  touch-action: pan-y;
}
.p-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto; 
}

@media (max-width: 600px) { 
     .p-image-wrap::before,
     .p-image-wrap::after { display: none; }
     .p-image-wrap { cursor: default ; pointer-events: none; touch-action: pan-y; }
     .p-image-wrap[data-disabled="true"].hover-lines::before,
      .p-image-wrap[data-disabled="true"].hover-lines::after {  display: none !important; }
}